spotlibs-components 0.1.10 → 0.1.12

package/src/utils/generateImportExcel.js

@@ -0,0 +1,546 @@
+/* eslint-disable no-undef */
+import ExcelJS from 'exceljs';
+import * as XLSX from 'xlsx';
+import { Decimal } from 'decimal.js';
+import { ModalErrorUtil } from '@/helpers/modal';
+
+/**
+ * Generate and download template excel with dynamic configuration
+ * @param {Object} config - Configuration object for generating Excel
+ * @param {number} [config.year=new Date().getFullYear()] - Year
+ * @param {Array} config.data - Array of data to be rendered
+ * @param {Array<string>} [config.headers1=[]] - First row headers
+ * @param {Array<string>} [config.headers2=[]] - Second row headers
+ * @param {string} [config.title=''] - Title of the document
+ * @param {Array<number>} [config.disabledMonths=[]] - Array of months to disable (1-12)
+ * @param {number} [config.startDataRow=3] - Starting row index for data
+ * @param {boolean} [config.isLocked=false] - Whether to enable month-based cell locking
+ * @param {string} [config.password=''] - Password for protection
+ * @param {number} [config.freezeColumns=3] - Number of columns to freeze
+ * @param {boolean} [config.freezeHeader=false] - Whether to freeze header rows
+ * @param {string} [config.filename='Export'] - Output filename
+ * @param {boolean} [config.isTotalCell=false] - Whether to add total column
+ * @param {Object} [config.mappings] - Object mapping for data to excel columns
+ */
+export async function generateAnnualTemplateExcel({
+  year = new Date().getFullYear(),
+  data = [],
+  headers1 = [],
+  headers2 = [],
+  title = '',
+  disabledMonths = [],
+  startDataRow = 3,
+  isLocked = false,
+  password = '',
+  freezeColumns = 3,
+  freezeHeader = false,
+  filename = 'Export',
+  isTotalCell = false,
+  mappings = {}
+}) {
+  const workbook = new ExcelJS.Workbook();
+  const sheet = workbook.addWorksheet(title || `Export ${year}`);
+
+  const COLOR_HEADER = "A6C8EC";
+  const COLOR_VALUE_ID = "D9D9D9";
+  const COLOR_WHITE = "FFFFFFFF";
+  const FONT_DEFAULT = { name: "Arial", size: 11 };
+
+  // Add headers
+  if (headers1.length > 0) {
+    sheet.addRow(headers1);
+  }
+  if (headers2.length > 0) {
+    sheet.addRow(headers2);
+  } else if (headers1.length > 0) {
+    // If no second header row, add empty row for vertical merging
+    sheet.addRow(Array(headers1.length).fill(''));
+  }
+
+  // Handle header merging
+  if (headers1.length > 0) {
+    // Process each column
+    for (let col = 0; col < headers1.length; col++) {
+      const header1 = headers1[col];
+      const header2 = headers2[col] || '';
+      
+      // Skip empty header1 cells
+      if (header1 === '') continue;
+
+      // Case 1: Vertical merge when header2 is empty or doesn't exist
+      if (header2 === '') {
+        try {
+          sheet.mergeCells(1, col + 1, 2, col + 1);
+        } catch (e) {
+          // Skip if already merged
+        }
+      }
+
+      // Case 2: Horizontal merge in header1 if next cells are empty
+      let span = 1;
+      while (col + span < headers1.length && headers1[col + span] === '') {
+        span++;
+      }
+      if (span > 1) {
+        try {
+          sheet.mergeCells(1, col + 1, 1, col + span);
+        } catch (e) {
+          // Skip if already merged
+        }
+        col += span - 1; // Skip the merged columns in next iteration
+      }
+    }
+  }
+
+  // Set title cell if there are headers
+  if (headers1.length > 0) {
+    // Find the range for title based on the month columns (empty strings in headers1)
+    const monthStartCol = headers1.findIndex(h => h === '') + 1;
+    // Count consecutive empty strings to determine the month span
+    let monthSpan = 0;
+    for (let i = monthStartCol - 1; i < headers1.length; i++) {
+      if (headers1[i] === '') monthSpan++;
+      else break;
+    }
+    // Title should span across all month columns
+    const lastCol = monthStartCol + monthSpan - 1;
+    
+    // Unmerge any existing merged cells in the range before merging
+    const startCell = sheet.getCell(1, monthStartCol);
+    const endCell = sheet.getCell(1, lastCol);
+    const titleRange = `${startCell._address}:${endCell._address}`;
+    
+    try {
+      // Try to unmerge first to prevent errors
+      sheet.unMergeCells(titleRange);
+    } catch (e) {
+      // Ignore if cells weren't merged
+    }
+    
+    sheet.mergeCells(titleRange);
+    const titleCell = sheet.getCell(1, monthStartCol);
+    titleCell.value = title || `Export Data Tahun ${year}`;
+    titleCell.font = { ...FONT_DEFAULT, bold: true };
+    titleCell.alignment = { horizontal: "center", vertical: "middle" };
+    titleCell.fill = {
+      type: "pattern",
+      pattern: "solid",
+      fgColor: { argb: COLOR_HEADER }
+    };
+    titleCell.border = {
+      top: { style: "thin" },
+      left: { style: "thin" },
+      bottom: { style: "thin" },
+      right: { style: "thin" }
+    };
+  }
+
+  // Style all headers
+  [1, 2].forEach(row => {
+    if ((row === 1 && headers1.length > 0) || (row === 2 && headers2.length > 0)) {
+      // Use headers1 length as the column count since it includes all columns
+      const totalColumns = headers1.length;
+      for (let col = 1; col <= totalColumns; col++) {
+        const cell = sheet.getRow(row).getCell(col);
+        if (cell.value !== null) {
+          cell.font = { ...FONT_DEFAULT, bold: true };
+          cell.fill = {
+            type: "pattern",
+            pattern: "solid",
+            fgColor: { argb: COLOR_HEADER }
+          };
+          cell.alignment = { horizontal: "center", vertical: "middle" };
+          cell.border = {
+            top: { style: "thin" },
+            left: { style: "thin" },
+            bottom: { style: "thin" },
+            right: { style: "thin" }
+          };
+        }
+      }
+    }
+  });
+
+  // Add data rows
+  data.forEach((item, idx) => {
+    const rowIdx = idx + startDataRow;
+    const row = sheet.getRow(rowIdx);
+
+    // Map data to columns based on mappings, but skip 'no' mapping since we handle it directly
+    Object.entries(mappings).forEach(([key, colIndex]) => {
+      if (key !== 'no') { // Skip 'no' mapping since we handle it manually
+        row.getCell(colIndex).value = item[key] || '';
+      }
+    });
+
+    // Set row number explicitly
+    row.getCell(1).value = idx + 1;
+
+    // If monthly data exists in mapping
+    const monthlyData = Array(12).fill(0);
+    for (let i = 0; i < 12; i++) {
+      const monthKey = `month_${i + 1}`;
+      if (item[monthKey] !== undefined) {
+        monthlyData[i] = item[monthKey];
+      }
+    }
+
+    // Add monthly values
+    for (let i = 0; i < 12; i++) {
+      const cell = row.getCell(i + Object.keys(mappings).length + 1);
+      cell.value = monthlyData[i];
+      cell.numFmt = "#,##0.00";
+    }
+
+    // Add total if required
+    if (isTotalCell) {
+      const totalCell = row.getCell(Object.keys(mappings).length + 13);
+      totalCell.value = { formula: `SUM(${row.getCell(Object.keys(mappings).length + 1)._address}:${row.getCell(Object.keys(mappings).length + 12)._address})` };
+      totalCell.numFmt = "#,##0.00";
+    }    
+    
+    row.commit();
+  });
+
+  // Style data rows
+  const totalColumns = headers1.length; // Use headers1 length as it includes all columns including Total
+  for (let r = startDataRow; r < startDataRow + data.length; r++) {
+    for (let c = 1; c <= totalColumns; c++) {
+      const cell = sheet.getRow(r).getCell(c);
+      cell.font = { ...FONT_DEFAULT };
+      
+      // Style based on column type
+      const isMonthColumn = c > Object.keys(mappings).length && c <= Object.keys(mappings).length + 12;
+      const isTotalColumn = isTotalCell && c === totalColumns;
+      
+      if (isMonthColumn) {
+        const monthIndex = c - Object.keys(mappings).length;
+        
+        // Apply the new disabled months logic
+        let cellIsLocked = false;
+        if (isLocked) {
+          // Use the directly provided disabledMonths array
+          cellIsLocked = disabledMonths.includes(monthIndex);
+        }
+        
+        cell.fill = {
+          type: "pattern",
+          pattern: "solid",
+          fgColor: { argb: cellIsLocked ? COLOR_VALUE_ID : COLOR_WHITE }
+        };
+        cell.protection = { locked: cellIsLocked };
+        cell.alignment = { horizontal: "right" };
+      } else if (isTotalColumn) {
+        cell.fill = {
+          type: "pattern",
+          pattern: "solid",
+          fgColor: { argb: COLOR_VALUE_ID }
+        };
+        cell.protection = { locked: true };
+        cell.alignment = { horizontal: "right" };
+      } else {
+        cell.fill = {
+          type: "pattern",
+          pattern: "solid",
+          fgColor: { argb: COLOR_VALUE_ID }
+        };
+        cell.protection = { locked: true };
+        cell.alignment = { horizontal: c === 1 ? "center" : "left" };
+      }
+
+      cell.border = {
+        top: { style: "thin" },
+        left: { style: "thin" },
+        bottom: { style: "thin" },
+        right: { style: "thin" }
+      };
+    }
+  }
+
+  // Set column widths
+  const getMaxWidth = (arr) => Math.max(...arr.map(v => v ? v.toString().length : 0));
+  
+  // For mapped columns
+  Object.entries(mappings).forEach(([key, colIndex]) => {
+    const values = data.map(item => item[key]);
+    const headerText = headers1[colIndex - 1] || headers2[colIndex - 1] || key;
+    sheet.getColumn(colIndex).width = getMaxWidth([headerText, ...values]) + 5;
+  });
+
+  // For month columns and total
+  for (let i = Object.keys(mappings).length + 1; i <= totalColumns; i++) {
+    const isTotalColumn = isTotalCell && i === totalColumns;
+    sheet.getColumn(i).width = isTotalColumn ? 25 : 22;
+  }
+
+  if (password) {
+    sheet.protect(password, {
+      selectLockedCells: true,
+      selectUnlockedCells: true,
+      formatCells: false,
+      formatColumns: false,
+      formatRows: false,
+      insertColumns: false,
+      insertRows: false,
+      insertHyperlinks: false,
+      deleteColumns: false,
+      deleteRows: false,
+      sort: false,
+      autoFilter: false,
+      pivotTables: false,
+      objects: false,
+      scenarios: false
+    });
+  }
+
+  if (freezeColumns > 0 || freezeHeader) {
+    const freezeOptions = { state: "frozen" };
+    
+    if (freezeColumns > 0) {
+      freezeOptions.xSplit = freezeColumns;
+    }
+    
+    if (freezeHeader) {
+      // Freeze header rows based on the number of header rows present
+      const headerRowCount = (headers1.length > 0 ? 1 : 0) + (headers2.length > 0 ? 1 : 0);
+      if (headerRowCount > 0) {
+        freezeOptions.ySplit = headerRowCount;
+      }
+    }
+    
+    sheet.views = [freezeOptions];
+  }
+
+  const buffer = await workbook.xlsx.writeBuffer();
+  const blob = new Blob([buffer], { 
+    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 
+  });
+  const link = document.createElement("a");
+  link.href = URL.createObjectURL(blob);
+  link.download = `${filename}.xlsx`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+/**
+ * Import and validate excel template with dynamic configuration
+ * @param {Object} config - Configuration object for importing Excel
+ * @param {number} [config.maxValue=9999999999999] - Maximum allowed value for numeric fields
+ * @param {File} config.file - The Excel file to import
+ * @param {string} [config.sheetName=''] - Specific sheet name to read. If empty, reads first sheet
+ * @param {number} [config.headerRow=1] - Row number where headers start (1-based)
+ * @param {Array<string>} [config.requiredHeaders=[]] - Array of required header names
+ * @param {Object} [config.mappings] - Column mapping for data import (e.g., { 'Kantor Cabang': 'branch_desc' })
+ * @param {boolean} [config.hasMonthlyData=true] - Whether the template contains monthly data columns
+ * @param {function} [config.validateRow] - Optional custom row validation function
+ * @returns {Promise<Array>} - Parsed and validated data
+ */
+export const importAnnualTemplateExcel = ({
+  maxValue = 9999999999999,
+  file,
+  sheetName = '',
+  headerRow = 1,
+  requiredHeaders = [],
+  mappings = {},
+  hasMonthlyData = true,
+  validateRow
+}) => {
+  // Validate file type
+  const validTypes = [
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'application/vnd.ms-excel'
+  ];
+  const fileName = file.name || '';
+  const isValidExt = fileName.endsWith('.xlsx') || fileName.endsWith('.xls');
+  
+  if (!validTypes.includes(file.type) && !isValidExt) {
+    ModalErrorUtil.showModal('File yang diupload harus memiliki tipe XLSX atau XLS');
+    return Promise.reject(new Error('File yang diupload harus memiliki tipe XLSX atau XLS'));
+  }
+
+  return new Promise((resolve, reject) => {
+    try {
+      const reader = new FileReader();
+
+      reader.onload = (e) => {
+        try {
+          const data = new Uint8Array(e.target.result);
+          const workbook = XLSX.read(data, { type: 'array' });
+
+          // Get the specified sheet or the first sheet
+          const sheet = sheetName 
+            ? workbook.Sheets[sheetName] 
+            : workbook.Sheets[workbook.SheetNames[0]];
+
+          if (!sheet) {
+            reject(new Error(`Sheet ${sheetName || 'pertama'} tidak ditemukan`));
+            return;
+          }
+
+          // Convert to JSON with header option
+          const jsonData = XLSX.utils.sheet_to_json(sheet, {
+            header: 1,
+            blankrows: false,
+            defval: ''
+          });
+
+          if (jsonData.length < headerRow) {
+            reject(new Error('File Excel kosong atau tidak memiliki data yang cukup'));
+            return;
+          }
+
+          // Get headers from the specified header row (convert to 0-based index)
+          const headers = jsonData[headerRow - 1].map(h => String(h).trim());
+          
+          // For dual-header templates, also get the second row for month names
+          let monthHeaders = [];
+          if (hasMonthlyData && jsonData.length > headerRow) {
+            monthHeaders = jsonData[headerRow].map(h => String(h).trim());
+          }
+
+          // Validate required headers
+          const missingHeaders = requiredHeaders.filter(required => {
+            const requiredLower = required.toLowerCase();
+            return !headers.some(h => h.toLowerCase() === requiredLower);
+          });
+
+          if (missingHeaders.length > 0) {
+            reject(new Error(`Kolom yang diperlukan tidak ditemukan: ${missingHeaders.join(', ')}`));
+            return;
+          }
+
+          // Define month mappings to match form field names: ex. {branch}_{month}
+          const monthMap = {
+            'januari': 'jan',
+            'jan': 'jan',
+            'februari': 'feb',
+            'feb': 'feb',
+            'maret': 'mar',
+            'mar': 'mar',
+            'april': 'april',
+            'apr': 'april',
+            'mei': 'mei',
+            'juni': 'jun',
+            'jun': 'jun',
+            'juli': 'jul',
+            'jul': 'jul',
+            'agustus': 'agu',
+            'agu': 'agu',
+            'september': 'sept',
+            'sept': 'sept',
+            'oktober': 'okt',
+            'okt': 'okt',
+            'november': 'nov',
+            'nov': 'nov',
+            'desember': 'des',
+            'des': 'des'
+          };
+
+          // Create column mappings
+          const columnMappings = headers.map((header, index) => {
+            const headerLower = header.toLowerCase();
+            const monthHeader = monthHeaders[index] || '';
+            const monthHeaderLower = monthHeader.toLowerCase();
+            
+            // Check custom mappings first
+            for (const [mappingKey, mappingValue] of Object.entries(mappings)) {
+              if (mappingKey.toLowerCase() === headerLower) {
+                return { index, key: mappingValue, isMonth: false };
+              }
+            }
+            
+            // Then check for month columns in the second header row if hasMonthlyData is true
+            if (hasMonthlyData && monthMap[monthHeaderLower]) {
+              return { index, key: monthMap[monthHeaderLower], isMonth: true };
+            }
+            
+            return { index, key: header, isMonth: false };
+          });
+
+          // Process data rows (start from headerRow + 1 to skip both header rows)
+          const result = [];
+          for (let i = headerRow + 1; i < jsonData.length; i++) {
+            const row = jsonData[i];
+            if (!row || row.length === 0) continue;
+
+            const newRow = {};
+            let hasData = false;
+
+            // Map columns according to configuration
+            columnMappings.forEach(({ index, key, isMonth }) => {
+              let value = row[index];
+              
+              // Handle monthly data columns
+              if (hasMonthlyData && isMonth) {
+                // Enhanced type handling like in excel-utils.js
+                if (typeof value === 'string') {
+                  // Check if string contains only valid numeric characters
+                  if (!/^[\d.,\-+]*$/.test(value.trim())) {
+                    value = 0;
+                  } else {
+                    // Check for multiple commas - only one comma allowed as decimal separator
+                    const commaCount = (value.match(/,/g) || []).length;
+                    if (commaCount > 1) {
+                      value = 0;
+                    } else {
+                      // Replace comma with dot for decimal conversion (European format)
+                      value = value.replace(/,/g, '.').trim();
+                      const numValue = new Decimal(value || 0);
+                      
+                      // Validate and constrain the value
+                      if (numValue.isNaN() || numValue.isNegative()) {
+                        value = 0;
+                      } else if (numValue.gt(maxValue)) {
+                        value = maxValue;
+                      } else {
+                        value = numValue.toNumber();
+                      }
+                    }
+                  }
+                } else if (typeof value === 'number') {
+                  const numValue = new Decimal(value);
+                  if (numValue.isNegative()) {
+                    value = 0;
+                  } else if (numValue.gt(maxValue)) {
+                    value = maxValue;
+                  } else {
+                    value = numValue.toNumber();
+                  }
+                } else {
+                  // For any other type (null, undefined, boolean, etc.), set to 0
+                  value = 0;
+                }
+                
+                // Store monthly value directly using the month key
+                newRow[key] = value;
+                hasData = true;
+              } else {
+                newRow[key] = value;
+                if (value) hasData = true;
+              }
+            });
+
+            // Skip empty rows
+            if (!hasData && Object.values(newRow).every(v => !v)) continue;
+
+            // Apply custom row validation if provided
+            if (validateRow && !validateRow(newRow)) continue;
+
+            result.push(newRow);
+          }
+
+          resolve(result);
+        } catch (error) {
+          reject(new Error(`Error parsing Excel file: ${error.message}`));
+        }
+      };
+
+      reader.onerror = (error) => reject(error);
+      reader.readAsArrayBuffer(file);
+
+    } catch (error) {
+      reject(error);
+    }
+  });
+};

package/src/utils/generateTimestamp.d.ts

@@ -0,0 +1 @@
+export declare function generateVcifId(): string;

package/src/utils/generateTimestamp.js

@@ -0,0 +1,4 @@
+export function generateVcifId() {
+  const timestamp = Date.now(); 
+  return `VCIF${timestamp}`;
+}

package/src/utils/handleApiError.d.ts

@@ -0,0 +1 @@
+export declare function handleApiError(err: unknown, res: unknown): void;

package/src/utils/handleApiError.js

@@ -0,0 +1,17 @@
+export function handleApiError(err, res) {
+  // ! Check if response has already been sent to avoid ERR_HTTP_HEADERS_SENT
+  if (res.headersSent) {
+    return;
+  }
+
+  // ! Get status from error (axios errors have err.response.status, others might have err.status)
+  const status = err?.response?.status || err?.status;
+
+  if (err.response?.data) {
+    res.status(status).json(err.response?.data);
+  } else if (err?.message) {
+    res.status(status).json({ error: err.message });
+  } else {
+    res.status(status).json(err);
+  }
+}

package/src/utils/index.d.ts

@@ -0,0 +1,104 @@
+// Formatters - Currency
+export declare function formatCurrency(
+  value: number | string | null | undefined,
+  options?: {
+    locale?: string;
+    currency?: string;
+    minFractionDigits?: number;
+    maxFractionDigits?: number;
+  }
+): string;
+export declare function formatRupiah(value: number | string | null | undefined): string;
+export declare function formatNominal(
+  value: number | string | null | undefined,
+  options?: {
+    locale?: string;
+    minFractionDigits?: number;
+    maxFractionDigits?: number;
+    decimalSeparator?: string;
+  }
+): string;
+export declare function formatDigit(value: number | string): string;
+
+// Formatters - Account
+export declare function formatAccountNumber(value: string | null | undefined): string;
+export declare function formatNPWP(value: string | null | undefined): string;
+
+// Formatters - Date
+export declare function toYearFirstDash(value: Date | string): string;
+export declare function toDateFirstSlash(value: Date | string): string;
+export declare function formatDateToDDSlashMMSlashYYYY(date: Date): string;
+export declare function formatDateToDDMMYYYY(date: Date): string;
+export declare function yearFirstDashToDateFirstDash(value: string): string;
+export declare function yearFirstDashToDateFirstSlash(value: string): string;
+export declare function dateFirstSlashToYearFirstDash(value: string): string;
+export declare function sevenDigitToDateFirstSlash(value: string): string;
+export declare function sevenDigitToYearFirstDash(value: string): string;
+export declare function sevenDigitToDateFirstDash(value: string): string;
+export declare function toDateTimeHourMinute(value: string): string;
+export declare function ddmmyyToSlashDate(value: string): string;
+
+// Formatters - String
+export declare function formatResponseDesc(desc: string): string;
+export declare function titleCase(str: string): string;
+export declare function snakeToCamelWithSpace(snakeStr: string): string;
+export declare function stringToBoolean(str: string): boolean | undefined;
+export declare function matchWiths(targetStr: string, values?: string[]): boolean;
+export declare function maskString(value: string, type?: string): string;
+
+// JSON
+export declare function parseJSON(value: string): unknown;
+export declare function jsonToStringLimiter(value?: unknown): string | null;
+export declare function errorState(name: string, errors: unknown): unknown;
+export declare function ascendingStringify(obj: unknown): string;
+
+// Asset
+export declare function callAsset(uri?: string): string;
+
+// Boolean Utils
+export declare function checkRoleUser(roles: string[], listRole: string[]): boolean;
+export declare function toggleUsingDummyWbenchEndpoint(status: boolean): boolean;
+
+// Constants
+export declare const NOT_AUTHORIZE_RESPONSE_CODE: string[];
+export declare const PUBLIC_PATHS: string[];
+export declare const COOKIE_MAX_SIZE: number;
+export declare const CLIENT_PUBLIC_API_ROUTES: string[];
+export declare const CLIENT_ALLOWED_ORIGINS: Array<string | RegExp>;
+
+// Disable Form
+export declare function disableFormElements(selector: string): void;
+export declare function disableFormBuilder(
+  fields: Array<Record<string, unknown> | null>,
+  roleAccess: boolean
+): Array<Record<string, unknown> | null>;
+
+// Generate Timestamp
+export declare function generateVcifId(): string;
+
+// LocalStorage
+export declare function getLocalStorageItem(key: string): unknown;
+
+// Tipe Bank
+export declare function getTipeBankKorporasi(
+  data: Array<{ status_perusahaan: string; tipe_bank: string }>
+): string;
+
+// Exception
+export declare const HEADER_EXCEPTION: string;
+export declare const ACCESS_EXCEPTION: string;
+export declare const PARAMETER_EXCEPTION: string;
+export declare const NOTFOUND_EXCEPTION: string;
+export declare const INVALIDRULE_EXCEPTION: string;
+export declare const THIRDPARTY_EXCEPTION: string;
+export declare const WAITING_EXCEPTION: string;
+export declare const UNSUPPORTED_EXCEPTION: string;
+export declare const RUNTIME_EXCEPTION: string;
+export declare const EXCEPTION_MESSAGES: Record<string, string>;
+export declare class ApiException extends Error {
+  responseCode: string;
+  responseDesc: string;
+  constructor(responseCode: string, responseDesc?: string);
+}
+export declare function isExceptionCode(responseCode: string): boolean;
+export declare function getExceptionMessage(responseCode: string): string;