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,6 +168,7 @@ export default function ChildrenPage() {
                 {t('subtitle')}
               </Typography>
             </Box>
+            {canAddChildren && (
               <Button
                 variant="contained"
                 startIcon={<Add />}
@@ -177,6 +182,7 @@ export default function ChildrenPage() {
               >
                 {t('addChild')}
               </Button>
+            )}
           </Box>
 
           {error && (
@@ -201,6 +207,7 @@ export default function ChildrenPage() {
                     <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                       {t('noChildrenSubtitle')}
                     </Typography>
+                    {canAddChildren && (
                       <Button
                         variant="contained"
                         startIcon={<Add />}
@@ -209,6 +216,7 @@ export default function ChildrenPage() {
                       >
                         {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' } }}>
+                        {canEditChildren && (
                           <IconButton size="medium" color="primary" onClick={() => handleEditChild(child)} sx={{ minWidth: 48, minHeight: 48 }}>
                             <Edit />
                           </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,6 +232,7 @@ export default function FamilyPage() {
               >
                 {t('buttons.joinFamily')}
               </Button>
+              {isParent && (
                 <Button
                   variant="contained"
                   startIcon={<PersonAdd />}
@@ -238,6 +242,7 @@ export default function FamilyPage() {
                 >
                   {t('buttons.inviteMember')}
                 </Button>
+              )}
             </Box>
           </Box>
 
@@ -318,6 +323,7 @@ export default function FamilyPage() {
                         {t('buttons.copyCode')}
                       </Button>
                     </Box>
+                    {isParent && (
                       <Button
                         variant="text"
                         size="small"
@@ -327,6 +333,7 @@ export default function FamilyPage() {
                       >
                         Generate New Code
                       </Button>
+                    )}
                   </Paper>
                 </Grid>
               )}
@@ -347,6 +354,7 @@ export default function FamilyPage() {
                         <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                           {t('members.noMembersDescription')}
                         </Typography>
+                        {isParent && (
                           <Button
                             variant="outlined"
                             startIcon={<PersonAdd />}
@@ -354,6 +362,7 @@ export default function FamilyPage() {
                           >
                             {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)}