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/new/page.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { useState } from 'react';
+import { useCreateShift } from '@/hooks/useShifts';
+import { useTenant } from '@/contexts/tenant-context';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { useRouter } from 'next/navigation';
+
+export default function NewShiftPage() {
+  const { mutateAsync: createShift, isPending, error } = useCreateShift();
+  const { activeClubId } = useTenant();
+  const router = useRouter();
+
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    location: '',
+    startTime: '',
+    endTime: '',
+    capacity: 5,
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!activeClubId) return;
+
+    try {
+      const data = await createShift({
+        ...formData,
+        startTime: new Date(formData.startTime).toISOString(),
+        endTime: new Date(formData.endTime).toISOString(),
+        clubId: activeClubId,
+      });
+
+      router.push(`/shifts/${data.id}`);
+    } catch (err) {
+      console.error('Failed to create shift', err);
+    }
+  };
+
+  return (
+    <div className="p-6 max-w-2xl mx-auto">
+      <Card>
+        <CardHeader>
+          <CardTitle>Create New Shift</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Title *</label>
+              <Input
+                value={formData.title}
+                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+                required
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">Description</label>
+              <Textarea
+                value={formData.description}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">Location</label>
+              <Input
+                value={formData.location}
+                onChange={(e) => setFormData({ ...formData, location: e.target.value })}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">Start Time *</label>
+                <Input
+                  type="datetime-local"
+                  value={formData.startTime}
+                  onChange={(e) => setFormData({ ...formData, startTime: e.target.value })}
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">End Time *</label>
+                <Input
+                  type="datetime-local"
+                  value={formData.endTime}
+                  onChange={(e) => setFormData({ ...formData, endTime: e.target.value })}
+                  required
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">Capacity *</label>
+              <Input
+                type="number"
+                min={1}
+                value={formData.capacity}
+                onChange={(e) => setFormData({ ...formData, capacity: parseInt(e.target.value) })}
+                required
+              />
+            </div>
+
+            {error && (
+              <div className="text-sm text-destructive">{error.message}</div>
+            )}
+
+            <div className="flex gap-2">
+              <Button type="submit" disabled={isPending || !formData.title.trim() || !formData.startTime || !formData.endTime}>
+                {isPending ? 'Creating...' : 'Create Shift'}
+              </Button>
+              <Button type="button" variant="outline" onClick={() => router.back()}>
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}