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/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
-                variant="contained"
-                startIcon={<PersonAdd />}
-                onClick={() => setInviteDialogOpen(true)}
-                disabled={loading || !familyId}
-                sx={{ borderRadius: 2, textTransform: 'none' }}
-              >
-                {t('buttons.inviteMember')}
-              </Button>
+              {isParent && (
+                <Button
+                  variant="contained"
+                  startIcon={<PersonAdd />}
+                  onClick={() => setInviteDialogOpen(true)}
+                  disabled={loading || !familyId}
+                  sx={{ borderRadius: 2, textTransform: 'none' }}
+                >
+                  {t('buttons.inviteMember')}
+                </Button>
+              )}
             </Box>
           </Box>
 
@@ -318,15 +323,17 @@ export default function FamilyPage() {
                         {t('buttons.copyCode')}
                       </Button>
                     </Box>
-                    <Button
-                      variant="text"
-                      size="small"
-                      onClick={handleGenerateShareCode}
-                      disabled={actionLoading}
-                      sx={{ borderRadius: 2, textTransform: 'none' }}
-                    >
-                      Generate New Code
-                    </Button>
+                    {isParent && (
+                      <Button
+                        variant="text"
+                        size="small"
+                        onClick={handleGenerateShareCode}
+                        disabled={actionLoading}
+                        sx={{ borderRadius: 2, textTransform: 'none' }}
+                      >
+                        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
-                          variant="outlined"
-                          startIcon={<PersonAdd />}
-                          onClick={() => setInviteDialogOpen(true)}
-                        >
-                          {t('buttons.inviteFirstMember')}
-                        </Button>
+                        {isParent && (
+                          <Button
+                            variant="outlined"
+                            startIcon={<PersonAdd />}
+                            onClick={() => setInviteDialogOpen(true)}
+                          >
+                            {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)}