From 2878041687c2ec23f565a667f02bee91611d282d Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Sun, 7 Jun 2026 08:15:21 +0200
Subject: [PATCH] feat(mui): migrate OrderDetail onto MUI kit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/admin/pages/OrderDetail.tsx | 882 ++++++++++++++++++--------------
 1 file changed, 487 insertions(+), 395 deletions(-)

diff --git a/src/admin/pages/OrderDetail.tsx b/src/admin/pages/OrderDetail.tsx
index c4fd08b..38f83c9 100644
--- a/src/admin/pages/OrderDetail.tsx
+++ b/src/admin/pages/OrderDetail.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef, type ReactNode } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import DOMPurify from "dompurify";
 import { useQuery } from "@tanstack/react-query";
 import {
@@ -12,17 +12,32 @@ import {
 import { useApiMutation } from "../lib/queries/mutations";
 import { useAlert } from "../context/AlertContext";
 import { useAuth } from "../context/AuthContext";
-import { useParams, useNavigate, Link } from "react-router-dom";
+import { useParams, useNavigate, Link as RouterLink } from "react-router-dom";
 import { motion } from "framer-motion";
-import ConfirmModal from "../components/ConfirmModal";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
 import OrderConfirmationModal from "../components/OrderConfirmationModal";
-import FormField from "../components/FormField";
 import Forbidden from "../components/Forbidden";
 import apiFetch from "../utils/api";
 import { formatCurrency, formatDate } from "../utils/formatters";
+import {
+  Button,
+  Card,
+  Field,
+  TextField,
+  DataTable,
+  StatusChip,
+  CheckboxField,
+  ConfirmDialog,
+  EmptyState,
+  LoadingState,
+  type DataColumn,
+} from "../ui";
 
 const API_BASE = "/api/admin";
 
+type ItemRow = OrderItem & { _index: number };
+
 const STATUS_LABELS: Record<string, string> = {
   prijata: "Přijatá",
   v_realizaci: "V realizaci",
@@ -30,11 +45,14 @@ const STATUS_LABELS: Record<string, string> = {
   stornovana: "Stornována",
 };
 
-const STATUS_CLASSES: Record<string, string> = {
-  prijata: "admin-badge-order-prijata",
-  v_realizaci: "admin-badge-order-realizace",
-  dokoncena: "admin-badge-order-dokoncena",
-  stornovana: "admin-badge-order-stornovana",
+const STATUS_COLORS: Record<
+  string,
+  "default" | "success" | "error" | "warning" | "info"
+> = {
+  prijata: "info",
+  v_realizaci: "warning",
+  dokoncena: "success",
+  stornovana: "error",
 };
 
 const TRANSITION_LABELS: Record<string, string> = {
@@ -42,10 +60,32 @@ const TRANSITION_LABELS: Record<string, string> = {
   dokoncena: "Dokončit",
 };
 
-const TRANSITION_CLASSES: Record<string, string> = {
-  v_realizaci: "admin-btn admin-btn-primary",
-  dokoncena: "admin-btn admin-btn-primary",
-};
+const BackIcon = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M19 12H5M12 19l-7-7 7-7" />
+  </svg>
+);
+
+const FileIcon = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+  </svg>
+);
 
 export default function OrderDetail() {
   const { id } = useParams();
@@ -266,470 +306,534 @@ export default function OrderDetail() {
     }
   };
 
+  if (loading) {
+    return <LoadingState />;
+  }
+
   if (!order) return null;
 
-  if (loading) {
-    return (
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
-  }
+  const itemRows: ItemRow[] = (order.items ?? []).map((item, index) => ({
+    ...item,
+    _index: index,
+  }));
+
+  const itemColumns: DataColumn<ItemRow>[] = [
+    {
+      key: "index",
+      header: "#",
+      width: "2.5rem",
+      render: (item) => (
+        <Box component="span" sx={{ color: "text.secondary", fontWeight: 500 }}>
+          {item._index + 1}
+        </Box>
+      ),
+    },
+    {
+      key: "description",
+      header: "Popis",
+      render: (item) => (
+        <Box>
+          <Typography variant="body2" sx={{ fontWeight: 500 }}>
+            {item.description || "—"}
+          </Typography>
+          {item.item_description && (
+            <Typography
+              variant="caption"
+              color="text.secondary"
+              sx={{ display: "block", mt: 0.25 }}
+            >
+              {item.item_description}
+            </Typography>
+          )}
+        </Box>
+      ),
+    },
+    {
+      key: "quantity",
+      header: "Množství",
+      width: "5.5rem",
+      render: (item) => String(item.quantity),
+    },
+    {
+      key: "unit",
+      header: "Jednotka",
+      width: "5.5rem",
+      render: (item) => item.unit || "—",
+    },
+    {
+      key: "unit_price",
+      header: "Jedn. cena",
+      width: "8rem",
+      align: "right",
+      mono: true,
+      render: (item) => formatCurrency(item.unit_price, order.currency),
+    },
+    {
+      key: "is_included_in_total",
+      header: "V ceně",
+      width: "4rem",
+      render: (item) => (Number(item.is_included_in_total) ? "Ano" : "Ne"),
+    },
+    {
+      key: "total",
+      header: "Celkem",
+      width: "9rem",
+      align: "right",
+      mono: true,
+      bold: true,
+      render: (item) =>
+        formatCurrency(
+          (Number(item.quantity) || 0) * (Number(item.unit_price) || 0),
+          order.currency,
+        ),
+    },
+  ];
+
   return (
-    <div>
+    <Box>
       {/* Header */}
       <motion.div
-        className="admin-page-header"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25 }}
       >
-        <div className="flex-row gap-4">
-          <Link
-            to="/orders"
-            className="admin-btn-icon"
-            title="Zpět"
-            aria-label="Zpět"
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "space-between",
+            flexWrap: "wrap",
+            gap: 2,
+            mb: 3,
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+            <Button
+              component={RouterLink}
+              to="/orders"
+              variant="outlined"
+              color="inherit"
+              startIcon={BackIcon}
+            >
+              Zpět
+            </Button>
+            <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
+              <Typography variant="h4">
+                Objednávka {order.order_number}
+              </Typography>
+              <StatusChip
+                label={STATUS_LABELS[order.status] || order.status}
+                color={STATUS_COLORS[order.status] || "default"}
+              />
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              flexShrink: 0,
+              flexWrap: "wrap",
+            }}
           >
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <path d="M19 12H5M12 19l-7-7 7-7" />
-            </svg>
-          </Link>
-          <div>
-            <h1 className="admin-page-title flex-row-gap">
-              <span>Objednávka {order.order_number}</span>
-              <span
-                className={`admin-badge ${STATUS_CLASSES[order.status] || ""}`}
+            {order.invoice ? (
+              <Button
+                component={RouterLink}
+                to={`/invoices/${order.invoice.id}`}
+                variant="outlined"
+                color="inherit"
+                startIcon={FileIcon}
               >
-                {STATUS_LABELS[order.status] || order.status}
-              </span>
-            </h1>
-          </div>
-        </div>
-        <div className="admin-page-actions">
-          {order.invoice ? (
-            <Link
-              to={`/invoices/${order.invoice.id}`}
-              className="admin-btn admin-btn-secondary"
-            >
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14 2 14 8 20 8" />
-              </svg>
-              Faktura {order.invoice.invoice_number}
-            </Link>
-          ) : (
-            hasPermission("invoices.create") &&
-            order.status === "dokoncena" && (
-              <Link
-                to={`/invoices/new?fromOrder=${order.id}`}
-                className="admin-btn admin-btn-secondary"
-              >
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
+                Faktura {order.invoice.invoice_number}
+              </Button>
+            ) : (
+              hasPermission("invoices.create") &&
+              order.status === "dokoncena" && (
+                <Button
+                  component={RouterLink}
+                  to={`/invoices/new?fromOrder=${order.id}`}
+                  variant="outlined"
+                  color="inherit"
+                  startIcon={FileIcon}
                 >
-                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                  <polyline points="14 2 14 8 20 8" />
-                </svg>
-                Vytvořit fakturu
-              </Link>
-            )
-          )}
-          {hasPermission("orders.export") && (
-            <button
-              onClick={() => setShowConfirmationModal(true)}
-              className="admin-btn admin-btn-secondary"
-              disabled={confirmationLoading}
-            >
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
+                  Vytvořit fakturu
+                </Button>
+              )
+            )}
+            {hasPermission("orders.export") && (
+              <Button
+                variant="outlined"
+                color="inherit"
+                startIcon={FileIcon}
+                onClick={() => setShowConfirmationModal(true)}
+                disabled={confirmationLoading}
               >
-                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14 2 14 8 20 8" />
-              </svg>
-              Potvrzení objednávky
-            </button>
-          )}
-          {hasPermission("orders.edit") &&
-            order.valid_transitions?.filter((s) => s !== "stornovana").length! >
-              0 &&
-            order
-              .valid_transitions!.filter((s) => s !== "stornovana")
-              .map((status) => (
-                <button
-                  key={status}
-                  onClick={() => setStatusConfirm({ show: true, status })}
-                  className={
-                    TRANSITION_CLASSES[status] ||
-                    "admin-btn admin-btn-secondary"
-                  }
-                  disabled={statusChanging === status}
-                >
-                  {statusChanging === status ? (
-                    <div className="admin-spinner admin-spinner-sm" />
-                  ) : (
-                    TRANSITION_LABELS[status] || status
-                  )}
-                </button>
-              ))}
-          {hasPermission("orders.delete") && (
-            <button
-              onClick={() => setDeleteConfirm(true)}
-              className="admin-btn admin-btn-primary"
-            >
-              Smazat
-            </button>
-          )}
-        </div>
+                Potvrzení objednávky
+              </Button>
+            )}
+            {hasPermission("orders.edit") &&
+              order.valid_transitions?.filter((s) => s !== "stornovana")
+                .length! > 0 &&
+              order
+                .valid_transitions!.filter((s) => s !== "stornovana")
+                .map((status) => (
+                  <Button
+                    key={status}
+                    onClick={() => setStatusConfirm({ show: true, status })}
+                    disabled={statusChanging === status}
+                  >
+                    {statusChanging === status
+                      ? "Zpracovávám…"
+                      : TRANSITION_LABELS[status] || status}
+                  </Button>
+                ))}
+            {hasPermission("orders.delete") && (
+              <Button
+                variant="outlined"
+                color="error"
+                onClick={() => setDeleteConfirm(true)}
+              >
+                Smazat
+              </Button>
+            )}
+          </Box>
+        </Box>
       </motion.div>
 
       {/* Info card */}
       <motion.div
-        className="admin-card"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.06 }}
       >
