From 9fe5113c5b9af0a7f5370d57b90b66125b3b6a22 Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Tue, 9 Jun 2026 16:49:31 +0200
Subject: [PATCH] fix(ui): cross-module mechanical unifications (line-item
 labels/align, back-tab targets, status-button colors, apply_vat checkbox,
 currency-from-settings, read-only issued_by, Celkem header, centered offer
 tabs)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/admin/pages/InvoiceDetail.tsx     | 42 ++++++++++++-------------
 src/admin/pages/IssuedOrderDetail.tsx | 44 +++++++++++----------------
 src/admin/pages/OfferDetail.tsx       | 27 ++++++++++++----
 src/admin/pages/Offers.tsx            |  2 +-
 src/admin/pages/OrdersReceived.tsx    | 14 +++++----
 src/admin/pages/ReceivedInvoices.tsx  |  2 +-
 6 files changed, 69 insertions(+), 62 deletions(-)

diff --git a/src/admin/pages/InvoiceDetail.tsx b/src/admin/pages/InvoiceDetail.tsx
index c6ef87d..ec7905c 100644
--- a/src/admin/pages/InvoiceDetail.tsx
+++ b/src/admin/pages/InvoiceDetail.tsx
@@ -62,6 +62,7 @@ import {
   DateField,
   Field,
   StatusChip,
+  CheckboxField,
   ConfirmDialog,
   EmptyState,
   LoadingState,
@@ -1146,7 +1147,7 @@ export default function InvoiceDetail() {
             <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
               <Button
                 component={RouterLink}
-                to="/invoices"
+                to="/invoices?tab=issued"
                 variant="outlined"
                 color="inherit"
                 startIcon={BackIcon}
@@ -1454,11 +1455,11 @@ export default function InvoiceDetail() {
                       <TableCell sx={{ width: "5rem" }} align="center">
                         Jednotka
                       </TableCell>
-                      <TableCell sx={{ width: "8rem" }} align="right">
+                      <TableCell sx={{ width: "8rem" }} align="center">
                         Jedn. cena
                       </TableCell>
                       <TableCell sx={{ width: "4rem" }} align="center">
-                        %DPH
+                        DPH
                       </TableCell>
                       <TableCell sx={{ width: "9rem" }} align="right">
                         Celkem
@@ -1665,7 +1666,7 @@ export default function InvoiceDetail() {
           <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
             <Button
               component={RouterLink}
-              to="/invoices"
+              to="/invoices?tab=issued"
               variant="outlined"
               color="inherit"
               startIcon={BackIcon}
@@ -1748,8 +1749,16 @@ export default function InvoiceDetail() {
                     <Button
                       key={status}
                       onClick={() => setStatusConfirm({ show: true, status })}
-                      variant={status === "paid" ? "contained" : "outlined"}
-                      color={status === "paid" ? "primary" : "inherit"}
+                      variant={
+                        status === "cancelled" || status === "stornovana"
+                          ? "outlined"
+                          : "contained"
+                      }
+                      color={
+                        status === "cancelled" || status === "stornovana"
+                          ? "error"
+                          : "primary"
+                      }
                       disabled={statusChanging === status}
                     >
                       {statusChanging === status ? (
@@ -1925,28 +1934,17 @@ export default function InvoiceDetail() {
               />
             </Field>
             <Field label="DPH">
-              <Box
-                component="label"
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 0.75,
-                  whiteSpace: "nowrap",
-                  cursor: "pointer",
-                  height: 40,
-                }}
-              >
-                <input
-                  type="checkbox"
+              <Box sx={{ display: "flex", alignItems: "center", height: 40 }}>
+                <CheckboxField
+                  label="Uplatnit DPH"
                   checked={!!form.apply_vat}
-                  onChange={(e) =>
+                  onChange={(v) =>
                     setForm((prev) => ({
                       ...prev,
-                      apply_vat: e.target.checked ? 1 : 0,
+                      apply_vat: v ? 1 : 0,
                     }))
                   }
                 />
-                <Box component="span">Uplatnit DPH</Box>
               </Box>
             </Field>
           </Box>
diff --git a/src/admin/pages/IssuedOrderDetail.tsx b/src/admin/pages/IssuedOrderDetail.tsx
index 60977e0..298f078 100644
--- a/src/admin/pages/IssuedOrderDetail.tsx
+++ b/src/admin/pages/IssuedOrderDetail.tsx
@@ -43,6 +43,7 @@ import apiFetch from "../utils/api";
 import { jsonQuery } from "../lib/apiAdapter";
 import { offerCustomersOptions, type Customer } from "../lib/queries/offers";
 import { issuedOrderDetailOptions } from "../lib/queries/issued-orders";
+import { companySettingsOptions } from "../lib/queries/settings";
 import { formatCurrency, todayLocalStr } from "../utils/formatters";
 import { normalizeDateStr } from "../utils/attendanceHelpers";
 import {
@@ -53,6 +54,7 @@ import {
   DateField,
   Field,
   StatusChip,
+  CheckboxField,
   ConfirmDialog,
   LoadingState,
   PageEnter,
@@ -80,10 +82,7 @@ const VAT_OPTIONS = [0, 10, 12, 15, 21].map((v) => ({
   label: `${v}%`,
 }));
 
-const CURRENCY_OPTIONS = ["CZK", "EUR", "USD", "GBP"].map((c) => ({
-  value: c,
-  label: c,
-}));
+const CURRENCY_FALLBACK = ["CZK", "EUR", "USD", "GBP"];
 
 const BackIcon = (
   <svg
@@ -548,6 +547,13 @@ export default function IssuedOrderDetail() {
   const customersQuery = useQuery(offerCustomersOptions());
   const customers = customersQuery.data ?? [];
 
+  const companySettings = useQuery(companySettingsOptions()).data;
+  // Configurable currency list from company settings (falls back to the
+  // built-in list when settings are empty) — matches Offers/Invoices.
+  const currencyOptions = (
+    companySettings?.available_currencies || CURRENCY_FALLBACK
+  ).map((c) => ({ value: c, label: c }));
+
   const detailQuery = useQuery(issuedOrderDetailOptions(id));
   const detail = detailQuery.data ?? null;
 
@@ -1000,7 +1006,7 @@ export default function IssuedOrderDetail() {
                 onChange={(val) =>
                   setForm((prev) => ({ ...prev, currency: val }))
                 }
-                options={CURRENCY_OPTIONS}
+                options={currencyOptions}
               />
             </Field>
             <Field label="Jazyk">
@@ -1027,29 +1033,18 @@ export default function IssuedOrderDetail() {
               />
             </Field>
             <Field label="DPH">
-              <Box
-                component="label"
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 0.75,
-                  whiteSpace: "nowrap",
-                  cursor: editable ? "pointer" : "default",
-                  height: 40,
-                }}
-              >
-                <input
-                  type="checkbox"
+              <Box sx={{ display: "flex", alignItems: "center", height: 40 }}>
+                <CheckboxField
+                  label="Uplatnit DPH"
                   checked={form.apply_vat}
                   disabled={!editable}
-                  onChange={(e) =>
+                  onChange={(v) =>
                     setForm((prev) => ({
                       ...prev,
-                      apply_vat: e.target.checked,
+                      apply_vat: v,
                     }))
                   }
                 />
-                <Box component="span">Uplatnit DPH</Box>
               </Box>
             </Field>
           </Box>
@@ -1057,11 +1052,8 @@ export default function IssuedOrderDetail() {
           <Field label="Vystavil">
             <TextField
               value={form.issued_by}
-              disabled={!editable}
-              onChange={(e) =>
-                setForm((prev) => ({ ...prev, issued_by: e.target.value }))
-              }
-              placeholder="Jméno"
+              InputProps={{ readOnly: true }}
+              sx={{ "& .MuiInputBase-root": { bgcolor: "action.hover" } }}
             />
           </Field>
         </Card>
diff --git a/src/admin/pages/OfferDetail.tsx b/src/admin/pages/OfferDetail.tsx
index d34e903..cd1fe6a 100644
--- a/src/admin/pages/OfferDetail.tsx
+++ b/src/admin/pages/OfferDetail.tsx
@@ -335,7 +335,7 @@ function SortableItemRow({
             InputProps={{ readOnly }}
           />
           <TextField
-            label="Cena/ks"
+            label="Jedn. cena"
             type="number"
             value={item.unit_price}
             onChange={(e) => onUpdate("unit_price", parseFloat(e.target.value))}
@@ -1167,14 +1167,25 @@ export default function OfferDetail() {
               <Button
                 onClick={() => setInvalidateConfirm(true)}
                 variant="outlined"
-                color="inherit"
+                color="error"
               >
                 Zneplatnit
               </Button>
             )}
             {!readOnly && (
               <Button onClick={handleSave} disabled={saving}>
-                {saving ? "Ukládání..." : "Uložit"}
+                {saving ? (
+                  <>
+                    <CircularProgress
+                      size={16}
+                      color="inherit"
+                      sx={{ mr: 1 }}
+                    />
+                    Ukládání...
+                  </>
+                ) : (
+                  "Uložit"
+                )}
               </Button>
             )}
             {canDelete && hasPermission("offers.delete") && (
@@ -1513,16 +1524,20 @@ export default function OfferDetail() {
                         #
                       </TableCell>
                       <TableCell>Popis</TableCell>
-                      <TableCell sx={{ width: "5rem" }}>Množství</TableCell>
+                      <TableCell sx={{ width: "5.5rem" }} align="center">
+                        Množství
+                      </TableCell>
                       <TableCell sx={{ width: "5rem" }}>Jednotka</TableCell>
-                      <TableCell sx={{ width: "8rem" }}>Cena/ks</TableCell>
+                      <TableCell sx={{ width: "8rem" }} align="center">
+                        Jedn. cena
+                      </TableCell>
                       <TableCell sx={{ width: "4rem" }} align="center">
                         V ceně
                       </TableCell>
                       <TableCell sx={{ width: "8rem" }} align="right">
                         Celkem
                       </TableCell>
-                      {!readOnly && <TableCell sx={{ width: "3rem" }} />}
+                      {!readOnly && <TableCell sx={{ width: "2.5rem" }} />}
                     </TableRow>
                   </TableHead>
                   <TableBody>
diff --git a/src/admin/pages/Offers.tsx b/src/admin/pages/Offers.tsx
index 44b939c..120e243 100644
--- a/src/admin/pages/Offers.tsx
+++ b/src/admin/pages/Offers.tsx
@@ -741,7 +741,7 @@ export default function Offers() {
         }
       />
 
-      <Box sx={{ mb: 2.5 }}>
+      <Box sx={{ display: "flex", justifyContent: "center", mb: 2.5 }}>
         <Tabs
           value={statusFilter}
           onChange={(v) => {
diff --git a/src/admin/pages/OrdersReceived.tsx b/src/admin/pages/OrdersReceived.tsx
index 78d0582..6cdbc5d 100644
--- a/src/admin/pages/OrdersReceived.tsx
+++ b/src/admin/pages/OrdersReceived.tsx
@@ -16,6 +16,7 @@ import {
   orderNextNumberOptions,
 } from "../lib/queries/orders";
 import { offerCustomersOptions } from "../lib/queries/offers";
+import { companySettingsOptions } from "../lib/queries/settings";
 import { useApiMutation } from "../lib/queries/mutations";
 import {
   Card,
@@ -186,6 +187,12 @@ export default function OrdersReceived({
     ...orderNextNumberOptions(),
     enabled: createOpen,
   });
+  const companySettings = useQuery(companySettingsOptions()).data;
+  // Configurable currency list from company settings (falls back to the
+  // built-in list when settings are empty) — matches Offers/Invoices.
+  const currencyOptions = (
+    companySettings?.available_currencies || ["CZK", "EUR", "USD", "GBP"]
+  ).map((c) => ({ value: c, label: c }));
 
   const closeCreate = () => {
     setCreateOpen(false);
@@ -556,12 +563,7 @@ export default function OrdersReceived({
                 onChange={(value) =>
                   setCreateForm({ ...createForm, currency: value })
                 }
-                options={[
-                  { value: "CZK", label: "CZK" },
-                  { value: "EUR", label: "EUR" },
-                  { value: "USD", label: "USD" },
-                  { value: "GBP", label: "GBP" },
-                ]}
+                options={currencyOptions}
               />
             </Field>
           </Box>
diff --git a/src/admin/pages/ReceivedInvoices.tsx b/src/admin/pages/ReceivedInvoices.tsx
index 64b3ecc..0b5fc9b 100644
--- a/src/admin/pages/ReceivedInvoices.tsx
+++ b/src/admin/pages/ReceivedInvoices.tsx
@@ -630,7 +630,7 @@ export default function ReceivedInvoices({
     },
     {
       key: "amount",
-      header: "Částka",
+      header: "Celkem",
       width: "14%",
       align: "right",
       sortKey: "amount",