boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

feat(mui): migrate Warehouse Inventory Form onto MUI kit

Browse Source 
Replace legacy admin-* markup (motion.div header, admin-card, admin-table,
WarehouseMovementTable, LocationSelect, admin-form-input) with Box/Typography/
IconButton from @mui/material and Button/Card/TextField/Select/Field from the
kit. Item rows are inlined (grid) matching the receipt/issue form siblings.
All data logic (useQuery, useApiMutation, validate, handleSubmit, navigate,
hasPermission guard, Czech alerts) preserved verbatim.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-07 08:09:21 +02:00
parent d46827dfdf
commit fa11d3e7e0
1 changed files with 195 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
src/admin/pages/WarehouseInventoryForm.tsx
View File

@@ -1,18 +1,20 @@
import { useState } from "react"; import { useState, useId, useRef } from "react";
import { useNavigate, Link } from "react-router-dom"; import { useNavigate, 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 IconButton from "@mui/material/IconButton";
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 FormField from "../components/FormField";
import ItemPicker from "../components/warehouse/ItemPicker"; import ItemPicker from "../components/warehouse/ItemPicker";
import LocationSelect from "../components/warehouse/LocationSelect"; import {
import WarehouseMovementTable from "../components/warehouse/WarehouseMovementTable"; warehouseLocationListOptions,
import { warehouseLocationListOptions } from "../lib/queries/warehouse"; type WarehouseLocation,
import type { WarehouseLocation } from "../lib/queries/warehouse"; } from "../lib/queries/warehouse";
import { useApiMutation } from "../lib/queries/mutations"; import { useApiMutation } from "../lib/queries/mutations";
import { Button, Card, TextField, Select, Field } from "../ui";
interface InventoryItem { interface InventoryItem {
key: string; key: string;
@@ -21,22 +23,63 @@ interface InventoryItem {
actual_qty: number; actual_qty: number;
} }
const defaultInventoryItem = () => ({ const BackIcon = (
item_id: null, <svg
location_id: null, width="20"
actual_qty: 0, height="20"
}); viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<path d="M19 12H5M12 19l-7-7 7-7" />
</svg>
);
const RemoveIcon = (
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
);
const PlusIcon = (
<svg
width="16"
height="16"
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>
);
export default function WarehouseInventoryForm() { export default function WarehouseInventoryForm() {
const alert = useAlert(); const alert = useAlert();
const { hasPermission } = useAuth(); const { hasPermission } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const baseId = useId();
const counterRef = useRef(0);
const nextKey = () => `${baseId}-item-${counterRef.current++}`;
const [items, setItems] = useState<InventoryItem[]>([]); const [items, setItems] = useState<InventoryItem[]>([]);
const [notes, setNotes] = useState(""); const [notes, setNotes] = useState("");
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const { data: locations = [] } = useQuery(warehouseLocationListOptions()); const { data: locations } = useQuery(warehouseLocationListOptions());
if (!hasPermission("warehouse.inventory")) return <Forbidden />; if (!hasPermission("warehouse.inventory")) return <Forbidden />;
@@ -90,151 +133,171 @@ export default function WarehouseInventoryForm() {
} }
}; };
const addItem = () => {
setItems((prev) => [
...prev,
{ key: nextKey(), item_id: null, location_id: null, actual_qty: 0 },
]);
};
const removeItem = (index: number) => {
setItems((prev) => prev.filter((_, i) => i !== index));
};
const updateItem = (
index: number,
field: keyof InventoryItem,
value: unknown,
) => {
setItems((prev) => {
const updated = [...prev];
updated[index] = { ...updated[index], [field]: value };
return updated;
});
};
const locationOptions = [
{ value: "", label: "-- bez lokace --" },
...(locations ?? []).map((loc: WarehouseLocation) => ({
value: String(loc.id),
label: `${loc.code} - ${loc.name}`,
})),
];
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" }}> <Box
<Link sx={{
to="/warehouse/inventory" display: "flex",
className="admin-btn-icon" alignItems: "flex-start",
title="Zpět na seznam" justifyContent: "space-between",
aria-label="Zpět na seznam" flexWrap: "wrap",
> gap: 2,
<svg mb: 3,
width="20" }}
height="20" >
viewBox="0 0 24 24" <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
fill="none" <IconButton
stroke="currentColor" component={RouterLink}
strokeWidth="2" to="/warehouse/inventory"
title="Zpět na seznam"
aria-label="Zpět na seznam"
> >
<path d="M19 12H5M12 19l-7-7 7-7" /> {BackIcon}
</svg> </IconButton>
</Link> <Typography variant="h4">Nová inventura</Typography>
<div> </Box>
<h1 className="admin-page-title">Nová inventura</h1> <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
</div> <Button onClick={handleSubmit} disabled={saving}>
</div> {saving ? "Ukládání..." : "Vytvořit inventuru"}
<div className="admin-page-actions"> </Button>
<button </Box>
type="button" </Box>
onClick={handleSubmit}
className="admin-btn admin-btn-primary"
disabled={saving}
>
{saving ? "Ukládání..." : "Vytvořit inventuru"}
</button>
</div>
</motion.div> </motion.div>
{/* Notes */} {/* Notes */}
<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 }}>
<FormField label="Poznámky"> Základní údaje
<textarea </Typography>
<Field label="Poznámky">
<TextField
multiline
minRows={3}
value={notes} value={notes}
onChange={(e) => setNotes(e.target.value)} onChange={(e) => setNotes(e.target.value)}
className="admin-form-input"
rows={3}
placeholder="Volitelné poznámky k inventuře" placeholder="Volitelné poznámky k inventuře"
/> />
</FormField> </Field>
</div> </Card>
</motion.div> </motion.div>
{/* Lines */} {/* Lines */}
<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 }}>
<WarehouseMovementTable<InventoryItem> Položky
items={items} </Typography>
onChange={setItems} <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
mode="inventory" {items.map((item, index) => (
defaultItem={defaultInventoryItem} <Box
renderHeader={() => ( key={item.key}
<> sx={{
<th className="admin-warehouse-col-item">Položka</th> display: "grid",
<th className="admin-warehouse-col-location">Lokace</th> gridTemplateColumns: {
<th className="admin-warehouse-col-qty">Skutečné množství</th> xs: "1fr",
<th>Akce</th> md: "minmax(180px, 2fr) minmax(140px, 1.5fr) 120px auto",
</> },
)} gap: 1,
renderRow={(item, _index, updateItem, removeItem) => ( alignItems: "start",
<> }}
<td className="admin-warehouse-col-item"> >
<ItemPicker <ItemPicker
value={item.item_id} value={item.item_id}
onChange={(id) => updateItem("item_id", id)} onChange={(id) => updateItem(index, "item_id", id)}
/> />
</td> <Select
<td className="admin-warehouse-col-location"> value={
<LocationSelect item.location_id === null ? "" : String(item.location_id)
value={item.location_id} }
onChange={(locId) => updateItem("location_id", locId)} onChange={(val) =>
/> updateItem(index, "location_id", val ? Number(val) : null)
</td> }
<td className="admin-warehouse-col-qty"> options={locationOptions}
<input />
type="number" <TextField
className="admin-form-input" type="number"
value={item.actual_qty || ""} value={item.actual_qty || ""}
onChange={(e) => onChange={(e) =>
updateItem("actual_qty", Number(e.target.value)) updateItem(index, "actual_qty", Number(e.target.value))
} }
min="0" inputProps={{
step="0.001" min: 0,
inputMode="decimal" step: 0.001,
pattern="[0-9]+([\.,][0-9]+)?" inputMode: "decimal",
aria-label={`Skutečné množství, řádek ${_index + 1}`} pattern: "[0-9]+([\\.,][0-9]+)?",
/> "aria-label": `Skutečné množství, řádek ${index + 1}`,
</td> }}
<td> placeholder="Skutečné množství"
<div className="admin-table-actions"> />
<button <IconButton
type="button" color="error"
className="admin-btn-icon danger" onClick={() => removeItem(index)}
onClick={removeItem} title="Odebrat řádek"
title="Odebrat řádek" aria-label="Odebrat řádek"
aria-label="Odebrat řádek" sx={{ justifySelf: { xs: "start", md: "center" } }}
> >
<svg {RemoveIcon}
width="16" </IconButton>
height="16" </Box>
viewBox="0 0 24 24" ))}
fill="none" </Box>
stroke="currentColor" <Button
strokeWidth="2" variant="outlined"
strokeLinecap="round" color="inherit"
strokeLinejoin="round" startIcon={PlusIcon}
> onClick={addItem}
<line x1="18" y1="6" x2="6" y2="18" /> sx={{ mt: 2 }}
<line x1="6" y1="6" x2="18" y2="18" /> >
</svg> Přidat položku
</button> </Button>
</div> </Card>
</td>
</>
)}
/>
</div>
</motion.div> </motion.div>
</div> </Box>
); );
} }