feat(mui): migrate WarehouseInventoryDetail onto MUI kit
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
@@ -1,23 +1,38 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useParams, Link } from "react-router-dom";
|
import { useParams, Link as RouterLink } from "react-router-dom";
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import Box from "@mui/material/Box";
|
||||||
|
import Typography from "@mui/material/Typography";
|
||||||
import { useAlert } from "../context/AlertContext";
|
import { useAlert } from "../context/AlertContext";
|
||||||
import { useAuth } from "../context/AuthContext";
|
import { useAuth } from "../context/AuthContext";
|
||||||
import Forbidden from "../components/Forbidden";
|
import Forbidden from "../components/Forbidden";
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import ConfirmModal from "../components/ConfirmModal";
|
|
||||||
import FormField from "../components/FormField";
|
|
||||||
|
|
||||||
import { formatDate } from "../utils/formatters";
|
import { formatDate } from "../utils/formatters";
|
||||||
import {
|
import {
|
||||||
warehouseInventoryDetailOptions,
|
warehouseInventoryDetailOptions,
|
||||||
type WarehouseInventorySession,
|
type WarehouseInventorySession,
|
||||||
|
type WarehouseInventoryItem,
|
||||||
} from "../lib/queries/warehouse";
|
} from "../lib/queries/warehouse";
|
||||||
import { useApiMutation } from "../lib/queries/mutations";
|
import { useApiMutation } from "../lib/queries/mutations";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
DataTable,
|
||||||
|
StatusChip,
|
||||||
|
EmptyState,
|
||||||
|
LoadingState,
|
||||||
|
PageHeader,
|
||||||
|
ConfirmDialog,
|
||||||
|
type DataColumn,
|
||||||
|
} from "../ui";
|
||||||
|
|
||||||
const STATUS_BADGE: Record<string, string> = {
|
const STATUS_COLOR: Record<
|
||||||
DRAFT: "admin-badge-warning",
|
string,
|
||||||
CONFIRMED: "admin-badge-active",
|
"default" | "success" | "error" | "warning" | "info"
|
||||||
|
> = {
|
||||||
|
DRAFT: "warning",
|
||||||
|
CONFIRMED: "success",
|
||||||
};
|
};
|
||||||
|
|
||||||
const STATUS_LABEL: Record<string, string> = {
|
const STATUS_LABEL: Record<string, string> = {
|
||||||
@@ -25,6 +40,19 @@ const STATUS_LABEL: Record<string, string> = {
|
|||||||
CONFIRMED: "Potvrzeno",
|
CONFIRMED: "Potvrzeno",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
|
||||||
export default function WarehouseInventoryDetail() {
|
export default function WarehouseInventoryDetail() {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
const alert = useAlert();
|
const alert = useAlert();
|
||||||
@@ -65,206 +93,222 @@ export default function WarehouseInventoryDetail() {
|
|||||||
const confirming = confirmMutation.isPending;
|
const confirming = confirmMutation.isPending;
|
||||||
|
|
||||||
if (isPending) {
|
if (isPending) {
|
||||||
return (
|
return <LoadingState />;
|
||||||
<div className="admin-loading">
|
|
||||||
<div className="admin-spinner" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error || !session) {
|
if (error || !session) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<Box>
|
||||||
<div className="admin-page-header">
|
<PageHeader
|
||||||
<div>
|
title="Inventura"
|
||||||
<Link
|
actions={
|
||||||
|
<Button
|
||||||
|
component={RouterLink}
|
||||||
to="/warehouse/inventory"
|
to="/warehouse/inventory"
|
||||||
className="admin-btn-icon"
|
variant="outlined"
|
||||||
title="Zpět na seznam"
|
color="inherit"
|
||||||
|
startIcon={BackIcon}
|
||||||
>
|
>
|
||||||
<svg
|
Zpět
|
||||||
width="20"
|
</Button>
|
||||||
height="20"
|
}
|
||||||
viewBox="0 0 24 24"
|
/>
|
||||||
fill="none"
|
<Card>
|
||||||
stroke="currentColor"
|
<EmptyState title="Inventura nebyla nalezena." />
|
||||||
strokeWidth="2"
|
</Card>
|
||||||
>
|
</Box>
|
||||||
<path d="M19 12H5M12 19l-7-7 7-7" />
|
|
||||||
</svg>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="admin-card">
|
|
||||||
<div className="admin-card-body">
|
|
||||||
<div className="admin-empty-state">
|
|
||||||
<p>Inventura nebyla nalezena.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const s = session as WarehouseInventorySession;
|
const s = session as WarehouseInventorySession;
|
||||||
const items = s.items ?? [];
|
const items = s.items ?? [];
|
||||||
|
|
||||||
|
const itemColumns: DataColumn<WarehouseInventoryItem>[] = [
|
||||||
|
{
|
||||||
|
key: "item",
|
||||||
|
header: "Položka",
|
||||||
|
width: "25%",
|
||||||
|
bold: true,
|
||||||
|
render: (row) => row.item?.name || `ID: ${row.item_id}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "location",
|
||||||
|
header: "Lokace",
|
||||||
|
width: "15%",
|
||||||
|
mono: true,
|
||||||
|
render: (row) => row.location?.code || "—",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "system_qty",
|
||||||
|
header: "Systémové množství",
|
||||||
|
width: "18%",
|
||||||
|
mono: true,
|
||||||
|
render: (row) => String(Number(row.system_qty)),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "actual_qty",
|
||||||
|
header: "Skutečné množství",
|
||||||
|
width: "18%",
|
||||||
|
mono: true,
|
||||||
|
render: (row) => String(Number(row.actual_qty)),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "difference",
|
||||||
|
header: "Rozdíl",
|
||||||
|
width: "12%",
|
||||||
|
render: (row) => {
|
||||||
|
const diff = Number(row.difference);
|
||||||
|
const color =
|
||||||
|
diff > 0
|
||||||
|
? "success.main"
|
||||||
|
: diff < 0
|
||||||
|
? "error.main"
|
||||||
|
: "text.secondary";
|
||||||
|
return (
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "'DM Mono', Menlo, monospace",
|
||||||
|
fontWeight: 500,
|
||||||
|
color,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{diff > 0 ? `+${diff}` : diff}
|
||||||
|
</Typography>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "notes",
|
||||||
|
header: "Poznámka",
|
||||||
|
width: "12%",
|
||||||
|
render: (row) => row.notes || "—",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<Box>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<motion.div
|
<motion.div
|
||||||
className="admin-page-header"
|
|
||||||
initial={{ opacity: 0, y: 12 }}
|
initial={{ opacity: 0, y: 12 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.25 }}
|
transition={{ duration: 0.25 }}
|
||||||
>
|
>
|
||||||
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
|
<PageHeader
|
||||||
<Link
|
title={s.session_number || "Inventura"}
|
||||||
to="/warehouse/inventory"
|
actions={
|
||||||
className="admin-btn-icon"
|
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||||
title="Zpět na seznam"
|
<Button
|
||||||
aria-label="Zpět na seznam"
|
component={RouterLink}
|
||||||
>
|
to="/warehouse/inventory"
|
||||||
<svg
|
variant="outlined"
|
||||||
width="20"
|
color="inherit"
|
||||||
height="20"
|
startIcon={BackIcon}
|
||||||
viewBox="0 0 24 24"
|
>
|
||||||
fill="none"
|
Zpět
|
||||||
stroke="currentColor"
|
</Button>
|
||||||
strokeWidth="2"
|
<StatusChip
|
||||||
>
|
label={STATUS_LABEL[s.status] ?? s.status}
|
||||||
<path d="M19 12H5M12 19l-7-7 7-7" />
|
color={STATUS_COLOR[s.status] ?? "default"}
|
||||||
</svg>
|
/>
|
||||||
</Link>
|
{s.status === "DRAFT" && (
|
||||||
<div>
|
<Button
|
||||||
<h1 className="admin-page-title">
|
onClick={() => setShowConfirmModal(true)}
|
||||||
{s.session_number || "Inventura"}
|
disabled={confirming}
|
||||||
</h1>
|
>
|
||||||
</div>
|
{confirming ? "Potvrzování..." : "Potvrdit inventuru"}
|
||||||
<span
|
</Button>
|
||||||
className={`admin-badge ${STATUS_BADGE[s.status] ?? ""}`}
|
)}
|
||||||
style={{ marginLeft: "0.5rem" }}
|
</Box>
|
||||||
>
|
}
|
||||||
{STATUS_LABEL[s.status] ?? s.status}
|
/>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="admin-page-actions">
|
|
||||||
{s.status === "DRAFT" && (
|
|
||||||
<button
|
|
||||||
onClick={() => setShowConfirmModal(true)}
|
|
||||||
className="admin-btn admin-btn-primary"
|
|
||||||
disabled={confirming}
|
|
||||||
>
|
|
||||||
{confirming ? "Potvrzování..." : "Potvrdit inventuru"}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Header info */}
|
{/* Header info */}
|
||||||
<motion.div
|
<motion.div
|
||||||
className="admin-card"
|
|
||||||
initial={{ opacity: 0, y: 12 }}
|
initial={{ opacity: 0, y: 12 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.25, delay: 0.06 }}
|
transition={{ duration: 0.25, delay: 0.06 }}
|
||||||
>
|
>
|
||||||
<div className="admin-card-body">
|
<Card sx={{ mb: 3 }}>
|
||||||
<h3 className="admin-card-title">Základní údaje</h3>
|
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||||
<div className="admin-form">
|
Základní údaje
|
||||||
<div className="admin-form-row">
|
</Typography>
|
||||||
<FormField label="Číslo inventury">
|
<Box
|
||||||
<div className="admin-mono fw-500">
|
sx={{
|
||||||
{s.session_number || "—"}
|
display: "grid",
|
||||||
</div>
|
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||||
</FormField>
|
gap: 2,
|
||||||
<FormField label="Vytvořeno">
|
}}
|
||||||
<div className="admin-mono">{formatDate(s.created_at)}</div>
|
>
|
||||||
</FormField>
|
<Box>
|
||||||
</div>
|
<Typography variant="caption" color="text.secondary">
|
||||||
|
Číslo inventury
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "'DM Mono', Menlo, monospace",
|
||||||
|
fontWeight: 500,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{s.session_number || "—"}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Typography variant="caption" color="text.secondary">
|
||||||
|
Vytvořeno
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||||
|
>
|
||||||
|
{formatDate(s.created_at)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
{s.notes && (
|
{s.notes && (
|
||||||
<FormField label="Poznámky">
|
<Box sx={{ gridColumn: { sm: "1 / -1" } }}>
|
||||||
<div style={{ whiteSpace: "pre-wrap" }}>{s.notes}</div>
|
<Typography variant="caption" color="text.secondary">
|
||||||
</FormField>
|
Poznámky
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
|
||||||
|
{s.notes}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
)}
|
)}
|
||||||
</div>
|
</Box>
|
||||||
</div>
|
</Card>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Lines table */}
|
{/* Lines table */}
|
||||||
<motion.div
|
<motion.div
|
||||||
className="admin-card"
|
|
||||||
initial={{ opacity: 0, y: 12 }}
|
initial={{ opacity: 0, y: 12 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.25, delay: 0.08 }}
|
transition={{ duration: 0.25, delay: 0.08 }}
|
||||||
>
|
>
|
||||||
<div className="admin-card-body">
|
<Card sx={{ mb: 3 }}>
|
||||||
<h3 className="admin-card-title">Položky</h3>
|
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||||
{items.length === 0 ? (
|
Položky
|
||||||
<div className="admin-empty-state">Žádné řádky</div>
|
</Typography>
|
||||||
) : (
|
<DataTable<WarehouseInventoryItem>
|
||||||
<div className="admin-table-responsive">
|
columns={itemColumns}
|
||||||
<table className="admin-table">
|
rows={items}
|
||||||
<thead>
|
rowKey={(row) => row.id}
|
||||||
<tr>
|
empty={<EmptyState title="Žádné řádky" />}
|
||||||
<th>Položka</th>
|
/>
|
||||||
<th>Lokace</th>
|
</Card>
|
||||||
<th>Systémové množství</th>
|
|
||||||
<th>Skutečné množství</th>
|
|
||||||
<th>Rozdíl</th>
|
|
||||||
<th>Poznámka</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{items.map((item) => {
|
|
||||||
const diff = Number(item.difference);
|
|
||||||
const diffColor =
|
|
||||||
diff > 0
|
|
||||||
? "var(--success)"
|
|
||||||
: diff < 0
|
|
||||||
? "var(--danger)"
|
|
||||||
: "var(--text-secondary)";
|
|
||||||
return (
|
|
||||||
<tr key={item.id}>
|
|
||||||
<td className="fw-500">
|
|
||||||
{item.item?.name || `ID: ${item.item_id}`}
|
|
||||||
</td>
|
|
||||||
<td className="admin-mono">
|
|
||||||
{item.location?.code || "—"}
|
|
||||||
</td>
|
|
||||||
<td className="admin-mono">
|
|
||||||
{Number(item.system_qty)}
|
|
||||||
</td>
|
|
||||||
<td className="admin-mono">
|
|
||||||
{Number(item.actual_qty)}
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
className="admin-mono fw-500"
|
|
||||||
style={{ color: diffColor }}
|
|
||||||
>
|
|
||||||
{diff > 0 ? `+${diff}` : diff}
|
|
||||||
</td>
|
|
||||||
<td>{item.notes || "—"}</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Confirm modal */}
|
{/* Confirm modal */}
|
||||||
<ConfirmModal
|
<ConfirmDialog
|
||||||
isOpen={showConfirmModal}
|
isOpen={showConfirmModal}
|
||||||
onClose={() => setShowConfirmModal(false)}
|
onClose={() => setShowConfirmModal(false)}
|
||||||
onConfirm={handleConfirm}
|
onConfirm={handleConfirm}
|
||||||
title="Potvrdit inventuru"
|
title="Potvrdit inventuru"
|
||||||
message={`Opravdu chcete potvrdit inventuru „${s.session_number || s.id}"? Potvrzením se aktualizují skladové zásoby.`}
|
message={`Opravdu chcete potvrdit inventuru „${s.session_number || s.id}"? Potvrzením se aktualizují skladové zásoby.`}
|
||||||
confirmText="Potvrdit inventuru"
|
confirmText="Potvrdit inventuru"
|
||||||
type="warning"
|
|
||||||
loading={confirming}
|
loading={confirming}
|
||||||
/>
|
/>
|
||||||
</div>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user