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
-  const familyId = user?.families?.[0]?.familyId;
+  // Permission checks based on role
+  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
-              variant="contained"
-              startIcon={<Add />}
-              onClick={handleAddChild}
-              disabled={loading || !familyId}
-              sx={{
-                borderRadius: 2,
-                textTransform: 'none',
-                px: 3
-              }}
-            >
-              {t('addChild')}
-            </Button>
+            {canAddChildren && (
+              <Button
+                variant="contained"
+                startIcon={<Add />}
+                onClick={handleAddChild}
+                disabled={loading || !familyId}
+                sx={{
+                  borderRadius: 2,
+                  textTransform: 'none',
+                  px: 3
+                }}
+              >
+                {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
-                      variant="contained"
-                      startIcon={<Add />}
-                      onClick={handleAddChild}
-                      disabled={!familyId}
-                    >
-                      {t('addFirstChild')}
-                    </Button>
+                    {canAddChildren && (
+                      <Button
+                        variant="contained"
+                        startIcon={<Add />}
+                        onClick={handleAddChild}
+                        disabled={!familyId}
+                      >
+                        {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 }}>
-                          <Edit />
-                        </IconButton>
-                        <IconButton size="medium" color="error" onClick={() => handleDeleteClick(child)} sx={{ minWidth: 48, minHeight: 48 }}>
-                          <Delete />
-                        </IconButton>
+                        {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>