# Phase E: Frontend Implementation Plan

## 🎯 Overview

Phase E implements the web-based GUI for AtlasOS - Calypso using React + Vite + TypeScript.

## 📋 Technology Stack

- **React 18** - UI framework
- **Vite** - Build tool and dev server
- **TypeScript** - Type safety
- **TailwindCSS** - Styling
- **shadcn/ui** - UI component library
- **TanStack Query** - Data fetching and caching
- **React Router** - Routing
- **Zustand** - State management
- **Axios** - HTTP client
- **WebSocket** - Real-time events

## 🏗️ Project Structure

```
frontend/
├── src/
│   ├── api/              # API client and queries
│   ├── components/       # Reusable UI components
│   ├── pages/            # Page components
│   ├── hooks/            # Custom React hooks
│   ├── store/            # Zustand stores
│   ├── types/            # TypeScript types
│   ├── utils/            # Utility functions
│   ├── lib/              # Library configurations
│   ├── App.tsx           # Main app component
│   └── main.tsx          # Entry point
├── public/               # Static assets
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
└── tailwind.config.js
```

## 📦 Implementation Tasks

### 1. Project Setup ✅
- [x] Initialize Vite + React + TypeScript
- [x] Configure TailwindCSS
- [x] Set up path aliases
- [x] Configure Vite proxy for API

### 2. Core Infrastructure
- [ ] Set up shadcn/ui components
- [ ] Create API client with Axios
- [ ] Set up TanStack Query
- [ ] Implement WebSocket client
- [ ] Create authentication store (Zustand)
- [ ] Set up React Router

### 3. Authentication & Routing
- [ ] Login page
- [ ] Protected route wrapper
- [ ] Auth context/hooks
- [ ] Token management
- [ ] Auto-refresh tokens

### 4. Dashboard
- [ ] Overview cards (storage, tapes, alerts)
- [ ] System health status
- [ ] Recent tasks
- [ ] Active alerts
- [ ] Quick actions

### 5. Storage Management
- [ ] Disk list and details
- [ ] Volume groups
- [ ] Repository management (CRUD)
- [ ] Capacity charts

### 6. Tape Library Management
- [ ] Physical tape libraries
- [ ] Virtual tape libraries (VTL)
- [ ] Tape inventory
- [ ] Load/unload operations
- [ ] Drive status

### 7. iSCSI Management
- [ ] Target list and details
- [ ] LUN mapping
- [ ] Initiator management
- [ ] Configuration apply

### 8. Monitoring & Alerts
- [ ] Alerts list and filters
- [ ] Metrics dashboard
- [ ] Real-time event stream
- [ ] Alert acknowledgment

### 9. System Management
- [ ] Service status
- [ ] Service control
- [ ] Log viewer
- [ ] Support bundle generation

### 10. IAM (Admin Only)
- [ ] User management
- [ ] Role management
- [ ] Permission management

## 🎨 Design Principles

1. **No Business Logic in Components** - All logic in hooks/services
2. **Type Safety** - Full TypeScript coverage
3. **Error Handling** - Unified error handling
4. **Loading States** - Proper loading indicators
5. **Responsive Design** - Mobile-friendly
6. **Accessibility** - WCAG compliance

## 🚀 Getting Started

```bash
cd frontend
npm install
npm run dev
```

## 📝 Next Steps

1. Install dependencies
2. Set up shadcn/ui
3. Create API client
4. Build authentication flow
5. Create dashboard