add car reservation feature

apps/dashboard/src/app/(dashboard)/dashboard/fleet/[id]/page.tsx

@@ -3,9 +3,10 @@
 import { useEffect, useRef, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import Image from 'next/image'
-import { ArrowLeft, Edit, X, Check, Upload, Trash2 } from 'lucide-react'
+import { ArrowLeft, Edit, X, Check, Upload, Trash2, CalendarDays, Info } from 'lucide-react'
 import { formatCurrency } from '@rentaldrivego/types'
 import { apiFetch } from '@/lib/api'
+import VehicleCalendar from '@/components/VehicleCalendar'
 
 interface VehicleDetail {
   id: string
@@ -65,11 +66,14 @@ function initColorSelect(color: string) {
   return PRESET_COLORS.includes(color) ? color : (color ? 'custom' : '')
 }
 
+type Tab = 'details' | 'calendar'
+
 export default function FleetDetailPage() {
   const params = useParams<{ id: string }>()
   const router = useRouter()
   const [vehicle, setVehicle] = useState<VehicleDetail | null>(null)
   const [error, setError] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState<Tab>('details')
   const [editing, setEditing] = useState(false)
   const [saving, setSaving] = useState(false)
   const [saveError, setSaveError] = useState<string | null>(null)
@@ -253,7 +257,34 @@ export default function FleetDetailPage() {
         <div className="px-4 py-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{saveError}</div>
       )}
 
-      <div className="grid gap-6 lg:grid-cols-[1.3fr_0.7fr]">
+      {/* Tab bar */}
+      <div className="flex gap-1 border-b border-slate-200 dark:border-slate-800">
+        <button
+          onClick={() => setActiveTab('details')}
+          className={[
+            'flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors',
+            activeTab === 'details'
+              ? 'border-blue-500 text-blue-600'
+              : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300',
+          ].join(' ')}
+        >
+          <Info className="w-4 h-4" /> Details
+        </button>
+        <button
+          onClick={() => setActiveTab('calendar')}
+          className={[
+            'flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors',
+            activeTab === 'calendar'
+              ? 'border-blue-500 text-blue-600'
+              : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300',
+          ].join(' ')}
+        >
+          <CalendarDays className="w-4 h-4" /> Calendar
+        </button>
+      </div>
+
+      {activeTab === 'details' && (
+        <div className="grid gap-6 lg:grid-cols-[1.3fr_0.7fr]">
         {/* Photos */}
         <div className="card p-6">
           <h3 className="text-base font-semibold text-slate-900 mb-4">Photos</h3>
@@ -493,7 +524,12 @@ export default function FleetDetailPage() {
             </div>
           )}
         </div>
-      </div>
+        </div>
+      )}
+
+      {activeTab === 'calendar' && (
+        <VehicleCalendar vehicleId={params.id} />
+      )}
     </div>
   )
 }

apps/dashboard/src/app/(dashboard)/dashboard/online-reservations/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState, useCallback } from 'react'
 import dayjs from 'dayjs'
 import Link from 'next/link'
-import { formatCurrency, type ApiPaginated } from '@rentaldrivego/types'
+import { formatCurrency } from '@rentaldrivego/types'
 import { apiFetch } from '@/lib/api'
 import { Globe, CheckCircle, XCircle, Clock, ChevronRight, User, Car, CalendarDays, MessageSquare } from 'lucide-react'
 
@@ -81,9 +81,9 @@ export default function OnlineReservationsPage() {
   const load = useCallback(async () => {
     try {
       setLoading(true)
-      const result = await apiFetch<ApiPaginated<OnlineReservation>>('/reservations?source=MARKETPLACE&pageSize=100')
+      const result = await apiFetch<OnlineReservation[]>('/reservations?source=MARKETPLACE&pageSize=100')
       setRows(
-        (result.data ?? []).sort((a, b) => {
+        (result ?? []).sort((a, b) => {
           // DRAFT first, then by createdAt desc
           if (a.status === 'DRAFT' && b.status !== 'DRAFT') return -1
           if (a.status !== 'DRAFT' && b.status === 'DRAFT') return 1

apps/dashboard/src/app/(dashboard)/dashboard/reports/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { formatCurrency } from '@rentaldrivego/types'
-import { apiFetch, EMPLOYEE_TOKEN_KEY } from '@/lib/api'
+import { API_BASE, apiFetch, EMPLOYEE_TOKEN_KEY } from '@/lib/api'
 
 interface ReportRow {
   reservationId: string
@@ -37,8 +37,6 @@ const periodLabels: Record<ReportPeriod, string> = {
   ANNUAL: 'Annual',
 }
 
-const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
-
 export default function ReportsPage() {
   const [period, setPeriod] = useState<ReportPeriod>('MONTHLY')
   const [report, setReport] = useState<ReportData | null>(null)