-        <div className="admin-card-body">
-          <h3 className="admin-card-title">Informace</h3>
-          <div className="admin-form-row admin-form-row-3 mb-2">
-            <FormField label="Nabídka">
-              <div className="admin-mono fw-500">
-                <Link
+        <Card sx={{ mb: 3 }}>
+          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+            Informace
+          </Typography>
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
+              gap: 2,
+            }}
+          >
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Nabídka
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{
+                  fontFamily: "'DM Mono', Menlo, monospace",
+                  fontWeight: 500,
+                }}
+              >
+                <Box
+                  component={RouterLink}
                   to={`/offers/${order.quotation_id}`}
-                  className="link-accent"
+                  sx={{
+                    color: "primary.main",
+                    textDecoration: "none",
+                    "&:hover": { textDecoration: "underline" },
+                  }}
                 >
                   {order.quotation_number}
-                </Link>
+                </Box>
                 {order.project_code && (
-                  <span
-                    className="text-tertiary"
-                    style={{ marginLeft: "0.5rem" }}
-                  >
+                  <Box component="span" sx={{ color: "text.secondary", ml: 1 }}>
                     ({order.project_code})
-                  </span>
+                  </Box>
                 )}
-              </div>
-            </FormField>
-            <FormField label="Projekt">
-              <div className="admin-mono fw-500">
+              </Typography>
+            </Box>
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Projekt
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{
+                  fontFamily: "'DM Mono', Menlo, monospace",
+                  fontWeight: 500,
+                }}
+              >
                 {order.project ? (
-                  <Link
+                  <Box
+                    component={RouterLink}
                     to={`/projects/${order.project.id}`}
-                    className="link-accent"
+                    sx={{
+                      color: "primary.main",
+                      textDecoration: "none",
+                      "&:hover": { textDecoration: "underline" },
+                    }}
                   >
                     {order.project.project_number} — {order.project.name}
-                  </Link>
+                  </Box>
                 ) : (
                   "—"
                 )}
