fix: Enforce role-based permissions in frontend

Fixed critical permission bypass where viewers could:
- Remove family members (now only parents can)
- Invite new members (now only parents can)
- Generate share codes (now only parents can)
- Add children (now only parents can)
- Edit children (now only parents and caregivers can)
- Delete children (now only parents can)

Changes:
- Family page: Added isParent checks for all admin actions
- Children page: Added canAddChildren, canEditChildren, canDeleteChildren checks
- Both pages now use useSelectedFamily hook for consistent role access

Backend already had correct permission checks - this fixes the frontend to respect them.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/app/children/page.tsx

@@ -26,11 +26,13 @@ import { DeleteConfirmDialog } from '@/components/children/DeleteConfirmDialog';
 import { motion } from 'framer-motion';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useLocalizedDate } from '@/hooks/useLocalizedDate';
+import { useSelectedFamily } from '@/hooks/useSelectedFamily';
 
 export default function ChildrenPage() {
   const { t } = useTranslation('children');
   const { user } = useAuth();
   const { format: formatDate } = useLocalizedDate();
+  const { familyId, familyRole } = useSelectedFamily();
   const [children, setChildren] = useState<Child[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string>('');
@@ -40,8 +42,10 @@ export default function ChildrenPage() {
   const [childToDelete, setChildToDelete] = useState<Child | null>(null);
   const [actionLoading, setActionLoading] = useState(false);
 
-  // Get familyId from user
+  // Permission checks based on role
-  const familyId = user?.families?.[0]?.familyId;
+  const canAddChildren = familyRole === 'parent';
+  const canEditChildren = familyRole === 'parent' || familyRole === 'caregiver';
+  const canDeleteChildren = familyRole === 'parent';
 
   useEffect(() => {
     if (familyId) {
@@ -164,19 +168,21 @@ export default function ChildrenPage() {
                 {t('subtitle')}
               </Typography>
             </Box>
-            <Button
+            {canAddChildren && (
-              variant="contained"
+              <Button
-              startIcon={<Add />}
+                variant="contained"
-              onClick={handleAddChild}
+                startIcon={<Add />}
-              disabled={loading || !familyId}
+                onClick={handleAddChild}
-              sx={{
+                disabled={loading || !familyId}
-                borderRadius: 2,
+                sx={{
-                textTransform: 'none',
+                  borderRadius: 2,
-                px: 3
+                  textTransform: 'none',
-              }}
+                  px: 3
-            >
+                }}
-              {t('addChild')}
+              >
-            </Button>
+                {t('addChild')}
+              </Button>
+            )}
           </Box>
 
           {error && (
@@ -201,14 +207,16 @@ export default function ChildrenPage() {
                     <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                       {t('noChildrenSubtitle')}
                     </Typography>
-                    <Button
+                    {canAddChildren && (
-                      variant="contained"
+                      <Button
-                      startIcon={<Add />}
+                        variant="contained"
-                      onClick={handleAddChild}
+                        startIcon={<Add />}
-                      disabled={!familyId}
+                        onClick={handleAddChild}
-                    >
+                        disabled={!familyId}
-                      {t('addFirstChild')}
+                      >
-                    </Button>
+                        {t('addFirstChild')}
+                      </Button>
+                    )}
                   </CardContent>
                 </Card>
               </Grid>
@@ -263,12 +271,16 @@ export default function ChildrenPage() {
                       </Box>
 
                       <Box sx={{ display: 'flex', gap: 1, mt: 2, justifyContent: { xs: 'center', sm: 'flex-start' } }}>
-                        <IconButton size="medium" color="primary" onClick={() => handleEditChild(child)} sx={{ minWidth: 48, minHeight: 48 }}>
+                        {canEditChildren && (
-                          <Edit />
+                          <IconButton size="medium" color="primary" onClick={() => handleEditChild(child)} sx={{ minWidth: 48, minHeight: 48 }}>
-                        </IconButton>
+                            <Edit />
-                        <IconButton size="medium" color="error" onClick={() => handleDeleteClick(child)} sx={{ minWidth: 48, minHeight: 48 }}>
+                          </IconButton>
-                          <Delete />
+                        )}
-                        </IconButton>
+                        {canDeleteChildren && (
+                          <IconButton size="medium" color="error" onClick={() => handleDeleteClick(child)} sx={{ minWidth: 48, minHeight: 48 }}>
+                            <Delete />
+                          </IconButton>
+                        )}
                       </Box>
                     </Paper>
                   </motion.div>

maternal-web/app/family/page.tsx

@@ -41,7 +41,7 @@ import { useSelectedFamily } from '@/hooks/useSelectedFamily';
 export default function FamilyPage() {
   const { t } = useTranslation('family');
   const { user, refreshUser } = useAuth();
-  const { familyId, selectedIndex, setSelectedIndex, userFamilies, hasMultipleFamilies } = useSelectedFamily();
+  const { familyId, familyRole, selectedIndex, setSelectedIndex, userFamilies, hasMultipleFamilies } = useSelectedFamily();
   const [family, setFamily] = useState<Family | null>(null);
   const [members, setMembers] = useState<FamilyMember[]>([]);
   const [loading, setLoading] = useState(true);
@@ -54,6 +54,9 @@ export default function FamilyPage() {
   const [snackbar, setSnackbar] = useState({ open: false, message: '' });
   const [familyNames, setFamilyNames] = useState<Record<string, string>>({});
 
+  // Check if current user is a parent (has admin permissions)
+  const isParent = familyRole === 'parent';
+
   useEffect(() => {
     if (familyId) {
       fetchFamilyData();
@@ -229,15 +232,17 @@ export default function FamilyPage() {
               >
                 {t('buttons.joinFamily')}
               </Button>
-              <Button
+              {isParent && (
-                variant="contained"
+                <Button
-                startIcon={<PersonAdd />}
+                  variant="contained"
-                onClick={() => setInviteDialogOpen(true)}
+                  startIcon={<PersonAdd />}
-                disabled={loading || !familyId}
+                  onClick={() => setInviteDialogOpen(true)}
-                sx={{ borderRadius: 2, textTransform: 'none' }}
+                  disabled={loading || !familyId}
-              >
+                  sx={{ borderRadius: 2, textTransform: 'none' }}
-                {t('buttons.inviteMember')}
+                >
-              </Button>
+                  {t('buttons.inviteMember')}
+                </Button>
+              )}
             </Box>
           </Box>
 
@@ -318,15 +323,17 @@ export default function FamilyPage() {
                         {t('buttons.copyCode')}
                       </Button>
                     </Box>
-                    <Button
+                    {isParent && (
-                      variant="text"
+                      <Button
-                      size="small"
+                        variant="text"
-                      onClick={handleGenerateShareCode}
+                        size="small"
-                      disabled={actionLoading}
+                        onClick={handleGenerateShareCode}
-                      sx={{ borderRadius: 2, textTransform: 'none' }}
+                        disabled={actionLoading}
-                    >
+                        sx={{ borderRadius: 2, textTransform: 'none' }}
-                      Generate New Code
+                      >
-                    </Button>
+                        Generate New Code
+                      </Button>
+                    )}
                   </Paper>
                 </Grid>
               )}
@@ -347,13 +354,15 @@ export default function FamilyPage() {
                         <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                           {t('members.noMembersDescription')}
                         </Typography>
-                        <Button
+                        {isParent && (
-                          variant="outlined"
+                          <Button
-                          startIcon={<PersonAdd />}
+                            variant="outlined"
-                          onClick={() => setInviteDialogOpen(true)}
+                            startIcon={<PersonAdd />}
-                        >
+                            onClick={() => setInviteDialogOpen(true)}
-                          {t('buttons.inviteFirstMember')}
+                          >
-                        </Button>
+                            {t('buttons.inviteFirstMember')}
+                          </Button>
+                        )}
                       </Box>
                     ) : (
                       <List sx={{ p: 0 }}>
@@ -400,7 +409,7 @@ export default function FamilyPage() {
                                   color={getRoleColor(member.role)}
                                   sx={{ borderRadius: 1, mr: 1 }}
                                 />
-                                {!isCurrentUser(member.userId) && (
+                                {isParent && !isCurrentUser(member.userId) && (
                                   <IconButton
                                     size="small"
                                     onClick={() => handleRemoveClick(member)}