The Inventory Management Kit uses Next.js App Router with route groups to separate the main inventory dashboard from the authentication flow.
Directory Overview
inventory-management-kit/
├── app/
│ ├── (dashboard)/ # Main inventory pages
│ │ ├── layout.tsx # AppSidebar + AppHeader
│ │ ├── page.tsx # Inventory dashboard
│ │ ├── activity/page.tsx # Activity log
│ │ ├── notifications/page.tsx # Notification center
│ │ ├── products/
│ │ │ ├── page.tsx # Product list
│ │ │ ├── [id]/page.tsx # Product detail
│ │ │ ├── [id]/edit/page.tsx # Edit product
│ │ │ ├── new/page.tsx # Add new product
│ │ │ └── categories/page.tsx # Category management
│ │ ├── purchase-orders/
│ │ │ ├── page.tsx # Purchase order list
│ │ │ ├── [id]/page.tsx # PO detail with line items
│ │ │ ├── [id]/edit/page.tsx # Edit purchase order
│ │ │ ├── new/page.tsx # Create purchase order
│ │ │ └── [id]/receive/page.tsx # Receive items against PO
│ │ ├── suppliers/
│ │ │ ├── page.tsx # Supplier directory
│ │ │ ├── [id]/page.tsx # Supplier detail
│ │ │ └── new/page.tsx # Add new supplier
│ │ ├── warehouses/
│ │ │ ├── page.tsx # Warehouse list
│ │ │ └── [id]/page.tsx # Warehouse detail
│ │ ├── stock/
│ │ │ ├── page.tsx # Stock overview
│ │ │ ├── adjustments/page.tsx # Stock adjustments list
│ │ │ ├── adjustments/new/page.tsx # New stock adjustment
│ │ │ ├── transfers/page.tsx # Stock transfers list
│ │ │ └── transfers/new/page.tsx # New stock transfer
│ │ ├── reports/
│ │ │ ├── page.tsx # Reports overview
│ │ │ ├── stock-value/page.tsx # Stock value report
│ │ │ ├── suppliers/page.tsx # Supplier performance report
│ │ │ └── turnover/page.tsx # Inventory turnover report
│ │ └── settings/
│ │ ├── page.tsx # General settings
│ │ └── team/page.tsx # Team management
│ ├── (auth)/ # Authentication
│ │ ├── layout.tsx # Centered card layout
│ │ ├── login/page.tsx
│ │ ├── register/page.tsx
│ │ └── forgot-password/page.tsx
│ ├── globals.css # Design tokens
│ └── layout.tsx # Root layout
├── components/
│ ├── ui/ # shadcn/ui primitives (~25 components)
│ ├── inventory/ # Inventory composites (15+ components)
│ ├── charts/ # Chart components (5 components)
│ ├── layout/ # Layout components (4 components)
│ └── a11y/ # Accessibility 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 inventory pages (dashboard, products, purchase orders, suppliers, warehouses, stock, reports, settings, activity, notifications) |
(auth) |
Centered card |
Login, register, forgot password |
Component Organization
Primitives (components/ui/)
Approximately 25 shadcn/ui components: Avatar, Badge, Breadcrumb, Button, Calendar, Card, Chart, Checkbox, Collapsible, Command, Dialog, DropdownMenu, Input, Label, Popover, Progress, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Switch, Table, Tabs, Textarea, and Tooltip.
Inventory Composites (components/inventory/)
| Component |
Used In |
stats-card |
Dashboard, reports, stock overview |
product-card |
Product list, product detail, dashboard |
order-row |
Purchase order list, supplier detail |
order-line-item |
PO detail, PO edit, receive items |
supplier-card |
Supplier directory, supplier detail |
warehouse-card |
Warehouse list, warehouse detail |
stock-level-bar |
Stock overview, warehouse detail, product detail |
adjustment-row |
Stock adjustments list |
transfer-row |
Stock transfers list |
category-tag |
Product list, product detail, categories page |
status-badge |
Purchase orders, stock transfers, adjustments |
low-stock-alert |
Dashboard, stock overview |
activity-item |
Activity log, product detail, PO detail |
notification-item |
Notifications page |
Chart Components (components/charts/)
| Component |
Used In |
stock-level-chart |
Dashboard, stock overview, warehouse detail |
stock-value-chart |
Reports stock value, dashboard |
turnover-chart |
Reports inventory turnover |
supplier-chart |
Reports supplier performance |
category-breakdown |
Dashboard, reports overview |
Layout Components (components/layout/)
| Component |
Purpose |
app-header |
Top bar with search, notifications, user menu |
app-sidebar |
Collapsible sidebar navigation with inventory sections |
command-palette |
Global search command palette (Cmd+K) |
theme-toggle |
Light/dark mode switch |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data (products, categories, purchase orders, suppliers, warehouses, stock levels, adjustments, transfers, activities, notifications, reports) |
types/index.ts |
TypeScript interfaces for all domain objects (Product, Category, PurchaseOrder, LineItem, Supplier, Warehouse, StockLevel, Adjustment, Transfer, etc.) |
lib/utils.ts |
cn() class name utility |
hooks/use-mobile.ts |
Mobile viewport detection |
app/globals.css |
Design tokens (oklch colors, spacing, typography) |