mirror of
http://88.130.71.182:3000/BlitTech/badoHair_fe.git
synced 2026-06-13 08:58:31 +00:00
only front-end init
This commit is contained in:
Rustico77
277
app/admin/produits/page.tsx
Normal file
277
app/admin/produits/page.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Plus, Pencil, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
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,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { useAdmin } from "@/contexts/AdminContext";
|
||||
import { Product } from "@/data/products";
|
||||
import { toast } from "sonner";
|
||||
|
||||
type FormState = {
|
||||
name: string;
|
||||
category: Product["category"];
|
||||
price: string;
|
||||
image: string;
|
||||
description: string;
|
||||
colors: string;
|
||||
lengths: string;
|
||||
isNew: boolean;
|
||||
isBestseller: boolean;
|
||||
};
|
||||
|
||||
const emptyForm: FormState = {
|
||||
name: "",
|
||||
category: "clip-in",
|
||||
price: "",
|
||||
image: "",
|
||||
description: "",
|
||||
colors: "",
|
||||
lengths: "",
|
||||
isNew: false,
|
||||
isBestseller: false,
|
||||
};
|
||||
|
||||
export default function AdminProducts() {
|
||||
const { products, addProduct, updateProduct, deleteProduct } = useAdmin();
|
||||
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 openCreate = () => {
|
||||
setEditingId(null);
|
||||
setForm(emptyForm);
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const openEdit = (p: Product) => {
|
||||
setEditingId(p.id);
|
||||
setForm({
|
||||
name: p.name,
|
||||
category: p.category,
|
||||
price: String(p.price),
|
||||
image: p.image,
|
||||
description: p.description,
|
||||
colors: p.colors.join(", "),
|
||||
lengths: p.lengths.join(", "),
|
||||
isNew: !!p.isNew,
|
||||
isBestseller: !!p.isBestseller,
|
||||
});
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const price = parseFloat(form.price);
|
||||
if (!form.name || isNaN(price)) {
|
||||
toast.error("Nom et prix valides requis");
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
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"],
|
||||
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,
|
||||
};
|
||||
|
||||
if (editingId) {
|
||||
updateProduct(editingId, payload);
|
||||
toast.success("Produit modifié");
|
||||
} else {
|
||||
addProduct(payload);
|
||||
toast.success("Produit ajouté");
|
||||
}
|
||||
setDialogOpen(false);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
if (deleteId) {
|
||||
deleteProduct(deleteId);
|
||||
toast.success("Produit supprimé");
|
||||
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>
|
||||
</div>
|
||||
<Button onClick={openCreate}>
|
||||
<Plus className="h-4 w-4" />
|
||||
Ajouter
|
||||
</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>
|
||||
))}
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
<Select value={form.category} onValueChange={(v) => setForm({ ...form, category: v as Product["category"] })}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="clip-in">Clip-In</SelectItem>
|
||||
<SelectItem value="tape-in">Tape-In</SelectItem>
|
||||
<SelectItem value="ponytail">Ponytail</SelectItem>
|
||||
<SelectItem value="keratin">Kératine</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="price">Prix (€)</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>
|
||||
<div className="space-y-2 col-span-2">
|
||||
<Label htmlFor="description">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>
|
||||
<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>
|
||||
<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
|
||||
</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
|
||||
</label>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>Annuler</Button>
|
||||
<Button type="submit">{editingId ? "Enregistrer" : "Créer"}</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<AlertDialog open={!!deleteId} onOpenChange={(o) => !o && setDeleteId(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Supprimer ce produit ?</AlertDialogTitle>
|
||||
<AlertDialogDescription>Cette action est irréversible.</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Annuler</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDelete}>Supprimer</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user