feat(ui): add task management UI with list, detail, and create pages

Implements Task 19: Task List + Task Detail + Status Transitions UI

New components:
- useTasks hook: TanStack Query hooks (useTasks, useTask, useCreateTask, useUpdateTask)
- Task list page: shadcn Table with status filter, pagination, status badges
- Task detail page: Full task info with valid status transition buttons
- New task form: Create task with title, description, assigneeId, dueDate

Key features:
- Status transitions match backend logic: Open→Assigned→InProgress→Review→Done
- Review status allows back-transition to InProgress (only bidirectional)
- Only valid next states shown as buttons (VALID_TRANSITIONS map)
- Status badge colors: Open=gray, Assigned=blue, InProgress=yellow, Review=red, Done=green
- TanStack Query with automatic cache invalidation on mutations
- Next.js 15+ async params pattern (use() hook)

TDD:
- 3 task list tests (renders rows, status badges, new task button)
- 3 task detail tests (Open→Assigned, InProgress→Review, Review→Done+InProgress)

All tests pass (31/31). Build succeeds.

.sisyphus/notepads/club-work-manager/learnings.md

@@ -1548,3 +1548,16 @@ frontend/
 
 - **Testing Radix UI DropdownMenu**: When testing Radix UI components like `DropdownMenu` with React Testing Library, you often need to either use complex test setups waiting for portal rendering and pointer events, or simply mock the Radix UI components out to test just the integration logic. Mocking `DropdownMenu`, `DropdownMenuTrigger`, etc., makes checking dropdown logic faster and less prone to portal-related DOM test issues.
 - **Provider Architecture in Next.js App Router**: Combining multiple providers like `SessionProvider`, `QueryProvider`, and a custom context provider like `TenantProvider` in `app/layout.tsx` is an effective way to handle global state. Custom components needing hooks must have `"use client"` at the top.
+
+
+## Task 19: Task Management UI (2026-03-03)
+
+### Key Learnings
+
+- **TanStack Query Patterns**: Successfully used `useQuery` for data fetching and `useMutation` for updates across the task pages, combining them with `useTenant` hook to auto-inject `activeClubId` in API calls and query cache keys. Invalidation happens seamlessly.
+- **Next.js 15+ React `use()` Testing**: When page components use `params` as a Promise (e.g., Next.js 15+ convention for dynamic routes), using `use()` in the component causes it to suspend. Vitest tests for such components must either be wrapped in `await act(async () => ...)` or wrapped in a `<Suspense>` boundary while awaiting UI changes with `findByText`.
+- **Status Badge Colors**: Implemented mapped `WorkItemStatus` enum values to shadcn Badge colors, ensuring an intuitive UI mapping for transitions (e.g. Open->Assigned->InProgress->Review->Done).
+- **Valid Transitions**: Built client-side validation logic that perfectly mirrors the backend `CanTransitionTo` logic (including the back-transition from Review to InProgress).
+- **UI Component Usage**: Leveraged shadcn `Table` for the list and `Card` for details and new task forms, alongside raw inputs for simplified creation without needing heavy forms libraries.
+
+