-              </div>
-            </FormField>
-            <FormField label="Zákazník">
-              <div className="admin-mono fw-500">
+              </Typography>
+            </Box>
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Zákazník
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{
+                  fontFamily: "'DM Mono', Menlo, monospace",
+                  fontWeight: 500,
+                }}
+              >
                 {order.customer_name || "—"}
-              </div>
-            </FormField>
-          </div>
-          <div className="admin-form-row admin-form-row-3 mb-2">
-            <FormField label="Číslo obj. zákazníka">
-              <div className="admin-mono">
+              </Typography>
+            </Box>
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Číslo obj. zákazníka
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
+              >
                 {order.customer_order_number || "—"}
-              </div>
-            </FormField>
-            <FormField label="Měna">
-              <div className="admin-mono">{order.currency}</div>
-            </FormField>
-          </div>
-          <div className="admin-form-row admin-form-row-3 mb-2">
-            <FormField label="Datum vytvoření">
-              <div className="admin-mono">{formatDate(order.created_at)}</div>
-            </FormField>
-            <FormField label="Příloha">
-              <div>
+              </Typography>
+            </Box>
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Měna
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
+              >
+                {order.currency}
+              </Typography>
+            </Box>
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Datum vytvoření
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
+              >
+                {formatDate(order.created_at)}
+              </Typography>
+            </Box>
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Příloha
+              </Typography>
+              <Box sx={{ mt: 0.5 }}>
                 {order.attachment_name ? (
-                  <button
+                  <Button
+                    variant="outlined"
+                    color="inherit"
+                    startIcon={FileIcon}
                     onClick={handleViewAttachment}
-                    className="admin-btn admin-btn-secondary admin-btn-sm"
-                    style={{
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: "0.4rem",
-                    }}
                     disabled={attachmentLoading}
                   >
-                    {attachmentLoading ? (
-                      <div className="admin-spinner admin-spinner-sm" />
-                    ) : (
-                      <svg
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                      >
-                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                        <polyline points="14 2 14 8 20 8" />
-                      </svg>
-                    )}
                     {order.attachment_name}
-                  </button>
+                  </Button>
                 ) : (
-                  "—"
+                  <Typography variant="body2">—</Typography>
                 )}
