feat(demo): plain-language integration status, richer audit, reset integrity
Integration status badges across Dashboard/Automation now show honest plain-language labels instead of raw backend state strings (and fix a few states that had no matching CSS colour class at all). Audit trail gets a "view related events" action reusing the existing correlation_id filter. About page gains scope/architecture/security/testing sections and a guided-demo entry point. POST /api/v1/demo/reset now runs and records a server-side scenario-integrity check. Also fixes a second real race condition (caught by the return-review e2e test): the odometer scenario pre-fill now resolves before ReturnForm mounts instead of patching its value in after the fact.
This commit is contained in:
NuklearRabbit
@@ -3,6 +3,6 @@ export function SeverityBadge({ severity }: { severity: "low" | "medium" | "high
|
||||
return <span className={`badge severity-${severity}`}>{label} severity</span>;
|
||||
}
|
||||
|
||||
export function StatusBadge({ status }: { status: string }) {
|
||||
return <span className={`badge status-${status}`}>{status.replace(/_/g, " ")}</span>;
|
||||
export function StatusBadge({ status, label }: { status: string; label?: string }) {
|
||||
return <span className={`badge status-${status}`}>{label ?? status.replace(/_/g, " ")}</span>;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useRef, useState, type FormEvent } from "react";
|
||||
import { useState, type FormEvent } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { api, ApiError } from "../api/client";
|
||||
import type { RegisterReturnRequest, RegisterReturnResult, ReturnPreviewResult } from "../api/types";
|
||||
@@ -95,7 +95,6 @@ export function ReturnForm({
|
||||
suggestedOdometerKm?: number;
|
||||
}) {
|
||||
const [odometer, setOdometer] = useState(suggestedOdometerKm !== undefined ? String(suggestedOdometerKm) : "");
|
||||
const odometerEditedByUser = useRef(false);
|
||||
const [fuel, setFuel] = useState("50");
|
||||
const [cleanlinessOk, setCleanlinessOk] = useState(true);
|
||||
const [damageReported, setDamageReported] = useState(false);
|
||||
@@ -108,16 +107,6 @@ export function ReturnForm({
|
||||
const [step, setStep] = useState<"capture" | "review">("capture");
|
||||
const [preview, setPreview] = useState<ReturnPreviewResult | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// suggestedOdometerKm arrives asynchronously (BookingDetail fetches the vehicle's
|
||||
// canonical odometer after this form has already mounted), so the initial useState
|
||||
// value alone won't catch it -- sync it once it resolves. Never overwrite a value the
|
||||
// visitor has already started typing.
|
||||
if (suggestedOdometerKm !== undefined && !odometerEditedByUser.current) {
|
||||
setOdometer(String(suggestedOdometerKm));
|
||||
}
|
||||
}, [suggestedOdometerKm]);
|
||||
|
||||
function currentBody(): RegisterReturnRequest {
|
||||
return {
|
||||
end_odometer_km: Number(odometer),
|
||||
@@ -184,10 +173,7 @@ export function ReturnForm({
|
||||
required
|
||||
min={0}
|
||||
value={odometer}
|
||||
onChange={(e) => {
|
||||
odometerEditedByUser.current = true;
|
||||
setOdometer(e.target.value);
|
||||
}}
|
||||
onChange={(e) => setOdometer(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import type { IntegrationStatus } from "../api/types";
|
||||
|
||||
// Plain-language status per section 12 of the demo brief: a visitor shouldn't have to
|
||||
// decode raw backend state strings to tell whether an integration is actually working.
|
||||
// `statusClass` maps onto an existing `.status-*` CSS modifier so the badge keeps
|
||||
// correct colour-coding; `label` is the human-readable text shown instead of the raw value.
|
||||
export const N8N_STATE_META: Record<IntegrationStatus["n8n"]["state"], { statusClass: string; label: string }> = {
|
||||
disabled: { statusClass: "not_configured", label: "Not connected" },
|
||||
unavailable: { statusClass: "unavailable", label: "Delivery failed" },
|
||||
degraded: { statusClass: "needs_attention", label: "Retry available" },
|
||||
operational: { statusClass: "available", label: "Operational" },
|
||||
no_evidence: { statusClass: "no_events", label: "Prepared" },
|
||||
};
|
||||
|
||||
export const MCP_STATE_META: Record<IntegrationStatus["mcp_hub"]["state"], { statusClass: string; label: string }> = {
|
||||
not_configured: { statusClass: "not_configured", label: "Not connected" },
|
||||
configured: { statusClass: "no_events", label: "Prepared" },
|
||||
};
|
||||
@@ -1,4 +1,6 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { useDemoGuide } from "../context/DemoGuideContext";
|
||||
import { useDemoManifest } from "../context/DemoManifestContext";
|
||||
import { Icon } from "../components/Icons";
|
||||
import { IntegrationMark, LoadingState, PageHeader, SectionHeading } from "../components/PageChrome";
|
||||
@@ -21,6 +23,7 @@ const INTEGRATION_ICON: Record<string, "n8n" | "rag" | "mcp"> = {
|
||||
export function AboutDemo() {
|
||||
const { manifest, loading } = useDemoManifest();
|
||||
const { user } = useAuth();
|
||||
const { openGuide } = useDemoGuide();
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
@@ -38,6 +41,18 @@ export function AboutDemo() {
|
||||
|
||||
{manifest && (
|
||||
<>
|
||||
{user?.role === "operations_manager" && (
|
||||
<section className="record-surface about-card about-cta">
|
||||
<div>
|
||||
<strong>Liever meteen aan de slag?</strong>
|
||||
<p>De gegidste demo doorloopt alle acht stappen hierboven in de praktijk.</p>
|
||||
</div>
|
||||
<button type="button" className="button button-primary" onClick={openGuide}>
|
||||
<Icon name="spark" /> Start begeleide demo
|
||||
</button>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="record-surface about-card">
|
||||
<h2>Het fictieve probleem</h2>
|
||||
<p>
|
||||
@@ -50,6 +65,17 @@ export function AboutDemo() {
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="record-surface about-card">
|
||||
<h2>Voor wie en met welke scope</h2>
|
||||
<p>
|
||||
Deze demo is bedoeld voor wie wil zien hoe MobilityOps operationele problemen bij
|
||||
een kleine verhuurder aanpakt: Operations Managers en Rental Employees, en
|
||||
iedereen die de aanpak evalueert. De scope is bewust afgebakend tot één
|
||||
samenhangende proof of concept — geen boekhouding, geen betalingen, geen publieke
|
||||
reservaties, geen volledig CRM of ERP.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="record-surface about-card">
|
||||
<h2>Wat écht werkt</h2>
|
||||
<p>
|
||||
@@ -72,6 +98,37 @@ export function AboutDemo() {
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="record-surface about-card">
|
||||
<h2>Architectuur in het kort</h2>
|
||||
<p>
|
||||
Een React/TypeScript-frontend praat met een FastAPI-backend (PostgreSQL via
|
||||
SQLAlchemy/Alembic-migraties); belangrijke bedrijfsregels leven in de backend, niet
|
||||
in n8n of in prompts. Retours en andere gebeurtenissen worden eerst lokaal
|
||||
gecommit en pas daarna asynchroon via een outbox-patroon aan n8n afgeleverd, zodat
|
||||
een tijdelijke storing in de automatisering nooit een operationele actie blokkeert.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="record-surface about-card">
|
||||
<h2>Beveiliging en toegang</h2>
|
||||
<p>
|
||||
Toegang verloopt via ondertekende, HTTP-only sessiecookies per rol; elke rol
|
||||
gebonden aan een set toegestane routes, zowel serverzijdig afgedwongen als in de
|
||||
navigatie weerspiegeld. Belangrijke statuswijzigingen worden altijd gecontroleerd
|
||||
en gelogd — nooit stilzwijgend automatisch gecorrigeerd.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="record-surface about-card">
|
||||
<h2>Hoe dit getest is</h2>
|
||||
<p>
|
||||
Een geautomatiseerde backend-testsuite dekt bedrijfsregels en API-contracten;
|
||||
een volledige Playwright-eindtot-eind-suite dekt de gebruikersstromen, inclusief
|
||||
deze demo-ervaring zelf. Elke wijziging wordt bovendien tegen een schone checkout
|
||||
(lege database, opnieuw opgebouwd vanaf de seed-data) gevalideerd voor deployment.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section aria-label="Koppelingsstatus" className="record-surface">
|
||||
<SectionHeading
|
||||
title="Koppelingen — eerlijk gelabeld"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link, useSearchParams } from "react-router-dom";
|
||||
import { api } from "../api/client";
|
||||
import type { AuditEvent } from "../api/types";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
@@ -22,9 +22,11 @@ function describeChanges(before: Record<string, unknown> | null, after: Record<s
|
||||
|
||||
export function Audit() {
|
||||
const { user } = useAuth();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [events, setEvents] = useState<AuditEvent[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [action, setAction] = useState("");
|
||||
const [action, setAction] = useState(searchParams.get("action") ?? "");
|
||||
const correlationId = searchParams.get("correlation_id") ?? "";
|
||||
|
||||
useEffect(() => {
|
||||
if (user?.role !== "operations_manager") return;
|
||||
@@ -32,11 +34,20 @@ export function Audit() {
|
||||
setError(null);
|
||||
const params = new URLSearchParams();
|
||||
if (action) params.set("action", action);
|
||||
if (correlationId) params.set("correlation_id", correlationId);
|
||||
api
|
||||
.get<AuditEvent[]>(`/api/v1/audit?${params.toString()}`)
|
||||
.then(setEvents)
|
||||
.catch(() => setError("Audit trail is unavailable right now."));
|
||||
}, [action, user]);
|
||||
}, [action, correlationId, user]);
|
||||
|
||||
function showRelatedEvents(id: string) {
|
||||
setSearchParams({ correlation_id: id });
|
||||
}
|
||||
|
||||
function clearCorrelationFilter() {
|
||||
setSearchParams(action ? { action } : {});
|
||||
}
|
||||
|
||||
if (user?.role !== "operations_manager") {
|
||||
return (
|
||||
@@ -63,6 +74,15 @@ export function Audit() {
|
||||
</label>
|
||||
</form>
|
||||
|
||||
{correlationId && (
|
||||
<p className="quiet-empty" role="status">
|
||||
Showing only events linked to this action ({events?.length ?? "…"} related events).{" "}
|
||||
<button type="button" className="link-button" onClick={clearCorrelationFilter}>
|
||||
Clear this filter
|
||||
</button>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{error && <ErrorState message={error} />}
|
||||
{!error && !events && <LoadingState label="Loading audit trail…" />}
|
||||
{events && events.length === 0 && <EmptyState icon="audit" title="No audit events found" detail="Adjust the action filter." />}
|
||||
@@ -77,6 +97,7 @@ export function Audit() {
|
||||
<th scope="col">Action</th>
|
||||
<th scope="col">Entity</th>
|
||||
<th scope="col">Change</th>
|
||||
<th scope="col">Follow-up</th>
|
||||
<th scope="col">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -98,6 +119,11 @@ export function Audit() {
|
||||
)}
|
||||
</td>
|
||||
<td data-label="Change">{describeChanges(e.before, e.after)}</td>
|
||||
<td data-label="Follow-up">
|
||||
<button type="button" className="link-button" onClick={() => showRelatedEvents(e.correlation_id)}>
|
||||
View related events
|
||||
</button>
|
||||
</td>
|
||||
<td className="mono" data-label="Details">
|
||||
<details>
|
||||
<summary>{e.correlation_id.slice(0, 8)}</summary>
|
||||
|
||||
@@ -4,14 +4,7 @@ import type { AutomationRun, IntegrationStatus, KnowledgeHealth } from "../api/t
|
||||
import { StatusBadge } from "../components/Badge";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { ErrorState, IntegrationMark, LoadingState, PageHeader, SectionHeading } from "../components/PageChrome";
|
||||
|
||||
const N8N_STATE_LABEL: Record<IntegrationStatus["n8n"]["state"], string> = {
|
||||
disabled: "disabled",
|
||||
unavailable: "unavailable",
|
||||
degraded: "degraded",
|
||||
operational: "available",
|
||||
no_evidence: "no_events",
|
||||
};
|
||||
import { N8N_STATE_META, MCP_STATE_META } from "../data/integrationLabels";
|
||||
|
||||
export function Automation() {
|
||||
const { user } = useAuth();
|
||||
@@ -98,9 +91,38 @@ export function Automation() {
|
||||
: "Return events are committed locally first and then delivered through the outbox."}
|
||||
</p>
|
||||
</div>
|
||||
<StatusBadge status={integrationStatus ? N8N_STATE_LABEL[integrationStatus.n8n.state] : (runs?.[0]?.status ?? "no_events")} />
|
||||
{(() => {
|
||||
const meta = integrationStatus ? N8N_STATE_META[integrationStatus.n8n.state] : null;
|
||||
return (
|
||||
<StatusBadge
|
||||
status={meta?.statusClass ?? (runs?.[0]?.status ?? "no_events")}
|
||||
label={meta?.label}
|
||||
/>
|
||||
);
|
||||
})()}
|
||||
</article>
|
||||
<article>
|
||||
<IntegrationMark kind="rag" />
|
||||
<div>
|
||||
<span className="integration-kicker">Knowledge</span>
|
||||
<h2>Knowledge assistant</h2>
|
||||
<p>
|
||||
{knowledge
|
||||
? `${knowledge.provider === "ragcore" ? "RAGcore" : "Demo knowledge base"} · ${knowledge.document_count} procedures indexed in ${knowledge.collection}.`
|
||||
: "Health evidence is currently unavailable."}
|
||||
</p>
|
||||
</div>
|
||||
<StatusBadge
|
||||
status={knowledge?.available ? "available" : "unavailable"}
|
||||
label={
|
||||
knowledge?.available
|
||||
? knowledge.provider === "ragcore"
|
||||
? "Operational"
|
||||
: "Demo mode"
|
||||
: "Unavailable"
|
||||
}
|
||||
/>
|
||||
</article>
|
||||
<article><IntegrationMark kind="rag" /><div><span className="integration-kicker">Knowledge</span><h2>RAGcore</h2><p>{knowledge ? `${knowledge.document_count} procedures indexed in ${knowledge.collection}.` : "Health evidence is currently unavailable."}</p></div><StatusBadge status={knowledge?.available ? "available" : "unavailable"} /></article>
|
||||
<article>
|
||||
<IntegrationMark kind="mcp" />
|
||||
<div>
|
||||
@@ -109,10 +131,13 @@ export function Automation() {
|
||||
<p>
|
||||
{integrationStatus?.mcp_hub.registration_enabled
|
||||
? "Registration is enabled for this deployment."
|
||||
: "No active MobilityOps adapter is configured in this proof of concept."}
|
||||
: "Not yet connected — prepared for future controlled tool calls from the ITWorx MCP Hub."}
|
||||
</p>
|
||||
</div>
|
||||
<StatusBadge status={integrationStatus?.mcp_hub.state ?? "not_configured"} />
|
||||
{(() => {
|
||||
const meta = integrationStatus ? MCP_STATE_META[integrationStatus.mcp_hub.state] : null;
|
||||
return <StatusBadge status={meta?.statusClass ?? "not_configured"} label={meta?.label} />;
|
||||
})()}
|
||||
</article>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -84,7 +84,14 @@ export function BookingDetail() {
|
||||
)}
|
||||
|
||||
{returnResult && <ReturnResultPanel result={returnResult} />}
|
||||
{!returnResult && booking.status === "active" && (
|
||||
{/* Wait for the scenario's canonical odometer before mounting the form at all when
|
||||
this is the known demo scenario, so ReturnForm's suggestedOdometerKm is correct
|
||||
from its very first render -- never updated asynchronously after mount, which
|
||||
previously raced with anyone already typing into the field. */}
|
||||
{!returnResult && booking.status === "active" && isReturnAnomalyScenario && canonicalOdometerKm === null && (
|
||||
<LoadingState label="Scenario voorbereiden…" />
|
||||
)}
|
||||
{!returnResult && booking.status === "active" && (!isReturnAnomalyScenario || canonicalOdometerKm !== null) && (
|
||||
<ReturnForm
|
||||
bookingRef={booking.public_ref}
|
||||
onRegistered={handleRegistered}
|
||||
|
||||
@@ -8,6 +8,7 @@ import { useDemoManifest } from "../context/DemoManifestContext";
|
||||
import { SeverityBadge, StatusBadge } from "../components/Badge";
|
||||
import { Icon } from "../components/Icons";
|
||||
import { ErrorState, IntegrationMark, LoadingState, PageHeader, SectionHeading } from "../components/PageChrome";
|
||||
import { N8N_STATE_META, MCP_STATE_META } from "../data/integrationLabels";
|
||||
|
||||
const FLEET_METRICS: Array<{ key: keyof DashboardData["metrics"]; label: string; tone: string }> = [
|
||||
{ key: "available", label: "Available", tone: "ready" },
|
||||
@@ -178,24 +179,37 @@ export function Dashboard() {
|
||||
: "No workflow evidence recorded"}
|
||||
</span>
|
||||
</div>
|
||||
{(() => {
|
||||
const meta = integrationStatus ? N8N_STATE_META[integrationStatus.n8n.state] : null;
|
||||
return (
|
||||
<StatusBadge
|
||||
status={meta?.statusClass ?? n8nState.toLowerCase().replace(/ /g, "_")}
|
||||
label={meta?.label}
|
||||
/>
|
||||
);
|
||||
})()}
|
||||
</li>
|
||||
<li>
|
||||
<IntegrationMark kind="rag" />
|
||||
<div>
|
||||
<strong>Knowledge assistant</strong>
|
||||
<span>{knowledge ? `${knowledge.provider === "ragcore" ? "RAGcore" : "Demo knowledge base"} · ${knowledge.document_count} procedures indexed` : "Health check unavailable"}</span>
|
||||
</div>
|
||||
<StatusBadge
|
||||
status={
|
||||
integrationStatus
|
||||
? integrationStatus.n8n.state === "operational"
|
||||
? "available"
|
||||
: integrationStatus.n8n.state
|
||||
: n8nState.toLowerCase().replace(/ /g, "_")
|
||||
}
|
||||
status={knowledge?.available ? "available" : "unavailable"}
|
||||
label={knowledge?.available ? (knowledge.provider === "ragcore" ? "Operational" : "Demo mode") : "Unavailable"}
|
||||
/>
|
||||
</li>
|
||||
<li><IntegrationMark kind="rag" /><div><strong>RAGcore knowledge</strong><span>{knowledge ? `${knowledge.document_count} procedures indexed` : "Health check unavailable"}</span></div><StatusBadge status={knowledge?.available ? "available" : "unavailable"} /></li>
|
||||
<li>
|
||||
<IntegrationMark kind="mcp" />
|
||||
<div>
|
||||
<strong>MCP Hub</strong>
|
||||
<span>{integrationStatus?.mcp_hub.registration_enabled ? "Registration enabled" : "No active adapter in this PoC"}</span>
|
||||
<span>{integrationStatus?.mcp_hub.registration_enabled ? "Registration enabled" : "Not yet connected"}</span>
|
||||
</div>
|
||||
<StatusBadge status={integrationStatus?.mcp_hub.state ?? "not_configured"} />
|
||||
{(() => {
|
||||
const meta = integrationStatus ? MCP_STATE_META[integrationStatus.mcp_hub.state] : null;
|
||||
return <StatusBadge status={meta?.statusClass ?? "not_configured"} label={meta?.label} />;
|
||||
})()}
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
@@ -231,6 +231,9 @@ details summary { cursor: pointer; color: var(--teal-dark); }.data-table details
|
||||
.about-card h2 { margin: 0 0 8px; color: var(--ink); font-size: 1rem; letter-spacing: -.015em; }
|
||||
.about-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.62; }
|
||||
.about-card p code { padding: 1px 5px; background: var(--surface-subtle); border-radius: 4px; font-size: .78rem; }
|
||||
.about-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--teal-pale); border-color: #bfe6df; }
|
||||
.about-cta strong { display: block; color: var(--ink); font-size: .85rem; }
|
||||
.about-cta p { margin: 2px 0 0; }
|
||||
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
|
||||
.detail-grid div { min-height: 76px; padding: 13px 14px; background: white; }
|
||||
.detail-grid dt { margin: 0; color: var(--muted); font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .065em; }.detail-grid dd { margin: 7px 0 0; color: var(--ink); font-size: .82rem; font-weight: 700; }
|
||||
@@ -249,6 +252,8 @@ details summary { cursor: pointer; color: var(--teal-dark); }.data-table details
|
||||
.commit-list { list-style: none; display: grid; gap: 7px; margin: 16px 0 0; padding: 0; color: var(--muted); font-size: .7rem; }.commit-list li { display: flex; gap: 7px; }.commit-list svg { width: 14px; color: var(--teal-dark); }
|
||||
.success-panel { padding: 22px; }.result-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }.result-heading > span { width: 40px; height: 40px; display: grid; place-items: center; color: white; background: var(--success); border-radius: 50%; }.result-heading svg { width: 20px; }.result-heading h2 { margin: 0; font-size: 1.2rem; }
|
||||
.result-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
|
||||
.link-button { padding: 0; color: var(--teal-dark); background: transparent; border: 0; font-size: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
|
||||
.link-button:hover { color: var(--teal); }
|
||||
.rule-explainer { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; padding: 16px 18px; background: var(--info-pale); border: 1px solid #cfe3ee; border-radius: var(--radius); }
|
||||
.rule-explainer strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
|
||||
.rule-explainer p { margin: 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.55; }
|
||||
|
||||
Reference in New Issue
Block a user