feat(web): frontend foundation — Tailwind terminal theme, Query, Router, Zustand + live booth screen

Add tailwindcss (Bloomberg-terminal theme in index.css), @tanstack/react-query +
react-router, zustand, and Radix primitives. Router with role-guarded routes;
QueryClient wrapping the existing apiFetch; a small Zustand live store fed by a
/api/ws client that invalidates Query caches. Booth screen: live occupancy gauge
+ streaming entry/exit/payment feed. Vite proxies the WS upgrade.

Note: BoothScreen references the pay/exit modal + active-sessions panel added in
following commits; final HEAD builds.
This commit is contained in:
2026-06-18 11:00:42 +02:00
parent c2f06a5d2a
commit 49df2015c8
13 changed files with 1870 additions and 49 deletions
+28
View File
@@ -0,0 +1,28 @@
import { QueryClient } from "@tanstack/react-query";
// Single QueryClient for the app. TanStack Query owns SERVER state (fetch, cache,
// refetch, loading/error) — wrapping the existing thin api.ts fetchers. Client/UI
// state (live feed, WS status) lives in Zustand, not here. The WS layer invalidates
// these caches on live events so Query stays the source of truth for server data.
//
// Defaults tuned for a single-appliance booth: no window-focus refetch (it's a
// kiosk, not a tab someone switches to), and a short staleTime since the WS is the
// real freshness mechanism — queries are the fallback/initial load.
export const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
staleTime: 5_000,
retry: 1,
},
},
});
/** Stable query keys — referenced by both the screens and the WS invalidator. */
export const qk = {
me: ["me"] as const,
occupancy: ["occupancy"] as const,
events: ["events"] as const,
activeSessions: ["active-sessions"] as const,
siteConfig: ["site-config"] as const,
} as const;