How to Clone monday.com

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

## What to build
A flexible board tool where teams track work in items (rows) with typed columns. Core differentiator is the color-coded Status column and switchable Table / Kanban / Calendar views over the same data.

## Key screens
- App shell: left sidebar with workspaces → boards tree, top bar with board name and view tabs
- Board (Table view): grouped rows, typed columns (Status, Person, Date, Number, Text), inline cell editing, add-item row at the bottom of each group, add-column button on the right
- Board (Kanban view): columns generated from the Status column's labels; drag cards between them to change status
- Board (Calendar view): items positioned by a Date column
- Item drawer: full item with updates feed (comments + attachments) and activity log
- Automations page: list of 'When [trigger] then [action]' recipes with an add/edit form
- My Work: items assigned to the current user across boards, grouped by due date

## Schema (Prisma)
User (id, name, email, image), Workspace (id, name, ownerId), Board (id, workspaceId, name), Group (id, boardId, title, color, position), Column (id, boardId, title, type, settings Json, position), Item (id, boardId, groupId, name, position), CellValue (id, itemId, columnId, value Json), Update (id, itemId, authorId, body, createdAt), Automation (id, boardId, trigger Json, action Json, enabled)

## Column types to support
- Status: settings hold an array of labels {id, title, color}; renders as a colored chip; the picker shows the label palette
- Person: stores a user id; renders as an avatar with a searchable people picker
- Date: stores an ISO date; renders as a pill (red if overdue) with a date picker
- Number: stores a number; optionally renders a small progress bar against a configured max
- Text: free text; Dropdown: single choice from settings.options

## Logic that must work
- Typed columns: a single CellValue table stores a JSON value interpreted by column.type (status label id, user id, ISO date, number, string)
- Status column settings hold an array of labels {id, title, color}; Kanban columns are derived from them
- Changing a status (inline, by drag in Kanban, or in the drawer) writes one CellValue and fires matching automations
- Automation engine: on a cell change, find enabled automations whose trigger matches and run the action (notify owner / move to group / set another column)
- Position fields keep groups, columns and items ordered; reordering updates positions
- The three views (Table, Kanban, Calendar) all read the same items; switching views must never duplicate or lose data
- My Work query: items where the Person cell equals the current user, bucketed by the Date cell (Today / This week / Later)

## Style
monday-like: white canvas, bold status chips with strong colors, deep-navy sidebar, rounded cells, soft shadows, Inter font. Snappy inline editing and optimistic UI updates. Responsive - table scrolls horizontally on mobile, sidebar collapses.

Seed with 2 users, 1 workspace, 3 boards (marketing calendar, product roadmap, hiring pipeline) each with groups, several typed columns, 8–12 items with varied statuses, a few comments and 2 demo automations so the app is fully browsable on first load.

You are building a production-quality monday.com-style Work OS. 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 (group/row/card reordering, Kanban moves)
- TanStack Table for the virtualized grid; Zod for all input validation

## Architecture requirements
- The hard part is the typed-column system. Model it as: Column has a `type` and a `settings` JSON; an Item's value for a column lives in a single CellValue (itemId, columnId, value JSONB). Write a discriminated-union TypeScript type per column kind and a renderer/editor registry keyed by type so adding a new column type is one file
- Server actions for all mutations with Zod; recompute nothing on the client that matters for permissions
- Realtime: subscribe per board; broadcast cell changes, new items and reorders. Use optimistic updates with rollback on error
- Automations are a small rules engine: a trigger ('status_changed', column, to-label) and an action ('notify', 'move_to_group', 'set_column'). Evaluate on the server after each qualifying mutation; keep it pure and unit-tested

## Data model
users, workspaces, memberships(user, workspace, role), boards, groups, columns, items, cell_values, updates, automations, notifications. Index cell_values(item_id, column_id) and items(board_id, group_id, position).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth with middleware-protected routes; workspace/board CRUD and the sidebar tree
2. Table view: groups, the typed-column registry (start with Status, Text, Person, Date, Number), inline editing via server actions, add-row / add-column
3. Realtime sync of cell changes and item creation across clients
4. Item drawer: column values, updates feed (comments + Supabase storage attachments), activity log
5. Kanban view derived from a chosen Status column; dnd-kit drag updates status; Calendar view from a Date column
6. Automation engine + builder UI; notifications table and a bell menu
7. My Work page aggregating assigned items across boards; permissions hardening (RLS by workspace membership)

## Quality bar
- Virtualize the table so 1,000+ items stay smooth; debounce inline edits and persist optimistically
- Loading skeletons per route, error boundaries, empty states for new boards
- Strong typing end-to-end: column-type union shared by client and server; no `any` on cell values
- Seed script: 3 users, 1 workspace, 3 boards with groups, mixed column types, ~30 items, comments and 2 automations

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