-              </div>
-            </FormField>
-          </div>
-        </div>
+              </Box>
+            </Box>
+          </Box>
+        </Card>
       </motion.div>
 
       {/* Items (read-only) */}
       <motion.div
-        className="admin-card"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.12 }}
       >
-        <div className="admin-card-body">
-          <h3 className="admin-card-title">Položky</h3>
-          {order.items?.length > 0 ? (
-            <div className="admin-table-responsive">
-              <table className="admin-table">
-                <thead>
-                  <tr>
-                    <th style={{ width: "2.5rem", textAlign: "center" }}>#</th>
-                    <th>Popis</th>
-                    <th style={{ width: "5.5rem", textAlign: "center" }}>
-                      Množství
-                    </th>
-                    <th style={{ width: "5.5rem", textAlign: "center" }}>
-                      Jednotka
-                    </th>
-                    <th
-                      style={{
-                        width: "8rem",
-                        textAlign: "right",
-                        whiteSpace: "nowrap",
-                      }}
-                    >
-                      Jedn. cena
-                    </th>
-                    <th style={{ width: "4rem", textAlign: "center" }}>
-                      V ceně
-                    </th>
-                    <th
-                      style={{
-                        width: "9rem",
-                        textAlign: "right",
-                        whiteSpace: "nowrap",
-                      }}
-                    >
-                      Celkem
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {order.items.map((item, index) => {
-                    const lineTotal =
-                      (Number(item.quantity) || 0) *
-                      (Number(item.unit_price) || 0);
-                    return (
-                      <tr key={item.id || index}>
-                        <td
-                          style={{
-                            color: "var(--text-tertiary)",
-                            textAlign: "center",
-                            fontWeight: 500,
-                          }}
-                        >
-                          {index + 1}
-                        </td>
-                        <td>
-                          <div className="fw-500">
-                            {item.description || "—"}
-                          </div>
-                          {item.item_description && (
-                            <div
-                              style={{
-                                fontSize: "0.8rem",
-                                color: "var(--text-tertiary)",
-                                marginTop: "0.25rem",
-                              }}
-                            >
-                              {item.item_description}
-                            </div>
-                          )}
-                        </td>
-                        <td style={{ textAlign: "center" }}>{item.quantity}</td>
-                        <td style={{ textAlign: "center" }}>
-                          {item.unit || "—"}
-                        </td>
-                        <td
-                          className="admin-mono"
-                          style={{ textAlign: "right", whiteSpace: "nowrap" }}
-                        >
-                          {formatCurrency(item.unit_price, order.currency)}
-                        </td>
-                        <td style={{ textAlign: "center" }}>
-                          {Number(item.is_included_in_total) ? "Ano" : "Ne"}
-                        </td>
-                        <td
-                          className="admin-mono"
-                          style={{
-                            textAlign: "right",
-                            fontWeight: 600,
-                            whiteSpace: "nowrap",
-                          }}
-                        >
-                          {formatCurrency(lineTotal, order.currency)}
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-          ) : (
-            <p style={{ color: "var(--text-tertiary)" }}>Žádné položky.</p>
-          )}
+        <Card sx={{ mb: 3 }}>
+          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+            Položky
+          </Typography>
+          <DataTable<ItemRow>
+            columns={itemColumns}
+            rows={itemRows}
+            rowKey={(item) => item.id ?? item._index}
+            empty={<EmptyState title="Žádné položky." />}
+          />
 
           {/* Totals */}
-          <div className="admin-totals-summary">
-            <div className="admin-totals-row">
-              <span>Mezisoučet:</span>
-              <span>{formatCurrency(totals.subtotal, order.currency)}</span>
-            </div>
+          <Box
+            sx={{
+              mt: 2,
+              ml: "auto",
+              maxWidth: 360,
+              display: "flex",
+              flexDirection: "column",
+              gap: 0.5,
+            }}
+          >
+            <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+              <Typography variant="body2" color="text.secondary">
+                Mezisoučet:
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
+              >
+                {formatCurrency(totals.subtotal, order.currency)}
+              </Typography>
+            </Box>
             {Number(order.apply_vat) > 0 && (
-              <div className="admin-totals-row">
-                <span>DPH ({order.vat_rate}%):</span>
-                <span>{formatCurrency(totals.vatAmount, order.currency)}</span>
-              </div>
+              <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+                <Typography variant="body2" color="text.secondary">
+                  DPH ({order.vat_rate}%):
+                </Typography>
+                <Typography
+                  variant="body2"
+                  sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
+                >
+                  {formatCurrency(totals.vatAmount, order.currency)}
+                </Typography>
+              </Box>
             )}
-            <div className="admin-totals-row admin-totals-total">
-              <span>Celkem k úhradě:</span>
-              <span>{formatCurrency(totals.total, order.currency)}</span>
-            </div>
-          </div>
-        </div>
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                pt: 0.5,
+                mt: 0.5,
+                borderTop: 1,
+                borderColor: "divider",
+              }}
+            >
+              <Typography variant="body2" sx={{ fontWeight: 700 }}>
+                Celkem k úhradě:
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{
+                  fontFamily: "'DM Mono', Menlo, monospace",
+                  fontWeight: 700,
+                }}
+              >
+                {formatCurrency(totals.total, order.currency)}
+              </Typography>
+            </Box>
+          </Box>
+        </Card>
       </motion.div>
 
       {/* Sections (read-only) */}
       {order.sections?.length > 0 && (
         <motion.div
-          className="admin-card"
           initial={{ opacity: 0, y: 12 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.25, delay: 0.15 }}
         >
-          <div className="admin-card-body">
-            <h3 className="admin-card-title">Rozsah projektu</h3>
+          <Card sx={{ mb: 3 }}>
+            <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+              Rozsah projektu
+            </Typography>
             {order.scope_title && (
-              <div style={{ fontWeight: 500, marginBottom: "0.5rem" }}>
+              <Typography variant="body2" sx={{ fontWeight: 500, mb: 1 }}>
                 {order.scope_title}
-              </div>
+              </Typography>
             )}
             {order.scope_description && (
-              <div
-                style={{
-                  color: "var(--text-secondary)",
-                  marginBottom: "1rem",
-                }}
-              >
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                 {order.scope_description}
-              </div>
+              </Typography>
             )}
-            <div className="admin-scope-list">
+            <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
               {order.sections.map((section, index) => (
-                <div
+                <Box
                   key={section.id || index}
-                  className="admin-scope-section"
-                  style={{ cursor: "default" }}
+                  sx={{
+                    border: 1,
+                    borderColor: "divider",
+                    borderRadius: 2,
+                    overflow: "hidden",
+                  }}
                 >
-                  <div className="admin-scope-section-header">
-                    <span className="admin-scope-number">{index + 1}.</span>
-                    <span className="admin-scope-title">
+                  <Box
+                    sx={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 1,
+                      px: 2,
+                      py: 1,
+                      bgcolor: "action.hover",
+                    }}
+                  >
+                    <Typography
+                      variant="body2"
+                      color="text.secondary"
+                      sx={{ fontWeight: 600 }}
+                    >
+                      {index + 1}.
+                    </Typography>
+                    <Typography variant="body2" sx={{ fontWeight: 600 }}>
                       {(order.language === "CZ"
                         ? section.title_cz || section.title
                         : section.title || section.title_cz) ||
                         `Sekce ${index + 1}`}
-                    </span>
-                  </div>
+                    </Typography>
+                  </Box>
                   {section.content && (
-                    <div
-                      className="admin-scope-content admin-rich-text-view"
-                      style={{ padding: "1rem" }}
+                    <Box
+                      className="admin-rich-text-view"
+                      sx={{ p: 2 }}
                       dangerouslySetInnerHTML={{
                         __html: DOMPurify.sanitize(section.content),
                       }}
                     />
                   )}
-                </div>
+                </Box>
               ))}
-            </div>
-          </div>
+            </Box>
+          </Card>
         </motion.div>
       )}
 
       {/* Notes (editable) */}
       <motion.div
