@skalfa/skalfa-component 1.0.7 → 1.0.9

package/dist/supervision/TableSupervision.component.js

@@ -4,87 +4,62 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableSupervisionComponent = TableSupervisionComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const free_regular_svg_icons_1 = require("@fortawesome/free-regular-svg-icons");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 const _utils_1 = require("@utils");
 const _contexts_1 = require("@contexts");
-const FloatingPage_component_1 = require("../modal/FloatingPage.component");
-const Button_component_1 = require("../button/Button.component");
-const Table_component_1 = require("../table/Table.component");
-const FormSupervision_component_1 = require("./FormSupervision.component");
-const ModalConfirm_component_1 = require("../modal/ModalConfirm.component");
-const TypographyColumn_component_1 = require("../typography/TypographyColumn.component");
-const BottomSheet_component_1 = require("../modal/BottomSheet.component");
+const __1 = require("../");
+const skalfa_lang_1 = require("@skalfa/skalfa-lang");
 const ExportExcel = _utils_1.registry.get("ExportExcel");
 const ImportExcel = _utils_1.registry.get("ImportExcel");
-function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, importControl, }) {
-    const { tableKey, tableControl, data, selected, setSelected, checks, setChecks, reset, focus } = (0, _utils_1.useTable)(fetchControl, id, title, (urlParam || true));
+;
+;
+function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, onRowClick, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, }) {
+    const l = (0, skalfa_lang_1.useLang)();
+    const { tableKey, tableControl, data, selected, setSelected, checks, setChecks, reset, focus, setFocus } = (0, _utils_1.useTable)(fetchControl, id, title, (urlParam || true));
     const { setToggle, toggle } = (0, _contexts_1.useToggleContext)();
     const { isSm } = (0, _utils_1.useResponsive)();
-    const isDetailControlObject = detailControl && typeof detailControl === "object" && !Array.isArray(detailControl);
-    const detailAction = isDetailControlObject
-        ? detailControl?.action
-        : (typeof detailControl === "function" ? detailControl : undefined);
-    const detailContent = isDetailControlObject
-        ? detailControl?.content
-        : (typeof detailControl === "function" ? undefined : detailControl);
-    const detailModalProps = isDetailControlObject
-        ? detailControl?.modal
-        : undefined;
     const toggleKey = (0, react_1.useMemo)(() => _utils_1.conversion.strSnake(tableKey).toUpperCase(), [tableKey]);
-    // ============================
-    // ## Shortcut register
-    // ============================
     (0, react_1.useEffect)(() => {
-        if (!isSm) {
-            if (controlBar == undefined || controlBar?.includes("CREATE")) {
-                _utils_1.shortcut.register("alt+n", () => {
+        if (data?.data?.length && !toggle[`MODAL_DELETE_${toggleKey}`] && !toggle[`MODAL_DELETE_${toggleKey}`] && !toggle[`MODAL_SHOW_${toggleKey}`]) {
+            _utils_1.shortcut.register("arrowdown", () => {
+                const max = data?.data?.length - 1;
+                setFocus(focus == null ? 0 : focus >= max ? max : (focus + 1));
+            }, "Pilih data kebawah");
+            _utils_1.shortcut.register("arrowup", () => {
+                setFocus(focus == null ? 0 : focus <= 0 ? 0 : (focus - 1));
+            }, "Pilih data keatas");
+            if (focus != null) {
+                _utils_1.shortcut.register("delete", () => {
+                    setSelected(data?.data?.at(focus));
+                    setToggle(`MODAL_DELETE_${toggleKey}`);
+                }, "Delete data yang dipilih");
+                _utils_1.shortcut.register(" ", () => {
+                    setSelected(data?.data?.at(focus));
                     setToggle(`MODAL_FORM_${toggleKey}`);
-                    setSelected(null);
-                }, "Tambah Data Baru");
-            }
-            if (controlBar?.includes("IMPORT")) {
-                _utils_1.shortcut.register("alt+i", () => {
-                    setToggle(`MODAL_IMPORT_${toggleKey}`);
-                }, "Import Data Dari Excel");
-            }
-            if (controlBar?.includes("EXPORT")) {
-                _utils_1.shortcut.register("alt+e", () => {
-                    setToggle(`MODAL_EXPORT_${toggleKey}`);
-                }, "Export Data Ke Excel");
+                }, "Edit data yang dipilih");
+                _utils_1.shortcut.register("enter", () => {
+                    setSelected(data?.data?.at(focus));
+                    setToggle(`MODAL_SHOW_${toggleKey}`);
+                }, "Detail data yang dipilih");
+                _utils_1.shortcut.register("escape", () => {
+                    setFocus(null);
+                }, "Kembali");
             }
         }
         return () => {
-            if (!isSm) {
-                _utils_1.shortcut.unregister("alt+n");
-                _utils_1.shortcut.unregister("alt+i");
-                _utils_1.shortcut.unregister("alt+e");
-            }
+            _utils_1.shortcut.unregister("arrowdown");
+            _utils_1.shortcut.unregister("arrowup");
+            _utils_1.shortcut.unregister("delete");
+            _utils_1.shortcut.unregister(" ");
+            _utils_1.shortcut.unregister("enter");
+            _utils_1.shortcut.unregister("escape");
         };
-    }, [controlBar, isSm]);
-    (0, react_1.useEffect)(() => {
-        if (actionControl && Array.isArray(actionControl) && selected) {
-            actionControl.filter((ac) => typeof ac == "object")?.forEach((ac) => {
-                if (typeof ac == "object" && ac?.shortcut) {
-                    _utils_1.shortcut.register(ac.shortcut.key, () => {
-                        setToggle(`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`);
-                    }, ac.shortcut.description);
-                }
-            });
-        }
-        return () => {
-            if (actionControl && Array.isArray(actionControl)) {
-                actionControl.filter((ac) => typeof ac == "object")?.forEach((ac) => {
-                    if (typeof ac == "object" && ac?.shortcut) {
-                        _utils_1.shortcut.unregister(ac.shortcut.key);
-                    }
-                });
-            }
-        };
-    }, [actionControl, selected]);
+    }, [data?.data, actionControl, focus, toggle[`MODAL_DELETE_${toggleKey}`], toggle[`MODAL_DELETE_${toggleKey}`], toggle[`MODAL_SHOW_${toggleKey}`]]);
+    // ============================
+    // ## Column preparation
+    // ============================
     const columns = (0, react_1.useMemo)(() => {
-        return columnControl ? columnControl.map((col) => {
-            if (typeof col == "string") {
+        return columnControl?.length ? columnControl.map((col) => {
+            if (typeof col === "string") {
                 return {
                     selector: col,
                     label: col,
@@ -103,177 +78,216 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
                 : [];
     }, [columnControl, data]);
     const renderTableAction = (actions, item, options) => {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-supervision-action-list", options?.className), children: (Array.isArray(actions) ? actions : (actions || actions == undefined) ? ['EDIT', "DELETE"] : [])?.map((action, key) => {
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("flex items-center gap-2", options?.className), children: (Array.isArray(actions) ? actions : (actions || actions == undefined) ? ['EDIT', "DELETE"] : [])?.map((action, key) => {
                     if (action == "EDIT") {
-                        return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEdit, label: "Ubah", variant: "outline", paint: "warning", size: options?.size || "xs", rounded: true, onClick: () => {
+                        return ((0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/edit", label: l.base.edit ? l.base.edit() : "Edit", variant: "outline", paint: "warning", size: options?.size || "xs", rounded: true, onClick: () => {
                                 setToggle(`MODAL_FORM_${toggleKey}`);
                                 item && setSelected?.(item);
                             } }, key));
                     }
                     if (action == "DELETE") {
-                        return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTrash, label: "Hapus", variant: "outline", paint: "danger", size: options?.size || "xs", rounded: true, onClick: () => {
+                        return ((0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/trash", label: l.base.delete ? l.base.delete() : "Delete", variant: "outline", paint: "danger", size: options?.size || "xs", rounded: true, onClick: () => {
                                 setToggle(`MODAL_DELETE_${toggleKey}`);
                                 item && setSelected?.(item);
                             } }, key));
                     }
                     if (typeof action == "object") {
-                        return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: action.label, variant: "outline", paint: "primary", size: options?.size || "xs", rounded: true, onClick: () => {
-                                setToggle(`MODAL_${_utils_1.conversion.strSnake(action.label).toUpperCase()}_${toggleKey}`);
-                                item && setSelected?.(item);
-                            }, ...action.button }, key));
+                        (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { label: action?.button?.label || action?.label, variant: action?.button?.variant || "outline", paint: action?.button?.paint || "primary", size: action?.button?.size || options?.size || "xs", rounded: action?.button?.rounded || true, onClick: () => {
+                                if (action?.button?.onClick) {
+                                    action?.button?.onClick(item);
+                                }
+                                else {
+                                    setToggle(`MODAL_${_utils_1.conversion.strSnake(action?.label).toUpperCase()}_${toggleKey}`);
+                                    item && setSelected?.(item);
+                                }
+                            }, ...action.button }, `action-object-${key}`);
                     }
                     if (typeof action == "function") {
-                        return ((0, jsx_runtime_1.jsx)("div", { children: action(item || {}, (type) => {
-                                setToggle(`MODAL_${type}_${toggleKey}`);
-                                item && setSelected?.(item);
-                            }, () => item && setSelected?.(item)) }, key));
+                        return ((0, jsx_runtime_1.jsx)("span", { children: action(item || {}, (type) => {
+                                if (type == "EDIT") {
+                                    setToggle(`MODAL_FORM_${toggleKey}`);
+                                    item && setSelected?.(item);
+                                }
+                                if (type == "DELETE") {
+                                    setToggle(`MODAL_DELETE_${toggleKey}`);
+                                    item && setSelected?.(item);
+                                }
+                            }, () => item && setSelected?.(item), () => { }, options?.size) }, `action-fn-${key}`));
                     }
+                    return (0, jsx_runtime_1.jsx)("span", {}, `action-default-${key}`);
                 }) }) }));
     };
     // ============================
