parking_solution/apps/web/src/ShiftControl.tsx

import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { closeShift, fetchShift, openShift, recordCashMovement, type ShiftReport } from "./api.js";

// Manned-mode shift control. Start/End are explicit (not time-based — see
// wiki/concepts/shift.md). End Shift signs + prints a Z-report and shows the
// totals + the DRAWER picture (opening float carried from the prior shift, cash
// taken/added/removed, expected drawer). Admins can load/remove drawer cash.
// Available to cashier/operator/admin (readonly has no shift).

const money = (m: number, cur: string | null) => `${(m / 100).toFixed(2)} ${cur ?? ""}`.trim();

export function ShiftControl({ isAdmin = false }: { isAdmin?: boolean }) {
  const { t } = useTranslation();
  const [startedAt, setStartedAt] = useState<string | null>(null);
  const [drawerMinor, setDrawerMinor] = useState<number | null>(null);
  const [currency, setCurrency] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [report, setReport] = useState<ShiftReport | null>(null);
  const [err, setErr] = useState<string | null>(null);

  // Cash-movement form (admin only).
  const [moveAmount, setMoveAmount] = useState("");
  const [moveReason, setMoveReason] = useState("");
  const [moveMsg, setMoveMsg] = useState<string | null>(null);

  function refresh() {
    fetchShift()
      .then((s) => {
        setStartedAt(s.open?.startedAt ?? null);
        setDrawerMinor(s.drawerMinor);
        setCurrency(s.currency);
      })
      .catch(() => {
        /* readonly / not permitted — hide control */
      });
  }
  useEffect(refresh, []);

  async function start() {
    setBusy(true);
    setErr(null);
    setReport(null);
    try {
      const { startedAt } = await openShift();
      setStartedAt(startedAt);
      refresh();
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  async function end() {
    setBusy(true);
    setErr(null);
    try {
      const z = await closeShift();
      setReport(z);
      setStartedAt(null);
      refresh();
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setBusy(false);
    }
  }

  async function move(sign: 1 | -1) {
    setMoveMsg(null);
    const major = Number(moveAmount);
    if (!Number.isFinite(major) || major <= 0) {
      setMoveMsg(t("shift.enterPositive"));
      return;
    }
    try {
      const r = await recordCashMovement(sign * Math.round(major * 100), moveReason.trim());
      setMoveAmount("");
      setMoveReason("");
      setMoveMsg(t("shift.drawerNow", { amount: money(r.balanceMinor, currency) }));
      refresh();
    } catch (e) {
      setMoveMsg((e as Error).message);
    }
  }

  return (
    <section style={{ marginTop: "1.5rem", padding: "0.75rem 1rem", border: "1px solid #ddd", borderRadius: 6, maxWidth: 460 }}>
      <strong>{t("shift.label")}</strong>{" "}
      {startedAt ? (
        <>
          <span style={{ color: "#16a34a" }}>{t("shift.open")}</span> {t("shift.since")}{" "}
          {new Date(startedAt).toLocaleString()}{" "}
          <button type="button" onClick={end} disabled={busy}>
            {busy ? t("shift.ending") : t("shift.endShift")}
          </button>
        </>
      ) : (
        <>
          <span style={{ color: "#777" }}>{t("shift.notStarted")}</span>{" "}
          <button type="button" onClick={start} disabled={busy}>
            {busy ? t("shift.starting") : t("shift.startShift")}
          </button>
        </>
      )}
      {/* Live drawer balance (what's in the till right now / inherited). */}
      {drawerMinor != null && (
        <div style={{ marginTop: "0.5rem", color: "#555" }}>
          {t("shift.drawer")} <strong>{money(drawerMinor, currency)}</strong>
          {startedAt && <span style={{ color: "#888" }}> {t("shift.openingFloatInherited")}</span>}
        </div>
      )}

      {err && <p style={{ color: "crimson", margin: "0.5rem 0 0" }}>{err}</p>}

      {/* Admin: load / remove physical drawer cash (signed cash_movement). */}
      {isAdmin && (
        <div style={{ marginTop: "0.6rem", paddingTop: "0.5rem", borderTop: "1px solid #eee" }}>
          <div style={{ color: "#666", fontSize: "0.85rem", marginBottom: "0.35rem" }}>
            {t("shift.drawerCashAdmin")}
          </div>
          <div style={{ display: "flex", gap: "0.4rem", alignItems: "center", flexWrap: "wrap" }}>
            <input
              value={moveAmount}
              onChange={(e) => setMoveAmount(e.target.value)}
              placeholder={t("shift.amount")}
              inputMode="decimal"
              style={{ width: 90 }}
            />
            <input
              value={moveReason}
              onChange={(e) => setMoveReason(e.target.value)}
              placeholder={t("shift.reasonPlaceholder")}
              style={{ flex: 1, minWidth: 140 }}
            />
            <button type="button" onClick={() => move(1)}>{t("shift.load")}</button>
            <button type="button" onClick={() => move(-1)}>{t("shift.remove")}</button>
          </div>
          {moveMsg && <div style={{ marginTop: "0.35rem", color: "#555", fontSize: "0.85rem" }}>{moveMsg}</div>}
        </div>
      )}

      {report && (
        <div style={{ marginTop: "0.75rem", fontFamily: "ui-monospace, monospace", fontSize: "0.9em" }}>
          <div style={{ fontWeight: 600 }}>{t("shift.zReport")} — {report.operator}</div>
          <div>{t("shift.payments")} {report.paymentCount}</div>
          <div>{t("shift.cash")} {money(report.cashTotalMinor, report.currency)}</div>
          <div>{t("shift.card")} {money(report.cardTotalMinor, report.currency)}</div>
          <div style={{ marginTop: "0.4rem", color: "#666" }}>{t("shift.drawerSection")}</div>
          <div>{t("shift.openingFloat")} {money(report.openingFloatMinor, report.currency)}</div>
          <div>{t("shift.cashTaken")} {money(report.cashTotalMinor, report.currency)}</div>
          <div>{t("shift.cashAdded")} {money(report.cashAddedMinor, report.currency)}</div>
          <div>{t("shift.cashRemoved")} {money(report.cashRemovedMinor, report.currency)}</div>
          <div style={{ fontWeight: 600 }}>
            {t("shift.expectedDrawer")} {money(report.expectedDrawerMinor, report.currency)}
          </div>
          <div style={{ color: report.printed ? "#16a34a" : "#b45309", marginTop: "0.3rem" }}>
            {report.printed ? t("shift.printedToReceipt") : t("shift.recordedNoPrinter")}
          </div>
        </div>
      )}
    </section>
  );
}