diff --git a/src/admin/pages/Vehicles.tsx b/src/admin/pages/Vehicles.tsx index 548b94f..5464d37 100644 --- a/src/admin/pages/Vehicles.tsx +++ b/src/admin/pages/Vehicles.tsx @@ -1,16 +1,27 @@ import { useState } from "react"; import { useQuery } from "@tanstack/react-query"; +import { motion } from "framer-motion"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import Chip from "@mui/material/Chip"; +import IconButton from "@mui/material/IconButton"; 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 FormModal from "../components/FormModal"; - import { formatKm } from "../utils/formatters"; -import FormField from "../components/FormField"; import { vehicleListOptions } from "../lib/queries/vehicles"; import { useApiMutation } from "../lib/queries/mutations"; +import { + Button, + Card, + DataTable, + Modal, + ConfirmDialog, + Field, + TextField, + SwitchField, + type DataColumn, +} from "../ui"; const API_BASE = "/api/admin"; @@ -35,6 +46,50 @@ interface VehicleForm { is_active: boolean; } +const PlusIcon = ( + + + + +); +const EditIcon = ( + + + + +); +const DeleteIcon = ( + + + + +); + export default function Vehicles() { const alert = useAlert(); const { hasPermission } = useAuth(); @@ -174,272 +229,205 @@ export default function Vehicles() { ); } + const columns: DataColumn[] = [ + { key: "spz", header: "SPZ", mono: true, render: (v) => v.spz }, + { key: "name", header: "Název", render: (v) => v.name }, + { + key: "brand", + header: "Značka / Model", + render: (v) => + v.brand || v.model ? `${v.brand || ""} ${v.model || ""}`.trim() : "—", + }, + { + key: "initial_km", + header: "Počáteční km", + align: "right", + mono: true, + render: (v) => `${formatKm(v.initial_km)} km`, + }, + { + key: "current_km", + header: "Aktuální km", + align: "right", + mono: true, + render: (v) => `${formatKm(v.current_km)} km`, + }, + { + key: "trips", + header: "Počet jízd", + align: "right", + mono: true, + render: (v) => v.trip_count, + }, + { + key: "status", + header: "Stav", + render: (v) => ( + toggleActive(v)} + sx={{ cursor: "pointer", fontWeight: 600 }} + /> + ), + }, + { + key: "actions", + header: "Akce", + align: "right", + render: (v) => ( + + openEditModal(v)} + aria-label="Upravit" + title="Upravit" + > + {EditIcon} + + setDeleteConfirm({ show: true, vehicle: v })} + aria-label="Smazat" + title="Smazat" + > + {DeleteIcon} + + + ), + }, + ]; + return ( -
+ -
-

Správa vozidel

-
-
- -
+ + -
- {vehicles.length === 0 && ( -
-
- - - - - - -
-

Zatím nejsou žádná vozidla.

- -
- )} - {vehicles.length > 0 && ( -
- - - - - - - - - - - - - - - {vehicles.map((vehicle) => ( - - - - - - - - - - - ))} - -
SPZNázevZnačka / ModelPočáteční kmAktuální kmPočet jízdStavAkce
{vehicle.spz}{vehicle.name} - {vehicle.brand || vehicle.model - ? `${vehicle.brand || ""} ${vehicle.model || ""}`.trim() - : "—"} - - {formatKm(vehicle.initial_km)} km - - {formatKm(vehicle.current_km)} km - {vehicle.trip_count} - - -
- - -
-
-
- )} -
+ + + columns={columns} + rows={vehicles} + rowKey={(v) => v.id} + rowInactive={(v) => !v.is_active} + empty={ + + + Zatím nejsou žádná vozidla. + + + + } + /> + - {/* Add/Edit Modal */} - setShowModal(false)} onSubmit={handleSubmit} title={editingVehicle ? "Upravit vozidlo" : "Přidat vozidlo"} loading={saving} > -
-
- - + + + { - setForm({ - ...form, - spz: e.target.value.toUpperCase(), - }); + setForm({ ...form, spz: e.target.value.toUpperCase() }); setErrors((prev) => ({ ...prev, spz: "" })); }} - className="admin-form-input" - placeholder="1AB 2345" - aria-invalid={!!errors.spz} /> - - - - + + + + { setForm({ ...form, name: e.target.value }); setErrors((prev) => ({ ...prev, name: "" })); }} - className="admin-form-input" - placeholder="Služební #1" - aria-invalid={!!errors.name} /> - -
+ + + -
- - + + + setForm({ ...form, brand: e.target.value })} - className="admin-form-input" placeholder="Škoda" + onChange={(e) => setForm({ ...form, brand: e.target.value })} /> - - - - + + + + setForm({ ...form, model: e.target.value })} - className="admin-form-input" placeholder="Octavia Combi" + onChange={(e) => setForm({ ...form, model: e.target.value })} /> - -
+ + + -
- - - setForm({ - ...form, - initial_km: parseInt(e.target.value) || 0, - }) - } - className="admin-form-input" - min="0" - /> - - Stav tachometru při přidání vozidla - -
+ + + setForm({ ...form, initial_km: parseInt(e.target.value) || 0 }) + } + /> + - -
- + setForm({ ...form, is_active: v })} + /> + - {/* Delete Confirmation */} - setDeleteConfirm({ show: false, vehicle: null })} onConfirm={handleDelete} @@ -452,6 +440,6 @@ export default function Vehicles() { confirmText="Smazat" confirmVariant="danger" /> -
+ ); }