A modern project management dashboard built with React, Vite, and Tailwind CSS.
- Dashboard: Overview of KPIs, revenue charts, recent activity, and alerts
- Analytics: Detailed insights with revenue trends, user growth, and traffic sources
- Projects: Project management with filtering, sorting, and detailed views
- Team: Team member management with department filtering
- Billing: Subscription management, payment methods, and invoice history
- Settings: Profile, workspace, notifications, and security settings
- React 19 - UI library
- Vite - Build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- React Router - Client-side routing
- Zustand - State management
- Recharts - Chart library
- Framer Motion - Animation library
- Vitest - Testing framework
- Testing Library - React testing utilities
- Node.js 18+
- npm or yarn
# Clone the repository
git clone <repository-url>
# Navigate to the project directory
cd command-center
# Install dependencies
npm install
# Start the development server
npm run devThe application will be available at http://localhost:5173
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Run linter
npm run lint
# Run tests
npm run test
# Run tests with UI
npm run test:ui
# Run tests with coverage
npm run test:coveragesrc/
├── components/ # Reusable components
│ ├── billing/ # Billing-related components
│ ├── layout/ # Layout components (Header, Sidebar)
│ ├── settings/ # Settings-related components
│ └── ui/ # UI components (Button, Card, etc.)
├── constants/ # Application constants
├── data/ # Mock data
├── hooks/ # Custom React hooks
├── layouts/ # Page layouts
├── pages/ # Page components
├── stores/ # Zustand stores
├── test/ # Test setup and utilities
├── utils/ # Utility functions
├── App.jsx # Main app component
├── index.css # Global styles
└── main.jsx # Entry point
- Button - Customizable button with variants (primary, secondary, danger, ghost)
- Card - Container component with padding options
- Icon - Centralized icon component with 50+ icons
- Table - Reusable table with sorting and empty states
- Filters - Filter components (FilterTabs, SortDropdown, SearchFilter)
- Toast - Toast notification system
- ConfirmDialog - Confirmation dialog for destructive actions
- ErrorBoundary - Error boundary for graceful error handling
- Tabs - Tab navigation component
- StatusBadge - Status indicator badges
- ProgressBar - Progress indicator
- Skeleton - Loading skeleton placeholders
- useKeyboardShortcuts - Keyboard shortcut management
- useAppStore - Zustand store for app state
- validation.js - Form validation utilities
- showToast.js - Toast notification helper
The app uses Zustand for state management with the following stores:
- useAppStore - Global app state (sidebar, theme, preferences, loading, errors, etc.)
The app uses Tailwind CSS with custom CSS variables for theming:
- Colors: Deep black base with purple accent
- Typography: Inter font family
- Spacing: Consistent spacing scale
- Shadows: Custom shadow utilities for depth
- Animations: Custom transition utilities
The app includes several accessibility features:
- ARIA labels on interactive elements
- Keyboard navigation support
- Focus management
- Screen reader friendly
- Color contrast compliance
The app includes Progressive Web App features:
- Service worker for offline support
- Web app manifest
- Push notification support
- Background sync capability
Tests are written using Vitest and Testing Library:
# Run all tests
npm run test
# Run tests in watch mode
npm run test -- --watch
# Run tests with coverage
npm run test:coverage- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Icons from Heroicons
- Design inspiration from modern dashboard UIs
- Built with Vite and React