# Manage Frontend

React + TypeScript SPA for Manage, consuming the FastAPI backend.

## Tech Stack

- **Vite** — Build tool
- **React 18+** — UI framework
- **TypeScript** — Type safety
- **@tanstack/react-query** — Data fetching/caching
- **ag-grid-react** — Data tables (media, file browser)
- **recharts** — Monitoring charts
- **react-router-dom** — Client-side routing
- **Tailwind CSS** — Styling

## Setup

```bash
cd frontend
npm install
```

## Development

```bash
npm run dev
```

Runs on http://localhost:5173 with API requests proxied to http://localhost:8000.

Make sure the backend is running:

```bash
cd ../backend
uvicorn main:app --reload --port 8000
```

## Build

```bash
npm run build
```

Output goes to `frontend/dist/`.

## Pages

- **Dashboard** (`/`) — Now playing, server overview, library stats
- **Monitoring** (`/monitoring`) — CPU/IO wait/RAM/network/disk charts, collector controls
- **Media** (`/media`) — Full-library table with sort/filter/search
- **Users** (`/users`) — Read-only Jellyfin user list with optional Jellyseerr enrichment
- **File Browser** (`/files`) — Remote directory browsing, ffprobe preview, jobs

## Environment Variables

Create a `.env` file in `frontend/` if the API is not at `http://localhost:8000`:

```bash
VITE_API_URL=http://your-backend-host:8000
```

In development, the Vite proxy handles `/api` requests automatically.