167 lines
7.2 KiB
TypeScript
167 lines
7.2 KiB
TypeScript
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<ChoreCardProps> = ({ chore, onComplete, onDelete, onEdit }) => {
|
|
const { user } = useAuth();
|
|
const statusColors = {
|
|
pending: 'bg-yellow-100 text-yellow-800',
|
|
in_progress: 'bg-blue-100 text-blue-800',
|
|
completed: 'bg-green-100 text-green-800',
|
|
skipped: 'bg-gray-100 text-gray-800',
|
|
};
|
|
|
|
const frequencyIcons = {
|
|
daily: '📅',
|
|
weekly: '📆',
|
|
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 (
|
|
<div className="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow">
|
|
<div className="flex justify-between items-start mb-3">
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-semibold text-gray-900">{chore.title}</h3>
|
|
{chore.points > 0 && (
|
|
<div className="flex items-center mt-1">
|
|
<span className="text-sm font-medium text-amber-600">⭐ {chore.points} pts</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${statusColors[chore.status]}`}>
|
|
{chore.status.replace('_', ' ')}
|
|
</span>
|
|
</div>
|
|
|
|
{chore.description && (
|
|
<p className="text-sm text-gray-600 mb-3">{chore.description}</p>
|
|
)}
|
|
|
|
<div className="space-y-2 mb-4">
|
|
<div className="flex items-center text-sm text-gray-500">
|
|
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
|
</svg>
|
|
<span className="font-medium">{chore.room}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center text-sm text-gray-500">
|
|
<span className="mr-2">{frequencyIcons[chore.frequency] || '📋'}</span>
|
|
<span className="capitalize">{chore.frequency.replace('_', ' ')}</span>
|
|
</div>
|
|
|
|
{/* Assigned Users */}
|
|
{chore.assigned_users && chore.assigned_users.length > 0 && (
|
|
<div className="space-y-1">
|
|
<div className="flex items-center text-sm font-medium text-gray-700">
|
|
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
</svg>
|
|
Assigned to:
|
|
</div>
|
|
<div className="pl-6 space-y-1">
|
|
{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 (
|
|
<div key={assignedUser.id} className="flex items-center justify-between text-sm">
|
|
<span className={`${assignedUser.id === user?.id ? 'font-medium text-blue-600' : 'text-gray-600'}`}>
|
|
{assignedUser.full_name}
|
|
{isBirthday && ' 🎂'}
|
|
</span>
|
|
{assignedUser.completed_at && (
|
|
<span className="text-xs text-green-600">✓ Done</span>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{chore.due_date && (
|
|
<div className="flex items-center text-sm text-gray-500">
|
|
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
<span>{new Date(chore.due_date).toLocaleDateString()}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
{isAssignedToMe && myCompletionStatus !== 'completed' && (
|
|
<button
|
|
onClick={() => onComplete(chore.id)}
|
|
className="flex-1 px-3 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 transition-colors flex items-center justify-center gap-1"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Complete
|
|
</button>
|
|
)}
|
|
|
|
{user?.is_admin && onEdit && (
|
|
<button
|
|
onClick={() => onEdit(chore.id)}
|
|
className="px-3 py-2 bg-blue-100 text-blue-700 text-sm rounded-lg hover:bg-blue-200 transition-colors flex items-center gap-1"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
Edit
|
|
</button>
|
|
)}
|
|
|
|
{user?.is_admin && (
|
|
<button
|
|
onClick={() => onDelete(chore.id)}
|
|
className="px-3 py-2 bg-red-100 text-red-700 text-sm rounded-lg hover:bg-red-200 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{hasBirthdayUser && (
|
|
<div className="mt-3 pt-3 border-t border-gray-200">
|
|
<p className="text-xs text-purple-600 flex items-center gap-1">
|
|
<span>🎂</span>
|
|
<span>Birthday chore! Give them a break today.</span>
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChoreCard;
|