feat(shift): confirm-before-close with X-report + split tickets vs subscriptions; fix dark <select>

Three changes: 1. Confirm-before-close. The header shift button closed the shift directly — a stray click would sign the irreversible Z-report. It now opens a confirm modal showing the live X-report (takings split by source + expected drawer) with Cancel / End-shift. Opening a shift stays immediate (no such risk). 2. Split takings by SOURCE. The report separates Tickets (transient) from Subscriptions (monthly sales + a subscriber's out-of-window charge), so the operator sees subscriber money apart from ticket money. Buckets are derived from the signed payment payload flags (subscriptionSale / subscriptionWindowCharge) and always reconcile to cash + card (a payment with neither flag is a ticket). Computed in #summariseWindow, carried on the signed shift_z_report payload, and shown in the X-report, the close modal, the shift history detail, and the printed Z-report. Reports predating the fields default subscription to 0 (ticket absorbs the whole take), so old shifts still reconcile. 3. Fix dark-theme native <select> popups rendering WHITE on WebKitGTK (the Tauri Linux WebView): set color-scheme dark/light on <html> per theme + explicit <option> colours, so the OS-drawn dropdown list follows the theme. Verified the split on a read-only DB copy: tickets 0, subscriptions 10,200 (10,000 sale + 200 out-of-window), reconciles to cash+card. build+lint 14/14, i18n parity (sq+en). Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V
2026-06-21 14:30:14 +02:00
parent 78d1f6808a
commit eb47016ae3
9 changed files with 260 additions and 13 deletions
@@ -8,10 +8,11 @@ import {
 } from "@tanstack/react-router";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import type { Lang, Permission, SessionUser, Theme } from "./api.js";
-import { can, closeShift, logout, openShift, setLanguagePref, setThemePref } from "./api.js";
+import { can, closeShift, fetchShiftReport, logout, openShift, setLanguagePref, setThemePref } from "./api.js";
 import { qk, queryClient } from "./lib/query.js";
+import { Modal } from "./ui/Modal.js";
 import { setLanguage } from "./lib/i18n/index.js";
 import { applyTheme } from "./lib/theme.js";
 import { useLiveFeed } from "./lib/use-live-feed.js";
@@ -199,6 +200,18 @@ function ShiftButton() {
  const { isOpen, isMine, blockedByOther, heldBy } = useShift();
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState<string | null>(null);
+  // Closing a shift signs the Z-report and is irreversible, so the header button never
+  // closes directly (a stray click would end the shift) — it opens a confirm modal that
+  // shows the live X-report first. Opening a shift has no such risk → immediate.
+  const [confirmingClose, setConfirmingClose] = useState(false);
+
+  function onClick() {
+    if (isMine) {
+      setConfirmingClose(true);
+    } else {
+      void act("open");
+    }
+  }

  async function act(kind: "open" | "close") {
    setBusy(true);
@@ -235,7 +248,7 @@ function ShiftButton() {
        type="button"
        disabled={busy || blockedByOther}
        title={blockedByOther ? t("shift.headerHeldBy", { operator: heldBy ?? "?" }) : undefined}
-        onClick={() => act(isMine ? "close" : "open")}
+        onClick={onClick}
        className={`rounded-term border px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wider ${tone}`}
      >
        {busy ? t("shift.opening") : label}
@@ -244,6 +257,82 @@ function ShiftButton() {
        <span className="text-[10px] uppercase tracking-wider text-term-amber">{t("shift.headerNoShift")}</span>
      )}
      {err && <span className="text-[10px] text-term-red">{err}</span>}
+      {confirmingClose && (
+        <CloseShiftConfirm
+          busy={busy}
+          onCancel={() => setConfirmingClose(false)}
+          onConfirm={async () => {
+            await act("close");
+            setConfirmingClose(false);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+/** Confirm-before-close modal for the header shift button. Fetches the live X-report so
+ *  the operator SEES their takings (split by source: tickets vs subscriptions) and the
+ *  expected drawer before committing the irreversible Z-report. */
+function CloseShiftConfirm({
+  busy,
+  onCancel,
+  onConfirm,
+}: {
+  busy: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}) {
+  const { t } = useTranslation();
+  const q = useQuery({ queryKey: ["shift", "xreport", "close-confirm"], queryFn: fetchShiftReport });
+  const x = q.data;
+  const cur = x?.currency ?? null;
+  const fmt = (m: number) => `${(m / 100).toLocaleString()} ${cur ?? ""}`.trim();
+
+  return (
+    <Modal open onClose={onCancel} title={t("shift.endShift")} width="max-w-md">
+      <div className="text-[13px] tabular-nums">
+        <p className="text-term-muted">{t("shift.endConfirm")}</p>
+        {!x ? (
+          <p className="mt-2 text-term-muted">{t("common.loading")}</p>
+        ) : (
+          <>
+            <div className="mt-2 grid grid-cols-2 gap-x-6 gap-y-0.5">
+              <ConfirmFigure label={t("shift.payments")} value={String(x.paymentCount)} />
+              <span />
+              {/* Split by source — the operator's ask: subscription money apart from tickets. */}
+              <ConfirmFigure label={t("shift.srcTickets")} value={fmt(x.ticketTotalMinor)} />
+              <ConfirmFigure label={t("shift.srcSubscriptions")} value={fmt(x.subscriptionTotalMinor)} />
+              <ConfirmFigure label={t("shift.srcSubSales")} value={fmt(x.subscriptionSalesMinor)} sub />
+              <ConfirmFigure label={t("shift.srcSubWindow")} value={fmt(x.subscriptionWindowMinor)} sub />
+            </div>
+            <div className="mt-2 grid grid-cols-2 gap-x-6 gap-y-0.5 border-t border-term-border pt-2">
+              <ConfirmFigure label={t("shift.cash")} value={fmt(x.cashTotalMinor)} />
+              <ConfirmFigure label={t("shift.card")} value={fmt(x.cardTotalMinor)} />
+              <ConfirmFigure label={t("shift.expectedDrawer")} value={fmt(x.expectedDrawerMinor)} bold />
+            </div>
+          </>
+        )}
+        <div className="mt-3 flex justify-end gap-2">
+          <button type="button" className="btn btn-sm" onClick={onCancel} disabled={busy}>
+            {t("subs.cancel")}
+          </button>
+          <button type="button" className="btn btn-sm btn-danger" onClick={onConfirm} disabled={busy || !x}>
+            {busy ? t("shift.ending") : t("shift.endShift")}
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+function ConfirmFigure({ label, value, bold, sub }: { label: string; value: string; bold?: boolean; sub?: boolean }) {
+  return (
+    <div className={`flex items-baseline justify-between gap-2 ${sub ? "pl-3" : ""}`}>
+      <span className={`text-[11px] uppercase tracking-wider ${sub ? "text-term-muted/70" : "text-term-muted"}`}>
+        {label}
+      </span>
+      <span className={bold ? "font-semibold text-term-text" : "text-term-text"}>{value}</span>
    </div>
  );
 }