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

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

@@ -140,7 +140,7 @@ export default function PassengersPage() {
         </div>
       ),
     },
-    { key: 'phone', label: 'Phone', sortable: true, render: (p: any) => p.phone || 'N/A'  },
+    { key: 'phone', label: 'Phone', sortable: true, render: (p: any) => p.phone || p.passenger?.user?.phone || '—' },
     { key: 'nationality', label: 'Nationality', sortable: true, render: (p: any) => p.nationality || 'N/A' },
     { key: 'gender', label: 'Gender', sortable: true, render: (p: any) => p.gender || 'N/A' },
     { key: 'dateOfBirth', label: 'Date of Birth', sortable: true, render: (p: any) => p.dateOfBirth ? formatDate(p.dateOfBirth) : 'N/A' },

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

@@ -166,7 +166,10 @@ export default function TariffRatesPage() {
     },
     {
       key: 'coachType', label: 'Coach Type',
-      render: (c: any) => <span className="text-sm">{c.coachType?.name || c.coachTypeId}</span>,
+      render: (c: any) => {
+        const ct = coachTypesArray.find((t: any) => t.id === c.coachTypeId);
+        return <span className="text-sm">{ct ? `${ct.code} — ${ct.name}` : c.coachTypeId}</span>;
+      },
     },
     {
       key: 'bedPosition', label: 'Bed Position',

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

@@ -343,15 +343,12 @@ export default function TicketsPage() {
       key: 'contact',
       label: 'Contact',
       render: (ticket: any) => {
-        const phone = ticket.booking?.passenger?.phone || 'N/A';
+        const phone = ticket.booking?.contactPhone || ticket.booking?.passenger?.phone || '—';
-        const email = ticket.booking?.passenger?.email || 'N/A';
+        const email = ticket.booking?.contactEmail || ticket.booking?.passenger?.email || '—';
-        
         return (
           <div>
             <div className="font-medium">{phone}</div>
-            <div className="text-sm text-muted-foreground">
+            <div className="text-xs text-muted-foreground truncate" title={email}>{email}</div>
-              <div className="text-xs text-muted-foreground truncate" title={email}>{email}</div>
-            </div>
           </div>
         );
       },

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

@@ -10,7 +10,10 @@ export const passengersApi = {
     if (filters?.role) params.append('role', filters.role);
     if (filters?.page) params.append('page', filters.page.toString());
     if (filters?.pageSize) params.append('pageSize', filters.pageSize.toString());
-    
+    if ((filters as any)?.gender) params.append('gender', (filters as any).gender);
+    if ((filters as any)?.nationality) params.append('nationality', (filters as any).nationality);
+    if ((filters as any)?.dateFrom) params.append('dateFrom', (filters as any).dateFrom);
+    if ((filters as any)?.dateTo) params.append('dateTo', (filters as any).dateTo);
     return apiClient.get<PaginatedResponse<Passenger.IPassenger>>(`/passengers?${params.toString()}`);
   },
 
@@ -21,4 +24,8 @@ export const passengersApi = {
   update: (id: string, data: Partial<Passenger.IPassenger>) => {
     return apiClient.patch<Passenger.IPassenger>(`/passengers/${id}`, data);
   },
+
+  delete: (id: string, cascade = false) => {
+    return apiClient.delete(`/passengers/${id}${cascade ? '?cascade=true' : ''}`);
+  },
 };

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

@@ -72,10 +72,10 @@ export default function PaymentPage() {
   // split equally across both legs. This guarantees leg totals are consistent with the
   // per-passenger breakdown rows and the overall reviewed total.
   const outboundBaseFare = isRoundTrip
-    ? (reviewedPassengerFares ?? []).reduce((sum, f) => sum + (f.isFree ? 0 : Math.round(f.fareMinor / 2)), 0)
+    ? (reviewedPassengerFares ?? []).reduce((sum, f) => sum + (f.isFree ? 0 : (f.outboundFareMinor ?? Math.round(f.fareMinor / 2))), 0)
     : 0;
   const inboundBaseFare = isRoundTrip
-    ? (reviewedPassengerFares ?? []).reduce((sum, f) => sum + (f.isFree ? 0 : Math.round(f.fareMinor / 2)), 0)
+    ? (reviewedPassengerFares ?? []).reduce((sum, f) => sum + (f.isFree ? 0 : (f.inboundFareMinor ?? Math.round(f.fareMinor / 2))), 0)
     : 0;
 
   // reviewedPassengerFares / reviewedTotalMinor are the single source of truth for display
@@ -307,11 +307,11 @@ export default function PaymentPage() {
                 <div className="pl-3 space-y-0.5 text-xs text-gray-500 dark:text-gray-400">
                   <div className="flex justify-between">
                     <span>Outbound</span>
-                    <span>{formatFare(Math.round((reviewed?.fareMinor ?? 0) / 2), displayCurrency)}</span>
+                    <span>{formatFare(reviewed?.outboundFareMinor ?? Math.round((reviewed?.fareMinor ?? 0) / 2), displayCurrency)}</span>
                   </div>
                   <div className="flex justify-between">
                     <span>Return</span>
-                    <span>{formatFare(Math.round((reviewed?.fareMinor ?? 0) / 2), displayCurrency)}</span>
+                    <span>{formatFare(reviewed?.inboundFareMinor ?? Math.round((reviewed?.fareMinor ?? 0) / 2), displayCurrency)}</span>
                   </div>
                 </div>
               )}

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

@@ -293,7 +293,17 @@ export default function ResultsPage() {
 
     // For round trip inbound, proceed with both schedules
     if (isRoundTrip && !isOutbound) {
-      setInboundSchedule(scheduleData);
+      // Mirror the outbound's coachTypes (fares) onto the inbound schedule so the
+      // return seat selection page shows the same prices as the outbound leg.
+      const inboundScheduleData = outboundScheduleData
+        ? {
+            ...scheduleData,
+            baseFareAdult: outboundScheduleData.baseFareAdult,
+            baseFareChild: outboundScheduleData.baseFareChild,
+            coachTypes: outboundScheduleData.coachTypes,
+          }
+        : scheduleData;
+      setInboundSchedule(inboundScheduleData);
       setSelectedSchedule(outboundScheduleData); // Set primary as outbound
     } else {
       // For one-way

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

@@ -445,7 +445,9 @@ export default function ReviewPage() {
         const fareMinor = isPackageBooking
           ? (isFreeChild ? 0 : (seatFare ?? pkgFallback))
           : (isFreeChild ? 0 : (seatFare ?? line?.fareMinor ?? 0));
-        return { fareMinor, isFree: isFreeChild };
+        const outboundFareMinor = isRoundTrip ? ((p as any).outboundSeatFareMinor ?? undefined) : undefined;
+        const inboundFareMinor = isRoundTrip ? ((p as any).inboundSeatFareMinor ?? undefined) : undefined;
+        return { fareMinor, isFree: isFreeChild, outboundFareMinor, inboundFareMinor };
       });
       setReviewedTotal(computedTotal, passengerFares);
 
@@ -560,6 +562,14 @@ export default function ReviewPage() {
         const isFreeChild = isPackageBooking
           ? isPkgFreeChild(i)
           : (line?.isFree ?? (isChild(p) && isFirstChild(passengers, i)));
+
+        // Per-leg fares for round trips
+        const outboundFare: number | null = isRoundTrip
+          ? (isPackageBooking ? (packageTierPriceMinor ?? null) : ((p as any).outboundSeatFareMinor ?? null))
+          : null;
+        const inboundFare: number | null = isRoundTrip
+          ? (isPackageBooking ? (packageTierPriceMinor ?? null) : ((p as any).inboundSeatFareMinor ?? null))
+          : null;
         const seatFare = getPassengerSeatFare(p);
         const passengerTotal = isPackageBooking
           ? (isFreeChild ? 0 : (seatFare ?? (isChildPassenger ? pkgChildFare : pkgAdultFare)))
@@ -582,6 +592,19 @@ export default function ReviewPage() {
                 {formatFare(passengerTotal, displayCurrency)}
               </span>
             </div>
+            {/* Round-trip: show outbound + inbound breakdown */}
+            {isRoundTrip && !isFreeChild && (
+              <div className="mt-1 space-y-0.5 pl-2">
+                <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
+                  <span>↗ Outbound</span>
+                  <span>{outboundFare != null ? formatFare(outboundFare, displayCurrency) : '—'}</span>
+                </div>
+                <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
+                  <span>↙ Return</span>
+                  <span>{inboundFare != null ? formatFare(inboundFare, displayCurrency) : '—'}</span>
+                </div>
+              </div>
+            )}
           </div>
         );
       })}

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

@@ -452,16 +452,15 @@ export default function SeatsPage() {
   // the new seat map data has finished loading.
   const applyCoachTypeSwitch = (coach: any, matchedType: any) => {
     const newFare = getCoachTypeFare(matchedType.coachTypeId || matchedType.coachId);
-    const firstClass = matchedType.classes?.[0];
     const newCoachTypeId = matchedType.coachTypeId || matchedType.coachId;
     const updatedSchedule = {
       ...(currentSchedule as any),
       selectedCoachTypeId: newCoachTypeId,
       selectedCoachTypeCode: matchedType.coachTypeCode || coach.type || "",
       selectedCoachTypeName: matchedType.coachTypeName || coach.coachTypeName || coach.typeName || "",
-      selectedSeatClass: firstClass?.name || matchedType.coachTypeName || coach.coachTypeName || "",
+      selectedSeatClass: matchedType.coachTypeName || coach.coachTypeName || "",
-      selectedSeatClassName: firstClass?.name || matchedType.coachTypeName || coach.coachTypeName || "",
+      selectedSeatClassName: matchedType.coachTypeName || coach.coachTypeName || "",
-      seatClassName: firstClass?.name || matchedType.coachTypeName || coach.coachTypeName || "",
+      seatClassName: matchedType.coachTypeName || coach.coachTypeName || "",
       baseFareAdult: newFare ?? (currentSchedule as any)?.baseFareAdult,
       baseFareChild: newFare ?? (currentSchedule as any)?.baseFareChild,
     };
@@ -922,7 +921,7 @@ export default function SeatsPage() {
           const positionLabel = newSeat?.bedPosition
             ? `${newSeat.bedPosition.charAt(0).toUpperCase()}${newSeat.bedPosition.slice(1)} berth`
             : "This seat";
-          const legMultiplier = isRoundTrip ? 2 : 1;
+          const legMultiplier = isPackageBooking && isRoundTrip ? 2 : 1;
 
           setModalState({
             isOpen: true,
@@ -1329,15 +1328,16 @@ export default function SeatsPage() {
   useEffect(() => {
     if (isRoundTrip) {
       if (!outboundSchedule || !inboundSchedule || !passengers.length) {
-        router.push("/booking/search");
+        router.push(isPackageBooking ? "/booking/passengers" : "/booking/search");
       }
     } else {
       if (!selectedSchedule || !passengers.length) {
-        router.push("/booking/search");
+        router.push(isPackageBooking ? "/booking/passengers" : "/booking/search");
       }
     }
   }, [
     isRoundTrip,
+    isPackageBooking,
     selectedSchedule,
     outboundSchedule,
     inboundSchedule,
@@ -1713,7 +1713,7 @@ export default function SeatsPage() {
 
   if (
     isRoundTrip
-      ? !outboundSchedule || !inboundSchedule || !passengers.length
+      ? !outboundSchedule || (!isPackageBooking && !inboundSchedule) || !passengers.length
       : !selectedSchedule || !passengers.length
   )
     return null;

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

@@ -221,7 +221,7 @@ function groupTiersByCoachType(tiers: PriceTier[]): Array<{
     if (!map.has(key)) {
       map.set(key, {
         coachTypeId: ct?.id ?? key,
-        coachTypeName: ct?.name ?? tier.seatType,
+        coachTypeName: ct?.name ?? tier.label ?? tier.seatType,
         coachTypeCode: ct?.code ?? '',
         coachTypeType: ct?.type ?? 'passenger',
         tiers: [],
@@ -270,90 +270,121 @@ function PriceTiersPanel({
   }
 
   return (
-    <div className="bg-white dark:bg-gray-900 rounded-2xl p-5 border border-gray-100 dark:border-gray-800 space-y-3">
+    <div className="bg-white dark:bg-gray-900 rounded-2xl p-5 border border-gray-100 dark:border-gray-800">
-      <h2 className="text-base font-bold text-gray-900 dark:text-white">Select Coach Type</h2>
+      <h2 className="text-base font-bold text-gray-900 dark:text-white mb-4">Choose Coach Type</h2>
-      {groups.map((group) => {
+      <div className="grid grid-cols-1 gap-4">
-        const CoachIcon = getCoachIcon(group.coachTypeType);
+        {groups.map((group, index) => {
-        const allSoldOut = group.tiers.every((t) => t.availableSeats === 0);
+          const CoachIcon = getCoachIcon(group.coachTypeType);
-        const isSelected = selectedId === group.coachTypeId;
+          const allSoldOut = group.tiers.every((t) => t.availableSeats === 0);
-        return (
+          const isSelected = selectedId === group.coachTypeId;
-          <div
+          return (
-            key={group.coachTypeId}
+            <div
-            className={`rounded-xl border-2 overflow-hidden transition-colors ${
+              key={group.coachTypeId}
-              allSoldOut
+              role="button"
-                ? 'border-gray-200 dark:border-gray-700 opacity-50'
+              tabIndex={allSoldOut ? -1 : 0}
-                : isSelected
+              onClick={() => !allSoldOut && setSelectedId(isSelected ? null : group.coachTypeId)}
-                  ? 'border-primary'
+              onKeyDown={(e) => {
-                  : 'border-gray-200 dark:border-gray-700 cursor-pointer hover:border-primary/50'
+                if (!allSoldOut && (e.key === 'Enter' || e.key === ' ')) {
-            }`}
+                  e.preventDefault();
-            onClick={() => !allSoldOut && setSelectedId(isSelected ? null : group.coachTypeId)}
+                  setSelectedId(isSelected ? null : group.coachTypeId);
-          >
+                }
-            {/* Coach type header */}
+              }}
-            <div className="flex items-center gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800/60">
+              className={`group relative w-full p-2 rounded-2xl border-2 text-left transition-all duration-200 ${allSoldOut
-              <div className={`w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                  ? 'border-gray-200 dark:border-gray-700 opacity-50 cursor-not-allowed'
-                isSelected ? 'bg-primary' : 'bg-primary/10'
+                  : isSelected
-              }`}>
+                    ? 'border-primary bg-gradient-to-br from-primary/8 to-primary/3 dark:from-primary/15 dark:to-primary/5 shadow-lg shadow-primary/20 scale-[1.02] cursor-pointer'
-                <CoachIcon className={`w-5 h-5 ${isSelected ? 'text-white' : 'text-primary'}`} />
+                    : 'border-gray-200 dark:border-gray-700 shadow-sm hover:border-primary/40 hover:shadow-md hover:scale-[1.01] bg-white dark:bg-gray-800/50 cursor-pointer'
-              </div>
+                }`}
-              <div className="flex-1 min-w-0">
+              style={{ animation: `fade-in-up 0.3s ease-out ${index * 0.08}s both` }}
-                <p className="text-sm font-bold text-gray-900 dark:text-white">
+            >
-                  {formatCoachTypeLabel(group.coachTypeType)}
+              {/* Radio indicator */}
-                </p>
-                <p className="text-xs text-gray-500 dark:text-gray-400">
-                  From {formatPrice(group.minPrice * priceMultiplier, group.currency)}
-                  {allSoldOut && <span className="ml-2 text-red-500 font-semibold">· Sold out</span>}
-                </p>
-              </div>
               {!allSoldOut && (
-                <div className={`w-5 h-5 rounded-full border-2 flex-shrink-0 flex items-center justify-center ${
+                <span className={`absolute top-4 right-4 w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-all ${isSelected ? 'border-primary' : 'border-gray-300 dark:border-gray-600 group-hover:border-primary/50'
-                  isSelected ? 'border-primary bg-primary' : 'border-gray-300 dark:border-gray-600'
+                  }`}>
-                }`}>
+                  {isSelected && <span className="w-2.5 h-2.5 rounded-full bg-primary" />}
-                  {isSelected && <Check className="w-3 h-3 text-white" />}
+                </span>
-                </div>
               )}
-            </div>
 
-            {/* All available classes for this coach type */}
+              <div className="flex flex-col">
-            <div className="px-4 py-3 space-y-2">
+                <div className="flex items-start gap-2 pr-2">
-              {group.tiers.map((tier) => {
+                  <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 transition-all ${isSelected
-                const soldOut = tier.availableSeats === 0;
+                      ? 'bg-primary/15 dark:bg-primary/25 shadow-inner'
-                return (
+                      : 'bg-gray-100 dark:bg-gray-700 group-hover:bg-primary/10'
-                  <div
+                    }`}>
-                    key={tier.id}
+                    <CoachIcon className={`w-4 h-4 transition-colors ${isSelected ? 'text-primary' : 'text-gray-600 dark:text-gray-400 group-hover:text-primary'
-                    className={`flex items-start gap-2 py-1.5 ${soldOut ? 'opacity-50' : ''}`}
+                      }`} />
-                  >
+                  </div>
-                    <div className="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0 mt-1.5" />
+
-                    <div>
+                  <div className="flex-1 min-w-0">
-                      <p className="text-sm text-gray-700 dark:text-gray-300">{tier.seatType.trim()}</p>
+                    <p className="text-sm font-bold text-gray-700 dark:text-gray-300 tracking-wider">
-                      <p className="text-xs">
+                      {formatCoachTypeLabel(group.coachTypeType)}
-                        <span className="font-bold text-primary">{formatPrice(tier.priceMinor * priceMultiplier, tier.currency)}</span>
+                    </p>
-                        {soldOut ? (
+                    {allSoldOut && (
-                          <span className="ml-2 font-bold text-red-500">Sold out</span>
+                      <span className="text-xs font-bold text-red-500 mt-0.5 block">Sold out</span>
-                        ) : (
+                    )}
-                          <span className="ml-2 text-gray-400">{tier.availableSeats} left</span>
+                    <div className="mt-1 flex items-baseline gap-1">
-                        )}
+                      <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">From</span>
-                      </p>
+                      <span className={`text-sm font-bold tracking-tight ${isSelected ? 'text-primary' : 'text-gray-900 dark:text-white'
+                        }`}>
+                        {((group.minPrice * priceMultiplier) / 100).toFixed(2)}
+                      </span>
+                      <span className="text-sm font-semibold text-gray-600 dark:text-gray-400">{group.currency}</span>
                     </div>
                   </div>
-                );
+                </div>
-              })}
-            </div>
 
-            {/* Book Now — only when this group is selected */}
+                {/* Class options — always visible, matching results page style */}
-            {isSelected && !allSoldOut && (
+                {group.tiers.length > 0 && (
-              <div className="px-4 pb-4">
+                  <div className="mt-2 pt-2 border-t border-gray-200/60 dark:border-gray-700/60">
-                <button
+                    <div className="space-y-1.5">
-                  type="button"
+                      {group.tiers.map((tier) => {
-                  onClick={(e) => { e.stopPropagation(); onBookNow(group.coachTypeId); }}
+                        const soldOut = tier.availableSeats === 0;
-                  className="w-full py-2.5 bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] text-white font-bold text-sm rounded-xl transition-all shadow-md flex items-center justify-center gap-2"
+                        return (
-                >
+                          <div
-                  Book Now <ArrowRight className="w-4 h-4" />
+                            key={tier.id}
-                </button>
+                            className={`flex flex-col py-1 px-1 rounded-lg bg-gray-50/80 dark:bg-gray-800/40 ${soldOut ? 'opacity-50' : ''}`}
+                          >
+                            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{tier.seatType.trim()}</span>
+                            {soldOut ? (
+                              <span className="text-xs font-bold text-red-500 mt-0.5">Sold out</span>
+                            ) : (
+                              <div className="flex items-baseline gap-1 mt-0.5">
+                                <span className="text-sm font-bold tabular-nums text-primary">
+                                  {((tier.priceMinor * priceMultiplier) / 100).toFixed(2)}
+                                </span>
+                                <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">{tier.currency}</span>
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {!isSelected && !allSoldOut && (
+                  <p className="mt-4 pt-3 border-t border-gray-200/60 dark:border-gray-700/60 text-xs text-gray-400 dark:text-gray-500 italic text-center">
+                    Click to select this coach
+                  </p>
+                )}
+
+                {isSelected && !allSoldOut && (
+                  <button
+                    type="button"
+                    onClick={(e) => { e.stopPropagation(); onBookNow(group.coachTypeId); }}
+                    className="mt-3 w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-gradient-to-r from-[rgb(20,113,76)] to-[rgb(16,95,65)] hover:from-[rgb(16,89,60)] hover:to-[rgb(12,75,50)] text-white font-bold text-sm rounded-xl transition-all shadow-md shadow-primary/30 hover:shadow-lg active:scale-[0.98]"
+                  >
+                    Book Now <ArrowRight className="w-4 h-4" />
+                  </button>
+                )}
               </div>
-            )}
+            </div>
-          </div>
+          );
-        );
+        })}
-      })}
+      </div>
+      <style>{`
+        @keyframes fade-in-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
+      `}</style>
     </div>
   );
 }
@@ -407,7 +438,7 @@ function PassengerCountModal({
 
           <div className="px-6 py-3 bg-primary/5 border-b border-primary/10">
             <p className="text-xs text-gray-400 uppercase tracking-wide font-semibold">Coach type</p>
-            <p className="text-sm font-bold text-gray-900 dark:text-white mt-0.5">{tier.seatClass?.coachType?.type ? formatCoachTypeLabel(tier.seatClass.coachType.type) : tier.label.trim()}</p>
+            <p className="text-sm font-bold text-gray-900 dark:text-white mt-0.5">{tier.seatClass?.coachType?.name ?? tier.label.trim()}</p>
             <p className="text-xs text-gray-400 mt-0.5">{remaining} seats remaining · from {formatPrice(minPriceMinor * priceMultiplier, tier.currency)} per adult · 1st child per adult free (no seat)</p>
           </div>
 
@@ -416,26 +447,26 @@ function PassengerCountModal({
               { label: "Adults", sub: `Age 5+ · max ${PKG_MAX_ADULTS}`, value: adultCount, min: 1, max: Math.min(PKG_MAX_ADULTS, remaining), set: (v: number) => { setAdultCount(v); const newMax = Math.min(v * PKG_CHILDREN_PER_ADULT, v + Math.max(0, remaining - v)); setChildCount(c => Math.min(c, newMax)); } },
               { label: "Children", sub: `Under 5 · max ${PKG_CHILDREN_PER_ADULT} per adult · 1st per adult FREE (no seat)`, value: childCount, min: 0, max: Math.min(adultCount * PKG_CHILDREN_PER_ADULT, adultCount + Math.max(0, remaining - adultCount)), set: setChildCount },
             ].map(({ label, sub, value, min, max, set }) => (
-                <div key={label} className="flex items-center justify-between">
+              <div key={label} className="flex items-center justify-between">
-                  <div>
+                <div>
-                    <p className="text-sm font-semibold text-gray-900 dark:text-white">{label}</p>
+                  <p className="text-sm font-semibold text-gray-900 dark:text-white">{label}</p>
-                    <p className="text-xs text-gray-400">{sub}</p>
+                  <p className="text-xs text-gray-400">{sub}</p>
-                  </div>
-                  <div className="flex items-center gap-3">
-                    <button type="button" onClick={() => set(Math.max(min, value - 1))}
-                      disabled={value <= min}
-                      className="w-8 h-8 rounded-full border-2 border-gray-200 dark:border-gray-700 flex items-center justify-center text-lg font-bold text-gray-600 dark:text-gray-300 disabled:opacity-30 hover:border-primary hover:text-primary transition-colors">
-                      −
-                    </button>
-                    <span className="w-6 text-center text-base font-bold text-gray-900 dark:text-white">{value}</span>
-                    <button type="button" onClick={() => set(value + 1)}
-                      disabled={value >= max}
-                      className="w-8 h-8 rounded-full border-2 border-gray-200 dark:border-gray-700 flex items-center justify-center text-lg font-bold text-gray-600 dark:text-gray-300 disabled:opacity-30 hover:border-primary hover:text-primary transition-colors">
-                      +
-                    </button>
-                  </div>
                 </div>
-              ))}
+                <div className="flex items-center gap-3">
+                  <button type="button" onClick={() => set(Math.max(min, value - 1))}
+                    disabled={value <= min}
+                    className="w-8 h-8 rounded-full border-2 border-gray-200 dark:border-gray-700 flex items-center justify-center text-lg font-bold text-gray-600 dark:text-gray-300 disabled:opacity-30 hover:border-primary hover:text-primary transition-colors">
+                    −
+                  </button>
+                  <span className="w-6 text-center text-base font-bold text-gray-900 dark:text-white">{value}</span>
+                  <button type="button" onClick={() => set(value + 1)}
+                    disabled={value >= max}
+                    className="w-8 h-8 rounded-full border-2 border-gray-200 dark:border-gray-700 flex items-center justify-center text-lg font-bold text-gray-600 dark:text-gray-300 disabled:opacity-30 hover:border-primary hover:text-primary transition-colors">
+                    +
+                  </button>
+                </div>
+              </div>
+            ))}
 
             {freeChildren > 0 && (
               <div className="flex items-center justify-between text-xs text-green-600 dark:text-green-400">
@@ -463,9 +494,8 @@ function PassengerCountModal({
               <select
                 value={departureStationId}
                 onChange={(e) => { setDepartureStationId(e.target.value); setShowStationError(false); }}
-                className={`w-full rounded-xl border bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-primary/40 ${
+                className={`w-full rounded-xl border bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-primary/40 ${showStationError && !departureStationId ? 'border-red-400 dark:border-red-500' : 'border-gray-200 dark:border-gray-700'
-                  showStationError && !departureStationId ? 'border-red-400 dark:border-red-500' : 'border-gray-200 dark:border-gray-700'
+                  }`}
-                }`}
               >
                 <option value="">Select your boarding station</option>
                 {stations.map((s) => (
@@ -480,10 +510,10 @@ function PassengerCountModal({
             )}
 
             <button type="button" onClick={() => {
-                if (!departureStationId) { setShowStationError(true); return; }
+              if (!departureStationId) { setShowStationError(true); return; }
-                const station = stations.find(s => s.id === departureStationId);
+              const station = stations.find(s => s.id === departureStationId);
-                onConfirm(adultCount, childCount, departureStationId, station?.name ?? '');
+              onConfirm(adultCount, childCount, departureStationId, station?.name ?? '');
-              }}
+            }}
               disabled={loading || adultCount + childCount < 1}
               className="w-full py-3.5 bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] disabled:opacity-60 text-white font-bold text-sm rounded-xl transition-all shadow-lg flex items-center justify-center gap-2">
               {loading ? <><Loader2 className="w-4 h-4 animate-spin" /> Loading...</> : <>Continue <ArrowRight className="w-4 h-4" /></>}
@@ -523,8 +553,10 @@ export default function PackageDetailPage() {
   // For the passenger modal, use the cheapest available tier in the selected coach type group
   const groups = pkg ? groupTiersByCoachType(pkg.priceTiers) : [];
   const selectedGroup = groups.find((g) => g.coachTypeId === selectedCoachTypeId);
-  // Representative tier for the modal header (cheapest available)
+  // Representative tier for the modal: cheapest available in the selected group
-  const representativeTier = selectedGroup?.tiers.find((t) => t.availableSeats > 0) ?? selectedGroup?.tiers[0] ?? null;
+  const representativeTier = selectedGroup?.tiers
+    .filter((t) => t.availableSeats > 0)
+    .sort((a, b) => a.priceMinor - b.priceMinor)[0] ?? selectedGroup?.tiers[0] ?? null;
 
   const isRoundTripPkg = pkg?.journeyType === 'ROUND_TRIP';
 
@@ -745,9 +777,9 @@ export default function PackageDetailPage() {
                 <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),
+                      Math.min(...pkg.priceTiers.map((t) => t.priceMinor)) * (isRoundTripPkg ? 2 : 1),
-                        pkg.priceTiers[0].currency,
+                      pkg.priceTiers[0].currency,
-                      )
+                    )
                     : "—"}
                 </p>
               </div>

apps/edr-passenger-web/portal/src/lib/booking-store.ts

@@ -128,7 +128,7 @@ interface BookingState {
   reviewedTotalMinor: number | null;
   // Per-passenger fare breakdown computed on the review page — guarantees line items
   // on the payment page sum to exactly reviewedTotalMinor.
-  reviewedPassengerFares: Array<{ fareMinor: number; isFree: boolean }> | null;
+  reviewedPassengerFares: Array<{ fareMinor: number; isFree: boolean; outboundFareMinor?: number; inboundFareMinor?: number }> | null;
 
   setSearchCriteria: (criteria: SearchCriteria) => void;
   setSelectedSchedule: (schedule: SelectedSchedule) => void;
@@ -143,7 +143,7 @@ interface BookingState {
   setCreateAccount: (create: boolean) => void;
   setPassengerId: (id: string | null) => void;
   setPackageContext: (packageId: string, priceTierId: string, priceMinor: number, packageName?: string, departureStationId?: string, departureStationName?: string) => void;
-  setReviewedTotal: (totalMinor: number, passengerFares: Array<{ fareMinor: number; isFree: boolean }>) => void;
+  setReviewedTotal: (totalMinor: number, passengerFares: Array<{ fareMinor: number; isFree: boolean; outboundFareMinor?: number; inboundFareMinor?: number }>) => void;
   clearBooking: () => void;
 }