diff --git a/src/admin/pages/WarehouseLocations.tsx b/src/admin/pages/WarehouseLocations.tsx index 0b92b39..863a2a7 100644 --- a/src/admin/pages/WarehouseLocations.tsx +++ b/src/admin/pages/WarehouseLocations.tsx @@ -1,18 +1,29 @@ import { useState } from "react"; import { useQuery } from "@tanstack/react-query"; +import Box from "@mui/material/Box"; +import IconButton from "@mui/material/IconButton"; import { useAlert } from "../context/AlertContext"; import { useAuth } from "../context/AuthContext"; import Forbidden from "../components/Forbidden"; -import { motion, AnimatePresence } from "framer-motion"; -import ConfirmModal from "../components/ConfirmModal"; -import useModalLock from "../hooks/useModalLock"; - -import FormField from "../components/FormField"; import { warehouseLocationListOptions, type WarehouseLocation, } from "../lib/queries/warehouse"; import { useApiMutation } from "../lib/queries/mutations"; +import { + Button, + Card, + DataTable, + Modal, + ConfirmDialog, + Field, + TextField, + StatusChip, + PageHeader, + EmptyState, + LoadingState, + type DataColumn, +} from "../ui"; const API_BASE = "/api/admin/warehouse/locations"; @@ -22,6 +33,50 @@ interface LocationForm { description: string; } +const PlusIcon = ( + + + + +); +const EditIcon = ( + + + + +); +const DeleteIcon = ( + + + + +); + export default function WarehouseLocations() { const alert = useAlert(); const { hasPermission } = useAuth(); @@ -96,8 +151,6 @@ export default function WarehouseLocations() { invalidate: ["warehouse"], }); - useModalLock(showModal); - if (!hasPermission("warehouse.manage")) return ; const openCreateModal = () => { @@ -175,272 +228,166 @@ export default function WarehouseLocations() { }; if (isPending) { - return ( -
-
-
- ); + return ; } - return ( -
- -
-

Umístění skladu

-
-
- -
- + const total = locations.length; + const subtitle = `${total} ${ + total === 1 + ? "umístění" + : total >= 2 && total <= 4 + ? "umístění" + : "umístění" + }`; - -
- {locations.length === 0 && ( -
-
- - - - -
-

Zatím nejsou žádná umístění.

- -
- )} - {locations.length > 0 && ( -
- - - - - - - - - - - - {locations.map((location) => ( - - - - - - - - ))} - -
KódNázevPopisStavAkce
{location.code}{location.name}{location.description || "—"} - - -
- - -
-
-
- )} -
- + const columns: DataColumn[] = [ + { + key: "code", + header: "Kód", + width: "15%", + mono: true, + bold: true, + render: (l) => l.code, + }, + { + key: "name", + header: "Název", + width: "25%", + render: (l) => l.name, + }, + { + key: "description", + header: "Popis", + width: "35%", + render: (l) => l.description || "—", + }, + { + key: "status", + header: "Stav", + width: "15%", + render: (l) => ( + toggleActive(l)} + /> + ), + }, + { + key: "actions", + header: "Akce", + width: "10%", + align: "right", + render: (l) => ( + + openEditModal(l)} + aria-label="Upravit" + title="Upravit" + > + {EditIcon} + + setDeleteConfirm({ show: true, location: l })} + aria-label="Smazat" + title="Smazat" + > + {DeleteIcon} + + + ), + }, + ]; + + return ( + + + Přidat umístění + + } + /> + + + + columns={columns} + rows={locations} + rowKey={(l) => l.id} + rowInactive={(l) => !l.is_active} + empty={ + + Přidat první umístění + + } + /> + } + /> + {/* Add/Edit Modal */} - - {showModal && ( - -
setShowModal(false)} + setShowModal(false)} + onSubmit={handleSubmit} + title={editingLocation ? "Upravit umístění" : "Přidat umístění"} + loading={ + createLocationMutation.isPending || updateLocationMutation.isPending + } + > + + + { + setForm({ ...form, code: e.target.value.toUpperCase() }); + setErrors((prev) => ({ ...prev, code: "" })); + }} + placeholder="A-01" /> - -
-

- {editingLocation ? "Upravit umístění" : "Přidat umístění"} -

-
+ -
-
-
- - { - setForm({ - ...form, - code: e.target.value.toUpperCase(), - }); - setErrors((prev) => ({ - ...prev, - code: "", - })); - }} - className="admin-form-input" - placeholder="A-01" - aria-invalid={!!errors.code} - /> - + + { + setForm({ ...form, name: e.target.value }); + setErrors((prev) => ({ ...prev, name: "" })); + }} + placeholder="Regál A, polička 1" + /> + + - - { - setForm({ ...form, name: e.target.value }); - setErrors((prev) => ({ - ...prev, - name: "", - })); - }} - className="admin-form-input" - placeholder="Regál A, polička 1" - aria-invalid={!!errors.name} - /> - -
- - -