Application UI Framework

---

Epic: Layout and Navigation ✓

Plan: Build the foundational layout with a collapsible dark sidebar, React Router navigation, and responsive collapse behavior.

Architectural Context: The sidebar is the primary navigation surface, built with a dark theme (#111C33) and logo. React Router provides static route definitions for all pages. Responsive collapse shrinks the sidebar to icons on smaller screens, maximizing content area.

Build Brief

Tasks

• Build collapsible dark sidebar (#111C33) with logo and navigation items
• Implement React Router with static route definitions
• Build responsive sidebar collapse to icons on smaller screens

---

Epic: Component Library

Plan: Implement 25 reusable shadcn/ui components (New York variant) with a co-location structure for scalable organization.

Architectural Context: The component library provides the building blocks for all UI. shadcn/ui (New York variant) is chosen for its accessibility, customizability, and Tailwind CSS integration. Components are organized by feature in a co-location structure (pages/, components/, hooks/, libs/, styles/).

Tasks

• Implement 25 reusable shadcn/ui components (alert, avatar, badge, breadcrumb, button, calendar, card, checkbox, collapsible, datepicker, dialog, dropdown-menu, field, input, label, pagination, popover, select, separator, skeleton, sonner, spinner, table, tabs)
• Build component co-location structure (pages/, components/, hooks/, libs/, styles/)

---

Epic: Design System

Plan: Implement Tailwind CSS 4 with oklch color space theming, consistent styling, and dark/light mode support.

Architectural Context: Tailwind CSS 4 with oklch provides perceptually uniform color manipulation. The design system ensures visual consistency across all components. Dark/light mode support adapts to user preference and reduces eye strain during extended use.

Tasks

• Implement Tailwind CSS 4 with oklch color space theming
• Build consistent styling across all components
• Implement dark/light mode support