feat(grid): ajout algorithme score produit avec parametrage dynamique et page d'aide

src/features/grid/components/supplier-selection.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Search, Building2, ChevronRight } from "lucide-react";
+
+interface Supplier {
+    code: string;
+    nom: string;
+}
+
+export function SupplierSelection({ fournisseurs }: { fournisseurs: Supplier[] }) {
+    const router = useRouter();
+    const [search, setSearch] = useState("");
+
+    const filtered = fournisseurs.filter((f) =>
+        f.nom.toLowerCase().includes(search.toLowerCase()) ||
+        f.code.toLowerCase().includes(search.toLowerCase())
+    );
+
+    return (
+        <div className="max-w-4xl mx-auto py-12 px-6">
+            <div className="mb-10 text-center">
+                <h1 className="text-[32px] font-bold tracking-tight mb-2">Choisir un fournisseur</h1>
+                <p className="text-[15px]" style={{ color: "var(--text-secondary)" }}>
+                    Sélectionnez un fournisseur pour commencer la révision de l'assortiment.
+                </p>
+            </div>
+
+            <div className="relative mb-8 max-w-xl mx-auto">
+                <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
+                <input
+                    type="text"
+                    placeholder="Rechercher par nom ou code..."
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    className="apple-input pl-12 h-14 text-lg w-full"
+                />
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {filtered.map((f) => (
+                    <button
+                        key={f.code}
+                        onClick={() => router.push(`/grid?fournisseur=${f.code}`)}
+                        className="flex items-center justify-between p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:border-emerald-500/50 hover:bg-emerald-50/10 transition-all text-left shadow-sm group active:scale-[0.98]"
+                    >
+                        <div className="flex items-center gap-4">
+                            <div className="w-12 h-12 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-500 group-hover:bg-emerald-500/10 group-hover:text-emerald-500 transition-colors">
+                                <Building2 className="w-6 h-6" />
+                            </div>
+                            <div>
+                                <div className="text-[17px] font-bold tracking-tight text-slate-900 dark:text-white">
+                                    {f.nom}
+                                </div>
+                                <div className="text-[13px] font-medium text-slate-500">
+                                    Code: {f.code}
+                                </div>
+                            </div>
+                        </div>
+                        <ChevronRight className="w-5 h-5 text-slate-300 group-hover:text-emerald-500 transition-colors" />
+                    </button>
+                ))}
+            </div>
+
+            {filtered.length === 0 && (
+                <div className="text-center py-20 bg-slate-50/50 dark:bg-slate-900/50 rounded-3xl border border-dashed border-slate-200 dark:border-slate-800">
+                    <p className="text-slate-500 font-medium">Aucun fournisseur trouvé pour "{search}"</p>
+                </div>
+            )}
+        </div>
+    );
+}