# PROJECT CONTROL - Frontend

React-based frontend for the PROJECT CONTROL task management system.

## Tech Stack

- **Framework**: React 18 with TypeScript
- **Build Tool**: Vite
- **Styling**: Inline styles with responsive design
- **i18n**: react-i18next (English + Traditional Chinese)
- **State Management**: React Context API
- **Real-time**: WebSocket for live collaboration

## Project Structure

```
src/
├── components/       # Reusable UI components (40+ components)
│   ├── GanttChart.tsx       # Gantt view with frappe-gantt
│   ├── CalendarView.tsx     # Calendar view with FullCalendar
│   ├── TaskDetailModal.tsx  # Task editing modal
│   ├── ErrorBoundary.tsx    # Error handling wrapper
│   └── ...
├── pages/           # Route-level page components
│   ├── Tasks.tsx           # Main task management (Kanban/Gantt/Calendar/List)
│   ├── Dashboard.tsx       # Statistics and widgets
│   ├── Projects.tsx        # Project management
│   ├── WorkloadPage.tsx    # Resource workload heatmap
│   ├── AuditPage.tsx       # Audit log viewer
│   └── ...
├── contexts/        # React Context providers
│   ├── AuthContext.tsx     # Authentication state
│   ├── NotificationContext.tsx  # Real-time notifications
│   └── ProjectSyncContext.tsx   # WebSocket sync
├── services/        # API service modules
│   ├── api.ts              # Axios instance with CSRF/JWT
│   ├── tasks.ts            # Task CRUD operations
│   ├── projects.ts         # Project operations
│   └── ...
├── utils/           # Utility functions
│   ├── logger.ts           # Environment-aware logging
│   └── escapeHtml.ts       # XSS prevention
├── i18n/            # Internationalization config
├── types/           # TypeScript type definitions
└── App.tsx          # Root component with routing
```

## Getting Started

### Prerequisites

- Node.js 18+
- npm or yarn

### Installation

```bash
# Install dependencies
npm install

# Start development server
npm run dev
```

### Available Scripts

| Command | Description |
|---------|-------------|
| `npm run dev` | Start development server (port 5173) |
| `npm run build` | Production build to `dist/` |
| `npm run preview` | Preview production build |
| `npm run lint` | Run ESLint |

## Environment Variables

Create `.env.local` for local development:

```env
VITE_API_URL=http://localhost:8000
```

## Key Features

### Authentication
- JWT-based authentication with automatic refresh
- CSRF token protection for state-changing requests
- Secure token storage with validation

### Task Views
- **Kanban**: Drag-and-drop status management
- **Gantt**: Timeline view with dependencies
- **Calendar**: Date-based task visualization
- **List**: Traditional table view with sorting

### Real-time Collaboration
- WebSocket connection for live updates
- Optimistic UI updates with rollback
- Project-level event channels

### Internationalization
- English and Traditional Chinese support
- Dynamic locale switching
- Date/time localization

## Adding Translations

1. Add keys to `public/locales/en/common.json`
2. Add corresponding translations to `public/locales/zh-TW/common.json`
3. Use `t('key')` in components with `useTranslation()` hook

```typescript
import { useTranslation } from 'react-i18next'

function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('myKey')}</div>
}
```

## Code Splitting

Pages are lazy-loaded using `React.lazy()` for optimal bundle size:

```typescript
const Dashboard = lazy(() => import('./pages/Dashboard'))
```

## Error Handling

- `ErrorBoundary` component wraps the app for graceful error recovery
- `SectionErrorBoundary` for granular component-level recovery
- Environment-aware logging via `logger` utility

## Testing

```bash
# Run tests (if configured)
npm run test
```

## Build for Production

```bash
npm run build
```

Output is generated in `dist/` directory with code splitting and minification.