How to Clone ClickUp

Create a full-stack ClickUp-style work-management app called TaskPilot using Next.js (App Router), Tailwind CSS, dnd-kit, Prisma and Postgres.

## What to build
A per-seat team SaaS where work is organized as spaces → lists → tasks, and the same tasks render as a list, a kanban board or a calendar. Lists have custom status pipelines.

## Key screens
- Workspace home: 'My tasks' grouped by due date across all spaces
- Sidebar tree: spaces and lists, with add buttons
- List view: grouped-by-status rows with assignee, due date, priority columns; inline add-task
- Board view: kanban by status with dnd-kit drag-between-columns
- Calendar view: tasks by due date, drag to reschedule
- Task detail drawer: title, description, assignee, due date, priority, status, subtasks checklist, comments
- List settings: edit the list's custom status pipeline (add/rename/reorder statuses)
- Members & billing: invite by email + role, seat-based plan page

## Schema (Prisma)
Workspace (id, ownerId, name), Space (id, workspaceId, name, order), List (id, spaceId, name, statuses Json), Task (id, listId, title, description, assigneeId, dueDate, priority, status, order, createdAt), Subtask (id, taskId, title, done), Comment (id, taskId, authorId, body, createdAt), Member (id, workspaceId, userId, role)

## Logic that must work
- A task's status must be one of its list's statuses (validate server-side)
- Changing status/date in any view updates the single Task record and all views reflect it - never duplicate task data per view
- Drag-reorder within a status uses a fractional sort key so one move doesn't reindex the list
- Board drag and calendar reschedule are optimistic with rollback on server error
- 'My tasks' queries tasks where assigneeId = current user across accessible spaces, grouped by due date
- Subtask completion shows progress on the parent task; comments are ordered and attributed to their author
- Permission check on every mutation: only members of the space can edit its tasks; guests see only shared lists

## Style
Dense and modern: light canvas, #7B68EE purple primary, compact rows, colored status pills, priority flags, assignee avatar chips, collapsible sidebar. Switching List/Board/Calendar should feel instant. Fully responsive; mobile shows 'My tasks' and a single-list view.

## Quality
Centralize the access check in one module called by every mutation; store money in cents for billing; add skeleton loaders and empty states; keep List/Board/Calendar as projections over the same Task query with different grouping.
Persist the user's last-used view per list; show overdue due dates in red; make the task detail drawer update the underlying row live so list/board reflect edits immediately.

Seed one workspace with 2 spaces, 4 lists (each with its own status pipeline), ~30 tasks across statuses/assignees, plus subtasks and comments so every view is populated. Use Stripe test mode for seat billing; if unavailable, mock the upgrade by setting a plan field. If real-time is too much for the MVP, use optimistic updates + refetch and note where realtime would slot in.

You are building a production-quality ClickUp clone. This is a broad, hard project - resist scope creep and build a coherent core, not a feature dump. Work iteratively and run the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui, dnd-kit
- PostgreSQL via Prisma; Supabase for auth (email + Google) and Realtime
- Stripe Billing for per-seat subscriptions with proration
- Zod for all validation; a shared permissions module used by every server action

## Architecture requirements
- Model the hierarchy cleanly: workspace → space → list → task, with member access checked at the space level and inherited down; centralize this in lib/access.ts and call it in every mutation
- Views are projections over the same Task rows - never duplicate task data per view. List/Board/Calendar all read the same query with different grouping/ordering applied server-side
- Custom statuses live on the List; a Task.status is validated against its list's pipeline; reordering within a status uses a fractional/lexorank sort key, not integer reindexing
- Custom fields: store as a JSON map on the task validated against the list's field definitions, with a per-type validator in lib/fields/

## Data model
workspaces, spaces, lists (statuses json, field_defs json), tasks (status, priority enum, custom_fields json, sort_key), subtasks, comments, members (role), automations (trigger/action json). Index tasks(list_id, status, sort_key), tasks(assignee_id, due_date).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth + the workspace/space/list/task hierarchy with the access module
2. List view: grouped-by-status rows, inline task create/edit, assignee and due-date pickers, lexorank ordering
3. Board view: dnd-kit kanban, drag-between-status updates Task.status and sort_key optimistically, rolls back on error
4. Task detail: description editor, subtasks, comments; calendar view with drag-to-reschedule
5. Realtime: Supabase channel per list/space; broadcast task changes so all views and members stay in sync
6. Custom fields + a simple automations engine (on status = X → assign / set due date), run via a worker
7. Per-seat billing with proration; gate automations/fields by plan; 'My tasks' cross-space dashboard

## Quality bar
- Drag-and-drop must feel instant - optimistic updates with rollback, fractional sort keys (no full reindex)
- Every mutation: server action + Zod + access check; never trust client-sent permissions
- Loading/error boundaries; skeletons on async routes; clear empty states for new spaces and lists
- Notifications fan-out (assignment, comment, due-soon) handled by a background worker, not inline in the request
- Per-seat billing with proration on member add/remove; gate automations and custom fields by plan
- Seed script: 1 workspace, 2 spaces, 4 lists, 40 tasks, subtasks, comments, 3 members

