@skalfa/skalfa-component 1.0.0

package/dist/src/supervision/FormSupervision.component.d.ts

@@ -0,0 +1,93 @@
+import React, { ReactNode } from "react";
+import { ApiType, FormErrorType, FormRegisterType, FormValueType, ValidationRules, DBSchema } from "@utils";
+import { InputProps, InputCheckboxProps, InputCurrencyProps, InputDateProps, InputNumberProps, InputRadioProps, SelectProps, InputPasswordProps, InputOtpProps, InputTimeProps, InputImageProps, InputDateTimeProps, InputMapProps } from "@components";
+type formCustomConstructionProps = ({ formControl, values, setValues, setRegister, errors, setErrors, }: {
+    formControl: (name: string) => {
+        register: (regName: string, regValidations?: ValidationRules | undefined) => void;
+        unregister: (regName: string) => void;
+        onChange: (e: any) => void;
+        value: any;
+        invalid: any;
+    };
+    values: {
+        name: string;
+        value?: any;
+    }[];
+    setValues: (values: FormValueType[]) => void;
+    errors: FormErrorType[];
+    setErrors: (errors: FormErrorType[]) => void;
+    setRegister: (registers: FormRegisterType) => void;
+    prefixName?: string;
+}) => ReactNode;
+type ClusterConstruction = {
+    name: string;
+    label: string;
+    tip: string;
+    fields: FormType[];
+    wrap: boolean;
+    min?: number;
+    /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
+    className: string;
+};
+type ConstructionMap = {
+    default: InputProps;
+    check: InputCheckboxProps;
+    currency: InputCurrencyProps;
+    date: InputDateProps;
+    datetime: InputDateTimeProps;
+    time: InputTimeProps;
+    image: InputImageProps;
+    cluster: ClusterConstruction;
+    number: InputNumberProps;
+    radio: InputRadioProps;
+    select: SelectProps;
+    "enter-password": InputPasswordProps;
+    otp: InputOtpProps;
+    map: InputMapProps;
+    custom: formCustomConstructionProps;
+};
+type TypeKeys = keyof ConstructionMap;
+export type WatchContext = {
+    values: Record<string, any>;
+    self: string;
+    prev: WatchAction;
+};
+export type WatchAction = {
+    disabled?: boolean;
+    hidden?: boolean;
+    value?: any;
+    required?: boolean;
+    readonly?: boolean;
+    reset?: boolean;
+};
+export interface FormType<T extends TypeKeys = keyof ConstructionMap> {
+    col?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
+    className?: string;
+    construction?: ConstructionMap[T];
+    type?: T;
+    onHide?: (values: any) => boolean;
+    watch?: (ctx: WatchContext) => WatchAction | undefined;
+}
+export interface formSupervisionProps {
+    title?: string;
+    fields: FormType[];
+    confirmation?: boolean;
+    defaultValue?: object | null;
+    payload?: (values: any) => Promise<object> | object;
+    submitControl: (ApiType & {
+        idb?: never;
+    }) | {
+        idb: {
+            store: string;
+            schema?: DBSchema;
+        };
+    };
+    footerControl?: ({ loading }: {
+        loading: boolean;
+    }) => ReactNode;
+    onSuccess?: (data: any) => void;
+    onError?: (code: number) => void;
+    className?: string;
+}
+export declare function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className, }: formSupervisionProps): React.JSX.Element;
+export {};

package/dist/src/supervision/FormSupervision.component.js

