mirror of
https://github.com/R0m1k3/CollectFlow.git
synced 2026-10-11 17:26:32 +02:00
feat: Implement a new heatmap grid component for product data visualization and selection, and create new bulk AI analyzer and floating summary bar components.
This commit is contained in:
Michael committed
1 parent
a04d6d4e7a
commit
804328a525
3 files changed
+20
-22
No files matched your search
@@ -188,15 +188,15 @@ export function BulkAiAnalyzer() {
|
||||
|
||||
if (isAnalyzing) {
|
||||
return (
|
||||
<div className="flex items-center gap-4 px-4 py-2 rounded-xl bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-800">
|
||||
<div className="flex items-center gap-4 h-10 px-4 rounded-xl bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-800">
|
||||
<Loader2 className="w-4 h-4 text-indigo-500 animate-spin" />
|
||||
<div className="flex flex-col min-w-[150px]">
|
||||
<span className="text-xs font-bold text-indigo-700 dark:text-indigo-400">
|
||||
<span className="text-[10px] font-bold text-indigo-700 dark:text-indigo-400 leading-none">
|
||||
{progress.message}
|
||||
</span>
|
||||
<div className="w-full bg-indigo-200 dark:bg-indigo-800/50 rounded-full h-1.5 mt-1.5">
|
||||
<div className="w-full bg-indigo-200 dark:bg-indigo-800/50 rounded-full h-1 mt-1">
|
||||
<div
|
||||
className="bg-indigo-500 h-1.5 rounded-full transition-all duration-300"
|
||||
className="bg-indigo-500 h-1 rounded-full transition-all duration-300"
|
||||
style={{ width: `${Math.max(5, (progress.current / progress.total) * 100)}%` }}
|
||||
></div>
|
||||
</div>
|
||||
@@ -206,7 +206,7 @@ export function BulkAiAnalyzer() {
|
||||
className="p-1 hover:bg-indigo-100 dark:hover:bg-indigo-800 rounded-lg transition-colors text-indigo-600 dark:text-indigo-400"
|
||||
title="Arrêter l'analyse"
|
||||
>
|
||||
<XCircle className="w-5 h-5" />
|
||||
<XCircle className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
@@ -214,12 +214,12 @@ export function BulkAiAnalyzer() {
|
||||
|
||||
if (progress.current > 0 && !isAnalyzing) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 px-4 py-2 rounded-xl bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800 cursor-default">
|
||||
<div className="flex items-center gap-2 h-10 px-4 rounded-xl bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800 cursor-default">
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-600 dark:text-emerald-500" />
|
||||
<span className="text-xs font-bold text-emerald-700 dark:text-emerald-400">
|
||||
{progress.errors > 0
|
||||
? `Terminé (${progress.current - progress.errors}/${progress.total} OK)`
|
||||
: `Analyse terminée (${progress.total} produits)`
|
||||
? `Terminé (${progress.current - progress.errors}/${progress.total})`
|
||||
: `Analyse Terminée`
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
@@ -229,10 +229,10 @@ export function BulkAiAnalyzer() {
|
||||
return (
|
||||
<button
|
||||
onClick={handleAnalyze}
|
||||
className="group flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition-all shadow-sm bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:shadow-md hover:brightness-110 active:scale-95 border border-indigo-400"
|
||||
className="group flex items-center justify-center gap-2 h-10 px-6 rounded-xl text-sm font-bold transition-all shadow-sm bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:shadow-md hover:brightness-110 active:scale-95 border border-indigo-400"
|
||||
>
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Analyse IA Globale
|
||||
Analyse IA
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -75,19 +75,16 @@ export function FloatingSummaryBar() {
|
||||
const currentDrafts = currentState.draftChanges;
|
||||
const currentRows = currentState.rows;
|
||||
|
||||
// On définit les lignes modifiées comme étant soit dans les drafts,
|
||||
// soit ayant une gamme différente de la gamme initiale (déjà sauvegardées)
|
||||
const modifiedRows = currentRows.filter(r => {
|
||||
const currentGamme = currentDrafts[r.codein] ?? r.codeGamme;
|
||||
return currentGamme !== r.codeGammeInit;
|
||||
});
|
||||
|
||||
if (modifiedRows.length === 0) {
|
||||
alert("Aucun changement détecté par rapport à l'état initial. L'export Excel ne contient que les modifications de cette session.");
|
||||
alert("Aucun changement détecté par rapport à l'état initial.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Prepare payload
|
||||
const changes = modifiedRows.map(r => ({
|
||||
codein: r.codein,
|
||||
gtin: r.gtin,
|
||||
@@ -95,7 +92,7 @@ export function FloatingSummaryBar() {
|
||||
gamme: (currentDrafts[r.codein] ?? r.codeGamme) as string,
|
||||
}));
|
||||
|
||||
const nomFournisseur = modifiedRows.length > 0 ? modifiedRows[0].nomFournisseur : "Fournisseur";
|
||||
const nomFournisseur = modifiedRows[0].nomFournisseur;
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/export/modified-gammes", {
|
||||
@@ -115,10 +112,10 @@ export function FloatingSummaryBar() {
|
||||
window.URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Une erreur s'est produite lors de la génération du fichier Excel.");
|
||||
alert("Une erreur s'est produite lors de l'export Excel.");
|
||||
}
|
||||
}}
|
||||
className="px-6 py-3 rounded-xl text-sm font-bold transition-all active:scale-95 border hover:brightness-105"
|
||||
className="h-10 px-6 rounded-xl text-sm font-bold transition-all active:scale-95 border hover:brightness-105"
|
||||
style={{
|
||||
background: "var(--action-secondary-bg)",
|
||||
color: "var(--action-secondary-text)",
|
||||
@@ -131,7 +128,7 @@ export function FloatingSummaryBar() {
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={!hasDrafts || isPending}
|
||||
className="px-8 py-3 flex items-center gap-2 rounded-xl text-sm font-black transition-all shadow-lg active:scale-95 text-white hover:brightness-110 disabled:opacity-50"
|
||||
className="h-10 px-6 flex items-center justify-center gap-2 rounded-xl text-sm font-black transition-all shadow-lg active:scale-95 text-white hover:brightness-110 disabled:opacity-50"
|
||||
style={{
|
||||
background: "var(--brand-solid)",
|
||||
}}
|
||||
@@ -143,7 +140,7 @@ export function FloatingSummaryBar() {
|
||||
) : saveStatus === "error" ? (
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
) : null}
|
||||
{isPending ? "Validation..." : "Valider ce Fournisseur"}
|
||||
{isPending ? "Validation..." : "Valider"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -45,12 +45,13 @@ function formatMonthLabel(key: string): string {
|
||||
* Indigo for first store, Amber for second, Slate for others.
|
||||
*/
|
||||
function getStoreConfig(name: string, index: number) {
|
||||
const initial = name.charAt(0).toUpperCase();
|
||||
if (index === 0) {
|
||||
return {
|
||||
bg: "rgba(99, 102, 241, 0.1)", // Indigo
|
||||
text: "#818cf8",
|
||||
border: "rgba(99, 102, 241, 0.2)",
|
||||
label: "M1"
|
||||
label: initial
|
||||
};
|
||||
}
|
||||
if (index === 1) {
|
||||
@@ -58,14 +59,14 @@ function getStoreConfig(name: string, index: number) {
|
||||
bg: "rgba(245, 158, 11, 0.1)", // Amber
|
||||
text: "#fbbf24",
|
||||
border: "rgba(245, 158, 11, 0.2)",
|
||||
label: "M2"
|
||||
label: initial
|
||||
};
|
||||
}
|
||||
return {
|
||||
bg: "var(--bg-elevated)",
|
||||
text: "var(--text-muted)",
|
||||
border: "var(--border)",
|
||||
label: name.charAt(0).toUpperCase()
|
||||
label: initial
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user