330 lines
11 KiB
TypeScript
330 lines
11 KiB
TypeScript
import { useState, useEffect, useCallback } from "react";
|
|
import { useAlert } from "../context/AlertContext";
|
|
import { useAuth } from "../context/AuthContext";
|
|
import { motion } from "framer-motion";
|
|
import AdminDatePicker from "../components/AdminDatePicker";
|
|
import Forbidden from "../components/Forbidden";
|
|
import { formatDate } from "../utils/attendanceHelpers";
|
|
import { formatKm } from "../utils/formatters";
|
|
import FormField from "../components/FormField";
|
|
import apiFetch from "../utils/api";
|
|
|
|
const API_BASE = "/api/admin";
|
|
|
|
interface Vehicle {
|
|
id: number | string;
|
|
spz: string;
|
|
name: string;
|
|
}
|
|
|
|
interface Trip {
|
|
id: number;
|
|
trip_date: string;
|
|
spz: string;
|
|
driver_name: string;
|
|
route_from: string;
|
|
route_to: string;
|
|
start_km: number;
|
|
end_km: number;
|
|
distance: number;
|
|
is_business: number | boolean;
|
|
notes?: string;
|
|
}
|
|
|
|
export default function TripsHistory() {
|
|
const alert = useAlert();
|
|
const { user, hasPermission } = useAuth();
|
|
const [loading, setLoading] = useState(true);
|
|
const [month, setMonth] = useState(() => {
|
|
const now = new Date();
|
|
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
|
|
});
|
|
const [vehicleId, setVehicleId] = useState("");
|
|
const [trips, setTrips] = useState<Trip[]>([]);
|
|
const [vehicles, setVehicles] = useState<Vehicle[]>([]);
|
|
|
|
const totals = trips.reduce(
|
|
(acc, t) => ({
|
|
total: acc.total + (t.distance || 0),
|
|
business: acc.business + (t.is_business ? t.distance || 0 : 0),
|
|
count: acc.count + 1,
|
|
}),
|
|
{ total: 0, business: 0, count: 0 },
|
|
);
|
|
|
|
const fetchData = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const params = new URLSearchParams({ month });
|
|
if (user?.id) params.set("user_id", String(user.id));
|
|
if (vehicleId) params.set("vehicle_id", vehicleId);
|
|
|
|
const [tripsRes, vehiclesRes] = await Promise.all([
|
|
apiFetch(`${API_BASE}/trips?${params}`),
|
|
apiFetch(`${API_BASE}/vehicles`),
|
|
]);
|
|
if (tripsRes.status === 401) return;
|
|
const tripsResult = await tripsRes.json();
|
|
const vehiclesResult = await vehiclesRes.json();
|
|
if (tripsResult.success) {
|
|
const raw = Array.isArray(tripsResult.data)
|
|
? tripsResult.data
|
|
: tripsResult.data?.items || [];
|
|
setTrips(
|
|
raw.map((t: Record<string, unknown>) => ({
|
|
...t,
|
|
spz: (t.vehicles as Record<string, string>)?.spz || "",
|
|
driver_name: t.users
|
|
? `${(t.users as Record<string, string>).first_name || ""} ${(t.users as Record<string, string>).last_name || ""}`.trim()
|
|
: "",
|
|
distance:
|
|
((t.end_km as number) || 0) - ((t.start_km as number) || 0),
|
|
})),
|
|
);
|
|
}
|
|
if (vehiclesResult.success) {
|
|
setVehicles(
|
|
Array.isArray(vehiclesResult.data) ? vehiclesResult.data : [],
|
|
);
|
|
}
|
|
} catch {
|
|
alert.error("Nepodařilo se načíst data");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [month, vehicleId, alert, user?.id]);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [fetchData]);
|
|
|
|
if (!hasPermission("trips.history")) return <Forbidden />;
|
|
|
|
const getMonthName = (monthStr: string): string => {
|
|
const [yearStr, monthNum] = monthStr.split("-");
|
|
const date = new Date(parseInt(yearStr), parseInt(monthNum) - 1);
|
|
return date.toLocaleDateString("cs-CZ", { month: "long", year: "numeric" });
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<motion.div
|
|
className="admin-page-header"
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.25 }}
|
|
>
|
|
<div>
|
|
<h1 className="admin-page-title">Historie jízd</h1>
|
|
<p className="admin-page-subtitle">{getMonthName(month)}</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Filters */}
|
|
<motion.div
|
|
className="admin-card"
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.25, delay: 0.06 }}
|
|
>
|
|
<div className="admin-card-body">
|
|
<div className="admin-form-row">
|
|
<FormField label="Měsíc">
|
|
<AdminDatePicker
|
|
mode="month"
|
|
value={month}
|
|
onChange={(val: string) => setMonth(val)}
|
|
/>
|
|
</FormField>
|
|
<FormField label="Vozidlo">
|
|
<select
|
|
value={vehicleId}
|
|
onChange={(e) => setVehicleId(e.target.value)}
|
|
className="admin-form-select"
|
|
>
|
|
<option value="">Všechna vozidla</option>
|
|
{vehicles.map((v) => (
|
|
<option key={v.id} value={v.id}>
|
|
{v.spz} - {v.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="admin-grid admin-grid-3 mt-6"
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.25, delay: 0.08 }}
|
|
>
|
|
<div className="admin-stat-card info">
|
|
<div className="admin-stat-icon info">
|
|
<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>
|
|
</div>
|
|
<div className="admin-stat-content">
|
|
<span className="admin-stat-value">{totals.count}</span>
|
|
<span className="admin-stat-label">Počet jízd</span>
|
|
</div>
|
|
</div>
|
|
<div className="admin-stat-card">
|
|
<div className="admin-stat-icon">
|
|
<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>
|
|
</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>
|
|
|
|
{/* Trips Table */}
|
|
<motion.div
|
|
className="admin-card mt-6"
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.25, delay: 0.12 }}
|
|
>
|
|
<div className="admin-card-body">
|
|
{loading && (
|
|
<div className="admin-skeleton gap-5">
|
|
{[0, 1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="admin-skeleton-row">
|
|
<div className="admin-skeleton-line w-1/4" />
|
|
<div className="admin-skeleton-line w-1/3" />
|
|
<div className="admin-skeleton-line w-1/4" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{!loading && trips.length === 0 && (
|
|
<div className="admin-empty-state">
|
|
<p>Žádné záznamy jízd pro vybrané období.</p>
|
|
</div>
|
|
)}
|
|
{!loading && trips.length > 0 && (
|
|
<div className="admin-table-responsive">
|
|
<table className="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Datum</th>
|
|
<th>Vozidlo</th>
|
|
<th>Řidič</th>
|
|
<th>Trasa</th>
|
|
<th>Stav km</th>
|
|
<th>Vzdálenost</th>
|
|
<th>Typ</th>
|
|
<th>Poznámka</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{trips.map((trip) => (
|
|
<tr key={trip.id}>
|
|
<td className="admin-mono">
|
|
{formatDate(trip.trip_date)}
|
|
</td>
|
|
<td>
|
|
<span className="admin-badge">{trip.spz}</span>
|
|
</td>
|
|
<td style={{ color: "var(--text-secondary)" }}>
|
|
{trip.driver_name}
|
|
</td>
|
|
<td>
|
|
<span style={{ whiteSpace: "nowrap" }}>
|
|
{trip.route_from} → {trip.route_to}
|
|
</span>
|
|
</td>
|
|
<td className="admin-mono">
|
|
<span
|
|
style={{
|
|
whiteSpace: "nowrap",
|
|
color: "var(--text-secondary)",
|
|
}}
|
|
>
|
|
{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
|
|
style={{
|
|
color: "var(--text-secondary)",
|
|
maxWidth: "200px",
|
|
}}
|
|
>
|
|
{trip.notes || "—"}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|