# Frontend

Vite React demo UI for the minimal job queue.

![prompt for generating an svg image for the React frontend information architecture of a job queue demo UI with four routes: dashboard, jobs page, job detail page, and global events page; show shared AppLayout with topbar/sidebar, API client calling Django REST endpoints, and visual panels for stats, job table, detail timeline, and terminal-style event log; use clean product UI diagram style](../assets/images/frontend/ui-architecture.png)

It reuses the visual style from the previous advanced frontend, but only keeps:

- dashboard
- jobs page
- job detail page
- global events page

The UI polls:

![prompt for generating an svg image for frontend polling and pagination data flow: dashboard polls jobs stats and recent events every 2 seconds, job detail polls job and job events every 1 second, events page fetches first cursor page then loads older pages on terminal scroll, jobs page uses limit-offset pagination with page size and page number; show React pages on left and API endpoints on right with interval labels](../assets/images/frontend/data-flow.png)

- jobs and stats every 2 seconds
- events every 1 second

No WebSockets are used.

![prompt for generating an svg image for a terminal-style event log UI component with dark console background, colored rows by event type, cursor-paginated first page, older events loaded only when scrolling inside the terminal, and custom theme-aware scrollbar; include labels for live polling, de-duplication, and infinite scroll boundary](../assets/images/frontend/terminal-event-feed.png)

## Run

```powershell
npm install
npm run dev
```

The Docker frontend image serves the local `dist/` directory with nginx, so run `npm run build` before `docker compose up --build` if `dist/` is missing or stale.