71 lines
2.9 KiB
Markdown
71 lines
2.9 KiB
Markdown
# 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.
|