297 lines
17 KiB
TypeScript
297 lines
17 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import { Link, useSearchParams } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import { api } from "../api/client";
|
|
import type { Dashboard as DashboardData, IntegrationStatus, KnowledgeHealth } from "../api/types";
|
|
import { useAuth } from "../context/AuthContext";
|
|
import { useDemoGuide } from "../context/DemoGuideContext";
|
|
import { useDemoManifest } from "../context/DemoManifestContext";
|
|
import { useLocaleFormat } from "../i18n/format";
|
|
import { useGreetingPeriod } from "../i18n/useGreetingPeriod";
|
|
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";
|
|
import { describeEvidenceSignal } from "../data/evidenceSignals";
|
|
import type { AttentionItem } from "../api/types";
|
|
|
|
const FLEET_METRIC_KEYS: Array<{ key: keyof DashboardData["metrics"]; labelKey: string; tone: string }> = [
|
|
{ key: "available", labelKey: "readiness.available", tone: "ready" },
|
|
{ key: "rented", labelKey: "readiness.rented", tone: "neutral" },
|
|
{ key: "cleaning", labelKey: "readiness.cleaning", tone: "neutral" },
|
|
{ key: "maintenance", labelKey: "readiness.maintenance", tone: "warning" },
|
|
{ key: "blocked", labelKey: "readiness.blocked", tone: "critical" },
|
|
];
|
|
|
|
function attentionItemTitle(
|
|
t: (key: string, options?: Record<string, unknown>) => string,
|
|
item: { rule_type: string; link_ref: string },
|
|
): string {
|
|
const ruleLabel = t(`quality:ruleTypes.${item.rule_type}`, { defaultValue: item.rule_type.replace(/_/g, " ") });
|
|
return `${ruleLabel} — ${item.link_ref}`;
|
|
}
|
|
|
|
// The backend never emits prose here either -- only stable signal codes + params, exactly
|
|
// like the data-quality issue detail page. Multiple signals on one item (e.g. the
|
|
// duplicate-customer match) are joined into one readable line for this compact row.
|
|
function attentionItemDetail(
|
|
t: (key: string, options?: Record<string, unknown>) => string,
|
|
formatNumber: (value: number) => string,
|
|
item: Pick<AttentionItem, "evidence_signals">,
|
|
): string {
|
|
return item.evidence_signals.map((signal) => describeEvidenceSignal(t, formatNumber, signal)).join(" · ");
|
|
}
|
|
|
|
export function Dashboard() {
|
|
const { t } = useTranslation(["dashboard", "common", "integrations", "quality"]);
|
|
const { formatTime, formatShortDate, formatNumber } = useLocaleFormat();
|
|
const greetingPeriod = useGreetingPeriod();
|
|
const { user, demoMode } = useAuth();
|
|
const { manifest } = useDemoManifest();
|
|
const { openGuide, restart, currentIndex, completed, totalSteps } = useDemoGuide();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const canSeeQuality = user?.role === "operations_manager";
|
|
const canSeeAutomation = user?.role === "operations_manager";
|
|
|
|
useEffect(() => {
|
|
if (searchParams.get("guide") === "start") {
|
|
restart();
|
|
openGuide();
|
|
setSearchParams({}, { replace: true });
|
|
}
|
|
// Only ever react to the initial `?guide=start` marker set by the login screen's
|
|
// "Start begeleide demo" CTA, so this intentionally runs once on mount.
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
const [data, setData] = useState<DashboardData | null>(null);
|
|
const [knowledge, setKnowledge] = useState<KnowledgeHealth | null>(null);
|
|
const [integrationStatus, setIntegrationStatus] = useState<IntegrationStatus | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [severity, setSeverity] = useState("all");
|
|
const [query, setQuery] = useState("");
|
|
|
|
useEffect(() => {
|
|
api.get<DashboardData>("/api/v1/dashboard").then(setData).catch(() => setError(t("common:status.error")));
|
|
api.get<KnowledgeHealth>("/api/v1/knowledge/status").then(setKnowledge).catch(() => setKnowledge(null));
|
|
}, [t]);
|
|
|
|
useEffect(() => {
|
|
if (!canSeeAutomation) return;
|
|
api
|
|
.get<IntegrationStatus>("/api/v1/integrations/status")
|
|
.then(setIntegrationStatus)
|
|
.catch(() => setIntegrationStatus(null));
|
|
}, [canSeeAutomation]);
|
|
|
|
const attention = useMemo(() => data?.attention_items.filter((item) => {
|
|
const matchesSeverity = severity === "all" || item.severity === severity;
|
|
const haystack = `${attentionItemTitle(t, item)} ${attentionItemDetail(t, formatNumber, item)} ${item.link_ref}`.toLowerCase();
|
|
return matchesSeverity && haystack.includes(query.toLowerCase());
|
|
}) ?? [], [data, query, severity, t, formatNumber]);
|
|
|
|
const isUnfiltered = severity === "all" && query === "";
|
|
const attentionTiers = useMemo(() => {
|
|
if (!isUnfiltered) return [{ key: "all", labelKey: "", items: attention.slice(0, 6) }];
|
|
// Keep the initial dashboard queue deliberately bounded. The full evidence-backed
|
|
// queue remains one click away in Data Quality; this view is for deciding what to
|
|
// do next, not for rendering the whole backlog.
|
|
const visible = ["high", "medium", "low"].flatMap((level) => attention.filter((item) => item.severity === level)).slice(0, 6);
|
|
const bySeverity = (level: string) => visible.filter((item) => item.severity === level);
|
|
return [
|
|
{ key: "high", labelKey: "attention.tierNow", items: bySeverity("high") },
|
|
{ key: "medium", labelKey: "attention.tierToday", items: bySeverity("medium") },
|
|
{ key: "low", labelKey: "attention.tierLater", items: bySeverity("low") },
|
|
].filter((tier) => tier.items.length > 0);
|
|
}, [attention, isUnfiltered]);
|
|
|
|
if (error) return <ErrorState message={error} />;
|
|
if (!data) return <LoadingState label={t("common:status.loading")} />;
|
|
|
|
const latestRun = data.recent_automation[0];
|
|
const readyCount = manifest?.scenarios.filter((s) => s.ready).length ?? 0;
|
|
const greetingTitle = `${t(`greeting.${greetingPeriod}`)}. ${t(`greetingBody.${greetingPeriod}`)}`;
|
|
|
|
return (
|
|
<div className="page dashboard-page">
|
|
<PageHeader eyebrow={t("eyebrow")} title={greetingTitle} description={t("description")} actions={<Link className="button button-secondary" to="/vehicles"><Icon name="fleet" /> {t("viewFleet")}</Link>} />
|
|
|
|
{demoMode && <section className="demo-start-panel" aria-label={t("demoStart.title")}>
|
|
<div>
|
|
<Icon name="spark" />
|
|
<div>
|
|
<strong>{t("demoStart.title")}</strong>
|
|
<span>
|
|
{manifest ? t("demoStart.readyCount", { ready: readyCount, total: manifest.scenarios.length }) : t("demoStart.readyCountFallback")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="demo-start-actions">
|
|
{user?.role === "operations_manager" && (
|
|
<button type="button" className="button button-secondary" onClick={openGuide}>
|
|
<Icon name="spark" /> {completed.size > 0 ? t("demoStart.resumeGuide", { current: currentIndex + 1, total: totalSteps }) : t("demoStart.startGuide")}
|
|
</button>
|
|
)}
|
|
<Link className="button button-primary" to="/scenarios">{t("demoStart.viewScenarios")} <Icon name="chevron" /></Link>
|
|
</div>
|
|
</section>}
|
|
|
|
<section className="readiness-band" aria-labelledby="readiness-heading">
|
|
<div className="readiness-label">
|
|
<span className="live-indicator" />
|
|
<div><h2 id="readiness-heading">{t("readiness.title")}</h2><p>{t("readiness.description")}</p></div>
|
|
</div>
|
|
<dl className="readiness-metrics">
|
|
{FLEET_METRIC_KEYS.map((metric) => (
|
|
<div key={metric.key} className={`metric-cell metric-${metric.tone}`}>
|
|
<dt>{t(metric.labelKey)}</dt><dd>{data.metrics[metric.key]}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
<Link className="inline-action" to="/vehicles">{t("readiness.openFleet")} <Icon name="chevron" /></Link>
|
|
</section>
|
|
|
|
<div className="operations-grid">
|
|
<section className="work-panel attention-panel" aria-labelledby="attention-heading">
|
|
<SectionHeading headingId="attention-heading" title={t("attention.title")} description={t("attention.description", { openIssues: data.metrics.open_quality_issues, workflowExceptions: data.metrics.pending_or_failed_workflows })} action={canSeeQuality ? <Link to="/data-quality">{t("attention.reviewQueue")} <Icon name="chevron" /></Link> : undefined} />
|
|
<div className="queue-controls">
|
|
<label className="compact-search"><Icon name="search" /><span className="visually-hidden">{t("attention.filterAriaLabel")}</span><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={t("attention.filterPlaceholder")} /></label>
|
|
<label><span className="visually-hidden">{t("attention.severityAriaLabel")}</span><select value={severity} onChange={(event) => setSeverity(event.target.value)}><option value="all">{t("attention.severityAll")}</option><option value="high">{t("attention.severityHigh")}</option><option value="medium">{t("attention.severityMedium")}</option><option value="low">{t("attention.severityLow")}</option></select></label>
|
|
</div>
|
|
{attention.length === 0 ? <p className="quiet-empty"><Icon name="check" /> {t("attention.empty")}</p> : (
|
|
<>
|
|
{attentionTiers.map((tier) => (
|
|
<div key={tier.key} className="attention-tier">
|
|
{attentionTiers.length > 1 && <p className="attention-tier-label">{t(tier.labelKey)}</p>}
|
|
<ul className="attention-list">
|
|
{tier.items.map((item, index) => {
|
|
const href = item.issue_ref && canSeeQuality
|
|
? `/data-quality/${item.issue_ref}`
|
|
: item.link_type === "vehicle"
|
|
? `/vehicles/${item.link_ref}`
|
|
: null;
|
|
const title = attentionItemTitle(t, item);
|
|
return (
|
|
<li key={`${item.link_ref}-${index}`} className={href ? "row-clickable" : ""}>
|
|
<SeverityBadge severity={item.severity} />
|
|
<div className="queue-copy">
|
|
<p className="attention-title">{title}</p>
|
|
<p className="attention-detail">{attentionItemDetail(t, formatNumber, item)}</p>
|
|
</div>
|
|
<span className="queue-ref">{item.link_ref}</span>
|
|
<Icon name="chevron" className="row-chevron" />
|
|
{href && (
|
|
<Link className="row-link" to={href} aria-label={t("attention.openRecord", { title })}>
|
|
<span className="visually-hidden">{title}</span>
|
|
</Link>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
{isUnfiltered && attention.length > 6 && canSeeQuality && (
|
|
<p className="queue-more">
|
|
<Link to="/data-quality">
|
|
<span className="queue-more-count" aria-hidden="true">{attention.length - 6}</span>
|
|
<span className="queue-more-copy">
|
|
<strong>{t("attention.remaining", { count: attention.length - 6 })}</strong>
|
|
<small>{t("attention.remainingHint")}</small>
|
|
</span>
|
|
<span className="queue-more-arrow"><Icon name="chevron" /></span>
|
|
</Link>
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</section>
|
|
|
|
<section className="work-panel timeline-panel" aria-labelledby="today-heading">
|
|
<SectionHeading headingId="today-heading" title={t("movements.title")} description={t("movements.description")} action={<Link to="/bookings">{t("movements.allBookings")} <Icon name="chevron" /></Link>} />
|
|
{data.today.length === 0 ? <p className="quiet-empty"><Icon name="clock" /> {t("movements.empty")}</p> : (
|
|
<ol className="movement-timeline">
|
|
{data.today.map((item) => (
|
|
<li key={`${item.kind}-${item.booking_ref}`} className="row-clickable">
|
|
<time dateTime={item.scheduled_at}>{formatTime(item.scheduled_at)}</time>
|
|
<span className={`timeline-node timeline-${item.kind}`}><Icon name={item.kind === "return" ? "arrow-left" : "chevron"} /></span>
|
|
<div><span className="movement-kind">{item.kind === "return" ? t("movements.return") : t("movements.departure")}</span><span className="movement-ref">{item.booking_ref}</span><small>{item.vehicle_ref}</small></div>
|
|
<Link className="row-link" to={`/bookings/${item.booking_ref}`} aria-label={t("movements.openBooking", { ref: item.booking_ref })}>
|
|
<span className="visually-hidden">{item.booking_ref}</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
)}
|
|
</section>
|
|
</div>
|
|
|
|
<div className="secondary-grid">
|
|
<section className="work-panel integration-panel" aria-labelledby="integration-heading">
|
|
<SectionHeading headingId="integration-heading" title={t("integrationPulse.title")} description={t("integrationPulse.description")} action={canSeeAutomation ? <Link to="/automation">{t("integrationPulse.systemDetail")} <Icon name="chevron" /></Link> : undefined} />
|
|
<ul className="integration-list">
|
|
<li>
|
|
<IntegrationMark kind="n8n" />
|
|
<div>
|
|
<strong>{t("integrationPulse.n8nTitle")}</strong>
|
|
<span>
|
|
{integrationStatus
|
|
? t("integrationPulse.n8nSummary", { succeeded: integrationStatus.n8n.succeeded, failed: integrationStatus.n8n.failed })
|
|
: latestRun
|
|
? t("integrationPulse.n8nLatest", { ref: latestRun.aggregate_ref })
|
|
: t("integrationPulse.n8nNoEvidence")}
|
|
</span>
|
|
</div>
|
|
{(() => {
|
|
const meta = integrationStatus ? N8N_STATE_META[integrationStatus.n8n.state] : null;
|
|
return (
|
|
<StatusBadge
|
|
status={meta?.statusClass ?? "no_events"}
|
|
label={meta ? t(`integrations:statusLabels.${meta.labelKey}`) : undefined}
|
|
/>
|
|
);
|
|
})()}
|
|
</li>
|
|
<li>
|
|
<IntegrationMark kind="rag" />
|
|
<div>
|
|
<strong>{t("integrationPulse.knowledgeTitle")}</strong>
|
|
<span>{knowledge ? (knowledge.document_count === null ? t("integrationPulse.knowledgeIndexUnknown", { count: knowledge.source_document_count }) : t("integrationPulse.knowledgeSummary", { count: knowledge.document_count })) : t("integrationPulse.knowledgeUnavailable")}</span>
|
|
</div>
|
|
<StatusBadge
|
|
status={knowledge?.available ? "available" : "unavailable"}
|
|
label={
|
|
knowledge?.available
|
|
? t(`integrations:statusLabels.${knowledge.provider === "ragcore" ? "operational" : "demoMode"}`)
|
|
: t("integrations:statusLabels.unavailable")
|
|
}
|
|
/>
|
|
</li>
|
|
<li>
|
|
<IntegrationMark kind="mcp" />
|
|
<div>
|
|
<strong>{t("integrationPulse.mcpTitle")}</strong>
|
|
<span>{integrationStatus?.mcp_hub.registration_enabled ? t("integrationPulse.mcpEnabled") : t("integrationPulse.mcpNotConnected")}</span>
|
|
</div>
|
|
{(() => {
|
|
const meta = integrationStatus ? MCP_STATE_META[integrationStatus.mcp_hub.state] : null;
|
|
return <StatusBadge status={meta?.statusClass ?? "not_configured"} label={meta ? t(`integrations:statusLabels.${meta.labelKey}`) : undefined} />;
|
|
})()}
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section className="work-panel recent-panel" aria-labelledby="recent-heading">
|
|
<SectionHeading headingId="recent-heading" title={t("recent.title")} description={t("recent.description")} />
|
|
{data.recent_automation.length === 0 ? <p className="quiet-empty">{t("recent.empty")}</p> : (
|
|
<ul className="recent-list">
|
|
{data.recent_automation.slice(0, 4).map((run) => (
|
|
<li key={run.event_id}><span className="activity-icon"><Icon name="activity" /></span><div><strong>{t(`integrations:ledger.eventTypes.${run.event_type}`, { defaultValue: run.event_type.replace(/_/g, " ") })}</strong><span>{run.aggregate_ref}</span></div><StatusBadge status={run.status} label={t(`integrations:ledger.status${run.status.charAt(0).toUpperCase()}${run.status.slice(1)}`, { defaultValue: run.status })} /><time dateTime={run.occurred_at}>{formatShortDate(run.occurred_at)}</time></li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|