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
55
frontend/src/components/__tests__/shift-card.test.tsx
Normal file
55
frontend/src/components/__tests__/shift-card.test.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ShiftCard } from '../shifts/shift-card';
|
||||
|
||||
describe('ShiftCard', () => {
|
||||
it('shows capacity correctly (2/3 spots filled)', () => {
|
||||
render(
|
||||
<ShiftCard
|
||||
shift={{
|
||||
id: '1',
|
||||
title: 'Test Shift',
|
||||
startTime: new Date(Date.now() + 100000).toISOString(),
|
||||
endTime: new Date(Date.now() + 200000).toISOString(),
|
||||
capacity: 3,
|
||||
currentSignups: 2,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
expect(screen.getByText('2/3 spots filled')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('disables sign-up button when full', () => {
|
||||
render(
|
||||
<ShiftCard
|
||||
shift={{
|
||||
id: '1',
|
||||
title: 'Full Shift',
|
||||
startTime: new Date(Date.now() + 100000).toISOString(),
|
||||
endTime: new Date(Date.now() + 200000).toISOString(),
|
||||
capacity: 3,
|
||||
currentSignups: 3,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
expect(screen.getByText('3/3 spots filled')).toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: 'Sign Up' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows "Past" badge and no sign-up button for past shifts', () => {
|
||||
render(
|
||||
<ShiftCard
|
||||
shift={{
|
||||
id: '1',
|
||||
title: 'Past Shift',
|
||||
startTime: new Date(Date.now() - 200000).toISOString(),
|
||||
endTime: new Date(Date.now() - 100000).toISOString(),
|
||||
capacity: 3,
|
||||
currentSignups: 1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
expect(screen.getByText('Past')).toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: 'Sign Up' })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
124
frontend/src/components/__tests__/shift-detail.test.tsx
Normal file
124
frontend/src/components/__tests__/shift-detail.test.tsx
Normal file
@@ -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');
|
||||
});
|
||||
});
|
||||
50
frontend/src/components/shifts/shift-card.tsx
Normal file
50
frontend/src/components/shifts/shift-card.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import Link from 'next/link';
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ShiftListItemDto } from '@/hooks/useShifts';
|
||||
|
||||
interface ShiftCardProps {
|
||||
shift: ShiftListItemDto;
|
||||
}
|
||||
|
||||
export function ShiftCard({ shift }: ShiftCardProps) {
|
||||
const capacityPercentage = (shift.currentSignups / shift.capacity) * 100;
|
||||
const isFull = shift.currentSignups >= shift.capacity;
|
||||
const isPast = new Date(shift.startTime) < new Date();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<CardTitle>{shift.title}</CardTitle>
|
||||
{isPast && <Badge variant="secondary">Past</Badge>}
|
||||
</div>
|
||||
<CardDescription>
|
||||
{new Date(shift.startTime).toLocaleString()} - {new Date(shift.endTime).toLocaleTimeString()}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span>Capacity</span>
|
||||
<span>{shift.currentSignups}/{shift.capacity} spots filled</span>
|
||||
</div>
|
||||
<Progress value={capacityPercentage} />
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Link href={`/shifts/${shift.id}`}>
|
||||
<Button variant="outline" size="sm">View Details</Button>
|
||||
</Link>
|
||||
{!isPast && !isFull && (
|
||||
<Button size="sm">Sign Up</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
31
frontend/src/components/ui/progress.tsx
Normal file
31
frontend/src/components/ui/progress.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Progress as ProgressPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Progress({
|
||||
className,
|
||||
value,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
|
||||
return (
|
||||
<ProgressPrimitive.Root
|
||||
data-slot="progress"
|
||||
className={cn(
|
||||
"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
data-slot="progress-indicator"
|
||||
className="h-full w-full flex-1 bg-primary transition-all"
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Progress }
|
||||
18
frontend/src/components/ui/textarea.tsx
Normal file
18
frontend/src/components/ui/textarea.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot="textarea"
|
||||
className={cn(
|
||||
"flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Textarea }
|
||||
Reference in New Issue
Block a user