# 6. Components Architecture

## Component Hierarchy

```
src/components/
├── ui/                    # shadcn/ui primitives
│   ├── button.tsx
│   ├── input.tsx
│   ├── dialog.tsx
│   ├── table.tsx
│   ├── select.tsx
│   ├── checkbox.tsx
│   ├── tabs.tsx
│   ├── card.tsx
│   ├── badge.tsx
│   ├── progress.tsx
│   └── ...
│
├── layout/               # Layout components
│   ├── app-shell.tsx     # Main layout wrapper
│   ├── app-sidebar.tsx   # Navigation sidebar
│   └── app-header.tsx    # Top header with breadcrumbs
│
├── characters/           # Character feature components
│   ├── character-list.tsx
│   ├── character-card.tsx
│   ├── character-form.tsx
│   ├── character-filters.tsx
│   └── character-bulk-actions.tsx
│
├── accounts/             # Account feature components
│   ├── account-list.tsx
│   ├── account-card.tsx
│   └── account-form.tsx
│
├── teams/                # Team feature components
│   ├── team-list.tsx
│   ├── team-detail.tsx
│   ├── team-form.tsx
│   └── team-member-selector.tsx
│
├── progressions/         # Progression feature components
│   ├── progression-section.tsx
│   ├── progression-tracker.tsx
│   └── progression-filters.tsx
│
└── shared/               # Shared components
    ├── data-table.tsx
    ├── search-input.tsx
    ├── pagination.tsx
    ├── confirmation-modal.tsx
    ├── loading-spinner.tsx
    └── error-boundary.tsx
```

## Component Design Principles

1. **Composition over inheritance** - Prefer composing smaller components
2. **Props interface first** - Define TypeScript interfaces for all props
3. **Controlled components** - Parent manages state when needed
4. **Accessible by default** - Use semantic HTML, ARIA attributes
5. **Responsive design** - Mobile-first approach with Tailwind

---