fix first online resevation

apps/dashboard/src/components/layout/Sidebar.tsx

@@ -1,11 +1,12 @@
 'use client'
 
 import Link from 'next/link'
-import { usePathname } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 import {
   LayoutDashboard,
   Car,
   Calendar,
+  Globe,
   Users,
   Tag,
   UserPlus,
@@ -15,15 +16,15 @@ import {
   Settings,
   LogOut,
 } from 'lucide-react'
-import { useClerk, useUser } from '@clerk/nextjs'
-import { clerkFrontendEnabled } from '@/lib/clerk'
 import { useDashboardI18n } from '@/components/I18nProvider'
 import { marketplaceUrl } from '@/lib/urls'
+import { EMPLOYEE_TOKEN_KEY } from '@/lib/api'
 
 const NAV_ITEMS = [
   { href: '/dashboard', key: 'dashboard', icon: LayoutDashboard, exact: true },
   { href: '/dashboard/fleet', key: 'fleet', icon: Car },
   { href: '/dashboard/reservations', key: 'reservations', icon: Calendar },
+  { href: '/dashboard/online-reservations', key: 'onlineReservations', icon: Globe },
   { href: '/dashboard/customers', key: 'customers', icon: Users },
   { href: '/dashboard/offers', key: 'offers', icon: Tag },
   { href: '/dashboard/team', key: 'team', icon: UserPlus },
@@ -33,29 +34,32 @@ const NAV_ITEMS = [
   { href: '/dashboard/settings', key: 'settings', icon: Settings },
 ] as const
 
-function SidebarWithClerk() {
+export default function Sidebar() {
   const { dict } = useDashboardI18n()
   const pathname = usePathname()
-  const { signOut } = useClerk()
-  const { user } = useUser()
+  const router = useRouter()
 
   const isActive = (item: typeof NAV_ITEMS[0]) => {
     if (item.exact) return pathname === item.href
     return pathname.startsWith(item.href)
   }
 
+  function signOut() {
+    localStorage.removeItem(EMPLOYEE_TOKEN_KEY)
+    document.cookie = 'employee_token=; path=/; max-age=0; samesite=lax'
+    router.push('/sign-in')
+  }
+
   return (
-    <aside className="fixed inset-y-0 left-0 w-64 bg-slate-900 flex flex-col z-40">
-      {/* Logo */}
-      <Link href={marketplaceUrl} className="flex items-center gap-3 px-6 py-5 border-b border-slate-800">
-        <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
-          <Car className="w-4 h-4 text-white" />
+    <aside className="fixed inset-y-0 left-0 z-40 flex w-64 flex-col bg-slate-900">
+      <Link href={marketplaceUrl} className="flex items-center gap-3 border-b border-slate-800 px-6 py-5">
+        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-500">
+          <Car className="h-4 w-4 text-white" />
         </div>
-        <span className="font-bold text-white text-sm tracking-wide">RentalDriveGo</span>
+        <span className="text-sm font-bold tracking-wide text-white">RentalDriveGo</span>
       </Link>
 
-      {/* Navigation */}
-      <nav className="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto">
+      <nav className="flex-1 space-y-0.5 overflow-y-auto px-3 py-4">
         {NAV_ITEMS.map((item) => {
           const Icon = item.icon
           const active = isActive(item)
@@ -64,101 +68,35 @@ function SidebarWithClerk() {
               key={item.href}
               href={item.href}
               className={[
-                'flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
-                active
-                  ? 'bg-blue-600 text-white'
-                  : 'text-slate-400 hover:text-white hover:bg-slate-800',
+                'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
+                active ? 'bg-blue-600 text-white' : 'text-slate-400 hover:bg-slate-800 hover:text-white',
               ].join(' ')}
             >
-              <Icon className="w-4 h-4 flex-shrink-0" />
+              <Icon className="h-4 w-4 flex-shrink-0" />
               {dict.nav[item.key]}
             </Link>
           )
         })}
       </nav>
 
-      {/* User menu */}
-      <div className="px-3 py-4 border-t border-slate-800">
-        <div className="flex items-center gap-3 px-3 py-2 rounded-lg">
-          <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">
-            {user?.firstName?.[0]?.toUpperCase() ?? 'U'}
+      <div className="border-t border-slate-800 px-3 py-4">
+        <div className="flex items-center gap-3 rounded-lg px-3 py-2">
+          <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-xs font-semibold text-white">
+            W
           </div>
-          <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium text-white truncate">
-              {user?.firstName} {user?.lastName}
-            </p>
-            <p className="text-xs text-slate-400 truncate">
-              {user?.primaryEmailAddress?.emailAddress}
-            </p>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-white">{dict.workspaceUser}</p>
+            <p className="truncate text-xs text-slate-400">{dict.localAuth}</p>
           </div>
         </div>
         <button
-          onClick={() => signOut()}
-          className="mt-2 w-full flex items-center gap-3 px-3 py-2 text-sm text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors"
+          onClick={signOut}
+          className="mt-2 flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-400 transition-colors hover:bg-slate-800 hover:text-white"
         >
-          <LogOut className="w-4 h-4" />
+          <LogOut className="h-4 w-4" />
           {dict.signOut}
         </button>
       </div>
     </aside>
   )
 }
-
-function SidebarWithoutClerk() {
-  const { dict } = useDashboardI18n()
-  const pathname = usePathname()
-
-  const isActive = (item: typeof NAV_ITEMS[0]) => {
-    if (item.exact) return pathname === item.href
-    return pathname.startsWith(item.href)
-  }
-
-  return (
-    <aside className="fixed inset-y-0 left-0 w-64 bg-slate-900 flex flex-col z-40">
-      <Link href={marketplaceUrl} className="flex items-center gap-3 px-6 py-5 border-b border-slate-800">
-        <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
-          <Car className="w-4 h-4 text-white" />
-        </div>
-        <span className="font-bold text-white text-sm tracking-wide">RentalDriveGo</span>
-      </Link>
-
-      <nav className="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto">
-        {NAV_ITEMS.map((item) => {
-          const Icon = item.icon
-          const active = isActive(item)
-          return (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={[
-                'flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
-                active
-                  ? 'bg-blue-600 text-white'
-                  : 'text-slate-400 hover:text-white hover:bg-slate-800',
-              ].join(' ')}
-            >
-              <Icon className="w-4 h-4 flex-shrink-0" />
-              {dict.nav[item.key]}
-            </Link>
-          )
-        })}
-      </nav>
-
-      <div className="px-3 py-4 border-t border-slate-800">
-        <div className="flex items-center gap-3 px-3 py-2 rounded-lg">
-          <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">
-            D
-          </div>
-          <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium text-white truncate">{dict.demoUser}</p>
-            <p className="text-xs text-slate-400 truncate">{dict.clerkDisabled}</p>
-          </div>
-        </div>
-      </div>
-    </aside>
-  )
-}
-
-export default function Sidebar() {
-  return clerkFrontendEnabled ? <SidebarWithClerk /> : <SidebarWithoutClerk />
-}