Dashfront

Vite + React web client for Dashback. Auth uses Google Sign-In and a cookie session on the Dashback API.

Stack

• Vite 8 (type: module)
• React 19 (function components only)
• MUI 9 (@mui/material, @mui/icons-material, Emotion)
• notistack (toast notifications)
• Google Identity Services + Dashback cookie auth

Getting started

npm install
npm run dev

Open http://localhost:4209. The dev server proxies /api to Dashback at http://localhost:4208 and uses Vite HMR for fast reloads.

To test the full PWA precache (production build + preview, no HMR), use npm run dev:pwa instead.

For production deployment with NGINX, see NGINX.md.

Dashback must be running and your Google account must be authorized on the backend.

Shared GUI library (dashgui)

Reusable custom GUI class components live in the dashgui package (../dashgui), installed here as a file: dependency (npm workspace symlink) so source imports are reflected instantly.

• dashgui/panels — PanelTile, PanelTileGrid, EditablePanelTile, layout helpers
• dashgui/lists — RecordList, the generic presentational list used by the Lieferungen / Angebote / Bestellungen / Kunden list pages
• dashgui/tiles — base Tile (extended by src/components/tiles/*)
• dashgui/SingleLineTextEdit, dashgui/ElevatedPill

See ../dashgui/README.md for details and the dev/mock-page harness used for future test cases.

Auth flow

1. On boot the app calls GET /api/auth/me with credentials: 'include'.
   • 200 — { user, googleClientId } (valid session)
   • 401 / 403 — { error, googleClientId } (no session or no longer authorized)
2. The login page uses googleClientId from that response to obtain a Google ID token and posts it to POST /api/auth/login as { idToken }.
3. Dashback sets an HTTP-only token cookie; all later API calls send it automatically.
4. Sign out calls POST /api/auth/logout.

The Vite dev proxy (/api → Dashback) satisfies the same-origin cookie requirement without needing HTTPS on the frontend dev server.

Architecture & State Management

• src/automats/* — reactive state containers powered by react-automat (no React Context, hooks, or HOCs).
• automat-graph.svg / automat-graph.dot — interactive visual topology of all 32 Automats across 12 domain clusters and 60 dataflow relationships.
• npm run automat-graph — regenerates the Automat Graph SVG and DOT files using Graphviz Wasm.
• src/api/index.js — all backend communication (credentials: 'include').
• src/auth/googleSignIn.js — Google Identity Services helper.
• src/auth/AuthProvider.jsx — session state + login/logout.
• src/auth/useAuth.js — auth context hook.
• src/components/* — components reading synchronously from automats and subscribing via fine-grained selectors.