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

feat(mui): migrate Warehouse Categories (Kategorie) onto MUI kit

Browse Source 
Replace legacy admin-* CSS, FormModal, ConfirmModal, FormField, and
framer-motion wrappers with PageHeader, Card, DataTable, Modal,
ConfirmDialog, Field, TextField, EmptyState, LoadingState, and MUI
IconButton. All data logic preserved verbatim.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-06 23:28:30 +02:00
parent b22cd6b4da
commit 0dbe78bfe6
1 changed files with 185 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

377
src/admin/pages/WarehouseCategories.tsx
View File

@@ -1,18 +1,28 @@
import { useState } from "react"; import { useState } from "react";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import Box from "@mui/material/Box";
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 ConfirmModal from "../components/ConfirmModal";
import FormModal from "../components/FormModal";
import FormField from "../components/FormField";
import { import {
warehouseCategoryListOptions, warehouseCategoryListOptions,
type WarehouseCategory, type WarehouseCategory,
} from "../lib/queries/warehouse"; } from "../lib/queries/warehouse";
import { useApiMutation } from "../lib/queries/mutations"; import { useApiMutation } from "../lib/queries/mutations";
import {
Button,
Card,
DataTable,
Modal,
ConfirmDialog,
Field,
TextField,
PageHeader,
EmptyState,
LoadingState,
type DataColumn,
} from "../ui";
const API_BASE = "/api/admin/warehouse/categories"; const API_BASE = "/api/admin/warehouse/categories";
@@ -22,6 +32,50 @@ interface CategoryForm {
sort_order: number; sort_order: 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 EditIcon = (
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
);
const DeleteIcon = (
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="3 6 5 6 21 6" />
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
</svg>
);
export default function WarehouseCategories() { export default function WarehouseCategories() {
const alert = useAlert(); const alert = useAlert();
const { hasPermission } = useAuth(); const { hasPermission } = useAuth();
@@ -121,207 +175,145 @@ export default function WarehouseCategories() {
}; };
if (isPending) { if (isPending) {
return ( return <LoadingState />;
<div className="admin-loading">
<div className="admin-spinner" />
</div>
);
} }
return ( const total = categories.length;
<div> const subtitle = `${total} ${
<motion.div total === 1
className="admin-page-header" ? "kategorie"
initial={{ opacity: 0, y: 12 }} : total >= 2 && total <= 4
animate={{ opacity: 1, y: 0 }} ? "kategorie"
transition={{ duration: 0.25 }} : "kategorií"
> }`;
<div>
<h1 className="admin-page-title">Kategorie skladu</h1>
</div>
<div className="admin-page-actions">
<button
onClick={openCreateModal}
className="admin-btn admin-btn-primary"
>
<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>
Přidat kategorii
</button>
</div>
</motion.div>
<motion.div const columns: DataColumn<WarehouseCategory>[] = [
className="admin-card" {
initial={{ opacity: 0, y: 12 }} key: "name",
animate={{ opacity: 1, y: 0 }} header: "Název",
transition={{ duration: 0.25, delay: 0.06 }} width: "35%",
> bold: true,
<div className="admin-card-body"> render: (c) => c.name,
{categories.length === 0 && ( },
<div className="admin-empty-state"> {
<div className="admin-empty-icon"> key: "description",
<svg header: "Popis",
width="28" width: "40%",
height="28" render: (c) => c.description || "—",
viewBox="0 0 24 24" },
fill="none" {
stroke="currentColor" key: "sort_order",
strokeWidth="1.5" header: "Pořadí",
strokeLinecap="round" width: "15%",
strokeLinejoin="round" mono: true,
> render: (c) => String(c.sort_order),
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" /> },
</svg> {
</div> key: "actions",
<p>Zatím nejsou žádné kategorie.</p> header: "Akce",
<button width: "10%",
onClick={openCreateModal} align: "right",
className="admin-btn admin-btn-primary" render: (c) => (
> <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
Přidat první kategorii <IconButton
</button> size="small"
</div> onClick={() => openEditModal(c)}
)} aria-label="Upravit"
{categories.length > 0 && ( title="Upravit"
<div className="admin-table-responsive"> >
<table className="admin-table"> {EditIcon}
<thead> </IconButton>
<tr> <IconButton
<th>Název</th> size="small"
<th>Popis</th> color="error"
<th>Pořadí</th> onClick={() => setDeleteConfirm({ show: true, category: c })}
<th>Akce</th> aria-label="Smazat"
</tr> title="Smazat"
</thead> >
<tbody> {DeleteIcon}
{categories.map((category) => ( </IconButton>
<tr key={category.id}> </Box>
<td className="fw-500">{category.name}</td> ),
<td>{category.description || "—"}</td> },
<td className="admin-mono">{category.sort_order}</td> ];
<td>
<div className="admin-table-actions"> return (
<button <Box>
onClick={() => openEditModal(category)} <PageHeader
className="admin-btn-icon" title="Kategorie skladu"
title="Upravit" subtitle={subtitle}
aria-label="Upravit" actions={
> <Button startIcon={PlusIcon} onClick={openCreateModal}>
<svg Přidat kategorii
width="18" </Button>
height="18" }
viewBox="0 0 24 24" />
fill="none"
stroke="currentColor" <Card>
strokeWidth="2" <DataTable<WarehouseCategory>
strokeLinecap="round" columns={columns}
strokeLinejoin="round" rows={categories}
> rowKey={(c) => c.id}
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /> empty={
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" /> <EmptyState
</svg> title="Zatím nejsou žádné kategorie."
</button> action={
<button <Button startIcon={PlusIcon} onClick={openCreateModal}>
onClick={() => Přidat první kategorii
setDeleteConfirm({ show: true, category }) </Button>
} }
className="admin-btn-icon danger" />
title="Smazat" }
aria-label="Smazat" />
> </Card>
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="3 6 5 6 21 6" />
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
</svg>
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
</motion.div>
{/* Add/Edit Modal */} {/* Add/Edit Modal */}
<FormModal <Modal
isOpen={showModal} isOpen={showModal}
onClose={() => setShowModal(false)} onClose={() => setShowModal(false)}
onSubmit={handleSubmit} onSubmit={handleSubmit}
title={editingCategory ? "Upravit kategorii" : "Přidat kategorii"} title={editingCategory ? "Upravit kategorii" : "Přidat kategorii"}
loading={saving} loading={saving}
> >
<div className="admin-form"> <Field label="Název" required error={errors.name}>
<FormField label="Název" error={errors.name} required> <TextField
<input value={form.name}
type="text" error={!!errors.name}
value={form.name} onChange={(e) => {
onChange={(e) => { setForm({ ...form, name: e.target.value });
setForm({ ...form, name: e.target.value }); setErrors((prev) => ({ ...prev, name: "" }));
setErrors((prev) => ({ ...prev, name: "" })); }}
}} placeholder="Název kategorie"
className="admin-form-input" />
placeholder="Název kategorie" </Field>
aria-invalid={!!errors.name}
/>
</FormField>
<FormField label="Popis"> <Field label="Popis">
<textarea <TextField
value={form.description} multiline
onChange={(e) => minRows={3}
setForm({ ...form, description: e.target.value }) value={form.description}
} onChange={(e) => setForm({ ...form, description: e.target.value })}
className="admin-form-input" placeholder="Volitelný popis kategorie"
rows={3} />
placeholder="Volitelný popis kategorie" </Field>
/>
</FormField>
<FormField label="Pořadí řazení"> <Field label="Pořadí řazení">
<input <TextField
type="number" type="number"
inputMode="numeric" value={String(form.sort_order)}
value={form.sort_order} onChange={(e) =>
onChange={(e) => setForm({
setForm({ ...form,
...form, sort_order: parseInt(e.target.value) || 0,
sort_order: parseInt(e.target.value) || 0, })
}) }
} inputProps={{ min: 0 }}
className="admin-form-input" />
min="0" </Field>
/> </Modal>
<small className="admin-form-hint">
Nižší hodnota = výše v seznamu
</small>
</FormField>
</div>
</FormModal>
{/* Delete Confirmation */} {/* Delete Confirmation */}
<ConfirmModal <ConfirmDialog
isOpen={deleteConfirm.show} isOpen={deleteConfirm.show}
onClose={() => setDeleteConfirm({ show: false, category: null })} onClose={() => setDeleteConfirm({ show: false, category: null })}
onConfirm={handleDelete} onConfirm={handleDelete}
@@ -333,7 +325,8 @@ export default function WarehouseCategories() {
} }
confirmText="Smazat" confirmText="Smazat"
confirmVariant="danger" confirmVariant="danger"
loading={deleteMutation.isPending}
/> />
</div> </Box>
); );
} }