mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +00:00
Build issue resolution
This commit is contained in:
Stephanos A
@@ -1,264 +1,129 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Users, Armchair, TrendingUp, Train, Download } from "lucide-react";
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Cell,
|
||||
} from "recharts";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import { formatDateTime } from "@/lib/utils";
|
||||
import ActionButton from "@/components/ui/ActionButton";
|
||||
import { useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Users, Armchair, BarChart3, Train, Download } from 'lucide-react';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { formatDateTime } from '@/lib/utils';
|
||||
import ActionButton from '@/components/ui/ActionButton';
|
||||
|
||||
const COLORS = [
|
||||
"#10b981",
|
||||
"#3b82f6",
|
||||
"#f59e0b",
|
||||
"#8b5cf6",
|
||||
"#ef4444",
|
||||
"#06b6d4",
|
||||
];
|
||||
interface ScheduleOption { id: string; label: string; }
|
||||
|
||||
function StatCard({
|
||||
label,
|
||||
value,
|
||||
sub,
|
||||
icon: Icon,
|
||||
color,
|
||||
}: {
|
||||
label: string;
|
||||
value: string | number;
|
||||
sub?: string;
|
||||
icon: any;
|
||||
color: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="card flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
{label}
|
||||
</p>
|
||||
<div className={`rounded-lg p-1.5 ${color}`}>
|
||||
<Icon className="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-2xl font-bold tabular-nums mt-1">{value}</p>
|
||||
{sub && <p className="text-xs text-muted-foreground">{sub}</p>}
|
||||
</div>
|
||||
);
|
||||
interface PassengersReport {
|
||||
schedule: { id: string; trainName: string; origin: string; destination: string; departureAt: string; arrivalAt: string; };
|
||||
summary: { totalSeats: number; totalPassengers: number; occupancyRate: number };
|
||||
byCoach: { coachNumber: string; coachType: string; totalSeats: number; booked: number; occupancyRate: number }[];
|
||||
byClass: { className: string; totalSeats: number; booked: number; occupancyRate: number }[];
|
||||
byOrigin: { stationName: string; passengers: number }[];
|
||||
byDestination: { stationName: string; passengers: number }[];
|
||||
}
|
||||
|
||||
interface PassengerRow {
|
||||
bookingRef: string;
|
||||
bookingStatus: string;
|
||||
passengerName: string;
|
||||
passengerCategory: string;
|
||||
idDocumentType: string | null;
|
||||
idDocumentNumber: string | null;
|
||||
passportNumber: string | null;
|
||||
passportCountry: string | null;
|
||||
seatLabel: string | null;
|
||||
coachNumber: string | null;
|
||||
coachType: string | null;
|
||||
coachSeat: string;
|
||||
origin: string;
|
||||
destination: string;
|
||||
departureAt: string | null;
|
||||
}
|
||||
|
||||
type Tab = "occupancy" | "list";
|
||||
type Tab = 'occupancy' | 'list';
|
||||
|
||||
export default function PassengersReportPage() {
|
||||
const [scheduleId, setScheduleId] = useState("");
|
||||
const [tab, setTab] = useState<Tab>("occupancy");
|
||||
const [listSearch, setListSearch] = useState("");
|
||||
const [scheduleId, setScheduleId] = useState('');
|
||||
const [tab, setTab] = useState<Tab>('occupancy');
|
||||
const [listSearch, setListSearch] = useState('');
|
||||
|
||||
const { data: schedulesRaw, isLoading: loadingSchedules } = useQuery<
|
||||
ScheduleOption[]
|
||||
>({
|
||||
queryKey: ["report-schedules"],
|
||||
queryFn: () => apiClient.get("/reports/schedules"),
|
||||
const { data: schedulesRaw, isLoading: loadingSchedules } = useQuery<ScheduleOption[]>({
|
||||
queryKey: ['report-schedules'],
|
||||
queryFn: () => apiClient.get('/reports/schedules'),
|
||||
});
|
||||
const schedules = schedulesRaw ?? [];
|
||||
|
||||
const { data, isLoading, isError } = useQuery<PassengersReport>({
|
||||
queryKey: ["passengers-report", scheduleId],
|
||||
queryFn: () =>
|
||||
apiClient.get(`/reports/passengers?scheduleId=${scheduleId}`),
|
||||
queryKey: ['passengers-report', scheduleId],
|
||||
queryFn: () => apiClient.get(`/reports/passengers?scheduleId=${scheduleId}`),
|
||||
enabled: !!scheduleId,
|
||||
});
|
||||
|
||||
const { data: passengerList = [], isLoading: listLoading } = useQuery<
|
||||
PassengerRow[]
|
||||
>({
|
||||
queryKey: ["passengers-list", scheduleId],
|
||||
queryFn: () =>
|
||||
apiClient.get(`/reports/passengers/list?scheduleId=${scheduleId}`),
|
||||
const { data: passengerList = [], isLoading: listLoading } = useQuery<PassengerRow[]>({
|
||||
queryKey: ['passengers-list', scheduleId],
|
||||
queryFn: () => apiClient.get(`/reports/passengers/list?scheduleId=${scheduleId}`),
|
||||
enabled: !!scheduleId,
|
||||
});
|
||||
|
||||
const filteredList = listSearch.trim()
|
||||
? passengerList.filter(
|
||||
(p) =>
|
||||
p.passengerName.toLowerCase().includes(listSearch.toLowerCase()) ||
|
||||
p.bookingRef.toLowerCase().includes(listSearch.toLowerCase()) ||
|
||||
(p.idDocumentNumber ?? "")
|
||||
.toLowerCase()
|
||||
.includes(listSearch.toLowerCase()) ||
|
||||
(p.passportNumber ?? "")
|
||||
.toLowerCase()
|
||||
.includes(listSearch.toLowerCase()),
|
||||
? passengerList.filter(p =>
|
||||
p.passengerName.toLowerCase().includes(listSearch.toLowerCase()) ||
|
||||
p.bookingRef.toLowerCase().includes(listSearch.toLowerCase()),
|
||||
)
|
||||
: passengerList;
|
||||
|
||||
const downloadCsv = (csv: string, filename: string) => {
|
||||
const blob = new Blob([csv], { type: "text/csv" });
|
||||
const blob = new Blob([csv], { type: 'text/csv' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
const a = document.createElement('a');
|
||||
a.href = url; a.download = filename; a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const doExportOccupancy = () => {
|
||||
if (!data) return;
|
||||
const rows = data.byCoach.map((c) => [
|
||||
c.coachNumber,
|
||||
c.coachType,
|
||||
String(c.totalSeats),
|
||||
String(c.booked),
|
||||
`${c.occupancyRate}%`,
|
||||
]);
|
||||
downloadCsv(
|
||||
[
|
||||
["Coach", "Type", "Total Seats", "Booked", "Occupancy"].join(","),
|
||||
...rows.map((r) => r.join(",")),
|
||||
].join("\n"),
|
||||
`occupancy-${scheduleId}.csv`,
|
||||
);
|
||||
const rows = data.byCoach.map(c => [c.coachNumber, c.coachType, String(c.totalSeats), String(c.booked), `${c.occupancyRate}%`]);
|
||||
downloadCsv([['Coach', 'Type', 'Total Seats', 'Booked', 'Occupancy'].join(','), ...rows.map(r => r.join(','))].join('\n'), `occupancy-${scheduleId}.csv`);
|
||||
};
|
||||
|
||||
const doExportList = () => {
|
||||
if (!passengerList.length) return;
|
||||
const headers = [
|
||||
"Booking Ref",
|
||||
"Status",
|
||||
"Name",
|
||||
"Category",
|
||||
"ID Type",
|
||||
"ID Number",
|
||||
"Passport",
|
||||
"Country",
|
||||
"Seat",
|
||||
"Coach",
|
||||
"Class",
|
||||
];
|
||||
const rows = passengerList.map((p) =>
|
||||
[
|
||||
p.bookingRef,
|
||||
p.bookingStatus,
|
||||
p.passengerName,
|
||||
p.passengerCategory,
|
||||
p.idDocumentType ?? "",
|
||||
p.idDocumentNumber ?? "",
|
||||
p.passportNumber ?? "",
|
||||
p.passportCountry ?? "",
|
||||
p.seatLabel ?? "",
|
||||
p.coachNumber ?? "",
|
||||
p.coachType ?? "",
|
||||
].map((v) => `"${String(v).replace(/"/g, '""')}"`),
|
||||
);
|
||||
downloadCsv(
|
||||
[headers.join(","), ...rows.map((r) => r.join(","))].join("\n"),
|
||||
`passengers-${scheduleId}.csv`,
|
||||
const headers = ['#', 'Name', 'Coach·Seat', 'Origin', 'Destination', 'Date', 'Booking Ref'];
|
||||
const rows = passengerList.map((p, i) =>
|
||||
[String(i + 1), p.passengerName, p.coachSeat, p.origin, p.destination, p.departureAt ? formatDateTime(p.departureAt) : '—', p.bookingRef]
|
||||
.map(v => `"${String(v).replace(/"/g, '""')}"`)
|
||||
);
|
||||
downloadCsv([headers.join(','), ...rows.map(r => r.join(','))].join('\n'), `passengers-${scheduleId}.csv`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-foreground">
|
||||
Passengers Report
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Select a schedule to view passenger occupancy breakdown
|
||||
</p>
|
||||
<h1 className="text-3xl font-bold text-foreground">Passengers Report</h1>
|
||||
<p className="text-muted-foreground mt-1">Occupancy and passenger breakdown for a schedule</p>
|
||||
</div>
|
||||
|
||||
{/* Schedule selector */}
|
||||
<div className="card">
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<div className="flex-1 min-w-64">
|
||||
<div className="flex items-end gap-4 flex-wrap">
|
||||
<div className="flex-1 min-w-72">
|
||||
<label className="label">Schedule</label>
|
||||
<select
|
||||
className="input"
|
||||
value={scheduleId}
|
||||
onChange={(e) => {
|
||||
setScheduleId(e.target.value);
|
||||
setTab("occupancy");
|
||||
setListSearch("");
|
||||
}}
|
||||
onChange={e => { setScheduleId(e.target.value); setTab('occupancy'); setListSearch(''); }}
|
||||
disabled={loadingSchedules}
|
||||
>
|
||||
<option value="">
|
||||
{loadingSchedules ? "Loading schedules…" : "Select a schedule…"}
|
||||
</option>
|
||||
{schedules.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.label}
|
||||
</option>
|
||||
))}
|
||||
<option value="">{loadingSchedules ? 'Loading schedules…' : 'Select a schedule…'}</option>
|
||||
{schedules.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
{data && tab === "occupancy" && (
|
||||
<ActionButton
|
||||
icon={Download}
|
||||
variant="secondary"
|
||||
onClick={doExportOccupancy}
|
||||
>
|
||||
Export CSV
|
||||
</ActionButton>
|
||||
)}
|
||||
{passengerList.length > 0 && tab === "list" && (
|
||||
<ActionButton
|
||||
icon={Download}
|
||||
variant="secondary"
|
||||
onClick={doExportList}
|
||||
>
|
||||
Export CSV
|
||||
</ActionButton>
|
||||
{data && tab === 'occupancy' && (
|
||||
<ActionButton icon={Download} variant="secondary" onClick={doExportOccupancy}>Export CSV</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
{(isLoading || listLoading) && (
|
||||
<p className="text-xs text-muted-foreground mt-2">Loading…</p>
|
||||
)}
|
||||
{isError && (
|
||||
<p className="text-xs text-red-500 mt-2">Failed to load report.</p>
|
||||
)}
|
||||
{(isLoading || listLoading) && <p className="text-xs text-muted-foreground mt-2">Loading…</p>}
|
||||
{isError && <p className="text-xs text-red-500 mt-2">Failed to load report.</p>}
|
||||
</div>
|
||||
|
||||
{isFetching && (
|
||||
<div className="card py-12 text-center text-muted-foreground">
|
||||
Loading passengers data…
|
||||
</div>
|
||||
)}
|
||||
|
||||
{report && (
|
||||
{data && (
|
||||
<>
|
||||
{/* Schedule Info */}
|
||||
{/* Schedule info */}
|
||||
<div className="card flex items-center gap-4">
|
||||
<div className="rounded-lg bg-emerald-100 dark:bg-emerald-900/30 p-2.5">
|
||||
<Train className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold">{report.schedule.trainName}</p>
|
||||
<p className="font-semibold">{data.schedule.trainName}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{report.schedule.origin} → {report.schedule.destination} ·
|
||||
Departure: {formatDateTime(report.schedule.departureAt)}
|
||||
{data.schedule.origin} → {data.schedule.destination} · Departure: {formatDateTime(data.schedule.departureAt)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -266,75 +131,51 @@ export default function PassengersReportPage() {
|
||||
{/* Tabs */}
|
||||
<div className="border-b border-border flex">
|
||||
<button
|
||||
onClick={() => setTab("occupancy")}
|
||||
className={`px-5 py-2.5 text-sm font-medium border-b-2 transition-colors ${tab === "occupancy" ? "border-emerald-500 text-emerald-600 dark:text-emerald-400" : "border-transparent text-muted-foreground hover:text-foreground"}`}
|
||||
onClick={() => setTab('occupancy')}
|
||||
className={`px-5 py-2.5 text-sm font-medium border-b-2 transition-colors ${tab === 'occupancy' ? 'border-emerald-500 text-emerald-600 dark:text-emerald-400' : 'border-transparent text-muted-foreground hover:text-foreground'}`}
|
||||
>
|
||||
Occupancy
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTab("list")}
|
||||
className={`px-5 py-2.5 text-sm font-medium border-b-2 transition-colors ${tab === "list" ? "border-emerald-500 text-emerald-600 dark:text-emerald-400" : "border-transparent text-muted-foreground hover:text-foreground"}`}
|
||||
onClick={() => setTab('list')}
|
||||
className={`px-5 py-2.5 text-sm font-medium border-b-2 transition-colors ${tab === 'list' ? 'border-emerald-500 text-emerald-600 dark:text-emerald-400' : 'border-transparent text-muted-foreground hover:text-foreground'}`}
|
||||
>
|
||||
Passenger List
|
||||
{passengerList.length > 0 ? ` (${passengerList.length})` : ""}
|
||||
Passenger List{passengerList.length > 0 ? ` (${passengerList.length})` : ''}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Occupancy tab */}
|
||||
{tab === "occupancy" && (
|
||||
{tab === 'occupancy' && (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div className="card flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Total Seats
|
||||
</p>
|
||||
<div className="rounded-lg bg-blue-100 dark:bg-blue-900/30 p-1.5">
|
||||
<Armchair className="h-4 w-4 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Total Seats</p>
|
||||
<div className="rounded-lg bg-blue-100 dark:bg-blue-900/30 p-1.5"><Armchair className="h-4 w-4 text-blue-600 dark:text-blue-400" /></div>
|
||||
</div>
|
||||
<p className="text-2xl font-bold tabular-nums mt-1">
|
||||
{data.summary.totalSeats}
|
||||
</p>
|
||||
<p className="text-2xl font-bold tabular-nums mt-1">{data.summary.totalSeats}</p>
|
||||
</div>
|
||||
<div className="card flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Passengers
|
||||
</p>
|
||||
<div className="rounded-lg bg-emerald-100 dark:bg-emerald-900/30 p-1.5">
|
||||
<Users className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
|
||||
</div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Passengers</p>
|
||||
<div className="rounded-lg bg-emerald-100 dark:bg-emerald-900/30 p-1.5"><Users className="h-4 w-4 text-emerald-600 dark:text-emerald-400" /></div>
|
||||
</div>
|
||||
<p className="text-2xl font-bold tabular-nums mt-1">
|
||||
{data.summary.totalPassengers}
|
||||
</p>
|
||||
<p className="text-2xl font-bold tabular-nums mt-1">{data.summary.totalPassengers}</p>
|
||||
</div>
|
||||
<div className="card flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Occupancy Rate
|
||||
</p>
|
||||
<div className="rounded-lg bg-purple-100 dark:bg-purple-900/30 p-1.5">
|
||||
<BarChart3 className="h-4 w-4 text-purple-600 dark:text-purple-400" />
|
||||
</div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Occupancy Rate</p>
|
||||
<div className="rounded-lg bg-purple-100 dark:bg-purple-900/30 p-1.5"><BarChart3 className="h-4 w-4 text-purple-600 dark:text-purple-400" /></div>
|
||||
</div>
|
||||
<p className="text-2xl font-bold tabular-nums mt-1">
|
||||
{data.summary.occupancyRate}%
|
||||
</p>
|
||||
<p className="text-2xl font-bold tabular-nums mt-1">{data.summary.occupancyRate}%</p>
|
||||
<div className="w-full bg-muted rounded-full h-1.5 mt-1">
|
||||
<div
|
||||
className="bg-purple-500 h-1.5 rounded-full"
|
||||
style={{ width: `${data.summary.occupancyRate}%` }}
|
||||
/>
|
||||
<div className="bg-purple-500 h-1.5 rounded-full" style={{ width: `${data.summary.occupancyRate}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">
|
||||
By Coach
|
||||
</h3>
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">By Coach</h3>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
@@ -347,31 +188,18 @@ export default function PassengersReportPage() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{data.byCoach.map((c) => (
|
||||
{data.byCoach.map(c => (
|
||||
<tr key={c.coachNumber} className="hover:bg-muted/30">
|
||||
<td className="py-2 pr-4 font-semibold">
|
||||
{c.coachNumber}
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-muted-foreground">
|
||||
{c.coachType}
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-right tabular-nums">
|
||||
{c.totalSeats}
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-right tabular-nums">
|
||||
{c.booked}
|
||||
</td>
|
||||
<td className="py-2 pr-4 font-semibold">{c.coachNumber}</td>
|
||||
<td className="py-2 pr-4 text-muted-foreground">{c.coachType}</td>
|
||||
<td className="py-2 pr-4 text-right tabular-nums">{c.totalSeats}</td>
|
||||
<td className="py-2 pr-4 text-right tabular-nums">{c.booked}</td>
|
||||
<td className="py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 bg-muted rounded-full h-1.5">
|
||||
<div
|
||||
className="bg-emerald-500 h-1.5 rounded-full"
|
||||
style={{ width: `${c.occupancyRate}%` }}
|
||||
/>
|
||||
<div className="bg-emerald-500 h-1.5 rounded-full" style={{ width: `${c.occupancyRate}%` }} />
|
||||
</div>
|
||||
<span className="tabular-nums text-xs w-10 text-right">
|
||||
{c.occupancyRate}%
|
||||
</span>
|
||||
<span className="tabular-nums text-xs w-10 text-right">{c.occupancyRate}%</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -383,77 +211,46 @@ export default function PassengersReportPage() {
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="card">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">
|
||||
By Class
|
||||
</h3>
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">By Class</h3>
|
||||
<div className="space-y-3">
|
||||
{data.byClass.map((c) => (
|
||||
{data.byClass.map(c => (
|
||||
<div key={c.className}>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span className="font-medium">{c.className}</span>
|
||||
<span className="tabular-nums text-muted-foreground">
|
||||
{c.booked}/{c.totalSeats}
|
||||
</span>
|
||||
<span className="tabular-nums text-muted-foreground">{c.booked}/{c.totalSeats}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 bg-muted rounded-full h-1.5">
|
||||
<div
|
||||
className="bg-blue-500 h-1.5 rounded-full"
|
||||
style={{ width: `${c.occupancyRate}%` }}
|
||||
/>
|
||||
<div className="bg-blue-500 h-1.5 rounded-full" style={{ width: `${c.occupancyRate}%` }} />
|
||||
</div>
|
||||
<span className="text-xs tabular-nums w-10 text-right">
|
||||
{c.occupancyRate}%
|
||||
</span>
|
||||
<span className="text-xs tabular-nums w-10 text-right">{c.occupancyRate}%</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">
|
||||
By Boarding Station
|
||||
</h3>
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">By Boarding Station</h3>
|
||||
<div className="space-y-2">
|
||||
{data.byOrigin.map((o) => (
|
||||
<div
|
||||
key={o.stationName}
|
||||
className="flex justify-between text-sm"
|
||||
>
|
||||
<span className="text-muted-foreground truncate">
|
||||
{o.stationName}
|
||||
</span>
|
||||
<span className="font-semibold tabular-nums ml-2">
|
||||
{o.passengers}
|
||||
</span>
|
||||
{data.byOrigin.map(o => (
|
||||
<div key={o.stationName} className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground truncate">{o.stationName}</span>
|
||||
<span className="font-semibold tabular-nums ml-2">{o.passengers}</span>
|
||||
</div>
|
||||
))}
|
||||
{data.byOrigin.length === 0 && (
|
||||
<p className="text-xs text-muted-foreground">No data</p>
|
||||
)}
|
||||
{data.byOrigin.length === 0 && <p className="text-xs text-muted-foreground">No data</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">
|
||||
By Alighting Station
|
||||
</h3>
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">By Alighting Station</h3>
|
||||
<div className="space-y-2">
|
||||
{data.byDestination.map((d) => (
|
||||
<div
|
||||
key={d.stationName}
|
||||
className="flex justify-between text-sm"
|
||||
>
|
||||
<span className="text-muted-foreground truncate">
|
||||
{d.stationName}
|
||||
</span>
|
||||
<span className="font-semibold tabular-nums ml-2">
|
||||
{d.passengers}
|
||||
</span>
|
||||
{data.byDestination.map(d => (
|
||||
<div key={d.stationName} className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground truncate">{d.stationName}</span>
|
||||
<span className="font-semibold tabular-nums ml-2">{d.passengers}</span>
|
||||
</div>
|
||||
))}
|
||||
{data.byDestination.length === 0 && (
|
||||
<p className="text-xs text-muted-foreground">No data</p>
|
||||
)}
|
||||
{data.byDestination.length === 0 && <p className="text-xs text-muted-foreground">No data</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -461,101 +258,60 @@ export default function PassengersReportPage() {
|
||||
)}
|
||||
|
||||
{/* Passenger List tab */}
|
||||
{tab === "list" && (
|
||||
<div className="card space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
className="input max-w-sm"
|
||||
placeholder="Search by name, booking ref or ID…"
|
||||
value={listSearch}
|
||||
onChange={(e) => setListSearch(e.target.value)}
|
||||
/>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border text-left text-xs text-muted-foreground uppercase tracking-wider">
|
||||
<th className="pb-2 pr-4">#</th>
|
||||
<th className="pb-2 pr-4">Name</th>
|
||||
<th className="pb-2 pr-4">Category</th>
|
||||
<th className="pb-2 pr-4">ID / Passport</th>
|
||||
<th className="pb-2 pr-4">Seat</th>
|
||||
<th className="pb-2 pr-4">Coach</th>
|
||||
<th className="pb-2 pr-4">Booking Ref</th>
|
||||
<th className="pb-2">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{filteredList.map((p, i) => (
|
||||
<tr
|
||||
key={`${p.bookingRef}-${i}`}
|
||||
className="hover:bg-muted/30"
|
||||
>
|
||||
<td className="py-2 pr-4 text-muted-foreground tabular-nums">
|
||||
{i + 1}
|
||||
</td>
|
||||
<td className="py-2 pr-4 font-medium">
|
||||
{p.passengerName}
|
||||
</td>
|
||||
<td className="py-2 pr-4">
|
||||
<span
|
||||
className={`text-xs font-semibold px-1.5 py-0.5 rounded ${p.passengerCategory === "CHILD" ? "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"}`}
|
||||
>
|
||||
{p.passengerCategory}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-muted-foreground text-xs">
|
||||
{p.idDocumentNumber ?? p.passportNumber ?? "—"}
|
||||
{p.passportCountry && (
|
||||
<span className="ml-1 text-muted-foreground/60">
|
||||
({p.passportCountry})
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2 pr-4 font-mono text-xs">
|
||||
{p.seatLabel ?? "—"}
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-muted-foreground">
|
||||
{p.coachNumber ?? "—"}
|
||||
{p.coachType && (
|
||||
<span className="ml-1 text-xs text-muted-foreground/60">
|
||||
({p.coachType})
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2 pr-4 font-mono text-xs">
|
||||
{p.bookingRef}
|
||||
</td>
|
||||
<td className="py-2">
|
||||
<span
|
||||
className={`text-xs font-semibold px-1.5 py-0.5 rounded ${p.bookingStatus === "BOARDED" ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400" : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"}`}
|
||||
>
|
||||
{p.bookingStatus}
|
||||
</span>
|
||||
</td>
|
||||
{tab === 'list' && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<input
|
||||
type="text"
|
||||
className="input max-w-sm flex-1"
|
||||
placeholder="Search by name or booking ref…"
|
||||
value={listSearch}
|
||||
onChange={e => setListSearch(e.target.value)}
|
||||
/>
|
||||
{passengerList.length > 0 && (
|
||||
<ActionButton icon={Download} variant="secondary" onClick={doExportList}>Export CSV</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
<div className="card p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border text-left text-xs text-muted-foreground uppercase tracking-wider">
|
||||
<th className="px-4 py-3">#</th>
|
||||
<th className="px-4 py-3">Name</th>
|
||||
<th className="px-4 py-3">Coach · Seat</th>
|
||||
<th className="px-4 py-3">Origin</th>
|
||||
<th className="px-4 py-3">Destination</th>
|
||||
<th className="px-4 py-3">Date</th>
|
||||
<th className="px-4 py-3">Booking Ref</th>
|
||||
</tr>
|
||||
))}
|
||||
{filteredList.length === 0 && (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={8}
|
||||
className="py-8 text-center text-sm text-muted-foreground"
|
||||
>
|
||||
No passengers found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{filteredList.map((p, i) => (
|
||||
<tr key={`${p.bookingRef}-${i}`} className="hover:bg-muted/30">
|
||||
<td className="px-4 py-3 text-muted-foreground tabular-nums">{i + 1}</td>
|
||||
<td className="px-4 py-3 font-medium">{p.passengerName}</td>
|
||||
<td className="px-4 py-3 font-mono text-xs">{p.coachSeat}</td>
|
||||
<td className="px-4 py-3 text-muted-foreground">{p.origin}</td>
|
||||
<td className="px-4 py-3 text-muted-foreground">{p.destination}</td>
|
||||
<td className="px-4 py-3 text-xs text-muted-foreground whitespace-nowrap">{p.departureAt ? formatDateTime(p.departureAt) : '—'}</td>
|
||||
<td className="px-4 py-3 font-mono text-xs">{p.bookingRef}</td>
|
||||
</tr>
|
||||
))}
|
||||
{filteredList.length === 0 && (
|
||||
<tr><td colSpan={7} className="py-8 text-center text-sm text-muted-foreground">No passengers found</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!report && !isFetching && scheduleId && (
|
||||
<div className="card py-12 text-center text-muted-foreground">
|
||||
No data found for this schedule.
|
||||
</div>
|
||||
{!data && !isLoading && scheduleId && (
|
||||
<div className="card py-12 text-center text-muted-foreground">No data found for this schedule.</div>
|
||||
)}
|
||||
|
||||
{!scheduleId && (
|
||||
|
||||
@@ -184,7 +184,7 @@ export default function SchedulesPage() {
|
||||
plannedDepartureAt: eatDateStr && depTimePart ? `${eatDateStr}T${depTimePart}` : '',
|
||||
};
|
||||
}));
|
||||
}, [editRouteDetail, editingSchedule?.id, editForm.departureAt]);
|
||||
}, [editRouteDetail, editingSchedule?.id, editForm.departureAt]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const [filters, setFilters] = useState({
|
||||
search: '',
|
||||
|
||||
Reference in New Issue
Block a user