Project Task Board (Kanban)

You are a senior full-stack engineer specializing in Next.js 16, Tailwind CSS 4, Supabase, and drag-and-drop interactions.

Build a self-hosted project task board system (similar to Trello/Asana) for {company_name}, supporting {num_projects} project boards and a team of {team_size} members. Primary brand color is {primary_color}.

## Tech Stack
- Next.js 16 (App Router) + TypeScript
- Tailwind CSS 4
- Supabase (Postgres + Auth + Realtime for live sync)
- @dnd-kit (drag and drop)
- date-fns (date handling)

## Core Features

### 1. Multi-Project Board Management
- Create/edit/archive multiple project boards (up to {num_projects})
- Each board has independent customizable columns (defaults: To Do / In Progress / Review / Done)
- Support adding, renaming, deleting, and drag-reordering columns
- Board-level color coding and description

### 2. Task Cards
- Title (required), detailed description (Markdown support)
- Assignee selection from team members
- Due date + priority levels (Urgent/High/Medium/Low with color coding)
- Label system (custom labels with multiple colors)
- File attachments (stored in Supabase Storage)
- Subtask checklist with progress bar
- Auto-incrementing task numbers (e.g., TASK-001)

### 3. Drag and Drop
- Use @dnd-kit for dragging task cards between columns
- Reorder tasks within the same column
- Show placeholder and animation during drag
- Sync changes via Supabase Realtime to all online team members after drop
- Mobile touch drag support

### 4. Team Management
- Invite team members ({team_size} people) via email
- Role permissions: Admin (full access), Member (edit tasks), Observer (read-only)
- Member avatars with online status indicators
- Supabase Auth integration (email + password, optional Google OAuth)

### 5. Comments and Activity Log
- Per-task comments with @mention support for team members
- Automatic activity logging (create, move, edit, assign, etc.)
- Activity log timeline display

### 6. Reminders and Notifications
- Due date reminders (1 day before, same day, overdue)
- Notification when assigned to a task
- Notification when @mentioned
- Notification center (bell icon + unread count)

### 7. Filtering and Search
- Global task search (title, description, labels)
- Filter by assignee, priority, labels, due date
- Save frequently used filter presets

### 8. Analytics Dashboard
- Tasks completed this week, overdue task count
- Team workload distribution (tasks per member)
- Team velocity trend chart (weekly completion line graph)
- Priority distribution pie chart

### 9. Calendar View
- Display all tasks on a calendar by due date
- Click a date to view tasks due that day
- Drag tasks on calendar to change due dates

### 10. My Tasks View
- Aggregate tasks assigned to current user across all projects
- Group by status and due date
- Quick navigation to the corresponding board

## Database Design (Supabase Postgres)

Design the following tables and provide complete SQL:
- projects (project boards)
- columns (board columns with position field for ordering)
- tasks (task cards with position field, foreign key to column)
- task_comments (task comments)
- task_labels (labels, many-to-many relationship)
- task_checklists (subtask checklists)
- task_attachments (attachments)
- task_activity_log (activity log)
- team_members (team members and roles)
- notifications (notifications)

Enable RLS policies on all tables:
- Only project members can access corresponding project data
- Admins can manage members and delete resources
- Activity logs are append-only, no modifications allowed
- Wrap auth.uid() in (select auth.uid()) for performance optimization
- Create indexes on all foreign key columns

## Realtime Live Sync
- Listen to INSERT/UPDATE/DELETE on the tasks table
- Listen to changes on the columns table
- Use Supabase Realtime Channels scoped by project ID
- Optimistic updates + conflict resolution

## UI/UX Requirements
- Primary color {primary_color}, professional and clean overall design
- Responsive: board view on desktop, list view on mobile
- Compact but informative task cards (title, avatar, priority color bar, label badges, due date, checklist progress)
- Column headers showing task count
- Empty columns show guidance text
- Loading skeleton screens
- Dark mode support

## File Structure
```
src/
  app/
    (auth)/login/page.tsx
    (auth)/register/page.tsx
    (dashboard)/
      layout.tsx           # Sidebar + top bar layout
      page.tsx             # My Tasks view
      projects/page.tsx    # Project list
      board/[id]/page.tsx  # Board view
      calendar/page.tsx    # Calendar view
      analytics/page.tsx   # Analytics dashboard
      settings/page.tsx    # Team settings
  components/
    board/                 # Board-related components
    task/                  # Task-related components
    ui/                    # Shared UI components
  lib/
    supabase/
    dnd/                   # Drag-and-drop logic
    hooks/                 # Custom hooks
  types/
```

Output step by step:
1. Complete Supabase SQL (tables + indexes + RLS + Realtime enablement)
2. TypeScript type definitions
3. Supabase client wrappers (including Realtime hooks)
4. Drag-and-drop logic (@dnd-kit configuration)
5. Core pages and component code
6. Team management and permission controls
7. Notification system
8. Analytics dashboard

Provide complete, runnable code for every file. Do not omit any sections.