feat(modules): venue-module registry — entitled ∩ activated, requireModule, Setup panel
Groundwork for the Car Wash pilot (wiki/decisions/venue-modules.md, build-order
steps 1 + 3). No Car Wash code yet; validation is the first module behind the
seam, unchanged in behaviour.
- @parking/shared: MODULE_IDS, ModuleManifest, MODULES (parking required;
validation dependsOn parking), parseEntitledModules / resolveModuleActivation
/ effectiveModules as pure functions.
- DB: site_config.modules_json (migration 0026, hand-written + journal;
additive, nullable = everything entitled).
- Server: modules.ts (entitledModules from MODULES_ENTITLED env, activated
from site_config, effective set, requireModule preHandler → 403
module_disabled); modules/index.ts registers folder-based modules by
iterating the registry (modules/validation); site-config GET exposes
modules/modulesEntitled/modulesActivated, PUT takes the full desired set,
enforces entitlement + dependency rules (400 with reason) and signs one
config_change per module that actually flips; /api/auth/me carries the
effective set; validation routes guarded requireModule → requirePermission.
- Web: lib/modules.ts + modules/{index,validation}; router.tsx spreads
WEB_MODULES into nav + route tree (validate route no longer named there);
Setup → Site "Modules" panel (required shown disabled, dependencies as
hints, server refusal shown verbatim); validation sections + programs fetch
gated on the module; App invalidates the router whenever the session
changes (route-context consumers only re-read on navigation — the nav was
stale after a flip, and after every other setUser too).
- Lavazh validation station retired (STATIONS = ["bar"]; rows untouched).
- Deploy: MODULES_ENTITLED=parking,validation explicit in both booth stacks;
documented in .env.example.
- Tests: modules.test.ts (7); suite 329/329; web build clean; Playwright
round-trip on /setup/site verified live.
Claude-Session: https://claude.ai/code/session_01FWncR69HgGPuei1dLrW3cU
This commit is contained in:
@@ -1,6 +1,8 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useRouteContext } from "@tanstack/react-router";
|
||||
import {
|
||||
fetchMe,
|
||||
fetchOccupancy,
|
||||
fetchSiteConfig,
|
||||
fetchValidationPrograms,
|
||||
@@ -10,7 +12,9 @@ import {
|
||||
type SiteConfig,
|
||||
type ValidationProgramView,
|
||||
} from "./api.js";
|
||||
import { STATIONS, ValidationStationsPanel, defaultProgram, type StationId } from "./ValidationSetup.js";
|
||||
import { STATIONS, ValidationStationsPanel, defaultProgram, stationLabelKey, type StationId } from "./ValidationSetup.js";
|
||||
import { MODULES, type ModuleId } from "@parking/shared";
|
||||
import type { RouterContext } from "./router.js";
|
||||
|
||||
// Live occupancy + capacity + park metadata. Occupancy is shown to everyone (it's a
|
||||
// fold over the signed ledger); capacity and the metadata fields are admin-editable.
|
||||
@@ -42,23 +46,43 @@ export function SiteSettings({ canEdit }: { canEdit: boolean }) {
|
||||
// station's `active` (persisted at once — each flip signs a config_change); the
|
||||
// right-column panel edits the enabled stations. See validation-discounts.md.
|
||||
const [programs, setPrograms] = useState<ValidationProgramView[]>([]);
|
||||
// Venue modules: what this site is entitled to (vendor-set), what the admin has
|
||||
// activated, and the effective set. Toggling persists at once (the server signs a
|
||||
// config_change per module that flips and validates dependencies). See
|
||||
// wiki/decisions/venue-modules.md.
|
||||
const [mods, setMods] = useState<{ entitled: ModuleId[]; activated: ModuleId[]; effective: ModuleId[] } | null>(null);
|
||||
const [modMsg, setModMsg] = useState<string | null>(null);
|
||||
const moduleOn = (id: ModuleId) => mods?.effective.includes(id) ?? false;
|
||||
// The header nav gates module entries on the SESSION's module set (/api/auth/me),
|
||||
// so a flip here must refresh the session too or the nav stays stale until reload
|
||||
// (App re-validates the router whenever `user` changes).
|
||||
const { setUser } = useRouteContext({ strict: false }) as RouterContext;
|
||||
|
||||
function reload() {
|
||||
fetchOccupancy().then(setOcc).catch(() => {});
|
||||
}
|
||||
/** The validation programs are a module route — only ask for them while the
|
||||
* module is effective (the server 403s otherwise, which would land in app_logs
|
||||
* as a failed request every time an admin opens this page). */
|
||||
function loadPrograms(effective: ModuleId[]) {
|
||||
if (!canEdit || !effective.includes("validation")) {
|
||||
setPrograms([]);
|
||||
return;
|
||||
}
|
||||
fetchValidationPrograms()
|
||||
.then((r) => setPrograms(r.programs))
|
||||
.catch(() => {});
|
||||
}
|
||||
useEffect(() => {
|
||||
reload();
|
||||
if (canEdit) {
|
||||
fetchValidationPrograms()
|
||||
.then((r) => setPrograms(r.programs))
|
||||
.catch(() => {});
|
||||
}
|
||||
fetchSiteConfig()
|
||||
.then((c) => {
|
||||
setCapInput(c.capacity == null ? "" : String(c.capacity));
|
||||
setExitVoucherDefault(c.exitVoucherDefault);
|
||||
setReserveSubs(c.reserveSubscriberSpots);
|
||||
setAnprEntry(c.anprEntryEnabled);
|
||||
setMods({ entitled: c.modulesEntitled, activated: c.modulesActivated, effective: c.modules });
|
||||
loadPrograms(c.modules);
|
||||
const m: Record<string, string> = {};
|
||||
for (const { key } of META_FIELDS) m[key] = c[key] == null ? "" : String(c[key]);
|
||||
setMeta(m);
|
||||
@@ -73,7 +97,7 @@ export function SiteSettings({ canEdit }: { canEdit: boolean }) {
|
||||
const existing = programs.find((p) => p.id === id);
|
||||
const body = existing
|
||||
? { ...existing, active }
|
||||
: { ...defaultProgram(id, t(id === "bar" ? "val.enableBar" : "val.enableLavazh")), active };
|
||||
: { ...defaultProgram(id, t(stationLabelKey(id))), active };
|
||||
try {
|
||||
const saved = await saveValidationProgram(id, body);
|
||||
setPrograms((ps) => [...ps.filter((p) => p.id !== id), saved]);
|
||||
@@ -82,6 +106,23 @@ export function SiteSettings({ canEdit }: { canEdit: boolean }) {
|
||||
}
|
||||
}
|
||||
|
||||
/** Flip a module: send the full desired activation set; the server decides
|
||||
* (required always on, must be entitled, dependencies) and echoes the result. */
|
||||
async function toggleModule(id: ModuleId, on: boolean) {
|
||||
if (!mods) return;
|
||||
setModMsg(null);
|
||||
const next = on ? [...new Set([...mods.activated, id])] : mods.activated.filter((m) => m !== id);
|
||||
try {
|
||||
const c = await saveSiteConfig({ modules: next });
|
||||
setMods({ entitled: c.modulesEntitled, activated: c.modulesActivated, effective: c.modules });
|
||||
loadPrograms(c.modules);
|
||||
const me = await fetchMe();
|
||||
if (me) setUser(me);
|
||||
} catch (e) {
|
||||
setModMsg((e as Error).message);
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
setMsg(null);
|
||||
const raw = capInput.trim();
|
||||
@@ -164,22 +205,53 @@ export function SiteSettings({ canEdit }: { canEdit: boolean }) {
|
||||
</span>
|
||||
</label>
|
||||
<div className="border-t border-term-border pt-3 text-[0.6875rem] uppercase tracking-wider text-term-muted">
|
||||
{t("val.sectionTitle")}
|
||||
{t("modules.sectionTitle")}
|
||||
</div>
|
||||
<span className="hint -mt-2">{t("val.sectionHint")}</span>
|
||||
<div className="flex gap-6">
|
||||
{STATIONS.map((id) => (
|
||||
<label key={id} className="flex items-center gap-2 text-[0.75rem] text-term-text">
|
||||
<span className="hint -mt-2">{t("modules.sectionHint")}</span>
|
||||
<div className="grid gap-1.5">
|
||||
{MODULES.filter((m) => mods?.entitled.includes(m.id)).map((m) => (
|
||||
<label key={m.id} className="flex items-start gap-2 text-[0.75rem] text-term-text">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="accent-term-amber"
|
||||
checked={programs.find((p) => p.id === id)?.active ?? false}
|
||||
onChange={(e) => toggleStation(id, e.target.checked)}
|
||||
className="mt-0.5 accent-term-amber"
|
||||
checked={moduleOn(m.id)}
|
||||
disabled={m.required || !mods}
|
||||
onChange={(e) => toggleModule(m.id, e.target.checked)}
|
||||
/>
|
||||
{t(id === "bar" ? "val.enableBar" : "val.enableLavazh")}
|
||||
<span>
|
||||
{t(`modules.name.${m.id}`)}
|
||||
{m.required && <span className="hint block">{t("modules.required")}</span>}
|
||||
{m.dependsOn.length > 0 && (
|
||||
<span className="hint block">
|
||||
{t("modules.requires", { deps: m.dependsOn.map((d) => t(`modules.name.${d}`)).join(", ") })}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
{modMsg && <span className="text-[0.75rem] text-term-red">{modMsg}</span>}
|
||||
</div>
|
||||
{moduleOn("validation") && (
|
||||
<>
|
||||
<div className="border-t border-term-border pt-3 text-[0.6875rem] uppercase tracking-wider text-term-muted">
|
||||
{t("val.sectionTitle")}
|
||||
</div>
|
||||
<span className="hint -mt-2">{t("val.sectionHint")}</span>
|
||||
<div className="flex gap-6">
|
||||
{STATIONS.map((id) => (
|
||||
<label key={id} className="flex items-center gap-2 text-[0.75rem] text-term-text">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="accent-term-amber"
|
||||
checked={programs.find((p) => p.id === id)?.active ?? false}
|
||||
onChange={(e) => toggleStation(id, e.target.checked)}
|
||||
/>
|
||||
{t(stationLabelKey(id))}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="border-t border-term-border pt-3 text-[0.6875rem] uppercase tracking-wider text-term-muted">
|
||||
{t("site.parkDetails")}
|
||||
</div>
|
||||
@@ -211,7 +283,7 @@ export function SiteSettings({ canEdit }: { canEdit: boolean }) {
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
{canEdit && (
|
||||
{canEdit && moduleOn("validation") && (
|
||||
<ValidationStationsPanel
|
||||
programs={programs}
|
||||
onSaved={(p) => setPrograms((ps) => [...ps.filter((x) => x.id !== p.id), p])}
|
||||
|
||||
Reference in New Issue
Block a user