Update May 12 by Elvis

app/admin/reservations/page.tsx

@@ -6,60 +6,60 @@ import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from "@/components/ui/table";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
+  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { useAdmin, Reservation } from "@/contexts/AdminContext";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { ApiError } from "@/lib/api";
 import { toast } from "sonner";
 
-const statusConfig: Record<Reservation["status"], { label: string; variant: "default" | "secondary" | "destructive" }> = {
-  pending: { label: "En attente", variant: "secondary" },
-  confirmed: { label: "Confirmé", variant: "default" },
-  cancelled: { label: "Annulé", variant: "destructive" },
-};
-
 export default function AdminReservations() {
-  const { reservations, updateReservationStatus, deleteReservation } = useAdmin();
+  const { reservations, reservationsLoading, updateReservationStatus, deleteReservation } = useAdmin();
+  const { t, locale } = useLanguage();
   const [filter, setFilter] = useState<"all" | Reservation["status"]>("all");
   const [deleteId, setDeleteId] = useState<string | null>(null);
 
+  const statusConfig: Record<Reservation["status"], { label: string; variant: "default" | "secondary" | "destructive" }> = {
+    pending:   { label: t("admin.status.pending"),   variant: "secondary" },
+    confirmed: { label: t("admin.status.confirmed"), variant: "default" },
+    cancelled: { label: t("admin.status.cancelled"), variant: "destructive" },
+  };
+
   const filtered = reservations
     .filter((r) => filter === "all" || r.status === filter)
     .sort((a, b) => `${b.date}${b.time}`.localeCompare(`${a.date}${a.time}`));
 
-  const handleConfirm = (id: string) => {
-    updateReservationStatus(id, "confirmed");
-    toast.success("Réservation confirmée");
+  const handleConfirm = async (id: string) => {
+    try {
+      await updateReservationStatus(id, "confirmed");
+      toast.success(t("admin.bookings.confirmed_toast"));
+    } catch (err) {
+      toast.error(err instanceof ApiError ? err.message : t("admin.error"));
+    }
   };
 
-  const handleCancel = (id: string) => {
-    updateReservationStatus(id, "cancelled");
-    toast.success("Réservation annulée");
+  const handleCancel = async (id: string) => {
+    try {
+      await updateReservationStatus(id, "cancelled");
+      toast.success(t("admin.bookings.cancelled_toast"));
+    } catch (err) {
+      toast.error(err instanceof ApiError ? err.message : t("admin.error"));
+    }
   };
 
-  const handleDelete = () => {
-    if (deleteId) {
-      deleteReservation(deleteId);
-      toast.success("Réservation supprimée");
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    try {
+      await deleteReservation(deleteId);
+      toast.success(t("admin.bookings.deleted_toast"));
+    } catch (err) {
+      toast.error(err instanceof ApiError ? err.message : t("admin.error"));
+    } finally {
       setDeleteId(null);
     }
   };
@@ -67,96 +67,108 @@ export default function AdminReservations() {
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="font-serif text-2xl font-semibold">Réservations</h2>
-        <p className="text-sm text-muted-foreground mt-1">{reservations.length} réservation{reservations.length > 1 ? "s" : ""} au total</p>
+        <h2 className="font-serif text-2xl font-semibold">{t("admin.bookings.title")}</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          {reservations.length} {t("admin.bookings.subtitle")}
+        </p>
       </div>
 
       <Tabs value={filter} onValueChange={(v) => setFilter(v as typeof filter)}>
         <TabsList>
-          <TabsTrigger value="all">Toutes</TabsTrigger>
-          <TabsTrigger value="pending">En attente</TabsTrigger>
-          <TabsTrigger value="confirmed">Confirmées</TabsTrigger>
-          <TabsTrigger value="cancelled">Annulées</TabsTrigger>
+          <TabsTrigger value="all">{t("admin.bookings.tab_all")}</TabsTrigger>
+          <TabsTrigger value="pending">{t("admin.bookings.tab_pending")}</TabsTrigger>
+          <TabsTrigger value="confirmed">{t("admin.bookings.tab_confirmed")}</TabsTrigger>
+          <TabsTrigger value="cancelled">{t("admin.bookings.tab_cancelled")}</TabsTrigger>
         </TabsList>
       </Tabs>
 
       <Card>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Cliente</TableHead>
-              <TableHead>Contact</TableHead>
-              <TableHead>Service</TableHead>
-              <TableHead>Date & Heure</TableHead>
-              <TableHead>Statut</TableHead>
-              <TableHead className="text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filtered.length === 0 ? (
+        {reservationsLoading ? (
+          <div className="p-8 space-y-3">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="h-12 bg-muted animate-pulse rounded" />
+            ))}
+          </div>
+        ) : (
+          <Table>
+            <TableHeader>
               <TableRow>
-                <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
-                  Aucune réservation
-                </TableCell>
+                <TableHead>{t("admin.bookings.col_client")}</TableHead>
+                <TableHead>{t("admin.bookings.col_contact")}</TableHead>
+                <TableHead>{t("admin.bookings.col_service")}</TableHead>
+                <TableHead>{t("admin.bookings.col_datetime")}</TableHead>
+                <TableHead>{t("admin.status")}</TableHead>
+                <TableHead className="text-right">{t("admin.actions")}</TableHead>
               </TableRow>
-            ) : (
-              filtered.map((r) => (
-                <TableRow key={r.id}>
-                  <TableCell className="font-medium">{r.clientName}</TableCell>
-                  <TableCell>
-                    <div className="text-xs space-y-1">
-                      <div className="flex items-center gap-1 text-muted-foreground">
-                        <Mail className="h-3 w-3" /> {r.email}
-                      </div>
-                      <div className="flex items-center gap-1 text-muted-foreground">
-                        <Phone className="h-3 w-3" /> {r.phone}
-                      </div>
-                    </div>
-                  </TableCell>
-                  <TableCell>{r.service}</TableCell>
-                  <TableCell>
-                    <div className="text-sm">
-                      {new Date(r.date).toLocaleDateString("fr-FR", { day: "2-digit", month: "short", year: "numeric" })}
-                    </div>
-                    <div className="text-xs text-muted-foreground">{r.time}</div>
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant={statusConfig[r.status].variant}>{statusConfig[r.status].label}</Badge>
-                  </TableCell>
-                  <TableCell className="text-right space-x-1">
-                    {r.status !== "confirmed" && (
-                      <Button variant="ghost" size="icon" onClick={() => handleConfirm(r.id)} title="Confirmer">
-                        <Check className="h-4 w-4 text-primary" />
-                      </Button>
-                    )}
-                    {r.status !== "cancelled" && (
-                      <Button variant="ghost" size="icon" onClick={() => handleCancel(r.id)} title="Annuler">
-                        <X className="h-4 w-4 text-muted-foreground" />
-                      </Button>
-                    )}
-                    <Button variant="ghost" size="icon" onClick={() => setDeleteId(r.id)} title="Supprimer">
-                      <Trash2 className="h-4 w-4 text-destructive" />
-                    </Button>
+            </TableHeader>
+            <TableBody>
+              {filtered.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+                    {t("admin.bookings.none")}
                   </TableCell>
                 </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
+              ) : (
+                filtered.map((r) => (
+                  <TableRow key={r.id}>
+                    <TableCell className="font-medium">{r.clientName}</TableCell>
+                    <TableCell>
+                      <div className="text-xs space-y-1">
+                        <div className="flex items-center gap-1 text-muted-foreground">
+                          <Mail className="h-3 w-3" /> {r.email}
+                        </div>
+                        <div className="flex items-center gap-1 text-muted-foreground">
+                          <Phone className="h-3 w-3" /> {r.phone}
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>{r.service}</TableCell>
+                    <TableCell>
+                      <div className="text-sm">
+                        {new Date(r.date).toLocaleDateString(locale, { day: "2-digit", month: "short", year: "numeric" })}
+                      </div>
+                      <div className="text-xs text-muted-foreground">{r.time}</div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={statusConfig[r.status].variant}>
+                        {statusConfig[r.status].label}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-right space-x-1">
+                      {r.status !== "confirmed" && (
+                        <Button variant="ghost" size="icon" onClick={() => handleConfirm(r.id)} title={t("admin.status.confirmed")}>
+                          <Check className="h-4 w-4 text-primary" />
+                        </Button>
+                      )}
+                      {r.status !== "cancelled" && (
+                        <Button variant="ghost" size="icon" onClick={() => handleCancel(r.id)} title={t("admin.status.cancelled")}>
+                          <X className="h-4 w-4 text-muted-foreground" />
+                        </Button>
+                      )}
+                      <Button variant="ghost" size="icon" onClick={() => setDeleteId(r.id)} title={t("admin.delete")}>
+                        <Trash2 className="h-4 w-4 text-destructive" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        )}
       </Card>
 
       <AlertDialog open={!!deleteId} onOpenChange={(o) => !o && setDeleteId(null)}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Supprimer cette réservation ?</AlertDialogTitle>
-            <AlertDialogDescription>Cette action est irréversible.</AlertDialogDescription>
+            <AlertDialogTitle>{t("admin.bookings.delete_title")}</AlertDialogTitle>
+            <AlertDialogDescription>{t("admin.irreversible")}</AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Annuler</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete}>Supprimer</AlertDialogAction>
+            <AlertDialogCancel>{t("admin.cancel")}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete}>{t("admin.delete")}</AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
   );
-};
+}