{schedule.arrivalAt
? formatTime(schedule.arrivalAt)
: "--:--"}
diff --git a/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
index c51ee4141..02c1fcd35 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
@@ -608,6 +608,12 @@ export default function SearchPage() {
reValidateMode: "onSubmit",
defaultValues: {
tripType: "ONE_WAY",
+ // originStationId/destinationStationId must default to "" rather than being omitted —
+ // Zod's base string type check runs before .min(1, "..."), so an `undefined` value hits
+ // its generic "Required" message instead of our custom one. An empty string is still a
+ // string, so .min() (and its custom message) is what actually fires.
+ originStationId: "",
+ destinationStationId: "",
adultCount: 1,
childCount: 0,
// No default nationality — the user must explicitly pick one. Left blank (not a valid
@@ -827,19 +833,21 @@ export default function SearchPage() {
/>
)}
- {/* ── 90vh hero with banner image ── */}
- {/* Round trip stacks an extra Return Date field into the widget on mobile, which grows
+ {/* ── 90vh hero with banner image (desktop) / top-aligned widget only (mobile) ── */}
+ {/* Round trip stacks an extra Return Date field into the widget on desktop, which grows
upward from its bottom-anchored position — give the hero extra height there so the
- widget's top edge doesn't creep up into the sticky header. */}
+ widget's top edge doesn't creep up into the sticky header. On mobile the widget is
+ in normal flow (not bottom-anchored), so this only applies at md: and up. */}
- {/* Background image with zoom - fully isolated */}
-
+ {/* Background image with zoom — desktop only; mobile drops the hero image entirely
+ so the booking widget can sit at the top and use the available space. */}
+
- {/* Gradient overlay */}
-
-
+ {/* Gradient overlay — desktop only (exists to keep the hero text readable over the image) */}
+
+
- {/* Hero headline — top area */}
-
+ {/* Hero headline — desktop only; removed on mobile along with the banner image */}
+
Where are you
- {/* ── Widget — absolutely positioned at bottom with margin ── */}
+ {/* ── Widget — top-aligned, normal flow on mobile; absolutely positioned at
+ bottom on desktop over the hero image. z-[35] sits above the floating
+ support chat launcher (z-30) but below the sidebar/tab bar (z-40), so it
+ never covers either. Modals opened from inside the widget (date picker
+ etc.) are portaled to — see ModernDatePicker — so they aren't
+ capped by this wrapper's own stacking context. ── */}
+ {/* Mobile-only heading — desktop keeps the version overlaid on the hero image above */}
+
+
+ Where are you headed today?
+
+
+ Book your train journey across East Africa
+
+
{errors.departureDate && (
@@ -1324,6 +1364,7 @@ export default function SearchPage() {
}}
minDate={new Date()}
placeholder="Select date"
+ error={!!errors.departureDate}
/>
{errors.departureDate && (
@@ -1357,6 +1398,7 @@ export default function SearchPage() {
: new Date()
}
placeholder="Select date"
+ error={!!errors.returnDate}
/>
{errors.returnDate && (
diff --git a/apps/edr-passenger-web/portal/src/app/contact/page.tsx b/apps/edr-passenger-web/portal/src/app/contact/page.tsx
index f2c0f4296..669a99d0b 100644
--- a/apps/edr-passenger-web/portal/src/app/contact/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/contact/page.tsx
@@ -3,16 +3,18 @@
import { useEffect, useState } from 'react';
import { getTranslation, Language, useLanguage } from '@/lib/i18n';
import { Phone, Mail, MapPin, Send, Loader } from 'lucide-react';
+import { Footer } from '@/components/Footer';
const styles = `
.contact-hero {
padding: 60px 20px;
- background: linear-gradient(to bottom right, rgb(20, 113, 76), transparent);
+ background: #ffffff;
text-align: center;
color: #111827;
}
-
+
.dark .contact-hero {
+ background: #111827;
color: #f3f4f6;
}
@@ -370,6 +372,7 @@ export default function Contact() {
+
);
}
diff --git a/apps/edr-passenger-web/portal/src/app/go/page.tsx b/apps/edr-passenger-web/portal/src/app/go/page.tsx
index d9f6f583f..feed05990 100644
--- a/apps/edr-passenger-web/portal/src/app/go/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/go/page.tsx
@@ -13,7 +13,7 @@ import { useSearchParams } from "next/navigation";
* hop is browser-dependent and can be stripped) must NOT be used here.
*
* It fires immediately (no delay) and paints a bare white full-screen cover
- * above the sticky header (z-[60]) — no portal chrome, no text on the happy
+ * above the sidebar/tab bar (z-40) — no portal chrome, no text on the happy
* path. A short message shows only when the link is missing/untrusted.
*
* `?url=` MUST be percent-encoded by the caller (Uri.encodeComponent() in the
diff --git a/apps/edr-passenger-web/portal/src/app/layout.tsx b/apps/edr-passenger-web/portal/src/app/layout.tsx
index e393b5f20..1128124e3 100644
--- a/apps/edr-passenger-web/portal/src/app/layout.tsx
+++ b/apps/edr-passenger-web/portal/src/app/layout.tsx
@@ -2,8 +2,9 @@ import type { Metadata } from 'next';
import { headers } from 'next/headers';
import './globals.css';
import { Providers } from './providers';
-import AppHeader from '@/components/AppHeader';
-import { Footer } from '@/components/Footer';
+import AppSidebar from '@/components/AppSidebar';
+import MobileTopBar from '@/components/MobileTopBar';
+import BottomTabBar from '@/components/BottomTabBar';
import { LoadingIndicator } from '@/components/LoadingIndicator';
import SupportWidget from '@/features/support/SupportWidgetLazy';
@@ -21,7 +22,7 @@ export default function RootLayout({
const nonce = headers().get('x-nonce') ?? undefined;
return (
-
+
- {children}
-
-
+
+
+ {children}
+
+
diff --git a/apps/edr-passenger-web/portal/src/components/AppHeader.tsx b/apps/edr-passenger-web/portal/src/components/AppHeader.tsx
deleted file mode 100644
index b1fc2ddf5..000000000
--- a/apps/edr-passenger-web/portal/src/components/AppHeader.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-"use client";
-
-import { Menu, X, Moon, Sun, HelpCircle, KeyRound, LogOut, ChevronDown } from "lucide-react";
-import Link from "next/link";
-import Image from "next/image";
-import { useEffect, useState } from "react";
-import { useAuthStore } from "@/lib/auth-store";
-import ChangePasswordModal from "@/components/ChangePasswordModal";
-
-export default function AppHeader() {
- const [isOpen, setIsOpen] = useState(false);
- const [isDark, setIsDark] = useState(false);
- const [showUserMenu, setShowUserMenu] = useState(false);
- const [showChangePassword, setShowChangePassword] = useState(false);
- const { user, isAuthenticated, initialize, logout } = useAuthStore();
-
- useEffect(() => {
- const isDarkMode = document.documentElement.classList.contains("dark");
- setIsDark(isDarkMode);
- initialize();
- }, [initialize]);
-
- const toggleTheme = () => {
- const html = document.documentElement;
- const isDarkMode = html.classList.contains("dark");
- if (isDarkMode) {
- html.classList.remove("dark");
- setIsDark(false);
- localStorage.setItem("theme", "light");
- } else {
- html.classList.add("dark");
- setIsDark(true);
- localStorage.setItem("theme", "dark");
- }
- };
-
-
-
- return (
-
-
-
-
- {/* Logo */}
-
-
-
-
- {/* Desktop Menu */}
-
-
-
- {/* Right Actions */}
-
- {/* Help Link */}
-
-
-
-
- {/* Theme Toggler */}
-
- {isDark ? (
-
-
- {/* Auth */}
- {isAuthenticated && user ? (
-
-
setShowUserMenu(!showUserMenu)}
- className="flex items-center gap-2 p-1.5 hover:bg-white hover:bg-opacity-10 rounded-lg transition-colors"
- >
-
- {user.fullName?.toUpperCase().charAt(0) || 'U'}
-
-
-
- {showUserMenu && (
-
-
-
{user.fullName}
-
{user.email}
-
-
- {
- setShowUserMenu(false);
- setShowChangePassword(true);
- }}
- className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
- >
-
- {
- setShowUserMenu(false);
- logout();
- }}
- className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-[rgb(20_113_76)] dark:text-emerald-400 hover:bg-green-50 dark:hover:bg-green-900/20 transition-colors"
- >
-
-
-
- )}
-
- ) : (
-
-
- )}
-
- {/* Mobile Menu Button */}
-
setIsOpen(!isOpen)}
- className="md:hidden p-2 text-gray-100 hover:bg-white hover:bg-opacity-10 rounded-lg"
- >
- {isOpen ? (
-
-
-
-
- {/* Mobile Menu */}
- {isOpen && (
-
-
- )}
-
-
setShowChangePassword(false)}
- />
-
- );
-}
diff --git a/apps/edr-passenger-web/portal/src/components/AppSidebar.tsx b/apps/edr-passenger-web/portal/src/components/AppSidebar.tsx
new file mode 100644
index 000000000..6d47b8b5a
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/components/AppSidebar.tsx
@@ -0,0 +1,212 @@
+'use client';
+
+import {
+ Home,
+ Phone,
+ Ticket,
+ HelpCircle,
+ Moon,
+ Sun,
+ KeyRound,
+ LogOut,
+ ChevronDown,
+ Check,
+} from 'lucide-react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useAuthStore } from '@/lib/auth-store';
+import ChangePasswordModal from '@/components/ChangePasswordModal';
+import { BOOKING_STEPS } from '@/components/ProgressIndicator';
+
+// Mirrors booking/layout.tsx's stepMap — the linear booking flow routes that
+// get a vertical step list instead of the standard nav highlighting.
+const BOOKING_STEP_MAP: Record
= {
+ '/booking/search': 'search',
+ '/booking/results': 'results',
+ '/booking/auth-check': 'passengers',
+ '/booking/passengers': 'passengers',
+ '/booking/seats': 'seats',
+ '/booking/review': 'review',
+ '/booking/payment': 'payment',
+ '/booking/confirmation': 'confirmation',
+};
+
+const NAV_LINKS = [
+ { href: '/', label: 'Home', icon: Home },
+ { href: '/booking/lookup', label: 'My Bookings', icon: Ticket },
+ { href: '/contact', label: 'Contact', icon: Phone },
+ { href: '/help', label: 'Help', icon: HelpCircle },
+];
+
+export default function AppSidebar() {
+ const pathname = usePathname();
+ const [isDark, setIsDark] = useState(false);
+ const [showUserMenu, setShowUserMenu] = useState(false);
+ const [showChangePassword, setShowChangePassword] = useState(false);
+ const { user, isAuthenticated, initialize, logout } = useAuthStore();
+
+ useEffect(() => {
+ setIsDark(document.documentElement.classList.contains('dark'));
+ initialize();
+ }, [initialize]);
+
+ const toggleTheme = () => {
+ const html = document.documentElement;
+ const nextDark = !html.classList.contains('dark');
+ html.classList.toggle('dark', nextDark);
+ localStorage.setItem('theme', nextDark ? 'dark' : 'light');
+ setIsDark(nextDark);
+ };
+
+ const currentStepId = BOOKING_STEP_MAP[pathname ?? ''];
+ const currentStepIndex = currentStepId ? BOOKING_STEPS.findIndex((s) => s.id === currentStepId) : -1;
+
+ return (
+
+ );
+}
diff --git a/apps/edr-passenger-web/portal/src/components/BottomTabBar.tsx b/apps/edr-passenger-web/portal/src/components/BottomTabBar.tsx
new file mode 100644
index 000000000..47bc58792
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/components/BottomTabBar.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import { Home, Phone, Ticket, User } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useAuthStore } from '@/lib/auth-store';
+
+// The linear, one-screen-at-a-time booking flow — each of these pages already
+// has its own sticky mobile CTA bar (and the mobile step strip at the top),
+// so the tab bar hides rather than stacking a second bottom bar underneath.
+const LINEAR_FLOW_PREFIXES = [
+ '/booking/search',
+ '/booking/results',
+ '/booking/seats',
+ '/booking/passengers',
+ '/booking/auth-check',
+ '/booking/review',
+ '/booking/payment',
+ '/booking/confirmation',
+];
+
+export default function BottomTabBar() {
+ const pathname = usePathname() ?? '';
+ const { isAuthenticated } = useAuthStore();
+
+ const isInLinearFlow = LINEAR_FLOW_PREFIXES.some((p) => pathname.startsWith(p));
+ if (isInLinearFlow) return null;
+
+ const tabs = [
+ { href: '/', label: 'Home', icon: Home, match: (p: string) => p === '/' },
+ { href: '/booking/lookup', label: 'Bookings', icon: Ticket, match: (p: string) => p.startsWith('/booking/lookup') || p.startsWith('/booking/detail') },
+ { href: '/contact', label: 'Contact', icon: Phone, match: (p: string) => p.startsWith('/contact') },
+ {
+ href: isAuthenticated ? '/profile' : '/login',
+ label: isAuthenticated ? 'Account' : 'Sign in',
+ icon: User,
+ match: (p: string) => p.startsWith('/profile') || p.startsWith('/login') || p.startsWith('/register'),
+ },
+ ];
+
+ return (
+ <>
+ {/* In-flow spacer so page content/Footer can't end up hidden behind the
+ fixed bar below — self-contained here so it only exists when the
+ bar itself is actually rendered. */}
+
+
+
+ {tabs.map(({ href, label, icon: Icon, match }) => {
+ const isActive = match(pathname);
+ return (
+
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/apps/edr-passenger-web/portal/src/components/LandingNav.tsx b/apps/edr-passenger-web/portal/src/components/LandingNav.tsx
deleted file mode 100644
index 76d5fabb9..000000000
--- a/apps/edr-passenger-web/portal/src/components/LandingNav.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-'use client';
-
-import { Train, Menu, X, Moon, Sun, HelpCircle } from 'lucide-react';
-import Link from 'next/link';
-import { useState, useEffect } from 'react';
-import { LanguageSwitcher } from './LanguageSwitcher';
-import { getTranslation, Language } from '@/lib/i18n';
-import { useLanguage } from '@/lib/i18n';
-
-export function LandingNav() {
- const [isOpen, setIsOpen] = useState(false);
- const [lang, setLang] = useState('en');
- const [isDark, setIsDark] = useState(false);
- const [mounted, setMounted] = useState(false);
- const { getLang } = useLanguage();
- const t = (key: string) => getTranslation(lang, key);
-
- useEffect(() => {
- setMounted(true);
- setLang(getLang());
- const handleLanguageChange = (e: any) => setLang(e.detail);
- window.addEventListener('languageChange', handleLanguageChange);
- return () => window.removeEventListener('languageChange', handleLanguageChange);
- }, [getLang]);
-
- useEffect(() => {
- const isDarkMode = document.documentElement.classList.contains('dark');
- setIsDark(isDarkMode);
- }, []);
-
- const toggleTheme = () => {
- const html = document.documentElement;
- const isDarkMode = html.classList.contains('dark');
- if (isDarkMode) {
- html.classList.remove('dark');
- setIsDark(false);
- localStorage.setItem('theme', 'light');
- } else {
- html.classList.add('dark');
- setIsDark(true);
- localStorage.setItem('theme', 'dark');
- }
- };
-
- const menuItems = [
- { label: t('nav.home'), href: '/' },
- { label: t('nav.services'), href: '/services' },
- { label: t('nav.about'), href: '/about' },
- { label: t('nav.contact'), href: '/contact' },
- ];
-
- if (!mounted) return null;
-
- return (
-
-
-
-
- {/* Logo */}
-
-
-
-
-
- Ethio-Djibouti Railway
-
-
- Book your train journey with us
-
-
-
-
- {/* Desktop Menu */}
-
- {menuItems.map((item) => (
-
-
- {/* Right Actions */}
-
-
- {isDark ? (
-
-
- setIsOpen(!isOpen)}
- className="md:hidden p-2 text-gray-100 hover:bg-white hover:bg-opacity-10 rounded-lg"
- >
- {isOpen ?
-
-
-
- {/* Mobile Menu */}
- {isOpen && (
-
- {menuItems.map((item) => (
-
- )}
-
-
- );
-}
diff --git a/apps/edr-passenger-web/portal/src/components/MobileTopBar.tsx b/apps/edr-passenger-web/portal/src/components/MobileTopBar.tsx
new file mode 100644
index 000000000..8920b2e80
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/components/MobileTopBar.tsx
@@ -0,0 +1,24 @@
+import Link from 'next/link';
+import Image from 'next/image';
+
+// AppSidebar (which carries the logo) is `hidden lg:flex` — invisible on
+// mobile, so mobile pages had no branding/way back to home at all. This is
+// the mobile-only equivalent: a slim bar with just the logo. Deliberately
+// not sticky — it scrolls away with the page content instead of staying
+// pinned to the top.
+export default function MobileTopBar() {
+ return (
+
+
+ );
+}
diff --git a/apps/edr-passenger-web/portal/src/components/ModernDatePicker.tsx b/apps/edr-passenger-web/portal/src/components/ModernDatePicker.tsx
index 1f0bbddfe..674755516 100644
--- a/apps/edr-passenger-web/portal/src/components/ModernDatePicker.tsx
+++ b/apps/edr-passenger-web/portal/src/components/ModernDatePicker.tsx
@@ -1,6 +1,7 @@
'use client';
import { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Globe, X } from 'lucide-react';
import {
gregorianToEthiopian,
@@ -18,6 +19,7 @@ interface ModernDatePickerProps {
minDate?: Date;
maxDate?: Date;
placeholder?: string;
+ error?: boolean;
}
export default function ModernDatePicker({
@@ -26,6 +28,7 @@ export default function ModernDatePicker({
minDate,
maxDate,
placeholder = 'Select date',
+ error = false,
}: ModernDatePickerProps) {
const [isOpen, setIsOpen] = useState(false);
const [isMobileView, setIsMobileView] = useState(false);
@@ -283,7 +286,11 @@ export default function ModernDatePicker({
setIsOpen(true)}
- className="w-full px-3.5 py-3.5 border-2 border-gray-200 dark:border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary text-left flex items-center justify-between bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 transition-all group"
+ className={`w-full px-3.5 py-3.5 border-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary text-left flex items-center justify-between bg-white dark:bg-gray-800 transition-all group ${
+ error
+ ? 'border-red-400 hover:border-red-400'
+ : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+ }`}
>
{value ? format(value, 'EEE, MMM d, yyyy') : placeholder}
@@ -291,7 +298,7 @@ export default function ModernDatePicker({
- {isOpen && (
+ {isOpen && createPortal(
<>
{/* Mobile: full-screen takeover */}
@@ -329,7 +336,8 @@ export default function ModernDatePicker({
to { transform: scale(1); opacity: 1; }
}
`}
-
+ ,
+ document.body
)}
);
diff --git a/apps/edr-passenger-web/portal/src/components/ProgressIndicator.tsx b/apps/edr-passenger-web/portal/src/components/ProgressIndicator.tsx
index 9d0215c3a..40f80d448 100644
--- a/apps/edr-passenger-web/portal/src/components/ProgressIndicator.tsx
+++ b/apps/edr-passenger-web/portal/src/components/ProgressIndicator.tsx
@@ -3,7 +3,9 @@
import { Check } from 'lucide-react';
import { useEffect, useRef } from 'react';
-const steps = [
+// Shared source of truth for the booking flow's step order/labels — also
+// consumed by AppSidebar's vertical step list on desktop.
+export const BOOKING_STEPS = [
{ id: 'search', name: 'Search' },
{ id: 'results', name: 'Results' },
{ id: 'passengers', name: 'Passengers' },
@@ -12,6 +14,7 @@ const steps = [
{ id: 'payment', name: 'Payment' },
{ id: 'confirmation', name: 'Done' },
];
+const steps = BOOKING_STEPS;
export function ProgressIndicator({ currentStep }: { currentStep: string }) {
const currentIndex = steps.findIndex((s) => s.id === currentStep);
@@ -70,24 +73,18 @@ export function ProgressIndicator({ currentStep }: { currentStep: string }) {
);
};
+ // Desktop shows the vertical step list embedded in AppSidebar instead —
+ // this component is mobile-only now (the sidebar doesn't exist below lg).
return (
-