Merge remote-tracking branch 'origin/dev' into tests

Merging remote repo

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

@@ -234,7 +234,7 @@ function DashboardPageContent() {
       )}
 
       {/* Stat cards */}
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
         <StatCard
           icon={
             <BookOpen className="h-4 w-4 text-blue-600 dark:text-blue-400" />
@@ -257,7 +257,28 @@ function DashboardPageContent() {
             },
           ]}
         />
-        {/* Tickets card hidden temporarily */}
+        <StatCard
+          icon={
+            <Ticket className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
+          }
+          iconBg="bg-emerald-100 dark:bg-emerald-900/30"
+          label="Tickets"
+          total={stats?.totalTickets ?? 0}
+          loading={statsLoading}
+          href="/tickets"
+          rows={[
+            {
+              label: "Regular",
+              value: stats?.totalNormalTickets ?? 0,
+              href: "/tickets",
+            },
+            {
+              label: "Package",
+              value: stats?.totalPackageTickets ?? 0,
+              href: "/tickets",
+            },
+          ]}
+        />
 
         {/* Revenue card */}
         <div className="card flex flex-col gap-3">

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

@@ -10,7 +10,7 @@ import ActionButton from '@/components/ui/ActionButton';
 import ConfirmDialog from '@/components/ui/ConfirmDialog';
 import Modal from '@/components/ui/Modal';
 import Image from 'next/image';
-import { ticketsApi, apiClient, stationsApi, excessBaggageApi } from '@/lib/api';
+import { ticketsApi, apiClient, stationsApi, excessBaggageApi, bookingsApi } from '@/lib/api';
 import Pagination from '@/components/ui/Pagination';
 import { formatDateTime, formatCurrency, formatDateTimeShort } from '@/lib/utils';
 import { useAuthStore } from '@/lib/auth-store';