-        className="admin-card"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.2 }}
       >
-        <div className="admin-card-body">
-          <h3 className="admin-card-title">Poznámky</h3>
-          <FormField label="Poznámky">
-            <textarea
+        <Card sx={{ mb: 3 }}>
+          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+            Poznámky
+          </Typography>
+          <Field label="Poznámky">
+            <TextField
               value={notes}
               onChange={(e) => setNotes(e.target.value)}
-              className="admin-form-input"
-              rows={4}
+              multiline
+              minRows={4}
               placeholder="Interní poznámky k objednávce..."
+              fullWidth
               disabled={!hasPermission("orders.edit")}
             />
-          </FormField>
+          </Field>
           {hasPermission("orders.edit") && (
-            <div className="mt-2">
-              <button
+            <Box sx={{ mt: 1 }}>
+              <Button
+                variant="outlined"
+                color="inherit"
                 onClick={handleSaveNotes}
-                className="admin-btn admin-btn-secondary admin-btn-sm"
                 disabled={saving}
               >
                 {saving ? "Ukládání..." : "Uložit poznámky"}
-              </button>
-            </div>
+              </Button>
+            </Box>
           )}
-        </div>
+        </Card>
       </motion.div>
 
       {/* Status change confirmation */}
-      <ConfirmModal
+      <ConfirmDialog
         isOpen={statusConfirm.show}
         onClose={() => setStatusConfirm({ show: false, status: null })}
         onConfirm={handleStatusChange}
