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.
This commit is contained in:
WorkClub Automation
98
frontend/src/app/(protected)/shifts/[id]/page.tsx
Normal file
98
frontend/src/app/(protected)/shifts/[id]/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
127
frontend/src/app/(protected)/shifts/new/page.tsx
Normal file
127
frontend/src/app/(protected)/shifts/new/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
35
frontend/src/app/(protected)/shifts/page.tsx
Normal file
35
frontend/src/app/(protected)/shifts/page.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useShifts } from '@/hooks/useShifts';
|
||||
import { useTenant } from '@/contexts/tenant-context';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Link from 'next/link';
|
||||
import { ShiftCard } from '@/components/shifts/shift-card';
|
||||
|
||||
export default function ShiftsPage() {
|
||||
const [dateRange] = useState<{ startDate?: string; endDate?: string }>({});
|
||||
const { data, isLoading } = useShifts(dateRange);
|
||||
const { userRole } = useTenant();
|
||||
|
||||
if (isLoading) return <div>Loading shifts...</div>;
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold">Shifts</h1>
|
||||
{(userRole === 'Manager' || userRole === 'Admin') && (
|
||||
<Link href="/shifts/new">
|
||||
<Button>New Shift</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{data?.items.map((shift) => (
|
||||
<ShiftCard key={shift.id} shift={shift} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user