@skalfa/skalfa-app 1.0.3 → 1.0.6

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

@@ -1,164 +0,0 @@
-"use client"
-
-import { useEffect, useMemo, useRef, useState } from "react";
-import Image from "next/image";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFilePdf, faFileImage, faFileWord, faFileExcel, faFile } from "@fortawesome/free-solid-svg-icons";
-import { cn } from "@/utils";
-
-
-
-type Props = {
-  file    ?:  File | string | null;
-  width   ?:  number;
-  height  ?:  number;
-  mode    ?:  "full" | "thumb";
-};
-
-
-
-export const DocumentViewerIcon = (ext: string) => {
-  switch (ext) {
-    case "jpg":
-    case "jpeg":
-    case "png":
-    case "webp":
-      return faFileImage;
-    case "pdf":
-      return faFilePdf;
-    case "doc":
-    case "docx":
-      return faFileWord;
-    case "xls":
-    case "xlsx":
-      return faFileExcel;
-    default:
-      return faFile;
-  }
-};
-
-
-
-export function DocumentViewerComponent({ file, width, height, mode = "full" }: Props) {
-  const [fileUrl, setFileUrl] = useState<string | null>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  useEffect(() => {
-    if (!file) {
-      setFileUrl(null);
-      return;
-    }
-
-    if (typeof file === "string") {
-      setFileUrl(file);
-      return;
-    }
-
-    const objectUrl = URL.createObjectURL(file);
-    setFileUrl(objectUrl);
-    return () => URL.revokeObjectURL(objectUrl);
-  }, [file]);
-
-  const extension = useMemo(() => {
-    if (!file) return null;
-    if (typeof file === "string") {
-      const clean = file.split("?")[0].split("#")[0];
-      return clean.split(".").pop()?.toLowerCase() || null;
-    }
-    return file.name.split(".").pop()?.toLowerCase() || null;
-  }, [file]);
-
-  const isImage = ["jpg", "jpeg", "png", "webp"].includes(extension || "");
-  const isPdf = extension === "pdf";
-
-  const renderTaskRef = useRef<any>(null);
-
-  useEffect(() => {
-    if (!file || !isPdf || !fileUrl || !canvasRef.current) return;
-
-    let cancelled = false;
-
-    const renderPdf = async () => {
-      const pdfjs = await import("pdfjs-dist/legacy/build/pdf.mjs");
-      pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs";
-
-      if (renderTaskRef.current) {
-        try {
-          await renderTaskRef.current.cancel();
-        } catch {}
-        renderTaskRef.current = null;
-      }
-
-      let loadingTask;
-
-      if (typeof file === "string") {
-        loadingTask = pdfjs.getDocument(fileUrl);
-      } else {
-        const buf = await file.arrayBuffer();
-        const uint8 = new Uint8Array(buf);
-        loadingTask = pdfjs.getDocument({ data: uint8 });
-      }
-
-      const pdf = await loadingTask.promise;
-      if (cancelled) return;
-
-      const page = await pdf.getPage(1);
-      if (cancelled) return;
-
-      const scale = mode === "thumb" ? 0.35 : 1;
-      const viewport = page.getViewport({ scale });
-
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-
-      canvas.width = viewport.width;
-      canvas.height = viewport.height;
-
-      const renderTask = page.render({ canvasContext: ctx, viewport, canvas });;
-      renderTaskRef.current = renderTask;
-
-      await renderTask.promise;
-      renderTaskRef.current = null;
-    };
-
-    renderPdf();
-
-    return () => {
-      cancelled = true;
-      if (renderTaskRef.current) {
-        try {
-          renderTaskRef.current.cancel();
-        } catch {}
-        renderTaskRef.current = null;
-      }
-    };
-  }, [isPdf, fileUrl, mode]);
-
-  if (!fileUrl) return null;
-
-
-  return (
-    <div
-      style={{
-        width: width ? width : "100%",
-        height: height ? height : "100%",
-        overflow: "hidden",
-        position: "relative",
-      }}
-    >
-      {isImage && <Image src={fileUrl} alt="document" fill className={mode === "thumb" ? "object-cover" : "object-contain"}/>}
-
-      {isPdf && <canvas ref={canvasRef} className={cn("block w-full h-full",  mode === "thumb" ? "object-cover" : "object-contain")} />}
-
-      {!isImage && !isPdf && (
-        <div className={cn("w-full h-full flex flex-col items-center justify-center opacity-50 gap-4")}>
-          <FontAwesomeIcon icon={DocumentViewerIcon(extension || "")} className={mode !== "thumb" ? "text-3xl" : "text-lg"} />
-          {mode !== "thumb" && file instanceof File && (<p className="text-center text-sm">{file.name}</p>)}
-        </div>
-      )}
-    </div>
-  );
-}

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

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