Design the complete UI for a monday.com-style work-management app called BoardFlow. React + Tailwind, shadcn/ui components, lucide-react icons. Bright, friendly aesthetic: white content area, deep-navy left sidebar, bold colored status chips, rounded cells, Inter font.

## Screens to generate

### 1. App shell + board (Table view)
- Left sidebar (navy): logo, search, a tree of workspaces with their boards, a + Add board button, user avatar at the bottom
- Top bar: board name with a star/favorite, a row of view tabs (Table, Kanban, Calendar), a 'Automate' button, member avatars and an Invite button
- The board grid: rows grouped into colored sections each with a collapsible colored header and item count. Columns: a checkbox, Item name, Status (bold color chip - green Done, orange Working on it, red Stuck, gray empty), Person (avatar circle), Date, Number with a small progress bar, and a faint + to add a column
- An 'Add item' ghost row at the bottom of each group

### 2. Kanban view
- Columns generated from status labels (Stuck, Working on it, Done, empty), each a colored header with a count; cards show item name, person avatar, date pill; cards are draggable between columns
- A faint '+ Add' at the bottom of each status column to create an item directly in that status

### 3. Calendar view
- Month grid with item chips placed on their due dates, color-coded by status, with a mini month switcher and a Today button
- A small right-hand list of items that have no date yet, draggable onto the calendar

### 4. Item detail drawer
- Right-side slide-over: item title, a column of editable fields (Status dropdown, Person, Date, Number), tabs for Updates (comment composer + thread with avatars and timestamps, file attachment chips) and Activity Log

### 5. Automation builder
- A friendly sentence builder: 'When [Status] changes to [Done], [notify] [item owner]' with each bracketed token as a colored editable pill, plus a list of existing active automations with on/off toggles
- A gallery of suggested recipe templates (notify on status change, move done items to a Done group, set a date when status becomes Working on it)

### 6. My Work
- A focused personal list: items assigned to the current user across all boards, grouped into Today / This week / Later headers, each row showing the board's color dot, item name, status chip and date

### 7. Dashboard view
- A reporting page built from widgets: a status-distribution donut, a 'battery' bar showing completion across a board, a number card for total items, and a small bar chart of items per person

## Interaction details
- Inline editing everywhere: clicking a status cell opens a label-color popover; clicking a Person cell opens a people picker; clicking a Date cell opens a calendar
- Hovering a row reveals a quick-expand chevron that opens the item drawer; selected rows show a contextual action bar (move group, delete, assign)

Make every screen responsive: on mobile the sidebar collapses to a hamburger drawer, the table scrolls horizontally with a frozen Item-name column, and the item drawer becomes a full-screen sheet. Use realistic placeholder data - task names, person avatars, a mix of statuses, dates this month, and numbers 0–100.

Build a visual work-management app (monday.com model) called BoardFlow.

## Entities
- Workspace: name, owner (user reference)
- Board: name, description, workspace (reference)
- Group: title, color, position, board (reference)
- Column: title, type (status/person/date/number/text/dropdown), settings (json: status labels with colors, or dropdown options), position, board (reference)
- Item: name, position, board (reference), group (reference)
- CellValue: item (reference), column (reference), value (json)
- Update: item (reference), author (user), body, createdAt
- Automation: board (reference), trigger (json), action (json), enabled (boolean)

## Roles & permissions
- Any signed-in user can be a member of workspaces they're invited to
- Workspace admin: creates boards, invites members, edits columns and automations
- Members: view and edit items on boards in their workspaces, comment, change statuses
- Viewers: read-only on boards shared with them
- Users only see workspaces and boards they belong to

## Pages
1. My Work: items assigned to the current user across all boards, grouped by due date
2. Board (Table): rows in colored groups with typed columns (Status chips, Person, Date, Number, Text), inline editing, add item, add column
3. Board (Kanban): columns from the Status labels; drag cards to change status
4. Board (Calendar): items on a chosen Date column
5. Item detail: all field values, an updates/comment thread, activity log
6. Automations: list and editor for 'When [trigger] then [action]' recipes

## Rules
- A Status column's settings hold labels {id, title, color}; Kanban columns derive from these labels
- Changing a status writes one CellValue and triggers any enabled automation whose trigger matches (e.g. notify owner, move to group)
- Only items with a value in the chosen Date column appear on the Calendar
- Members can edit items only on boards within their workspaces; viewers cannot edit

## Look & feel
monday-inspired: white background, bold colored status chips, deep-navy left sidebar, rounded cells, avatars, clean sans-serif typography. Mobile responsive - table scrolls horizontally, sidebar collapses.

Seed with 1 workspace, 3 boards (marketing calendar, product roadmap, hiring pipeline), each with groups, typed columns, 8–12 items with varied statuses and assignees, a few comments and 2 demo automations so every page has data.