@@ -100,10 +100,36 @@ export default function TicketsPage() {
 
   const [generateMissingResult, setGenerateMissingResult] = useState<any>(null);
 
+  const { data: hasMissingTickets } = useQuery({
+    queryKey: ['bookings-missing-tickets'],
+    queryFn: async () => {
+      const res = await bookingsApi.getAll({ status: 'CONFIRMED', paymentStatus: 'SUCCEEDED', take: 50 });
+      const items: any[] = (res as any)?.items ?? (Array.isArray(res) ? res : []);
+      return items.some((b: any) => !b.tickets?.length);
+    },
+    refetchInterval: 30_000,
+  });
+
   const generateMissingMutation = useMutation({
-    mutationFn: () => ticketsApi.generateMissing(),
+    mutationFn: async () => {
+      let totalGenerated = 0;
+      let totalFailed = 0;
+      let totalProcessed = 0;
+      let remaining = 1;
+
+      while (remaining > 0) {
+        const result: any = await ticketsApi.generateMissing(10);
+        totalGenerated += result.generated ?? 0;
+        totalFailed += result.failed ?? 0;
+        totalProcessed += result.processed ?? 0;
+        remaining = result.remaining ?? 0;
+      }
+
+      return { generated: totalGenerated, processed: totalProcessed, failed: totalFailed };
+    },
     onSuccess: (result: any) => {
       queryClient.invalidateQueries({ queryKey: ['tickets'] });
+      queryClient.invalidateQueries({ queryKey: ['bookings-missing-tickets'] });
       setGenerateMissingResult(result);
       setSuccessMessage(`Generated ${result.generated} ticket(s) for ${result.processed} booking(s)${result.failed ? ` (${result.failed} failed)` : ''}`);
       setTimeout(() => setSuccessMessage(''), 6000);
@@ -562,14 +588,16 @@ export default function TicketsPage() {
           <p className="text-muted-foreground">Manage tickets and validations</p>
         </div>
         <div className="flex items-center gap-2">
-          <ActionButton
-            icon={Download}
-            variant="secondary"
-            loading={generateMissingMutation.isPending}
-            onClick={() => generateMissingMutation.mutate()}
-          >
-            Generate Missing
-          </ActionButton>
+          {hasMissingTickets && (
+            <ActionButton
+              icon={Download}
+              variant="secondary"
+              loading={generateMissingMutation.isPending}
+              onClick={() => generateMissingMutation.mutate()}
+            >
+              Generate Missing
+            </ActionButton>
+          )}
           <ActionButton icon={Download} variant="export" onClick={() => setExportModalOpen(true)}>Export</ActionButton>
         </div>
       </div>

apps/edr-passenger-web/backoffice/src/lib/api/index.ts

@@ -234,7 +234,7 @@ export const ticketsApi = {
     return Array.isArray(response) ? { items: response } : response;
   },
   getById: (id: string) => apiClient.get<any>(`/tickets/${id}`),
-  generateMissing: () => apiClient.post<any>('/tickets/generate-missing', {}),
+  generateMissing: (limit = 10) => apiClient.post<any>(`/tickets/generate-missing?limit=${limit}`, {}),
   validate: (ticketId: string, data: any) => apiClient.post<any>(`/tickets/${ticketId}/validate`, data),
   scanAndBoard: (qrCodeOrRef: string, data: any) => apiClient.post<any>(`/tickets/scan-board/${encodeURIComponent(qrCodeOrRef)}`, data),
   regenerate: (ticketId: string) => apiClient.post<any>(`/tickets/${ticketId}/regenerate`),

apps/edr-passenger-web/portal/src/app/booking/confirmation/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 export const dynamic = "force-dynamic";
+export const fetchCache = "force-no-store";
 
 import { useRouter } from "next/navigation";
 import { useBookingStore } from "@/lib/booking-store";
@@ -105,15 +106,8 @@ export default function ConfirmationPage() {
     // common) as normal pending state forever, since a caught error that returns data
     // looks like a success to React Query and never gets retried.
     queryFn: (): Promise<BookingWithTicket> => apiClient.get(`/bookings/${bookingId}`),
-    // Payment status must never be served from a stale cache — the app-wide default
-    // (providers.tsx) is a 60s staleTime, which would otherwise block React Query's
-    // own refetch-on-window-focus from firing (it only refetches stale data). Without
-    // this override, a tab left open past a payment completing can sit showing
-    // "pending" long after it's actually confirmed, even after being refocused,
-    // until the interval below happens to tick — which browsers throttle heavily in
-    // backgrounded tabs, so that can take a very long time.
     staleTime: 0,
-    enabled: !!bookingId,
+    enabled: !!bookingId && typeof window !== 'undefined',
     // Keep polling after CONFIRMED until tickets are issued — ticket generation runs
     // async after the booking transaction commits (see finalizePaymentSuccess in
     // payments.service.ts), so the first CONFIRMED fetch often returns an empty
@@ -143,7 +137,7 @@ export default function ConfirmationPage() {
   const { data: intentStatus } = useQuery<any>({
     queryKey: ["payment-intent-status", bookingId],
     queryFn: () => apiClient.get(`/payments/intents/${bookingId}`),
-    enabled: _booking?.status === "PENDING_PAYMENT" && !!bookingId,
+    enabled: _booking?.status === "PENDING_PAYMENT" && !!bookingId && typeof window !== 'undefined',
     staleTime: 0,
     refetchInterval: () =>
       Date.now() - mountTimeRef.current < CONFIRMATION_GRACE_PERIOD_MS
@@ -155,7 +149,7 @@ export default function ConfirmationPage() {
     if (intentStatus?.status === "SUCCEEDED") {
       refetchBooking();
     }
-  }, [intentStatus?.status]);
+  }, [intentStatus?.status, refetchBooking]);
 
   // Only trust an actually-confirmed booking to show ticket numbers / a "CONFIRMED" badge —
   // a gateway redirect back here does not mean payment succeeded (see payment return pages).

apps/edr-passenger-web/portal/src/app/booking/detail/page.tsx

@@ -128,6 +128,7 @@ function BookingDetailContent() {
     ) {
       apiClient.post(`/tickets/generate/${booking.id}`, {}).then(() => refetch()).catch(() => {});
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [booking?.id, booking?.status, booking?.tickets?.length]);
 
   const { data: paymentMethods } = useQuery<any[]>({
@@ -151,6 +152,7 @@ function BookingDetailContent() {
     if (intentStatus?.status === "SUCCEEDED") {
       refetch();
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [intentStatus?.status]);
 
   const selectedPaymentMethod =

apps/edr-passenger-web/portal/src/app/booking/review/page.tsx

@@ -94,14 +94,6 @@ export default function ReviewPage() {
     return suffix ? `${base}${suffix}` : base;
   };
 
-  // The seat class/category is chosen once per leg (coach type selected on /booking/seats),
-  // so every seat on that leg shares it — no need to look it up per-seat.
-  const formatSeatClass = (schedule: any): string => {
-    const raw = schedule?.seatClassName;
-    if (!raw) return '';
-    return String(raw).replace(/_/g, ' ');
-  };
-
   useEffect(() => {
     const fetchSeatDetails = async () => {
       try {
@@ -974,9 +966,6 @@ const adultPassengerCount = searchCriteria?.adultCount ?? passengers.filter(p =>
                               {(p as any).outboundCoachNumber && <span className="text-gray-500 dark:text-gray-400">{(p as any).outboundCoachNumber} — </span>}
                               {(p as any).outboundSeatId ? (seatDetails[`outbound-${(p as any).outboundSeatId}`] || 'Loading...') : (isPkgFreeChild(i) || (!packageId && isChild(p) && isFirstChild(passengers, i)) ? '—' : 'Auto-assign')}
                             </p>
-                            {(p as any).outboundSeatId && (
-                              <p className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">{formatSeatClass(outboundSchedule)}</p>
-                            )}
                           </div>
                           <div className="bg-gray-50 dark:bg-gray-800 rounded-lg px-3 py-2 text-right">
                             <p className="text-xs text-gray-500 dark:text-gray-400">Return</p>
@@ -984,9 +973,6 @@ const adultPassengerCount = searchCriteria?.adultCount ?? passengers.filter(p =>
                               {(p as any).inboundCoachNumber && <span className="text-gray-500 dark:text-gray-400">{(p as any).inboundCoachNumber} — </span>}
                               {(p as any).inboundSeatId ? (seatDetails[`inbound-${(p as any).inboundSeatId}`] || 'Loading...') : (isPkgFreeChild(i) || (!packageId && isChild(p) && isFirstChild(passengers, i)) ? '—' : 'Auto-assign')}
                             </p>
-                            {(p as any).inboundSeatId && (
-                              <p className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">{formatSeatClass(inboundSchedule)}</p>
-                            )}
                           </div>
                         </div>
                       ) : (
@@ -996,9 +982,6 @@ const adultPassengerCount = searchCriteria?.adultCount ?? passengers.filter(p =>
                             {p.coachNumber && <span className="text-gray-500 dark:text-gray-400">{p.coachNumber} — </span>}
                             {p.seatId ? (seatDetails[p.seatId] || 'Loading...') : (isPkgFreeChild(i) || (!packageId && isChild(p) && isFirstChild(passengers, i)) ? '—' : 'Auto-assign')}
                           </p>
-                          {p.seatId && (
-                            <p className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">{formatSeatClass(selectedSchedule)}</p>
-                          )}
                         </div>
                       )}
                     </div>

apps/edr-passenger-web/portal/src/app/packages/[id]/page.tsx

@@ -10,7 +10,6 @@ import {
   ChevronLeft,
   Calendar,
   MapPin,
-  Users,
   Clock,
   Train,
   Bus,
@@ -18,7 +17,6 @@ import {
   AlertCircle,
   Loader2,
   ArrowRight,
-  Tag,
   Shield,
   X,
   Star,
@@ -201,8 +199,6 @@ function JourneyCard({ schedule, label }: { schedule: Schedule; label: string })
             <p className="text-xs text-gray-400">{fmt(schedule.arrivalAt, { weekday: "short", month: "short", day: "numeric" })}</p>
           </div>
         </div>
-
-        <p className="mt-2 text-xs text-gray-400">{schedule.train.name}</p>
       </div>
     </div>
   );
@@ -699,8 +695,6 @@ export default function PackageDetailPage() {
 
   const origin = pkg.outboundSchedule?.originStation;
   const destination = pkg.outboundSchedule?.destinationStation;
-  const availableSeats = pkg.totalCapacity - pkg.bookedCount;
-
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
       {/* Passenger count modal */}
@@ -770,36 +764,6 @@ export default function PackageDetailPage() {
           {/* ── Main content ── */}
           <div className="lg:col-span-2 space-y-5">
 
-            {/* Quick info strip */}
-            <div className="grid grid-cols-3 gap-3">
-              <div className="bg-white dark:bg-gray-900 rounded-xl p-4 border border-gray-100 dark:border-gray-800 text-center">
-                <Calendar className="w-5 h-5 text-primary mx-auto mb-1" />
-                <p className="text-[10px] text-gray-400 uppercase tracking-wide">Departure</p>
-                <p className="text-xs font-bold text-gray-800 dark:text-white mt-0.5">
-                  {fmt(pkg.departureTime, { month: "short", day: "numeric" })}
-                </p>
-              </div>
-              <div className="bg-white dark:bg-gray-900 rounded-xl p-4 border border-gray-100 dark:border-gray-800 text-center">
-                <Users className="w-5 h-5 text-primary mx-auto mb-1" />
-                <p className="text-[10px] text-gray-400 uppercase tracking-wide">Available</p>
-                <p className={`text-xs font-bold mt-0.5 ${availableSeats <= 20 ? "text-orange-500" : "text-gray-800 dark:text-white"}`}>
-                  {availableSeats} seats
-                </p>
-              </div>
-              <div className="bg-white dark:bg-gray-900 rounded-xl p-4 border border-gray-100 dark:border-gray-800 text-center">
-                <Tag className="w-5 h-5 text-primary mx-auto mb-1" />
-                <p className="text-[10px] text-gray-400 uppercase tracking-wide">From</p>
-                <p className="text-xs font-bold text-gray-800 dark:text-white mt-0.5">
-                  {pkg.priceTiers.length
-                    ? formatPrice(
-                      Math.min(...pkg.priceTiers.map((t) => t.priceMinor)) * (isRoundTripPkg ? 2 : 1),
-                      pkg.priceTiers[0].currency,
-                    )
-                    : "—"}
-                </p>
-              </div>
-            </div>
-
             {/* Description */}
             {pkg.description && (
               <div className="bg-white dark:bg-gray-900 rounded-2xl p-6 border border-gray-100 dark:border-gray-800">
@@ -859,9 +823,6 @@ export default function PackageDetailPage() {
                 <InfoRow icon={<MapPin className="w-4 h-4 text-primary" />} label="Arrival">
                   {fmtTime(pkg.arrivalTime)} · {fmt(pkg.arrivalTime)}
                 </InfoRow>
-                <InfoRow icon={<Users className="w-4 h-4 text-primary" />} label="Total Capacity">
-                  {pkg.totalCapacity} seats ({pkg.bookedCount} booked)
-                </InfoRow>
                 {pkg.coachConfiguration && (
                   <InfoRow icon={<Train className="w-4 h-4 text-primary" />} label="Coach Config">
                     {pkg.coachConfiguration.trim()}