# 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

```bash
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](file:///home/seb/src/dashfront/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.