mirror of
https://github.com/R0m1k3/CollectFlow.git
synced 2026-10-23 06:58:10 +02:00
feat: Add ExportDropdown component with Excel and PDF export functionalities for grid data.
This commit is contained in:
1 parent
02079423c3
commit
8902b535a8
2 files changed
+19
-28
No files matched your search
@@ -7,7 +7,7 @@ import jsPDF from "jspdf";
|
|||||||
import autoTable from "jspdf-autotable";
|
import autoTable from "jspdf-autotable";
|
||||||
import { useGridStore } from "@/features/grid/store/use-grid-store";
|
import { useGridStore } from "@/features/grid/store/use-grid-store";
|
||||||
|
|
||||||
export function ExportDropdown() {
|
export function ExportDropdown({ nomFournisseur }: { nomFournisseur?: string }) {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const { rows, draftChanges } = useGridStore();
|
const { rows, draftChanges } = useGridStore();
|
||||||
|
|
||||||
@@ -60,37 +60,29 @@ export function ExportDropdown() {
|
|||||||
|
|
||||||
doc.setFontSize(16);
|
doc.setFontSize(16);
|
||||||
doc.text("Analyse d'Assortiment", 14, 15);
|
doc.text("Analyse d'Assortiment", 14, 15);
|
||||||
doc.setFontSize(10);
|
|
||||||
doc.setTextColor(100);
|
|
||||||
doc.text(`Export généré le : ${new Date().toLocaleDateString("fr-FR")}`, 14, 22);
|
|
||||||
|
|
||||||
// Dynamically get last 12 months for headers
|
doc.setFontSize(14);
|
||||||
const months: string[] = [];
|
doc.setTextColor(50);
|
||||||
const now = new Date();
|
if (nomFournisseur) {
|
||||||
for (let i = 12; i >= 1; i--) {
|
doc.text(nomFournisseur, 14, 23);
|
||||||
const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
|
|
||||||
months.push(`${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, "0")}`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const formatMonth = (key: string) => {
|
doc.setFontSize(10);
|
||||||
const m = parseInt(key.slice(4, 6), 10);
|
doc.setTextColor(100);
|
||||||
const names = ["Jan", "Fév", "Mar", "Avr", "Mai", "Jun", "Jul", "Aoû", "Sep", "Oct", "Nov", "Déc"];
|
doc.text(`Export généré le : ${new Date().toLocaleDateString("fr-FR")}`, 14, 30);
|
||||||
return `${names[m - 1]} ${key.slice(2, 4)}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const head = [
|
const head = [
|
||||||
["Mag", "Code In", "Réf.", "Libellé", "Score", ...months.map(formatMonth), "Vol.", "CA", "Marge", "Gamme"]
|
["Gencode", "Code In", "Réf.", "Libellé", "Score", "Vol.", "CA", "Marge", "Gamme"]
|
||||||
];
|
];
|
||||||
|
|
||||||
const body = rows.map(r => {
|
const body = rows.map(r => {
|
||||||
const effectiveGamme = draftChanges[r.codein] ?? r.codeGamme;
|
const effectiveGamme = draftChanges[r.codein] ?? r.codeGamme;
|
||||||
return [
|
return [
|
||||||
r.workingStores.join(","),
|
r.gtin || r.codein,
|
||||||
r.codein,
|
r.codein,
|
||||||
r.reference || "-",
|
r.reference || "-",
|
||||||
r.libelle1 ? r.libelle1.substring(0, 40) + (r.libelle1.length > 40 ? "..." : "") : "",
|
r.libelle1 ? r.libelle1.substring(0, 60) + (r.libelle1.length > 60 ? "..." : "") : "",
|
||||||
r.score.toString(),
|
r.score.toString(),
|
||||||
...months.map(m => r.sales12m[m] ? Math.round(r.sales12m[m]).toString() : ""),
|
|
||||||
Math.round(r.totalQuantite).toLocaleString("fr-FR"),
|
Math.round(r.totalQuantite).toLocaleString("fr-FR"),
|
||||||
`${Math.round(r.totalCa).toLocaleString("fr-FR")} €`,
|
`${Math.round(r.totalCa).toLocaleString("fr-FR")} €`,
|
||||||
`${Math.round(r.totalMarge).toLocaleString("fr-FR")} €\n(${r.tauxMarge.toFixed(1)}%)`,
|
`${Math.round(r.totalMarge).toLocaleString("fr-FR")} €\n(${r.tauxMarge.toFixed(1)}%)`,
|
||||||
@@ -102,16 +94,15 @@ export function ExportDropdown() {
|
|||||||
autoTable(doc, {
|
autoTable(doc, {
|
||||||
head,
|
head,
|
||||||
body,
|
body,
|
||||||
startY: 28,
|
startY: 35,
|
||||||
styles: { fontSize: 6.5, cellPadding: 1.5, lineColor: [200, 200, 200], lineWidth: 0.1 },
|
styles: { fontSize: 8, cellPadding: 2, lineColor: [200, 200, 200], lineWidth: 0.1 },
|
||||||
headStyles: { fillColor: [15, 23, 42], textColor: [255, 255, 255], fontStyle: "bold", halign: "center" },
|
headStyles: { fillColor: [15, 23, 42], textColor: [255, 255, 255], fontStyle: "bold", halign: "center" },
|
||||||
columnStyles: {
|
columnStyles: {
|
||||||
0: { cellWidth: 10, halign: "center" }, // Magasins
|
0: { cellWidth: 28 }, // Gencode
|
||||||
1: { cellWidth: 14, fontStyle: "bold" }, // Code In
|
1: { cellWidth: 18, fontStyle: "bold", halign: "center" }, // Code In
|
||||||
2: { cellWidth: 18 }, // Réf
|
2: { cellWidth: 25 }, // Réf
|
||||||
3: { cellWidth: 45 }, // Libellé
|
3: { cellWidth: 80 }, // Libellé
|
||||||
4: { cellWidth: 10, halign: "center", fontStyle: "bold", textColor: [16, 185, 129] }, // Score
|
4: { cellWidth: 12, halign: "center", fontStyle: "bold", textColor: [16, 185, 129] }, // Score
|
||||||
// The next 12 columns are the months. Let autotable size them.
|
|
||||||
},
|
},
|
||||||
theme: "grid",
|
theme: "grid",
|
||||||
didDrawPage: (data: any) => {
|
didDrawPage: (data: any) => {
|
||||||
|
|||||||
@@ -91,7 +91,7 @@ export function GridClient({ initialRows, nomFournisseur, fournisseurs, magasins
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<ExportDropdown />
|
<ExportDropdown nomFournisseur={nomFournisseur} />
|
||||||
{hasDrafts && (
|
{hasDrafts && (
|
||||||
<button
|
<button
|
||||||
onClick={handleSave}
|
onClick={handleSave}
|
||||||
|
|||||||
Reference in new issue
Block a user