@skalfa/skalfa-app 1.0.3 → 1.0.6

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

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