add first files

2026-04-30 14:59:57 -04:00
parent 2b97c1a04a
commit 695a7f7cc7
92 changed files with 4873 additions and 0 deletions
@@ -0,0 +1,71 @@
+'use client'
+
+import { Bell } from 'lucide-react'
+import { usePathname } from 'next/navigation'
+import { useState, useEffect } from 'react'
+import { apiFetch } from '@/lib/api'
+import { useUser } from '@clerk/nextjs'
+
+const PAGE_TITLES: Record<string, string> = {
+  '/dashboard': 'Dashboard',
+  '/dashboard/fleet': 'Fleet Management',
+  '/dashboard/reservations': 'Reservations',
+  '/dashboard/customers': 'Customers',
+  '/dashboard/offers': 'Offers',
+  '/dashboard/team': 'Team',
+  '/dashboard/reports': 'Reports',
+  '/dashboard/billing': 'Billing',
+  '/dashboard/settings': 'Settings',
+}
+
+export default function TopBar() {
+  const pathname = usePathname()
+  const { user } = useUser()
+  const [unreadCount, setUnreadCount] = useState(0)
+  const [showNotifs, setShowNotifs] = useState(false)
+
+  const title = PAGE_TITLES[pathname] ?? 'Dashboard'
+
+  useEffect(() => {
+    apiFetch<{ unread: number }>('/notifications/unread-count')
+      .then((data) => setUnreadCount(data.unread))
+      .catch(() => {})
+  }, [pathname])
+
+  return (
+    <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6">
+      <h1 className="text-lg font-semibold text-slate-900">{title}</h1>
+
+      <div className="flex items-center gap-3">
+        {/* Notification bell */}
+        <div className="relative">
+          <button
+            onClick={() => setShowNotifs(!showNotifs)}
+            className="relative p-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
+          >
+            <Bell className="w-5 h-5" />
+            {unreadCount > 0 && (
+              <span className="absolute top-1 right-1 min-w-[16px] h-4 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center px-1">
+                {unreadCount > 99 ? '99+' : unreadCount}
+              </span>
+            )}
+          </button>
+
+          {showNotifs && (
+            <div className="absolute right-0 top-full mt-2 w-80 bg-white border border-slate-200 rounded-xl shadow-lg z-50 p-4">
+              <p className="text-sm font-medium text-slate-900 mb-2">Notifications</p>
+              <p className="text-sm text-slate-500">
+                {unreadCount === 0 ? 'No new notifications' : `${unreadCount} unread notification${unreadCount > 1 ? 's' : ''}`}
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* User avatar */}
+        <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-semibold">
+          {user?.firstName?.[0]?.toUpperCase() ?? 'U'}
+        </div>
+      </div>
+    </header>
+  )
+}