feat(web): i18n with react-i18next — Albanian default, English second
Add react-i18next with two key-parity-checked catalogs (sq default/fallback, en). Active language driven by the logged-in user's stored preference (applied after /me resolves); SQ/EN toggle in the header persists via PUT /api/auth/language. Translate the booth (screen, pay/exit modal, active sessions, snapshots, status), Login, ShiftControl, SiteSettings, PermitManager, TariffComposer. SetupWizard deferred (its content is server-provided; needs backend catalog i18n).
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { fetchEvents, fetchOccupancy, type LedgerEvent, type Occupancy } from "./api.js";
|
||||
import { qk } from "./lib/query.js";
|
||||
@@ -13,17 +14,18 @@ import { ActiveSessions } from "./ActiveSessions.js";
|
||||
// the authoritative numbers; the WS-fed live store overlays real-time updates so
|
||||
// the screen reacts the instant a car enters or exits. Dense, dark, glanceable.
|
||||
|
||||
/** Per-event-type display: label + accent colour for the ticker. */
|
||||
const EVENT_STYLE: Record<string, { label: string; color: string }> = {
|
||||
vehicle_entry: { label: "ENTRY", color: "text-term-green" },
|
||||
vehicle_exit: { label: "EXIT", color: "text-term-red" },
|
||||
payment: { label: "PAY", color: "text-term-cyan" },
|
||||
void: { label: "VOID", color: "text-term-amber" },
|
||||
barrier_open_command: { label: "OPEN→", color: "text-term-muted" },
|
||||
barrier_open_observed: { label: "OPEN✓", color: "text-term-muted" },
|
||||
shift_open: { label: "SHIFT+", color: "text-term-amber" },
|
||||
shift_z_report: { label: "SHIFT Z", color: "text-term-amber" },
|
||||
anomaly: { label: "ANOMALY", color: "text-term-red" },
|
||||
/** Per-event-type display: i18n label key + accent colour for the ticker. */
|
||||
const EVENT_STYLE: Record<string, { labelKey: string; color: string }> = {
|
||||
vehicle_entry: { labelKey: "booth.evtEntry", color: "text-term-green" },
|
||||
vehicle_exit: { labelKey: "booth.evtExit", color: "text-term-red" },
|
||||
payment: { labelKey: "booth.evtPay", color: "text-term-cyan" },
|
||||
void: { labelKey: "booth.evtVoid", color: "text-term-amber" },
|
||||
barrier_open_command: { labelKey: "booth.evtOpenCmd", color: "text-term-muted" },
|
||||
barrier_open_observed: { labelKey: "booth.evtOpenObserved", color: "text-term-muted" },
|
||||
shift_open: { labelKey: "booth.evtShiftOpen", color: "text-term-amber" },
|
||||
shift_z_report: { labelKey: "booth.evtShiftZ", color: "text-term-amber" },
|
||||
cash_movement: { labelKey: "booth.evtCashMovement", color: "text-term-cyan" },
|
||||
anomaly: { labelKey: "booth.evtAnomaly", color: "text-term-red" },
|
||||
};
|
||||
|
||||
function hhmmss(iso: string): string {
|
||||
@@ -33,6 +35,7 @@ function hhmmss(iso: string): string {
|
||||
}
|
||||
|
||||
function OccupancyGauge({ occ }: { occ: Occupancy }) {
|
||||
const { t } = useTranslation();
|
||||
const pct = occ.capacity ? Math.min(100, Math.round((occ.count / occ.capacity) * 100)) : null;
|
||||
const barColor = occ.full ? "bg-term-red" : pct != null && pct >= 85 ? "bg-term-amber" : "bg-term-green";
|
||||
return (
|
||||
@@ -40,13 +43,13 @@ function OccupancyGauge({ occ }: { occ: Occupancy }) {
|
||||
<div className="flex items-end gap-4">
|
||||
<div className="text-6xl font-bold leading-none tabular-nums text-term-text">{occ.count}</div>
|
||||
<div className="pb-1 text-term-muted">
|
||||
<div className="text-[11px] uppercase tracking-wider">inside</div>
|
||||
<div className="text-[11px] uppercase tracking-wider">{t("booth.inside")}</div>
|
||||
<div className="text-sm tabular-nums">
|
||||
{occ.capacity == null ? "uncapped" : `of ${occ.capacity}`}
|
||||
{occ.capacity == null ? t("booth.uncapped") : `${t("booth.of")} ${occ.capacity}`}
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-auto text-right">
|
||||
<div className="text-[11px] uppercase tracking-wider text-term-muted">free</div>
|
||||
<div className="text-[11px] uppercase tracking-wider text-term-muted">{t("booth.free")}</div>
|
||||
<div className={`text-3xl font-bold tabular-nums ${occ.full ? "text-term-red" : "text-term-green"}`}>
|
||||
{occ.free == null ? "∞" : occ.free}
|
||||
</div>
|
||||
@@ -59,7 +62,7 @@ function OccupancyGauge({ occ }: { occ: Occupancy }) {
|
||||
)}
|
||||
{occ.full && (
|
||||
<div className="rounded-term border border-term-red px-2 py-1 text-center text-[11px] font-bold uppercase tracking-widest text-term-red">
|
||||
● lot full
|
||||
{t("booth.lotFull")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -67,11 +70,13 @@ function OccupancyGauge({ occ }: { occ: Occupancy }) {
|
||||
}
|
||||
|
||||
function EventRow({ e }: { e: LedgerEvent }) {
|
||||
const style = EVENT_STYLE[e.type] ?? { label: e.type.toUpperCase(), color: "text-term-text" };
|
||||
const { t } = useTranslation();
|
||||
const style = EVENT_STYLE[e.type];
|
||||
const label = style ? t(style.labelKey) : e.type.toUpperCase();
|
||||
return (
|
||||
<div className="flex items-center gap-3 border-b border-term-border/50 py-1 text-[12px] tabular-nums">
|
||||
<span className="text-term-muted">{hhmmss(e.occurredAt)}</span>
|
||||
<span className={`w-20 shrink-0 font-semibold ${style.color}`}>{style.label}</span>
|
||||
<span className={`w-20 shrink-0 font-semibold ${style?.color ?? "text-term-text"}`}>{label}</span>
|
||||
<span className="truncate text-term-text">{e.identity ?? "—"}</span>
|
||||
<span className="ml-auto text-term-muted">#{e.index}</span>
|
||||
</div>
|
||||
@@ -82,6 +87,7 @@ function EventRow({ e }: { e: LedgerEvent }) {
|
||||
* operator types it. Either way, submit opens the pay/exit modal for that id. The
|
||||
* input auto-focuses and re-focuses after a scan so the scanner always lands here. */
|
||||
function TicketInput({ onSubmit }: { onSubmit: (identity: string) => void }) {
|
||||
const { t } = useTranslation();
|
||||
const [value, setValue] = useState("");
|
||||
const ref = useRef<HTMLInputElement>(null);
|
||||
return (
|
||||
@@ -102,7 +108,7 @@ function TicketInput({ onSubmit }: { onSubmit: (identity: string) => void }) {
|
||||
autoFocus
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
placeholder="Scan or type ticket number…"
|
||||
placeholder={t("booth.scanPlaceholder")}
|
||||
inputMode="numeric"
|
||||
className="flex-1 rounded-term border border-term-border bg-term-bg px-3 py-2 text-lg tabular-nums text-term-text placeholder:text-term-muted focus:border-term-amber"
|
||||
/>
|
||||
@@ -110,13 +116,14 @@ function TicketInput({ onSubmit }: { onSubmit: (identity: string) => void }) {
|
||||
type="submit"
|
||||
className="rounded-term border border-term-amber bg-term-amber/10 px-4 py-2 text-[12px] font-semibold uppercase tracking-wider text-term-amber"
|
||||
>
|
||||
Open
|
||||
{t("booth.open")}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export function BoothScreen() {
|
||||
const { t } = useTranslation();
|
||||
// Initial load via Query (also the fallback if the WS is briefly down).
|
||||
const occQuery = useQuery({ queryKey: qk.occupancy, queryFn: fetchOccupancy });
|
||||
const eventsQuery = useQuery({ queryKey: qk.events, queryFn: () => fetchEvents(100) });
|
||||
@@ -140,18 +147,18 @@ export function BoothScreen() {
|
||||
<div className="grid h-full grid-cols-1 gap-3 lg:grid-cols-[minmax(320px,1fr)_2fr] lg:grid-rows-[auto_1fr]">
|
||||
{/* Ticket input spans both columns at the top — the operator's primary action. */}
|
||||
<div className="lg:col-span-2">
|
||||
<Panel title="Process ticket">
|
||||
<Panel title={t("booth.processTicket")}>
|
||||
<TicketInput onSubmit={setActiveTicket} />
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
{/* Left column: occupancy gauge above the active-sessions list. */}
|
||||
<div className="flex min-h-0 flex-col gap-3">
|
||||
<Panel title="Occupancy" right={<StatusDot />}>
|
||||
<Panel title={t("booth.occupancy")} right={<StatusDot />}>
|
||||
{occ ? (
|
||||
<OccupancyGauge occ={occ} />
|
||||
) : (
|
||||
<div className="text-term-muted">{occQuery.isError ? "occupancy unavailable" : "loading…"}</div>
|
||||
<div className="text-term-muted">{occQuery.isError ? t("booth.occUnavailable") : t("common.loading")}</div>
|
||||
)}
|
||||
</Panel>
|
||||
<div className="min-h-0 flex-1">
|
||||
@@ -160,15 +167,17 @@ export function BoothScreen() {
|
||||
</div>
|
||||
|
||||
<Panel
|
||||
title="Live feed"
|
||||
right={<span className="text-[10px] uppercase tracking-wider text-term-muted">{events.length} events</span>}
|
||||
title={t("booth.liveFeed")}
|
||||
right={
|
||||
<span className="text-[10px] uppercase tracking-wider text-term-muted">
|
||||
{events.length} {t("booth.events")}
|
||||
</span>
|
||||
}
|
||||
className="min-h-0"
|
||||
>
|
||||
<div className="h-full overflow-y-auto pr-1">
|
||||
{events.length === 0 ? (
|
||||
<div className="text-term-muted">
|
||||
{eventsQuery.isLoading ? "loading…" : "no events yet — entries and exits will stream here."}
|
||||
</div>
|
||||
<div className="text-term-muted">{eventsQuery.isLoading ? t("common.loading") : t("booth.noEventsYet")}</div>
|
||||
) : (
|
||||
events.map((e) => <EventRow key={e.id} e={e} />)
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user