+
+ {loading ? (
+
+
+ )}
+
+
+ );
+}
diff --git a/app/admin/commandes/page.tsx b/app/admin/commandes/page.tsx
new file mode 100644
index 0000000..8d0e5f7
--- /dev/null
+++ b/app/admin/commandes/page.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+ Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+ DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ChevronDown, RefreshCw } from "lucide-react";
+import { toast } from "sonner";
+import { adminListOrders, adminUpdateOrderStatus, AdminOrderApi } from "@/lib/api/orders";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { ApiError } from "@/lib/api";
+
+type Status = "all" | "pending" | "paid" | "shipped" | "delivered" | "cancelled" | "refunded";
+
+const NEXT_STATUSES: Record
+
+
+
+
+
+
+
+ {t("admin.customers.title")}
+{customers.length} {t("admin.customers.subtitle")}
+
+ {Array.from({ length: 5 }).map((_, i) => (
+
+ ))}
+
+ ) : (
+
+ setFilter(v as Status)}>
+
+ {t("admin.orders.tab_all")}
+ {t("admin.orders.tab_pending")}
+ {t("admin.orders.tab_paid")}
+ {t("admin.orders.tab_shipped")}
+ {t("admin.orders.tab_delivered")}
+ {t("admin.orders.tab_cancelled")}
+
+
+
+
+ {loading ? (
+
+
+ )}
+
+
+ );
+}
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index 1e77a43..d942c24 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -2,29 +2,26 @@
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AdminSidebar } from "@/components/admin/AdminSidebar";
-import { useAdmin } from "@/contexts/AdminContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { getToken } from "@/lib/api";
import { usePathname, useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect } from "react";
+import LanguageSwitcher from "@/components/LanguageSwitcher";
export default function AdminLayout({ children }: { children: React.ReactNode }) {
- const { isAdmin } = useAdmin();
+ const { isAdmin, isLoading } = useAuth();
+ const { t } = useLanguage();
const router = useRouter();
const pathname = usePathname();
const isLoginRoute = pathname === "/admin/login";
+ const hasToken = typeof window !== "undefined" && !!getToken();
- // useEffect(() => {
- // if (!isAdmin && !isLoginRoute) {
- // router.push("/admin/login");
- // }
- // }, [isAdmin, isLoginRoute, router]);
-
- // if (!isAdmin && !isLoginRoute) {
- // return (
- //
+
+
+
+
+
+ {t("admin.orders.title")}
+{orders.length} {t("admin.orders.subtitle")}
+
+ {Array.from({ length: 5 }).map((_, i) => (
+
+ ))}
+
+ ) : (
+
- //
- // );
- // }
+ useEffect(() => {
+ if (!isLoading && !isAdmin && !isLoginRoute) {
+ router.push("/admin/login");
+ }
+ }, [isAdmin, isLoading, isLoginRoute, router]);
if (isLoginRoute) {
return (
@@ -36,17 +33,33 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
);
}
+ // Still loading auth state, or token exists but isAdmin not yet committed (post-login race)
+ if (isLoading || (!isAdmin && hasToken)) {
+ return (
+ Chargement...
- //
+
+ );
+ }
+
+ if (!isAdmin) {
+ return null;
+ }
+
// Layout pour l'admin connecté (avec la sidebar)
return (
{t("admin.loading")}
+
-
-
+
{children}
diff --git a/app/admin/login/page.tsx b/app/admin/login/page.tsx
index 205a165..aa9856f 100644
--- a/app/admin/login/page.tsx
+++ b/app/admin/login/page.tsx
@@ -2,33 +2,39 @@
import { useState } from "react";
import { Lock } from "lucide-react";
-import { useAdmin } from "@/contexts/AdminContext";
+import { useAuth } from "@/contexts/AuthContext";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ApiError } from "@/lib/api";
import { toast } from "sonner";
import { useRouter } from "next/navigation";
export default function AdminLogin() {
- const { login, isAdmin } = useAdmin();
- const route = useRouter();
+ const { login } = useAuth();
+ const router = useRouter();
+ const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
- const handleSubmit = (e: React.FormEvent) => {
+ const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
- setTimeout(() => {
- const ok = login(password);
- setLoading(false);
- if (ok) {
- toast.success("Connexion réussie");
- route.push("/admin");
- } else {
- toast.error("Mot de passe incorrect");
+ try {
+ const profile = await login(email, password);
+ if (profile.role !== "admin") {
+ toast.error("Accès refusé : rôle administrateur requis");
+ return;
}
- }, 300);
+ toast.success("Connexion réussie");
+ router.push("/admin");
+ } catch (err) {
+ const msg = err instanceof ApiError ? err.message : "Identifiants incorrects";
+ toast.error(msg);
+ } finally {
+ setLoading(false);
+ }
};
return (
@@ -43,6 +49,17 @@ export default function AdminLogin() {
- Tableau de bord -
+
+
+ + {t("admin.header")} +
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+
+
+
+
+
+ ))}
+
+ );
+
+ const StatGrid = ({ cards }: { cards: typeof mainCards }) => (
+
+ {cards.map((s) => (
+
+
+
+
+ ))}
+
+ );
+
return (
-
+
+ {s.label}
+{s.value}
+
+
+
+
);
-};
+}
diff --git a/app/admin/parametres/page.tsx b/app/admin/parametres/page.tsx
new file mode 100644
index 0000000..4d92c52
--- /dev/null
+++ b/app/admin/parametres/page.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+import { adminGetSettings, adminUpdateSetting, StoreSetting } from "@/lib/api/settings";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { ApiError } from "@/lib/api";
+import { Save } from "lucide-react";
+
+export default function AdminParametres() {
+ const { t, locale } = useLanguage();
+ const [settings, setSettings] = useState([]);
+ const [values, setValues] = useState>({});
+ const [saving, setSaving] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ const SETTING_META: Record = {
+ default_booking_price: {
+ label: t("booking.free") === "Free" ? "Default booking price (€)" : t("booking.free") === "Kostenlos" ? "Standardpreis für Reservierungen (€)" : "Prix de réservation par défaut (€)",
+ description: t("booking.free") === "Free" ? "Price applied to each appointment (0 = free)" : t("booking.free") === "Kostenlos" ? "Preis pro Termin (0 = kostenlos)" : "Prix appliqué à chaque rendez-vous (0 = gratuit)",
+ type: "number",
+ },
+ };
+
+ useEffect(() => {
+ adminGetSettings()
+ .then((rows) => {
+ setSettings(rows);
+ const init: Record = {};
+ rows.forEach((r) => {
+ init[r.key] = r.value !== null && r.value !== undefined ? String(r.value) : "";
+ });
+ setValues(init);
+ })
+ .catch((e) => toast.error(e instanceof ApiError ? e.message : t("admin.error")))
+ .finally(() => setLoading(false));
+ }, []);
+
+ const handleSave = async (key: string) => {
+ setSaving(key);
+ try {
+ const meta = SETTING_META[key];
+ const raw = values[key] ?? "";
+ const value = meta?.type === "number" ? parseFloat(raw) : raw;
+ await adminUpdateSetting(key, value);
+ toast.success(t("admin.settings.saved"));
+ } catch (err) {
+ toast.error(err instanceof ApiError ? err.message : t("admin.error"));
+ } finally {
+ setSaving(null);
+ }
+ };
+
+ const knownKeys = settings.filter((s) => SETTING_META[s.key]);
+ const unknownKeys = settings.filter((s) => !SETTING_META[s.key]);
+
+ return (
+ ([]);
+ const [loading, setLoading] = useState(true);
+ const [form, setForm] = useState({
+ day_of_week: 0,
+ start_time: "09:00",
+ end_time: "18:00",
+ slot_duration_minutes: 60,
+ });
+ const [saving, setSaving] = useState(false);
+
+ const [genFrom, setGenFrom] = useState(toDateStr(new Date()));
+ const [genTo, setGenTo] = useState(() => {
+ const d = new Date();
+ d.setDate(d.getDate() + 30);
+ return toDateStr(d);
+ });
+ const [generating, setGenerating] = useState(false);
+
+ useEffect(() => {
+ adminGetSchedule()
+ .then(setSchedule)
+ .catch(() => toast.error(t("admin.error")))
+ .finally(() => setLoading(false));
+ }, []);
+
+ const addEntry = async () => {
+ setSaving(true);
+ try {
+ const entry = await adminCreateSchedule({
+ day_of_week: Number(form.day_of_week),
+ start_time: form.start_time + ":00",
+ end_time: form.end_time + ":00",
+ slot_duration_minutes: Number(form.slot_duration_minutes),
+ });
+ setSchedule((prev) => [...prev, entry].sort((a, b) => a.day_of_week - b.day_of_week));
+ toast.success(t("admin.planning.schedule_added"));
+ } catch {
+ toast.error(t("admin.error"));
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const removeEntry = async (id: string) => {
+ try {
+ await adminDeleteSchedule(id);
+ setSchedule((prev) => prev.filter((e) => e.id !== id));
+ toast.success(t("admin.planning.schedule_deleted"));
+ } catch {
+ toast.error(t("admin.error"));
+ }
+ };
+
+ const generate = async () => {
+ setGenerating(true);
+ try {
+ const res = await adminGenerateSlots(genFrom, genTo);
+ toast.success(t("admin.planning.generated", { n: res.created }));
+ } catch {
+ toast.error(t("admin.error"));
+ } finally {
+ setGenerating(false);
+ }
+ };
+
+ const grouped = DAY_NAMES.map((name, idx) => ({
+ name,
+ entries: schedule.filter((e) => e.day_of_week === idx),
+ }));
+
+ return (
+ ([]);
+ const [loadingSlots, setLoadingSlots] = useState(false);
+ const [selectedDay, setSelectedDay] = useState(null);
+
+ const loadSlots = useCallback(() => {
+ setLoadingSlots(true);
+ const from = toDateStr(monthStart(year, month));
+ const last = new Date(year, month + 1, 0);
+ const to = toDateStr(last);
+ adminListSlots(from, to)
+ .then(setSlots)
+ .catch(() => toast.error(t("admin.error")))
+ .finally(() => setLoadingSlots(false));
+ }, [year, month]);
+
+ useEffect(() => { loadSlots(); }, [loadSlots]);
+
+ const prevMonth = () => {
+ if (month === 0) { setYear((y) => y - 1); setMonth(11); }
+ else setMonth((m) => m - 1);
+ setSelectedDay(null);
+ };
+
+ const nextMonth = () => {
+ if (month === 11) { setYear((y) => y + 1); setMonth(0); }
+ else setMonth((m) => m + 1);
+ setSelectedDay(null);
+ };
+
+ const blockSlot = async (slot: TimeSlotApi) => {
+ try {
+ const updated = await adminUpdateSlot(slot.id, !slot.is_blocked);
+ setSlots((prev) => prev.map((s) => s.id === slot.id ? updated : s));
+ toast.success(slot.is_blocked ? t("admin.planning.slot_unblocked") : t("admin.planning.slot_blocked"));
+ } catch {
+ toast.error(t("admin.error"));
+ }
+ };
+
+ const deleteSlot = async (id: string) => {
+ try {
+ await adminDeleteSlot(id);
+ setSlots((prev) => prev.filter((s) => s.id !== id));
+ toast.success(t("admin.planning.slot_deleted"));
+ } catch {
+ toast.error(t("admin.error"));
+ }
+ };
+
+ const firstDay = monthStart(year, month);
+ const totalDays = daysInMonth(year, month);
+ const startOffset = weekdayMon(firstDay);
+ const cells: (number | null)[] = [
+ ...Array(startOffset).fill(null),
+ ...Array.from({ length: totalDays }, (_, i) => i + 1),
+ ];
+ while (cells.length % 7 !== 0) cells.push(null);
+
+ const slotsByDay: Record = {};
+ slots.forEach((s) => {
+ (slotsByDay[s.date] ||= []).push(s);
+ });
+
+ const selectedSlots = selectedDay ? (slotsByDay[selectedDay] ?? []) : [];
+
+ return (
+ ([]);
+ const [loading, setLoading] = useState(true);
+ const [newDate, setNewDate] = useState(toDateStr(new Date()));
+ const [newReason, setNewReason] = useState("");
+ const [adding, setAdding] = useState(false);
+
+ useEffect(() => {
+ adminGetBlockedDates()
+ .then(setDates)
+ .catch(() => toast.error(t("admin.error")))
+ .finally(() => setLoading(false));
+ }, []);
+
+ const add = async () => {
+ setAdding(true);
+ try {
+ const entry = await adminAddBlockedDate(newDate, newReason || undefined);
+ setDates((prev) => [...prev, entry].sort((a, b) => a.date.localeCompare(b.date)));
+ setNewReason("");
+ toast.success(t("admin.planning.date_blocked"));
+ } catch {
+ toast.error(t("admin.error"));
+ } finally {
+ setAdding(false);
+ }
+ };
+
+ const remove = async (id: string) => {
+ try {
+ await adminRemoveBlockedDate(id);
+ setDates((prev) => prev.filter((d) => d.id !== id));
+ toast.success(t("admin.planning.date_unblocked"));
+ } catch {
+ toast.error(t("admin.error"));
+ }
+ };
+
+ return (
+ ("schedule");
+
+ const tabs: { id: Tab; label: string }[] = [
+ { id: "schedule", label: t("admin.planning.tab_schedule") },
+ { id: "calendar", label: t("admin.planning.tab_calendar") },
+ { id: "blocked", label: t("admin.planning.tab_blocked") },
+ ];
+
+ return (
+ (null);
const [form, setForm] = useState(emptyForm);
const [deleteId, setDeleteId] = useState(null);
+ const [saving, setSaving] = useState(false);
+ const [imageFile, setImageFile] = useState(null);
+ const [imagePreview, setImagePreview] = useState(null);
+ const fileInputRef = useRef(null);
+
+ const categoryLabels: Record = {
+ "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) => {
+ 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 = {
- "clip-in": "Clip-In",
- "tape-in": "Tape-In",
- "ponytail": "Ponytail",
- "keratin": "Kératine",
- };
-
return (
-
-
+
+ ) : (
+
+
+ )}
-
- Vue d'ensemble
-Aperçu de votre activité
+{t("admin.overview.title")}
+{t("admin.overview.subtitle")}
- {stats.map((s) => (
-
-
-
-
- ))}
+
+
+
+
+ )}
+
- Prochains rendez-vous
+ {t("admin.overview.upcoming_title")}
{upcoming.length === 0 ? (
-
@@ -76,4 +130,4 @@ export default function AdminOverview() {
-
- {s.label}
-{s.value}
-
-
-
+
+ {t("admin.overview.activity_section")}
+ {stats === null ?
+
+
+ {stats && stats.low_stock_count > 0 && (
+ {t("admin.overview.revenue_section")}
+ {stats === null ?+ {t("admin.overview.low_stock", { n: stats.low_stock_count })} +
+Aucun rendez-vous à venir.
+{t("admin.overview.no_upcoming")}
) : (
{upcoming.map((r) => (
@@ -63,9 +115,11 @@ export default function AdminOverview() {
{r.service}
-
- {r.status === "confirmed" ? "Confirmé" : "En attente"}
+ {r.status === "confirmed" ? t("admin.status.confirmed") : t("admin.status.pending")}
{new Date(r.date).toLocaleDateString("fr-FR", { day: "2-digit", month: "short" })} à {r.time}
++ {new Date(r.date).toLocaleDateString(locale, { day: "2-digit", month: "short" })} à {r.time} +
+
+
+ {t("admin.settings.bookings")}
+
+
+ {knownKeys.map((s) => {
+ const meta = SETTING_META[s.key];
+ return (
+
+
+
+ {unknownKeys.length > 0 && (
+
+
+ {t("admin.settings.other")}
+
+
+ {unknownKeys.map((s) => (
+
+
+ )}
+
+ )}
+
+ );
+}
diff --git a/app/admin/planning/page.tsx b/app/admin/planning/page.tsx
new file mode 100644
index 0000000..3ad6145
--- /dev/null
+++ b/app/admin/planning/page.tsx
@@ -0,0 +1,574 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { ChevronLeft, ChevronRight, Plus, Trash2, RefreshCw, Ban, Check } from "lucide-react";
+import { toast } from "sonner";
+import {
+ adminGetSchedule, adminCreateSchedule, adminDeleteSchedule,
+ adminListSlots, adminGenerateSlots, adminUpdateSlot, adminDeleteSlot,
+ adminGetBlockedDates, adminAddBlockedDate, adminRemoveBlockedDate,
+ WeeklySchedule, BlockedDate, TimeSlotApi,
+} from "@/lib/api/bookings";
+import { useLanguage } from "@/contexts/LanguageContext";
+
+const DURATIONS = [30, 45, 60, 90, 120];
+
+function toDateStr(d: Date): string {
+ return d.toISOString().slice(0, 10);
+}
+
+function monthStart(year: number, month: number) {
+ return new Date(year, month, 1);
+}
+
+function daysInMonth(year: number, month: number) {
+ return new Date(year, month + 1, 0).getDate();
+}
+
+// Monday-first weekday index (0=Mon, 6=Sun)
+function weekdayMon(date: Date) {
+ return (date.getDay() + 6) % 7;
+}
+
+// ── Schedule Tab ──────────────────────────────────────────────────────────────
+
+function ScheduleTab() {
+ const { t } = useLanguage();
+ const DAY_NAMES = Array.from({ length: 7 }, (_, i) => t(`admin.day.${i}`));
+
+ const [schedule, setSchedule] = useState
+
+
+ {loading ? (
+ {t("admin.settings.title")}
+{t("admin.settings.subtitle")}
+
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
+ ) : (
+ <>
+
+
+
+ );
+ })}
+ {knownKeys.length === 0 && (
+ {meta.description}
+
+ setValues((prev) => ({ ...prev, [s.key]: e.target.value }))}
+ className="max-w-[200px]"
+ />
+
+
+ {s.updated_at && (
+ + {t("admin.settings.last_updated")} {new Date(s.updated_at).toLocaleDateString(locale)} +
+ )} +{t("admin.settings.no_settings")}
+ )} +
+
+
+ ))}
+
+ setValues((prev) => ({ ...prev, [s.key]: e.target.value }))}
+ />
+
+
+
+
+
+ {t("admin.planning.weekly_title")}
+
+
+ {loading ? (
+
+
+
+
+
+ {t("admin.planning.add_title")}
+
+
+
+
+
+
+
+ {t("admin.planning.generate_title")}
+
+
+
+
+
+ );
+}
+
+// ── Calendar Tab ──────────────────────────────────────────────────────────────
+
+function CalendarTab() {
+ const { t, locale } = useLanguage();
+ const DAY_NAMES = Array.from({ length: 7 }, (_, i) => t(`admin.day.${i}`));
+ const MONTH_NAMES = Array.from({ length: 12 }, (_, i) => t(`admin.month.${i}`));
+
+ const today = new Date();
+ const [year, setYear] = useState(today.getFullYear());
+ const [month, setMonth] = useState(today.getMonth());
+ const [slots, setSlots] = useState
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
+ ) : (
+
+ {grouped.map(({ name, entries }) => (
+
+ )}
+
+ {name}
+
+ ))}
+
+ {entries.length === 0 ? (
+ {t("admin.planning.not_available")}
+ ) : (
+ entries.map((e) => (
+
+
+ {e.start_time.slice(0, 5)} – {e.end_time.slice(0, 5)}
+ ({e.slot_duration_minutes} min)
+
+
+ ))
+ )}
+
+
+
+
+
+
+
+
+
+ setForm((f) => ({ ...f, start_time: e.target.value }))}
+ />
+
+
+
+ setForm((f) => ({ ...f, end_time: e.target.value }))}
+ />
+
+
+
+
+
+ {t("admin.planning.generate_desc")}
+
+
+
+
+ setGenFrom(e.target.value)} />
+
+
+
+ setGenTo(e.target.value)} />
+
+
+
+
+
+
+
+
+ {selectedDay && (
+
+
+
+ {t("admin.planning.slots_for")} {new Date(selectedDay + "T00:00:00").toLocaleDateString(locale, {
+ weekday: "long", day: "numeric", month: "long"
+ })}
+
+
+
+ {loadingSlots ? (
+
+
+ )}
+
+ );
+}
+
+// ── Blocked Dates Tab ─────────────────────────────────────────────────────────
+
+function BlockedDatesTab() {
+ const { t, locale } = useLanguage();
+ const [dates, setDates] = useState
+
+
+
+ {MONTH_NAMES[month]} {year}
+ +
+ {DAY_NAMES.map((d) => (
+
+
+ {d.slice(0, 3)}
+
+ ))}
+ {cells.map((day, i) => {
+ if (!day) return ;
+ const dateStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+ const daySlots = slotsByDay[dateStr] ?? [];
+ const available = daySlots.filter((s) => !s.is_blocked && !s.is_booked).length;
+ const booked = daySlots.filter((s) => s.is_booked).length;
+ const blocked = daySlots.filter((s) => s.is_blocked).length;
+ const isToday = dateStr === toDateStr(today);
+ const isSelected = dateStr === selectedDay;
+
+ return (
+
+ );
+ })}
+ {t("admin.loading")}
+ ) : selectedSlots.length === 0 ? (
+ {t("admin.planning.no_slots")}
+ ) : ( +
+ {selectedSlots
+ .sort((a, b) => a.start_time.localeCompare(b.start_time))
+ .map((slot) => (
+
+ )}
+
+
+ ))}
+
+ {slot.start_time.slice(0, 5)} – {slot.end_time.slice(0, 5)}
+ {slot.is_booked && {t("admin.status.booked")} }
+ {slot.is_blocked && {t("admin.status.blocked")} }
+ {!slot.is_booked && !slot.is_blocked && {t("admin.status.free")} }
+
+ {!slot.is_booked && (
+
+
+
+
+ )}
+
+
+
+ {t("admin.planning.block_title")}
+
+
+
+
+
+
+
+ {t("admin.planning.blocked_list")}
+
+
+ {loading ? (
+
+
+
+ );
+}
+
+// ── Main Page ─────────────────────────────────────────────────────────────────
+
+type Tab = "schedule" | "calendar" | "blocked";
+
+export default function PlanningPage() {
+ const { t } = useLanguage();
+ const [tab, setTab] = useState{t("admin.planning.block_desc")}
+
+
+
+
+ setNewDate(e.target.value)} />
+
+
+
+ setNewReason(e.target.value)} />
+
+
+
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
+ ) : dates.length === 0 ? (
+ {t("admin.planning.no_blocked")}
+ ) : ( +
+ {dates.map((d) => (
+
+ )}
+
+
+ ))}
+
+
+ {new Date(d.date + "T00:00:00").toLocaleDateString(locale, {
+ weekday: "long", day: "numeric", month: "long", year: "numeric",
+ })}
+
+ {d.reason && — {d.reason}}
+
+
+
+
+ );
+}
diff --git a/app/admin/produits/page.tsx b/app/admin/produits/page.tsx
index 7834c57..eaef62d 100644
--- a/app/admin/produits/page.tsx
+++ b/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
+
+
+ {t("admin.planning.title")}
+{t("admin.planning.subtitle")}
+
+ {tabs.map((item) => (
+
+ ))}
+
+
+ {tab === "schedule" &&
-
Produits
-{products.length} produit{products.length > 1 ? "s" : ""} au catalogue
+{t("admin.products.title")}
++ {products.length} {t("admin.products.subtitle")} +