From 5a8db998e513105838e73b63c2d53743c51c3810 Mon Sep 17 00:00:00 2001
From: Stephanos A <steph.et@outlook.com>
Date: Thu, 9 Jul 2026 11:23:14 +0300
Subject: [PATCH] Alternative schedules notification updates

---
 .../portal/src/app/booking/results/page.tsx   | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/apps/edr-passenger-web/portal/src/app/booking/results/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/results/page.tsx
index 3ef1c8875..33609ba0e 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/results/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/results/page.tsx
@@ -944,10 +944,11 @@ export default function ResultsPage() {
       return (
         <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
           <div className="container mx-auto px-4">
-            <div className="max-w-2xl mx-auto">
-              <div className="card text-center">
-                <div className="hidden sm:flex w-20 h-20 bg-gray-100 dark:bg-gray-800 rounded-full items-center justify-center mx-auto mb-6">
-                  <Calendar className="w-10 h-10 text-gray-400 dark:text-gray-500" />
+            <div className="max-w-6xl mx-auto">
+              <div className="flex items-center justify-between gap-4 px-4 py-3 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
+                <div className="flex items-center gap-2.5 text-sm text-red-800 dark:text-red-300">
+                  <Calendar className="w-4 h-4 flex-shrink-0" />
+                  <span>No trains found for your selected dates or route.</span>
                 </div>
                 <button onClick={() => router.push(buildSearchUrl())} className="text-sm font-semibold text-primary hover:underline flex-shrink-0">
                   Modify search
@@ -967,9 +968,10 @@ export default function ResultsPage() {
           {renderClassModal()}
           <div className="container mx-auto px-4">
             <div className="max-w-6xl mx-auto">
-              <div className="card text-center mb-8 max-w-3xl mx-auto">
-                <div className="hidden sm:flex w-20 h-20 bg-amber-100 dark:bg-amber-900/30 rounded-full items-center justify-center mx-auto mb-6">
-                  <Calendar className="w-10 h-10 text-amber-500" />
+              <div className="flex items-center justify-between gap-4 px-4 py-3 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 mb-8">
+                <div className="flex items-center gap-2.5 text-sm text-red-800 dark:text-red-300">
+                  <Calendar className="w-4 h-4 flex-shrink-0" />
+                  <span>No trains available on <span className="font-semibold">{searchData.date ? format(new Date(`${searchData.date}T00:00:00`), "EEEE, MMMM d, yyyy") : "your selected date"}</span>.</span>
                 </div>
                 <button onClick={() => router.push(buildSearchUrl())} className="text-sm font-semibold text-primary hover:underline flex-shrink-0">
                   Change date
@@ -1003,10 +1005,11 @@ export default function ResultsPage() {
     return (
       <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
         <div className="container mx-auto px-4">
-          <div className="max-w-2xl mx-auto">
-            <div className="card text-center">
-              <div className="hidden sm:flex w-20 h-20 bg-gray-100 dark:bg-gray-800 rounded-full items-center justify-center mx-auto mb-6">
-                <Calendar className="w-10 h-10 text-gray-400 dark:text-gray-500" />
+          <div className="max-w-6xl mx-auto">
+            <div className="flex items-center justify-between gap-4 px-4 py-3 rounded-xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+              <div className="flex items-center gap-2.5 text-sm text-gray-600 dark:text-gray-400">
+                <Calendar className="w-4 h-4 flex-shrink-0 text-gray-400" />
+                <span>No trains found matching your search. Try adjusting your dates or route.</span>
               </div>
               <button onClick={() => router.push(buildSearchUrl())} className="text-sm font-semibold text-primary hover:underline flex-shrink-0">
                 Modify search
@@ -1132,9 +1135,10 @@ export default function ResultsPage() {
                   {outboundSchedules.length === 0 &&
                     alternativeOutbound.length > 0 && (
                       <div className="mt-6">
-                        <div className="card text-center mb-6 max-w-3xl mx-auto">
-                          <div className="hidden sm:flex w-16 h-16 bg-amber-100 dark:bg-amber-900/30 rounded-full items-center justify-center mx-auto mb-4">
-                            <Calendar className="w-8 h-8 text-amber-500" />
+                        <div className="flex items-center justify-between gap-4 px-4 py-3 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 mb-6">
+                          <div className="flex items-center gap-2.5 text-sm text-red-800 dark:text-red-300">
+                            <Calendar className="w-4 h-4 flex-shrink-0" />
+                            <span>No trains on <span className="font-semibold">{searchData.date ? format(new Date(`${searchData.date}T00:00:00`), "EEEE, MMMM d") : "your selected date"}</span>.</span>
                           </div>
                           <button onClick={() => router.push(buildSearchUrl())} className="text-sm font-semibold text-primary hover:underline flex-shrink-0">
                             Change dates
@@ -1215,9 +1219,10 @@ export default function ResultsPage() {
                   {inboundSchedules.length === 0 &&
                     alternativeInbound.length > 0 && (
                       <div className="mt-6">
-                        <div className="card text-center mb-6 max-w-3xl mx-auto">
-                          <div className="hidden sm:flex w-16 h-16 bg-amber-100 dark:bg-amber-900/30 rounded-full items-center justify-center mx-auto mb-4">
-                            <Calendar className="w-8 h-8 text-amber-500" />
+                        <div className="flex items-center justify-between gap-4 px-4 py-3 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 mb-6">
+                          <div className="flex items-center gap-2.5 text-sm text-red-800 dark:text-red-300">
+                            <Calendar className="w-4 h-4 flex-shrink-0" />
+                            <span>No trains on <span className="font-semibold">{searchData.returnDate ? format(new Date(`${searchData.returnDate}T00:00:00`), "EEEE, MMMM d") : "your selected return date"}</span>.</span>
                           </div>
                           <button onClick={() => router.push(buildSearchUrl())} className="text-sm font-semibold text-primary hover:underline flex-shrink-0">
                             Change dates