# shadcn Dashboard

A modern, full-featured dashboard application built with Next.js 14, shadcn/ui, and Chart.js.

## Features

- **Modern Stack**: Next.js 14 App Router, TypeScript, Tailwind CSS v4
- **UI Components**: shadcn/ui component library with custom theming
- **Dark Mode**: Full dark/light theme support with system detection
- **Data Visualization**: Interactive charts using Chart.js
- **Responsive Design**: Mobile-first responsive layout
- **Sidebar Navigation**: Collapsible sidebar with nested navigation
- **Dashboard Components**:
  - 4 metric cards with trend indicators
  - Revenue overview line chart
  - Sales activity bar chart
  - Recent payments table with status badges
  - Team members table with avatars

## Getting Started

### Development

```bash
# Install dependencies
pnpm install

# Run development server
pnpm run dev
```

Open [http://localhost:3000](http://localhost:3000) to view the dashboard.

### Build

```bash
# Create production build
pnpm run build

# Start production server
pnpm start
```

## Project Structure

```
shadcn-dashboard/
├── app/
│   ├── layout.tsx              # Root layout with providers
│   ├── page.tsx                # Main dashboard page
│   └── globals.css             # Global styles
├── components/
│   ├── ui/                     # shadcn/ui components
│   ├── layout/
│   │   ├── app-sidebar.tsx     # Navigation sidebar
│   │   ├── header.tsx          # Top header
│   │   ├── theme-toggle.tsx    # Theme switcher
│   │   └── user-nav.tsx        # User profile dropdown
│   ├── dashboard/
│   │   ├── metric-card.tsx     # Metric display cards
│   │   ├── revenue-chart.tsx   # Revenue line chart
│   │   ├── sales-chart.tsx     # Sales bar chart
│   │   ├── payments-table.tsx  # Payments data table
│   │   ├── team-table.tsx      # Team members table
│   │   └── dashboard-tabs.tsx  # Tab navigation
│   ├── charts/
│   │   ├── line-chart.tsx      # Line chart wrapper
│   │   └── bar-chart.tsx       # Bar chart wrapper
│   └── theme-provider.tsx      # Theme context provider
├── lib/
│   ├── utils.ts                # Utility functions
│   ├── mock-data.ts            # Mock dashboard data
│   └── chart-config.ts         # Chart.js configuration
└── types/
    └── dashboard.ts            # TypeScript interfaces
```

## Tech Stack

- **Framework**: [Next.js 14](https://nextjs.org/) (App Router)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Styling**: [Tailwind CSS v4](https://tailwindcss.com/)
- **UI Components**: [shadcn/ui](https://ui.shadcn.com/)
- **Charts**: [Chart.js](https://www.chartjs.org/) + [react-chartjs-2](https://react-chartjs-2.js.org/)
- **Theme**: [next-themes](https://github.com/pacocoursey/next-themes)
- **Icons**: [Lucide React](https://lucide.dev/)
- **Package Manager**: [pnpm](https://pnpm.io/)

## Features Implemented

### Phase 1: Project Foundation ✅
- Next.js 14 project initialization
- shadcn/ui setup
- All required dependencies installed

### Phase 2: Theme & Layout ✅
- Theme provider with dark/light mode
- Collapsible sidebar navigation
- Header with search and theme toggle
- User profile dropdown

### Phase 3: Data Layer ✅
- TypeScript interfaces for all data types
- Mock data generation
- Type-safe data handling

### Phase 4: Charts ✅
- Chart.js configuration with theme support
- Line chart component
- Bar chart component
- Theme-aware color schemes

### Phase 5: Dashboard Components ✅
- Metric cards with trend indicators
- Revenue overview chart
- Sales activity chart
- Payments table with actions
- Team members table

### Phase 6: Assembly & Polish ✅
- Complete dashboard page layout
- Responsive grid system
- Custom scrollbar styling
- Inter font integration

### Phase 7: Testing ✅
- Development server verified
- Production build successful
- No TypeScript errors
- All components rendering correctly

## Development Notes

See [CLAUDE.md](CLAUDE.md) for development-specific notes.

See [PLAN.md](PLAN.md) for the detailed implementation plan.

## License

MIT