Merge branch 'main' of https://github.com/Tria-plc/edr-platform into alpha

apps/edr-passenger-api/src/modules/reports/reports.service.ts

@@ -442,9 +442,12 @@ export class ReportsService {
             status: true,
             originStationId: true,
             destinationStationId: true,
+            totalMinor: true,
+            currency: true,
+            _count: { select: { seats: true } },
           },
         },
-        seat: { include: { coach: { select: { number: true } } } },
+        seat: { include: { coach: { select: { number: true, coachType: { select: { name: true } } } } } },
       },
       orderBy: [{ seat: { coach: { number: "asc" } } }, { seat: { seatNumber: "asc" } }],
     });
@@ -465,12 +468,19 @@ export class ReportsService {
     return seats.map((bs) => ({
       bookingRef: bs.booking.bookingRef,
       passengerName: bs.passengerName,
-      coachSeat: bs.seat?.coach?.number && bs.seatLabelSnapshot
+      passengerCategory: bs.passengerCategory,
-        ? `${bs.seat.coach.number}·${bs.seatLabelSnapshot}`
+      idDocumentType: bs.idDocumentType,
-        : (bs.seatLabelSnapshot ?? '—'),
+      idDocumentNumber: bs.idDocumentNumber,
-      origin: bs.booking.originStationId ? (stationName.get(bs.booking.originStationId) ?? '—') : '—',
+      passportNumber: bs.passportNumber,
-      destination: bs.booking.destinationStationId ? (stationName.get(bs.booking.destinationStationId) ?? '—') : '—',
+      passportCountry: bs.passportCountry,
-      departureAt: schedule?.departureAt ?? null,
+      seatLabel: bs.seatLabelSnapshot,
+      coachNumber: bs.seat?.coach?.number ?? null,
+      coachType: (bs.seat?.coach as any)?.coachType?.name ?? null,
+      origin: bs.booking.originStationId ? (stationName.get(bs.booking.originStationId) ?? null) : null,
+      destination: bs.booking.destinationStationId ? (stationName.get(bs.booking.destinationStationId) ?? null) : null,
+      amountPaidMinor: bs.booking.totalMinor,
+      currency: bs.booking.currency ?? 'ETB',
+      isGroupBooking: (bs.booking._count?.seats ?? 0) > 1,
     }));
   }
 

apps/edr-passenger-web/backoffice/src/app/reports/passengers/page.tsx

@@ -1,19 +1,44 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
+import { useState } from "react";
-import { useQuery } from '@tanstack/react-query';
+import { useQuery } from "@tanstack/react-query";
-import { Users, Armchair, BarChart3, Train, Download } from 'lucide-react';
+import { Users, Armchair, BarChart3, Train, Download } from "lucide-react";
-import { apiClient } from '@/lib/api-client';
+import { apiClient } from "@/lib/api-client";
-import { formatDateTime } from '@/lib/utils';
+import { formatDateTime } from "@/lib/utils";
-import ActionButton from '@/components/ui/ActionButton';
+import ActionButton from "@/components/ui/ActionButton";
 
-interface ScheduleOption { id: string; label: string; }
+interface ScheduleOption {
+  id: string;
+  label: string;
+}
 
 interface PassengersReport {
-  schedule: { id: string; trainName: string; origin: string; destination: string; departureAt: string; arrivalAt: string; };
+  schedule: {
-  summary: { totalSeats: number; totalPassengers: number; occupancyRate: number };
+    id: string;
-  byCoach: { coachNumber: string; coachType: string; totalSeats: number; booked: number; occupancyRate: number }[];
+    trainName: string;
-  byClass: { className: string; totalSeats: number; booked: number; occupancyRate: number }[];
+    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 }[];
 }
