# Frontend Architecture - ECM MT5 Investment Platform

## Status: COMPLETE

All foundational frontend architecture has been set up successfully.

## Technology Stack
- Vue 3 (Composition API)
- Vite (Build tool)
- Pinia (State management)
- Vue Router (Routing)
- Axios (HTTP client)
- TailwindCSS (Styling)
- Laravel Sanctum (Authentication)

## Project Structure

```
frontend/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   ├── images/
│   │   ├── icons/
│   │   └── styles/
│   │       └── main.css
│   ├── components/
│   │   ├── common/
│   │   │   ├── BaseButton.vue
│   │   │   ├── BaseCard.vue
│   │   │   ├── BaseInput.vue
│   │   │   ├── BaseModal.vue
│   │   │   ├── BaseTable.vue
│   │   │   ├── BaseBadge.vue
│   │   │   ├── BaseDropdown.vue
│   │   │   └── BaseLoading.vue
│   │   ├── layout/
│   │   │   ├── AppHeader.vue
│   │   │   ├── AppSidebar.vue
│   │   │   ├── AppFooter.vue
│   │   │   └── AppLayout.vue
│   │   ├── finance/
│   │   │   ├── FinanceCard.vue
│   │   │   ├── FinanceTable.vue
│   │   │   ├── FinanceChart.vue
│   │   │   └── FinanceStat.vue
│   │   └── ui/
│   │       ├── Alert.vue
│   │       ├── Toast.vue
│   │       ├── Pagination.vue
│   │       └── EmptyState.vue
│   ├── composables/
│   │   ├── useApi.js
│   │   ├── useAuth.js
│   │   ├── useDebounce.js
│   │   ├── useFormat.js
│   │   └── useResponsive.js
│   ├── layouts/
│   │   ├── DefaultLayout.vue
│   │   ├── AuthLayout.vue
│   │   ├── InvestorLayout.vue
│   │   └── AdminLayout.vue
│   ├── middleware/
│   │   ├── auth.js
│   │   ├── investor.js
│   │   └── admin.js
│   ├── pages/
│   │   ├── auth/
│   │   │   ├── Login.vue
│   │   │   ├── Register.vue
│   │   │   └── ForgotPassword.vue
│   │   ├── investor/
│   │   │   ├── Dashboard.vue
│   │   │   ├── Profile.vue
│   │   │   ├── Balance.vue
│   │   │   ├── ProfitHistory.vue
│   │   │   ├── Distributions.vue
│   │   │   ├── Trades.vue
│   │   │   ├── Referrals.vue
│   │   │   └── SafetyFund.vue
│   │   └── admin/
│   │       ├── Dashboard.vue
│   │       ├── Investors.vue
│   │       ├── Distributions.vue
│   │       ├── Reconciliation.vue
│   │       ├── Settlement.vue
│   │       ├── Mt5Sync.vue
│   │       ├── SafetyFund.vue
│   │       └── FailedSettlements.vue
│   ├── router/
│   │   ├── index.js
│   │   └── routes.js
│   ├── services/
│   │   ├── api.js
│   │   ├── auth.service.js
│   │   ├── investor.service.js
│   │   └── admin.service.js
│   ├── stores/
│   │   ├── auth.js
│   │   ├── investor.js
│   │   ├── admin.js
│   │   └── ui.js
│   ├── utils/
│   │   ├── format.js
│   │   ├── validation.js
│   │   ├── constants.js
│   │   └── helpers.js
│   ├── App.vue
│   └── main.js
├── .env
├── .env.example
├── .env.production
├── .gitignore
├── index.html
├── package.json
├── tailwind.config.js
├── vite.config.js
└── README.md
```

## Architecture Principles

### 1. API-First Structure
- All data comes from backend APIs
- No business logic in frontend
- Frontend is presentation layer only
- All finance calculations done in backend

### 2. Component Reusability
- Base components for common UI elements
- Finance components for finance-specific displays
- Layout components for page structure
- UI components for interactive elements

### 3. State Management (Pinia)
- Auth store: Authentication state
- Investor store: Investor data
- Admin store: Admin data
- UI store: UI state (dark mode, sidebar, etc.)

### 4. Service Layer
- Centralized API calls
- Consistent error handling
- Request/response interceptors
- Authentication token management

### 5. Responsive Design
- Mobile-first approach
- TailwindCSS utility classes
- Breakpoint-based layouts
- Touch-friendly interactions

### 6. Dark Mode Ready
- CSS variables for theming
- TailwindCSS dark mode support
- User preference detection
- Persist user preference

## Route Structure

### Investor Routes
```
/login
/register
/investor/dashboard
/investor/profile
/investor/balance
/investor/profit-history
/investor/distributions
/investor/trades
/investor/referrals
/investor/safety-fund
```

### Admin Routes
```
/admin/dashboard
/admin/investors
/admin/distributions
/admin/reconciliation
/admin/settlement
/admin/mt5-sync
/admin/safety-fund
/admin/failed-settlements
```

## Store Structure

### Auth Store
```javascript
{
  user: null,
  token: null,
  isAuthenticated: false,
  role: null
}
```

### Investor Store
```javascript
{
  investor: null,
  balance: null,
  profitHistory: [],
  distributions: [],
  trades: [],
  referrals: []
}
```

### Admin Store
```javascript
{
  investors: [],
  distributions: [],
  reconciliation: [],
  settlementLogs: [],
  mt5SyncStatus: null
}
```

### UI Store
```javascript
{
  darkMode: false,
  sidebarOpen: true,
  notifications: [],
  loading: false
}
```

## API Service Structure

### Base API Client
- Axios instance with base URL
- Request interceptor for auth token
- Response interceptor for error handling
- Automatic token refresh

### Service Modules
- auth.service.js: Login, logout, register
- investor.service.js: Investor API calls
- admin.service.js: Admin API calls

## Responsive Strategy

### Breakpoints
- Mobile: < 640px
- Tablet: 640px - 1024px
- Desktop: > 1024px

### Mobile-First Approach
- Default styles for mobile
- Use `md:` prefix for tablet
- Use `lg:` prefix for desktop
- Use `xl:` prefix for extra large screens

## Best Practices

### 1. No Finance Logic in Frontend
- All calculations done in backend
- Frontend only displays formatted values
- Use backend API for all financial operations

### 2. Component Naming
- PascalCase for components
- Descriptive names (e.g., FinanceCard, not Card)
- Prefix with type (Base, Finance, Layout, UI)

### 3. File Organization
- Group by feature, not by type
- Use index files for cleaner imports
- Keep components small and focused

### 4. Code Style
- Use Composition API
- Use `<script setup>` syntax
- Use TypeScript for type safety (optional)
- Follow Vue 3 style guide

### 5. Performance
- Lazy load routes
- Use computed properties
- Avoid unnecessary reactivity
- Optimize images

### 6. Security
- Never expose sensitive data
- Use HTTPS in production
- Validate inputs on client and server
- Store tokens securely