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/components/__tests__/shift-detail.test.tsx

@@ -0,0 +1,124 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { Suspense } from 'react';
+import ShiftDetailPage from '../../app/(protected)/shifts/[id]/page';
+
+vi.mock('@/hooks/useShifts', () => ({
+  useShift: vi.fn(),
+  useSignUpShift: vi.fn(),
+  useCancelSignUp: vi.fn(),
+}));
+
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(() => ({
+    push: vi.fn(),
+    back: vi.fn(),
+  })),
+}));
+
+vi.mock('@/contexts/tenant-context', () => ({
+  useTenant: vi.fn(() => ({
+    activeClubId: 'club-123',
+    userRole: 'Member',
+  })),
+}));
+
+vi.mock('next-auth/react', () => ({
+  useSession: vi.fn(() => ({
+    data: { user: { id: 'user-123' } },
+    status: 'authenticated',
+  })),
+}));
+
+import { useShift, useSignUpShift, useCancelSignUp } from '@/hooks/useShifts';
+
+describe('ShiftDetailPage', () => {
+  const mockSignUp = vi.fn();
+  const mockCancel = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useSignUpShift as any).mockReturnValue({ mutateAsync: mockSignUp, isPending: false });
+    (useCancelSignUp as any).mockReturnValue({ mutateAsync: mockCancel, isPending: false });
+  });
+
+  it('shows "Sign Up" button if capacity available', async () => {
+    (useShift as any).mockReturnValue({
+      data: {
+        id: '1',
+        title: 'Detail Shift',
+        startTime: new Date(Date.now() + 100000).toISOString(),
+        endTime: new Date(Date.now() + 200000).toISOString(),
+        capacity: 3,
+        signups: [{ id: 's1', memberId: 'other-user' }],
+      },
+      isLoading: false,
+    });
+
+    const params = Promise.resolve({ id: '1' });
+    await act(async () => {
+      render(
+        <Suspense fallback={<div>Loading...</div>}>
+          <ShiftDetailPage params={params} />
+        </Suspense>
+      );
+    });
+    
+    expect(screen.getByRole('button', { name: 'Sign Up' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Cancel Sign-up' })).not.toBeInTheDocument();
+  });
+
+  it('shows "Cancel Sign-up" button if user is signed up', async () => {
+    (useShift as any).mockReturnValue({
+      data: {
+        id: '1',
+        title: 'Detail Shift',
+        startTime: new Date(Date.now() + 100000).toISOString(),
+        endTime: new Date(Date.now() + 200000).toISOString(),
+        capacity: 3,
+        signups: [{ id: 's1', memberId: 'user-123' }],
+      },
+      isLoading: false,
+    });
+
+    const params = Promise.resolve({ id: '1' });
+    await act(async () => {
+      render(
+        <Suspense fallback={<div>Loading...</div>}>
+          <ShiftDetailPage params={params} />
+        </Suspense>
+      );
+    });
+    
+    expect(screen.getByRole('button', { name: 'Cancel Sign-up' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Sign Up' })).not.toBeInTheDocument();
+  });
+
+  it('calls sign up mutation on click', async () => {
+    (useShift as any).mockReturnValue({
+      data: {
+        id: '1',
+        title: 'Detail Shift',
+        startTime: new Date(Date.now() + 100000).toISOString(),
+        endTime: new Date(Date.now() + 200000).toISOString(),
+        capacity: 3,
+        signups: [],
+      },
+      isLoading: false,
+    });
+
+    const params = Promise.resolve({ id: '1' });
+    await act(async () => {
+      render(
+        <Suspense fallback={<div>Loading...</div>}>
+          <ShiftDetailPage params={params} />
+        </Suspense>
+      );
+    });
+    
+    const signUpBtn = screen.getByRole('button', { name: 'Sign Up' });
+    fireEvent.click(signUpBtn);
+    
+    expect(mockSignUp).toHaveBeenCalledWith('1');
+  });
+});