feat(orders): invoices-style landing — month selector + Vydane-first tabs, content-only tab bodies

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-09 13:33:36 +02:00
parent 162f9b9fdf
commit 3d3df6db85
3 changed files with 210 additions and 109 deletions
--- a/src/admin/pages/IssuedOrders.tsx
+++ b/src/admin/pages/IssuedOrders.tsx
@@ -5,7 +5,7 @@ import IconButton from "@mui/material/IconButton";
 import { useAlert } from "../context/AlertContext";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
-import { formatCurrency, formatDate, czechPlural } from "../utils/formatters";
+import { formatCurrency, formatDate } from "../utils/formatters";
 import useTableSort from "../hooks/useTableSort";
 import useDebounce from "../hooks/useDebounce";
 import { usePaginatedQuery } from "../hooks/usePaginatedQuery";
@@ -16,7 +16,6 @@ import {
  type IssuedOrder,
 } from "../lib/queries/issued-orders";
 import {
-  Button,
  Card,
  DataTable,
  Pagination,
@@ -24,8 +23,6 @@ import {
  TextField,
  Select,
  StatusChip,
-  PageHeader,
-  PageEnter,
  FilterBar,
  EmptyState,
  LoadingState,
@@ -58,19 +55,6 @@ const STATUS_OPTIONS = [
  ...Object.entries(STATUS_LABELS).map(([value, label]) => ({ value, label })),
 ];

-const PlusIcon = (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-  >
-    <line x1="12" y1="5" x2="12" y2="19" />
-    <line x1="5" y1="12" x2="19" y2="12" />
-  </svg>
-);
 const ViewIcon = (
  <svg
    width="18"
@@ -115,7 +99,12 @@ const DeleteIcon = (
  </svg>
 );

-export default function IssuedOrders() {
+interface IssuedOrdersProps {
+  month: number;
+  year: number;
+}
+
+export default function IssuedOrders({ month, year }: IssuedOrdersProps) {
  const alert = useAlert();
  const { hasPermission } = useAuth();
  const navigate = useNavigate();
@@ -157,6 +146,8 @@ export default function IssuedOrders() {
      page,
      perPage: 20,
      status: status || undefined,
+      month,
+      year,
    }),
  );

@@ -199,14 +190,6 @@ export default function IssuedOrders() {
    return <LoadingState />;
  }

-  const total = pagination?.total ?? orders.length;
-  const subtitle = `${total} ${czechPlural(
-    total,
-    "objednávka",
-    "objednávky",
-    "objednávek",
-  )}`;
-
  const columns: DataColumn<IssuedOrder>[] = [
    {
      key: "po_number",
@@ -305,22 +288,7 @@ export default function IssuedOrders() {
  ];

  return (
-    <PageEnter>
-      <PageHeader
-        title="Objednávky vydané"
-        subtitle={subtitle}
-        actions={
-          hasPermission("orders.create") ? (
-            <Button
-              startIcon={PlusIcon}
-              onClick={() => navigate("/orders/issued/new")}
-            >
-              Vytvořit objednávku vydanou
-            </Button>
-          ) : undefined
-        }
-      />
-
+    <>
      <FilterBar>
        <Box sx={{ flex: "1 1 320px" }}>
          <TextField
@@ -386,6 +354,6 @@ export default function IssuedOrders() {
        confirmVariant="danger"
        loading={deleteMutation.isPending}
      />
-    </PageEnter>
+    </>
  );
 }
--- a/src/admin/pages/Orders.tsx
+++ b/src/admin/pages/Orders.tsx
@@ -1,36 +1,187 @@
-import { lazy, Suspense } from "react";
+import { useState, lazy, Suspense } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import Box from "@mui/material/Box";
-import { useSearchParams } from "react-router-dom";
-import { Tabs, LoadingState } from "../ui";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import { useAuth } from "../context/AuthContext";
+import Forbidden from "../components/Forbidden";
+import { Button, Tabs, PageHeader, PageEnter, LoadingState } from "../ui";
 import OrdersReceived from "./OrdersReceived";

 const IssuedOrders = lazy(() => import("./IssuedOrders"));

+const MONTH_NAMES = [
+  "leden",
+  "únor",
+  "březen",
+  "duben",
+  "květen",
+  "červen",
+  "červenec",
+  "srpen",
+  "září",
+  "říjen",
+  "listopad",
+  "prosinec",
+];
+
+const PlusIcon = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+);
+const ChevronLeftIcon = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.5"
+  >
+    <polyline points="15 18 9 12 15 6" />
+  </svg>
+);
+const ChevronRightIcon = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.5"
+  >
+    <polyline points="9 18 15 12 9 6" />
+  </svg>
+);
+
 export default function Orders() {
+  const { hasPermission } = useAuth();
+  const navigate = useNavigate();
+
  const [searchParams, setSearchParams] = useSearchParams();
-  const activeTab = searchParams.get("tab") === "vydane" ? "vydane" : "prijate";
+  const activeTab =
+    searchParams.get("tab") === "prijate" ? "prijate" : "vydane";
  const setActiveTab = (tab: string) =>
    setSearchParams({ tab }, { replace: true });

+  const [createOpen, setCreateOpen] = useState(false);
+
+  const now = new Date();
+  const [statsMonth, setStatsMonth] = useState(now.getMonth() + 1);
+  const [statsYear, setStatsYear] = useState(now.getFullYear());
+
+  const isCurrentMonth =
+    statsMonth === now.getMonth() + 1 && statsYear === now.getFullYear();
+  const monthLabel = `${MONTH_NAMES[statsMonth - 1]} ${statsYear}`;
+
+  const prevMonth = () => {
+    if (statsMonth === 1) {
+      setStatsMonth(12);
+      setStatsYear((y) => y - 1);
+    } else {
+      setStatsMonth((m) => m - 1);
+    }
+  };
+
+  const nextMonth = () => {
+    if (isCurrentMonth) return;
+    if (statsMonth === 12) {
+      setStatsMonth(1);
+      setStatsYear((y) => y + 1);
+    } else {
+      setStatsMonth((m) => m + 1);
+    }
+  };
+
+  if (!hasPermission("orders.view")) return <Forbidden />;
+
  return (
-    <>
-      <Box sx={{ display: "flex", justifyContent: "center", mb: 2.5 }}>
-        <Tabs
-          value={activeTab}
-          onChange={(v) => setActiveTab(v)}
-          tabs={[
-            { value: "prijate", label: "Přijaté" },
-            { value: "vydane", label: "Vydané" },
-          ]}
-        />
+    <PageEnter>
+      <PageHeader
+        title="Objednávky"
+        actions={
+          hasPermission("orders.create") ? (
+            activeTab === "vydane" ? (
+              <Button
+                startIcon={PlusIcon}
+                onClick={() => navigate("/orders/issued/new")}
+              >
+                Vytvořit objednávku vydanou
+              </Button>
+            ) : (
+              <Button startIcon={PlusIcon} onClick={() => setCreateOpen(true)}>
+                Vytvořit objednávku
+              </Button>
+            )
+          ) : undefined
+        }
+      />
+
+      <Box>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 1,
+            mb: 2,
+          }}
+        >
+          <IconButton
+            size="small"
+            onClick={prevMonth}
+            aria-label="Předchozí měsíc"
+          >
+            {ChevronLeftIcon}
+          </IconButton>
+          <Typography
+            sx={{ minWidth: 140, textAlign: "center", fontWeight: 600 }}
+          >
+            {monthLabel}
+          </Typography>
+          <IconButton
+            size="small"
+            onClick={nextMonth}
+            disabled={isCurrentMonth}
+            aria-label="Následující měsíc"
+          >
+            {ChevronRightIcon}
+          </IconButton>
+        </Box>
+
+        <Box sx={{ display: "flex", justifyContent: "center", mb: 2.5 }}>
+          <Tabs
+            value={activeTab}
+            onChange={(v) => setActiveTab(v)}
+            tabs={[
+              { value: "vydane", label: "Vydané" },
+              { value: "prijate", label: "Přijaté" },
+            ]}
+          />
+        </Box>
      </Box>
+
      {activeTab === "vydane" ? (
        <Suspense fallback={<LoadingState />}>
-          <IssuedOrders />
+          <IssuedOrders month={statsMonth} year={statsYear} />
        </Suspense>
      ) : (
-        <OrdersReceived />
+        <OrdersReceived
+          month={statsMonth}
+          year={statsYear}
+          createOpen={createOpen}
+          setCreateOpen={setCreateOpen}
+        />
      )}
-    </>
+    </PageEnter>
  );
 }
