How to Clone Asana

Create a full-stack Asana-style task management app called TaskNest using Next.js (App Router), Tailwind CSS, Prisma and SQLite (easy to swap to Postgres later).

## What to build
A team task tracker where tasks have an assignee, due date and completion state, live inside projects organized into sections, and render as either a List or a Board. Each user gets a My Tasks inbox aggregating their assigned work.

## Key screens
- App shell: left sidebar with Home, My Tasks, Inbox, and Teams → Projects tree
- Project (List view): sections with task rows (completion circle, name, assignee avatar, due date), add-task per section, inline editing
- Project (Board view): Kanban with sections as columns; drag tasks between columns to change section
- Task detail pane: description, assignee, due date, subtasks checklist, comment thread with @mentions and attachments
- My Tasks: assigned tasks grouped by due date (Today, Upcoming, Later)
- Inbox: notifications from @mentions, assignments and due-soon tasks
- Home: a simple dashboard with the user's recent projects and a 'My tasks due soon' panel

## Schema (Prisma)
User (id, name, email, image), Team (id, name, ownerId), Project (id, teamId, name, color), Section (id, projectId, name, position), Task (id, projectId, sectionId, name, description, assigneeId, dueDate, completed, position), Subtask (id, taskId, name, completed), Comment (id, taskId, authorId, body, createdAt), Membership (id, teamId, userId, role), Notification (id, userId, type, taskId, read, createdAt)

## Logic that must work
- My Tasks query: tasks where assigneeId = current user, bucketed by dueDate (Today / Upcoming / Later / No date)
- Completing a task sets completed=true and strikes it through; board and list stay in sync
- Moving a task in board view updates sectionId and position; reordering within a section updates position
- @mention parsing in comments creates Notification rows for mentioned users
- Assigning a task to someone also creates an 'assigned' Notification for them
- Subtask completion shows as a small progress count on the parent task (e.g. 2/5) but does not auto-complete the parent
- The List and Board views read from the same Task store; completing or moving a task reflects in both immediately
- Only members of a team can see and edit its projects (enforce server-side)

## Style
Asana-like: white canvas, generous whitespace, a soft purple/coral accent, round green-fill completion checkboxes, thin dividers, small colorful project dots in the sidebar, Inter font. Snappy inline editing with optimistic updates. Responsive - sidebar collapses, task detail becomes a full-screen sheet on mobile.

Seed with 3 users, 2 teams, 4 projects each with sections, 8–12 tasks with assignees and due dates this week, a few subtasks and comments, and some completed tasks so the app is fully browsable on first load.

You are building a production-quality Asana-style task management app. Work iteratively: scaffold, then implement feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui
- PostgreSQL via Prisma; Supabase for auth (email + Google OAuth) and Realtime
- dnd-kit for drag-and-drop (task reorder, board section moves)
- react-day-picker for due dates; Zod for all input validation

## Architecture requirements
- Server components by default; client components only for interactive widgets (board, drag-and-drop, task pane, date picker)
- All mutations via server actions with Zod schemas; never trust client state for permissions - check team membership server-side on every write
- The List and Board views must read from the same task store and stay consistent; a section move is a single mutation updating sectionId + position
- Realtime: subscribe per project; broadcast task create/update/complete/move and new comments. Optimistic UI with rollback on error
- Rules engine (for the full build): trigger ('task_completed', 'moved_to_section', 'field_changed') + action ('assign', 'set_field', 'add_comment'); pure, server-evaluated and unit-tested

## Data model
users, teams, memberships(user, team, role), projects, sections, tasks, subtasks, comments, custom_fields, custom_field_values, notifications. Index tasks(project_id, section_id, position), tasks(assignee_id, due_date), comments(task_id).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth with middleware-protected routes; team/project CRUD and the sidebar tree
2. Project List view: sections, task rows, inline create/edit/complete via server actions, position-based ordering
3. Task detail pane: description, assignee, due date, subtasks, comment thread with @mention parsing + Supabase storage attachments
4. Board view sharing the task store; dnd-kit moves between sections; realtime sync across clients
5. My Tasks: aggregate assigned tasks bucketed by due date; Inbox notifications from mentions/assignments/due-soon
6. Custom fields and a Calendar view by due date
7. Rules engine + builder UI; permissions hardening (RLS by team membership)

## Quality bar
- Loading skeletons per route, error boundaries, empty states for new projects
- Dates stored as timestamps, rendered with date-fns; respect the user's timezone in My Tasks buckets
- Strong typing end-to-end; no `any` on task or field shapes
- Seed script: 3 users, 2 teams, 4 projects with sections, ~30 tasks with assignees and due dates, subtasks, comments and notifications