@@ -0,0 +1,168 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSupervisionComponent = FormSupervisionComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const _utils_1 = require("@utils");
+const _components_1 = require("@components");
+function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className = "", }) {
+    const [modal, setModal] = (0, react_1.useState)(false);
+    const [fresh, setFresh] = (0, react_1.useState)(true);
+    const [mapGroups, setMapGroups] = (0, react_1.useState)({});
+    const [watchState, setWatchState] = (0, react_1.useState)({});
+    const watchRef = (0, react_1.useRef)({});
+    const { formControl, setRegister, unregister, unregisterPrefix, values, setValues, errors, setErrors, setDefaultValues, submit, loading, confirm } = (0, _utils_1.useForm)({
+        ...submitControl,
+        payload,
+        confirmation,
+        onSuccess: (data) => {
+            onSuccess?.(data);
+            setModal("success");
+            resetFresh();
+        },
+        onFailed: (code) => {
+            onError?.(code);
+            if (code == 422)
+                confirm.onClose();
+            else
+                setModal("failed");
+        },
+    });
+    const resetFresh = () => {
+        setFresh(false);
+        setTimeout(() => setFresh(true), 300);
+    };
+    (0, react_1.useEffect)(() => {
+        resetFresh();
+    }, [fields]);
+    (0, react_1.useEffect)(() => {
+        if (defaultValue)
+            setDefaultValues(defaultValue);
+        else {
+            setDefaultValues(null);
+            resetFresh();
+        }
+    }, [defaultValue]);
+    // ==============================>
+    // ## Watch: collect watchers from fields
+    // ==============================>
+    const collectWatchers = (fieldList, prefix) => {
+        const result = [];
+        for (const f of fieldList) {
+            const inputType = f.type || "default";
+            const name = prefix ? `${prefix}.${f.construction?.name}` : f.construction?.name || "";
+            if (inputType === "cluster") {
+                const cluster = f.construction;
+                const groupKey = prefix ? `${prefix}.${cluster.name}` : cluster.name;
+                const group = mapGroups[groupKey] || [0];
+                for (const gIndex of group) {
+                    result.push(...collectWatchers(cluster.fields, `${cluster.name}[${gIndex}]`));
+                }
+            }
+            else if (f.watch) {
+                result.push({ name, watch: f.watch, construction: f.construction });
+            }
+        }
+        return result;
+    };
+    // ==============================>
+    // ## Watch: execute watchers on value change
+    // ==============================>
+    (0, react_1.useEffect)(() => {
+        const watchers = collectWatchers(fields);
+        if (watchers.length === 0) {
+            if (Object.keys(watchRef.current).length > 0) {
+                watchRef.current = {};
+                setWatchState({});
+            }
+            return;
+        }
+        const valMap = values.reduce((acc, v) => { acc[v.name] = v.value; return acc; }, {});
+        const nextState = {};
+        const valueUpdates = [];
+        for (const { name, watch, construction } of watchers) {
+            const prev = watchRef.current[name] || {};
+            const action = watch({ values: valMap, self: name, prev });
+            if (!action)
+                continue;
+            nextState[name] = action;
+            if (action.hidden && !prev.hidden)
+                unregister(name);
+            if (action.required !== prev.required) {
+                const baseValidations = Array.isArray(construction?.validations) ? [...construction.validations] : [];
+                const newValidations = action.required ? (baseValidations.includes("required") ? baseValidations : [...baseValidations, "required"]) : baseValidations.filter((v) => v !== "required");
+                setRegister({ name, validations: newValidations });
+            }
+            if (action.reset) {
+                const cur = valMap[name];
+                if (cur != null && cur !== "")
+                    valueUpdates.push({ name, value: "" });
+            }
+            else if (action.value !== undefined && action.value !== valMap[name]) {
+                valueUpdates.push({ name, value: action.value });
+            }
+        }
+        if (JSON.stringify(watchRef.current) !== JSON.stringify(nextState)) {
+            watchRef.current = nextState;
+            setWatchState(nextState);
+        }
+        if (valueUpdates.length > 0) {
+            const merged = [...values];
+            for (const upd of valueUpdates) {
+                const idx = merged.findIndex(v => v.name === upd.name);
+                if (idx >= 0)
+                    merged[idx] = upd;
+                else
+                    merged.push(upd);
+            }
+            setValues(merged);
+        }
+    }, [values, fields, mapGroups]);
+    const generateColClass = (col) => String(col).split(" ").map((c) => (c.includes(":") ? `${c.replace(":", ":col-span-")}` : `col-span-${c}`)).join(" ");
+    const inputMap = {
+        default: _components_1.InputComponent,
+        check: _components_1.InputCheckboxComponent,
+        currency: _components_1.InputCurrencyComponent,
+        date: _components_1.InputDateComponent,
+        datetime: _components_1.InputDatetimeComponent,
+        time: _components_1.InputTimeComponent,
+        number: _components_1.InputNumberComponent,
+        radio: _components_1.InputRadioComponent,
+        select: _components_1.SelectComponent,
+        "enter-password": _components_1.InputPasswordComponent,
+        otp: _components_1.InputOtpComponent,
+        image: _components_1.InputImageComponent,
+        map: _components_1.InputMapComponent,
+        cluster: () => null,
+        custom: () => null,
+    };
+    const renderInput = (form, key, prefix) => {
+        const inputType = form.type || "default";
+        const name = prefix ? `${prefix}.${form.construction?.name}` : form.construction?.name || "input_name";
+        if (form?.onHide?.(values))
+            return null;
+        const ws = watchState[name];
+        if (ws?.hidden)
+            return null;
+        if (inputType === "cluster") {
+            const { name: mapName, fields: innerForms, label, tip, wrap, className, min = 0 } = form.construction;
+            const groupKey = prefix ? `${prefix}.${mapName}` : mapName;
+            const group = mapGroups[groupKey] || Array.from({ length: Math.max(min, 1) }, (_, i) => i);
+            const addGroup = () => setMapGroups((prev) => ({ ...prev, [groupKey]: [...group, group.length > 0 ? Math.max(...group) + 1 : 0] }));
+            const removeGroup = (gIndex) => {
+                setMapGroups((prev) => ({ ...prev, [groupKey]: group.filter((g) => g !== gIndex) }));
+                unregisterPrefix(`${groupKey}[${gIndex}]`);
+            };
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-4", generateColClass(form.col || "12")), children: [group.map((gIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("form-supervision-cluster-item", wrap && "form-supervision-cluster-item-wrapped", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: "input-tip", children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "form-supervision-cluster-grid", children: innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`)) }), group.length > min && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", size: "xs", className: (0, _utils_1.cn)("form-supervision-cluster-remove-btn", wrap && "form-supervision-cluster-remove-btn-wrapped"), onClick: () => removeGroup(gIndex) }))] }, gIndex))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: `Tambah ${label || mapName}`, variant: "outline", size: "sm", onClick: addGroup }) })] }, key));
+        }
+        if (inputType === "custom") {
+            const customRender = form.construction;
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: customRender?.({ formControl, values, setValues, errors, setErrors, setRegister, prefixName: prefix }) }, key));
+        }
+        const Component = inputMap[inputType] || _components_1.InputComponent;
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: (0, jsx_runtime_1.jsx)(Component, { ...form.construction, ...formControl(name), disabled: ws?.disabled, readOnly: ws?.readonly }) }, key));
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("h4", { className: (0, _utils_1.cn)("form-supervision-title", (0, _utils_1.pcn)(className, "title")), children: title }), (0, jsx_runtime_1.jsxs)("form", { className: (0, _utils_1.cn)("form-supervision-base", (0, _utils_1.pcn)(className, "base")), onSubmit: submit, children: [fresh && fields.map((f, i) => renderInput(f, i)), (0, jsx_runtime_1.jsx)("div", { className: "col-span-12", children: footerControl?.({ loading }) || ((0, jsx_runtime_1.jsx)("div", { className: "form-supervision-footer", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { type: "submit", label: "Simpan", icon: free_solid_svg_icons_1.faSave, loading: loading, className: (0, _utils_1.pcn)(className, "submit") }) })) })] }), (0, jsx_runtime_1.jsx)(_components_1.ModalConfirmComponent, { show: confirm.show, onClose: () => confirm.onClose(), icon: free_solid_svg_icons_1.faQuestionCircle, title: "Yakin", submitControl: { onSubmit: () => confirm?.onConfirm(), paint: "primary" }, children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-confirm-text", children: "Yakin semua data sudah benar?" }) }), (0, jsx_runtime_1.jsx)(_components_1.ToastComponent, { show: modal == "failed", onClose: () => setModal(false), title: "Gagal", className: "form-supervision-toast-error header::text-danger", children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-toast-text", children: "Data gagal disimpan, cek data dan koneksi internet lalu coba kembali!" }) }), (0, jsx_runtime_1.jsx)(_components_1.ToastComponent, { show: modal == "success", onClose: () => setModal(false), title: "Berhasil", className: "form-supervision-toast-success header::text-success", children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-toast-text", children: "Data berhasil disimpan!" }) })] }));
+}

package/dist/src/supervision/TableSupervision.component.d.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from "react";
+import { conversion, FetchControlType, ShortcutHandler, UseResourceProps } from "@utils";
+import { FloatingPageProps, FormType, ButtonProps, ModalConfirmProps, TableProps, ControlBarOptionType } from "@components";
+export interface TableSupervisionColumnProps {
+    selector: string;
+    label?: string;
+    width?: string;
+    sortable?: boolean;
+    searchable?: boolean;
+    filterable?: boolean | {
+        type: "text" | "number" | "currency" | "date";
+    } | {
+        type: "select";
+        options: {
+            label: string;
+            value: any;
+        }[];
+    };
+    accessCode?: string;
+    item?: (data: any) => string | ReactNode;
+    tip?: string | ((data: any) => string);
+    exportable?: boolean | "default" | "optional" | "hidden";
+    importable?: boolean;
+}
+export interface TableSupervisionFormProps {
+    fields: string[] | (FormType & {
+        visibility?: "*" | "create" | "update";
+    })[];
+    defaultValue?: (item: Record<string, any> | null) => Promise<Record<string, any>> | Record<string, any>;
+    payload?: (values: any) => Promise<Record<string, any>> | object;
+    modalControl?: Omit<FloatingPageProps, "show" | "onClose" | "children">;
+    contentType?: "application/json" | "multipart/form-data";
+}
+export type TableSupervisionDetailProps = boolean | (string | {
+    label: string;
+    item: string | ((data: Record<string, any>) => ReactNode);
+    conversion?: keyof typeof conversion;
+} | ((data: Record<string, any>) => ReactNode))[] | ((data: Record<string, any>) => void) | {
+    modal?: Omit<FloatingPageProps, "show" | "onClose" | "children">;
+    content?: boolean | (string | {
+        label: string;
+        item: string | ((data: Record<string, any>) => ReactNode);
+        conversion?: keyof typeof conversion;
+    } | ((data: Record<string, any>) => ReactNode))[] | ((data: Record<string, any>) => ReactNode);
+    action?: (data: Record<string, any>) => void;
+};
+export type TableSupervisionProps = {
+    fetchControl: UseResourceProps;
+    title?: string;
+    id?: string;
+    accessCode?: number;
+    urlParam?: boolean | {
+        compressed?: boolean;
+    };
+    columnControl?: string[] | TableSupervisionColumnProps[];
+    formControl?: TableSupervisionFormProps;
+    detailControl?: TableSupervisionDetailProps;
+    actionControl?: boolean | ('EDIT' | 'DELETE' | {
+        label: string;
+        modal?: Omit<ModalConfirmProps, "show" | "onClose">;
+        button?: ButtonProps;
+        shortcut?: {
+            key: string;
+            description: string;
+        };
+    } | ((row: Record<string, any>, setModal: (type: "EDIT" | "DELETE") => void, setDataSelected?: () => void, setShortcut?: (key: string, handler: ShortcutHandler, description?: string) => void) => ReactNode))[];
+    block?: boolean;
+    noIndex?: boolean;
+    actionBulkingControl?: TableProps["actionBulking"];
+    controlBar?: (ControlBarOptionType | "CREATE" | "IMPORT" | "EXPORT" | "PRINT")[];
+    responsiveControl?: {
+        mobile?: TableProps["responsiveControl"] extends {
+            mobile?: infer M;
+        } ? M | boolean : boolean;
+    };
+    importControl?: FetchControlType;
+};
+export declare function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, importControl, }: TableSupervisionProps): import("react").JSX.Element;

