# 🧩 Component Architecture

## Component Organization

The components are organized by feature and responsibility for better maintainability:

```
components/
├── medication/         # Medication-related components
│   ├── AddMedicationModal.tsx
│   ├── EditMedicationModal.tsx
│   ├── ManageMedicationsModal.tsx
│   ├── DoseCard.tsx
│   └── index.ts
├── auth/              # Authentication components
│   ├── AuthPage.tsx
│   ├── AvatarDropdown.tsx
│   ├── ChangePasswordModal.tsx
│   └── index.ts
├── admin/             # Admin interface components
│   ├── AdminInterface.tsx
│   └── index.ts
├── modals/            # Generic modal components
│   ├── AccountModal.tsx
│   ├── AddReminderModal.tsx
│   ├── EditReminderModal.tsx
│   ├── HistoryModal.tsx
│   ├── ManageRemindersModal.tsx
│   ├── OnboardingModal.tsx
│   ├── StatsModal.tsx
│   └── index.ts
├── ui/                # Reusable UI components
│   ├── BarChart.tsx
│   ├── ReminderCard.tsx
│   ├── ThemeSwitcher.tsx
│   └── index.ts
└── icons/             # Icon components
    └── Icons.tsx
```

## Import Structure

### Feature-Based Imports

```tsx
// Medication components
import { AddMedicationModal, DoseCard } from './components/medication';

// Authentication components
import { AuthPage, AvatarDropdown } from './components/auth';

// Modal components
import { AccountModal, StatsModal } from './components/modals';

// UI components
import { BarChart, ThemeSwitcher } from './components/ui';
```

## Component Categories

### 🏥 **Medication Components**

- **Purpose**: Medication management and dose tracking
- **Components**: AddMedicationModal, EditMedicationModal, ManageMedicationsModal, DoseCard
- **Responsibility**: CRUD operations for medications and dose status management

### 🔐 **Authentication Components**

- **Purpose**: User authentication and profile management
- **Components**: AuthPage, AvatarDropdown, ChangePasswordModal
- **Responsibility**: Login/register, user menus, credential management

### 👑 **Admin Components**

- **Purpose**: Administrative functionality
- **Components**: AdminInterface
- **Responsibility**: User management, system administration

### 🎛️ **Modal Components**

- **Purpose**: Overlay interfaces for specific actions
- **Components**: AccountModal, AddReminderModal, EditReminderModal, HistoryModal, ManageRemindersModal, OnboardingModal, StatsModal
- **Responsibility**: Focused user interactions in modal format

### 🎨 **UI Components**

- **Purpose**: Reusable interface elements
- **Components**: BarChart, ReminderCard, ThemeSwitcher
- **Responsibility**: Visual presentation and data display

## Benefits of This Organization

✅ **Feature Cohesion** - Related components grouped together  
✅ **Easy Navigation** - Clear folder structure  
✅ **Reduced Import Complexity** - Index files for clean imports  
✅ **Better Maintainability** - Logical separation of concerns  
✅ **Scalability** - Easy to add new components in appropriate categories  
✅ **Testing** - Each feature can be tested independently