From 7d64c919152acc25a66979396ea976c18ae735b2 Mon Sep 17 00:00:00 2001
From: Abubeker Yasin <dev.abubeker@gmail.com>
Date: Tue, 14 Jul 2026 21:09:49 +0300
Subject: [PATCH] feat: ( auth ) restore sign in/register UI in nav bar,
 sidebar, and auth-check

---
 .../src/app/booking/auth-check/page.tsx       |  4 +---
 .../portal/src/components/AppSidebar.tsx      |  6 ++----
 .../portal/src/components/BottomTabBar.tsx    | 19 +++++++++----------
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/apps/edr-passenger-web/portal/src/app/booking/auth-check/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/auth-check/page.tsx
index 8db5e35ad..d9c7f92a3 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/auth-check/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/auth-check/page.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useAuthStore } from '@/lib/auth-store';
 import { useBookingStore } from '@/lib/booking-store';
-import { UserPlus, ChevronLeft } from 'lucide-react';
+import { UserPlus, LogIn, ChevronLeft } from 'lucide-react';
 
 function Tooltip({ children, content }: { children: React.ReactNode; content: string[] }) {
   const [visible, setVisible] = useState(false);
@@ -95,7 +95,6 @@ export default function AuthCheckPage() {
             </button>
           </Tooltip>
 
-          {/* TODO: re-enable once auth is integrated
           <Tooltip content={[
             'Saved passenger details',
             'View booking history',
@@ -109,7 +108,6 @@ export default function AuthCheckPage() {
               SignIn or Register
             </button>
           </Tooltip>
-          */}
         </div>
 
         <div className="mt-8 text-center">
diff --git a/apps/edr-passenger-web/portal/src/components/AppSidebar.tsx b/apps/edr-passenger-web/portal/src/components/AppSidebar.tsx
index 81a455401..0acb5d9ea 100644
--- a/apps/edr-passenger-web/portal/src/components/AppSidebar.tsx
+++ b/apps/edr-passenger-web/portal/src/components/AppSidebar.tsx
@@ -192,9 +192,7 @@ export default function AppSidebar() {
             )}
           </div>
         ) : (
-          // TODO: Sign in / Register temporarily disabled — re-enable later.
-          null
-          /* <div className="flex items-center gap-2 px-1 pt-1">
+          <div className="flex items-center gap-2 px-1 pt-1">
             <Link
               href="/login"
               className="flex-1 text-center px-3 py-2 text-sm font-medium text-gray-100 hover:bg-white/10 rounded-lg transition-colors"
@@ -207,7 +205,7 @@ export default function AppSidebar() {
             >
               Register
             </Link>
-          </div> */
+          </div>
         )}
       </div>
 
diff --git a/apps/edr-passenger-web/portal/src/components/BottomTabBar.tsx b/apps/edr-passenger-web/portal/src/components/BottomTabBar.tsx
index 9a1d71f15..ee4cdccad 100644
--- a/apps/edr-passenger-web/portal/src/components/BottomTabBar.tsx
+++ b/apps/edr-passenger-web/portal/src/components/BottomTabBar.tsx
@@ -1,10 +1,9 @@
 'use client';
 
-// NOTE: User icon + useAuthStore are unused while the Sign in / Account tab is
-// temporarily disabled below. Re-add them when that tab is restored.
-import { Home, Phone, Ticket } from 'lucide-react';
+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),
@@ -22,6 +21,7 @@ const LINEAR_FLOW_PREFIXES = [
 
 export default function BottomTabBar() {
   const pathname = usePathname() ?? '';
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
 
   const isInLinearFlow = LINEAR_FLOW_PREFIXES.some((p) => pathname.startsWith(p));
   if (isInLinearFlow) return null;
@@ -30,13 +30,12 @@ export default function BottomTabBar() {
     { 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') },
-    // TODO: Sign in / Account tab temporarily disabled — re-enable later.
-    // {
-    //   href: isAuthenticated ? '/profile' : '/login',
-    //   label: isAuthenticated ? 'Account' : 'Sign in',
-    //   icon: User,
-    //   match: (p: string) => p.startsWith('/profile') || p.startsWith('/login') || p.startsWith('/register'),
-    // },
+    {
+      href: isAuthenticated ? '/profile' : '/login',
+      label: isAuthenticated ? 'Account' : 'Sign in',
+      icon: User,
+      match: (p: string) => p.startsWith('/profile') || p.startsWith('/login') || p.startsWith('/register'),
+    },
   ];
 
   return (