PROJECT-CONTORL/frontend

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

# 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:

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

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:

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

# Run tests (if configured)
npm run test

Build for Production

npm run build

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