Start with step 1. After each step, tell me what to verify in the browser before moving on.

Design the complete UI for an Asana-style task management app called TaskNest. React + Tailwind, shadcn/ui components, lucide-react icons. Clean, focused aesthetic: white background, generous whitespace, a soft purple/coral accent, thin dividers, round completion checkboxes, Inter font.

## Screens to generate

### 1. App shell + Project (List view)
- Left sidebar: logo, Home, My Tasks, Inbox with a badge, then Teams each expanding to a list of projects with small colored dots; user avatar at the bottom
- Top bar: project name with its color dot, a row of view tabs (List, Board, Timeline, Calendar), a Share button and member avatars
- List body: tasks grouped into collapsible sections (To do, In progress, Done) each with a count. Each task row: a round completion circle (fills green when done), task name, assignee avatar, a due-date pill (red if overdue, normal otherwise), and a faint + Add task row at the bottom of each section

### 2. Board view
- Sections as columns (To do, In progress, Done), each a header with a count and a + add card; cards show task name, assignee avatar and due-date pill; cards draggable between columns
- A subtle 'completed' card style (faded with a checkmark) so finished work reads differently from open tasks

### 3. Task detail pane
- Right-side slide-over: large completion toggle + task name, fields for Assignee (avatar picker), Due date, and Project; a description text area; a Subtasks checklist with progress; and a Comments thread (composer with @mention, messages with avatars and timestamps, attachment chips)

### 4. My Tasks
- A single list of the current user's assigned tasks grouped by due date (Today, Upcoming, Later, No date), each row with project dot, task name and quick-complete circle
- A small segmented filter at the top (All / Incomplete / Completed) and a sort control (by due date / by project)

### 5. Inbox
- A notification feed: avatar, actor, action ('assigned you a task', 'mentioned you', 'commented'), the task name as a link, and a relative timestamp; unread items have a subtle highlight
- A 'Mark all as read' action and an Archived tab

### 6. Calendar view
- A month grid placing tasks on their due dates as small color-coded chips, with a Today button and a count of unscheduled tasks in a side rail

## Interaction details
- Completion circles animate to a green check; the task name strikes through and softly fades on complete
- Hovering a list row reveals a drag handle and a quick due-date/assignee shortcut; clicking the row name opens the detail pane
- Overdue due-date pills are red; due-today are amber; future are neutral gray

Make every screen responsive: on mobile the sidebar collapses to a hamburger drawer, the task detail becomes a full-screen sheet, and the board scrolls horizontally. Use realistic placeholder data - task names, assignee avatars, due dates spread across this week, and a healthy mix of completed and open tasks.

Build a project and task management app (Asana model) called TaskNest.

## Entities
- Team: name, owner (user reference)
- Project: name, description, color, team (reference)
- Section: name, position, project (reference)
- Task: name, description, assignee (user reference), dueDate (date), completed (boolean), position, project (reference), section (reference)
- Subtask: name, completed (boolean), task (reference)
- Comment: body, author (user reference), task (reference), createdAt
- Membership: team (reference), user (reference), role (admin/member/guest)
- Notification: user (reference), type (assigned/mentioned/commented), task (reference), read (boolean), createdAt

## Roles & permissions
- Members create and complete tasks, comment, and are assigned work on projects in their teams
- Team admins create projects, invite members, and manage team settings
- Guests get limited access only to specific projects shared with them
- Users only see teams and projects they belong to

## Pages
1. My Tasks: tasks assigned to the current user across all projects, grouped by due date (Today, Upcoming, Later)
2. Project (List): tasks grouped into sections with completion circle, assignee, due date; add tasks inline
3. Project (Board): sections as Kanban columns; drag tasks between them to change section
4. Task detail: description, assignee, due date, subtasks checklist, comment thread with @mentions and attachments
5. Inbox: notifications from assignments, @mentions and comments

## Rules
- Completing a task sets completed=true and strikes the name; List and Board stay in sync
- Moving a task in Board view updates its section; My Tasks aggregates tasks where assignee = current user
- @mentioning a user in a comment creates a notification for them
- Members can edit tasks only on projects within their teams; guests are limited to shared projects

## Look & feel
Asana-inspired: white background, generous whitespace, soft purple/coral accent, round green-fill completion checkboxes, thin dividers, small colored project dots, clean sans-serif typography. Mobile responsive - sidebar collapses, task detail becomes a full-screen sheet.

Seed with 2 teams, 4 projects each with sections, 8–12 tasks with assignees and due dates this week, a few subtasks and comments, and some completed tasks so every page has data.