141 lines
4.2 KiB
Markdown
141 lines
4.2 KiB
Markdown
# 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
|