Budget vs Actuals: move grey gradient to the PDF (off the page view)

Apply the grey gradient + vertical borders to the Actual/Budget/Variance/
% of Budget columns in the PDF export (generateBudgetVsActualPdf), and
revert the on-screen table to plain styling.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-19 00:21:55 -04:00
parent 7b9bc2d4c7
commit ed6b926768
2 changed files with 20 additions and 5 deletions
+14
View File
@@ -353,6 +353,12 @@ export async function generateBudgetVsActualPdf(opts: {
},
columnStyles: {
0: { cellWidth: showCmp ? 200 : 260 },
// Grey gradient across the Actual / Budget / Variance / % block so the
// four columns are easy to tell apart, with vertical borders (below).
1: { fillColor: [237, 237, 237] },
2: { fillColor: [227, 227, 227] },
3: { fillColor: [217, 217, 217] },
4: { fillColor: [207, 207, 207] },
},
margin: { left: marginX, right: marginX },
didParseCell: (data) => {
@@ -369,6 +375,14 @@ export async function generateBudgetVsActualPdf(opts: {
doc.setLineWidth(0.5);
doc.line(x, y + height, x + width, y + height);
}
// Vertical borders bracketing the Actual/Budget/Variance/% gradient block.
if (data.column.index >= 1 && data.column.index <= 4) {
const { x, y, width, height } = data.cell;
doc.setDrawColor(160);
doc.setLineWidth(0.4);
doc.line(x, y, x, y + height);
if (data.column.index === 4) doc.line(x + width, y, x + width, y + height);
}
},
});
@@ -1972,12 +1972,13 @@ function computeBvaActuals(actualsData: any): Record<string, number> {
// Budget vs. Actuals column shading — a light→dark grey gradient with left
// vertical borders so the Budget / Actual / Variance / Variance % columns are
// easy to tell apart. Applied to the header, group-total and detail cells.
// Page view stays plain; the grey gradient lives on the PDF export only.
const BVA_COL = {
budget: "text-right tabular-nums border-l border-gray-300 bg-gray-50",
actual: "text-right tabular-nums border-l border-gray-300 bg-gray-100",
variance: "text-right tabular-nums border-l border-gray-300 bg-gray-200/70",
pct: "text-right tabular-nums border-l border-gray-300 bg-gray-300/50",
cmp: "text-right tabular-nums border-l border-gray-300",
budget: "text-right tabular-nums",
actual: "text-right tabular-nums",
variance: "text-right tabular-nums",
pct: "text-right tabular-nums",
cmp: "text-right tabular-nums",
};
function BudgetVsActuals({ companyId, from, to, currency, companyName, rangeLabel, logoUrl }: { companyId: string; from: string; to: string; currency: string; companyName: string; rangeLabel: string; logoUrl?: string | null }) {