feat(ui): add shift management UI with list, detail, and sign-up

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.

frontend/src/hooks/useShifts.ts

@@ -0,0 +1,137 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTenant } from '@/contexts/tenant-context';
+import { apiClient } from '@/lib/api';
+
+export interface ShiftListDto {
+  items: ShiftListItemDto[];
+  total: number;
+  page: number;
+  pageSize: number;
+}
+
+export interface ShiftListItemDto {
+  id: string;
+  title: string;
+  startTime: string;
+  endTime: string;
+  capacity: number;
+  currentSignups: number;
+}
+
+export interface ShiftDetailDto {
+  id: string;
+  title: string;
+  description?: string;
+  location?: string;
+  startTime: string;
+  endTime: string;
+  capacity: number;
+  signups: ShiftSignupDto[];
+  clubId: string;
+  createdById: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ShiftSignupDto {
+  id: string;
+  memberId: string;
+  signedUpAt: string;
+}
+
+export interface CreateShiftRequest {
+  title: string;
+  description?: string;
+  location?: string;
+  startTime: string;
+  endTime: string;
+  capacity: number;
+  clubId: string;
+}
+
+export function useShifts(filters?: { startDate?: string; endDate?: string; page?: number }) {
+  const { activeClubId } = useTenant();
+
+  return useQuery<ShiftListDto>({
+    queryKey: ['shifts', activeClubId, filters],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      if (filters?.startDate) params.append('startDate', filters.startDate);
+      if (filters?.endDate) params.append('endDate', filters.endDate);
+      if (filters?.page) params.append('page', filters.page.toString());
+      
+      const res = await apiClient(`/api/shifts?${params}`);
+      if (!res.ok) throw new Error('Failed to fetch shifts');
+      return res.json();
+    },
+    enabled: !!activeClubId,
+  });
+}
+
+export function useShift(id: string) {
+  const { activeClubId } = useTenant();
+
+  return useQuery<ShiftDetailDto>({
+    queryKey: ['shifts', activeClubId, id],
+    queryFn: async () => {
+      const res = await apiClient(`/api/shifts/${id}`);
+      if (!res.ok) throw new Error('Failed to fetch shift');
+      return res.json();
+    },
+    enabled: !!activeClubId && !!id,
+  });
+}
+
+export function useCreateShift() {
+  const queryClient = useQueryClient();
+  const { activeClubId } = useTenant();
+
+  return useMutation({
+    mutationFn: async (data: CreateShiftRequest) => {
+      const res = await apiClient('/api/shifts', {
+        method: 'POST',
+        body: JSON.stringify(data),
+      });
+      if (!res.ok) throw new Error('Failed to create shift');
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['shifts', activeClubId] });
+    },
+  });
+}
+
+export function useSignUpShift() {
+  const queryClient = useQueryClient();
+  const { activeClubId } = useTenant();
+
+  return useMutation({
+    mutationFn: async (shiftId: string) => {
+      const res = await apiClient(`/api/shifts/${shiftId}/signup`, {
+        method: 'POST',
+      });
+      if (!res.ok) throw new Error('Failed to sign up');
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['shifts', activeClubId] });
+    },
+  });
+}
+
+export function useCancelSignUp() {
+  const queryClient = useQueryClient();
+  const { activeClubId } = useTenant();
+
+  return useMutation({
+    mutationFn: async (shiftId: string) => {
+      const res = await apiClient(`/api/shifts/${shiftId}/signup`, {
+        method: 'DELETE',
+      });
+      if (!res.ok) throw new Error('Failed to cancel sign-up');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['shifts', activeClubId] });
+    },
+  });
+}