@@ -739,11 +843,10 @@ export default function OrderDetail() {
           TRANSITION_LABELS[statusConfirm.status || ""] || "Potvrdit"
         }
         cancelText="Zrušit"
-        type="default"
       />
 
       {/* Delete confirmation */}
-      <ConfirmModal
+      <ConfirmDialog
         isOpen={deleteConfirm}
         onClose={() => {
           setDeleteConfirm(false);
@@ -751,30 +854,19 @@ export default function OrderDetail() {
         }}
         onConfirm={handleDelete}
         title="Smazat objednávku"
-        message={
-          <>
-            Opravdu chcete smazat objednávku &quot;{order.order_number}&quot;?
-            Bude smazán i přidružený projekt. Tato akce je nevratná.
-            {order.project?.has_nas_folder && (
-              <label
-                className="admin-form-checkbox"
-                style={{ marginTop: "1rem", display: "flex" }}
-              >
-                <input
-                  type="checkbox"
-                  checked={deleteFiles}
-                  onChange={(e) => setDeleteFiles(e.target.checked)}
-                />
-                <span>Smazat i soubory projektu na disku</span>
-              </label>
-            )}
-          </>
-        }
+        message={`Opravdu chcete smazat objednávku „${order.order_number}"? Bude smazán i přidružený projekt. Tato akce je nevratná.`}
         confirmText="Smazat"
-        cancelText="Zrušit"
-        type="danger"
+        confirmVariant="danger"
         loading={deleting}
-      />
+      >
+        {order.project?.has_nas_folder && (
+          <CheckboxField
+            label="Smazat i soubory projektu na disku"
+            checked={deleteFiles}
+            onChange={setDeleteFiles}
+          />
+        )}
+      </ConfirmDialog>
 
       {/* Order confirmation PDF modal */}
       {order && (
@@ -795,6 +887,6 @@ export default function OrderDetail() {
           applyVat={!!order.apply_vat}
         />
       )}
-    </div>
+    </Box>
   );
 }