Update May 12 by Elvis

app/admin/produits/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useState } from "react";
-import { Plus, Pencil, Trash2 } from "lucide-react";
+import { useState, useRef } from "react";
+import { Plus, Pencil, Trash2, Upload, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -9,39 +9,22 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Badge } from "@/components/ui/badge";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from "@/components/ui/table";
 import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
+  Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogDescription,
 } from "@/components/ui/dialog";
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
+  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from "@/components/ui/select";
 import { useAdmin } from "@/contexts/AdminContext";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { ApiError } from "@/lib/api";
+import { adminUploadProductImage } from "@/lib/api/products";
 import { Product } from "@/data/products";
 import { toast } from "sonner";
 
@@ -49,7 +32,7 @@ type FormState = {
   name: string;
   category: Product["category"];
   price: string;
-  image: string;
+  original_price: string;
   description: string;
   colors: string;
   lengths: string;
@@ -61,7 +44,7 @@ const emptyForm: FormState = {
   name: "",
   category: "clip-in",
   price: "",
-  image: "",
+  original_price: "",
   description: "",
   colors: "",
   lengths: "",
@@ -70,15 +53,29 @@ const emptyForm: FormState = {
 };
 
 export default function AdminProducts() {
-  const { products, addProduct, updateProduct, deleteProduct } = useAdmin();
+  const { products, productsLoading, addProduct, updateProduct, deleteProduct, refreshProducts } = useAdmin();
+  const { t } = useLanguage();
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [form, setForm] = useState<FormState>(emptyForm);
   const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const categoryLabels: Record<Product["category"], string> = {
+    "clip-in": "Clip-In",
+    "tape-in": "Tape-In",
+    "ponytail": "Ponytail",
+    "keratin": t("admin.products.category") === "Kategorie" ? "Keratin" : t("admin.products.category") === "Category" ? "Keratin" : "Kératine",
+  };
 
   const openCreate = () => {
     setEditingId(null);
     setForm(emptyForm);
+    setImageFile(null);
+    setImagePreview(null);
     setDialogOpen(true);
   };
 
@@ -88,21 +85,36 @@ export default function AdminProducts() {
       name: p.name,
       category: p.category,
       price: String(p.price),
-      image: p.image,
+      original_price: p.originalPrice ? String(p.originalPrice) : "",
       description: p.description,
       colors: p.colors.join(", "),
       lengths: p.lengths.join(", "),
       isNew: !!p.isNew,
       isBestseller: !!p.isBestseller,
     });
+    setImageFile(null);
+    setImagePreview(p.image || null);
     setDialogOpen(true);
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setImageFile(file);
+    setImagePreview(URL.createObjectURL(file));
+  };
+
+  const clearImage = () => {
+    setImageFile(null);
+    setImagePreview(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     const price = parseFloat(form.price);
     if (!form.name || isNaN(price)) {
-      toast.error("Nom et prix valides requis");
+      toast.error(t("admin.products.valid_required"));
       return;
     }
 
@@ -110,109 +122,131 @@ export default function AdminProducts() {
       name: form.name,
       category: form.category,
       price,
-      image: form.image || "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=600&h=800&fit=crop",
-      images: [form.image || "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=600&h=800&fit=crop"],
+      original_price: form.original_price ? parseFloat(form.original_price) : undefined,
       colors: form.colors.split(",").map((c) => c.trim()).filter(Boolean),
       lengths: form.lengths.split(",").map((l) => l.trim()).filter(Boolean),
       description: form.description,
       features: [],
-      isNew: form.isNew,
-      isBestseller: form.isBestseller,
-      rating: 5,
-      reviewCount: 0,
+      is_new: form.isNew,
+      is_bestseller: form.isBestseller,
     };
 
-    if (editingId) {
-      updateProduct(editingId, payload);
-      toast.success("Produit modifié");
-    } else {
-      addProduct(payload);
-      toast.success("Produit ajouté");
+    setSaving(true);
+    try {
+      let savedId = editingId;
+      if (editingId) {
+        await updateProduct(editingId, payload);
+      } else {
+        const created = await addProduct(payload);
+        savedId = created.id;
+      }
+      if (imageFile && savedId) {
+        await adminUploadProductImage(savedId, imageFile);
+        await refreshProducts();
+      }
+      toast.success(editingId ? t("admin.products.saved") : t("admin.products.added"));
+      setDialogOpen(false);
+    } catch (err) {
+      toast.error(err instanceof ApiError ? err.message : t("admin.products.save_error"));
+    } finally {
+      setSaving(false);
     }
-    setDialogOpen(false);
   };
 
-  const handleDelete = () => {
-    if (deleteId) {
-      deleteProduct(deleteId);
-      toast.success("Produit supprimé");
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    try {
+      await deleteProduct(deleteId);
+      toast.success(t("admin.products.deleted"));
+    } catch (err) {
+      toast.error(err instanceof ApiError ? err.message : t("admin.products.delete_error"));
+    } finally {
       setDeleteId(null);
     }
   };
 
-  const categoryLabels: Record<Product["category"], string> = {
-    "clip-in": "Clip-In",
-    "tape-in": "Tape-In",
-    "ponytail": "Ponytail",
-    "keratin": "Kératine",
-  };
-
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="font-serif text-2xl font-semibold">Produits</h2>
-          <p className="text-sm text-muted-foreground mt-1">{products.length} produit{products.length > 1 ? "s" : ""} au catalogue</p>
+          <h2 className="font-serif text-2xl font-semibold">{t("admin.products.title")}</h2>
+          <p className="text-sm text-muted-foreground mt-1">
+            {products.length} {t("admin.products.subtitle")}
+          </p>
         </div>
         <Button onClick={openCreate}>
           <Plus className="h-4 w-4" />
-          Ajouter
+          {t("admin.add")}
         </Button>
       </div>
 
       <Card>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-16">Image</TableHead>
-              <TableHead>Nom</TableHead>
-              <TableHead>Catégorie</TableHead>
-              <TableHead>Prix</TableHead>
-              <TableHead>Statut</TableHead>
-              <TableHead className="text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {products.map((p) => (
-              <TableRow key={p.id}>
-                <TableCell>
-                  <img src={p.image} alt={p.name} className="h-12 w-12 rounded object-cover" />
-                </TableCell>
-                <TableCell className="font-medium">{p.name}</TableCell>
-                <TableCell className="text-muted-foreground">{categoryLabels[p.category]}</TableCell>
-                <TableCell>{p.price} €</TableCell>
-                <TableCell className="space-x-1">
-                  {p.isNew && <Badge variant="secondary">Nouveau</Badge>}
-                  {p.isBestseller && <Badge>Bestseller</Badge>}
-                </TableCell>
-                <TableCell className="text-right space-x-2">
-                  <Button variant="ghost" size="icon" onClick={() => openEdit(p)}>
-                    <Pencil className="h-4 w-4" />
-                  </Button>
-                  <Button variant="ghost" size="icon" onClick={() => setDeleteId(p.id)}>
-                    <Trash2 className="h-4 w-4 text-destructive" />
-                  </Button>
-                </TableCell>
-              </TableRow>
+        {productsLoading ? (
+          <div className="p-8 space-y-3">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="h-12 bg-muted animate-pulse rounded" />
             ))}
-          </TableBody>
-        </Table>
+          </div>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-16">{t("admin.products.col_image")}</TableHead>
+                <TableHead>{t("admin.products.col_name")}</TableHead>
+                <TableHead>{t("admin.products.col_category")}</TableHead>
+                <TableHead>{t("admin.products.col_price")}</TableHead>
+                <TableHead>{t("admin.products.col_status")}</TableHead>
+                <TableHead className="text-right">{t("admin.actions")}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {products.map((p) => (
+                <TableRow key={p.id}>
+                  <TableCell>
+                    {p.image ? (
+                      <img src={p.image} alt={p.name} className="h-12 w-12 rounded object-cover" />
+                    ) : (
+                      <div className="h-12 w-12 rounded bg-muted flex items-center justify-center">
+                        <Upload className="h-4 w-4 text-muted-foreground" />
+                      </div>
+                    )}
+                  </TableCell>
+                  <TableCell className="font-medium">{p.name}</TableCell>
+                  <TableCell className="text-muted-foreground">{categoryLabels[p.category]}</TableCell>
+                  <TableCell>{p.price} €</TableCell>
+                  <TableCell className="space-x-1">
+                    {p.isNew && <Badge variant="secondary">{t("admin.products.badge_new")}</Badge>}
+                    {p.isBestseller && <Badge>Bestseller</Badge>}
+                  </TableCell>
+                  <TableCell className="text-right space-x-2">
+                    <Button variant="ghost" size="icon" onClick={() => openEdit(p)}>
+                      <Pencil className="h-4 w-4" />
+                    </Button>
+                    <Button variant="ghost" size="icon" onClick={() => setDeleteId(p.id)}>
+                      <Trash2 className="h-4 w-4 text-destructive" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
       </Card>
 
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
         <DialogContent className="lg:min-w-2xl max-w-2xl max-h-[90vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle>{editingId ? "Modifier le produit" : "Nouveau produit"}</DialogTitle>
-            <DialogDescription>Renseignez les informations du produit</DialogDescription>
+            <DialogTitle>{editingId ? t("admin.products.edit_title") : t("admin.products.create_title")}</DialogTitle>
+            <DialogDescription>{t("admin.products.form_desc")}</DialogDescription>
           </DialogHeader>
           <form onSubmit={handleSubmit} className="space-y-4">
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2 col-span-2">
-                <Label htmlFor="name">Nom</Label>
+                <Label htmlFor="name">{t("admin.products.name")}</Label>
                 <Input id="name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
               </div>
               <div className="space-y-2">
-                <Label>Catégorie</Label>
+                <Label>{t("admin.products.category")}</Label>
                 <Select value={form.category} onValueChange={(v) => setForm({ ...form, category: v as Product["category"] })}>
                   <SelectTrigger><SelectValue /></SelectTrigger>
                   <SelectContent>
@@ -224,37 +258,60 @@ export default function AdminProducts() {
                 </Select>
               </div>
               <div className="space-y-2">
-                <Label htmlFor="price">Prix (€)</Label>
+                <Label htmlFor="price">{t("admin.products.price")}</Label>
                 <Input id="price" type="number" step="0.01" value={form.price} onChange={(e) => setForm({ ...form, price: e.target.value })} required />
               </div>
-              <div className="space-y-2 col-span-2">
-                <Label htmlFor="image">URL de l'image</Label>
-                <Input id="image" value={form.image} onChange={(e) => setForm({ ...form, image: e.target.value })} placeholder="https://..." />
+              <div className="space-y-2">
+                <Label htmlFor="original_price">{t("admin.products.original_price")}</Label>
+                <Input id="original_price" type="number" step="0.01" value={form.original_price} onChange={(e) => setForm({ ...form, original_price: e.target.value })} placeholder={t("admin.products.optional")} />
               </div>
               <div className="space-y-2 col-span-2">
-                <Label htmlFor="description">Description</Label>
+                <Label>{t("admin.products.image")}</Label>
+                <div className="flex items-start gap-4">
+                  {imagePreview && (
+                    <div className="relative shrink-0">
+                      <img src={imagePreview} alt="preview" className="h-24 w-24 rounded object-cover border border-border" />
+                      {imageFile && (
+                        <button type="button" onClick={clearImage} className="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-0.5">
+                          <X className="h-3 w-3" />
+                        </button>
+                      )}
+                    </div>
+                  )}
+                  <div className="flex-1">
+                    <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleFileChange} />
+                    <Button type="button" variant="outline" size="sm" onClick={() => fileInputRef.current?.click()}>
+                      <Upload className="h-4 w-4 mr-2" />
+                      {imagePreview ? t("admin.products.change_image") : t("admin.products.choose_image")}
+                    </Button>
+                    {imageFile && <p className="text-xs text-muted-foreground mt-1.5">{imageFile.name}</p>}
+                  </div>
+                </div>
+              </div>
+              <div className="space-y-2 col-span-2">
+                <Label htmlFor="description">{t("admin.products.description")}</Label>
                 <Textarea id="description" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} rows={3} />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="colors">Couleurs (séparées par des virgules)</Label>
+                <Label htmlFor="colors">{t("admin.products.colors")}</Label>
                 <Input id="colors" value={form.colors} onChange={(e) => setForm({ ...form, colors: e.target.value })} placeholder="Brun, Blond, Noir" />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="lengths">Longueurs (séparées par des virgules)</Label>
+                <Label htmlFor="lengths">{t("admin.products.lengths")}</Label>
                 <Input id="lengths" value={form.lengths} onChange={(e) => setForm({ ...form, lengths: e.target.value })} placeholder="40 cm, 50 cm" />
               </div>
               <label className="flex items-center gap-2 text-sm">
                 <input type="checkbox" checked={form.isNew} onChange={(e) => setForm({ ...form, isNew: e.target.checked })} />
-                Marquer comme Nouveau
+                {t("admin.products.mark_new")}
               </label>
               <label className="flex items-center gap-2 text-sm">
                 <input type="checkbox" checked={form.isBestseller} onChange={(e) => setForm({ ...form, isBestseller: e.target.checked })} />
-                Marquer comme Bestseller
+                {t("admin.products.mark_bestseller")}
               </label>
             </div>
             <DialogFooter>
-              <Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>Annuler</Button>
-              <Button type="submit">{editingId ? "Enregistrer" : "Créer"}</Button>
+              <Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>{t("admin.cancel")}</Button>
+              <Button type="submit" disabled={saving}>{saving ? t("admin.saving") : editingId ? t("admin.save") : t("admin.create")}</Button>
             </DialogFooter>
           </form>
         </DialogContent>
@@ -263,15 +320,15 @@ export default function AdminProducts() {
       <AlertDialog open={!!deleteId} onOpenChange={(o) => !o && setDeleteId(null)}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Supprimer ce produit ?</AlertDialogTitle>
-            <AlertDialogDescription>Cette action est irréversible.</AlertDialogDescription>
+            <AlertDialogTitle>{t("admin.products.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>
   );
-};
+}