# 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
- **@tanstack/react-table** — Data tables (media, file browser)
- **react-router-dom** — Client-side routing
- **Tailwind CSS** + **shadcn/ui** — 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, library stats, configurable widgets and shortcuts, frontend/backend version chips in the shell header
- **Observability** (`/observability`) — Thin dashboard: Alertmanager alerts, Prometheus target health, machine status, and Grafana deep-links (no in-app charting)
- **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
- **Settings** (`/settings`) — Persistent monitoring machine definitions, SSH keys, and setup workflow
- **Actions** (`/actions`) — Saved server tasks (shell/python) targeting ssh_tasks services

## Environment Variables

Set `VITE_API_URL` and any OIDC variables directly in your shell or Compose build args if the API is not at `http://localhost:8000`.
The frontend version defaults to the package.json version and can be overridden with `VITE_APP_VERSION` and `VITE_APP_BUILD_INFO` when you need explicit deployed labels.

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

## Configuration workflow examples

- **Local development**: run `docker compose -f docker-compose.dev.yml up --build`, then open the app and add monitoring machines in the **Settings** tab.
- **Production**: export the required Compose variables in your shell, run `docker compose up --build`, and manage local/remote machines from **Settings**.
- **Observability**: Manage only deploys backend + frontend. It connects to **existing** Grafana/Prometheus/Alertmanager instances; see `docker-compose.observability.yml` for an optional standalone example stack. A machine can be `local` (the API host itself) or `ssh` (a remote host), and the UI treats both the same after configuration.

In development, the Vite proxy handles `/api` requests automatically. `VITE_GRAFANA_URL` / `VITE_PROMETHEUS_URL` are optional frontend deep-link overrides for your existing instances.