package/dist/src/supervision/TableSupervision.component.js

@@ -0,0 +1,273 @@
+"use client";
+"use strict";
+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 _components_1 = require("@components");
+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));
+    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", () => {
+                    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");
+            }
+        }
+        return () => {
+            if (!isSm) {
+                _utils_1.shortcut.unregister("alt+n");
+                _utils_1.shortcut.unregister("alt+i");
+                _utils_1.shortcut.unregister("alt+e");
+            }
+        };
+    }, [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]);
+    const columns = (0, react_1.useMemo)(() => {
+        return columnControl ? columnControl.map((col) => {
+            if (typeof col == "string") {
+                return {
+                    selector: col,
+                    label: col,
+                };
+            }
+            else {
+                return { ...col };
+            }
+        })
+            : data?.columns || data?.data?.at(0) ? Object.keys(data.data[0]).map((col) => {
+                return {
+                    selector: col,
+                    label: col,
+                };
+            })
+                : [];
+    }, [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) => {
+                    if (action == "EDIT") {
+                        return ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEdit, label: "Ubah", 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)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTrash, label: "Hapus", 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)(_components_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));
+                    }
+                    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));
+                    }
+                }) }) }));
+    };
+    // ============================
+    // ## Render detail page 
+    // ============================
+    const detailPage = (0, react_1.useMemo)(() => {
+        if (detailContent === false || detailContent === undefined)
+            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) => {
+                    if (typeof column === "string") {
+                        return ((0, jsx_runtime_1.jsx)(_components_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)(_components_1.TypographyColumnComponent, { title: colObj.label, content: content }, key));
+                    }
+                    else {
+                        return column?.(selected);
+                    }
+                }) : typeof detailContent === "function" ? detailContent(selected) : columns?.map((column, key) => ((0, jsx_runtime_1.jsx)(_components_1.TypographyColumnComponent, { title: column.label, content: selected[column.selector] }, key)))) }) }));
+    }, [selected, detailContent, columns]);
+    // ============================
+    // ## 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),
+                type: "text",
+                visibility: "*"
+            } : {
+                ...form,
+                visibility: form.visibility || "*"
+            };
+        }) : [];
+    }, [formControl]);
+    const formPage = (0, react_1.useMemo)(() => {
+        return ((0, jsx_runtime_1.jsx)(_components_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) => {
+            return {
+                ...item,
+                action: renderTableAction(actionControl, item)
+            };
+        }) || [];
+    }, [actionControl, data]);
+    (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)(_components_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)(_components_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)(_components_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)(_components_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)(_components_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)(_components_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) => {
+                                    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)(_components_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)(_components_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)(_components_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)(_components_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)(_components_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)(_components_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)(_components_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)(_components_1.ModalConfirmComponent, { show: !!toggle[`MODAL_DELETE_${toggleKey}`], onClose: () => setToggle(`MODAL_DELETE_${toggleKey}`, false), icon: free_regular_svg_icons_1.faQuestionCircle, title: `Menghapus Data?`, 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();
+                            setToggle(`MODAL_DELETE_${toggleKey}`, false);
+                        },
+                    }, 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)(_components_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));
+                })] }) }));
+}