@@ -21,75 +46,143 @@ interface PassengersReport {
 interface PassengerRow {
   bookingRef: string;
   passengerName: string;
-  coachSeat: string;
+  passengerCategory: string;
-  origin: string;
+  idDocumentType: string | null;
-  destination: string;
+  idDocumentNumber: string | null;
-  departureAt: string | null;
+  passportNumber: string | null;
+  passportCountry: string | null;
+  seatLabel: string | null;
+  coachNumber: string | null;
+  coachType: string | null;
+  origin: string | null;
+  destination: string | null;
+  amountPaidMinor: number;
+  currency: string;
+  isGroupBooking: boolean;
 }
 
-type Tab = 'occupancy' | 'list';
+type Tab = "occupancy" | "list";
 
 export default function PassengersReportPage() {
-  const [scheduleId, setScheduleId] = useState('');
+  const [scheduleId, setScheduleId] = useState("");
-  const [tab, setTab] = useState<Tab>('occupancy');
+  const [tab, setTab] = useState<Tab>("occupancy");
-  const [listSearch, setListSearch] = useState('');
+  const [listSearch, setListSearch] = useState("");
-  const [filterCoach, setFilterCoach] = useState('');
+  const [filterCoach, setFilterCoach] = useState("");
-  const [filterOrigin, setFilterOrigin] = useState('');
+  const [filterOrigin, setFilterOrigin] = useState("");
 
-  const { data: schedulesRaw, isLoading: loadingSchedules } = useQuery<ScheduleOption[]>({
+  const { data: schedulesRaw, isLoading: loadingSchedules } = useQuery<
-    queryKey: ['report-schedules'],
+    ScheduleOption[]
-    queryFn: () => apiClient.get('/reports/schedules'),
+  >({
+    queryKey: ["report-schedules"],
+    queryFn: () => apiClient.get("/reports/schedules"),
   });
   const schedules = schedulesRaw ?? [];
 
   const { data, isLoading, isError } = useQuery<PassengersReport>({
-    queryKey: ['passengers-report', scheduleId],
+    queryKey: ["passengers-report", scheduleId],
-    queryFn: () => apiClient.get(`/reports/passengers?scheduleId=${scheduleId}`),
+    queryFn: () =>
+      apiClient.get(`/reports/passengers?scheduleId=${scheduleId}`),
     enabled: !!scheduleId,
   });
 
-  const { data: passengerList = [], isLoading: listLoading } = useQuery<PassengerRow[]>({
+  const { data: passengerList = [], isLoading: listLoading } = useQuery<
-    queryKey: ['passengers-list', scheduleId],
+    PassengerRow[]
-    queryFn: () => apiClient.get(`/reports/passengers/list?scheduleId=${scheduleId}`),
+  >({
+    queryKey: ["passengers-list", scheduleId],
+    queryFn: () =>
+      apiClient.get(`/reports/passengers/list?scheduleId=${scheduleId}`),
     enabled: !!scheduleId,
   });
 
-  const filteredList = listSearch.trim()
+  const coachOptions = [
-    ? passengerList.filter(p =>
+    ...new Set(passengerList.map((p) => p.coachNumber).filter(Boolean)),
-        p.passengerName.toLowerCase().includes(listSearch.toLowerCase()) ||
+  ].sort() as string[];
-        p.bookingRef.toLowerCase().includes(listSearch.toLowerCase()),
+  const originOptions = [
-      )
+    ...new Set(passengerList.map((p) => p.origin).filter(Boolean)),
-    : passengerList;
+  ].sort() as string[];
+
+  const filteredList = passengerList
+    .filter((p) => {
+      if (filterCoach && p.coachNumber !== filterCoach) return false;
+      if (filterOrigin && p.origin !== filterOrigin) return false;
+      if (listSearch.trim()) {
+        const q = listSearch.toLowerCase();
+        return (
+          p.passengerName.toLowerCase().includes(q) ||
+          p.bookingRef.toLowerCase().includes(q) ||
+          (p.idDocumentNumber ?? "").toLowerCase().includes(q) ||
+          (p.passportNumber ?? "").toLowerCase().includes(q)
+        );
+      }
+      return true;
+    })
+    .sort((a, b) => a.bookingRef.localeCompare(b.bookingRef));
 
   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');
+    const a = document.createElement("a");
-    a.href = url; a.download = filename; a.click();
+    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}%`]);
+    const rows = data.byCoach.map((c) => [
-    downloadCsv([['Coach', 'Type', 'Total Seats', 'Booked', 'Occupancy'].join(','), ...rows.map(r => r.join(','))].join('\n'), `occupancy-${scheduleId}.csv`);
+      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 = ['#', 'Name', 'Coach·Seat', 'Origin', 'Destination', 'Date', 'Booking Ref'];
+    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, '""')}"`)
+        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`,
     );
-    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>
+        <h1 className="text-3xl font-bold text-foreground">
-        <p className="text-muted-foreground mt-1">Occupancy and passenger breakdown for a schedule</p>
+          Passengers Report
+        </h1>
+        <p className="text-muted-foreground mt-1">
+          Occupancy and passenger breakdown for a schedule
+        </p>
       </div>
 
       {/* Schedule selector */}
@@ -100,19 +193,41 @@ export default function PassengersReportPage() {
             <select
               className="input"
               value={scheduleId}
-              onChange={e => { setScheduleId(e.target.value); setTab('occupancy'); setListSearch(''); setFilterCoach(''); setFilterOrigin(''); }}
+              onChange={(e) => {
+                setScheduleId(e.target.value);
+                setTab("occupancy");
+                setListSearch("");
+                setFilterCoach("");
+                setFilterOrigin("");
+              }}
               disabled={loadingSchedules}
             >
-              <option value="">{loadingSchedules ? 'Loading schedules…' : 'Select a schedule…'}</option>
+              <option value="">
-              {schedules.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
+                {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' && (
+          {data && tab === "occupancy" && (
-            <ActionButton icon={Download} variant="secondary" onClick={doExportOccupancy}>Export CSV</ActionButton>
+            <ActionButton
+              icon={Download}
+              variant="secondary"
+              onClick={doExportOccupancy}
+            >
+              Export CSV
+            </ActionButton>
           )}
         </div>
-        {(isLoading || listLoading) && <p className="text-xs text-muted-foreground mt-2">Loading…</p>}
+        {(isLoading || listLoading) && (
-        {isError && <p className="text-xs text-red-500 mt-2">Failed to load report.</p>}
+          <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>
 
       {data && (
@@ -125,7 +240,8 @@ export default function PassengersReportPage() {
             <div>
               <p className="font-semibold">{data.schedule.trainName}</p>
               <p className="text-sm text-muted-foreground">
-                {data.schedule.origin} → {data.schedule.destination} · Departure: {formatDateTime(data.schedule.departureAt)}
+                {data.schedule.origin} → {data.schedule.destination} ·
+                Departure: {formatDateTime(data.schedule.departureAt)}
               </p>
             </div>
           </div>
@@ -133,51 +249,75 @@ export default function PassengersReportPage() {
           {/* Tabs */}
           <div className="border-b border-border flex">
             <button
-              onClick={() => setTab('occupancy')}
+              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'}`}
+              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')}
+              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'}`}
+              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>
+                    <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                    <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>
+                      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>
+                    <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                    <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>
+                      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>
+                    <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                    <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>
+                      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>
@@ -190,18 +330,31 @@ 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 font-semibold">
-                          <td className="py-2 pr-4 text-muted-foreground">{c.coachType}</td>
+                            {c.coachNumber}
-                          <td className="py-2 pr-4 text-right tabular-nums">{c.totalSeats}</td>
+                          </td>
-                          <td className="py-2 pr-4 text-right tabular-nums">{c.booked}</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>
@@ -213,46 +366,77 @@ 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 => (
+                    {data.byOrigin.map((o) => (
-                      <div key={o.stationName} className="flex justify-between text-sm">
+                      <div
-                        <span className="text-muted-foreground truncate">{o.stationName}</span>
+                        key={o.stationName}
-                        <span className="font-semibold tabular-nums ml-2">{o.passengers}</span>
+                        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 => (
+                    {data.byDestination.map((d) => (
-                      <div key={d.stationName} className="flex justify-between text-sm">
+                      <div
-                        <span className="text-muted-foreground truncate">{d.stationName}</span>
+                        key={d.stationName}
-                        <span className="font-semibold tabular-nums ml-2">{d.passengers}</span>
+                        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>
@@ -260,7 +444,7 @@ export default function PassengersReportPage() {
           )}
 
           {/* Passenger List tab */}
-          {tab === 'list' && (
+          {tab === "list" && (
             <div className="space-y-4">
               <div className="flex items-center gap-3 flex-wrap">
                 <input
@@ -268,44 +452,110 @@ export default function PassengersReportPage() {
                   className="input max-w-sm flex-1"
                   placeholder="Search by name or booking ref…"
                   value={listSearch}
-                  onChange={e => setListSearch(e.target.value)}
+                  onChange={(e) => setListSearch(e.target.value)}
                 />
                 {passengerList.length > 0 && (
-                  <ActionButton icon={Download} variant="secondary" onClick={doExportList}>Export CSV</ActionButton>
+                  <ActionButton
+                    icon={Download}
+                    variant="secondary"
+                    onClick={doExportList}
+                  >
+                    Export CSV
+                  </ActionButton>
                 )}
               </div>
-              <div className="card p-0">
+              <div className="overflow-x-auto">
-                <div className="overflow-x-auto">
+                <table className="w-full text-sm">
-                  <table className="w-full text-sm">
+                  <thead>
-                    <thead>
+                    <tr className="border-b border-border text-left text-xs text-muted-foreground uppercase tracking-wider">
-                      <tr className="border-b border-border text-left text-xs text-muted-foreground uppercase tracking-wider">
+                      <th className="pb-2 pr-4">Name</th>
-                        <th className="px-4 py-3">#</th>
+                      <th className="pb-2 pr-4">Nationality</th>
-                        <th className="px-4 py-3">Name</th>
+                      <th className="pb-2 pr-4">Coach · Seat</th>
-                        <th className="px-4 py-3">Coach · Seat</th>
+                      <th className="pb-2 pr-4">Trip</th>
-                        <th className="px-4 py-3">Origin</th>
+                      <th className="pb-2 pr-4">Amount Paid</th>
-                        <th className="px-4 py-3">Destination</th>
+                      <th className="pb-2">Booking Ref</th>
-                        <th className="px-4 py-3">Date</th>
+                    </tr>
-                        <th className="px-4 py-3">Booking Ref</th>
+                  </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 font-medium">
+                          {p.passengerName}
+                        </td>
+                        <td className="py-2 pr-4 text-xs">
+                          {p.passportNumber ? (
+                            <>
+                              <span className="text-muted-foreground">
+                                {p.passportCountry ?? "Intl"}
+                              </span>
+                              <span className="ml-1 font-mono">
+                                {p.passportNumber}
+                              </span>
+                            </>
+                          ) : (
+                            <span className="text-muted-foreground">
+                              {p.idDocumentNumber ?? "—"}
+                            </span>
+                          )}
+                        </td>
+                        <td className="py-2 pr-4 font-mono text-xs">
+                          {p.coachNumber && p.seatLabel ? (
+                            <>
+                              {p.coachNumber} · {p.seatLabel}
+                              {p.coachType && (
+                                <span className="font-sans text-muted-foreground ml-1">
+                                  ({p.coachType})
+                                </span>
+                              )}
+                            </>
+                          ) : (
+                            (p.coachNumber ?? p.seatLabel ?? "—")
+                          )}
+                        </td>
+                        <td className="py-2 pr-4 text-muted-foreground text-xs">
+                          {p.origin && p.destination
+                            ? `${p.origin} → ${p.destination}`
+                            : (p.origin ?? p.destination ?? "—")}
+                        </td>
+                        <td className="py-2 pr-4 text-xs">
+                          <div className="flex items-center gap-1.5">
+                            <span className="tabular-nums font-medium">
+                              {(p.amountPaidMinor / 100).toLocaleString(
+                                "en-US",
+                                {
+                                  minimumFractionDigits: 2,
+                                  maximumFractionDigits: 2,
+                                },
+                              )}{" "}
+                              {p.currency}
+                            </span>
+                            {p.isGroupBooking && (
+                              <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-semibold bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
+                                Group
+                              </span>
+                            )}
+                          </div>
+                        </td>
+                        <td className="py-2 font-mono text-xs">
+                          {p.bookingRef}
+                        </td>
                       </tr>
-                    </thead>
+                    ))}
-                    <tbody className="divide-y divide-border">
+                    {filteredList.length === 0 && (
-                      {filteredList.map((p, i) => (
+                      <tr>
-                        <tr key={`${p.bookingRef}-${i}`} className="hover:bg-muted/30">
+                        <td
-                          <td className="px-4 py-3 text-muted-foreground tabular-nums">{i + 1}</td>
+                          colSpan={6}
-                          <td className="px-4 py-3 font-medium">{p.passengerName}</td>
+                          className="py-8 text-center text-sm text-muted-foreground"
-                          <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>
+                          No passengers found
-                          <td className="px-4 py-3 text-muted-foreground">{p.destination}</td>
+                        </td>
-                          <td className="px-4 py-3 text-xs text-muted-foreground whitespace-nowrap">{p.departureAt ? formatDateTime(p.departureAt) : '—'}</td>
+                      </tr>
-                          <td className="px-4 py-3 font-mono text-xs">{p.bookingRef}</td>
+                    )}
-                        </tr>
+                  </tbody>
-                      ))}
+                </table>
-                      {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>
           )}
@@ -313,7 +563,9 @@ export default function PassengersReportPage() {
       )}
 
       {!data && !isLoading && scheduleId && (
-        <div className="card py-12 text-center text-muted-foreground">No data found for this schedule.</div>
+        <div className="card py-12 text-center text-muted-foreground">
+          No data found for this schedule.
+        </div>
       )}
 
       {!scheduleId && (