@skalfa/skalfa-app 1.0.2 → 1.0.5

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

@@ -1,315 +0,0 @@
-"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>
-    </>
-  );
-}

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

@@ -1,204 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import { FetchControlType, useTable } from "@utils";
-import { TableComponent, IconButtonComponent, FilterComponent, NodeSchema, PageSchema, RenderPDFPreview, ButtonComponent, RenderPDF } from "@components";
-import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
-
-
-export type PrintColumn = {
-  selector  :  string;
-  source    :  string | null;
-  width     :  number;
-};
-
-export type ColumnControl = {
-  selector  :  string;
-  label     :  string;
-};
-
-
-
-function usePrintColumns(data: any[], columnControl?: ColumnControl[]) {
-  const fields = useMemo(() => {
-    if (!data?.[0]) return [];
-    return Object.keys(data[0]);
-  }, [data]);
-
-  const [columns, setColumns] = useState<PrintColumn[]>([]);
-
-  useEffect(() => {
-    if (!data?.[0] || columns.length) return;
-
-    if (columnControl?.length) {
-      setColumns(
-        columnControl.map((c) => ({
-          selector: c.label,
-          source: c.selector,
-          width: 120,
-        }))
-      );
-      return;
-    }
-
-    setColumns(
-      fields.map((f) => ({
-        selector: f,
-        source: f,
-        width: 120,
-      }))
-    );
-  }, [data, fields, columnControl]);
-
-  const move = (selector: string, dir: "left" | "right") => {
-    setColumns(prev => {
-      const idx = prev.findIndex(c => c.selector === selector);
-      const target = dir === "left" ? idx - 1 : idx + 1;
-      if (idx < 0 || target < 0 || target >= prev.length) return prev;
-      const next = [...prev];
-      [next[idx], next[target]] = [next[target], next[idx]];
-      return next.map((c) => ({ ...c, selector: c.selector }));
-    });
-  };
-
-  return { columns, move };
-}
-
-
-function buildPrintSchema({ title, columns, data, columnControl }: {
-  title          ?:  string;
-  columns         :  PrintColumn[];
-  data            :  any[];
-  columnControl  ?:  ColumnControl[];
-}) : PageSchema[] {
-  const active = columns.filter(c => c.source);
-
-  const getHeaderLabel = (source: string | null) => {
-    if (!source) return "";
-
-    const found = columnControl?.find(c => c.selector === source);
-
-    return found?.label ?? source;
-  };
-
-  const content: NodeSchema[] = [];
-
-  if (title) {
-    content.push({
-      type     :  "text",
-      content  :  title,
-      style    :  { fontSize: 16, fontWeight: "bold", marginBottom: 12 },
-    });
-  }
-
-  content.push({
-    type     :  "table",
-    content  :  [
-      {
-        type     :  "tr" as const,
-        content  :  active.map<NodeSchema>(c => ({
-          type     :  "th" as const,
-          content  :  getHeaderLabel(c.source),
-          style    :  { width: c.width },
-        })),
-      },
-      ...data.map<NodeSchema>(row => ({
-        type     :  "tr" as const,
-        content  :  active.map<NodeSchema>(c => ({
-          type     :  "td" as const,
-          content  :  String(row[c.source!] ?? ""),
-          style    :  { width: c.width },
-        })),
-      })),
-    ],
-  });
-
-  return [{ page: { size: "A4", margin: 40, content } }];
-}
-
-
-
-export function PrintTable({ fetchControl, columnControl, title }: { fetchControl: FetchControlType; columnControl?: ColumnControl[]; title?: string; }) {
-  const { data }  =  useTable(fetchControl, undefined, undefined, false);
-  const rows      =  data?.data ?? [];
-
-  const { columns, move } = usePrintColumns(rows, columnControl);
-
-  const schema = useMemo(() => buildPrintSchema({
-    title: title,
-    columns,
-    data: rows,
-    columnControl,
-  }), [columns, rows, columnControl]);
-
-  return (
-    <>
-      <div className="p-4">
-        <FilterComponent
-          columns={data?.data[0] && Object.keys(data?.data[0])?.map((c) => ({ label: c, selector: c }))}
-          onChange={() => {}}
-          value={[]}
-        />
-      </div>
-
-      <div className="p-4">
-        <TableComponent
-          controlBar={false}
-          pagination={false}
-          noIndex
-          columns={columns.map(c => ({ selector: c.selector, label: c.selector }))}
-          data={[
-            Object.fromEntries(
-              columns.map((c, key) => [
-                c.selector,
-                <div className="flex gap-1" key={key}>
-                  {key > 0 && (
-                    <IconButtonComponent
-                      icon={faArrowLeft}
-                      size="xs"
-                      variant="outline"
-                      className="!text-foreground"
-                      onClick={() => move(c.selector, "left")}
-                    />
-                  )} 
-
-                  {key < (columns.length - 1) && (
-                    <IconButtonComponent
-                      icon={faArrowRight}
-                      size="xs"
-                      variant="outline"
-                      className="!text-foreground"
-                      onClick={() => move(c.selector, "right")}
-                    />
-                  )}
-                </div>,
-              ])
-            ),
-          ]}
-          className="row::bg-transparent row::border-0 row::gap-0 row::!hover:bg-white column::p-2 column::border-l head-column::p-2 head-column::border-l"
-        />
-      </div>
-
-      <RenderPDFPreview schema={schema} className="w-full max-h-[400px] overflow-y-auto flex justify-center bg-background mt-4" />
-
-
-      <div className="px-4 mt-8">
-        <ButtonComponent label=" Download PDF" block onClick={async () => {
-          const bytes = await RenderPDF({ content: schema });
-
-          const arrayBuffer = bytes.buffer instanceof ArrayBuffer ? bytes.buffer : bytes.slice().buffer;
-
-          const blob = new Blob([arrayBuffer], { type: "application/pdf" });
-          const url = URL.createObjectURL(blob);
-
-          const a = document.createElement("a");
-          a.href = url;
-          a.download = title ? `${title}.pdf` : "print.pdf";
-          a.click();
-
-          URL.revokeObjectURL(url);
-        }} />
-      </div>
-    </>
-  );
-}