diff --git a/maternal-web/app/children/page.tsx b/maternal-web/app/children/page.tsx index 53b43ff..fc4324b 100644 --- a/maternal-web/app/children/page.tsx +++ b/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([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(''); @@ -40,8 +42,10 @@ export default function ChildrenPage() { const [childToDelete, setChildToDelete] = useState(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')} - + {canAddChildren && ( + + )} {error && ( @@ -201,14 +207,16 @@ export default function ChildrenPage() { {t('noChildrenSubtitle')} - + {canAddChildren && ( + + )} @@ -263,12 +271,16 @@ export default function ChildrenPage() { - handleEditChild(child)} sx={{ minWidth: 48, minHeight: 48 }}> - - - handleDeleteClick(child)} sx={{ minWidth: 48, minHeight: 48 }}> - - + {canEditChildren && ( + handleEditChild(child)} sx={{ minWidth: 48, minHeight: 48 }}> + + + )} + {canDeleteChildren && ( + handleDeleteClick(child)} sx={{ minWidth: 48, minHeight: 48 }}> + + + )} diff --git a/maternal-web/app/family/page.tsx b/maternal-web/app/family/page.tsx index a5dca0b..86be481 100644 --- a/maternal-web/app/family/page.tsx +++ b/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(null); const [members, setMembers] = useState([]); const [loading, setLoading] = useState(true); @@ -54,6 +54,9 @@ export default function FamilyPage() { const [snackbar, setSnackbar] = useState({ open: false, message: '' }); const [familyNames, setFamilyNames] = useState>({}); + // 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')} - + {isParent && ( + + )} @@ -318,15 +323,17 @@ export default function FamilyPage() { {t('buttons.copyCode')} - + {isParent && ( + + )} )} @@ -347,13 +354,15 @@ export default function FamilyPage() { {t('members.noMembersDescription')} - + {isParent && ( + + )} ) : ( @@ -400,7 +409,7 @@ export default function FamilyPage() { color={getRoleColor(member.role)} sx={{ borderRadius: 1, mr: 1 }} /> - {!isCurrentUser(member.userId) && ( + {isParent && !isCurrentUser(member.userId) && ( handleRemoveClick(member)}