817c9ba53711f7a6fb937fe770db0c8ac8e47cf3
Implements Task 20: Shift Sign-Up UI - List + Detail + Create Pages New components: - useShifts hook: TanStack Query hooks (useShifts, useShift, useCreateShift, useSignUpShift, useCancelSignUp) - Shift list page: Card-based UI (NOT table) with capacity bars and Past badges - Shift detail page: Full info with sign-up/cancel buttons, member list - New shift form: Create shifts with title, description, location, times, capacity - ShiftCard component: Reusable card with capacity Progress bar Key features: - Card-based UI pattern (shadcn Card, NOT Table - more visual for schedules) - Capacity calculation: (currentSignups / capacity) * 100 for Progress bar - Past shift detection: new Date(startTime) < new Date() → shows 'Past' badge - Sign-up button visibility: !isPast && !isFull && !isSignedUp - Cancel button visibility: !isPast && isSignedUp - Role-based 'New Shift' button: Manager/Admin only - TanStack Query with automatic cache invalidation on mutations - Navigation includes Shifts link in sidebar New shadcn components: - Progress: Radix UI progress bar with transform-based fill - Textarea: Styled textarea for shift descriptions TDD: - 3 shift card tests (capacity display, full capacity, past shifts) - 3 shift detail tests (sign-up button, cancel button, mutation calls) All tests pass (37/37: 31 existing + 6 new). Build succeeds.
Description
No description provided