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 { useParams, Link } from "react-router-dom";
|
||||
import { useParams, Link as RouterLink } from "react-router-dom";
|
||||
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 { useAuth } from "../context/AuthContext";
|
||||
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 {
|
||||
warehouseInventoryDetailOptions,
|
||||
type WarehouseInventorySession,
|
||||
type WarehouseInventoryItem,
|
||||
} from "../lib/queries/warehouse";
|
||||
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> = {
|
||||
DRAFT: "admin-badge-warning",
|
||||
CONFIRMED: "admin-badge-active",
|
||||
const STATUS_COLOR: Record<
|
||||
string,
|
||||
"default" | "success" | "error" | "warning" | "info"
|
||||
> = {
|
||||
DRAFT: "warning",
|
||||
CONFIRMED: "success",
|
||||
};
|
||||
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
@@ -25,6 +40,19 @@ const STATUS_LABEL: Record<string, string> = {
|
||||
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() {
|
||||
const { id } = useParams();
|
||||
const alert = useAlert();
|
||||
@@ -65,206 +93,222 @@ export default function WarehouseInventoryDetail() {
|
||||
const confirming = confirmMutation.isPending;
|
||||
|
||||
if (isPending) {
|
||||
return (
|
||||
<div className="admin-loading">
|
||||
<div className="admin-spinner" />
|
||||
</div>
|
||||
);
|
||||
return <LoadingState />;
|
||||
}
|
||||
|
||||
if (error || !session) {
|
||||
return (
|
||||
<div>
|
||||
<div className="admin-page-header">
|
||||
<div>
|
||||
<Link
|
||||
<Box>
|
||||
<PageHeader
|
||||
title="Inventura"
|
||||
actions={
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/inventory"
|
||||
className="admin-btn-icon"
|
||||
title="Zpět na seznam"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={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>
|
||||
</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>
|
||||
Zpět
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<Card>
|
||||
<EmptyState title="Inventura nebyla nalezena." />
|
||||
</Card>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const s = session as WarehouseInventorySession;
|
||||
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 (
|
||||
<div>
|
||||
<Box>
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
className="admin-page-header"
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
|
||||
<Link
|
||||
to="/warehouse/inventory"
|
||||
className="admin-btn-icon"
|
||||
title="Zpět na seznam"
|
||||
aria-label="Zpět na seznam"
|
||||
>
|
||||
<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">
|
||||
{s.session_number || "Inventura"}
|
||||
</h1>
|
||||
</div>
|
||||
<span
|
||||
className={`admin-badge ${STATUS_BADGE[s.status] ?? ""}`}
|
||||
style={{ marginLeft: "0.5rem" }}
|
||||
>
|
||||
{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>
|
||||
<PageHeader
|
||||
title={s.session_number || "Inventura"}
|
||||
actions={
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/inventory"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={BackIcon}
|
||||
>
|
||||
Zpět
|
||||
</Button>
|
||||
<StatusChip
|
||||
label={STATUS_LABEL[s.status] ?? s.status}
|
||||
color={STATUS_COLOR[s.status] ?? "default"}
|
||||
/>
|
||||
{s.status === "DRAFT" && (
|
||||
<Button
|
||||
onClick={() => setShowConfirmModal(true)}
|
||||
disabled={confirming}
|
||||
>
|
||||
{confirming ? "Potvrzování..." : "Potvrdit inventuru"}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Header info */}
|
||||
<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">Základní údaje</h3>
|
||||
<div className="admin-form">
|
||||
<div className="admin-form-row">
|
||||
<FormField label="Číslo inventury">
|
||||
<div className="admin-mono fw-500">
|
||||
{s.session_number || "—"}
|
||||
</div>
|
||||
</FormField>
|
||||
<FormField label="Vytvořeno">
|
||||
<div className="admin-mono">{formatDate(s.created_at)}</div>
|
||||
</FormField>
|
||||
</div>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<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 && (
|
||||
<FormField label="Poznámky">
|
||||
<div style={{ whiteSpace: "pre-wrap" }}>{s.notes}</div>
|
||||
</FormField>
|
||||
<Box sx={{ gridColumn: { sm: "1 / -1" } }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Poznámky
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
|
||||
{s.notes}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Lines table */}
|
||||
<motion.div
|
||||
className="admin-card"
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
>
|
||||
<div className="admin-card-body">
|
||||
<h3 className="admin-card-title">Položky</h3>
|
||||
{items.length === 0 ? (
|
||||
<div className="admin-empty-state">Žádné řádky</div>
|
||||
) : (
|
||||
<div className="admin-table-responsive">
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Položka</th>
|
||||
<th>Lokace</th>
|
||||
<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>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
<DataTable<WarehouseInventoryItem>
|
||||
columns={itemColumns}
|
||||
rows={items}
|
||||
rowKey={(row) => row.id}
|
||||
empty={<EmptyState title="Žádné řádky" />}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Confirm modal */}
|
||||
<ConfirmModal
|
||||
<ConfirmDialog
|
||||
isOpen={showConfirmModal}
|
||||
onClose={() => setShowConfirmModal(false)}
|
||||
onConfirm={handleConfirm}
|
||||
title="Potvrdit inventuru"
|
||||
message={`Opravdu chcete potvrdit inventuru „${s.session_number || s.id}"? Potvrzením se aktualizují skladové zásoby.`}
|
||||
confirmText="Potvrdit inventuru"
|
||||
type="warning"
|
||||
loading={confirming}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user