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

feat(mui): migrate Trips Admin (Správa kniha jízd) onto MUI kit

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-06 23:51:52 +02:00
parent a05f0f1665
commit ca386c9d98
1 changed files with 416 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

785
src/admin/pages/TripsAdmin.tsx
View File

@@ -1,30 +1,41 @@
import { useState, useRef } from "react"; import { useState, useRef } from "react";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Link as RouterLink } from "react-router-dom";
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 { Link } from "react-router-dom";
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 { import {
tripListOptions, tripListOptions,
tripVehiclesOptions, tripVehiclesOptions,
tripUsersOptions, tripUsersOptions,
type BackendTrip, type BackendTrip,
type TripVehicle,
type TripUser,
} from "../lib/queries/trips"; } from "../lib/queries/trips";
import { import { companySettingsOptions } from "../lib/queries/settings";
companySettingsOptions,
type CompanySettingsData,
} from "../lib/queries/settings";
import AdminDatePicker from "../components/AdminDatePicker";
import FormField from "../components/FormField";
import { formatDate } from "../utils/attendanceHelpers"; import { formatDate } from "../utils/attendanceHelpers";
import { formatKm } from "../utils/formatters"; import { formatKm } from "../utils/formatters";
import { useApiMutation } from "../lib/queries/mutations"; import { useApiMutation } from "../lib/queries/mutations";
import {
Button,
Card,
DataTable,
Modal,
ConfirmDialog,
Field,
TextField,
Select,
DateField,
StatusChip,
FilterBar,
LoadingState,
EmptyState,
StatCard,
type DataColumn,
} from "../ui";
const API_BASE = "/api/admin"; const API_BASE = "/api/admin";
interface Trip { interface Trip {
@@ -71,6 +82,102 @@ function mapTrip(bt: BackendTrip): Trip {
}; };
} }
const PrintIcon = (
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<polyline points="6 9 6 2 18 2 18 9" />
<path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
<rect x="6" y="14" width="12" height="8" />
</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>
);
const TripsIcon = (
<svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="12" y1="20" x2="12" y2="10" />
<line x1="18" y1="20" x2="18" y2="4" />
<line x1="6" y1="20" x2="6" y2="16" />
</svg>
);
const TotalIcon = (
<svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
</svg>
);
const BusinessIcon = (
<svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect x="1" y="3" width="15" height="13" rx="2" ry="2" />
<path d="M16 8h2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-1" />
<circle cx="5.5" cy="18" r="2" />
<circle cx="18.5" cy="18" r="2" />
<path d="M8 18h8" />
</svg>
);
export default function TripsAdmin() { export default function TripsAdmin() {
const alert = useAlert(); const alert = useAlert();
const { hasPermission } = useAuth(); const { hasPermission } = useAuth();
@@ -331,463 +438,403 @@ export default function TripsAdmin() {
.reduce((sum, t) => sum + t.distance, 0), .reduce((sum, t) => sum + t.distance, 0),
}; };
const columns: DataColumn<Trip>[] = [
{
key: "trip_date",
header: "Datum",
width: "11%",
mono: true,
render: (trip) => formatDate(trip.trip_date),
},
{
key: "driver",
header: "Řidič",
width: "16%",
render: (trip) => trip.driver_name,
},
{
key: "vehicle",
header: "Vozidlo",
width: "11%",
mono: true,
render: (trip) => <StatusChip label={trip.spz} color="default" />,
},
{
key: "route",
header: "Trasa",
width: "20%",
render: (trip) => (
<Box component="span" sx={{ whiteSpace: "nowrap" }}>
{trip.route_from} &rarr; {trip.route_to}
</Box>
),
},
{
key: "km",
header: "Stav km",
width: "14%",
mono: true,
render: (trip) => (
<Box component="span" sx={{ whiteSpace: "nowrap" }}>
{formatKm(trip.start_km)} - {formatKm(trip.end_km)}
</Box>
),
},
{
key: "distance",
header: "Vzdálenost",
width: "12%",
mono: true,
bold: true,
render: (trip) => `${formatKm(trip.distance)} km`,
},
{
key: "type",
header: "Typ",
width: "10%",
render: (trip) => (
<StatusChip
label={trip.is_business ? "Služební" : "Soukromá"}
color={trip.is_business ? "success" : "warning"}
/>
),
},
{
key: "actions",
header: "Akce",
width: "10%",
align: "right",
render: (trip) => (
<Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
<IconButton
size="small"
onClick={() => openEditModal(trip)}
aria-label="Upravit"
title="Upravit"
>
{EditIcon}
</IconButton>
<IconButton
size="small"
color="error"
onClick={() => setDeleteConfirm({ show: true, trip })}
aria-label="Smazat"
title="Smazat"
>
{DeleteIcon}
</IconButton>
</Box>
),
},
];
return ( return (
<div> <Box>
<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> <Box
<h1 className="admin-page-title">Správa knihy jízd</h1> sx={{
</div> display: "flex",
<div className="admin-page-actions"> alignItems: "flex-start",
{trips.length > 0 && ( justifyContent: "space-between",
<button flexWrap: "wrap",
onClick={handlePrint} gap: 2,
className="admin-btn admin-btn-secondary" mb: 3,
title="Tisk knihy jízd" }}
> >
<svg <Typography variant="h4">Správa knihy jízd</Typography>
width="18" <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
height="18" {trips.length > 0 && (
viewBox="0 0 24 24" <Button
fill="none" variant="outlined"
stroke="currentColor" color="inherit"
strokeWidth="2" startIcon={PrintIcon}
style={{ marginRight: "0.5rem" }} onClick={handlePrint}
title="Tisk knihy jízd"
> >
<polyline points="6 9 6 2 18 2 18 9" /> Tisk
<path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" /> </Button>
<rect x="6" y="14" width="12" height="8" /> )}
</svg> <Button
Tisk component={RouterLink}
</button> to="/vehicles"
)} variant="outlined"
<Link to="/vehicles" className="admin-btn admin-btn-secondary"> color="inherit"
Vozidla >
</Link> Vozidla
</div> </Button>
</Box>
</Box>
</motion.div> </motion.div>
{/* Filters */} {/* Filters */}
<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"> <FilterBar>
<div className="admin-form-row admin-form-row-4"> <Box sx={{ flex: "0 0 160px" }}>
<FormField label="Měsíc" style={{ marginBottom: 0 }}> <Field label="Měsíc">
<select <Select
value={filterMonth} value={filterMonth}
onChange={(e) => setFilterMonth(e.target.value)} onChange={setFilterMonth}
className="admin-form-select" options={Array.from({ length: 12 }, (_, i) => ({
> value: String(i + 1),
{Array.from({ length: 12 }, (_, i) => ( label: new Date(2000, i).toLocaleString("cs-CZ", {
<option key={i + 1} value={i + 1}> month: "long",
{new Date(2000, i).toLocaleString("cs-CZ", { }),
month: "long", }))}
})} />
</option> </Field>
))} </Box>
</select> <Box sx={{ flex: "0 0 120px" }}>
</FormField> <Field label="Rok">
<FormField label="Rok" style={{ marginBottom: 0 }}> <Select
<select
value={filterYear} value={filterYear}
onChange={(e) => setFilterYear(e.target.value)} onChange={setFilterYear}
className="admin-form-select" options={Array.from({ length: 5 }, (_, i) => {
>
{Array.from({ length: 5 }, (_, i) => {
const y = new Date().getFullYear() - 2 + i; const y = new Date().getFullYear() - 2 + i;
return ( return { value: String(y), label: String(y) };
<option key={y} value={y}>
{y}
</option>
);
})} })}
</select> />
</FormField> </Field>
<FormField label="Vozidlo" style={{ marginBottom: 0 }}> </Box>
<select <Box sx={{ flex: "1 1 200px" }}>
<Field label="Vozidlo">
<Select
value={filterVehicleId} value={filterVehicleId}
onChange={(e) => setFilterVehicleId(e.target.value)} onChange={setFilterVehicleId}
className="admin-form-select" options={[
> { value: "", label: "Všechna vozidla" },
<option value="">Všechna vozidla</option> ...vehicles.map((v) => ({
{vehicles.map((v) => ( value: String(v.id),
<option key={v.id} value={v.id}> label: `${v.spz} - ${v.name}`,
{v.spz} - {v.name} })),
</option> ]}
))} />
</select> </Field>
</FormField> </Box>
<FormField label="Řidič" style={{ marginBottom: 0 }}> <Box sx={{ flex: "1 1 200px" }}>
<select <Field label="Řidič">
<Select
value={filterUserId} value={filterUserId}
onChange={(e) => setFilterUserId(e.target.value)} onChange={setFilterUserId}
className="admin-form-select" options={[
> { value: "", label: "Všichni řidiči" },
<option value="">Všichni řidiči</option> ...tripUsers.map((u) => ({
{tripUsers.map((u) => ( value: String(u.id),
<option key={u.id} value={u.id}> label: u.name,
{u.name} })),
</option> ]}
))} />
</select> </Field>
</FormField> </Box>
</div> </FilterBar>
</div>
</motion.div> </motion.div>
{/* Stats Cards */}
<motion.div <motion.div
className="admin-grid admin-grid-3 mt-6"
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-stat-card info"> <Box
<div className="admin-stat-icon info"> sx={{
<svg display: "grid",
width="22" gridTemplateColumns: {
height="22" xs: "1fr",
viewBox="0 0 24 24" sm: "repeat(3, 1fr)",
fill="none" },
stroke="currentColor" gap: 2,
strokeWidth="2" }}
strokeLinecap="round" >
strokeLinejoin="round" <StatCard
> label="Počet jízd"
<line x1="12" y1="20" x2="12" y2="10" /> value={totals.count}
<line x1="18" y1="20" x2="18" y2="4" /> icon={TripsIcon}
<line x1="6" y1="20" x2="6" y2="16" /> color="info"
</svg> />
</div> <StatCard
<div className="admin-stat-content"> label="Celkem naježděno"
<span className="admin-stat-value">{totals.count}</span> value={`${formatKm(totals.total)} km`}
<span className="admin-stat-label">Počet jízd</span> icon={TotalIcon}
</div> color="default"
</div> />
<div className="admin-stat-card"> <StatCard
<div className="admin-stat-icon"> label="Služební km"
<svg value={`${formatKm(totals.business)} km`}
width="22" icon={BusinessIcon}
height="22" color="success"
viewBox="0 0 24 24" />
fill="none" </Box>
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
</svg>
</div>
<div className="admin-stat-content">
<span className="admin-stat-value">
{formatKm(totals.total)} km
</span>
<span className="admin-stat-label">Celkem naježděno</span>
</div>
</div>
<div className="admin-stat-card success">
<div className="admin-stat-icon success">
<svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect x="1" y="3" width="15" height="13" rx="2" ry="2" />
<path d="M16 8h2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-1" />
<circle cx="5.5" cy="18" r="2" />
<circle cx="18.5" cy="18" r="2" />
<path d="M8 18h8" />
</svg>
</div>
<div className="admin-stat-content">
<span className="admin-stat-value">
{formatKm(totals.business)} km
</span>
<span className="admin-stat-label">Služební km</span>
</div>
</div>
</motion.div> </motion.div>
{/* Trips Table */} {/* Trips Table */}
<motion.div <motion.div
className="admin-card mt-6"
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.12 }} transition={{ duration: 0.25, delay: 0.12 }}
> >
<div className="admin-card-body"> <Card sx={{ mt: 3 }}>
{isPending ? ( {isPending ? (
<div className="admin-loading"> <LoadingState />
<div className="admin-spinner" />
</div>
) : ( ) : (
<> <DataTable<Trip>
{trips.length === 0 && ( columns={columns}
<div className="admin-empty-state"> rows={trips}
<p>Žádné záznamy jízd pro vybrané období.</p> rowKey={(trip) => trip.id}
</div> empty={
)} <EmptyState title="Žádné záznamy jízd pro vybrané období." />
{trips.length > 0 && ( }
<div className="admin-table-responsive"> />
<table className="admin-table">
<thead>
<tr>
<th>Datum</th>
<th>Řidič</th>
<th>Vozidlo</th>
<th>Trasa</th>
<th>Stav km</th>
<th>Vzdálenost</th>
<th>Typ</th>
<th>Akce</th>
</tr>
</thead>
<tbody>
{trips.map((trip) => (
<tr key={trip.id}>
<td className="admin-mono">
{formatDate(trip.trip_date)}
</td>
<td>{trip.driver_name}</td>
<td>
<span className="admin-badge">{trip.spz}</span>
</td>
<td>
<span style={{ whiteSpace: "nowrap" }}>
{trip.route_from} &rarr; {trip.route_to}
</span>
</td>
<td className="admin-mono">
<span style={{ whiteSpace: "nowrap" }}>
{formatKm(trip.start_km)} -{" "}
{formatKm(trip.end_km)}
</span>
</td>
<td className="admin-mono">
<strong>{formatKm(trip.distance)} km</strong>
</td>
<td>
<span
className={`admin-badge ${trip.is_business ? "admin-badge-success" : "admin-badge-warning"}`}
>
{trip.is_business ? "Služební" : "Soukromá"}
</span>
</td>
<td>
<div className="admin-table-actions">
<button
onClick={() => openEditModal(trip)}
className="admin-btn-icon"
title="Upravit"
aria-label="Upravit"
>
<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>
</button>
<button
onClick={() =>
setDeleteConfirm({ show: true, trip })
}
className="admin-btn-icon danger"
title="Smazat"
aria-label="Smazat"
>
<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> </Card>
</motion.div> </motion.div>
{/* Edit Modal */} {/* Edit Modal */}
<FormModal <Modal
isOpen={showEditModal && !!editingTrip} isOpen={showEditModal && !!editingTrip}
onClose={() => setShowEditModal(false)} onClose={() => setShowEditModal(false)}
onSubmit={handleEditSubmit} onSubmit={handleEditSubmit}
title="Upravit jízdu" title="Upravit jízdu"
subtitle={editingTrip?.driver_name}
loading={editMutation.isPending} loading={editMutation.isPending}
size="lg" maxWidth="lg"
> >
{editingTrip && ( {editingTrip && (
<div className="admin-form"> <>
<p <Box
className="text-secondary" sx={{
style={{ marginTop: "0", marginBottom: "0.75rem" }} display: "grid",
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
gap: 2,
}}
> >
{editingTrip.driver_name} <Field label="Vozidlo">
</p> <Select
<div className="admin-form-row">
<FormField label="Vozidlo">
<select
value={editForm.vehicle_id} value={editForm.vehicle_id}
onChange={(e) => onChange={(value) =>
setEditForm({ setEditForm({ ...editForm, vehicle_id: value })
...editForm,
vehicle_id: e.target.value,
})
} }
className="admin-form-select" options={vehicles.map((v) => ({
> value: String(v.id),
{vehicles.map((v) => ( label: `${v.spz} - ${v.name}`,
<option key={v.id} value={v.id}> }))}
{v.spz} - {v.name} />
</option> </Field>
))}
</select>
</FormField>
<FormField label="Datum jízdy"> <Field label="Datum jízdy">
<AdminDatePicker <DateField
mode="date"
value={editForm.trip_date} value={editForm.trip_date}
onChange={(val: string) => onChange={(val) =>
setEditForm({ ...editForm, trip_date: val }) setEditForm({ ...editForm, trip_date: val })
} }
/> />
</FormField> </Field>
</div> </Box>
<div className="admin-form-row"> <Box
<FormField label="Počáteční stav km"> sx={{
<input display: "grid",
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
gap: 2,
}}
>
<Field label="Počáteční stav km">
<TextField
type="number" type="number"
inputMode="numeric" inputMode="numeric"
value={editForm.start_km} value={editForm.start_km}
onChange={(e) => onChange={(e) =>
setEditForm({ ...editForm, start_km: e.target.value }) setEditForm({ ...editForm, start_km: e.target.value })
} }
className="admin-form-input" slotProps={{ htmlInput: { min: 0 } }}
min="0"
/> />
</FormField> </Field>
<FormField label="Konečný stav km"> <Field label="Konečný stav km">
<input <TextField
type="number" type="number"
inputMode="numeric" inputMode="numeric"
value={editForm.end_km} value={editForm.end_km}
onChange={(e) => onChange={(e) =>
setEditForm({ ...editForm, end_km: e.target.value }) setEditForm({ ...editForm, end_km: e.target.value })
} }
className="admin-form-input" slotProps={{ htmlInput: { min: 0 } }}
min="0"
/> />
</FormField> </Field>
<FormField label="Vzdálenost"> <Field label="Vzdálenost">
<input <TextField
type="text" type="text"
value={`${formatKm(calculateDistance())} km`} value={`${formatKm(calculateDistance())} km`}
className="admin-form-input"
readOnly
disabled disabled
slotProps={{ htmlInput: { readOnly: true } }}
/> />
</FormField> </Field>
</div> </Box>
<div className="admin-form-row"> <Box
<FormField label="Místo odjezdu"> sx={{
<input display: "grid",
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
gap: 2,
}}
>
<Field label="Místo odjezdu">
<TextField
type="text" type="text"
value={editForm.route_from} value={editForm.route_from}
onChange={(e) => onChange={(e) =>
setEditForm({ setEditForm({ ...editForm, route_from: e.target.value })
...editForm,
route_from: e.target.value,
})
} }
className="admin-form-input"
/> />
</FormField> </Field>
<FormField label="Místo příjezdu"> <Field label="Místo příjezdu">
<input <TextField
type="text" type="text"
value={editForm.route_to} value={editForm.route_to}
onChange={(e) => onChange={(e) =>
setEditForm({ ...editForm, route_to: e.target.value }) setEditForm({ ...editForm, route_to: e.target.value })
} }
className="admin-form-input"
/> />
</FormField> </Field>
</div> </Box>
<FormField label="Typ jízdy"> <Field label="Typ jízdy">
<select <Select
value={editForm.is_business} value={String(editForm.is_business)}
onChange={(e) => onChange={(value) =>
setEditForm({ setEditForm({ ...editForm, is_business: parseInt(value) })
...editForm,
is_business: parseInt(e.target.value),
})
} }
className="admin-form-select" options={[
> { value: "1", label: "Služební" },
<option value={1}>Služební</option> { value: "0", label: "Soukromá" },
<option value={0}>Soukromá</option> ]}
</select> />
</FormField> </Field>
<FormField label="Poznámky"> <Field label="Poznámky">
<textarea <TextField
multiline
minRows={2}
value={editForm.notes} value={editForm.notes}
onChange={(e) => onChange={(e) =>
setEditForm({ ...editForm, notes: e.target.value }) setEditForm({ ...editForm, notes: e.target.value })
} }
className="admin-form-textarea"
rows={2}
/> />
</FormField> </Field>
</div> </>
)} )}
</FormModal> </Modal>
{/* Delete Confirmation */} {/* Delete Confirmation */}
<ConfirmModal <ConfirmDialog
isOpen={deleteConfirm.show} isOpen={deleteConfirm.show}
onClose={() => setDeleteConfirm({ show: false, trip: null })} onClose={() => setDeleteConfirm({ show: false, trip: null })}
onConfirm={handleDelete} onConfirm={handleDelete}
@@ -915,6 +962,6 @@ export default function TripsAdmin() {
</table> </table>
</div> </div>
)} )}
</div> </Box>
); );
} }