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>
2026-06-09 16:49:31 +02:00
parent e868ecf769
commit 9fe5113c5b
6 changed files with 69 additions and 62 deletions
--- 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>
--- 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>
--- 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>
--- 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) => {
--- 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>
--- 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",