package/dist/src/table/ControlBar.component.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { ApiFilterType } from '@utils';
+import { FilterColumnOption } from '@components';
+export type ControlBarOptionType = "SEARCH" | "SEARCHABLE" | "FILTER" | "SELECTABLE" | "REFRESH" | ReactNode;
+export interface ControlBarProps {
+    id?: string;
+    options?: ControlBarOptionType[];
+    className?: string;
+    search?: string;
+    onSearch?: (searchable: string) => void;
+    searchableOptions?: {
+        label: string | ReactNode;
+        selector: string;
+    }[];
+    searchable?: string[];
+    onSearchable?: (searchable: string[]) => void;
+    selectableOptions?: {
+        label: string | ReactNode;
+        selector: string;
+    }[];
+    selectable?: string[];
+    onSelectable?: (searchable: string[]) => void;
+    sortableOptions?: {
+        label: string | ReactNode;
+        selector: string;
+    }[];
+    sort?: string[];
+    onSort?: (sort: string[]) => void;
+    filterableColumns?: FilterColumnOption[];
+    onFilter?: (filters: ApiFilterType[]) => void;
+    filter?: ApiFilterType[];
+    onRefresh?: () => void;
+}
+export declare function ControlBarComponent({ id, options, className, search, onSearch, searchableOptions, searchable, onSearchable, selectableOptions, selectable, onSelectable, sortableOptions, sort, onSort, filterableColumns, onFilter, filter, onRefresh }: ControlBarProps): import("react").JSX.Element;