diff --git a/frontend/src/components/ChoreCard.tsx b/frontend/src/components/ChoreCard.tsx index 4b2a39f..cfac003 100644 --- a/frontend/src/components/ChoreCard.tsx +++ b/frontend/src/components/ChoreCard.tsx @@ -1,13 +1,16 @@ import React from 'react'; import { Chore } from '../api/chores'; +import { useAuth } from '../contexts/AuthContext'; interface ChoreCardProps { chore: Chore; onComplete: (id: number) => void; onDelete: (id: number) => void; + onEdit?: (id: number) => void; } -const ChoreCard: React.FC = ({ chore, onComplete, onDelete }) => { +const ChoreCard: React.FC = ({ chore, onComplete, onDelete, onEdit }) => { + const { user } = useAuth(); const statusColors = { pending: 'bg-yellow-100 text-yellow-800', in_progress: 'bg-blue-100 text-blue-800', @@ -18,14 +21,35 @@ const ChoreCard: React.FC = ({ chore, onComplete, onDelete }) => const frequencyIcons = { daily: '📅', weekly: '📆', - monthly: '🗓️', - once: '⏱️', + fortnightly: '🗓️', + monthly: '📊', + on_trigger: '⏱️', }; + // Check if current user is assigned to this chore + const isAssignedToMe = chore.assigned_users?.some(u => u.id === user?.id); + const myAssignment = chore.assigned_users?.find(u => u.id === user?.id); + const myCompletionStatus = myAssignment?.completed_at ? 'completed' : chore.status; + + // Check if today is anyone's birthday + const today = new Date(); + const hasBirthdayUser = chore.assigned_users?.some(u => { + if (!u.birthday) return false; + const bday = new Date(u.birthday); + return bday.getMonth() === today.getMonth() && bday.getDate() === today.getDate(); + }); + return (
-

{chore.title}

+
+

{chore.title}

+ {chore.points > 0 && ( +
+ ⭐ {chore.points} pts +
+ )} +
{chore.status.replace('_', ' ')} @@ -44,16 +68,39 @@ const ChoreCard: React.FC = ({ chore, onComplete, onDelete }) =>
- {frequencyIcons[chore.frequency]} - {chore.frequency} + {frequencyIcons[chore.frequency] || '📋'} + {chore.frequency.replace('_', ' ')}
- {chore.assigned_user && ( -
- - - - {chore.assigned_user.full_name} + {/* Assigned Users */} + {chore.assigned_users && chore.assigned_users.length > 0 && ( +
+
+ + + + Assigned to: +
+
+ {chore.assigned_users.map(assignedUser => { + const isBirthday = assignedUser.birthday && (() => { + const bday = new Date(assignedUser.birthday); + return bday.getMonth() === today.getMonth() && bday.getDate() === today.getDate(); + })(); + + return ( +
+ + {assignedUser.full_name} + {isBirthday && ' 🎂'} + + {assignedUser.completed_at && ( + ✓ Done + )} +
+ ); + })} +
)} @@ -68,21 +115,50 @@ const ChoreCard: React.FC = ({ chore, onComplete, onDelete }) =>
- {chore.status !== 'completed' && ( + {isAssignedToMe && myCompletionStatus !== 'completed' && ( )} - + + {user?.is_admin && onEdit && ( + + )} + + {user?.is_admin && ( + + )}
+ + {hasBirthdayUser && ( +
+

+ 🎂 + Birthday chore! Give them a break today. +

+
+ )}
); };