--- a/src/admin/pages/OrdersReceived.tsx
+++ b/src/admin/pages/OrdersReceived.tsx
@@ -7,7 +7,7 @@ import { useAlert } from "../context/AlertContext";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
 import apiFetch from "../utils/api";
-import { formatCurrency, formatDate, czechPlural } from "../utils/formatters";
+import { formatCurrency, formatDate } from "../utils/formatters";
 import useTableSort from "../hooks/useTableSort";
 import useDebounce from "../hooks/useDebounce";
 import { usePaginatedQuery } from "../hooks/usePaginatedQuery";
@@ -18,7 +18,6 @@ import {
 import { offerCustomersOptions } from "../lib/queries/offers";
 import { useApiMutation } from "../lib/queries/mutations";
 import {
-  Button,
  Card,
  DataTable,
  Pagination,
@@ -30,8 +29,6 @@ import {
  StatusChip,
  CheckboxField,
  FileUpload,
-  PageHeader,
-  PageEnter,
  FilterBar,
  EmptyState,
  LoadingState,
@@ -70,19 +67,6 @@ interface Order {
  invoice_id?: number;
 }

-const PlusIcon = (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-  >
-    <line x1="12" y1="5" x2="12" y2="19" />
-    <line x1="5" y1="12" x2="19" y2="12" />
-  </svg>
-);
 const ViewIcon = (
  <svg
    width="18"
@@ -151,7 +135,19 @@ const DeleteIcon = (
  </svg>
 );

-export default function OrdersReceived() {
+interface OrdersReceivedProps {
+  month: number;
+  year: number;
+  createOpen: boolean;
+  setCreateOpen: (open: boolean) => void;
+}
+
+export default function OrdersReceived({
+  month,
+  year,
+  createOpen,
+  setCreateOpen,
+}: OrdersReceivedProps) {
  const alert = useAlert();
  const { hasPermission } = useAuth();

@@ -180,7 +176,6 @@ export default function OrdersReceived() {
    },
  });

-  const [showCreate, setShowCreate] = useState(false);
  const [createForm, setCreateForm] = useState({
    customer_id: "",
    customer_order_number: "",
@@ -201,14 +196,15 @@ export default function OrdersReceived() {

  const customersQuery = useQuery({
    ...offerCustomersOptions(),
-    enabled: showCreate,
+    enabled: createOpen,
  });
  const nextNumberQuery = useQuery({
    ...orderNextNumberOptions(),
-    enabled: showCreate,
+    enabled: createOpen,
  });

-  const openCreate = () => {
+  const closeCreate = () => {
+    setCreateOpen(false);
    setCreateForm({
      customer_id: "",
      customer_order_number: "",
@@ -223,7 +219,6 @@ export default function OrdersReceived() {
      quantity: "1",
    });
    setOrderAttachment(null);
-    setShowCreate(true);
  };

  const handleCreate = async () => {
@@ -283,7 +278,7 @@ export default function OrdersReceived() {
      const response = await apiFetch(`${API_BASE}/orders`, fetchOptions);
      const result = await response.json();
      if (result.success) {
-        setShowCreate(false);
+        closeCreate();
        alert.success(result.message || "Objednávka byla vytvořena");
        await queryClient.invalidateQueries({ queryKey: ["orders"] });
        await queryClient.invalidateQueries({ queryKey: ["projects"] });
@@ -306,7 +301,14 @@ export default function OrdersReceived() {
    isPending,
    isFetching,
  } = usePaginatedQuery<Order>(
-    orderListOptions({ search: debouncedSearch, sort, order, page }),
+    orderListOptions({
+      search: debouncedSearch,
+      sort,
+      order,
+      page,
+      month,
+      year,
+    }),
  );

  if (!hasPermission("orders.view")) return <Forbidden />;
@@ -327,14 +329,6 @@ export default function OrdersReceived() {
    return <LoadingState />;
  }

-  const total = pagination?.total ?? orders.length;
-  const subtitle = `${total} ${czechPlural(
-    total,
-    "objednávka",
-    "objednávky",
-    "objednávek",
-  )}`;
-
  const columns: DataColumn<Order>[] = [
    {
      key: "order_number",
@@ -463,19 +457,7 @@ export default function OrdersReceived() {
  ];

  return (
-    <PageEnter>
-      <PageHeader
-        title="Objednávky"
-        subtitle={subtitle}
-        actions={
-          hasPermission("orders.create") ? (
-            <Button startIcon={PlusIcon} onClick={openCreate}>
-              Vytvořit objednávku
-            </Button>
-          ) : undefined
-        }
-      />
-
+    <>
      <FilterBar>
        <Box sx={{ flex: "1 1 320px" }}>
          <TextField
@@ -537,8 +519,8 @@ export default function OrdersReceived() {
      </ConfirmDialog>

      <Modal
-        isOpen={showCreate}
-        onClose={() => setShowCreate(false)}
+        isOpen={createOpen}
+        onClose={closeCreate}
        onSubmit={handleCreate}
        title="Vytvořit objednávku bez nabídky"
        subtitle={`Číslo objednávky: ${
@@ -699,6 +681,6 @@ export default function OrdersReceived() {
          onChange={(v) => setCreateForm({ ...createForm, create_project: v })}
        />
      </Modal>
-    </PageEnter>
+    </>
  );
 }