feat: Implement product heatmap grid with comprehensive data aggregation and PostgreSQL client for product rows.

This commit is contained in:
Michael committed 2026-03-23 16:09:09 +01:00
1 parent bba6fe05e8
commit ffa257fda1
5 files changed
+73 -37

No files matched your search

@@ -3,6 +3,7 @@ import React from "react";
interface HeatmapCellProps {
value: number | null;
tooltipStock?: number | null;
tooltipReceptions?: number | null;
}
function getHeatmapClass(value: number | null): string {
@@ -14,15 +15,16 @@ function getHeatmapClass(value: number | null): string {
return "heatmap-zero";
}
export const HeatmapCell = React.memo(({ value, tooltipStock }: HeatmapCellProps) => {
export const HeatmapCell = React.memo(({ value, tooltipStock, tooltipReceptions }: HeatmapCellProps) => {
const heatClass = getHeatmapClass(value);
const display = value === null || value === 0 ? "0" : Math.round(Math.abs(value)).toString();
const titleParts: string[] = [];
if (value !== null && value !== 0) titleParts.push(`${Math.abs(value).toLocaleString("fr-FR")} unités`);
else titleParts.push("Aucune vente");
if (tooltipStock != null) titleParts.push(`Stock fin de mois : ${tooltipStock.toLocaleString("fr-FR")}`);
const title = titleParts.join(" · ");
if (tooltipReceptions != null && tooltipReceptions > 0)
titleParts.push(`Entrées : +${Math.round(tooltipReceptions).toLocaleString("fr-FR")}`);
if (tooltipStock != null)
titleParts.push(`Stock fin de mois : ${Math.round(tooltipStock).toLocaleString("fr-FR")}`);
const title = titleParts.length > 0 ? titleParts.join(" · ") : (value ? `${Math.abs(value).toLocaleString("fr-FR")} unités` : "Aucune vente");
return (
<div
@@ -463,7 +463,10 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) {
const stock = activeMagasin === "TOTAL"
? (row.original.stock12m[monthKey] ?? null)
: (row.original.stock12mByStore?.[activeMagasin]?.[monthKey] ?? null);
return <HeatmapCell value={qty} tooltipStock={stock} />;
const receptions = activeMagasin === "TOTAL"
? (row.original.receptions12m[monthKey] ?? null)
: (row.original.receptions12mByStore?.[activeMagasin]?.[monthKey] ?? null);
return <HeatmapCell value={qty} tooltipStock={stock} tooltipReceptions={receptions} />;
},
})),
{
@@ -571,7 +574,7 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) {
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
enableRowSelection: true,
globalFilterFn: (row, columnId, filterValue) => {
globalFilterFn: (row, _columnId, filterValue) => {
const search = String(filterValue).toLowerCase();
const libelle = String(row.original.libelle1 || "").toLowerCase();
const code = String(row.original.codein || "").toLowerCase();