Files
tabdeal-job-queue/frontend

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

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

  • 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

Run

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.