feat: hit-parade date range + fournisseur filter; fix create user button layout

- Replace month dropdown with date picker (Du/Au) + Appliquer button
- Add fournisseur filter dropdown (client-side, all suppliers from current data)
- Totals update live when fournisseur filter changes
- SQL: use BETWEEN date range instead of TO_CHAR month match
- Create user button: proper 3-col form layout so button stays on one line

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Sonnet 4.6 committed 2026-04-01 13:42:25 +02:00
1 parent 05354a0e74
commit 868886db87
4 files changed
+160 -119

No files matched your search

+108 -76
View File
@@ -22,24 +22,25 @@ function formatPct(ca: number, marge: number) {
}
interface Props {
mois: string;
currentMois: string;
dateDebut: string;
dateFin: string;
pivotted: HitParadePivotRow[];
}
export function HitParadeClient({ mois, pivotted }: Props) {
export function HitParadeClient({ dateDebut, dateFin, pivotted }: Props) {
const router = useRouter();
const [sortKey, setSortKey] = useState<SortKey>(DEFAULT_SORT);
const [sortDir, setSortDir] = useState<SortDir>(DEFAULT_DIR);
const [filterFournisseur, setFilterFournisseur] = useState<string>("Tous");
const months: { value: string; label: string }[] = [];
const now = new Date();
for (let i = 0; i < 24; i++) {
const d = new Date(now.getFullYear(), now.getMonth() - i);
const value = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
const label = new Intl.DateTimeFormat("fr-FR", { year: "numeric", month: "long" }).format(d);
months.push({ value, label: label.charAt(0).toUpperCase() + label.slice(1) });
}
// Dates locales pour les inputs (évite rechargement à chaque frappe)
const [localDebut, setLocalDebut] = useState(dateDebut);
const [localFin, setLocalFin] = useState(dateFin);
const fournisseurs = useMemo(() => {
const set = new Set(pivotted.map(r => r.fournisseur));
return ["Tous", ...Array.from(set).sort((a, b) => a.localeCompare(b, "fr"))];
}, [pivotted]);
function handleSort(key: SortKey) {
if (sortKey === key) {
@@ -55,25 +56,37 @@ export function HitParadeClient({ mois, pivotted }: Props) {
setSortDir(DEFAULT_DIR);
}
function applyDates() {
if (localDebut && localFin) {
router.push(`/hit-parade?debut=${localDebut}&fin=${localFin}`);
}
}
const isSorted = sortKey !== DEFAULT_SORT || sortDir !== DEFAULT_DIR;
const sorted = useMemo(() => {
return [...pivotted].sort((a, b) => {
const filtered = useMemo(() =>
filterFournisseur === "Tous" ? pivotted : pivotted.filter(r => r.fournisseur === filterFournisseur),
[pivotted, filterFournisseur]
);
const sorted = useMemo(() =>
[...filtered].sort((a, b) => {
const diff = a[sortKey] - b[sortKey];
return sortDir === "desc" ? -diff : diff;
});
}, [pivotted, sortKey, sortDir]);
}),
[filtered, sortKey, sortDir]
);
const totals = useMemo(() => pivotted.reduce(
const totals = useMemo(() => sorted.reduce(
(acc, r) => ({
qte292: acc.qte292 + r.qte292, ca292: acc.ca292 + r.ca292, marge292: acc.marge292 + r.marge292,
qte579: acc.qte579 + r.qte579, ca579: acc.ca579 + r.ca579, marge579: acc.marge579 + r.marge579,
qteTotal: acc.qteTotal + r.qteTotal, caTotal: acc.caTotal + r.caTotal, margeTotal: acc.margeTotal + r.margeTotal,
}),
{ qte292: 0, ca292: 0, marge292: 0, qte579: 0, ca579: 0, marge579: 0, qteTotal: 0, caTotal: 0, margeTotal: 0 }
), [pivotted]);
), [sorted]);
function ColHeader({ label, sortable, k }: { label: string; sortable?: SortKey; k?: string }) {
function ColHeader({ label, sortable, k }: { label: string; sortable?: SortKey; k: string }) {
const isActive = sortable && sortKey === sortable;
return (
<th
@@ -98,45 +111,71 @@ export function HitParadeClient({ mois, pivotted }: Props) {
return (
<div className="space-y-4">
{/* Barre de contrôles */}
<div className="flex flex-wrap items-center gap-4 rounded-xl bg-white px-5 py-4 shadow-sm border border-gray-100">
<div className="flex items-center gap-2">
<span className="text-sm font-semibold text-gray-600">Mois</span>
<select
value={mois}
onChange={e => router.push(`/hit-parade?mois=${e.target.value}`)}
className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
<div className="flex flex-wrap items-end gap-4 rounded-xl bg-white px-5 py-4 shadow-sm border border-gray-100">
{/* Période */}
<div className="flex items-end gap-3">
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold text-gray-500">Du</label>
<input
type="date"
value={localDebut}
onChange={e => setLocalDebut(e.target.value)}
className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
/>
</div>
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold text-gray-500">Au</label>
<input
type="date"
value={localFin}
onChange={e => setLocalFin(e.target.value)}
className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
/>
</div>
<button
onClick={applyDates}
className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 transition-colors"
>
{months.map(m => (
<option key={m.value} value={m.value}>{m.label}</option>
Appliquer
</button>
</div>
<div className="h-8 w-px bg-gray-200 self-center" />
{/* Filtre fournisseur */}
<div className="flex flex-col gap-1">
<label className="text-xs font-semibold text-gray-500">Fournisseur</label>
<select
value={filterFournisseur}
onChange={e => setFilterFournisseur(e.target.value)}
className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 min-w-[200px]"
>
{fournisseurs.map(f => (
<option key={f} value={f}>{f}</option>
))}
</select>
</div>
<div className="h-6 w-px bg-gray-200" />
<div className="h-8 w-px bg-gray-200 self-center" />
<span className="rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-600">
<span className="rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-600 self-center">
{sorted.length} produits
</span>
{isSorted && (
<button
onClick={resetSort}
className="flex items-center gap-1.5 rounded-lg border border-orange-200 bg-orange-50 px-3 py-1.5 text-sm font-medium text-orange-700 hover:bg-orange-100 transition-colors"
className="flex items-center gap-1.5 rounded-lg border border-orange-200 bg-orange-50 px-3 py-1.5 text-sm font-medium text-orange-700 hover:bg-orange-100 transition-colors self-center"
>
<span>✕</span> Annuler le tri
</button>
)}
{!isSorted && (
<span className="text-xs text-gray-400 italic">Trié par CA Total ↓ — cliquez sur une colonne pour trier</span>
)}
</div>
{/* Tableau */}
<div className="overflow-x-auto rounded-xl bg-white shadow-sm border border-gray-100">
<table className="w-full border-collapse text-sm">
<thead>
{/* Ligne 1 — groupes */}
<tr>
<th rowSpan={2} className="w-24 border-b-2 border-gray-200 bg-gray-50 px-4 py-3 text-left text-xs font-semibold text-gray-600 align-bottom">Code</th>
<th rowSpan={2} className="border-b-2 border-gray-200 bg-gray-50 px-4 py-3 text-left text-xs font-semibold text-gray-600 align-bottom">Désignation</th>
@@ -151,7 +190,6 @@ export function HitParadeClient({ mois, pivotted }: Props) {
Total Réseau
</th>
</tr>
{/* Ligne 2 — sous-colonnes */}
<tr className="border-b-2 border-gray-200">
<ColHeader label="Qté" sortable="qte292" k="qte292" />
<ColHeader label="CA TTC" sortable="ca292" k="ca292" />
@@ -165,46 +203,40 @@ export function HitParadeClient({ mois, pivotted }: Props) {
</tr>
</thead>
<tbody>
{sorted.map((row, idx) => {
const highlight = sortKey.includes("292") ? "bg-blue-50/30" : sortKey.includes("579") ? "bg-violet-50/30" : "";
return (
<tr key={row.codein} className={`border-b border-gray-100 ${idx % 2 === 0 ? "bg-white" : "bg-gray-50/60"} hover:bg-yellow-50/40 transition-colors`}>
<td className="px-4 py-2.5 font-mono text-xs text-gray-400">{row.codein}</td>
<td className="px-4 py-2.5 text-gray-900 font-medium max-w-[260px] truncate" title={row.libelle.trim()}>{row.libelle.trim()}</td>
<td className="px-4 py-2.5 text-xs text-gray-500 whitespace-nowrap">{row.fournisseur}</td>
{/* 292 */}
<td className={`border-l-2 border-blue-100 px-4 py-2.5 text-right tabular-nums text-gray-700 ${sortKey === "qte292" ? "bg-blue-50/50 font-semibold" : ""}`}>
{row.qte292 > 0 ? formatQte(row.qte292) : <span className="text-gray-300">—</span>}
</td>
<td className={`px-4 py-2.5 text-right tabular-nums text-gray-800 ${sortKey === "ca292" ? "bg-blue-50/50 font-semibold" : ""}`}>
{row.ca292 > 0 ? formatCA(row.ca292) : <span className="text-gray-300">—</span>}
</td>
<td className="px-4 py-2.5 text-right text-xs tabular-nums text-blue-500">
{row.ca292 > 0 ? formatPct(row.ca292, row.marge292) : ""}
</td>
{/* 579 */}
<td className={`border-l-2 border-violet-100 px-4 py-2.5 text-right tabular-nums text-gray-700 ${sortKey === "qte579" ? "bg-violet-50/50 font-semibold" : ""}`}>
{row.qte579 > 0 ? formatQte(row.qte579) : <span className="text-gray-300">—</span>}
</td>
<td className={`px-4 py-2.5 text-right tabular-nums text-gray-800 ${sortKey === "ca579" ? "bg-violet-50/50 font-semibold" : ""}`}>
{row.ca579 > 0 ? formatCA(row.ca579) : <span className="text-gray-300">—</span>}
</td>
<td className="px-4 py-2.5 text-right text-xs tabular-nums text-violet-500">
{row.ca579 > 0 ? formatPct(row.ca579, row.marge579) : ""}
</td>
{/* Total */}
<td className={`border-l-2 border-emerald-100 px-4 py-2.5 text-right tabular-nums font-semibold text-gray-900 ${sortKey === "qteTotal" ? "bg-emerald-50/50" : ""}`}>
{row.qteTotal > 0 ? formatQte(row.qteTotal) : <span className="text-gray-300">—</span>}
</td>
<td className={`px-4 py-2.5 text-right tabular-nums font-semibold text-gray-900 ${sortKey === "caTotal" ? "bg-emerald-50/50" : ""}`}>
{row.caTotal > 0 ? formatCA(row.caTotal) : <span className="text-gray-300">—</span>}
</td>
<td className="px-4 py-2.5 text-right text-xs tabular-nums text-emerald-600">
{row.caTotal > 0 ? formatPct(row.caTotal, row.margeTotal) : ""}
</td>
</tr>
);
})}
{sorted.map((row, idx) => (
<tr key={row.codein} className={`border-b border-gray-100 ${idx % 2 === 0 ? "bg-white" : "bg-gray-50/60"} hover:bg-yellow-50/40 transition-colors`}>
<td className="px-4 py-2.5 font-mono text-xs text-gray-400">{row.codein}</td>
<td className="px-4 py-2.5 text-gray-900 font-medium max-w-[260px] truncate" title={row.libelle.trim()}>{row.libelle.trim()}</td>
<td className="px-4 py-2.5 text-xs text-gray-500 whitespace-nowrap">{row.fournisseur}</td>
<td className={`border-l-2 border-blue-100 px-4 py-2.5 text-right tabular-nums text-gray-700 ${sortKey === "qte292" ? "bg-blue-50/50 font-semibold" : ""}`}>
{row.qte292 > 0 ? formatQte(row.qte292) : <span className="text-gray-300">—</span>}
</td>
<td className={`px-4 py-2.5 text-right tabular-nums text-gray-800 ${sortKey === "ca292" ? "bg-blue-50/50 font-semibold" : ""}`}>
{row.ca292 > 0 ? formatCA(row.ca292) : <span className="text-gray-300">—</span>}
</td>
<td className="px-4 py-2.5 text-right text-xs tabular-nums text-blue-500">
{row.ca292 > 0 ? formatPct(row.ca292, row.marge292) : ""}
</td>
<td className={`border-l-2 border-violet-100 px-4 py-2.5 text-right tabular-nums text-gray-700 ${sortKey === "qte579" ? "bg-violet-50/50 font-semibold" : ""}`}>
{row.qte579 > 0 ? formatQte(row.qte579) : <span className="text-gray-300">—</span>}
</td>
<td className={`px-4 py-2.5 text-right tabular-nums text-gray-800 ${sortKey === "ca579" ? "bg-violet-50/50 font-semibold" : ""}`}>
{row.ca579 > 0 ? formatCA(row.ca579) : <span className="text-gray-300">—</span>}
</td>
<td className="px-4 py-2.5 text-right text-xs tabular-nums text-violet-500">
{row.ca579 > 0 ? formatPct(row.ca579, row.marge579) : ""}
</td>
<td className={`border-l-2 border-emerald-100 px-4 py-2.5 text-right tabular-nums font-semibold text-gray-900 ${sortKey === "qteTotal" ? "bg-emerald-50/50" : ""}`}>
{row.qteTotal > 0 ? formatQte(row.qteTotal) : <span className="text-gray-300">—</span>}
</td>
<td className={`px-4 py-2.5 text-right tabular-nums font-semibold text-gray-900 ${sortKey === "caTotal" ? "bg-emerald-50/50" : ""}`}>
{row.caTotal > 0 ? formatCA(row.caTotal) : <span className="text-gray-300">—</span>}
</td>
<td className="px-4 py-2.5 text-right text-xs tabular-nums text-emerald-600">
{row.caTotal > 0 ? formatPct(row.caTotal, row.margeTotal) : ""}
</td>
</tr>
))}
</tbody>
<tfoot>
<tr className="border-t-2 border-gray-300 bg-gray-100">
+13 -6
View File
@@ -53,15 +53,22 @@ function pivotHitParade(
return Array.from(map.values());
}
function defaultDates() {
const today = new Date();
const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
const fmt = (d: Date) => d.toISOString().slice(0, 10);
return { debut: fmt(firstOfMonth), fin: fmt(today) };
}
export default async function HitParadePage(props: {
searchParams: Promise<Record<string, string | string[]>>;
}) {
const searchParams = await props.searchParams;
const today = new Date();
const currentMois = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}`;
const mois = (searchParams.mois as string) || currentMois;
const defaults = defaultDates();
const dateDebut = (searchParams.debut as string) || defaults.debut;
const dateFin = (searchParams.fin as string) || defaults.fin;
const rows = await pgGetHitParade(mois);
const rows = await pgGetHitParade(dateDebut, dateFin);
const pivotted = pivotHitParade(rows);
return (
@@ -69,8 +76,8 @@ export default async function HitParadePage(props: {
<div className="mx-auto max-w-screen-2xl">
<h1 className="mb-6 text-3xl font-bold text-gray-900">Hit Parade</h1>
<HitParadeClient
mois={mois}
currentMois={currentMois}
dateDebut={dateDebut}
dateFin={dateFin}
pivotted={pivotted}
/>
</div>
@@ -111,43 +111,45 @@ export function UserManagement() {
</div>
</div>
<form onSubmit={handleCreate} className="grid grid-cols-1 md:grid-cols-4 gap-6 items-end">
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">Utilisateur</label>
<input
required
value={newUsername}
onChange={(e) => setNewUsername(e.target.value)}
className="apple-input"
placeholder="ex: jean.dupont"
/>
</div>
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">Mot de passe</label>
<input
required
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
className="apple-input"
placeholder="••••••••"
/>
</div>
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">Rôle</label>
<select
value={newRole}
onChange={(e) => setNewRole(e.target.value as any)}
className="apple-input"
>
<option value="user">Utilisateur</option>
<option value="admin">Administrateur</option>
</select>
<form onSubmit={handleCreate} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">Utilisateur</label>
<input
required
value={newUsername}
onChange={(e) => setNewUsername(e.target.value)}
className="apple-input"
placeholder="ex: jean.dupont"
/>
</div>
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">Mot de passe</label>
<input
required
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
className="apple-input"
placeholder="••••••••"
/>
</div>
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">Rôle</label>
<select
value={newRole}
onChange={(e) => setNewRole(e.target.value as any)}
className="apple-input"
>
<option value="user">Utilisateur</option>
<option value="admin">Administrateur</option>
</select>
</div>
</div>
<button
type="submit"
disabled={isCreating}
className="apple-btn-primary w-full justify-center !h-auto py-2.5"
className="apple-btn-primary"
>
{isCreating ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />}
Créer le compte
+4 -4
View File
@@ -709,9 +709,9 @@ export interface HitParadeRow {
}
/**
* Retourne les ventes produit pour un mois donné, avec fournisseur, qté, CA TTC et marge par site.
* Retourne les ventes produit sur une période, avec fournisseur, qté, CA TTC et marge par site.
*/
export async function pgGetHitParade(mois: string): Promise<HitParadeRow[]> {
export async function pgGetHitParade(dateDebut: string, dateFin: string): Promise<HitParadeRow[]> {
const result = await pgNoParallel(sql`
SELECT
a.codein::text AS codein,
@@ -725,13 +725,13 @@ export async function pgGetHitParade(mois: string): Promise<HitParadeRow[]> {
JOIN articles a ON a.no_id = m.artnoid
LEFT JOIN artfou1 af ON af.art_no_id = a.no_id AND af.preference = 1
LEFT JOIN fouident fi ON fi.code = af.code
WHERE TO_CHAR(m.datmvt, 'YYYY-MM') = ${mois}
WHERE m.datmvt BETWEEN ${dateDebut}::date AND ${dateFin}::date
AND m.site IN ('292', '579')
AND m.genremvt = 3
GROUP BY a.codein, a.libelle1, fi.nom, af.code, m.site
ORDER BY ca_ttc DESC
`);
console.log(`[pg-ff] HitParade: ${result.rows.length} lignes pour ${mois}`);
console.log(`[pg-ff] HitParade: ${result.rows.length} lignes pour ${dateDebut}→${dateFin}`);
return result.rows as unknown as HitParadeRow[];
}