@isi-ui7/bos7-shared 0.2.11 → 0.2.13

package/src/export.ts

@@ -1,11 +1,33 @@
-// lib/export.ts — utility export Excel dan PDF untuk halaman laporan
+// lib/export.ts — utility export Excel (styled, via exceljs) dan PDF untuk
+// halaman laporan (DG-02 PM review: export mentah -> format cantik).
 
-import * as XLSX from 'xlsx';
+import ExcelJS from 'exceljs';
 
 export interface ExportColumn {
   field: string;
   title: string;
   displayFormat?: string;
+  /** Cell alignment. Default: 'right' for displayFormat="currency", else 'left'. */
+  align?: 'left' | 'center' | 'right';
+}
+
+/** Header block rendered above the column headers (report title/period/applied filters). */
+export interface ExportMeta {
+  title?: string;
+  /** e.g. "01 Jul 2026 – 24 Jul 2026" or "Per 24 Jul 2026". */
+  period?: string;
+  /** Applied filter values, e.g. [{label:"Cabang", value:"001 — Pusat"}]. Omitted/empty filters should not be passed in. */
+  filters?: Array<{ label: string; value: string }>;
+}
+
+/** Values for a highlighted total/subtotal row, keyed by column `field`. Fields absent here render blank in the total row. */
+export type ExportTotals = Record<string, unknown>;
+
+export interface ExportOptions {
+  meta?: ExportMeta;
+  totals?: ExportTotals;
+  /** Label shown in the total row's leading cell(s). Default: "Total". */
+  totalsLabel?: string;
 }
 
 function cellValue(val: unknown, format?: string): unknown {
@@ -15,20 +37,128 @@ function cellValue(val: unknown, format?: string): unknown {
   return val;
 }
 
-export function exportToExcel<T extends Record<string, unknown>>(
+function columnAlign(c: ExportColumn): 'left' | 'center' | 'right' {
+  return c.align ?? (c.displayFormat === 'currency' ? 'right' : 'left');
+}
+
+const THIN_BORDER: Partial<ExcelJS.Borders> = {
+  top: { style: 'thin', color: { argb: 'FFD0D0D0' } },
+  left: { style: 'thin', color: { argb: 'FFD0D0D0' } },
+  bottom: { style: 'thin', color: { argb: 'FFD0D0D0' } },
+  right: { style: 'thin', color: { argb: 'FFD0D0D0' } },
+};
+const HEADER_FILL: ExcelJS.Fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF1F61FE' } };
+const TOTAL_FILL: ExcelJS.Fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE8F0FE' } };
+
+export async function exportToExcel<T extends Record<string, unknown>>(
   data: T[],
   columns: ExportColumn[],
-  sheetName: string
-): void {
-  const headers = columns.map((c) => c.title);
-  const rows = data.map((row) =>
-    columns.map((c) => cellValue(row[c.field], c.displayFormat))
-  );
+  sheetName: string,
+  options?: ExportOptions,
+): Promise<void> {
+  const wb = new ExcelJS.Workbook();
+  const ws = wb.addWorksheet(sheetName.slice(0, 31));
+  const colCount = columns.length;
+
+  let cursorRow = 1;
+  const meta = options?.meta;
+  if (meta?.title) {
+    const row = ws.getRow(cursorRow);
+    row.getCell(1).value = meta.title;
+    row.getCell(1).font = { bold: true, size: 14 };
+    ws.mergeCells(cursorRow, 1, cursorRow, colCount);
+    cursorRow += 1;
+  }
+  if (meta?.period) {
+    const row = ws.getRow(cursorRow);
+    row.getCell(1).value = `Periode: ${meta.period}`;
+    row.getCell(1).font = { italic: true, color: { argb: 'FF525252' } };
+    ws.mergeCells(cursorRow, 1, cursorRow, colCount);
+    cursorRow += 1;
+  }
+  if (meta?.filters?.length) {
+    const row = ws.getRow(cursorRow);
+    row.getCell(1).value = meta.filters.map((f) => `${f.label}: ${f.value}`).join('   ·   ');
+    row.getCell(1).font = { italic: true, size: 10, color: { argb: 'FF525252' } };
+    ws.mergeCells(cursorRow, 1, cursorRow, colCount);
+    cursorRow += 1;
+  }
+  if (meta?.title || meta?.period || meta?.filters?.length) {
+    cursorRow += 1; // blank spacer row before the column headers
+  }
+
+  const headerRowIndex = cursorRow;
+  const headerRow = ws.getRow(headerRowIndex);
+  columns.forEach((c, i) => {
+    const cell = headerRow.getCell(i + 1);
+    cell.value = c.title;
+    cell.font = { bold: true, color: { argb: 'FFFFFFFF' } };
+    cell.fill = HEADER_FILL;
+    cell.border = THIN_BORDER;
+    cell.alignment = { horizontal: columnAlign(c), vertical: 'middle' };
+  });
+  headerRow.height = 20;
+  cursorRow += 1;
+
+  data.forEach((row) => {
+    const r = ws.getRow(cursorRow);
+    columns.forEach((c, i) => {
+      const cell = r.getCell(i + 1);
+      cell.value = cellValue(row[c.field], c.displayFormat) as ExcelJS.CellValue;
+      cell.border = THIN_BORDER;
+      cell.alignment = { horizontal: columnAlign(c), vertical: 'middle' };
+      if (c.displayFormat === 'currency') cell.numFmt = '#,##0.00';
+    });
+    cursorRow += 1;
+  });
+
+  if (options?.totals && Object.keys(options.totals).length > 0) {
+    const r = ws.getRow(cursorRow);
+    const totalsLabel = options.totalsLabel ?? 'Total';
+    let labelWritten = false;
+    columns.forEach((c, i) => {
+      const cell = r.getCell(i + 1);
+      cell.font = { bold: true };
+      cell.fill = TOTAL_FILL;
+      cell.border = { ...THIN_BORDER, top: { style: 'medium', color: { argb: 'FF1F61FE' } } };
+      cell.alignment = { horizontal: columnAlign(c), vertical: 'middle' };
+      if (c.field in options.totals!) {
+        cell.value = cellValue(options.totals![c.field], c.displayFormat) as ExcelJS.CellValue;
+        if (c.displayFormat === 'currency') cell.numFmt = '#,##0.00';
+      } else if (!labelWritten) {
+        cell.value = totalsLabel;
+        labelWritten = true;
+      }
+    });
+    cursorRow += 1;
+  }
+
+  columns.forEach((c, i) => {
+    const headerLen = c.title.length;
+    const sampleLen = data.slice(0, 50).reduce((max, row) => {
+      const v = cellValue(row[c.field], c.displayFormat);
+      return Math.max(max, String(v ?? '').length);
+    }, 0);
+    ws.getColumn(i + 1).width = Math.min(Math.max(headerLen, sampleLen) + 2, 40);
+  });
+
+  // Freeze everything above and including the column header row.
+  ws.views = [{ state: 'frozen', ySplit: headerRowIndex }];
+
+  const buf = await wb.xlsx.writeBuffer();
+  const blob = new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${sheetName}.xlsx`;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
 
-  const ws = XLSX.utils.aoa_to_sheet([headers, ...rows]);
-  const wb = XLSX.utils.book_new();
-  XLSX.utils.book_append_sheet(wb, ws, sheetName.slice(0, 31));
-  XLSX.writeFile(wb, `${sheetName}.xlsx`);
+function cellText(val: unknown, format?: string): string {
+  return String(cellValue(val, format));
 }
 
 export async function exportToPDF<T extends Record<string, unknown>>(
@@ -47,12 +177,7 @@ export async function exportToPDF<T extends Record<string, unknown>>(
 
   autoTable(doc, {
     head: [columns.map((c) => c.title)],
-    body: data.map((row) =>
-      columns.map((c) => {
-        const val = cellValue(row[c.field], c.displayFormat);
-        return String(val);
-      })
-    ),
+    body: data.map((row) => columns.map((c) => cellText(row[c.field], c.displayFormat))),
     startY: 22,
     styles: { fontSize: 8 },
     headStyles: { fillColor: [31, 97, 254] }, // Carbon blue

package/src/i18n.tsx

@@ -24,6 +24,7 @@ export type BosSharedLabels = {
   toggleOn: string;
   toggleOff: string;
   emptyValue: string;
+  showInactive: string;
 
   loading: string;
   saving: string;
@@ -71,6 +72,7 @@ export function useBosSharedI18n(): BosSharedLabels {
     toggleOn: t("bos7.toggleOn", "On"),
     toggleOff: t("bos7.toggleOff", "Off"),
     emptyValue: t("bos7.emptyValue", "—"),
+    showInactive: t("bos7.showInactive", "Tampilkan Nonaktif"),
 
     loading: t("bos7.loading", "Memuat data..."),
     saving: t("bos7.saving", "Memproses..."),