Vue 3 Component Architecture

Project Structure

src/
├── components/
│   ├── common/           # Shared components (BaseCard, ColorPicker, Toast)
│   └── [module-name]/    # Feature modules (cards + admin components)
├── composables/          # Reusable Vue composition functions
├── services/            # API services and utilities
└── types/              # TypeScript definitions

BaseCard Pattern

All dashboard cards extend BaseCard for consistency: