feat: tabbed setup, user metadata, light theme, scoped shift history
Consolidate the config screens under a single /setup hub with permission- gated tabs (Devices/Tariff/Subscriptions/Site/Users/Roles/Shifts), collapsing the top nav to Booth·Shift·Setup; old top-level paths redirect. Users: add optional profile metadata (full name, phone, email, address) on create/edit. Theme: a light palette saved to the user's profile (users.theme), toggled in the header beside the language switch and applied on load like the language preference. Both ride on a single additive migration (0008). Shift history: a new GET /api/shifts folds the signed shift_z_report chain into completed shifts, SCOPED server-side — operators see only their own; holders of shift:cash see all with an operator + date-range filter. Surfaced as the Shifts tab; an operator cannot read another operator's takings (param spoofing is ignored). These three features share the router, api client and i18n catalogs, so they land together. Verified live: theme persists across reload, metadata round- trips to the DB, and shift scoping holds (operator self-only, admin all+filter). Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V
This commit is contained in:
+10
-3
@@ -5,6 +5,7 @@ import { fetchMe, type SessionUser } from "./api.js";
|
||||
import { Login } from "./Login.js";
|
||||
import { queryClient } from "./lib/query.js";
|
||||
import { setLanguage } from "./lib/i18n/index.js";
|
||||
import { applyTheme } from "./lib/theme.js";
|
||||
import { router } from "./router.js";
|
||||
|
||||
// App root: bootstraps the session (cookie-based, from /api/auth/me), then hands
|
||||
@@ -23,10 +24,16 @@ export function App() {
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
// Apply the signed-in user's preferred language whenever it resolves/changes
|
||||
// (login, bootstrap, or a toggle). Albanian is the default before auth resolves.
|
||||
// Apply the signed-in user's preferred language + theme whenever they resolve/
|
||||
// change (login, bootstrap, or a toggle). Albanian + dark are the defaults before
|
||||
// auth resolves; on logout, fall back to dark so the Login screen is consistent.
|
||||
useEffect(() => {
|
||||
if (user) setLanguage(user.language);
|
||||
if (user) {
|
||||
setLanguage(user.language);
|
||||
applyTheme(user.theme);
|
||||
} else {
|
||||
applyTheme("dark");
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
if (loading) {
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { fetchShifts, type ShiftSummary, type SessionUser } from "./api.js";
|
||||
import { formatMoney, formatDuration } from "./lib/format.js";
|
||||
|
||||
// Completed shift history. Scope is enforced SERVER-SIDE by permission: an operator
|
||||
// gets only their own shifts; an admin (shift:cash) gets all + a date/operator
|
||||
// filter. The screen mirrors that — it shows the filter only when the server
|
||||
// reports scope:"all". Each row is one signed shift_z_report; expanding it shows the
|
||||
// drawer reconciliation. See wiki/concepts/shift.md.
|
||||
|
||||
/** Local date + time (history spans days, so not just time-of-day). */
|
||||
function fmtDateTime(iso: string): string {
|
||||
const d = new Date(iso);
|
||||
if (Number.isNaN(d.getTime())) return "—";
|
||||
return d.toLocaleString(undefined, {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
function money(minor: number, currency: string | null): string {
|
||||
return currency ? formatMoney(minor, currency) : (minor / 100).toFixed(2);
|
||||
}
|
||||
|
||||
export function ShiftsHistory({ user }: { user: SessionUser | null }) {
|
||||
const { t } = useTranslation();
|
||||
// Admin filter inputs (only sent when the server grants the "all" scope; for an
|
||||
// operator the server ignores them anyway).
|
||||
const [operator, setOperator] = useState("");
|
||||
const [from, setFrom] = useState("");
|
||||
const [to, setTo] = useState("");
|
||||
// The applied filter (separate from the inputs, so typing doesn't refetch).
|
||||
const [applied, setApplied] = useState<{ operator?: string; from?: string; to?: string }>({});
|
||||
|
||||
const q = useQuery({
|
||||
queryKey: ["shifts", applied],
|
||||
queryFn: () => fetchShifts(applied),
|
||||
});
|
||||
|
||||
const isAdmin = q.data?.scope === "all";
|
||||
const shifts = q.data?.shifts ?? [];
|
||||
|
||||
function apply() {
|
||||
setApplied({
|
||||
operator: operator.trim() || undefined,
|
||||
// A date input gives yyyy-mm-dd; widen `to` to the end of that day.
|
||||
from: from ? new Date(`${from}T00:00:00`).toISOString() : undefined,
|
||||
to: to ? new Date(`${to}T23:59:59`).toISOString() : undefined,
|
||||
});
|
||||
}
|
||||
function clear() {
|
||||
setOperator("");
|
||||
setFrom("");
|
||||
setTo("");
|
||||
setApplied({});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h1 className="text-sm font-bold uppercase tracking-widest text-term-amber">
|
||||
{isAdmin ? t("shifts.title") : t("shifts.myTitle")}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Admin-only filter: by operator + a date window over the shift start. */}
|
||||
{isAdmin && (
|
||||
<div className="card mb-3 flex flex-wrap items-end gap-3 p-3">
|
||||
<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")}
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<span className="label">{t("shifts.filterFrom")}</span>
|
||||
<input type="date" className="input w-44" value={from} onChange={(e) => setFrom(e.target.value)} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<span className="label">{t("shifts.filterTo")}</span>
|
||||
<input type="date" className="input w-44" value={to} onChange={(e) => setTo(e.target.value)} />
|
||||
</div>
|
||||
<button type="button" className="btn btn-primary btn-sm" onClick={apply}>
|
||||
{t("shifts.apply")}
|
||||
</button>
|
||||
<button type="button" className="btn btn-sm" onClick={clear}>
|
||||
{t("shifts.clear")}
|
||||
</button>
|
||||
</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="overflow-hidden rounded-term border border-term-border">
|
||||
<table className="w-full text-[12px] tabular-nums">
|
||||
<thead className="bg-term-panel-2 text-[11px] uppercase tracking-wider text-term-muted">
|
||||
<tr>
|
||||
{isAdmin && <th className="px-3 py-1.5 text-left">{t("shifts.operator")}</th>}
|
||||
<th className="px-3 py-1.5 text-left">{t("shifts.started")}</th>
|
||||
<th className="px-3 py-1.5 text-left">{t("shifts.ended")}</th>
|
||||
<th className="px-3 py-1.5 text-right">{t("shifts.payments")}</th>
|
||||
<th className="px-3 py-1.5 text-right">{t("shifts.cash")}</th>
|
||||
<th className="px-3 py-1.5 text-right">{t("shifts.card")}</th>
|
||||
<th className="px-3 py-1.5 text-right">{t("shifts.expectedDrawer")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{shifts.map((s) => (
|
||||
<ShiftRow key={s.id} s={s} showOperator={isAdmin} colSpan={isAdmin ? 7 : 6} />
|
||||
))}
|
||||
{!q.isLoading && shifts.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={isAdmin ? 7 : 6} className="px-3 py-3 text-term-muted">
|
||||
{t("shifts.none")}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ShiftRow({ s, showOperator, colSpan }: { s: ShiftSummary; showOperator: boolean; colSpan: number }) {
|
||||
const { t } = useTranslation();
|
||||
const [open, setOpen] = useState(false);
|
||||
const cur = s.currency;
|
||||
|
||||
return (
|
||||
<>
|
||||
<tr
|
||||
className="cursor-pointer border-t border-term-border hover:bg-term-panel-2"
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
>
|
||||
{showOperator && <td className="px-3 py-1.5 text-term-text">{s.operator}</td>}
|
||||
<td className="px-3 py-1.5">{fmtDateTime(s.startedAt)}</td>
|
||||
<td className="px-3 py-1.5">
|
||||
{fmtDateTime(s.endedAt)}
|
||||
<span className="ml-2 text-term-muted">{formatDuration(s.startedAt, s.endedAt)}</span>
|
||||
</td>
|
||||
<td className="px-3 py-1.5 text-right">{s.paymentCount}</td>
|
||||
<td className="px-3 py-1.5 text-right text-term-green">{money(s.cashTotalMinor, cur)}</td>
|
||||
<td className="px-3 py-1.5 text-right text-term-cyan">{money(s.cardTotalMinor, cur)}</td>
|
||||
<td className="px-3 py-1.5 text-right font-semibold">{money(s.expectedDrawerMinor, cur)}</td>
|
||||
</tr>
|
||||
{open && (
|
||||
<tr className="border-t border-term-border/50 bg-term-bg">
|
||||
<td colSpan={colSpan} className="px-3 py-2">
|
||||
<div className="text-[11px] uppercase tracking-wider text-term-muted">{t("shifts.drawerSection")}</div>
|
||||
<div className="mt-1 grid grid-cols-2 gap-x-8 gap-y-0.5 sm:grid-cols-4">
|
||||
<Figure label={t("shifts.openingFloat")} value={money(s.openingFloatMinor, cur)} />
|
||||
<Figure label={t("shifts.cashTaken")} value={money(s.cashTotalMinor, cur)} />
|
||||
<Figure label={t("shifts.cashAdded")} value={money(s.cashAddedMinor, cur)} />
|
||||
<Figure label={t("shifts.cashRemoved")} value={money(s.cashRemovedMinor, cur)} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Figure({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex justify-between gap-2">
|
||||
<span className="text-term-muted">{label}</span>
|
||||
<span className="text-term-text">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+136
-48
@@ -14,6 +14,7 @@ import {
|
||||
type ManagedUser,
|
||||
type SessionUser,
|
||||
} from "./api.js";
|
||||
import { Modal } from "./ui/Modal.js";
|
||||
|
||||
// User management (admin). List users, create one (username + password + role),
|
||||
// change a user's role, reset a password, delete. The server enforces the same
|
||||
@@ -33,6 +34,7 @@ export function UsersManager({ user }: { user: SessionUser | null }) {
|
||||
const roles: ManagedRole[] = rolesQ.data?.roles ?? [];
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [adding, setAdding] = useState(false);
|
||||
const [editingUser, setEditingUser] = useState<ManagedUser | null>(null);
|
||||
|
||||
const invalidate = () => void qc.invalidateQueries({ queryKey: ["users"] });
|
||||
const onError = (e: unknown) =>
|
||||
@@ -43,11 +45,7 @@ export function UsersManager({ user }: { user: SessionUser | null }) {
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h1 className="text-sm font-bold uppercase tracking-widest text-term-amber">{t("users.title")}</h1>
|
||||
{canCreate && roles.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setAdding(true); setError(null); }}
|
||||
className="rounded-term border border-term-green bg-term-green/10 px-3 py-1 text-[12px] uppercase tracking-wider text-term-green"
|
||||
>
|
||||
<button type="button" className="btn btn-go btn-sm" onClick={() => { setAdding(true); setError(null); }}>
|
||||
{t("users.add")}
|
||||
</button>
|
||||
)}
|
||||
@@ -55,19 +53,51 @@ export function UsersManager({ user }: { user: SessionUser | null }) {
|
||||
|
||||
{error && <div className="mb-2 rounded-term border border-term-red px-3 py-2 text-[12px] text-term-red">{error}</div>}
|
||||
|
||||
{adding && (
|
||||
<Modal open={adding} onClose={() => setAdding(false)} title={t("users.new")} width="max-w-2xl">
|
||||
<UserForm
|
||||
roles={roles}
|
||||
onCancel={() => setAdding(false)}
|
||||
onSubmit={async (v) => {
|
||||
try {
|
||||
await createUser({ username: v.username, password: v.password, roleId: v.roleId });
|
||||
await createUser({
|
||||
username: v.username,
|
||||
password: v.password!,
|
||||
roleId: v.roleId,
|
||||
fullName: v.fullName,
|
||||
phone: v.phone,
|
||||
email: v.email,
|
||||
address: v.address,
|
||||
});
|
||||
setAdding(false);
|
||||
invalidate();
|
||||
} catch (e) { onError(e); }
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
<Modal open={editingUser != null} onClose={() => setEditingUser(null)} title={t("users.editTitle")} width="max-w-2xl">
|
||||
{editingUser && (
|
||||
<UserForm
|
||||
roles={roles}
|
||||
editing={editingUser}
|
||||
onCancel={() => setEditingUser(null)}
|
||||
onSubmit={async (v) => {
|
||||
try {
|
||||
await updateUser(editingUser.id, {
|
||||
username: v.username,
|
||||
roleId: v.roleId,
|
||||
fullName: v.fullName,
|
||||
phone: v.phone,
|
||||
email: v.email,
|
||||
address: v.address,
|
||||
});
|
||||
setEditingUser(null);
|
||||
invalidate();
|
||||
} catch (e) { onError(e); }
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
<div className="overflow-hidden rounded-term border border-term-border">
|
||||
<table className="w-full text-[12px]">
|
||||
@@ -86,6 +116,7 @@ export function UsersManager({ user }: { user: SessionUser | null }) {
|
||||
roles={roles}
|
||||
canUpdate={canUpdate}
|
||||
canDelete={canDelete}
|
||||
onEdit={() => { setEditingUser(u); setError(null); }}
|
||||
onChanged={invalidate}
|
||||
onError={onError}
|
||||
/>
|
||||
@@ -101,12 +132,13 @@ export function UsersManager({ user }: { user: SessionUser | null }) {
|
||||
}
|
||||
|
||||
function UserRow({
|
||||
u, roles, canUpdate, canDelete, onChanged, onError,
|
||||
u, roles, canUpdate, canDelete, onEdit, onChanged, onError,
|
||||
}: {
|
||||
u: ManagedUser;
|
||||
roles: ManagedRole[];
|
||||
canUpdate: boolean;
|
||||
canDelete: boolean;
|
||||
onEdit: () => void;
|
||||
onChanged: () => void;
|
||||
onError: (e: unknown) => void;
|
||||
}) {
|
||||
@@ -132,13 +164,16 @@ function UserRow({
|
||||
|
||||
return (
|
||||
<tr className="border-t border-term-border">
|
||||
<td className="px-3 py-1.5">{u.username}</td>
|
||||
<td className="px-3 py-1.5">
|
||||
{u.username}
|
||||
{u.fullName && <span className="ml-2 text-term-muted">{u.fullName}</span>}
|
||||
</td>
|
||||
<td className="px-3 py-1.5">
|
||||
{canUpdate ? (
|
||||
<select
|
||||
value={u.roleId}
|
||||
onChange={(e) => roleMut.mutate(e.target.value)}
|
||||
className="rounded-term border border-term-border bg-term-panel px-2 py-0.5 text-[12px]"
|
||||
className="select input-sm w-auto"
|
||||
>
|
||||
{roles.map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
|
||||
</select>
|
||||
@@ -149,8 +184,12 @@ function UserRow({
|
||||
<td className="px-3 py-1.5 text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
{canUpdate && !resetting && (
|
||||
<button type="button" onClick={() => setResetting(true)}
|
||||
className="text-[11px] uppercase tracking-wider text-term-muted hover:text-term-text">
|
||||
<button type="button" className="btn btn-ghost btn-sm" onClick={onEdit}>
|
||||
{t("users.edit")}
|
||||
</button>
|
||||
)}
|
||||
{canUpdate && !resetting && (
|
||||
<button type="button" className="btn btn-ghost btn-sm" onClick={() => setResetting(true)}>
|
||||
{t("users.resetPassword")}
|
||||
</button>
|
||||
)}
|
||||
@@ -160,21 +199,19 @@ function UserRow({
|
||||
type="password" value={pw} autoFocus
|
||||
onChange={(e) => setPw(e.target.value)}
|
||||
placeholder={t("users.newPassword")}
|
||||
className="w-32 rounded-term border border-term-border bg-term-panel px-2 py-0.5 text-[12px]"
|
||||
className="input input-sm w-32"
|
||||
/>
|
||||
<button type="button" disabled={pw.length < 8 || pwMut.isPending} onClick={() => pwMut.mutate()}
|
||||
className="text-[11px] uppercase tracking-wider text-term-green disabled:opacity-40">
|
||||
<button type="button" className="btn btn-go btn-sm" disabled={pw.length < 8 || pwMut.isPending} onClick={() => pwMut.mutate()}>
|
||||
{t("common.save")}
|
||||
</button>
|
||||
<button type="button" onClick={() => { setResetting(false); setPw(""); }}
|
||||
className="text-[11px] uppercase tracking-wider text-term-muted">✕</button>
|
||||
<button type="button" className="btn btn-ghost btn-sm" onClick={() => { setResetting(false); setPw(""); }}>✕</button>
|
||||
</span>
|
||||
)}
|
||||
{canDelete && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger btn-sm"
|
||||
onClick={() => { if (confirm(t("users.confirmDelete", { name: u.username }))) delMut.mutate(); }}
|
||||
className="text-[11px] uppercase tracking-wider text-term-red hover:text-term-text"
|
||||
>
|
||||
{t("users.delete")}
|
||||
</button>
|
||||
@@ -185,47 +222,98 @@ function UserRow({
|
||||
);
|
||||
}
|
||||
|
||||
/** Submitted form value. `password` is omitted entirely on edit (a blank field must
|
||||
* not blank the password — that's the separate "reset password" flow). */
|
||||
interface UserFormValue {
|
||||
username: string;
|
||||
password?: string;
|
||||
roleId: string;
|
||||
fullName: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
address: string;
|
||||
}
|
||||
|
||||
function UserForm({
|
||||
roles, onCancel, onSubmit,
|
||||
roles, editing, onCancel, onSubmit,
|
||||
}: {
|
||||
roles: ManagedRole[];
|
||||
/** When set, the form edits this user (username/role/details; NOT the password). */
|
||||
editing?: ManagedUser;
|
||||
onCancel: () => void;
|
||||
onSubmit: (v: { username: string; password: string; roleId: string }) => void;
|
||||
onSubmit: (v: UserFormValue) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [username, setUsername] = useState("");
|
||||
const isEdit = editing != null;
|
||||
const [username, setUsername] = useState(editing?.username ?? "");
|
||||
const [password, setPassword] = useState("");
|
||||
const [roleId, setRoleId] = useState(roles[0]?.id ?? "");
|
||||
const valid = username.trim().length > 0 && password.length >= 8 && roleId;
|
||||
const [roleId, setRoleId] = useState(editing?.roleId ?? roles[0]?.id ?? "");
|
||||
const [fullName, setFullName] = useState(editing?.fullName ?? "");
|
||||
const [phone, setPhone] = useState(editing?.phone ?? "");
|
||||
const [email, setEmail] = useState(editing?.email ?? "");
|
||||
const [address, setAddress] = useState(editing?.address ?? "");
|
||||
|
||||
// On create, a >=8 char password is required; on edit it's left untouched.
|
||||
const valid = username.trim().length > 0 && roleId && (isEdit || password.length >= 8);
|
||||
|
||||
function submit() {
|
||||
onSubmit({
|
||||
username: username.trim(),
|
||||
...(isEdit ? {} : { password }),
|
||||
roleId,
|
||||
fullName,
|
||||
phone,
|
||||
email,
|
||||
address,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mb-3 rounded-term border border-term-border bg-term-panel p-3">
|
||||
<div className="mb-2 text-[12px] font-semibold uppercase tracking-wider text-term-amber">{t("users.new")}</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<label className="text-[11px] text-term-muted">
|
||||
{t("users.username")}
|
||||
<input value={username} onChange={(e) => setUsername(e.target.value)}
|
||||
className="mt-1 w-full rounded-term border border-term-border bg-term-panel-2 px-2 py-1 text-[12px] text-term-text" />
|
||||
</label>
|
||||
<label className="text-[11px] text-term-muted">
|
||||
{t("users.password")}
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
|
||||
className="mt-1 w-full rounded-term border border-term-border bg-term-panel-2 px-2 py-1 text-[12px] text-term-text" />
|
||||
</label>
|
||||
<label className="text-[11px] text-term-muted">
|
||||
{t("users.role")}
|
||||
<select value={roleId} onChange={(e) => setRoleId(e.target.value)}
|
||||
className="mt-1 w-full rounded-term border border-term-border bg-term-panel-2 px-2 py-1 text-[12px] text-term-text">
|
||||
<div>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="field">
|
||||
<span className="label">{t("users.username")}</span>
|
||||
<input className="input" value={username} onChange={(e) => setUsername(e.target.value)} />
|
||||
</div>
|
||||
{!isEdit && (
|
||||
<div className="field">
|
||||
<span className="label">{t("users.password")}</span>
|
||||
<input className="input" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
|
||||
</div>
|
||||
)}
|
||||
<div className="field">
|
||||
<span className="label">{t("users.role")}</span>
|
||||
<select className="select" value={roleId} onChange={(e) => setRoleId(e.target.value)}>
|
||||
{roles.map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1 text-[10px] text-term-muted">{t("users.passwordHint")}</div>
|
||||
<div className="mt-2 flex justify-end gap-2">
|
||||
<button type="button" onClick={onCancel}
|
||||
className="rounded-term border border-term-border px-3 py-1 text-[12px] uppercase tracking-wider text-term-muted">{t("common.cancel")}</button>
|
||||
<button type="button" disabled={!valid} onClick={() => onSubmit({ username: username.trim(), password, roleId })}
|
||||
className="rounded-term border border-term-green bg-term-green/10 px-3 py-1 text-[12px] uppercase tracking-wider text-term-green disabled:opacity-40">{t("common.save")}</button>
|
||||
{!isEdit && <div className="hint mt-1">{t("users.passwordHint")}</div>}
|
||||
|
||||
{/* Optional profile metadata. */}
|
||||
<div className="mt-4 mb-2 text-[11px] uppercase tracking-wider text-term-muted">{t("users.detailsSection")}</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="field">
|
||||
<span className="label">{t("users.fullName")}</span>
|
||||
<input className="input" value={fullName} onChange={(e) => setFullName(e.target.value)} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<span className="label">{t("users.phone")}</span>
|
||||
<input className="input" value={phone} onChange={(e) => setPhone(e.target.value)} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<span className="label">{t("users.email")}</span>
|
||||
<input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<span className="label">{t("users.address")}</span>
|
||||
<input className="input" value={address} onChange={(e) => setAddress(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-end gap-2">
|
||||
<button type="button" className="btn btn-sm" onClick={onCancel}>{t("common.cancel")}</button>
|
||||
<button type="button" className="btn btn-primary btn-sm" disabled={!valid} onClick={submit}>{t("common.save")}</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
+58
-3
@@ -45,6 +45,7 @@ export class ApiError extends Error {
|
||||
// --- Auth -----------------------------------------------------------------
|
||||
|
||||
export type Lang = "sq" | "en";
|
||||
export type Theme = "dark" | "light";
|
||||
/** A `resource:action` permission string (the server is the source of truth for
|
||||
* the full grid; the role composer fetches it via /api/roles). */
|
||||
export type Permission = string;
|
||||
@@ -57,6 +58,10 @@ export interface SessionUser {
|
||||
permissions: Permission[];
|
||||
/** Preferred UI language (loaded from the server on login). */
|
||||
language: Lang;
|
||||
/** Preferred UI theme (loaded from the server on login). */
|
||||
theme: Theme;
|
||||
/** Optional display name (profile metadata); null if unset. */
|
||||
fullName: string | null;
|
||||
}
|
||||
|
||||
/** Does this session grant the permission? Central authz check for the SPA. */
|
||||
@@ -80,6 +85,11 @@ export function setLanguagePref(language: Lang): Promise<{ language: Lang }> {
|
||||
return apiFetch("/api/auth/language", { method: "PUT", body: JSON.stringify({ language }) });
|
||||
}
|
||||
|
||||
/** Persist the current user's UI theme preference (restored on next login). */
|
||||
export function setThemePref(theme: Theme): Promise<{ theme: Theme }> {
|
||||
return apiFetch("/api/auth/theme", { method: "PUT", body: JSON.stringify({ theme }) });
|
||||
}
|
||||
|
||||
/** Returns the current user, or null if not authenticated. */
|
||||
export async function fetchMe(): Promise<SessionUser | null> {
|
||||
try {
|
||||
@@ -92,7 +102,14 @@ export async function fetchMe(): Promise<SessionUser | null> {
|
||||
|
||||
// --- User & role management (RBAC) ----------------------------------------
|
||||
|
||||
export interface ManagedUser {
|
||||
/** Optional profile metadata on a managed user (all nullable). */
|
||||
export interface UserProfile {
|
||||
fullName: string | null;
|
||||
phone: string | null;
|
||||
email: string | null;
|
||||
address: string | null;
|
||||
}
|
||||
export interface ManagedUser extends UserProfile {
|
||||
id: string;
|
||||
username: string;
|
||||
roleId: string;
|
||||
@@ -111,10 +128,15 @@ export interface ManagedRole {
|
||||
export function fetchUsers(): Promise<{ users: ManagedUser[] }> {
|
||||
return apiFetch("/api/users");
|
||||
}
|
||||
export function createUser(body: { username: string; password: string; roleId: string }): Promise<ManagedUser> {
|
||||
export function createUser(
|
||||
body: { username: string; password: string; roleId: string } & Partial<UserProfile>,
|
||||
): Promise<ManagedUser> {
|
||||
return apiFetch("/api/users", { method: "POST", body: JSON.stringify(body) });
|
||||
}
|
||||
export function updateUser(id: string, body: { username?: string; roleId?: string }): Promise<ManagedUser> {
|
||||
export function updateUser(
|
||||
id: string,
|
||||
body: { username?: string; roleId?: string } & Partial<UserProfile>,
|
||||
): Promise<ManagedUser> {
|
||||
return apiFetch(`/api/users/${id}`, { method: "PUT", body: JSON.stringify(body) });
|
||||
}
|
||||
export function resetUserPassword(id: string, password: string): Promise<{ ok: boolean }> {
|
||||
@@ -517,6 +539,39 @@ export function recordCashMovement(
|
||||
});
|
||||
}
|
||||
|
||||
/** A completed shift (reconstructed from its signed Z-report). */
|
||||
export interface ShiftSummary {
|
||||
id: string;
|
||||
index: number;
|
||||
operator: string;
|
||||
startedAt: string;
|
||||
endedAt: string;
|
||||
cashTotalMinor: number;
|
||||
cardTotalMinor: number;
|
||||
currency: string | null;
|
||||
paymentCount: number;
|
||||
openingFloatMinor: number;
|
||||
cashAddedMinor: number;
|
||||
cashRemovedMinor: number;
|
||||
expectedDrawerMinor: number;
|
||||
}
|
||||
|
||||
/** Completed shift history. The server scopes by permission: operators get their
|
||||
* own shifts only (filter args ignored); admins (shift:cash) get all, optionally
|
||||
* filtered by operator + a from/to window over the shift start. `scope` echoes
|
||||
* which the server applied, so the UI can show/hide the filter. */
|
||||
export function fetchShifts(params: { operator?: string; from?: string; to?: string } = {}): Promise<{
|
||||
shifts: ShiftSummary[];
|
||||
scope: "all" | "self";
|
||||
}> {
|
||||
const qs = new URLSearchParams();
|
||||
if (params.operator) qs.set("operator", params.operator);
|
||||
if (params.from) qs.set("from", params.from);
|
||||
if (params.to) qs.set("to", params.to);
|
||||
const q = qs.toString();
|
||||
return apiFetch(`/api/shifts${q ? `?${q}` : ""}`);
|
||||
}
|
||||
|
||||
// --- Site config / occupancy ----------------------------------------------
|
||||
|
||||
export interface Occupancy {
|
||||
|
||||
@@ -355,3 +355,57 @@ body {
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LIGHT THEME
|
||||
The booth defaults to dark (dark room), but a user may prefer light; the
|
||||
choice is saved to their profile (users.theme) and applied on <html> as
|
||||
`.theme-light`. Every screen reads colour through the --color-term-* tokens,
|
||||
so re-pointing them here re-skins the whole app. The TRM "paper/ink" scale
|
||||
supplies the surfaces; accents are tuned a shade darker for contrast on white.
|
||||
A few component-layer values are literal hex (input borders, the inset
|
||||
"recessed" shadow, primary-button text) — those are overridden too so fields
|
||||
and buttons keep their affordance on a light background.
|
||||
============================================================ */
|
||||
html.theme-light {
|
||||
/* Surfaces — TRM paper scale (light → slightly darker for layering). */
|
||||
--color-term-bg: #fafaf7; /* paper */
|
||||
--color-term-panel: #f2f2ee; /* paper-2 */
|
||||
--color-term-panel-2: #e8e8e2; /* paper-3 */
|
||||
--color-term-border: #d2d2c8;
|
||||
--color-term-muted: #5a5a53; /* ink-3 — readable secondary text */
|
||||
--color-term-text: #14171c; /* near-black ink */
|
||||
|
||||
/* Accents — a step darker than the dark-theme values for white-bg contrast. */
|
||||
--color-term-amber: #b8740a;
|
||||
--color-term-green: #1f6a36;
|
||||
--color-term-red: #c8331f;
|
||||
--color-term-cyan: #1a4fa8;
|
||||
}
|
||||
|
||||
/* Component-layer literals that must flip for light (the rest read tokens). */
|
||||
html.theme-light .input,
|
||||
html.theme-light .select,
|
||||
html.theme-light .textarea {
|
||||
border-color: #c2c2b8;
|
||||
box-shadow: inset 0 1px 2px rgba(20, 23, 28, 0.08);
|
||||
}
|
||||
html.theme-light .input:hover,
|
||||
html.theme-light .select:hover,
|
||||
html.theme-light .textarea:hover {
|
||||
border-color: #a8a89e;
|
||||
}
|
||||
html.theme-light .input:focus,
|
||||
html.theme-light .select:focus,
|
||||
html.theme-light .textarea:focus {
|
||||
box-shadow: inset 0 1px 2px rgba(20, 23, 28, 0.08), 0 0 0 1px var(--color-term-amber);
|
||||
}
|
||||
html.theme-light .btn {
|
||||
border-color: #c2c2b8;
|
||||
}
|
||||
html.theme-light .btn:hover:not(:disabled) {
|
||||
background: #dcdcd4;
|
||||
border-color: #a8a89e;
|
||||
}
|
||||
/* Filled buttons keep light text; primary uses dark-on-amber, kept legible. */
|
||||
html.theme-light .btn-primary {
|
||||
color: #fafaf7;
|
||||
}
|
||||
|
||||
+106
-4
@@ -11,6 +11,9 @@ export const en: Catalog = {
|
||||
close: "Close",
|
||||
save: "Save",
|
||||
none: "—",
|
||||
themeDark: "dark",
|
||||
themeLight: "light",
|
||||
theme: "Theme",
|
||||
},
|
||||
auth: {
|
||||
title: "Parking System",
|
||||
@@ -23,11 +26,13 @@ export const en: Catalog = {
|
||||
booth: "Booth",
|
||||
shift: "Shift",
|
||||
setup: "Setup",
|
||||
devices: "Devices",
|
||||
tariff: "Tariff",
|
||||
subscriptions: "Subscriptions",
|
||||
site: "Site",
|
||||
users: "Users",
|
||||
roles: "Roles",
|
||||
shifts: "Shifts",
|
||||
},
|
||||
status: {
|
||||
live: "LIVE",
|
||||
@@ -101,7 +106,7 @@ export const en: Catalog = {
|
||||
},
|
||||
tariff: {
|
||||
title: "Tariff",
|
||||
noRateCard: "No rate card published yet — the pay station can't charge until you publish one.",
|
||||
noRateCard: "No tariff published yet — the pay station can't charge until you publish one.",
|
||||
activeSince: "Active since {{date}} · {{count}} version(s) in history. Publishing creates a new version; past sessions keep their original pricing.",
|
||||
currency: "Currency",
|
||||
freeEntryGrace: "Free entry grace (min)",
|
||||
@@ -121,13 +126,13 @@ export const en: Catalog = {
|
||||
addBlock: "+ Add block",
|
||||
publishNewVersion: "Publish new version",
|
||||
publishing: "Publishing…",
|
||||
publishedOk: "New tariff version published — it's now the active rate card.",
|
||||
defaultCard: "Default card (always active)",
|
||||
publishedOk: "New tariff version published — it's now the active rate.",
|
||||
defaultCard: "Base rate (always active)",
|
||||
defaultCardHint: "The base rate applied when no time/seasonal tier matches. This alone is enough for most car parks.",
|
||||
modeLadder: "Hourly ladder",
|
||||
modeFlat: "Flat price",
|
||||
tiersAdvanced: "Advanced: time & seasonal tiers",
|
||||
tiersHint: "Optional. Add cards that apply only at certain hours/days/dates or for a category (e.g. happy hour, night rate, weekend, bus). With no tiers, the simple card is published.",
|
||||
tiersHint: "Optional. Add tiers that apply only at certain hours/days/dates or for a category (e.g. happy hour, night rate, weekend, bus). With no tiers, just the base rate is published.",
|
||||
tierName: "Name",
|
||||
tierPriority: "Priority",
|
||||
tierCategory: "Category",
|
||||
@@ -145,6 +150,72 @@ export const en: Catalog = {
|
||||
dow6: "Sat",
|
||||
dow0: "Sun",
|
||||
},
|
||||
setup: {
|
||||
title: "Setup",
|
||||
intro:
|
||||
"Add your barrier controllers first — set which relay is entry/exit and which terminal the entry button is wired to. Then add readers, cameras and printers and point each at the barrier it serves.",
|
||||
catControllers: "Controllers (barriers + entry button)",
|
||||
catReaders: "Readers (QR / RFID)",
|
||||
catCameras: "Cameras (snapshot + plate)",
|
||||
catPrinters: "Printers (tickets / vouchers)",
|
||||
nounController: "controller",
|
||||
nounReader: "reader",
|
||||
nounCamera: "camera",
|
||||
nounPrinter: "printer",
|
||||
add: "+ Add {{noun}}",
|
||||
addAnother: "+ Add another {{noun}}",
|
||||
addTitle: "Add {{noun}}",
|
||||
editTitle: "Edit {{noun}}",
|
||||
needControllerFirst: "Add a controller first — a {{noun}} points at one of its relays.",
|
||||
failedToLoad: "Failed to load setup: {{error}}",
|
||||
loadingCatalog: "Loading device catalog…",
|
||||
dirEntry: "Entry",
|
||||
dirExit: "Exit",
|
||||
dirBoth: "Both (entry + exit)",
|
||||
inherits: "inherits {{direction}}",
|
||||
warnTitle: "⚠ Saved, but action needed:",
|
||||
dismiss: "Dismiss",
|
||||
disabled: "(disabled)",
|
||||
edit: "Edit",
|
||||
remove: "Remove",
|
||||
removing: "Removing…",
|
||||
confirmRemove: "Remove this {{driver}} device?",
|
||||
noRelaysSet: "no relays set",
|
||||
unbound: "unbound",
|
||||
noDrivers: "No drivers registered.",
|
||||
chooseDevice: "Choose a device…",
|
||||
scan: "Scan for controllers",
|
||||
scanning: "Scanning…",
|
||||
noControllersFound: "No controllers found on the LAN.",
|
||||
use: "Use",
|
||||
test: "Test connection",
|
||||
testing: "Testing…",
|
||||
saveConfigure: "Save & configure",
|
||||
saveChanges: "Save changes",
|
||||
saving: "Saving…",
|
||||
cancel: "Cancel",
|
||||
testFailed: "Test failed: {{error}}",
|
||||
saveFailed: "Save failed: {{error}}",
|
||||
deviceLabel: "Device:",
|
||||
preconditionsOk: "● preconditions OK",
|
||||
autoFixedOnSave: "(auto-fixed on save)",
|
||||
backendPushIp: "Backend push IP",
|
||||
chooseAddress: "Choose an address…",
|
||||
onDeviceSubnet: "— on device subnet",
|
||||
noNicOnSubnet: "⚠ no NIC on the device's subnet — the device may not reach the backend",
|
||||
backendIpHint: "The address this device will POST input events to.",
|
||||
relaysTitle: "Relays on this controller",
|
||||
relaysHint:
|
||||
"Each relay opens one barrier. Set its direction; for transient entry, set which input terminal the entry button is wired to.",
|
||||
relay: "Relay",
|
||||
entryButtonTerminal: "Entry button on terminal",
|
||||
addRelay: "+ Add relay",
|
||||
whichBarrier: "Which barrier does this device serve?",
|
||||
controller: "Controller",
|
||||
choose: "Choose…",
|
||||
relayLabel: "Relay {{relay}} ({{direction}})",
|
||||
noRelaysConfigured: "This controller has no relays configured.",
|
||||
},
|
||||
subs: {
|
||||
title: "Subscriptions",
|
||||
unnamed: "(unnamed)",
|
||||
@@ -240,8 +311,16 @@ export const en: Catalog = {
|
||||
newPassword: "new password",
|
||||
role: "Role",
|
||||
resetPassword: "Reset password",
|
||||
edit: "Edit",
|
||||
editTitle: "Edit user",
|
||||
save: "Save",
|
||||
delete: "Delete",
|
||||
confirmDelete: "Delete user \"{{name}}\"?",
|
||||
detailsSection: "Details (optional)",
|
||||
fullName: "Full name",
|
||||
phone: "Phone",
|
||||
email: "Email",
|
||||
address: "Address",
|
||||
},
|
||||
roles: {
|
||||
title: "Roles",
|
||||
@@ -304,6 +383,29 @@ export const en: Catalog = {
|
||||
openNow: "Open shift now",
|
||||
opening: "Opening…",
|
||||
},
|
||||
shifts: {
|
||||
title: "Shift history",
|
||||
myTitle: "My shifts",
|
||||
none: "No closed shifts.",
|
||||
operator: "Operator",
|
||||
started: "Started",
|
||||
ended: "Ended",
|
||||
payments: "Payments",
|
||||
cash: "Cash",
|
||||
card: "Card",
|
||||
expectedDrawer: "Expected drawer",
|
||||
filterFrom: "From",
|
||||
filterTo: "To",
|
||||
allOperators: "All operators",
|
||||
apply: "Apply",
|
||||
clear: "Clear",
|
||||
drawerSection: "Drawer",
|
||||
openingFloat: "Opening float",
|
||||
cashTaken: "Cash taken",
|
||||
cashAdded: "Cash added",
|
||||
cashRemoved: "Cash removed",
|
||||
loadFailed: "Failed to load shifts.",
|
||||
},
|
||||
pay: {
|
||||
ticket: "Ticket",
|
||||
entry: "Entry",
|
||||
|
||||
+119
-7
@@ -11,6 +11,9 @@ export const sq = {
|
||||
close: "Mbyll",
|
||||
save: "Ruaj",
|
||||
none: "—",
|
||||
themeDark: "errët",
|
||||
themeLight: "çelët",
|
||||
theme: "Tema",
|
||||
},
|
||||
auth: {
|
||||
title: "Sistemi i Parkimit",
|
||||
@@ -23,11 +26,13 @@ export const sq = {
|
||||
booth: "Kabina",
|
||||
shift: "Turni",
|
||||
setup: "Konfigurimi",
|
||||
devices: "Pajisjet",
|
||||
tariff: "Tarifa",
|
||||
subscriptions: "Abonimet",
|
||||
site: "Vendi",
|
||||
site: "Park",
|
||||
users: "Përdoruesit",
|
||||
roles: "Rolet",
|
||||
shifts: "Turnet",
|
||||
},
|
||||
status: {
|
||||
live: "LIVE",
|
||||
@@ -103,7 +108,7 @@ export const sq = {
|
||||
},
|
||||
tariff: {
|
||||
title: "Tarifa",
|
||||
noRateCard: "Asnjë kartë tarifore e publikuar — arka nuk mund të faturojë derisa të publikoni një.",
|
||||
noRateCard: "Asnjë tarifë e publikuar — arka nuk mund të faturojë derisa të publikoni një.",
|
||||
activeSince: "Aktive që nga {{date}} · {{count}} version(e) në histori. Publikimi krijon një version të ri; sesionet e kaluara ruajnë çmimin origjinal.",
|
||||
currency: "Monedha",
|
||||
freeEntryGrace: "Periudha pa pagesë në hyrje (min)",
|
||||
@@ -123,13 +128,13 @@ export const sq = {
|
||||
addBlock: "+ Shto bllok",
|
||||
publishNewVersion: "Publiko version të ri",
|
||||
publishing: "Duke publikuar…",
|
||||
publishedOk: "U publikua versioni i ri i tarifës — tani është karta tarifore aktive.",
|
||||
defaultCard: "Karta e parazgjedhur (gjithmonë aktive)",
|
||||
publishedOk: "U publikua versioni i ri i tarifës — tani është tarifa aktive.",
|
||||
defaultCard: "Tarifa bazë (gjithmonë aktive)",
|
||||
defaultCardHint: "Çmimi bazë i zbatuar kur asnjë nivel kohor/sezonal nuk vlen. Kjo e vetme është mjaftueshëm për shumicën e parkimeve.",
|
||||
modeLadder: "Shkallë orësh",
|
||||
modeFlat: "Çmim fiks",
|
||||
tiersAdvanced: "Të avancuara: nivele kohore & sezonale",
|
||||
tiersHint: "Opsionale. Shto karta që vlejnë vetëm në orë/ditë/data ose kategori të caktuara (p.sh. orë e lirë, tarifë nate, fundjavë, autobus). Pa nivele, publikohet karta e thjeshtë.",
|
||||
tiersHint: "Opsionale. Shto nivele tarifore që vlejnë vetëm në orë/ditë/data ose kategori të caktuara (p.sh. orë e lirë, tarifë nate, fundjavë, autobus). Pa nivele, publikohet vetëm tarifa bazë.",
|
||||
tierName: "Emri",
|
||||
tierPriority: "Përparësia",
|
||||
tierCategory: "Kategoria",
|
||||
@@ -147,6 +152,79 @@ export const sq = {
|
||||
dow6: "Sht",
|
||||
dow0: "Die",
|
||||
},
|
||||
setup: {
|
||||
title: "Konfigurimi",
|
||||
intro:
|
||||
"Shto fillimisht kontrolluesit e barrierave — cakto cili rele është hyrje/dalje dhe në cilin terminal është lidhur butoni i hyrjes. Pastaj shto lexues, kamera dhe printera dhe drejto secilin te barriera që shërben.",
|
||||
// Category titles + the singular noun used in buttons/modal titles.
|
||||
catControllers: "Kontrolluesit (barrierat + butoni i hyrjes)",
|
||||
catReaders: "Lexuesit (QR / RFID)",
|
||||
catCameras: "Kamerat (foto + targë)",
|
||||
catPrinters: "Printerat (bileta / vouchera)",
|
||||
nounController: "kontrollues",
|
||||
nounReader: "lexues",
|
||||
nounCamera: "kamerë",
|
||||
nounPrinter: "printer",
|
||||
add: "+ Shto {{noun}}",
|
||||
addAnother: "+ Shto edhe një {{noun}}",
|
||||
addTitle: "Shto {{noun}}",
|
||||
editTitle: "Ndrysho {{noun}}",
|
||||
needControllerFirst: "Shto fillimisht një kontrollues — {{noun}} drejtohet te një prej releve të tij.",
|
||||
failedToLoad: "Ngarkimi i konfigurimit dështoi: {{error}}",
|
||||
loadingCatalog: "Duke ngarkuar katalogun e pajisjeve…",
|
||||
// Direction labels (relay direction + inherited binding).
|
||||
dirEntry: "Hyrje",
|
||||
dirExit: "Dalje",
|
||||
dirBoth: "Hyrje + dalje",
|
||||
inherits: "trashëgon {{direction}}",
|
||||
// Warnings panel.
|
||||
warnTitle: "⚠ U ruajt, por nevojitet veprim:",
|
||||
dismiss: "Mbyll",
|
||||
// Assignment row.
|
||||
disabled: "(çaktivizuar)",
|
||||
edit: "Ndrysho",
|
||||
remove: "Hiq",
|
||||
removing: "Duke hequr…",
|
||||
confirmRemove: "Të hiqet kjo pajisje {{driver}}?",
|
||||
noRelaysSet: "asnjë rele e caktuar",
|
||||
unbound: "e palidhur",
|
||||
// Device form.
|
||||
noDrivers: "Asnjë drejtues i regjistruar.",
|
||||
chooseDevice: "Zgjidh një pajisje…",
|
||||
scan: "Skano për kontrollues",
|
||||
scanning: "Duke skanuar…",
|
||||
noControllersFound: "Asnjë kontrollues në LAN.",
|
||||
use: "Përdor",
|
||||
test: "Testo lidhjen",
|
||||
testing: "Duke testuar…",
|
||||
saveConfigure: "Ruaj & konfiguro",
|
||||
saveChanges: "Ruaj ndryshimet",
|
||||
saving: "Duke ruajtur…",
|
||||
cancel: "Anulo",
|
||||
testFailed: "Testi dështoi: {{error}}",
|
||||
saveFailed: "Ruajtja dështoi: {{error}}",
|
||||
deviceLabel: "Pajisja:",
|
||||
preconditionsOk: "● parakushtet OK",
|
||||
autoFixedOnSave: "(rregullohet vetë në ruajtje)",
|
||||
backendPushIp: "IP-ja e backend-it",
|
||||
chooseAddress: "Zgjidh një adresë…",
|
||||
onDeviceSubnet: "— në subnetin e pajisjes",
|
||||
noNicOnSubnet: "⚠ asnjë NIC në subnetin e pajisjes — pajisja mund të mos arrijë backend-in",
|
||||
backendIpHint: "Adresa te e cila kjo pajisje do të dërgojë eventet e hyrjes.",
|
||||
// Relay editor.
|
||||
relaysTitle: "Relet në këtë kontrollues",
|
||||
relaysHint:
|
||||
"Çdo rele hap një barrierë. Cakto drejtimin e saj; për hyrje kalimtare, cakto në cilin terminal hyrës është lidhur butoni i hyrjes.",
|
||||
relay: "Rele",
|
||||
entryButtonTerminal: "Butoni i hyrjes në terminalin",
|
||||
addRelay: "+ Shto rele",
|
||||
// Binding picker.
|
||||
whichBarrier: "Cilën barrierë shërben kjo pajisje?",
|
||||
controller: "Kontrolluesi",
|
||||
choose: "Zgjidh…",
|
||||
relayLabel: "Rele {{relay}} ({{direction}})",
|
||||
noRelaysConfigured: "Ky kontrollues nuk ka rele të konfiguruar.",
|
||||
},
|
||||
subs: {
|
||||
title: "Abonimet",
|
||||
unnamed: "(pa emër)",
|
||||
@@ -182,8 +260,8 @@ export const sq = {
|
||||
commaSeparatedOptional: "të ndara me presje (opsionale)",
|
||||
credentials: "Kredencialet",
|
||||
credentialsCardQr: "Kredencialet (kartë / QR)",
|
||||
rfCardTag: "Kartë/etiketë RF",
|
||||
rfCardTagSoon: "Kartë/etiketë RF (së shpejti)",
|
||||
rfCardTag: "Kartë/Tag RF",
|
||||
rfCardTagSoon: "Kartë/Tag RF (së shpejti)",
|
||||
rfPlaceholder: "numri i kartës (ose lexo kartën)",
|
||||
readCard: "Lexo kartën",
|
||||
captureChooseReader: "Zgjidh lexuesin, pastaj afro kartën:",
|
||||
@@ -242,8 +320,17 @@ export const sq = {
|
||||
newPassword: "fjalëkalim i ri",
|
||||
role: "Roli",
|
||||
resetPassword: "Rivendos fjalëkalimin",
|
||||
edit: "Ndrysho",
|
||||
editTitle: "Ndrysho përdoruesin",
|
||||
save: "Ruaj",
|
||||
delete: "Fshi",
|
||||
confirmDelete: "Të fshihet përdoruesi \"{{name}}\"?",
|
||||
// Optional profile metadata.
|
||||
detailsSection: "Të dhënat (opsionale)",
|
||||
fullName: "Emri i plotë",
|
||||
phone: "Telefoni",
|
||||
email: "Email",
|
||||
address: "Adresa",
|
||||
},
|
||||
roles: {
|
||||
title: "Rolet",
|
||||
@@ -306,6 +393,31 @@ export const sq = {
|
||||
openNow: "Hap turnin tani",
|
||||
opening: "Duke hapur…",
|
||||
},
|
||||
shifts: {
|
||||
title: "Historiku i turneve",
|
||||
myTitle: "Turnet e mia",
|
||||
none: "Asnjë turn i mbyllur.",
|
||||
operator: "Operatori",
|
||||
started: "Filloi",
|
||||
ended: "Mbaroi",
|
||||
payments: "Pagesa",
|
||||
cash: "Para",
|
||||
card: "Kartë",
|
||||
expectedDrawer: "Arka e pritshme",
|
||||
// Filter (admin only).
|
||||
filterFrom: "Nga",
|
||||
filterTo: "Deri",
|
||||
allOperators: "Të gjithë operatorët",
|
||||
apply: "Apliko",
|
||||
clear: "Pastro",
|
||||
// Expanded drawer detail.
|
||||
drawerSection: "Arka",
|
||||
openingFloat: "Bilanci fillestar",
|
||||
cashTaken: "Para të marra",
|
||||
cashAdded: "Para të shtuara",
|
||||
cashRemoved: "Para të hequra",
|
||||
loadFailed: "Ngarkimi i turneve dështoi.",
|
||||
},
|
||||
pay: {
|
||||
ticket: "Bileta",
|
||||
entry: "Hyrja",
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import type { Theme } from "../api.js";
|
||||
|
||||
// Theme application. The whole UI reads colour through the --color-term-* tokens;
|
||||
// the light palette lives in index.css under `html.theme-light`. Applying a theme is
|
||||
// just toggling that class on <html>. The active theme is the LOGGED-IN USER's stored
|
||||
// preference (users.theme), applied via applyTheme() after auth resolves — mirroring
|
||||
// how language works. Dark is the default before auth resolves. Printed tickets are
|
||||
// unaffected (always Albanian, dark-agnostic).
|
||||
|
||||
/** Apply a theme by toggling `theme-light` on <html>. Dark is the absence of the
|
||||
* class (the base tokens). No-op-safe to call repeatedly. */
|
||||
export function applyTheme(theme: Theme): void {
|
||||
document.documentElement.classList.toggle("theme-light", theme === "light");
|
||||
}
|
||||
+172
-26
@@ -9,10 +9,11 @@ import {
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { Lang, Permission, SessionUser } from "./api.js";
|
||||
import { can, closeShift, logout, openShift, setLanguagePref } from "./api.js";
|
||||
import type { Lang, Permission, SessionUser, Theme } from "./api.js";
|
||||
import { can, closeShift, logout, openShift, setLanguagePref, setThemePref } from "./api.js";
|
||||
import { qk, queryClient } from "./lib/query.js";
|
||||
import { setLanguage } from "./lib/i18n/index.js";
|
||||
import { applyTheme } from "./lib/theme.js";
|
||||
import { useLiveFeed } from "./lib/use-live-feed.js";
|
||||
import { useShift } from "./lib/use-shift.js";
|
||||
import { DeviceFooter } from "./ui/DeviceFooter.js";
|
||||
@@ -25,6 +26,7 @@ import { ShiftControl } from "./ShiftControl.js";
|
||||
import { SiteSettings } from "./SiteSettings.js";
|
||||
import { UsersManager } from "./UsersManager.js";
|
||||
import { RolesManager } from "./RolesManager.js";
|
||||
import { ShiftsHistory } from "./ShiftsHistory.js";
|
||||
|
||||
// Code-based TanStack Router (no file-based codegen — the app is small enough that
|
||||
// an explicit tree is clearer). The router context carries the signed-in user and
|
||||
@@ -51,6 +53,43 @@ function NavLink({ to, label }: { to: string; label: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
/** A tab inside the Setup layout. `exact` (activeOptions) so the Devices tab at
|
||||
* `/setup` doesn't stay highlighted on the child tabs. */
|
||||
function SetupTab({ to, label, exact = false }: { to: string; label: string; exact?: boolean }) {
|
||||
return (
|
||||
<Link
|
||||
to={to}
|
||||
activeOptions={{ exact }}
|
||||
className="border-b-2 border-transparent px-3 py-2 text-[12px] uppercase tracking-wider text-term-muted hover:text-term-text [&.active]:border-term-amber [&.active]:text-term-amber"
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
/** Setup layout — the config hub. Renders a permission-gated tab bar and the active
|
||||
* tab's screen via <Outlet>. Each tab is a child route (its own URL + guard), so
|
||||
* deep links and the back button work and a denied tab redirects to the booth. */
|
||||
function SetupLayout() {
|
||||
const { user } = rootRoute.useRouteContext();
|
||||
const { t } = useTranslation();
|
||||
const show = (perm: Permission) => can(user, perm);
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<nav className="mb-4 flex flex-wrap items-center gap-1 border-b border-term-border">
|
||||
{show("site:update") && <SetupTab to="/setup" label={t("nav.devices")} exact />}
|
||||
{show("tariff:read") && <SetupTab to="/setup/tariff" label={t("nav.tariff")} />}
|
||||
{show("subscription:read") && <SetupTab to="/setup/subscriptions" label={t("nav.subscriptions")} />}
|
||||
{show("site:read") && <SetupTab to="/setup/site" label={t("nav.site")} />}
|
||||
{show("user:read") && <SetupTab to="/setup/users" label={t("nav.users")} />}
|
||||
{show("role:read") && <SetupTab to="/setup/roles" label={t("nav.roles")} />}
|
||||
{show("shift:read") && <SetupTab to="/setup/shifts" label={t("nav.shifts")} />}
|
||||
</nav>
|
||||
<Outlet />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** SQ/EN toggle. Persists the choice to the user's profile (restored on next login)
|
||||
* and applies it immediately. Updates the router-context user so App re-syncs. */
|
||||
function LanguageToggle({
|
||||
@@ -88,6 +127,45 @@ function LanguageToggle({
|
||||
);
|
||||
}
|
||||
|
||||
/** Dark/light theme toggle. Same shape as the language toggle: applies instantly,
|
||||
* persists to the user's profile, and updates the router-context user so App
|
||||
* re-syncs. Restored on the next login from any booth. */
|
||||
function ThemeToggle({
|
||||
user,
|
||||
setUser,
|
||||
}: {
|
||||
user: SessionUser;
|
||||
setUser: (u: SessionUser | null) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
async function pick(theme: Theme) {
|
||||
if (theme === user.theme) return;
|
||||
applyTheme(theme); // instant UI
|
||||
setUser({ ...user, theme });
|
||||
try {
|
||||
await setThemePref(theme); // persist
|
||||
} catch {
|
||||
/* non-fatal — the choice still applies this session */
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="flex items-center gap-0.5 text-[10px] uppercase tracking-wider">
|
||||
{(["dark", "light"] as const).map((th) => (
|
||||
<button
|
||||
key={th}
|
||||
type="button"
|
||||
onClick={() => pick(th)}
|
||||
className={`rounded-term px-1.5 py-0.5 ${
|
||||
user.theme === th ? "bg-term-panel-2 text-term-amber" : "text-term-muted hover:text-term-text"
|
||||
}`}
|
||||
>
|
||||
{t(th === "dark" ? "common.themeDark" : "common.themeLight")}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Header shift control — the site-wide single-open shift expressed as one button:
|
||||
* - no shift open → "Open shift" (enabled; opens this operator's shift)
|
||||
@@ -167,23 +245,28 @@ function RootLayout() {
|
||||
<nav className="flex items-center gap-1">
|
||||
<NavLink to="/booth" label={t("nav.booth")} />
|
||||
<NavLink to="/shift" label={t("nav.shift")} />
|
||||
{show("site:update") && <NavLink to="/setup" label={t("nav.setup")} />}
|
||||
{show("tariff:read") && <NavLink to="/tariff" label={t("nav.tariff")} />}
|
||||
{show("subscription:read") && <NavLink to="/subscriptions" label={t("nav.subscriptions")} />}
|
||||
{show("site:read") && <NavLink to="/site" label={t("nav.site")} />}
|
||||
{show("user:read") && <NavLink to="/users" label={t("nav.users")} />}
|
||||
{show("role:read") && <NavLink to="/roles" label={t("nav.roles")} />}
|
||||
{/* One Setup entry — its tabs hold devices/tariff/subscriptions/site/users/
|
||||
roles/shifts. Shown if the user can reach ANY of those screens (an
|
||||
operator with only shift:read still gets in, landing on Shifts). */}
|
||||
{(show("site:update") ||
|
||||
show("tariff:read") ||
|
||||
show("subscription:read") ||
|
||||
show("site:read") ||
|
||||
show("user:read") ||
|
||||
show("role:read") ||
|
||||
show("shift:read")) && <NavLink to="/setup" label={t("nav.setup")} />}
|
||||
</nav>
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
{user && <ShiftButton />}
|
||||
{user && <LanguageToggle user={user} setUser={setUser} />}
|
||||
{user && <ThemeToggle user={user} setUser={setUser} />}
|
||||
<StatusDot />
|
||||
<span className="text-[11px] text-term-muted">
|
||||
{user?.username} · {user?.roleName}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-term border border-term-border px-2 py-0.5 text-[11px] uppercase tracking-wider text-term-muted hover:text-term-text"
|
||||
className="btn btn-ghost btn-sm"
|
||||
onClick={async () => {
|
||||
await logout();
|
||||
setUser(null);
|
||||
@@ -216,6 +299,26 @@ const boothRoute = createRoute({
|
||||
component: BoothScreen,
|
||||
});
|
||||
|
||||
// Back-compat: the config screens used to be top-level routes. They now live under
|
||||
// /setup as tabs — redirect the old paths so existing bookmarks/links don't 404.
|
||||
const legacyRedirects = (
|
||||
[
|
||||
["/tariff", "/setup/tariff"],
|
||||
["/subscriptions", "/setup/subscriptions"],
|
||||
["/site", "/setup/site"],
|
||||
["/users", "/setup/users"],
|
||||
["/roles", "/setup/roles"],
|
||||
] as const
|
||||
).map(([from, to]) =>
|
||||
createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: from,
|
||||
beforeLoad: () => {
|
||||
throw redirect({ to });
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
const shiftRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/shift",
|
||||
@@ -235,27 +338,55 @@ function requirePerm(perm: Permission) {
|
||||
};
|
||||
}
|
||||
|
||||
// The Setup tabs in display order, each with the permission its screen needs. Used
|
||||
// to land a user on the FIRST tab they may see when they open /setup without
|
||||
// `site:update` (e.g. an operator who only has shift:read → goes to /setup/shifts).
|
||||
const SETUP_TABS: { to: string; perm: Permission }[] = [
|
||||
{ to: "/setup", perm: "site:update" },
|
||||
{ to: "/setup/tariff", perm: "tariff:read" },
|
||||
{ to: "/setup/subscriptions", perm: "subscription:read" },
|
||||
{ to: "/setup/site", perm: "site:read" },
|
||||
{ to: "/setup/users", perm: "user:read" },
|
||||
{ to: "/setup/roles", perm: "role:read" },
|
||||
{ to: "/setup/shifts", perm: "shift:read" },
|
||||
];
|
||||
|
||||
// /setup is a LAYOUT route (tab bar + <Outlet>); the config screens are its
|
||||
// children. The layout itself has no permission gate — each child enforces its own
|
||||
// (so a user who can reach ANY tab gets the hub, but only the tabs they're allowed).
|
||||
const setupRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/setup",
|
||||
beforeLoad: ({ context }) => requirePerm("site:update")(context),
|
||||
component: SetupLayout,
|
||||
});
|
||||
// Index tab = Devices (the former SetupWizard). Lives at /setup exactly. A user who
|
||||
// lacks site:update (e.g. an operator) is redirected to the FIRST tab they CAN see
|
||||
// rather than bounced to the booth — so "Setup" always lands somewhere useful.
|
||||
const setupDevicesRoute = createRoute({
|
||||
getParentRoute: () => setupRoute,
|
||||
path: "/",
|
||||
beforeLoad: ({ context }) => {
|
||||
if (can(context.user, "site:update")) return;
|
||||
const firstOther = SETUP_TABS.find((tab) => tab.to !== "/setup" && can(context.user, tab.perm));
|
||||
throw redirect({ to: firstOther?.to ?? "/booth" });
|
||||
},
|
||||
component: () => <SetupWizard />,
|
||||
});
|
||||
const tariffRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/tariff",
|
||||
getParentRoute: () => setupRoute,
|
||||
path: "tariff",
|
||||
beforeLoad: ({ context }) => requirePerm("tariff:read")(context),
|
||||
component: () => <TariffComposer />,
|
||||
});
|
||||
const subscriptionsRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/subscriptions",
|
||||
getParentRoute: () => setupRoute,
|
||||
path: "subscriptions",
|
||||
beforeLoad: ({ context }) => requirePerm("subscription:read")(context),
|
||||
component: () => <SubscriptionManager />,
|
||||
});
|
||||
const siteRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/site",
|
||||
getParentRoute: () => setupRoute,
|
||||
path: "site",
|
||||
beforeLoad: ({ context }) => requirePerm("site:read")(context),
|
||||
component: function SiteRoute() {
|
||||
const { user } = rootRoute.useRouteContext();
|
||||
@@ -263,8 +394,8 @@ const siteRoute = createRoute({
|
||||
},
|
||||
});
|
||||
const usersRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/users",
|
||||
getParentRoute: () => setupRoute,
|
||||
path: "users",
|
||||
beforeLoad: ({ context }) => requirePerm("user:read")(context),
|
||||
component: function UsersRoute() {
|
||||
const { user } = rootRoute.useRouteContext();
|
||||
@@ -272,25 +403,40 @@ const usersRoute = createRoute({
|
||||
},
|
||||
});
|
||||
const rolesRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/roles",
|
||||
getParentRoute: () => setupRoute,
|
||||
path: "roles",
|
||||
beforeLoad: ({ context }) => requirePerm("role:read")(context),
|
||||
component: function RolesRoute() {
|
||||
const { user } = rootRoute.useRouteContext();
|
||||
return <RolesManager user={user} />;
|
||||
},
|
||||
});
|
||||
// Shift history. Gated by shift:read (operators have it) — the SERVER scopes the
|
||||
// data: operators see only their own; shift:cash holders see all + can filter.
|
||||
const shiftsHistoryRoute = createRoute({
|
||||
getParentRoute: () => setupRoute,
|
||||
path: "shifts",
|
||||
beforeLoad: ({ context }) => requirePerm("shift:read")(context),
|
||||
component: function ShiftsHistoryRoute() {
|
||||
const { user } = rootRoute.useRouteContext();
|
||||
return <ShiftsHistory user={user} />;
|
||||
},
|
||||
});
|
||||
|
||||
const routeTree = rootRoute.addChildren([
|
||||
indexRoute,
|
||||
boothRoute,
|
||||
...legacyRedirects,
|
||||
shiftRoute,
|
||||
setupRoute,
|
||||
tariffRoute,
|
||||
subscriptionsRoute,
|
||||
siteRoute,
|
||||
usersRoute,
|
||||
rolesRoute,
|
||||
setupRoute.addChildren([
|
||||
setupDevicesRoute,
|
||||
tariffRoute,
|
||||
subscriptionsRoute,
|
||||
siteRoute,
|
||||
usersRoute,
|
||||
rolesRoute,
|
||||
shiftsHistoryRoute,
|
||||
]),
|
||||
]);
|
||||
|
||||
export const router = createRouter({
|
||||
|
||||
Reference in New Issue
Block a user