@skalfa/skalfa-app 1.0.0

package/components/base.components/supervision/TableSupervision.component.tsx

@@ -0,0 +1,697 @@
+"use client"
+
+import { ReactNode, Suspense, useEffect, useMemo } from "react";
+import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
+import { faEdit, faFileExcel, faFilePdf, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { ApiType, cn, conversion, FetchControlType, registry, shortcut, ShortcutHandler, UseResourceIdb, UseResourceProps, useResponsive, useTable } from "@utils";
+import { useToggleContext } from "@contexts";
+import { FloatingPageComponent, FloatingPageProps, ButtonComponent, IconButtonComponent, TableColumnType, TableComponent, FormSupervisionComponent, FormType, ModalConfirmComponent, TypographyColumnComponent, ButtonProps, ModalConfirmProps, TableProps, ControlBarOptionType, BottomSheetComponent, SwipeActionType } from "@components";
+
+const ExportExcel = registry.get("ExportExcel");
+const ImportExcel = registry.get("ImportExcel");
+
+
+
+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 TableSupervisionProps = {
+  fetchControl     :  UseResourceProps;
+  title           ?:  string;
+  id              ?:  string;
+  accessCode      ?:  number;
+  urlParam        ?:  boolean | { compressed    ?:  boolean }
+  onRowClick      ?:  (data: Record<string, any>) => void;
+  columnControl   ?:  string[] | TableSupervisionColumnProps[];
+  formControl     ?:  TableSupervisionFormProps;
+  detailControl   ?:  boolean 
+    | (
+      | string 
+      | { label: string, item: string | ((data: Record<string, any>) => ReactNode) }
+      | ((data: Record<string, any>) => ReactNode)
+    )[] 
+    | ((data: Record<string, any>) => ReactNode);
+  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                 ?:  boolean | {
+      item                 ?:  (item: Record<string, any>, key: number) => ReactNode,
+      leftActionControl    ?:  Omit<SwipeActionType, "onAction"> & { onAction?: (item: Record<string, any>, key?: number) => void },
+      rightActionControl   ?:  Omit<SwipeActionType, "onAction"> & { onAction?: (item: Record<string, any>, key?: number) => void },
+    }
+  };
+  importControl        ?:  FetchControlType;
+};
+
+
+
+export function TableSupervisionComponent({
+  title,
+  id,
+  fetchControl,
+  columnControl,
+  formControl,
+  onRowClick,
+  detailControl,
+  actionControl,
+  actionBulkingControl,
+  block,
+  controlBar,
+  noIndex,
+  responsiveControl,
+  urlParam,
+  importControl,
+}: TableSupervisionProps) {
+  const { tableKey, tableControl, data, selected, setSelected, checks, setChecks, reset, focus, setFocus }  =  useTable(fetchControl, id, title, (urlParam || true))
+  const { setToggle, toggle }                                                                               =  useToggleContext()
+  const { isSm }                                                                                            =  useResponsive();
+
+  const toggleKey = useMemo(() => conversion.strSnake(tableKey).toUpperCase(), [tableKey])
+
+
+  useEffect(() => {
+    if(data?.data?.length && !toggle[`MODAL_DELETE_${toggleKey}`] && !toggle[`MODAL_DELETE_${toggleKey}`] && !toggle[`MODAL_SHOW_${toggleKey}`]) {
+      shortcut.register("arrowdown", () => {
+        const max = data?.data?.length - 1;
+        setFocus(focus == null ? 0 : focus >= max ? max : (focus + 1))
+      }, "Pilih data kebawah")
+
+      shortcut.register("arrowup", () => {
+        setFocus(focus == null ? 0 : focus <= 0 ? 0 : (focus - 1))
+      }, "Pilih data keatas")
+
+      if(focus != null) {
+        shortcut.register("delete", () => {
+          setSelected(data?.data?.at(focus))
+          setToggle(`MODAL_DELETE_${toggleKey}`)
+        }, "Delete data yang dipilih")
+
+        shortcut.register(" ", () => {
+          setSelected(data?.data?.at(focus))
+          setToggle(`MODAL_FORM_${toggleKey}`)
+        }, "Edit data yang dipilih")
+  
+        shortcut.register("enter", () => {
+          setSelected(data?.data?.at(focus))
+          setToggle(`MODAL_SHOW_${toggleKey}`)
+        }, "Detail data yang dipilih")
+
+        shortcut.register("escape", () => {
+          setFocus(null)
+        }, "Kembali")
+      }
+    }
+
+    return () => {
+      shortcut.unregister("arrowdown")
+      shortcut.unregister("arrowup")
+      shortcut.unregister("delete")
+      shortcut.unregister(" ")
+      shortcut.unregister("enter")
+      shortcut.unregister("escape")
+    }
+  }, [data?.data, actionControl, focus, toggle[`MODAL_DELETE_${toggleKey}`], toggle[`MODAL_DELETE_${toggleKey}`], toggle[`MODAL_SHOW_${toggleKey}`]])
+  
+
+  // ============================
+  // ## Column preparation
+  // ============================
+  const columns = useMemo(() => {
+    return columnControl?.length ? 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             :  TableSupervisionProps["actionControl"],
+    item               ?:  Record<string,                          any>,
+    options            ?:  {size?: ButtonProps['size'], className?: string}
+  ) => {
+    return (
+      <>
+        <div className={cn("flex items-center gap-2", options?.className)}>
+          {(Array.isArray(actions) ? actions : (actions || actions == undefined) ? ['EDIT', "DELETE"] : [])?.map((action, key) => {
+            if(action == "EDIT") {
+              return (
+                <ButtonComponent
+                  key={key}
+                  icon={faEdit}
+                  label={"Ubah"}
+                  variant="outline"
+                  paint="warning"
+                  size={options?.size || "xs"}
+                  rounded
+                  onClick={() => {
+                    setToggle(`MODAL_FORM_${toggleKey}`);
+                    item && setSelected?.(item);
+                  }}
+                />
+              )
+            }
+
+            if(action == "DELETE") {
+              return (
+                <ButtonComponent
+                  key={key}
+                  icon={faTrash}
+                  label={"Hapus"}
+                  variant="outline"
+                  paint="danger"
+                  size={options?.size || "xs"}
+                  rounded
+                  onClick={() => {
+                    setToggle(`MODAL_DELETE_${toggleKey}`);
+                    item && setSelected?.(item);
+                  }}
+                />
+              )
+            }
+
+            if(typeof action == "object") {
+              <ButtonComponent
+                key={`action-object-${key}`}
+                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_${conversion.strSnake(action?.label).toUpperCase()}_${toggleKey}`);
+                    item && setSelected?.(item);
+                  }
+                }}
+                {...action.button}
+              />
+            }
+
+            if(typeof action == "function") {
+              return (
+                <span key={`action-fn-${key}`}>
+                  {action(item || {}, (type: "EDIT" | "DELETE") => {
+                    if(type == "EDIT") {
+                      setToggle(`MODAL_FORM_${toggleKey}`);
+                      item && setSelected?.(item);
+                    } 
+                    
+                    if (type == "DELETE") {
+                      setToggle(`MODAL_DELETE_${toggleKey}`);
+                      item && setSelected?.(item);
+                    }
+                  })}
+                </span>
+              )
+            }
+            
+            return <span key={`action-default-${key}`}></span>;
+          })}
+        </div>
+      </>
+    )
+  }
+
+
+  // ============================
+  // ## Data table preparation
+  // ============================
+  const dataTables = useMemo(() => {
+    return data?.data?.map((row: object) => {
+      return {
+        ...row,
+        action: renderTableAction(actionControl, row),
+      };
+    });
+  }, [actionControl, data]);
+
+
+  // ============================
+  // ## Render detail page 
+  // ============================
+  const detailPage = useMemo(() => {
+    return (
+      <div className="p-4">
+        <div className={cn(
+          "flex flex-col gap-y-4", 
+        )}>
+          {!!selected && (typeof detailControl === "object" && detailControl?.length ? detailControl?.map((column, key) => {
+            if (typeof column === "string") {
+              return (<TypographyColumnComponent
+                key={key}
+                title={columns?.find((c) => c.selector == column)?.label} 
+                content={selected[column]}
+              />)
+            } else if (typeof column === "object") {
+              return (<TypographyColumnComponent
+                key={key}
+                title={column?.label} 
+                content={typeof column?.item === "string" ? selected[column?.item] : column?.item(selected)}
+              />)
+            } else {
+              return column?.(selected)
+            }
+          }) : typeof detailControl == "function" ? detailControl(selected) : columns?.map((column, key) => (
+            <TypographyColumnComponent
+              key={key}
+              title={column.label} 
+              content={selected[column.selector]}
+            />
+          )))}
+        </div>
+      </div>
+    )
+  }, [selected, detailControl]);
+
+
+
+
+  // ============================
+  // ## Form preparation
+  // ============================
+  const fields = useMemo(() => {
+    return formControl?.fields?.length ? formControl?.fields.map((form) => {
+      return typeof form === "string" ? {
+        col           :  12,
+        type          :  "text",
+        construction  :  {
+          name   :  form,
+          label  :  form,
+        },
+      } : { ...form };
+    }) : data?.forms || data?.columns || columnControl?.map((col) => {
+      return {
+        col           :  12,
+        type          :  "text",
+        construction  :  {
+          name         :  typeof col == "string" ? col                                 :  col?.selector,
+          label        :  typeof col == "string" ? col                                 :  col?.label,
+          placeholder  :  `Masukkan ${ typeof col == "string" ? col : col?.label}...`,
+        },
+      };
+    }) || (data?.data?.at(0) ? Object.keys(data.data[0]).map((col) => {
+        return {
+          col           :  12,
+          type          :  "text",
+          construction  :  {
+            name         :  col,
+            label        :  col,
+            placeholder  :  `Masukkan ${col}...`,
+          },
+        };
+      })
+    : []);
+  }, [formControl, data]);
+
+
+
+  // ============================
+  // ## Render form page 
+  // ============================
+  const formPage = useMemo(async () => {
+    return (
+      <FormSupervisionComponent
+        submitControl={(fetchControl as ApiType).path ? { 
+            path: `${(fetchControl as ApiType).path}/${(selected as { id: number })?.id || "" }`,
+            method: !(selected as { id: number })?.id ? "POST" : "PUT", 
+          } : (fetchControl as ApiType).url ? { 
+            url: `${(fetchControl as ApiType).url}/${(selected as { id: number })?.id || ""}`,
+            method: !(selected as { id: number })?.id ? "POST" : "PUT", 
+          } : { idb: (fetchControl as ({ idb: UseResourceIdb }))?.idb }
+        }
+        fields={fields as FormType[]}
+        defaultValue={formControl?.defaultValue ? await formControl?.defaultValue(selected || null) : selected}
+        payload={formControl?.payload}
+        onSuccess={() => {
+          reset();
+          setToggle(`MODAL_FORM_${toggleKey}`, false);
+        }}
+      />
+    )
+  }, [selected, fetchControl, formControl]);
+
+
+
+  useEffect(() => {
+    if(toggle[`REFRESH_${toggleKey}`] != undefined) reset();
+  }, [toggle[`REFRESH_${toggleKey}`]]);
+
+
+  return (
+    <>
+      <Suspense fallback={<div>Loading...</div>}>
+        {title && <h1 className="text-lg lg:text-xl font-bold mb-2 lg:mb-4">{title}</h1>}
+      
+
+        <TableComponent
+          id={tableKey}
+          controlBar={controlBar?.map((cb) => {
+              if (cb == "CREATE") {
+                if (isSm) return 
+                return (
+                  <div className="pl-1.5 pr-3 mr-2 border-r" key="button-add">
+                    <ButtonComponent
+                      icon={faPlus}
+                      label="Tambah Data"
+                      size="sm"
+                      onClick={() => {
+                        setToggle(`MODAL_FORM_${toggleKey}`)
+                        setSelected(null)
+                      }}
+                    />
+                  </div>
+                )
+              }
+
+              if (cb == "IMPORT") {
+                return (
+                  <div className="px-1.5 rounded-md relative" key={"import"}>
+                    <ButtonComponent
+                      icon={faFileExcel}
+                      label="Import"
+                      variant="outline"
+                      className="!text-foreground"
+                      onClick={() => setToggle(`MODAL_IMPORT_${toggleKey}`)}
+                      size="sm"
+                    />
+                  </div>
+                )
+              }
+
+              if (cb == "EXPORT") {
+                return (
+                  <div className="px-1.5 rounded-md relative" key={"export-excel"}>
+                    <ButtonComponent
+                      icon={faFileExcel}
+                      label="Export"
+                      variant="outline"
+                      className="!text-foreground"
+                      onClick={() => setToggle(`MODAL_EXPORT_${toggleKey}`)}
+                      size="sm"
+                    />
+                  </div>
+                )
+              }
+
+              if (cb == "PRINT") {
+                return (
+                  <div className="px-1.5 rounded-md relative" key={"export-pdf"}>
+                    <ButtonComponent
+                      icon={faFilePdf}
+                      label="Cetak"
+                      variant="outline"
+                      className="!text-foreground"
+                      onClick={() => setToggle(`MODAL_PRINT_${toggleKey}`)}
+                      size="sm"
+                    />
+                  </div>
+                )
+              }
+
+              return cb
+            }) || [
+            ...(!isSm ? [
+              <div className="pl-1.5 pr-3 mr-2 border-r" key="button-add">
+                <ButtonComponent
+                  icon={faPlus}
+                  label="Tambah Data"
+                  size="sm"
+                  onClick={() => {
+                    setToggle(`MODAL_FORM_${toggleKey}`)
+                    setSelected(null)
+                  }}
+                />
+              </div>
+            ] : []), 
+            "SEARCH", 
+            ...(columns?.filter((c) => !!(c as { filterable?: any }).filterable)?.length ? ["FILTER"] : []),
+            ...(columns?.filter((c) => !!(c as { sortable?: any }).sortable)?.length ? ["SORT"] : []),
+            "SELECTABLE", "REFRESH",
+          ]}
+          columns={columns as TableColumnType[]}
+          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 == true ? {
+              leftActionControl: (Array.isArray(actionControl) ? actionControl : (actionControl || actionControl == undefined) ? ['EDIT', "DELETE"] : []).includes('EDIT') ? {
+                icon: faEdit,
+                onAction: (item) => {
+                  setToggle(`MODAL_FORM_${toggleKey}`);
+                  item && setSelected?.(item);
+                }
+              } : undefined,
+              rightActionControl: (Array.isArray(actionControl) ? actionControl : (actionControl || actionControl == undefined) ? ['EDIT', "DELETE"] : []).includes('DELETE') ? {
+                icon: faTrash,
+                onAction: (item) => {
+                  setToggle(`MODAL_DELETE_${toggleKey}`);
+                  item && setSelected?.(item);
+                }
+              } : undefined
+            } : responsiveControl?.mobile || undefined,
+          } : undefined}
+          {...tableControl}
+        />
+
+        <IconButtonComponent
+          icon={faPlus}
+          className="fixed bottom-2 left-2 w-12 h-12 md:hidden"
+          size="lg"
+          rounded
+          onClick={() => {
+            setToggle(`MODAL_FORM_${toggleKey}`)
+            setSelected(null)
+          }}
+        />
+
+
+        {isSm ? (
+          <BottomSheetComponent
+            show={!!toggle[`MODAL_SHOW_${toggleKey}`]}
+            onClose={() => setToggle(`MODAL_SHOW_${toggleKey}`, false)}
+            className="bg-background"
+            footer={renderTableAction(actionControl, undefined, {className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md"})}
+            size="98vh"
+          >
+            {detailPage}
+          </BottomSheetComponent>
+        ) : (
+          <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"})}
+          >
+            {detailPage}
+          </FloatingPageComponent>
+        )}
+
+
+        {isSm ? (
+          <BottomSheetComponent
+            show={!!toggle[`MODAL_FORM_${toggleKey}`]}
+            onClose={() => setToggle(`MODAL_FORM_${toggleKey}`, false)}
+            className={cn("bg-background", formControl?.modalControl?.className)}
+            size="98vh"
+          >
+            <div className="p-4 h-[110vh]">
+              {formPage}
+            </div>
+          </BottomSheetComponent>
+        ) : (
+          <FloatingPageComponent
+            show={!!toggle[`MODAL_FORM_${toggleKey}`]}
+            onClose={() => setToggle(`MODAL_FORM_${toggleKey}`, false)}
+            title={!!selected ? "Ubah Data" : "Tambah Data"}
+            className={cn("bg-background", formControl?.modalControl?.className)}
+          >
+            <div className="p-4">
+              {formPage}
+            </div>
+          </FloatingPageComponent>
+        )}
+
+
+        {ExportExcel && (
+          <FloatingPageComponent
+            show={!!toggle[`MODAL_EXPORT_${toggleKey}`]}
+            onClose={() => setToggle(`MODAL_EXPORT_${toggleKey}`, false)}
+            title="Export Ke Excel"
+            className="bg-background md:w-[1200px] max-w-[1200px]"
+          >
+            <ExportExcel 
+              fetchControl={fetchControl as FetchControlType} 
+              filename={"Export - " + title}
+              columnControl={columns?.map((cc: TableSupervisionColumnProps) => ({
+                label: cc.label || "",
+                selector: cc.selector || "",
+                status: cc.exportable === false ? "hidden" : cc.exportable === true ? "default" : typeof cc.exportable === "string" ? cc.exportable : undefined,
+              }))} 
+            />
+          </FloatingPageComponent>
+        )}
+
+
+        {ImportExcel && (
+          <FloatingPageComponent
+            show={!!toggle[`MODAL_IMPORT_${toggleKey}`]}
+            onClose={() => setToggle(`MODAL_IMPORT_${toggleKey}`, false)}
+            title="Import Dari Excel"
+            className="bg-background md:w-[1200px] max-w-[1200px]"
+          >
+            <ImportExcel 
+              submitControl={importControl}
+              fetchControl={
+                (fetchControl as ApiType).path ? {
+                  path: (fetchControl as ApiType).path,
+                } : undefined
+              }
+              columnControl={columns?.filter((cc: TableSupervisionColumnProps) => cc.importable !== false).map((cc: TableSupervisionColumnProps) => ({
+                label: cc.label || "",
+                selector: cc.selector || "",
+              }))} 
+            />
+          </FloatingPageComponent>
+        )}
+
+
+        {/* <FloatingPageComponent
+          show={!!toggle[`MODAL_PRINT_${toggleKey}`]}
+          onClose={() => setToggle(`MODAL_PRINT_${toggleKey}`, false)}
+          title="Print PDF"
+          className="bg-background md:w-[1200px] max-w-[1200px]"
+        >
+          <PrintTable 
+            fetchControl={fetchControl} 
+            columnControl={columns?.map((cc) => ({
+              label: cc.label || "",
+              selector: cc.selector || "",
+            }))} 
+            title={"Print - " + title}
+          />
+        </FloatingPageComponent> */}
+
+
+        <ModalConfirmComponent
+          show={!!toggle[`MODAL_DELETE_${toggleKey}`]}
+          onClose={() => setToggle(`MODAL_DELETE_${toggleKey}`, false)}
+          icon={faQuestionCircle}
+          title={`Menghapus Data?`}
+          submitControl={{
+            onSubmit: {
+              ...((fetchControl as ApiType).path 
+                ? {path: `${(fetchControl as ApiType).path}/${(selected as { id: number })?.id || ""}`} 
+                : (fetchControl as ApiType).url ? {url: `${(fetchControl as ApiType).url}/${(selected as { id: number })?.id || ""}`}
+                : { idb: { ...(fetchControl as ({ idb: UseResourceIdb }))?.idb, id: (selected as { id: number })?.id || "" }}
+              ),
+              method: "DELETE",
+            },
+            onSuccess: () => {
+              reset();
+              setToggle(`MODAL_DELETE_${toggleKey}`, false);
+            },
+          }}
+        >
+          {columns?.at(0)?.selector && selected ? (
+            <p className="px-2 pb-2 text-sm text-center">Yakin menghapus <span className="font-semibold">&quot;{selected[columns?.at(0)?.selector || ""]}&quot;</span>?</p>
+          ) : (
+            <p className="px-2 pb-2 text-sm text-center">Yakin yang dihapus sudah benar?</p>
+          )}
+        </ModalConfirmComponent>
+
+        {actionControl && Array.isArray(actionControl) && actionControl.filter((ac) => typeof ac == "object")?.map((ac, acKey) => {
+          const submitControl = ac.modal?.submitControl?.onSubmit as ApiType;
+          return (
+            <ModalConfirmComponent
+              key={acKey}
+              show={!!toggle[`MODAL_${conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`]}
+              onClose={() => setToggle(`MODAL_${conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`, false)}
+              icon={ac?.modal?.icon || faQuestionCircle}
+              title={ac?.modal?.title || ac.label}
+              submitControl={{
+                onSubmit: {
+                  ...(submitControl?.path 
+                    ? {path: `${submitControl?.path}/${(selected as { id: number })?.id || ""}`} 
+                    : {url: `${submitControl?.url}/${(selected as { id: number })?.id || ""}`}
+                  ),
+                  method: submitControl?.method || "POST",
+                },
+                onSuccess: () => {
+                  reset();
+                  setToggle(`MODAL_${conversion.strSnake(ac.label).toUpperCase()}_${conversion.strSnake(tableKey).toUpperCase()}`, false);
+                  setSelected(null)
+                  ac.modal?.submitControl?.onSuccess?.()
+                },
+              }}
+            >{ac.modal?.children}</ModalConfirmComponent>
+          )
+        })}
+      </Suspense>
+    </>
+  );
+}