@skalfa/skalfa-app 1.0.0

package/components/base.components/document/ExportExcel.component.tsx

@@ -0,0 +1,340 @@
+"use client";
+
+import ExcelJS from "exceljs";
+import { useEffect, useMemo, useState } from "react";
+import { faArrowLeft, faArrowRight, faEdit, faPlus, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { api, FetchControlType, useTable } from "@utils";
+import { TableComponent, ButtonComponent, IconButtonComponent, SelectComponent, ModalComponent } from "@components";
+import { useToggleContext } from "@contexts";
+import { FilterComponent } from "../table/FilterComponent";
+
+
+
+type ExportColumn = {
+  selector  :  string;
+  label     :  string;
+  source    :  string | null;
+};
+
+export type ExportExcelColumnControlType = {
+  label     :  string;
+  selector  :  string;
+  status   ?:  "default" | "optional" | "hidden";
+};
+
+type ExportExcelProps = {
+  fetchControl    :  FetchControlType;
+  columnControl  ?:  ExportExcelColumnControlType[];
+  filename       ?:  string;
+};
+
+
+
+const ADD_COLUMN_KEY = "__add_column__";
+
+function numberToExcelColumn(index: number): string {
+  let column  =  "";
+  let n       =  index;
+
+  while (n >= 0) {
+    column = String.fromCharCode((n % 26) + 65) + column;
+    n = Math.floor(n / 26) - 1;
+  }
+
+  return column;
+}
+
+
+
+export function ExportExcel({ fetchControl, columnControl, filename }: ExportExcelProps) {
+  const { toggle, setToggle } = useToggleContext()
+
+  const { data, tableControl, setParam, params } = useTable(fetchControl, undefined, undefined, false);
+
+  const fields = useMemo(() => {
+    if (columnControl?.length) {
+      return columnControl.filter(c => c.status !== "hidden").map(c => c.selector);
+    }
+
+    if (!data?.data?.[0]) return [];
+    return Object.keys(data.data[0]);
+  }, [data, columnControl]);
+
+  const [columns, setColumns] = useState<ExportColumn[]>([]);
+
+
+  useEffect(() => {
+    if (!data?.data?.[0]) return;
+
+    setColumns(prev => {
+      if (prev.length) return prev;
+
+      const baseFields = columnControl?.length ? columnControl.filter(c => c.status === "default" || c.status === undefined).map(c => c.selector) : Object.keys(data.data[0]);
+
+      return baseFields.map((field, i) => {
+        const label = numberToExcelColumn(i);
+
+        return {
+          selector  :  label,
+          label     :  label,
+          source    :  field,
+        };
+      });
+    });
+  }, [data, columnControl]);
+
+
+  const addColumn = (selector: string, source: string) => {
+    setColumns(prev => [...prev, { selector, label: selector, source }]);
+  };
+
+  const removeColumn = (selector: string) => {
+    setColumns(prev => prev.filter(c => c.selector !== selector).map((c, i) => {
+      const label = numberToExcelColumn(i);
+      return { ...c, selector: label, label };
+    }));
+  };
+
+  const moveColumn = (selector: string, dir: "left" | "right") => {
+    setColumns(prev => {
+      const idx = prev.findIndex(c => c.selector === selector);
+      if (idx === -1) return prev;
+
+      const target = dir === "left" ? idx - 1 : idx + 1;
+      if (target < 0 || target >= prev.length) return prev;
+
+      const next = [...prev];
+      [next[idx], next[target]] = [next[target], next[idx]];
+
+      return next.map((c, i) => {
+        const label = numberToExcelColumn(i);
+        return { ...c, selector: label, label };
+      });
+    });
+  };
+
+  const setSource = (selector: string, source: string | null) => setColumns(prev => prev.map(c => (c.selector === selector ? { ...c, source } : c)));
+
+  const getColumnLabel = (source: string | null) => {
+    if (!source) return "";
+
+    const found = columnControl?.find(c => c.selector === source);
+
+    return found?.label ?? source;
+  };
+
+
+  const tableColumns = useMemo(() => {
+    return [
+      ...columns?.map((c => ({
+        ...c,
+        label: <div className="w-full text-center">{c.label}</div>
+      }))),
+      { selector: ADD_COLUMN_KEY, label: "" } as any,
+    ];
+  }, [columns]);
+
+  const tableData = useMemo(() => {
+    if (!data?.data || !columns.length) return [];
+
+    const controlRow: Record<string, any> = {};
+
+    columns.forEach((col, iCol) => {
+      controlRow[col.selector] = (
+        <div className="flex justify-between">
+          <p className="font-semibold">{getColumnLabel(col.source)}</p>
+
+          <div className="flex gap-1">
+            {iCol > 0 && (
+              <IconButtonComponent
+                icon={faArrowLeft}
+                size="xs"
+                variant="outline"
+                className="!text-foreground"
+                onClick={() => moveColumn(col.selector, "left")}
+              />
+            )} 
+
+            {iCol < (columns.length - 1) && (
+              <IconButtonComponent
+                icon={faArrowRight}
+                size="xs"
+                variant="outline"
+                className="!text-foreground"
+                onClick={() => moveColumn(col.selector, "right")}
+              />
+            )}
+
+            <IconButtonComponent
+              icon={faEdit}
+              size="xs"
+              paint="warning"
+              variant="outline"
+              disabled={columns.length <= 1}
+              onClick={() => setToggle("MODAL_FIELD_EXPORT", {selector: col.selector, value: col.source})}
+            />
+
+            <IconButtonComponent
+              icon={faTimes}
+              size="xs"
+              paint="danger"
+              variant="outline"
+              disabled={columns.length <= 1}
+              onClick={() => removeColumn(col.selector)}
+            />
+          </div>
+
+          
+        </div>
+      );
+    });
+
+    controlRow[ADD_COLUMN_KEY] = (
+      <div className="flex justify-center">
+        <ButtonComponent
+          icon={faPlus}
+          label="Tambah Kolom"
+          size="xs"
+          variant="outline"
+          onClick={() => {
+            const idx = columns.length;
+            const label = numberToExcelColumn(idx);
+            setToggle("MODAL_FIELD_EXPORT", { selector: label, value: "", add: true })
+          }}
+        />
+      </div>
+    );
+
+    const excelRows = data.data.map((item: Record<string, any>) => {
+      const row: Record<string, any> = {};
+
+      row[ADD_COLUMN_KEY] = "-"
+      columns.forEach(col => {
+        row[col.selector] = col.source ? <span className="line-clamp-1">{item[col.source] || "-"}</span> : "-";
+      });
+
+      return row;
+    });
+
+    return [controlRow, ...excelRows];
+  }, [data, columns, fields]);
+
+  
+  const handleDownloadExcel = async () => {
+    const record  =  await api({...fetchControl, params: {...fetchControl.params, ...params, page: 1, paginate: 9999}});
+    if (!record?.data?.data?.length || !columns.length) return;
+
+    const workbook     =  new ExcelJS.Workbook();
+    const worksheet    =  workbook.addWorksheet("Export");
+
+    worksheet.columns  =  columns.map(col => ({
+      header  :  getColumnLabel(col.source),
+      key     :  col.selector,
+      width   :  20,
+    }));
+
+    worksheet.getRow(1).eachCell(cell => {
+      cell.font       =  { bold: true };
+      cell.alignment  =  { horizontal: "center", vertical: "middle" };
+    });
+
+    record.data.data.forEach((item: Record<string, any>) => {
+      const row: Record<string, any> = {};
+
+      columns.forEach(col => {
+        row[col.selector] = col.source ? item[col.source] : "";
+      });
+
+      worksheet.addRow(row);
+    });
+
+    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 ? filename + ".xlsx" : "export.xlsx";
+    link.click();
+
+    URL.revokeObjectURL(link.href);
+  };
+
+  
+
+  return (
+    <>
+      <div className="p-4">
+        <FilterComponent 
+          columns={columnControl?.length 
+            ? columnControl.filter(c => c.status !== "hidden").map(c => ({ 
+                label: c.label, 
+                selector: c.selector,
+                type: "text"
+              }))
+            : (data?.data?.[0] ? Object.keys(data.data[0]).map((c) => ({ 
+                label: c, 
+                selector: c,
+                type: "text"
+              })) : [])
+          }
+          onChange={(filters) => setParam('filter', filters)}
+          value={params?.filter || []}
+        />
+      </div>
+
+      <TableComponent
+        controlBar={false}
+        columns={tableColumns}
+        data={tableData}
+        {...tableControl}
+        pagination={false}
+        className="p-4 bg-background row::bg-transparent row::border-0 row::gap-0 row::!hover:bg-background column::p-2 column::border head-column::p-2 head-column::border"
+      />
+
+      <div className="px-4 mt-8">
+        <ButtonComponent label="Download Excel" block onClick={() => handleDownloadExcel()} />
+      </div>
+
+      <ModalComponent 
+        show={!!toggle["MODAL_FIELD_EXPORT"]}
+        onClose={() => setToggle("MODAL_FIELD_EXPORT", false)}
+        title="Pilih Kolom"
+        footer={
+          <div className="flex justify-end">
+            <ButtonComponent 
+              label="Terapkan"
+              onClick={() => {
+                if(!!(toggle["MODAL_FIELD_EXPORT"] as { value: string })?.value) {
+                  if((toggle["MODAL_FIELD_EXPORT"] as { add: boolean })?.add) {
+                    addColumn((toggle["MODAL_FIELD_EXPORT"] as { selector: string })?.selector, (toggle["MODAL_FIELD_EXPORT"] as { value: string })?.value)
+                  } else {
+                    setSource((toggle["MODAL_FIELD_EXPORT"] as { selector: string })?.selector, (toggle["MODAL_FIELD_EXPORT"] as { value: string })?.value)
+                  }
+                }
+                setToggle("MODAL_FIELD_EXPORT", false)
+              }}
+            />
+          </div>
+        }
+      >
+        <div className="p-4">
+          <SelectComponent
+            name={`column_${(toggle["MODAL_FIELD_EXPORT"] as { selector: string })?.selector}`}
+            placeholder="Pilih kolom data..."
+            value={(toggle["MODAL_FIELD_EXPORT"] as { value: string })?.value ?? ""}
+            onChange={e => setToggle("MODAL_FIELD_EXPORT", {...(toggle["MODAL_FIELD_EXPORT"] as object), value: e})}
+            options={fields.map((f: string) => {
+              const col = columnControl?.find(c => c.selector === f);
+              if (col?.status === "hidden") return null;
+              
+              return {
+                label: col?.label || f,
+                value: f,
+              };
+            }).filter(Boolean) as any}
+          />
+        </div>
+      </ModalComponent>
+    </>
+  );
+}

package/components/base.components/document/ImportExcel.component.tsx

@@ -0,0 +1,315 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import ExcelJS from "exceljs";
+import { faEdit } from "@fortawesome/free-solid-svg-icons";
+import { TableComponent, ButtonComponent, SelectComponent, ModalComponent, IconButtonComponent } from "@components";
+import { useToggleContext } from "@contexts";
+import { api, FetchControlType } from "@utils";
+
+
+
+export type ImportExcelColumnControlType = {
+  label: string;
+  selector: string;
+};
+
+type ImportColumn = {
+  selector: string;
+  label: string;
+  source: string | null;
+};
+
+type ImportExcelProps = {
+  columnControl: ImportExcelColumnControlType[];
+  onSubmit?: (rows: any[]) => void;
+  submitControl?: FetchControlType;
+  fetchControl?: FetchControlType;
+};
+
+
+
+function numberToExcelColumn(index: number): string
+{
+  let column = "";
+  let n = index;
+
+  while (n >= 0) {
+    column = String.fromCharCode((n % 26) + 65) + column;
+    n = Math.floor(n / 26) - 1;
+  }
+
+  return column;
+}
+
+
+
+export function ImportExcel({ columnControl, onSubmit, submitControl, fetchControl }: ImportExcelProps) {
+  const { toggle, setToggle }  =  useToggleContext()
+
+  const [columns, setColumns]  =  useState<ImportColumn[]>([]);
+  const [rows, setRows]        =  useState<Record<string, any>[]>([]);
+  const [loaded, setLoaded]    =  useState(false);
+
+  const [processing, setProcessing]  =  useState(false);
+  const [progress, setProgress]      =  useState({ success: 0, failed: 0, total: 0 });
+  const [errors, setErrors]          =  useState<Record<number, string>>({});
+
+
+  const handleImportFile = async (file: File) => {
+    const workbook  =  new ExcelJS.Workbook();
+    const buffer    =  await file.arrayBuffer();
+
+    await workbook.xlsx.load(buffer);
+    const sheet = workbook.worksheets[0];
+
+    const excelColumns: ImportColumn[] = [];
+    sheet.getRow(1).eachCell((_, colIndex) => {
+      const label = numberToExcelColumn(colIndex - 1);
+
+      excelColumns.push({
+        selector: label,
+        label: label,
+        source: null,
+      });
+    });
+
+    const excelRows: Record<string, any>[] = [];
+    sheet.eachRow((row, rowIndex) => {
+      if (rowIndex === 1) return;
+
+      const item: Record<string, any> = {};
+      excelColumns.forEach((col, i) => {
+        item[col.selector] = row.getCell(i + 1).value;
+      });
+
+      excelRows.push(item);
+    });
+
+    setColumns(excelColumns);
+    setRows(excelRows);
+    setLoaded(true);
+  };
+
+  const getColumnLabel = (source: string | null) => {
+    if (!source) return "";
+
+    const found = columnControl?.find(c => c.selector === source);
+
+    return found?.label ?? source;
+  };
+
+
+  const tableColumns = useMemo(() => {
+    return columns?.map((c => ({
+      ...c,
+      label: <div className="w-full text-center">{c.label}</div>
+    })));
+  }, [columns]);
+
+
+  const tableData = useMemo(() => {
+    if (!loaded) return [];
+
+    const mappingRow: Record<string, any> = {};
+
+    columns.forEach(col => {
+      mappingRow[col.selector] = (
+        <>
+          <div className="flex justify-between">
+            <p className="font-semibold">{getColumnLabel(col.source) || <p className="text-light-foreground">-- PILIH KOLOM --</p>}</p>
+
+            <IconButtonComponent
+              icon={faEdit}
+              size="xs"
+              paint="warning"
+              variant="outline"
+              disabled={columns.length <= 1}
+              onClick={() => setToggle("MODAL_FIELD_IMPORT", { selector: col.selector, value: col.source })}
+            />
+          </div>
+        </>
+      );
+    });
+
+    return [mappingRow, ...rows];
+  }, [columns, rows, loaded, columnControl]);
+
+
+  const generatePayload = () => {
+    return rows.map(row => {
+      const payload: Record<string, any> = {};
+
+      columns.forEach(col => {
+        if (col.source) {
+          payload[col.source] = row[col.selector];
+        }
+      });
+
+      return payload;
+    });
+  };
+
+  const handleSubmit = async () => {
+    const payload = generatePayload();
+
+    if (onSubmit) {
+      onSubmit(payload);
+      return;
+    }
+
+    setProcessing(true);
+    setProgress({ success: 0, failed: 0, total: payload.length });
+    setErrors({});
+
+    if (submitControl?.path) {
+      try {
+        await api({
+          path     :  submitControl?.path,
+          method   :  "POST",
+          payload  :  { data: payload },
+        });
+
+        setProgress({ success: payload.length, failed: 0, total: payload.length });
+        setToggle("MODAL_IMPORT_SUCCESS", true);
+
+        setTimeout(() => {
+          setToggle(Object.keys(toggle).find(k => k.startsWith("MODAL_IMPORT_")) || "", false);
+        }, 1500);
+
+      } catch (e: any) {
+        setProgress({ success: 0, failed: payload.length, total: payload.length });
+        setErrors({ 0: e.message || "Bulk import failed" });
+      }
+    } else if (fetchControl) {
+      let successCount  =  0;
+      let failedCount   =  0;
+
+      for (let i = 0; i < payload.length; i++) {
+        const item = payload[i];
+
+        try {
+          await api({
+            ...fetchControl,
+            method: "POST",
+            payload: item,
+          });
+          successCount++;
+        } catch (e: any) {
+          failedCount++;
+          setErrors(prev => ({ ...prev, [i]: e.message || "Failed" }));
+        }
+
+        setProgress({ success: successCount, failed: failedCount, total: payload.length });
+      }
+    }
+
+    setProcessing(false);
+  };
+
+  return (
+    <>
+
+      {!loaded && (
+        <div className="p-4 relative">
+          <input
+            type="file"
+            accept=".xlsx"
+            onChange={e =>
+            {
+              const file = e.target.files?.[0];
+              if (file) handleImportFile(file);
+            }}
+            className="text-transparent bg-background w-full aspect-video border border-dashed relative file:hidden placeholder:hidden rounded-md cursor-pointer"
+          />
+
+          <div className="absolute top-1/2 left-1/2 -translate-1/2 text-light-foreground">
+            Pilih atau tarik file excel di sini
+          </div>
+        </div>
+      )}
+
+      {loaded && (
+        <TableComponent
+          controlBar={false}
+          columns={tableColumns}
+          data={tableData}
+          pagination={false}
+          noIndex
+          className="p-4 bg-background row::bg-background row::border-0 row::gap-0 row::!hover:bg-background column::p-2 column::border head-column::p-2 head-column::border"
+        />
+      )}
+
+      {loaded && !processing && (
+        <div className="px-4 mt-8">
+          <ButtonComponent
+            label="Import Data"
+            block
+            onClick={handleSubmit}
+          />
+        </div>
+      )}
+
+      {processing && (
+        <div className="px-4 mt-8 flex flex-col gap-2">
+          <div className="flex justify-between text-sm">
+            <span>Processing: {progress.success + progress.failed} / {progress.total}</span>
+            {progress.failed > 0 && <span className="text-danger">{progress.failed} Failed</span>}
+          </div>
+          <div className="w-full h-2 bg-secondary rounded-full overflow-hidden">
+            <div
+              className="h-full bg-primary transition-all duration-300"
+              style={{ width: `${((progress.success + progress.failed) / progress.total) * 100}%` }}
+            />
+          </div>
+        </div>
+      )}
+
+      {Object.keys(errors).length > 0 && (
+        <div className="px-4 mt-4 max-h-40 overflow-y-auto">
+          <p className="text-danger font-semibold mb-2">Errors Details:</p>
+          {Object.entries(errors).map(([idx, msg]) => (
+            <div key={idx} className="text-xs text-danger">
+              Row {Number(idx) + 1}: {msg}
+            </div>
+          ))}
+        </div>
+      )}
+
+
+      <ModalComponent
+        show={!!toggle["MODAL_FIELD_IMPORT"]}
+        onClose={() => setToggle("MODAL_FIELD_IMPORT", false)}
+        title="Pilih Kolom"
+        footer={
+          <div className="flex justify-end">
+            <ButtonComponent
+              label="Terapkan"
+              onClick={() => {
+                if (!!(toggle["MODAL_FIELD_IMPORT"] as { value: string })?.value) {
+                  setColumns(prev =>
+                    prev.map(c => c.selector === (toggle["MODAL_FIELD_IMPORT"] as { selector: string })?.selector ? { ...c, source: String((toggle["MODAL_FIELD_IMPORT"] as { value: string })?.value) } : c)
+                  )
+                }
+                setToggle("MODAL_FIELD_IMPORT", false)
+              }}
+            />
+          </div>
+        }
+      >
+        <div className="p-4">
+          <SelectComponent
+            name={`column_${(toggle["MODAL_FIELD_IMPORT"] as { selector: string })?.selector}`}
+            placeholder="Pilih kolom data..."
+            value={(toggle["MODAL_FIELD_IMPORT"] as { value: string })?.value ?? ""}
+            onChange={e => setToggle("MODAL_FIELD_IMPORT", { ...(toggle["MODAL_FIELD_IMPORT"] as object), value: e })}
+            options={columnControl.map(c => ({
+              label: c.label,
+              value: c.selector,
+            }))}
+          />
+        </div>
+      </ModalComponent>
+    </>
+  );
+}