The Kanban PM Kit uses Next.js App Router with route groups to separate the main project management dashboard from the authentication flow.
Directory Overview
kanban-pm-kit/
├── app/
│ ├── (dashboard)/ # Main PM pages
│ │ ├── layout.tsx # AppSidebar + AppHeader
│ │ ├── page.tsx # Dashboard home
│ │ ├── activity/page.tsx # Activity feed
│ │ ├── analytics/page.tsx # Workspace analytics
│ │ ├── goals/page.tsx # Goals & OKRs
│ │ ├── inbox/page.tsx # Notifications inbox
│ │ ├── my-work/page.tsx # My assigned tasks
│ │ ├── workload/page.tsx # Team workload view
│ │ ├── roadmap/page.tsx # Roadmap timeline
│ │ ├── search/page.tsx # Global search
│ │ ├── views/page.tsx # Saved views
│ │ ├── templates/page.tsx # Project templates
│ │ ├── projects/
│ │ │ ├── page.tsx # All projects list
│ │ │ ├── new/page.tsx # Create project
│ │ │ └── [id]/
│ │ │ ├── page.tsx # Project overview
│ │ │ ├── board/page.tsx # Kanban board
│ │ │ ├── list/page.tsx # List view
│ │ │ ├── backlog/page.tsx # Backlog
│ │ │ ├── calendar/page.tsx # Calendar view
│ │ │ ├── timeline/page.tsx # Timeline / Gantt
│ │ │ ├── analytics/page.tsx # Project analytics
│ │ │ ├── automations/page.tsx # Automation rules
│ │ │ ├── cycles/
│ │ │ │ ├── page.tsx # Cycles list
│ │ │ │ └── [cycleId]/page.tsx # Cycle detail
│ │ │ ├── modules/
│ │ │ │ ├── page.tsx # Modules list
│ │ │ │ └── [moduleId]/page.tsx # Module detail
│ │ │ ├── pages/
│ │ │ │ ├── page.tsx # Pages / wiki
│ │ │ │ └── [pageId]/page.tsx # Page detail
│ │ │ ├── tasks/
│ │ │ │ └── [taskId]/page.tsx # Task detail
│ │ │ └── settings/page.tsx # Project settings
│ │ ├── team/
│ │ │ ├── page.tsx # Team directory
│ │ │ └── [id]/page.tsx # Member profile
│ │ └── settings/
│ │ ├── page.tsx # General settings
│ │ ├── appearance/page.tsx # Appearance / theme
│ │ ├── members/page.tsx # Member management
│ │ ├── labels/page.tsx # Labels manager
│ │ ├── notifications/page.tsx # Notification prefs
│ │ ├── integrations/page.tsx # Integrations
│ │ ├── billing/page.tsx # Billing & plans
│ │ ├── import-export/page.tsx # Import / export
│ │ └── api/page.tsx # API keys & webhooks
│ ├── (auth)/ # Authentication
│ │ ├── layout.tsx # Centered card layout
│ │ ├── login/page.tsx
│ │ ├── register/page.tsx
│ │ └── forgot-password/page.tsx
│ ├── onboarding/page.tsx # Onboarding wizard
│ ├── globals.css # Design tokens
│ └── layout.tsx # Root layout
├── components/
│ ├── ui/ # shadcn/ui primitives (~33 components)
│ ├── kanban/ # Kanban board (5 components)
│ ├── pm/ # PM composites (16 components)
│ ├── project/ # Project components (6 components)
│ ├── task/ # Task components (10 components)
│ ├── timeline/ # Timeline/Gantt (4 components)
│ ├── charts/ # Chart components (7 components)
│ ├── settings/ # Settings components (5 components)
│ ├── layout/ # Layout components (6 components)
│ └── a11y/ # Accessibility components (2 components)
├── data/
│ └── seed.ts # Mock data for all pages
├── types/
│ └── index.ts # TypeScript interfaces
├── hooks/
│ ├── use-mobile.ts # Mobile viewport detection
│ ├── use-announce.ts # Screen reader announcements
│ ├── use-focus-trap.ts # Focus trap for modals
│ ├── use-keyboard-navigation.ts # Keyboard nav support
│ └── use-reduced-motion.ts # Reduced motion preference
├── lib/
│ └── utils.ts # cn() utility
└── public/
└── images/ # Static images
Route Groups
| Group |
Layout |
Purpose |
(dashboard) |
AppSidebar + AppHeader |
Main PM pages (dashboard, projects, board views, cycles, modules, tasks, goals, roadmap, team, settings, analytics, search, views, templates) |
(auth) |
Centered card |
Login, register, forgot password |
Note: The onboarding wizard (app/onboarding/page.tsx) uses a standalone layout with its own progress stepper, outside of both route groups.
Component Organization
Primitives (components/ui/)
Approximately 33 shadcn/ui components: Alert, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, Collapsible, Command, Dialog, DropdownMenu, Input, InputGroup, Label, Popover, Progress, RadioGroup, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, and Tooltip.
Kanban Components (components/kanban/)
| Component |
Used In |
kanban-board |
Board view (drag-and-drop container) |
kanban-column |
Status columns (Backlog, Todo, In Progress, In Review, Done) |
kanban-card |
Individual task cards within board columns |
column-header |
Column title, task count, and add button |
quick-add-card |
Inline card creation within a column |
PM Composites (components/pm/)
| Component |
Used In |
activity-item |
Activity feed, project overview |
automation-rule-card |
Project automations page |
cycle-card |
Cycles list, project overview |
date-badge |
Tasks, cycles, milestones |
empty-state |
Empty lists across all pages |
goal-card |
Goals page, dashboard |
label-badge |
Tasks, filter bar, labels manager |
member-avatar |
Team, task assignments, comments |
member-select |
Task form, filter bar |
module-card |
Modules list, project overview |
notification-item |
Inbox, notifications |
priority-select |
Task form, filter bar |
progress-ring |
Goals, cycles, project progress |
stats-card |
Dashboard, analytics, project overview |
status-select |
Task form, filter bar |
template-card |
Templates page |
Project Components (components/project/)
| Component |
Used In |
filter-bar |
Board, list, backlog, calendar views |
group-header |
List view group sections |
project-card |
Projects list page |
project-header |
Project overview, all project sub-pages |
project-sidebar-nav |
Project-level sidebar navigation |
view-switcher |
Toggle between board, list, calendar, timeline views |
Task Components (components/task/)
| Component |
Used In |
comment-thread |
Task detail page |
subtask-list |
Task detail page, task form |
task-card |
Kanban board, my work |
task-detail-sidebar |
Task detail page sidebar |
task-form |
Task create/edit |
task-id-badge |
Task rows, task detail |
task-labels |
Task cards, task rows, task detail |
task-priority |
Task cards, task rows |
task-row |
List view, backlog, cycle detail |
task-status |
Task cards, task rows |
Timeline Components (components/timeline/)
| Component |
Used In |
gantt-chart |
Timeline/Gantt view |
gantt-bar |
Individual task bars on the Gantt chart |
milestone-marker |
Milestone diamonds on the timeline |
today-marker |
Red vertical line indicating current date |
Chart Components (components/charts/)
| Component |
Used In |
burndown |
Cycle detail, project analytics |
burnup |
Cycle detail, project analytics |
cumulative-flow |
Project analytics, workspace analytics |
cycle-time |
Project analytics |
distribution-donut |
Analytics (tasks by status, priority) |
velocity |
Workspace analytics, project analytics |
workload-bar |
Workload page, team member detail |
Settings Components (components/settings/)
| Component |
Used In |
general-settings-form |
General settings page |
labels-manager |
Labels settings page |
members-table |
Members settings page |
notification-preferences-form |
Notification settings page |
settings-nav |
Settings sidebar navigation |
Layout Components (components/layout/)
| Component |
Purpose |
app-header |
Top bar with search, notifications, user menu |
app-sidebar |
Collapsible workspace sidebar navigation |
command-palette |
Global search command palette (Cmd+K) |
project-sidebar-nav |
Project-level sub-navigation |
skip-link |
Accessibility skip-to-content link |
theme-toggle |
Light/dark mode switch |
workspace-switcher |
Switch between workspaces |
Accessibility Components (components/a11y/)
| Component |
Purpose |
live-region |
Announces dynamic content changes to screen readers |
visually-hidden |
Hides content visually while keeping it accessible |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data (projects, tasks, cycles, modules, goals, team members, activities, notifications, templates, views, automations, analytics data) |
types/index.ts |
TypeScript interfaces for all domain objects (Workspace, Project, Task, Cycle, Module, Goal, Page, TeamMember, Activity, Notification, AutomationRule, ProjectTemplate, SavedView, FilterCriteria, analytics types, settings types) |
lib/utils.ts |
cn() class name utility |
hooks/use-mobile.ts |
Mobile viewport detection |
app/globals.css |
Design tokens (oklch colors with blue-violet hue 255, spacing, typography) |