- 📦 Mes commandes + 📦 {t("orders.title")}
- {/* Onglets */}- Aucune commande {activeTab === "enCours" ? "en cours" : "terminée"}. + {activeTab === "enCours" ? t("orders.noneInProgress") : t("orders.noneCompleted")}
) : (
@@ -115,7 +116,7 @@ export default function MesCommandesPage() {
{it.title} × {it.quantity}
- {it.price} FCFA
+ {it.price} {t("common.fcfa")}
))}
diff --git a/app/acheteur/page.tsx b/app/acheteur/page.tsx
index c8a57ed..c0eee15 100644
--- a/app/acheteur/page.tsx
+++ b/app/acheteur/page.tsx
@@ -1,19 +1,21 @@
'use client';
import Link from "next/link";
+import { useTranslation } from "@/src/i18n/I18nProvider";
export default function AcheteurPage() {
+ const { t } = useTranslation();
+
return (
(null);
+
+ useEffect(() => {
+ if (!token) {
+ setPhase("error");
+ setErrorMessage(t("activation.invalidLink"));
+ return;
+ }
+
+ let cancelled = false;
+
+ setPhase("loading");
+ setErrorMessage(null);
+
+ const API_URL = resolveApiBaseUrl();
+
+ (async () => {
+ try {
+ if (!API_URL) {
+ if (!cancelled) {
+ setPhase("error");
+ setErrorMessage(t("activation.misconfiguration"));
+ }
+ return;
+ }
+
+ const res = await fetch(
+ `${API_URL}/api/suppliers/magic-link/${encodeURIComponent(token)}`,
+ {
+ method: "GET",
+ credentials: "include",
+ }
+ );
+
+ let data: { token?: unknown; error?: unknown; message?: unknown } = {};
+ try {
+ data = await res.json();
+ } catch {
+ /* non-JSON */
+ }
+
+ if (cancelled) return;
+
+ if (!res.ok) {
+ const errText =
+ (typeof data.error === "string" && data.error) ||
+ (typeof data.message === "string" && data.message) ||
+ "";
+ setPhase("error");
+ setErrorMessage(mapActivationError(errText, res.status, t));
+ return;
+ }
+
+ const jwt =
+ typeof data.token === "string" && data.token.length > 0
+ ? data.token
+ : null;
+
+ if (!jwt) {
+ setPhase("error");
+ setErrorMessage(t("activation.invalidLink"));
+ return;
+ }
+
+ try {
+ localStorage.setItem(SUPPLIER_JWT_KEY, jwt);
+ } catch {
+ setPhase("error");
+ setErrorMessage(t("activation.sessionSaveFailed"));
+ return;
+ }
+
+ setPhase("success");
+ } catch {
+ if (!cancelled) {
+ setPhase("error");
+ setErrorMessage(t("activation.networkError"));
+ }
+ }
+ })();
+
+ return () => {
+ cancelled = true;
+ };
+ }, [token, t]);
+
+ return (
+ (
+ SUPPLIER_CATEGORY_OPTIONS.map((o) => o.value)
+);
+
+type FormState = {
+ name: string;
+ country: string;
+ region: string;
+ city: string;
+ address: string;
+ postalCode: string;
+ accountEmail: string;
+ publicEmail: string;
+ phone: string;
+ website: string;
+};
+
+const initialForm: FormState = {
+ name: "",
+ country: "",
+ region: "",
+ city: "",
+ address: "",
+ postalCode: "",
+ accountEmail: "",
+ publicEmail: "",
+ phone: "",
+ website: "",
+};
+
+const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function isValidEmail(value: string): boolean {
+ return emailRe.test(value.trim());
+}
+
+function isValidOptionalUrl(value: string): boolean {
+ const v = value.trim();
+ if (!v) return true;
+ try {
+ const withProto = /^https?:\/\//i.test(v) ? v : `https://${v}`;
+ new URL(withProto);
+ return true;
+ } catch {
+ return false;
+ }
+}
+
+function normalizeCategoryValues(selected: string[]): Category[] {
+ const asArray = Array.isArray(selected) ? selected : [];
+ const filtered = asArray.filter(
+ (v): v is Category =>
+ typeof v === "string" && ALLOWED_CATEGORY_VALUES.has(v as Category)
+ );
+ return Array.from(new Set(filtered));
+}
+
+function buildPayload(
+ form: FormState,
+ categories: string[]
+): Record {
+ const safeCategories = normalizeCategoryValues(categories);
+ const payload: Record = {
+ name: form.name.trim(),
+ categories: safeCategories,
+ country: form.country.trim(),
+ accountEmail: form.accountEmail.trim(),
+ phone: form.phone.trim(),
+ };
+
+ const region = form.region.trim();
+ const city = form.city.trim();
+ const address = form.address.trim();
+ const postalCode = form.postalCode.trim();
+ const publicEmail = form.publicEmail.trim();
+ const website = form.website.trim();
+
+ if (region) payload.region = region;
+ if (city) payload.city = city;
+ if (address) payload.address = address;
+ if (postalCode) payload.postalCode = postalCode;
+ if (publicEmail) payload.publicEmail = publicEmail;
+ if (website) payload.website = website;
+
+ return payload;
+}
+
+const VALIDATION_FIELD_ORDER = [
+ "name",
+ "categories",
+ "country",
+ "region",
+ "city",
+ "address",
+ "postalCode",
+ "accountEmail",
+ "publicEmail",
+ "phone",
+ "website",
+] as const;
+
+const FIELD_SCROLL_ID: Record = {
+ name: "supplier-name",
+ categories: "supplier-categories",
+ country: "supplier-country",
+ region: "supplier-region",
+ city: "supplier-city",
+ address: "supplier-address",
+ postalCode: "supplier-postal",
+ accountEmail: "supplier-account-email",
+ publicEmail: "supplier-public-email",
+ phone: "supplier-phone",
+ website: "supplier-website",
+};
+
+function scrollToFirstFieldError(errors: Record) {
+ if (typeof document === "undefined") return;
+ for (const key of VALIDATION_FIELD_ORDER) {
+ if (!errors[key]) continue;
+ const id = FIELD_SCROLL_ID[key];
+ if (!id) continue;
+ const el = document.getElementById(id);
+ if (!el) continue;
+ el.scrollIntoView({ behavior: "smooth", block: "center" });
+ if (
+ el instanceof HTMLInputElement ||
+ el instanceof HTMLTextAreaElement ||
+ el instanceof HTMLSelectElement ||
+ el instanceof HTMLButtonElement
+ ) {
+ el.focus({ preventScroll: true });
+ }
+ break;
+ }
+}
+
+function parseBackendErrorsObject(raw: unknown): Record {
+ if (!raw || typeof raw !== "object" || Array.isArray(raw)) return {};
+ const out: Record = {};
+ for (const [k, v] of Object.entries(raw as Record)) {
+ if (typeof v === "string" && v.trim()) {
+ out[k] = v.trim();
+ continue;
+ }
+ if (Array.isArray(v)) {
+ const first = v.find((x) => typeof x === "string" && String(x).trim());
+ if (first) out[k] = String(first).trim();
+ continue;
+ }
+ if (v && typeof v === "object" && "message" in v) {
+ const m = (v as { message?: unknown }).message;
+ if (typeof m === "string" && m.trim()) out[k] = m.trim();
+ }
+ }
+ return out;
+}
+
+function resolveApiBaseUrl(): string {
+ const fromEnv = process.env.NEXT_PUBLIC_API_BASE?.trim();
+ if (fromEnv) return fromEnv.replace(/\/+$/, "");
+
+ if (typeof window !== "undefined" && window.location.hostname === "localhost") {
+ return "http://localhost:5000";
+ }
+
+ return "https://ecommerce-web-avec-tailwind.onrender.com";
+}
+
+export default function SupplierForm() {
+ const { t } = useTranslation();
+ const API_URL = resolveApiBaseUrl();
+
+ const [form, setForm] = useState(initialForm);
+ const [categories, setCategories] = useState([]);
+ const [fieldErrors, setFieldErrors] = useState>({});
+ const [serverMessage, setServerMessage] = useState(null);
+ const [success, setSuccess] = useState(false);
+ const [submitting, setSubmitting] = useState(false);
+ const submitLockRef = useRef(false);
+
+ function validateForm(
+ values: FormState,
+ selectedCategories: Category[]
+ ): Record {
+ const errors: Record = {};
+ const name = values.name.trim();
+ const country = values.country.trim();
+ const accountEmail = values.accountEmail.trim();
+ const phone = values.phone.trim();
+ const publicEmail = values.publicEmail.trim();
+ const website = values.website.trim();
+ const safeCategories = normalizeCategoryValues(selectedCategories);
+
+ if (!name) {
+ errors.name = t("suppliers.validation.nameRequired");
+ } else if (name.length < 2) {
+ errors.name = t("suppliers.validation.nameMin");
+ }
+
+ if (safeCategories.length === 0) {
+ errors.categories = t("suppliers.validation.categoriesRequired");
+ }
+
+ if (!country) {
+ errors.country = t("suppliers.validation.countryRequired");
+ }
+
+ if (!accountEmail) {
+ errors.accountEmail = t("suppliers.validation.accountEmailRequired");
+ } else if (!isValidEmail(accountEmail)) {
+ errors.accountEmail = t("suppliers.validation.accountEmailInvalid");
+ }
+
+ if (publicEmail && !isValidEmail(publicEmail)) {
+ errors.publicEmail = t("suppliers.validation.publicEmailInvalid");
+ }
+
+ if (!phone) {
+ errors.phone = t("suppliers.validation.phoneRequired");
+ } else if (phone.length < 6) {
+ errors.phone = t("suppliers.validation.phoneMin");
+ }
+
+ if (!isValidOptionalUrl(website)) {
+ errors.website = t("suppliers.validation.websiteInvalid");
+ }
+
+ return errors;
+ }
+
+ const clearFieldError = (key: string) => {
+ setFieldErrors((prev) => {
+ if (!(key in prev)) return prev;
+ const next = { ...prev };
+ delete next[key];
+ return next;
+ });
+ };
+
+ const update =
+ (key: keyof FormState) =>
+ (e: React.ChangeEvent) => {
+ setForm((prev) => ({ ...prev, [key]: e.target.value }));
+ clearFieldError(key);
+ setServerMessage(null);
+ setSuccess(false);
+ };
+
+ const toggleCategory = (value: Category) => {
+ if (!ALLOWED_CATEGORY_VALUES.has(value)) return;
+ setCategories((prev) => {
+ const safe = normalizeCategoryValues(prev);
+ if (safe.includes(value)) {
+ return safe.filter((v) => v !== value);
+ }
+ return Array.from(new Set([...safe, value]));
+ });
+ clearFieldError("categories");
+ setServerMessage(null);
+ setSuccess(false);
+ };
+
+ async function handleSubmit(e: React.FormEvent) {
+ e.preventDefault();
+ if (submitting || submitLockRef.current) return;
+
+ setServerMessage(null);
+ setSuccess(false);
+
+ const errors = validateForm(form, categories);
+ if (Object.keys(errors).length > 0) {
+ setFieldErrors(errors);
+ queueMicrotask(() => scrollToFirstFieldError(errors));
+ return;
+ }
+
+ setFieldErrors({});
+ setSubmitting(true);
+ submitLockRef.current = true;
+
+ try {
+ const res = await fetch(`${API_URL}/api/suppliers`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ credentials: "include",
+ body: JSON.stringify(buildPayload(form, categories)),
+ });
+
+ let data: {
+ message?: unknown;
+ error?: unknown;
+ errors?: unknown;
+ } = {};
+ try {
+ data = await res.json();
+ } catch {
+ /* corps absent ou non JSON */
+ }
+
+ if (res.ok) {
+ setSuccess(true);
+ setForm(initialForm);
+ setCategories([]);
+ setServerMessage(null);
+ return;
+ }
+
+ const mapped = parseBackendErrorsObject(data.errors);
+ const errStr =
+ typeof data.error === "string" && data.error.trim()
+ ? data.error.trim()
+ : "";
+ const msgStr =
+ typeof data.message === "string" && data.message.trim()
+ ? data.message.trim()
+ : "";
+
+ if (Object.keys(mapped).length > 0) {
+ setFieldErrors(mapped);
+ setServerMessage(
+ errStr || msgStr || t("suppliers.validation.fixFields")
+ );
+ queueMicrotask(() => scrollToFirstFieldError(mapped));
+ } else {
+ setServerMessage(
+ errStr ||
+ msgStr ||
+ (res.status >= 500
+ ? t("suppliers.validation.serverError")
+ : res.status === 400
+ ? t("suppliers.validation.invalidPayload")
+ : t("suppliers.validation.createFailed"))
+ );
+ }
+ } catch {
+ setServerMessage(t("suppliers.validation.networkError"));
+ } finally {
+ setSubmitting(false);
+ submitLockRef.current = false;
+ }
+ }
+
+ const labelClass = "block text-sm font-semibold text-slate-700 mb-2";
+ const inputClass =
+ "w-full rounded-lg border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-900 placeholder:text-slate-400 shadow-sm transition-shadow focus:border-sawaka-500 focus:outline-none focus:ring-2 focus:ring-sawaka-500/25";
+
+ return (
+
+ );
+}
diff --git a/app/add-supplier/page.tsx b/app/add-supplier/page.tsx
new file mode 100644
index 0000000..5936dd6
--- /dev/null
+++ b/app/add-supplier/page.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { useTranslation } from "@/src/i18n/I18nProvider";
+import SupplierForm from "./components/SupplierForm";
+
+export default function AddSupplierPage() {
+ const { t } = useTranslation();
+
+ return (
+ ([]);
const [nouvelleCategorie, setNouvelleCategorie] = useState("");
@@ -16,7 +18,6 @@ export default function GestionCategories() {
process.env.NEXT_PUBLIC_BACKEND_URL ||
"https://ecommerce-web-avec-tailwind.onrender.com";
- // Charger les catégories
useEffect(() => {
const chargerCategories = async () => {
setLoading(true);
@@ -37,9 +38,8 @@ export default function GestionCategories() {
chargerCategories();
}, [typeActif]);
- // Créer une catégorie
const ajouterCategorie = async () => {
- if (!nouvelleCategorie.trim()) return alert("Nom requis !");
+ if (!nouvelleCategorie.trim()) return alert(t("alerts.categoryNameRequired"));
try {
const res = await fetch(`${API_URL}/api/admin/categories`, {
method: "POST",
@@ -53,13 +53,12 @@ export default function GestionCategories() {
setNouvelleCategorie("");
} catch (err) {
console.error(err);
- alert("❌ Impossible d'ajouter la catégorie");
+ alert(t("alerts.categoryAddFailed"));
}
};
- // Supprimer une catégorie
const supprimerCategorie = async (id: string) => {
- if (!confirm("Supprimer cette catégorie ?")) return;
+ if (!confirm(t("alerts.deleteCategoryConfirm"))) return;
try {
const res = await fetch(`${API_URL}/api/admin/categories/${id}`, {
method: "DELETE",
@@ -69,15 +68,17 @@ export default function GestionCategories() {
setCategories((prev) => prev.filter((c) => c._id !== id));
} catch (err) {
console.error(err);
- alert("❌ Échec de la suppression");
+ alert(t("alerts.categoryDeleteFailed"));
}
};
+ const typeLabel =
+ typeActif === "produit" ? t("admin.typeProduct") : t("admin.typeSale");
+
return (
- Commande #{order.orderNumber || order._id} + {t("orders.orderNumber")}{order.orderNumber || order._id}
(
- Total : {order.total} FCFA
- Créée le {new Date(order.createdAt).toLocaleDateString()}
+ {t("orders.totalLabel")} {order.total} {t("common.fcfa")}
+ {t("orders.createdOn")} {new Date(order.createdAt).toLocaleDateString()}
-
);
}
-
diff --git a/app/activate/page.tsx b/app/activate/page.tsx
new file mode 100644
index 0000000..5798794
--- /dev/null
+++ b/app/activate/page.tsx
@@ -0,0 +1,274 @@
+"use client";
+
+import { Suspense, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useTranslation } from "@/src/i18n/I18nProvider";
+
+const SUPPLIER_JWT_KEY = "supplierJwt";
+
+function resolveApiBaseUrl(): string {
+ const fromEnv = process.env.NEXT_PUBLIC_API_BASE?.trim();
+ if (fromEnv) return fromEnv.replace(/\/+$/, "");
+ if (
+ typeof window !== "undefined" &&
+ window.location.hostname === "localhost"
+ ) {
+ return "http://localhost:5000";
+ }
+ return "";
+}
+
+function mapActivationError(
+ raw: string,
+ status: number,
+ t: (key: string) => string
+): string {
+ const lower = raw.toLowerCase();
+
+ if (
+ lower.includes("already used") ||
+ lower.includes("déjà utilisé") ||
+ lower.includes("already been used")
+ ) {
+ return t("activation.alreadyUsed");
+ }
+
+ if (
+ lower.includes("expired") ||
+ lower.includes("expiré") ||
+ lower.includes("expiration")
+ ) {
+ return t("activation.expiredLink");
+ }
+
+ if (
+ lower.includes("invalid magic") ||
+ lower.includes("invalid link") ||
+ lower.includes("not found") ||
+ status === 404
+ ) {
+ return t("activation.invalidLink");
+ }
+
+ if (
+ lower.includes("no longer invited") ||
+ lower.includes("could not be activated") ||
+ status === 409
+ ) {
+ return t("activation.invalidLink");
+ }
+
+ if (status >= 500) {
+ return t("activation.serverError");
+ }
+
+ if (raw.trim()) return raw.trim();
+
+ return t("activation.invalidLink");
+}
+
+function ActivateContent() {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+ const { t } = useTranslation();
+ const token = searchParams.get("token")?.trim() ?? "";
+
+ const [phase, setPhase] = useState<"loading" | "success" | "error">(() =>
+ token ? "loading" : "error"
+ );
+ const [errorMessage, setErrorMessage] = useStateBienvenue acheteur
-Vous êtes maintenant connecté en tant qu'acheteur.
+{t("buyer.welcome")}
+{t("buyer.connected")}
+
+ );
+}
+
+function ActivateFallback() {
+ const { t } = useTranslation();
+ return (
+
+ {phase === "loading" && (
+ <>
+
+
+ + {t("activation.activating")} +
++ {t("activation.pleaseWait")} +
+ + )} + + {phase === "success" && ( +
+
+ )}
+
+ {phase === "error" && errorMessage && (
+
+
+
+ + {t("activation.success")} +
+ +
+
+ )}
+
+
+
+ + {errorMessage} +
+ +
+
+ );
+}
+
+export default function ActivatePage() {
+ return (
+
+
+
+ + {t("activation.activating")} +
+
+
+ );
+}
diff --git a/app/add-supplier/components/SupplierForm.tsx b/app/add-supplier/components/SupplierForm.tsx
new file mode 100644
index 0000000..18bdf31
--- /dev/null
+++ b/app/add-supplier/components/SupplierForm.tsx
@@ -0,0 +1,779 @@
+"use client";
+
+import { Globe, Lock } from "lucide-react";
+import { useRef, useState } from "react";
+import { useTranslation } from "@/src/i18n/I18nProvider";
+
+type Category =
+ | "construction_materials"
+ | "wood_lumber"
+ | "metal_steel"
+ | "electrical_supplies"
+ | "plumbing_supplies"
+ | "paints_finishes"
+ | "hardware_fasteners"
+ | "hand_tools"
+ | "power_tools"
+ | "industrial_machinery"
+ | "safety_equipment"
+ | "textiles_fabrics"
+ | "leather_accessories"
+ | "art_craft_materials"
+ | "agro_raw_materials"
+ | "food_processing_equipment"
+ | "packaging_containers"
+ | "equipment_rental"
+ | "transport_logistics"
+ | "import_wholesale_distribution";
+
+export const SUPPLIER_CATEGORY_OPTIONS = [
+ { value: "construction_materials" },
+ { value: "wood_lumber" },
+ { value: "metal_steel" },
+ { value: "electrical_supplies" },
+ { value: "plumbing_supplies" },
+ { value: "paints_finishes" },
+ { value: "hardware_fasteners" },
+ { value: "hand_tools" },
+ { value: "power_tools" },
+ { value: "industrial_machinery" },
+ { value: "safety_equipment" },
+ { value: "textiles_fabrics" },
+ { value: "leather_accessories" },
+ { value: "art_craft_materials" },
+ { value: "agro_raw_materials" },
+ { value: "food_processing_equipment" },
+ { value: "packaging_containers" },
+ { value: "equipment_rental" },
+ { value: "transport_logistics" },
+ { value: "import_wholesale_distribution" },
+] as const satisfies ReadonlyArray<{ value: Category }>;
+
+const ALLOWED_CATEGORY_VALUES = new Set
+
+ );
+}
diff --git a/app/admin/GestionCategories.tsx b/app/admin/GestionCategories.tsx
index 76134dc..cf40f4e 100644
--- a/app/admin/GestionCategories.tsx
+++ b/app/admin/GestionCategories.tsx
@@ -1,5 +1,6 @@
"use client";
import { useEffect, useState } from "react";
+import { useTranslation } from "@/src/i18n/I18nProvider";
type Category = {
_id: string;
@@ -8,6 +9,7 @@ type Category = {
};
export default function GestionCategories() {
+ const { t } = useTranslation();
const [typeActif, setTypeActif] = useState<"produit" | "vente">("produit");
const [categories, setCategories] = useState
+
+ + {t("suppliers.addTitle")} +
++ {t("suppliers.addSubtitle")} +
+
-
- {/* Formulaire ajout */}
Gestion des catégories
+{t("admin.categoryTitle")}
- {/* Onglets Produits / Ventes */}
setNouvelleCategorie(e.target.value)}
className="flex-1 border rounded-lg px-3 py-2"
@@ -114,22 +114,21 @@ export default function GestionCategories() {
onClick={ajouterCategorie}
className="bg-sawaka-600 text-white px-4 py-2 rounded-lg hover:bg-sawaka-700"
>
- ➕ Ajouter
+ ➕ {t("admin.add")}
- {/* Liste des catégories */}
{loading ? (
- Chargement...
+{t("common.loading")}
) : categories.length === 0 ? ( -Aucune catégorie trouvée.
+{t("admin.noCategories")}
) : (| Nom | -Type | -Actions | +{t("admin.name")} | +{t("admin.type")} | +{t("admin.actions")} |
|---|
| Nom | -Rôles | -Vendeur | -Actions | +{t("admin.name")} | +{t("admin.email")} | +{t("admin.roles")} | +{t("admin.seller")} | +{t("admin.actions")} | {u.roles ? u.roles.join(", ") : u.role || "—"} | -{u.isSeller ? "✅ Oui" : "❌ Non"} | +{u.isSeller ? `✅ ${t("common.yes")}` : `❌ ${t("common.no")}`} | diff --git a/app/admin/page.tsx b/app/admin/page.tsx index 396e869..37a0613 100644 --- a/app/admin/page.tsx +++ b/app/admin/page.tsx @@ -1,27 +1,29 @@ "use client"; import { useState } from "react"; +import { useTranslation } from "@/src/i18n/I18nProvider"; import GestionUtilisateurs from "./GestionUtilisateurs"; import GestionCategories from "./GestionCategories"; export default function AdminPage() { + const { t } = useTranslation(); const [onglet, setOnglet] = useState<"utilisateurs" | "categories">("utilisateurs"); return ( |
|---|