Projects

The projects module is the organizational backbone of the PM platform. It provides a projects directory, individual project overviews with progress tracking, a project creation wizard, and per-project settings. All screens are in the (dashboard) route group.

Projects List

Route: /projects

A directory of all projects in the workspace with status indicators, progress tracking, and quick access to board views.

• Project cards -- grid of ProjectCard components, each showing project emoji, name, description, status badge (Active/Paused/Archived), member avatars (stacked), issue count, completion progress bar, and last updated timestamp
• Status filter tabs -- pill tabs for All, Active, Paused, and Archived to filter the project grid
• Search bar -- text input to filter projects by name or description
• Sort controls -- sort by name, recently updated, or creation date
• Grid/list toggle -- switch between card grid and compact list view
• Create project button -- primary action button linking to /projects/new

import { ProjectCard } from "@/components/project/project-card"

Project Card Anatomy

+--------------------------------------+
| [Emoji] Project Name                 |
| Short description of the project...  |
|                                      |
| [Active]  [Avatar Stack]  12/48 done |
| ████████████░░░░░░░░░░░░░░░  25%    |
| Updated 2 hours ago                  |
+--------------------------------------+

Data Sources

Data	Source	Location
Projects	projects	data/seed.ts
Team members	teamMembers	data/seed.ts

Project Overview

Route: /projects/[id]

A comprehensive landing page for an individual project, showing progress, recent activity, and quick links to all project sub-pages.

• Project header -- emoji, project name, description, status badge, default view link, and project lead avatar via ProjectHeader
• Progress section -- completion percentage with ProgressRing, issues open vs closed, and a breakdown bar showing tasks by status (Backlog, Todo, In Progress, In Review, Done)
• Quick stats row -- four StatsCard components: Total Issues, Open Issues, Completed This Sprint, and Average Cycle Time
• Recent activity -- latest 5 activities for this project using ActivityItem components
• Active cycle card -- if a cycle is active, displays its name, date range, progress bar, and link to cycle detail page
• Module summary -- list of active modules with name, status badge, and task count
• Project sidebar navigation -- ProjectSidebarNav providing links to Board, List, Backlog, Calendar, Timeline, Cycles, Modules, Pages, Analytics, Automations, and Settings

import { ProjectHeader } from "@/components/project/project-header"
import { ProjectSidebarNav } from "@/components/project/project-sidebar-nav"
import { StatsCard } from "@/components/pm/stats-card"
import { CycleCard } from "@/components/pm/cycle-card"
import { ModuleCard } from "@/components/pm/module-card"
import { ActivityItem } from "@/components/pm/activity-item"
import { ProgressRing } from "@/components/pm/progress-ring"

Project Overview Layout

+--------------------------------------------------+
| [Emoji] Project Name           [Active] [Lead]   |
| Description text here                            |
+----------+----------+----------+----------+------+
| Total    | Open     | Completed| Avg Cycle|      |
| Issues   | Issues   | Sprint   | Time     |      |
+----------+----------+----------+----------+------+
| Status Breakdown Bar                             |
| ██████ Backlog ████ Todo ██████ In Progress ...  |
+------------------------+-------------------------+
| Recent Activity        | Active Cycle            |
| (timeline)             | Sprint 5: Mar 10-24     |
|                        | ████████░░░ 72%         |
+------------------------+-------------------------+
| Active Modules                                   |
| Auth Module [Active] 8 tasks                     |
| API Module [Planned] 12 tasks                    |
+--------------------------------------------------+

Data Sources

Data	Source	Location
Project	projects (by id)	data/seed.ts
Tasks	tasks (filtered by projectId)	data/seed.ts
Cycles	cycles (filtered by projectId)	data/seed.ts
Modules	modules (filtered by projectId)	data/seed.ts
Activities	activities (filtered by projectId)	data/seed.ts

Create Project

Route: /projects/new

A Zod-validated form for creating a new project, organized into logical sections.

• Project Info -- project name (required), prefix (auto-generated from name, e.g. "KAN"), emoji picker, and description textarea
• Project Color -- color picker for the project accent color, used on project cards and sidebar
• Default View -- radio group to select the default view layout: Board, List, Timeline, or Calendar
• Features -- toggle switches to enable or disable optional features: Cycles, Modules, Pages, Automations, and Estimates
• Members -- multi-select member picker to add team members to the project
• Project Lead -- single-select member picker to assign the project lead
• Template selector -- optional template dropdown (Agile, Scrum, Kanban, Bug Tracking, Feature Planning, Marketing) that pre-configures statuses, labels, and sample tasks

import { ProjectForm } from "@/components/project/project-form"

Validation Schema

const projectSchema = z.object({
  name: z.string().min(1, "Project name is required"),
  prefix: z.string().min(1).max(5, "Prefix must be 1-5 characters"),
  emoji: z.string(),
  color: z.string(),
  description: z.string().optional(),
  defaultView: z.enum(["board", "list", "timeline", "calendar"]),
  features: z.object({
    cycles: z.boolean(),
    modules: z.boolean(),
    pages: z.boolean(),
    automations: z.boolean(),
    estimates: z.boolean(),
  }),
  memberIds: z.array(z.string()),
  leadId: z.string().min(1, "Project lead is required"),
  templateId: z.string().optional(),
})

Data Sources

Data	Source	Location
Team members	teamMembers	data/seed.ts
Templates	projectTemplates	data/seed.ts

Project Settings

Route: /projects/[id]/settings

Configuration page for managing an individual project's settings, members, and features.

• General section -- edit project name, prefix, emoji, color, description, and status (Active/Paused/Archived)
• Features toggles -- enable or disable Cycles, Modules, Pages, Automations, and Estimates for this project
• Default view -- change the default view layout (Board, List, Timeline, Calendar)
• Members section -- table of project members with avatar, name, email, role badge (Owner, Admin, Member, Guest), and remove button
• Add member -- member search dropdown to add new members to the project
• Danger zone -- archive project button (with confirmation dialog) and delete project button (with double-confirmation dialog warning about permanent data loss)

import { GeneralSettingsForm } from "@/components/settings/general-settings-form"
import { MembersTable } from "@/components/settings/members-table"

Data Sources

Data	Source	Location
Project	projects (by id)	data/seed.ts
Team members	teamMembers	data/seed.ts

Next Steps

• Board & Views -- Kanban board, list, backlog, calendar, and timeline
• Cycles & Modules -- sprint cycles, modules, and pages
• Tasks -- task detail, comments, and subtasks