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/app/(protected)/shifts/[id]/page.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { use } from 'react';
+import { useShift, useSignUpShift, useCancelSignUp } from '@/hooks/useShifts';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Badge } from '@/components/ui/badge';
+import { useRouter } from 'next/navigation';
+import { useSession } from 'next-auth/react';
+
+export default function ShiftDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const resolvedParams = use(params);
+  const { data: shift, isLoading } = useShift(resolvedParams.id);
+  const signUpMutation = useSignUpShift();
+  const cancelMutation = useCancelSignUp();
+  const router = useRouter();
+  const { data: session } = useSession();
+
+  if (isLoading) return <div>Loading shift...</div>;
+  if (!shift) return <div>Shift not found</div>;
+
+  const capacityPercentage = (shift.signups.length / shift.capacity) * 100;
+  const isFull = shift.signups.length >= shift.capacity;
+  const isPast = new Date(shift.startTime) < new Date();
+  const isSignedUp = shift.signups.some((s) => s.memberId === session?.user?.id);
+
+  const handleSignUp = async () => {
+    await signUpMutation.mutateAsync(shift.id);
+  };
+
+  const handleCancelSignUp = async () => {
+    await cancelMutation.mutateAsync(shift.id);
+  };
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <Card>
+        <CardHeader>
+          <div className="flex justify-between items-start">
+            <CardTitle className="text-3xl">{shift.title}</CardTitle>
+            {isPast && <Badge variant="secondary">Past</Badge>}
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="grid gap-4">
+            <div>
+              <strong>Time:</strong> {new Date(shift.startTime).toLocaleString()} - {new Date(shift.endTime).toLocaleTimeString()}
+            </div>
+            {shift.location && (
+              <div><strong>Location:</strong> {shift.location}</div>
+            )}
+            {shift.description && (
+              <div><strong>Description:</strong> {shift.description}</div>
+            )}
+          </div>
+
+          <div>
+            <div className="flex justify-between text-sm mb-2">
+              <span className="font-semibold">Capacity</span>
+              <span>{shift.signups.length}/{shift.capacity} spots filled</span>
+            </div>
+            <Progress value={capacityPercentage} />
+          </div>
+
+          <div>
+            <h3 className="font-semibold mb-2">Signed Up Members ({shift.signups.length})</h3>
+            {shift.signups.length === 0 ? (
+              <p className="text-sm text-muted-foreground">No sign-ups yet</p>
+            ) : (
+              <ul className="list-disc list-inside text-sm">
+                {shift.signups.map((signup) => (
+                  <li key={signup.id}>Member ID: {signup.memberId}</li>
+                ))}
+              </ul>
+            )}
+          </div>
+
+          <div className="flex gap-2">
+            {!isPast && !isFull && !isSignedUp && (
+              <Button onClick={handleSignUp} disabled={signUpMutation.isPending}>
+                {signUpMutation.isPending ? 'Signing up...' : 'Sign Up'}
+              </Button>
+            )}
+            {!isPast && isSignedUp && (
+              <Button variant="outline" onClick={handleCancelSignUp} disabled={cancelMutation.isPending}>
+                {cancelMutation.isPending ? 'Canceling...' : 'Cancel Sign-up'}
+              </Button>
+            )}
+            <Button variant="outline" onClick={() => router.back()}>
+              Back to Shifts
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}