+    // ## Data table preparation
+    // ============================
+    const dataTables = (0, react_1.useMemo)(() => {
+        return data?.data?.map((row) => {
+            return {
+                ...row,
+                action: renderTableAction(actionControl, row),
+            };
+        });
+    }, [actionControl, data]);
+    // ============================
     // ## Render detail page 
     // ============================
     const detailPage = (0, react_1.useMemo)(() => {
-        if (detailContent === false || detailContent === undefined)
+        if (!toggle[`MODAL_SHOW_${toggleKey}`])
             return null;
-        return ((0, jsx_runtime_1.jsx)("div", { className: "table-supervision-detail-container", children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-detail-body", children: !!selected && (typeof detailContent === "object" && Array.isArray(detailContent) ? detailContent?.map((column, key) => {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("flex flex-col gap-y-4"), children: !!selected && (typeof detailControl === "object" && detailControl?.length ? detailControl?.map((column, key) => {
                     if (typeof column === "string") {
-                        return ((0, jsx_runtime_1.jsx)(TypographyColumn_component_1.TypographyColumnComponent, { title: columns?.find((c) => c.selector == column)?.label, content: selected[column] }, key));
+                        return ((0, jsx_runtime_1.jsx)(__1.TypographyColumnComponent, { title: columns?.find((c) => c.selector == column)?.label, content: selected[column] }, key));
                     }
-                    else if (typeof column === "object" && column !== null) {
-                        const colObj = column;
-                        const rawContent = typeof colObj.item === "string" ? selected[colObj.item] : colObj.item(selected);
-                        const conversionKey = colObj.conversion;
-                        const content = conversionKey && _utils_1.conversion[conversionKey] ? _utils_1.conversion[conversionKey](rawContent) : rawContent;
-                        return ((0, jsx_runtime_1.jsx)(TypographyColumn_component_1.TypographyColumnComponent, { title: colObj.label, content: content }, key));
+                    else if (typeof column === "object") {
+                        return ((0, jsx_runtime_1.jsx)(__1.TypographyColumnComponent, { title: column?.label, content: typeof column?.item === "string" ? selected[column?.item] : column?.item(selected) }, key));
                     }
                     else {
                         return column?.(selected);
                     }
-                }) : typeof detailContent === "function" ? detailContent(selected) : columns?.map((column, key) => ((0, jsx_runtime_1.jsx)(TypographyColumn_component_1.TypographyColumnComponent, { title: column.label, content: selected[column.selector] }, key)))) }) }));
-    }, [selected, detailContent, columns]);
+                }) : typeof detailControl == "function" ? detailControl(selected) : columns?.map((column, key) => ((0, jsx_runtime_1.jsx)(__1.TypographyColumnComponent, { title: column.label, content: selected[column.selector] }, key)))) }) }));
+    }, [selected, detailControl]);
     // ============================
     // ## Form preparation
     // ============================
     const fields = (0, react_1.useMemo)(() => {
         return formControl?.fields?.length ? formControl?.fields.map((form) => {
             return typeof form === "string" ? {
-                label: form,
-                name: _utils_1.conversion.strSnake(form),
+                col: 12,
+                type: "text",
+                construction: {
+                    name: form,
+                    label: form,
+                },
+            } : { ...form };
+        }) : data?.forms || data?.columns || columnControl?.map((col) => {
+            return {
+                col: 12,
                 type: "text",
-                visibility: "*"
-            } : {
-                ...form,
-                visibility: form.visibility || "*"
+                construction: {
+                    name: typeof col == "string" ? col : col?.selector,
+                    label: typeof col == "string" ? col : col?.label,
+                    placeholder: `Masukkan ${typeof col == "string" ? col : col?.label}...`,
+                },
             };
-        }) : [];
-    }, [formControl]);
-    const formPage = (0, react_1.useMemo)(() => {
-        return ((0, jsx_runtime_1.jsx)(FormSupervision_component_1.FormSupervisionComponent, { fields: fields, defaultValue: formControl?.defaultValue, payload: formControl?.payload, submitControl: fetchControl, onSuccess: () => {
-                setToggle(`MODAL_FORM_${toggleKey}`, false);
-                reset();
-            } }));
-    }, [selected, fields]);
-    const dataTables = (0, react_1.useMemo)(() => {
-        return data?.data?.map((item) => {
+        }) || (data?.data?.at(0) ? Object.keys(data.data[0]).map((col) => {
             return {
-                ...item,
-                action: renderTableAction(actionControl, item)
+                col: 12,
+                type: "text",
+                construction: {
+                    name: col,
+                    label: col,
+                    placeholder: `Masukkan ${col}...`,
+                },
             };
-        }) || [];
-    }, [actionControl, data]);
+        })
+            : []);
+    }, [formControl, data]);
+    // ============================
+    // ## Render form page 
+    // ============================
+    const formPage = (0, react_1.useMemo)(async () => {
+        return ((0, jsx_runtime_1.jsx)(__1.FormSupervisionComponent, { submitControl: fetchControl.path ? {
+                path: `${fetchControl.path}/${selected?.id || ""}`,
+                method: !selected?.id ? "POST" : "PUT",
+            } : fetchControl.url ? {
+                url: `${fetchControl.url}/${selected?.id || ""}`,
+                method: !selected?.id ? "POST" : "PUT",
+            } : { idb: fetchControl?.idb }, fields: fields?.filter((f) => f.visibility ? !selected?.id ? ["*", "create"]?.includes(f.visibility) : ["*", "update"]?.includes(f.visibility) : true), defaultValue: formControl?.defaultValue ? await formControl?.defaultValue(selected || null) : selected, payload: formControl?.payload, onSuccess: () => {
+                reset();
+                setTimeout(() => { setToggle(`MODAL_FORM_${toggleKey}`, false); }, 900);
+            } }));
+    }, [selected, fetchControl, formControl]);
     (0, react_1.useEffect)(() => {
         if (toggle[`REFRESH_${toggleKey}`] != undefined)
             reset();
     }, [toggle[`REFRESH_${toggleKey}`]]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)("div", { children: "Loading..." }), children: [title && (0, jsx_runtime_1.jsx)("h1", { className: "table-supervision-title", children: title }), (0, jsx_runtime_1.jsx)(Table_component_1.TableComponent, { id: tableKey, controlBar: controlBar?.map((cb) => {
-                        if (cb == "CREATE") {
-                            if (isSm)
-                                return;
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => {
-                                        setToggle(`MODAL_FORM_${toggleKey}`);
-                                        setSelected(null);
-                                    } }) }, "button-add"));
-                        }
-                        if (cb == "IMPORT") {
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFileExcel, label: "Import", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_IMPORT_${toggleKey}`), size: "sm" }) }, "import"));
-                        }
-                        if (cb == "EXPORT") {
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFileExcel, label: "Export", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_EXPORT_${toggleKey}`), size: "sm" }) }, "export-excel"));
-                        }
-                        if (cb == "PRINT") {
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFilePdf, label: "Cetak", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_PRINT_${toggleKey}`), size: "sm" }) }, "export-pdf"));
-                        }
-                        return cb;
-                    }) || [
-                        ...(!isSm ? [
-                            (0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => {
-                                        setToggle(`MODAL_FORM_${toggleKey}`);
-                                        setSelected(null);
-                                    } }) }, "button-add")
-                        ] : []),
-                        "SEARCH",
-                        ...(columns?.filter((c) => !!c.filterable)?.length ? ["FILTER"] : []),
-                        ...(columns?.filter((c) => !!c.sortable)?.length ? ["SORT"] : []),
-                        "SELECTABLE", "REFRESH",
-                    ], columns: columns, data: dataTables, onRowClick: detailAction ? detailAction : (detailContent !== false && detailContent !== undefined) ? (e) => {
-                        setToggle(`MODAL_SHOW_${toggleKey}`);
-                        setSelected(e);
-                    } : undefined, actionBulking: actionBulkingControl, checks: checks || [], onChangeChecks: (e) => setChecks(e), block: block, focus: focus, noIndex: noIndex, responsiveControl: responsiveControl ? {
-                        mobile: responsiveControl?.mobile == true ? {
-                            leftActionControl: (Array.isArray(actionControl) ? actionControl : (actionControl || actionControl == undefined) ? ['EDIT', "DELETE"] : []).includes('EDIT') ? {
-                                icon: free_solid_svg_icons_1.faEdit,
-                                onAction: (item) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("h1", { className: "text-lg lg:text-xl font-bold mb-2 lg:mb-4", children: title }), (0, jsx_runtime_1.jsx)(__1.TableComponent, { id: tableKey, controlBar: controlBar?.map((cb) => {
+                    if (cb == "CREATE") {
+                        if (isSm)
+                            return;
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "pl-1.5 pr-3 mr-2 border-r", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", label: "Tambah Data", size: "sm", onClick: () => {
                                     setToggle(`MODAL_FORM_${toggleKey}`);
-                                    item && setSelected?.(item);
-                                }
-                            } : undefined,
-                            rightActionControl: (Array.isArray(actionControl) ? actionControl : (actionControl || actionControl == undefined) ? ['EDIT', "DELETE"] : []).includes('DELETE') ? {
-                                icon: free_solid_svg_icons_1.faTrash,
-                                onAction: (item) => {
-                                    setToggle(`MODAL_DELETE_${toggleKey}`);
-                                    item && setSelected?.(item);
-                                }
-                            } : undefined
-                        } : responsiveControl?.mobile || undefined,
-                    } : undefined, ...tableControl }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, className: "table-supervision-mobile-add-btn", size: "lg", rounded: true, onClick: () => {
-                        setToggle(`MODAL_FORM_${toggleKey}`);
-                        setSelected(null);
-                    } }), (detailContent !== false && detailContent !== undefined) && (isSm ? ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), className: "table-supervision-modal", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), size: "98vh", ...detailModalProps, children: detailPage })) : ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), title: "Detail", className: "table-supervision-modal", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), ...detailModalProps, children: detailPage }))), isSm ? ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), className: (0, _utils_1.cn)("table-supervision-modal", formControl?.modalControl?.className), size: "98vh", children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-form-mobile-container", children: formPage }) })) : ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), title: !!selected ? "Ubah Data" : "Tambah Data", className: (0, _utils_1.cn)("table-supervision-modal", formControl?.modalControl?.className), children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-form-container", children: formPage }) })), ExportExcel && ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: !!toggle[`MODAL_EXPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_EXPORT_${toggleKey}`, false), title: "Export Ke Excel", className: "table-supervision-large-modal", children: (0, jsx_runtime_1.jsx)(ExportExcel, { fetchControl: fetchControl, filename: "Export - " + title, columnControl: columns?.map((cc) => ({
-                            label: cc.label || "",
-                            selector: cc.selector || "",
-                            status: cc.exportable === false ? "hidden" : cc.exportable === true ? "default" : typeof cc.exportable === "string" ? cc.exportable : undefined,
-                        })) }) })), ImportExcel && ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: !!toggle[`MODAL_IMPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_IMPORT_${toggleKey}`, false), title: "Import Dari Excel", className: "table-supervision-large-modal", children: (0, jsx_runtime_1.jsx)(ImportExcel, { submitControl: importControl, fetchControl: fetchControl.path ? {
-                            path: fetchControl.path,
-                        } : undefined, columnControl: columns?.filter((cc) => cc.importable !== false).map((cc) => ({
-                            label: cc.label || "",
-                            selector: cc.selector || "",
-                        })) }) })), (0, jsx_runtime_1.jsx)(ModalConfirm_component_1.ModalConfirmComponent, { show: !!toggle[`MODAL_DELETE_${toggleKey}`], onClose: () => setToggle(`MODAL_DELETE_${toggleKey}`, false), icon: free_regular_svg_icons_1.faQuestionCircle, title: `Menghapus Data?`, submitControl: {
+                                    setSelected(null);
+                                } }) }, "button-add"));
+                    }
+                    if (cb == "IMPORT") {
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-excel", label: "Import", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_IMPORT_${toggleKey}`), size: "sm" }) }, "import"));
+                    }
+                    if (cb == "EXPORT") {
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-excel", label: "Export", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_EXPORT_${toggleKey}`), size: "sm" }) }, "export-excel"));
+                    }
+                    if (cb == "PRINT") {
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-pdf", label: "Cetak", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_PRINT_${toggleKey}`), size: "sm" }) }, "export-pdf"));
+                    }
+                    return cb;
+                }) || [
+                    ...(!isSm ? [
+                        (0, jsx_runtime_1.jsx)("div", { className: "pl-1.5 pr-3 mr-2 border-r", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", label: "Tambah Data", size: "sm", onClick: () => {
+                                    setToggle(`MODAL_FORM_${toggleKey}`);
+                                    setSelected(null);
+                                } }) }, "button-add")
+                    ] : []),
+                    "SEARCH",
+                    ...(columns?.filter((c) => !!c.filterable)?.length ? ["FILTER"] : []),
+                    ...(columns?.filter((c) => !!c.sortable)?.length ? ["SORT"] : []),
+                    "SELECTABLE", "REFRESH",
+                ], columns: columns, data: dataTables, onRowClick: onRowClick ? onRowClick : detailControl != false ? (e) => {
+                    setToggle(`MODAL_SHOW_${toggleKey}`);
+                    setSelected(e);
+                } : undefined, actionBulking: actionBulkingControl, checks: checks || [], onChangeChecks: (e) => setChecks(e), block: block, focus: focus, noIndex: noIndex, responsiveControl: responsiveControl ? {
+                    mobile: responsiveControl?.mobile ? {
+                        ...(typeof responsiveControl.mobile === 'object' ? responsiveControl.mobile : {}),
+                        leftActionControl: (typeof responsiveControl.mobile === 'object' && responsiveControl.mobile.leftActionControl !== undefined) ? responsiveControl.mobile.leftActionControl : (Array.isArray(actionControl) ? actionControl : (actionControl || actionControl == undefined) ? ['EDIT', "DELETE"] : []).includes('EDIT') ? {
+                            icon: "solid/edit",
+                            onAction: (item) => {
+                                setToggle(`MODAL_FORM_${toggleKey}`);
+                                item && setSelected?.(item);
+                            }
+                        } : undefined,
+                        rightActionControl: (typeof responsiveControl.mobile === 'object' && responsiveControl.mobile.rightActionControl !== undefined) ? responsiveControl.mobile.rightActionControl : (Array.isArray(actionControl) ? actionControl : (actionControl || actionControl == undefined) ? ['EDIT', "DELETE"] : []).includes('DELETE') ? {
+                            icon: "solid/trash",
+                            onAction: (item) => {
+                                setToggle(`MODAL_DELETE_${toggleKey}`);
+                                item && setSelected?.(item);
+                            }
+                        } : undefined
+                    } : undefined,
+                } : undefined, ...tableControl }), controlBar?.find((cb) => cb == "CREATE") && ((0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", className: "fixed bottom-24 right-4 w-14 h-14 z-20 md:hidden", size: "lg", rounded: true, onClick: () => {
+                    setToggle(`MODAL_FORM_${toggleKey}`);
+                    setSelected(null);
+                } })), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), title: "Detail", className: "bg-background", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), children: detailPage }), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), title: !!selected ? "Ubah Data" : "Tambah Data", className: (0, _utils_1.cn)("bg-white", formControl?.modalControl?.className), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: formPage }) }), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_EXPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_EXPORT_${toggleKey}`, false), title: "Export Ke Excel", className: "bg-white md:w-[1200px] max-w-[1200px]", children: (0, jsx_runtime_1.jsx)(ExportExcel, { fetchControl: fetchControl, filename: "Export - " + title, columnControl: columns?.map((cc) => ({
+                        label: cc.label || "",
+                        selector: cc.selector || "",
+                    })) }) }), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_IMPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_IMPORT_${toggleKey}`, false), title: "Import Dari Excel", className: "bg-white md:w-[1200px] max-w-[1200px]", children: (0, jsx_runtime_1.jsx)(ImportExcel, { submitControl: { path: fetchControl?.path + "/import" }, columnControl: columns?.map((cc) => ({
+                        label: cc.label || "",
+                        selector: cc.selector || "",
+                    })) }) }), (0, jsx_runtime_1.jsx)(__1.ModalConfirmComponent, { show: !!toggle[`MODAL_DELETE_${toggleKey}`], onClose: () => setToggle(`MODAL_DELETE_${toggleKey}`, false), title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Menghapus Data ", (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold", children: ["\"", selected?.[columns?.at(0)?.selector || ""], "\""] }), " ?"] }), submitControl: {
+                    onSubmit: {
+                        ...(fetchControl.path
+                            ? { path: `${fetchControl.path}/${selected?.id || ""}` }
+                            : fetchControl.url ? { url: `${fetchControl.url}/${selected?.id || ""}` }
+                                : { idb: { ...fetchControl?.idb, id: selected?.id || "" } }),
+                        method: "DELETE",
+                    },
+                    onSuccess: () => {
+                        reset();
+                        setTimeout(() => { setToggle(`MODAL_DELETE_${toggleKey}`, false); }, 900);
+                    },
+                } }), actionControl && Array.isArray(actionControl) && actionControl.filter((ac) => typeof ac == "object")?.map((ac, acKey) => {
+                const submitControl = ac.modal?.submitControl?.onSubmit;
+                return ((0, jsx_runtime_1.jsx)(__1.ModalConfirmComponent, { show: !!toggle[`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`], onClose: () => setToggle(`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`, false), title: ac?.modal?.title || ac.label, submitControl: {
                         onSubmit: {
-                            ...(fetchControl.path
-                                ? { path: `${fetchControl.path}/${selected?.id || ""}` }
-                                : fetchControl.url ? { url: `${fetchControl.url}/${selected?.id || ""}` }
-                                    : { idb: { ...fetchControl?.idb, id: selected?.id || "" } }),
-                            method: "DELETE",
+                            ...(submitControl?.path
+                                ? { path: `${submitControl?.path}/${selected?.id || ""}` }
+                                : { url: `${submitControl?.url}/${selected?.id || ""}` }),
+                            method: submitControl?.method || "POST",
                         },
                         onSuccess: () => {
                             reset();
-                            setToggle(`MODAL_DELETE_${toggleKey}`, false);
+                            setToggle(`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${_utils_1.conversion.strSnake(tableKey).toUpperCase()}`, false);
+                            setSelected(null);
+                            ac.modal?.submitControl?.onSuccess?.();
                         },
-                    }, children: columns?.at(0)?.selector && selected ? ((0, jsx_runtime_1.jsxs)("p", { className: "table-supervision-confirm-text", children: ["Yakin menghapus ", (0, jsx_runtime_1.jsxs)("span", { className: "table-supervision-confirm-item-name", children: ["\"", selected[columns?.at(0)?.selector || ""], "\""] }), "?"] })) : ((0, jsx_runtime_1.jsx)("p", { className: "table-supervision-confirm-text", children: "Yakin yang dihapus sudah benar?" })) }), actionControl && Array.isArray(actionControl) && actionControl.filter((ac) => typeof ac == "object")?.map((ac, acKey) => {
-                    const submitControl = ac.modal?.submitControl?.onSubmit;
-                    return ((0, jsx_runtime_1.jsx)(ModalConfirm_component_1.ModalConfirmComponent, { show: !!toggle[`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`], onClose: () => setToggle(`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`, false), icon: free_regular_svg_icons_1.faQuestionCircle, title: `${ac.label} Data?`, submitControl: {
-                            onSubmit: {
-                                ...(submitControl?.path
-                                    ? { path: `${submitControl.path}/${selected?.id || ""}` }
-                                    : submitControl?.url ? { url: `${submitControl.url}/${selected?.id || ""}` }
-                                        : { idb: { ...submitControl?.idb, id: selected?.id || "" } }),
-                                ...ac.modal?.submitControl?.onSubmit,
-                            },
-                            onSuccess: () => {
-                                reset();
-                                setToggle(`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`, false);
-                            },
-                        }, ...ac.modal, children: columns?.at(0)?.selector && selected ? ((0, jsx_runtime_1.jsxs)("p", { className: "table-supervision-confirm-text", children: ["Yakin melakukan aksi untuk data ", (0, jsx_runtime_1.jsxs)("span", { className: "table-supervision-confirm-item-name", children: ["\"", selected[columns?.at(0)?.selector || ""], "\""] }), "?"] })) : ((0, jsx_runtime_1.jsx)("p", { className: "table-supervision-confirm-text", children: "Yakin aksi yang dilakukan sudah benar?" })) }, acKey));
-                })] }) }));
+                    }, children: ac.modal?.children }, acKey));
+            })] }));
 }