fix signin signout and apply the new style

2026-05-24 23:58:54 -04:00
parent bf97a072dd
commit 9bd0938951
68 changed files with 851 additions and 200 deletions
@@ -0,0 +1,114 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { formatCurrency } from '@rentaldrivego/types'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+interface ReservationRow {
+  id: string
+  status: string
+  source: string
+  startDate: string
+  endDate: string
+  totalAmount: number
+  totalDays: number
+  contractNumber?: string | null
+  workflow?: {
+    contractGenerated: boolean
+    closed: boolean
+    coreEditable: boolean
+    returnEditable: boolean
+  }
+  vehicle: { make: string; model: string }
+  customer: { firstName: string; lastName: string; email: string }
+}
+
+export default function ReservationsPage() {
+  const { dict, language } = useDashboardI18n()
+  const r = dict.reservations
+  const localeCode = language === 'fr' ? 'fr-FR' : language === 'ar' ? 'ar-MA' : 'en-US'
+
+  const [rows, setRows] = useState<ReservationRow[]>([])
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    apiFetch<ReservationRow[]>('/reservations?pageSize=100')
+      .then((result) => setRows(result ?? []))
+      .catch((err) => setError(err.message))
+  }, [])
+
+  const formatDate = (iso: string) =>
+    new Date(iso).toLocaleDateString(localeCode, { month: 'short', day: 'numeric' })
+  const formatDateYear = (iso: string) =>
+    new Date(iso).toLocaleDateString(localeCode, { month: 'short', day: 'numeric', year: 'numeric' })
+  const reservationActionLabel = (row: ReservationRow) => {
+    if (row.workflow?.returnEditable) {
+      return language === 'fr' ? 'Retour / clôture' : language === 'ar' ? 'الإرجاع / الإغلاق' : 'Return / close'
+    }
+    if (row.workflow?.coreEditable) {
+      return language === 'fr' ? 'Modifier la réservation' : language === 'ar' ? 'تعديل الحجز' : 'Edit reservation'
+    }
+    return language === 'fr' ? 'Voir la réservation' : language === 'ar' ? 'عرض الحجز' : 'View reservation'
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <h2 className="text-xl font-semibold text-slate-900">{r.heading}</h2>
+          <p className="text-sm text-slate-500 mt-1">{r.subtitle}</p>
+        </div>
+        <Link href="/reservations/new" className="btn-primary whitespace-nowrap">
+          {language === 'fr' ? 'Réserver une voiture' : language === 'ar' ? 'حجز سيارة' : 'Book car'}
+        </Link>
+      </div>
+      <div className="card overflow-hidden">
+        {error ? (
+          <div className="p-8 text-sm text-red-600">{error}</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-slate-50 border-b border-slate-200">
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{r.colCustomer}</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{r.colVehicle}</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{r.colDates}</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{r.colSource}</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{r.colStatus}</th>
+                  <th className="text-right px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{r.colTotal}</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100">
+                {rows.map((row) => (
+                  <tr key={row.id}>
+                    <td className="px-6 py-4">
+                      <Link href={`/reservations/${row.id}`} className="text-sm font-semibold text-slate-900 hover:text-blue-700">
+                        {row.customer.firstName} {row.customer.lastName}
+                      </Link>
+                      <p className="text-xs text-slate-500">{row.customer.email}</p>
+                      <Link href={`/reservations/${row.id}`} className="mt-1 inline-block text-xs font-semibold text-blue-700 hover:underline">
+                        {reservationActionLabel(row)}
+                      </Link>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-slate-700">{row.vehicle.make} {row.vehicle.model}</td>
+                    <td className="px-6 py-4 text-sm text-slate-500">{formatDate(row.startDate)} - {formatDateYear(row.endDate)}</td>
+                    <td className="px-6 py-4 text-sm text-slate-700">{row.source}</td>
+                    <td className="px-6 py-4"><span className="badge-blue">{row.status}</span></td>
+                    <td className="px-6 py-4 text-right text-sm font-semibold text-slate-900">{formatCurrency(row.totalAmount, 'MAD')}</td>
+                  </tr>
+                ))}
+                {rows.length === 0 && (
+                  <tr>
+                    <td colSpan={6} className="px-6 py-10 text-center text-sm text-slate-400">{r.noReservations}</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}