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>

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>
+    </>
   );
 }

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 Typography from "@mui/material/Typography";
-import { Tabs, LoadingState } from "../ui";
+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 (
-    <>
+    <PageEnter>
-      <Box sx={{ display: "flex", justifyContent: "center", mb: 2.5 }}>
+      <PageHeader
-        <Tabs
+        title="Objednávky"
-          value={activeTab}
+        actions={
-          onChange={(v) => setActiveTab(v)}
+          hasPermission("orders.create") ? (
-          tabs={[
+            activeTab === "vydane" ? (
-            { value: "prijate", label: "Přijaté" },
+              <Button
-            { value: "vydane", label: "Vydané" },
+                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>
   );
 }

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}
+        isOpen={createOpen}
-        onClose={() => setShowCreate(false)}
+        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>
+    </>
   );
 }