feat(shift): current shift in the list + modal actions; full-width layout everywhere
Shift screen: - The standalone ShiftControl block is gone from /shift. The open/CURRENT shift now appears at the TOP of the shift list (CURRENT badge, live figures synthesized from the X-report), unified with history. Selecting it shows its live activity log. - Shift ACTIONS moved into the current shift's detail pane, each opening a MODAL: End shift (confirm → signed Z-report result), drawer voucher (Mandat in/out), takings-so-far (X-report). When no shift is open, a Start-shift button shows. - The current shift's log auto-refreshes (5s); a closed shift is bounded by its window. /setup/shifts stays read-only history (no manage props). Deleted the now- orphaned ShiftControl.tsx. Layout: - Every screen is now full-width like /booth — stripped the per-screen `mx-auto max-w-*` caps (Logs, Subscriptions, Plans, Tariff, Users, Roles, Setup layout, Shifts). The shell <main> already provides padding. Build+lint 12/12 (i18n parity). Verified a live open shift surfaces as the CURRENT list entry. Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V
This commit is contained in:
+315
-91
@@ -1,15 +1,28 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { fetchEvents, fetchShifts, type ShiftSummary, type SessionUser } from "./api.js";
|
||||
import {
|
||||
closeShift,
|
||||
fetchEvents,
|
||||
fetchShift,
|
||||
fetchShiftReport,
|
||||
fetchShifts,
|
||||
openShift,
|
||||
recordCashVoucher,
|
||||
type ShiftReport,
|
||||
type ShiftSummary,
|
||||
type SessionUser,
|
||||
} from "./api.js";
|
||||
import { formatMoney, formatDuration, formatRelativeDateTime } from "./lib/format.js";
|
||||
import { Modal } from "./ui/Modal.js";
|
||||
import type { LedgerEvent } from "@parking/shared";
|
||||
|
||||
// Shift history — a two-pane master/detail. LEFT: the operator's (or all, for an admin)
|
||||
// completed shifts, filterable by a timeframe preset (yesterday / last week / last month /
|
||||
// custom) and, for an admin, by operator. RIGHT: the SELECTED shift's signed activity log
|
||||
// (every ledger event in its [start, end] window). Scope is enforced SERVER-SIDE: an
|
||||
// operator sees only their own shifts; an admin (shift:cash) sees all. See shift.md.
|
||||
// Shift hub — a two-pane master/detail. LEFT: the open/CURRENT shift (when any) plus
|
||||
// completed shifts, filterable by a timeframe preset and (admin) by operator. RIGHT: the
|
||||
// selected shift's signed activity log (every ledger event in its window). The current
|
||||
// shift's pane carries the shift ACTIONS (End shift / drawer voucher / takings-so-far),
|
||||
// each opening a modal. Scope is enforced SERVER-SIDE: an operator sees only their own;
|
||||
// an admin (shift:cash) sees all. See wiki/concepts/shift.md.
|
||||
|
||||
function money(minor: number, currency: string | null): string {
|
||||
return currency ? formatMoney(minor, currency) : (minor / 100).toFixed(2);
|
||||
@@ -48,15 +61,54 @@ function presetRange(p: Preset): { from: string; to: string } | null {
|
||||
return { from: iso(from), to: iso(now) };
|
||||
}
|
||||
|
||||
export function ShiftsHistory({ user }: { user: SessionUser | null }) {
|
||||
/** The CURRENT (open) shift, synthesized from the X-report so it lists alongside closed
|
||||
* shifts. `id` is a sentinel; `open` marks it for the badge + the action pane. null when
|
||||
* no shift is open (or not visible to the requester). */
|
||||
function useCurrentShift(): { current: (ShiftSummary & { open: true }) | null; isMine: boolean; refetch: () => void } {
|
||||
const status = useQuery({ queryKey: ["shift", "current"], queryFn: fetchShift });
|
||||
const report = useQuery({
|
||||
queryKey: ["shift", "xreport"],
|
||||
queryFn: fetchShiftReport,
|
||||
enabled: status.data?.open != null,
|
||||
});
|
||||
const refetch = () => {
|
||||
void status.refetch();
|
||||
void report.refetch();
|
||||
};
|
||||
if (!status.data?.open || !report.data) return { current: null, isMine: status.data?.isMine ?? false, refetch };
|
||||
const x = report.data;
|
||||
return {
|
||||
isMine: status.data.isMine,
|
||||
refetch,
|
||||
current: {
|
||||
id: "__current__",
|
||||
index: Number.MAX_SAFE_INTEGER,
|
||||
operator: x.operator,
|
||||
startedAt: x.startedAt,
|
||||
endedAt: x.asOf,
|
||||
cashTotalMinor: x.cashTotalMinor,
|
||||
cardTotalMinor: x.cardTotalMinor,
|
||||
currency: x.currency,
|
||||
paymentCount: x.paymentCount,
|
||||
openingFloatMinor: x.openingFloatMinor,
|
||||
cashAddedMinor: x.cashAddedMinor,
|
||||
cashRemovedMinor: x.cashRemovedMinor,
|
||||
expectedDrawerMinor: x.expectedDrawerMinor,
|
||||
open: true,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function ShiftsHistory({ user, canManage = false, canVoucher = false }: { user: SessionUser | null; canManage?: boolean; canVoucher?: boolean }) {
|
||||
const { t } = useTranslation();
|
||||
const [preset, setPreset] = useState<Preset>("week");
|
||||
const [operator, setOperator] = useState("");
|
||||
const [customFrom, setCustomFrom] = useState("");
|
||||
const [customTo, setCustomTo] = useState("");
|
||||
const [selected, setSelected] = useState<ShiftSummary | null>(null);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
|
||||
const { current, isMine, refetch: refetchCurrent } = useCurrentShift();
|
||||
|
||||
// Resolve the active date window from the preset (or the custom inputs).
|
||||
const range = preset === "custom" ? { from: customFrom, to: customTo } : presetRange(preset);
|
||||
const applied = {
|
||||
operator: operator.trim() || undefined,
|
||||
@@ -64,32 +116,38 @@ export function ShiftsHistory({ user }: { user: SessionUser | null }) {
|
||||
to: range?.to ? new Date(`${range.to}T23:59:59`).toISOString() : undefined,
|
||||
};
|
||||
|
||||
const q = useQuery({
|
||||
queryKey: ["shifts", applied],
|
||||
queryFn: () => fetchShifts(applied),
|
||||
});
|
||||
|
||||
const q = useQuery({ queryKey: ["shifts", applied], queryFn: () => fetchShifts(applied) });
|
||||
const isAdmin = q.data?.scope === "all";
|
||||
const shifts = q.data?.shifts ?? [];
|
||||
const closed = q.data?.shifts ?? [];
|
||||
|
||||
// Keep a selection valid as the list changes; default to the newest shift.
|
||||
// The current/open shift sits at the TOP of the list (when present + visible to me).
|
||||
const list: (ShiftSummary & { open?: boolean })[] = current && (isMine || isAdmin) ? [current, ...closed] : closed;
|
||||
const selected = list.find((s) => s.id === selectedId) ?? list[0] ?? null;
|
||||
|
||||
// Default the selection to the current shift (if any), else the newest closed one.
|
||||
useEffect(() => {
|
||||
if (shifts.length === 0) {
|
||||
setSelected(null);
|
||||
} else if (!selected || !shifts.some((s) => s.id === selected.id)) {
|
||||
setSelected(shifts[0]!);
|
||||
}
|
||||
if (list.length === 0) setSelectedId(null);
|
||||
else if (!list.some((s) => s.id === selectedId)) setSelectedId(list[0]!.id);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [q.data]);
|
||||
}, [q.data, current?.id]);
|
||||
|
||||
function refreshAll() {
|
||||
void q.refetch();
|
||||
refetchCurrent();
|
||||
}
|
||||
|
||||
const PRESETS: Preset[] = ["yesterday", "week", "month", "all", "custom"];
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div>
|
||||
<div className="mb-3 flex flex-wrap items-center justify-between gap-2">
|
||||
<h1 className="text-sm font-bold uppercase tracking-widest text-term-amber">
|
||||
{isAdmin ? t("shifts.title") : t("shifts.myTitle")}
|
||||
</h1>
|
||||
{/* No shift open → the only action is to start one (gated on shift:create). */}
|
||||
{canManage && !current && (
|
||||
<StartShiftButton onDone={refreshAll} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filters: timeframe presets (everyone) + operator (admin only). */}
|
||||
@@ -98,12 +156,7 @@ export function ShiftsHistory({ user }: { user: SessionUser | null }) {
|
||||
<span className="label">{t("shifts.timeframe")}</span>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{PRESETS.map((p) => (
|
||||
<button
|
||||
key={p}
|
||||
type="button"
|
||||
className={`btn btn-sm ${preset === p ? "btn-primary" : ""}`}
|
||||
onClick={() => setPreset(p)}
|
||||
>
|
||||
<button key={p} type="button" className={`btn btn-sm ${preset === p ? "btn-primary" : ""}`} onClick={() => setPreset(p)}>
|
||||
{t(`shifts.preset_${p}`)}
|
||||
</button>
|
||||
))}
|
||||
@@ -124,44 +177,37 @@ export function ShiftsHistory({ user }: { user: SessionUser | null }) {
|
||||
{isAdmin && (
|
||||
<div className="field">
|
||||
<span className="label">{t("shifts.operator")}</span>
|
||||
<input
|
||||
className="input w-44"
|
||||
value={operator}
|
||||
onChange={(e) => setOperator(e.target.value)}
|
||||
placeholder={t("shifts.allOperators")}
|
||||
/>
|
||||
<input className="input w-44" value={operator} onChange={(e) => setOperator(e.target.value)} placeholder={t("shifts.allOperators")} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{q.isError && (
|
||||
<div className="mb-2 rounded-term border border-term-red px-3 py-2 text-[12px] text-term-red">
|
||||
{t("shifts.loadFailed")}
|
||||
</div>
|
||||
<div className="mb-2 rounded-term border border-term-red px-3 py-2 text-[12px] text-term-red">{t("shifts.loadFailed")}</div>
|
||||
)}
|
||||
|
||||
{/* Two-pane: shift list (left) + selected shift's activity log (right). */}
|
||||
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1.3fr)]">
|
||||
{/* LEFT — shift list */}
|
||||
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1.6fr)]">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{!q.isLoading && shifts.length === 0 && (
|
||||
{!q.isLoading && list.length === 0 && (
|
||||
<p className="rounded-term border border-term-border px-3 py-3 text-[12px] text-term-muted">{t("shifts.none")}</p>
|
||||
)}
|
||||
{shifts.map((s) => (
|
||||
<ShiftCard
|
||||
key={s.id}
|
||||
s={s}
|
||||
showOperator={isAdmin}
|
||||
selected={selected?.id === s.id}
|
||||
onClick={() => setSelected(s)}
|
||||
/>
|
||||
{list.map((s) => (
|
||||
<ShiftCard key={s.id} s={s} showOperator={isAdmin} open={!!s.open} selected={selected?.id === s.id} onClick={() => setSelectedId(s.id)} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* RIGHT — activity log for the selected shift */}
|
||||
<div className="rounded-term border border-term-border">
|
||||
{selected ? (
|
||||
<ShiftActivityLog shift={selected} showOperator={isAdmin} />
|
||||
<ShiftActivityLog
|
||||
shift={selected}
|
||||
isCurrent={!!selected.open}
|
||||
isMine={isMine}
|
||||
showOperator={isAdmin}
|
||||
canManage={canManage}
|
||||
canVoucher={canVoucher}
|
||||
onChanged={refreshAll}
|
||||
/>
|
||||
) : (
|
||||
<p className="px-3 py-6 text-center text-[12px] text-term-muted">{t("shifts.selectAShift")}</p>
|
||||
)}
|
||||
@@ -171,17 +217,33 @@ export function ShiftsHistory({ user }: { user: SessionUser | null }) {
|
||||
);
|
||||
}
|
||||
|
||||
function ShiftCard({
|
||||
s,
|
||||
showOperator,
|
||||
selected,
|
||||
onClick,
|
||||
}: {
|
||||
s: ShiftSummary;
|
||||
showOperator: boolean;
|
||||
selected: boolean;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
function StartShiftButton({ onDone }: { onDone: () => void }) {
|
||||
const { t } = useTranslation();
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
async function start() {
|
||||
setBusy(true);
|
||||
setErr(null);
|
||||
try {
|
||||
await openShift();
|
||||
onDone();
|
||||
} catch (e) {
|
||||
setErr((e as Error).message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<span className="flex items-center gap-2">
|
||||
{err && <span className="text-[12px] text-term-red">{err}</span>}
|
||||
<button type="button" className="btn btn-go btn-sm" onClick={start} disabled={busy}>
|
||||
{busy ? t("shift.starting") : t("shift.startShift")}
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function ShiftCard({ s, showOperator, open, selected, onClick }: { s: ShiftSummary; showOperator: boolean; open: boolean; selected: boolean; onClick: () => void }) {
|
||||
const { t } = useTranslation();
|
||||
const cur = s.currency;
|
||||
const when = (iso: string) => formatRelativeDateTime(iso, t);
|
||||
@@ -189,12 +251,11 @@ function ShiftCard({
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={`card w-full p-2.5 text-left text-[12px] transition-colors ${
|
||||
selected ? "border-term-amber bg-term-panel-2" : "hover:bg-term-panel-2"
|
||||
}`}
|
||||
className={`card w-full p-2.5 text-left text-[12px] transition-colors ${selected ? "border-term-amber bg-term-panel-2" : "hover:bg-term-panel-2"}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-semibold text-term-text">
|
||||
<span className="flex items-center gap-2 font-semibold text-term-text">
|
||||
{open && <span className="rounded border border-term-green px-1 text-[10px] text-term-green">{t("shifts.current")}</span>}
|
||||
{showOperator ? s.operator : when(s.startedAt)}
|
||||
</span>
|
||||
<span className="text-term-muted">{formatDuration(s.startedAt, s.endedAt)}</span>
|
||||
@@ -204,34 +265,59 @@ function ShiftCard({
|
||||
<span className="text-term-muted">{t("shifts.payments")} {s.paymentCount}</span>
|
||||
<span className="text-term-green">{money(s.cashTotalMinor, cur)}</span>
|
||||
<span className="text-term-cyan">{money(s.cardTotalMinor, cur)}</span>
|
||||
<span className="ml-auto font-semibold text-term-text" title={t("shifts.expectedDrawer")}>
|
||||
{money(s.expectedDrawerMinor, cur)}
|
||||
</span>
|
||||
<span className="ml-auto font-semibold text-term-text" title={t("shifts.expectedDrawer")}>{money(s.expectedDrawerMinor, cur)}</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function ShiftActivityLog({ shift, showOperator }: { shift: ShiftSummary; showOperator: boolean }) {
|
||||
function ShiftActivityLog({
|
||||
shift,
|
||||
isCurrent,
|
||||
isMine,
|
||||
showOperator,
|
||||
canManage,
|
||||
canVoucher,
|
||||
onChanged,
|
||||
}: {
|
||||
shift: ShiftSummary;
|
||||
isCurrent: boolean;
|
||||
isMine: boolean;
|
||||
showOperator: boolean;
|
||||
canManage: boolean;
|
||||
canVoucher: boolean;
|
||||
onChanged: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
// Every signed event in the shift's [start, end] window — the full audit trail.
|
||||
const [modal, setModal] = useState<null | "end" | "voucher" | "takings">(null);
|
||||
|
||||
// The current shift's log runs entry→now (no upper bound); a closed shift is bounded.
|
||||
const q = useQuery({
|
||||
queryKey: ["shift-events", shift.id],
|
||||
queryFn: () => fetchEvents(1000, shift.startedAt, shift.endedAt),
|
||||
queryKey: ["shift-events", shift.id, shift.endedAt],
|
||||
queryFn: () => fetchEvents(1000, shift.startedAt, isCurrent ? undefined : shift.endedAt),
|
||||
refetchInterval: isCurrent ? 5000 : false,
|
||||
});
|
||||
const events = q.data?.events ?? [];
|
||||
const cur = shift.currency;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Header — the shift's drawer reconciliation. */}
|
||||
<div className="border-b border-term-border bg-term-panel-2 px-3 py-2">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 text-[12px]">
|
||||
<span className="font-semibold text-term-text">
|
||||
<span className="flex items-center gap-2 font-semibold text-term-text">
|
||||
{isCurrent && <span className="rounded border border-term-green px-1 text-[10px] text-term-green">{t("shifts.current")}</span>}
|
||||
{showOperator && `${shift.operator} · `}
|
||||
{formatRelativeDateTime(shift.startedAt, t)} → {formatRelativeDateTime(shift.endedAt, t)}
|
||||
{formatRelativeDateTime(shift.startedAt, t)}
|
||||
{!isCurrent && ` → ${formatRelativeDateTime(shift.endedAt, t)}`}
|
||||
</span>
|
||||
<span className="text-term-muted">{formatDuration(shift.startedAt, shift.endedAt)}</span>
|
||||
{/* Actions live on the CURRENT shift's pane (when it's mine), each → a modal. */}
|
||||
{isCurrent && isMine && canManage && (
|
||||
<span className="flex flex-wrap gap-1.5">
|
||||
<button type="button" className="btn btn-sm" onClick={() => setModal("takings")}>{t("shift.viewTakings")}</button>
|
||||
{canVoucher && <button type="button" className="btn btn-sm" onClick={() => setModal("voucher")}>{t("shift.drawerVoucher")}</button>}
|
||||
<button type="button" className="btn btn-sm btn-danger" onClick={() => setModal("end")}>{t("shift.endShift")}</button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 grid grid-cols-2 gap-x-6 gap-y-0.5 text-[11px] tabular-nums sm:grid-cols-4">
|
||||
<Figure label={t("shifts.openingFloat")} value={money(shift.openingFloatMinor, cur)} />
|
||||
@@ -243,38 +329,176 @@ function ShiftActivityLog({ shift, showOperator }: { shift: ShiftSummary; showOp
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Activity log */}
|
||||
<div className="max-h-[60vh] overflow-y-auto">
|
||||
<div className="max-h-[62vh] overflow-y-auto">
|
||||
{q.isLoading && <p className="px-3 py-3 text-[12px] text-term-muted">{t("common.loading")}</p>}
|
||||
{!q.isLoading && events.length === 0 && (
|
||||
<p className="px-3 py-3 text-[12px] text-term-muted">{t("shifts.noActivity")}</p>
|
||||
)}
|
||||
{!q.isLoading && events.length === 0 && <p className="px-3 py-3 text-[12px] text-term-muted">{t("shifts.noActivity")}</p>}
|
||||
{events.map((e) => (
|
||||
<ActivityRow key={e.id} e={e} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{modal === "end" && <EndShiftModal shift={shift} onClose={() => setModal(null)} onDone={onChanged} />}
|
||||
{modal === "voucher" && <VoucherModal currency={cur} onClose={() => setModal(null)} onDone={onChanged} />}
|
||||
{modal === "takings" && <TakingsModal onClose={() => setModal(null)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Action modals ---------------------------------------------------------
|
||||
|
||||
function EndShiftModal({ shift, onClose, onDone }: { shift: ShiftSummary; onClose: () => void; onDone: () => void }) {
|
||||
const { t } = useTranslation();
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [report, setReport] = useState<ShiftReport | null>(null);
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
const cur = shift.currency;
|
||||
|
||||
async function confirm() {
|
||||
setBusy(true);
|
||||
setErr(null);
|
||||
try {
|
||||
setReport(await closeShift());
|
||||
onDone();
|
||||
} catch (e) {
|
||||
setErr((e as Error).message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open onClose={onClose} title={t("shift.endShift")} width="max-w-md">
|
||||
{report ? (
|
||||
// Result — the signed Z-report.
|
||||
<div className="text-[13px] tabular-nums">
|
||||
<div className="font-semibold text-term-text">{t("shift.zReport")} — {report.operator}</div>
|
||||
<div className="mt-1 grid grid-cols-2 gap-x-6 gap-y-0.5">
|
||||
<Figure label={t("shift.payments")} value={String(report.paymentCount)} />
|
||||
<Figure label={t("shift.cash")} value={money(report.cashTotalMinor, report.currency)} />
|
||||
<Figure label={t("shift.card")} value={money(report.cardTotalMinor, report.currency)} />
|
||||
<Figure label={t("shift.openingFloat")} value={money(report.openingFloatMinor, report.currency)} />
|
||||
<Figure label={t("shift.cashAdded")} value={money(report.cashAddedMinor, report.currency)} />
|
||||
<Figure label={t("shift.cashRemoved")} value={money(report.cashRemovedMinor, report.currency)} />
|
||||
<Figure label={t("shift.expectedDrawer")} value={money(report.expectedDrawerMinor, report.currency)} bold />
|
||||
</div>
|
||||
<div className={report.printed ? "mt-2 text-term-green" : "mt-2 text-term-amber"}>
|
||||
{report.printed ? t("shift.printedToReceipt") : t("shift.recordedNoPrinter")}
|
||||
</div>
|
||||
<div className="mt-3 flex justify-end">
|
||||
<button type="button" className="btn btn-sm" onClick={onClose}>{t("common.close")}</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// Confirm — show the live takings/drawer before closing.
|
||||
<div className="text-[13px] tabular-nums">
|
||||
<p className="text-term-muted">{t("shift.endConfirm")}</p>
|
||||
<div className="mt-2 grid grid-cols-2 gap-x-6 gap-y-0.5">
|
||||
<Figure label={t("shift.cash")} value={money(shift.cashTotalMinor, cur)} />
|
||||
<Figure label={t("shift.card")} value={money(shift.cardTotalMinor, cur)} />
|
||||
<Figure label={t("shift.expectedDrawer")} value={money(shift.expectedDrawerMinor, cur)} bold />
|
||||
</div>
|
||||
{err && <p className="mt-2 text-[12px] text-term-red">{err}</p>}
|
||||
<div className="mt-3 flex justify-end gap-2">
|
||||
<button type="button" className="btn btn-sm" onClick={onClose}>{t("subs.cancel")}</button>
|
||||
<button type="button" className="btn btn-sm btn-danger" onClick={confirm} disabled={busy}>
|
||||
{busy ? t("shift.ending") : t("shift.endShift")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function VoucherModal({ currency, onClose, onDone }: { currency: string | null; onClose: () => void; onDone: () => void }) {
|
||||
const { t } = useTranslation();
|
||||
const [amount, setAmount] = useState("");
|
||||
const [reason, setReason] = useState("");
|
||||
const [authName, setAuthName] = useState("");
|
||||
const [authPassword, setAuthPassword] = useState("");
|
||||
const [msg, setMsg] = useState<string | null>(null);
|
||||
|
||||
async function submit(type: "cash_in" | "cash_out") {
|
||||
setMsg(null);
|
||||
const major = Number(amount);
|
||||
if (!Number.isFinite(major) || major <= 0) return setMsg(t("shift.enterPositive"));
|
||||
if (!authName.trim() || !authPassword) return setMsg(t("shift.authRequired"));
|
||||
try {
|
||||
const r = await recordCashVoucher({ type, amountMinor: Math.round(major * 100), reason: reason.trim(), authorizedBy: authName.trim(), authorizerPassword: authPassword });
|
||||
setMsg(t("shift.voucherRecorded", { no: r.voucherNo, amount: money(r.balanceMinor, currency) }));
|
||||
setAmount("");
|
||||
setReason("");
|
||||
setAuthPassword("");
|
||||
onDone();
|
||||
} catch (e) {
|
||||
setMsg((e as Error).message);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open onClose={onClose} title={t("shift.drawerVoucher")} width="max-w-md">
|
||||
<div className="flex flex-col gap-2 text-[13px]">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<input className="input w-28" value={amount} onChange={(e) => setAmount(e.target.value)} placeholder={t("shift.amount")} inputMode="decimal" />
|
||||
<input className="input min-w-36 flex-1" value={reason} onChange={(e) => setReason(e.target.value)} placeholder={t("shift.reasonPlaceholder")} />
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<input className="input w-36" value={authName} onChange={(e) => setAuthName(e.target.value)} placeholder={t("shift.authName")} autoComplete="off" />
|
||||
<input className="input w-36" type="password" value={authPassword} onChange={(e) => setAuthPassword(e.target.value)} placeholder={t("shift.authPassword")} autoComplete="off" />
|
||||
</div>
|
||||
<div className="text-[11px] text-term-muted">{t("shift.voucherHint")}</div>
|
||||
{msg && <div className="text-[12px] text-term-muted">{msg}</div>}
|
||||
<div className="mt-1 flex justify-end gap-2">
|
||||
<button type="button" className="btn btn-sm" onClick={onClose}>{t("common.close")}</button>
|
||||
<button type="button" className="btn btn-go btn-sm" onClick={() => submit("cash_in")}>{t("shift.mandatArketimi")}</button>
|
||||
<button type="button" className="btn btn-danger btn-sm" onClick={() => submit("cash_out")}>{t("shift.mandatPagese")}</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function TakingsModal({ onClose }: { onClose: () => void }) {
|
||||
const { t } = useTranslation();
|
||||
const q = useQuery({ queryKey: ["shift", "xreport", "modal"], queryFn: fetchShiftReport });
|
||||
const x = q.data;
|
||||
return (
|
||||
<Modal open onClose={onClose} title={t("shift.xReport")} width="max-w-md">
|
||||
{!x ? (
|
||||
<p className="text-[12px] text-term-muted">{t("common.loading")}</p>
|
||||
) : (
|
||||
<div className="text-[13px] tabular-nums">
|
||||
<div className="text-term-muted">{t("shift.asOf")} {new Date(x.asOf).toLocaleString()}</div>
|
||||
<div className="mt-1 grid grid-cols-2 gap-x-6 gap-y-0.5">
|
||||
<Figure label={t("shift.payments")} value={String(x.paymentCount)} />
|
||||
<Figure label={t("shift.cash")} value={money(x.cashTotalMinor, x.currency)} />
|
||||
<Figure label={t("shift.card")} value={money(x.cardTotalMinor, x.currency)} />
|
||||
<Figure label={t("shift.openingFloat")} value={money(x.openingFloatMinor, x.currency)} />
|
||||
<Figure label={t("shift.cashAdded")} value={money(x.cashAddedMinor, x.currency)} />
|
||||
<Figure label={t("shift.cashRemoved")} value={money(x.cashRemovedMinor, x.currency)} />
|
||||
<Figure label={t("shift.expectedDrawer")} value={money(x.expectedDrawerMinor, x.currency)} bold />
|
||||
</div>
|
||||
<div className="mt-2 text-[11px] text-term-muted">{t("shift.xReportHint")}</div>
|
||||
<div className="mt-3 flex justify-end">
|
||||
<button type="button" className="btn btn-sm" onClick={onClose}>{t("common.close")}</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function ActivityRow({ e }: { e: LedgerEvent }) {
|
||||
const { t } = useTranslation();
|
||||
const style = EVENT_STYLE[e.type] ?? { labelKey: "", color: "text-term-text" };
|
||||
const time = new Date(e.occurredAt).toLocaleTimeString();
|
||||
const p = e.payload ?? {};
|
||||
const amount =
|
||||
typeof p.amountMinor === "number" && p.amountMinor !== 0
|
||||
? money(p.amountMinor, (p.currency as string) ?? null)
|
||||
: null;
|
||||
// A short actor/context: the subscriber holder, the identity, or the session ref.
|
||||
const amount = typeof p.amountMinor === "number" && p.amountMinor !== 0 ? money(p.amountMinor, (p.currency as string) ?? null) : null;
|
||||
const actor = (e.subscriberLabel as string | undefined) ?? e.identity ?? (p.sessionRef as string | undefined) ?? "";
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 border-t border-term-border/60 px-3 py-1.5 text-[12px] first:border-t-0">
|
||||
<span className="w-16 shrink-0 tabular-nums text-term-muted">{time}</span>
|
||||
<span className={`w-20 shrink-0 font-semibold uppercase ${style.color}`}>
|
||||
{style.labelKey ? t(style.labelKey) : e.type}
|
||||
</span>
|
||||
<span className={`w-20 shrink-0 font-semibold uppercase ${style.color}`}>{style.labelKey ? t(style.labelKey) : e.type}</span>
|
||||
<span className="min-w-0 flex-1 truncate text-term-text" title={actor}>{actor}</span>
|
||||
{amount && <span className="shrink-0 tabular-nums text-term-cyan">{amount}</span>}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user