Start with step 1. Push back if I try to add views before the core task model is solid. After each step, tell me what to verify in the browser.

Design the complete UI for a ClickUp-style work-management app called TaskPilot. React + Tailwind, shadcn/ui components, lucide-react icons. Dense, modern productivity aesthetic: light background, vibrant purple primary (#7B68EE), compact rows, colored status pills, priority flags, assignee avatar chips.

## Screens to generate

### 1. App shell
- Collapsible left sidebar: workspace switcher at top, then a tree of Spaces with nested Lists (expand/collapse arrows, colored space dots), an 'Add space' button, and a 'My tasks' link
- Top bar: breadcrumb of the current location, a view-tab row (List / Board / Calendar), a Filter button, a search field, and an avatar stack of online members

### 2. List view
- Tasks grouped under collapsible status headers (To do / In progress / Review / Done) each with a count; rows show a status pill, task name, an assignee avatar, a due-date chip (red if overdue), and a priority flag; an inline '+ Add task' row under each group

### 3. Board view
- Horizontal kanban columns by status, each with a colored header, count badge and '+'; cards show task name, a couple of assignee avatars, a due-date chip and priority flag; cards are draggable between columns

### 4. Calendar view
- A month grid with tasks as colored chips on their due dates (color = priority), a mini-month picker and Today button, and an overflow '+2 more' on busy days

### 5. Task detail panel
- A right-side slide-over: editable title, a status dropdown of pills, fields row (assignee, due date, priority), a rich-text description, a subtasks checklist with progress, and a comment thread with avatars at the bottom and a comment composer

### 6. My tasks dashboard
- The user's tasks across all spaces, grouped into Overdue / Today / This week / Later sections, each row showing which space/list it belongs to

### 7. Members & invite
- A members table (avatar, name, email, role badge, last active) with an 'Invite' button opening a modal: an email field, a role selector (Member / Guest), and for guests a list picker for which lists they can access

### 8. Billing page
- A plan card (current plan, seat count, monthly total), a seats meter, a Free / Unlimited / Business feature-comparison table, and an Upgrade button; show a small note that seats prorate when members are added

### 9. List settings - statuses
- A panel to edit a list's status pipeline: reorderable status rows each with a name and color swatch, an 'Add status' button, and a 'Done' marker toggle so a column can count as complete

### 10. Filter & group bar
- The toolbar Filter and Group controls open popovers: Filter builds 'where field is value' rows (status, assignee, priority, due date) with a clear-all action; Group switches the grouping field; show active counts as badges on the buttons

Make every screen responsive. On mobile: the sidebar becomes a drawer, the view tabs stay, Board columns scroll horizontally, and the task detail becomes a full-screen sheet. Use realistic placeholder data - space names like 'Marketing' and 'Product', task names, assignee avatars, due dates, and a mix of priorities and statuses.

Build an all-in-one team work-management app (ClickUp model) called TaskPilot.

## Entities
- Workspace: name, owner (user reference)
- Space: workspace reference, name, color, order (number)
- List: space reference, name, statuses (text list - the custom status pipeline)
- Task: list reference, title, description (rich text), assignee (user reference), dueDate (date), priority (single-select: low/normal/high/urgent), status (text, one of the list's statuses), order (number)
- Subtask: task reference, title, done (boolean)
- Comment: task reference, author (user), body, createdAt (date)
- Member: workspace reference, user reference, role (single-select: owner/member/guest)

## Roles & permissions
- Owner: full control, invites members, manages billing
- Member: creates and edits tasks, lists and views in spaces they belong to
- Guest: limited access to only the lists explicitly shared with them

## Pages
1. My tasks: everything assigned to the current user across all spaces, grouped by due date (Overdue / Today / This week / Later)
2. Workspace shell: a sidebar tree of spaces and lists with add buttons
3. List view: tasks grouped by status with assignee, due date and priority; inline add task; open a task for details
4. Board view: kanban columns by status, drag a card to change status
5. Calendar view: tasks on a month grid by due date, drag to reschedule
6. Task detail: title, description, assignee, due date, priority, status, subtasks checklist, comments
7. Members & billing: invite by email with a role, per-seat plan page

## Rules
- Each list defines its own status pipeline; a task's status must be one of its list's statuses
- Changing a task in any view (board drag, calendar reschedule) updates the one task and reflects everywhere
- Only members of a space can see or edit its tasks; guests see only shared lists (enforce on every action)
- 'My tasks' shows tasks assigned to the current user across every accessible space

## Look & feel
ClickUp-inspired: dense and modern, light background, vibrant purple (#7B68EE) primary, compact rows, colored status pills, priority flags, assignee avatar chips, collapsible sidebar. Switching List/Board/Calendar should feel instant. Mobile responsive throughout.

Seed with one workspace, 2 spaces, 4 lists (each with its own status pipeline), ~30 tasks across statuses and assignees, plus subtasks and comments so every view has data.