@devtable/settings-form 8.56.0 → 8.57.1

package/dist/settings-form.es.js

@@ -1,17 +1,16 @@
-import * as K from "/Users/leto/Merico/merico-dev/table/node_modules/react/jsx-runtime.js";
-import { Box as v, TextInput as z, Divider as V, Group as w, NumberInput as ie, PasswordInput as L, Button as b, Modal as O, Stack as B, Alert as oe, SegmentedControl as ae, useMantineTheme as se, Tooltip as ce, Text as I, LoadingOverlay as H, Table as $, Select as le, Switch as de } from "@mantine/core";
+import { Box as v, TextInput as z, Divider as V, Group as w, NumberInput as ie, PasswordInput as F, Button as b, Modal as R, Stack as B, Alert as oe, SegmentedControl as ae, useMantineTheme as se, Tooltip as ce, Text as L, LoadingOverlay as H, Table as $, Select as le, Switch as de } from "@mantine/core";
 import { showNotification as _, updateNotification as S } from "@mantine/notifications";
-import * as x from "react";
-import F, { useEffect as G, forwardRef as J, useState as Z, useMemo as ee } from "react";
+import * as O from "react";
+import E, { useEffect as G, forwardRef as J, useState as ee, useMemo as te } from "react";
 import { Recycle as ue, AlertCircle as pe, PlaylistAdd as Q, Trash as W, Edit as ge } from "tabler-icons-react";
 import me from "axios";
 import he from "crypto-js";
 import fe from "lodash";
 import { useForm as q, Controller as m } from "react-hook-form";
+import * as X from "../../node_modules/react/jsx-runtime.js";
 import { useBoolean as be, useRequest as T } from "ahooks";
-import we, { loader as U } from "@monaco-editor/react";
-import { useModals as E, closeAllModals as Se } from "@mantine/modals";
-const C = K.Fragment, e = K.jsx, d = K.jsxs;
+import we, { loader as N } from "@monaco-editor/react";
+import { useModals as j, closeAllModals as Se } from "@mantine/modals";
 function ze(t) {
   t = t || {};
   const n = Object.keys(t).sort(), r = [];
@@ -40,7 +39,7 @@ const f = {
   getAuthentication(t) {
     if (!this.app_id || !this.app_secret)
       return;
-    const n = (/* @__PURE__ */ new Date()).getTime().toString();
+    const n = new Date().getTime().toString();
     return {
       app_id: this.app_id,
       nonce_str: n,
@@ -69,7 +68,7 @@ const f = {
     };
   }
 };
-function j(t) {
+function M(t) {
   f.baseURL !== t.apiBaseURL && (f.baseURL = t.apiBaseURL), t.app_id && (f.app_id = t.app_id), t.app_secret && (f.app_secret = t.app_secret);
 }
 const ve = {
@@ -91,13 +90,7 @@ const ve = {
       pagesize: 100
     }
   }),
-  /**
-   * get current account
-   */
   get: async () => await f.getRequest("GET")("/account/get", {}),
-  /**
-   * update current account
-   */
   update: async (t, n) => {
     const r = {
       name: t,
@@ -105,9 +98,6 @@ const ve = {
     };
     return await f.getRequest("PUT")("/account/update", r);
   },
-  /**
-   * change current account's password
-   */
   changepassword: async (t, n) => {
     const r = {
       old_password: t,
@@ -123,7 +113,7 @@ const ve = {
   }),
   edit: async (t) => (t.reset_password || (t.new_password = void 0), await f.getRequest("PUT")("/account/edit", t)),
   delete: async (t) => {
-    if (t)
+    if (!!t)
       return f.getRequest("POST")("/account/delete", {
         id: t
       });
@@ -147,7 +137,7 @@ const ve = {
     role_id: n
   }),
   delete: async (t) => {
-    if (t)
+    if (!!t)
       return f.getRequest("POST")("/api/key/delete", {
         id: t
       });
@@ -187,7 +177,7 @@ const ve = {
   button: {
     size: "xs"
   }
-};
+}, C = X.Fragment, e = X.jsx, d = X.jsxs;
 function ye({
   submit: t,
   styles: n = D,
@@ -212,47 +202,130 @@ function ye({
   });
   return G(() => {
     s("type", r);
-  }, [s, r]), /* @__PURE__ */ e(v, { mx: "auto", children: /* @__PURE__ */ d("form", { onSubmit: o(t), children: [
-    /* @__PURE__ */ e(m, { name: "key", control: i, render: ({
-      field: a
-    }) => /* @__PURE__ */ e(z, { mb: n.spacing, size: n.size, required: !0, label: "Name", placeholder: "A unique name", ...a }) }),
-    /* @__PURE__ */ e(V, { label: "Connection Info", labelPosition: "center" }),
-    /* @__PURE__ */ d(w, { grow: !0, children: [
-      /* @__PURE__ */ e(m, { name: "config.host", control: i, render: ({
-        field: a
-      }) => /* @__PURE__ */ e(z, { mb: n.spacing, size: n.size, required: !0, label: "Host", sx: {
-        flexGrow: 1
-      }, ...a }) }),
-      /* @__PURE__ */ e(m, { name: "config.port", control: i, render: ({
-        field: a
-      }) => /* @__PURE__ */ e(ie, { mb: n.spacing, size: n.size, required: !0, label: "Port", hideControls: !0, sx: {
-        width: "8em"
-      }, ...a }) })
-    ] }),
-    /* @__PURE__ */ e(m, { name: "config.username", control: i, render: ({
-      field: a
-    }) => /* @__PURE__ */ e(z, { mb: n.spacing, size: n.size, required: !0, label: "Username", ...a }) }),
-    /* @__PURE__ */ e(m, { name: "config.password", control: i, render: ({
-      field: a
-    }) => /* @__PURE__ */ e(L, { mb: n.spacing, size: n.size, required: !0, label: "Password", ...a }) }),
-    /* @__PURE__ */ e(m, { name: "config.database", control: i, render: ({
-      field: a
-    }) => /* @__PURE__ */ e(z, { mb: n.spacing, size: n.size, required: !0, label: "Database", ...a }) }),
-    /* @__PURE__ */ e(w, { position: "right", mt: n.spacing, children: /* @__PURE__ */ e(b, { type: "submit", size: n.button.size, children: "Save" }) })
-  ] }) });
+  }, [s, r]), /* @__PURE__ */ e(v, {
+    mx: "auto",
+    children: /* @__PURE__ */ d("form", {
+      onSubmit: o(t),
+      children: [/* @__PURE__ */ e(m, {
+        name: "key",
+        control: i,
+        render: ({
+          field: a
+        }) => /* @__PURE__ */ e(z, {
+          mb: n.spacing,
+          size: n.size,
+          required: !0,
+          label: "Name",
+          placeholder: "A unique name",
+          ...a
+        })
+      }), /* @__PURE__ */ e(V, {
+        label: "Connection Info",
+        labelPosition: "center"
+      }), /* @__PURE__ */ d(w, {
+        grow: !0,
+        children: [/* @__PURE__ */ e(m, {
+          name: "config.host",
+          control: i,
+          render: ({
+            field: a
+          }) => /* @__PURE__ */ e(z, {
+            mb: n.spacing,
+            size: n.size,
+            required: !0,
+            label: "Host",
+            sx: {
+              flexGrow: 1
+            },
+            ...a
+          })
+        }), /* @__PURE__ */ e(m, {
+          name: "config.port",
+          control: i,
+          render: ({
+            field: a
+          }) => /* @__PURE__ */ e(ie, {
+            mb: n.spacing,
+            size: n.size,
+            required: !0,
+            label: "Port",
+            hideControls: !0,
+            sx: {
+              width: "8em"
+            },
+            ...a
+          })
+        })]
+      }), /* @__PURE__ */ e(m, {
+        name: "config.username",
+        control: i,
+        render: ({
+          field: a
+        }) => /* @__PURE__ */ e(z, {
+          mb: n.spacing,
+          size: n.size,
+          required: !0,
+          label: "Username",
+          ...a
+        })
+      }), /* @__PURE__ */ e(m, {
+        name: "config.password",
+        control: i,
+        render: ({
+          field: a
+        }) => /* @__PURE__ */ e(F, {
+          mb: n.spacing,
+          size: n.size,
+          required: !0,
+          label: "Password",
+          ...a
+        })
+      }), /* @__PURE__ */ e(m, {
+        name: "config.database",
+        control: i,
+        render: ({
+          field: a
+        }) => /* @__PURE__ */ e(z, {
+          mb: n.spacing,
+          size: n.size,
+          required: !0,
+          label: "Database",
+          ...a
+        })
+      }), /* @__PURE__ */ e(w, {
+        position: "right",
+        mt: n.spacing,
+        children: /* @__PURE__ */ e(b, {
+          type: "submit",
+          size: n.button.size,
+          children: "Save"
+        })
+      })]
+    })
+  });
 }
 const ke = ({
   value: t,
   onChange: n
-}) => /* @__PURE__ */ e(v, { sx: {
-  position: "relative"
-}, children: /* @__PURE__ */ e(we, { height: "500px", defaultLanguage: "javascript", value: t, onChange: (i) => {
-  i && n(i);
-}, theme: "vs-dark", options: {
-  minimap: {
-    enabled: !1
-  }
-} }) }), Y = J(({
+}) => /* @__PURE__ */ e(v, {
+  sx: {
+    position: "relative"
+  },
+  children: /* @__PURE__ */ e(we, {
+    height: "500px",
+    defaultLanguage: "javascript",
+    value: t,
+    onChange: (i) => {
+      !i || n(i);
+    },
+    theme: "vs-dark",
+    options: {
+      minimap: {
+        enabled: !1
+      }
+    }
+  })
+}), Z = J(({
   value: t,
   onChange: n,
   label: r,
@@ -261,33 +334,62 @@ const ke = ({
   styles: o
 }, a) => {
   const [c, {
-    setTrue: u,
+    setTrue: p,
     setFalse: g
-  }] = be(), [l, p] = Z(t), h = () => {
-    g(), n(l);
+  }] = be(), [h, u] = ee(t), l = () => {
+    g(), n(h);
   }, A = () => {
-    g(), p(t);
+    g(), u(t);
   }, k = () => {
-    p(s);
+    u(s);
   };
   return G(() => {
-    p(t);
-  }, [t]), /* @__PURE__ */ d(C, { children: [
-    /* @__PURE__ */ e(b, { variant: "filled", size: o.button.size, onClick: u, sx: {
-      flexGrow: 1
-    }, children: r }),
-    /* @__PURE__ */ e(O, { size: 800, title: i, opened: c, onClose: g, closeOnClickOutside: !1, withCloseButton: !1, children: c && /* @__PURE__ */ d(B, { children: [
-      /* @__PURE__ */ e(ke, { value: l, onChange: p }),
-      /* @__PURE__ */ d(w, { position: "apart", children: [
-        /* @__PURE__ */ e(b, { onClick: k, color: "red", leftIcon: /* @__PURE__ */ e(ue, { size: 20 }), children: "Rest" }),
-        /* @__PURE__ */ d(w, { position: "right", children: [
-          /* @__PURE__ */ e(b, { onClick: A, variant: "subtle", children: "Cancel" }),
-          /* @__PURE__ */ e(b, { onClick: h, children: "OK" })
-        ] })
-      ] })
-    ] }) })
-  ] });
-}), R = {
+    u(t);
+  }, [t]), /* @__PURE__ */ d(C, {
+    children: [/* @__PURE__ */ e(b, {
+      variant: "filled",
+      size: o.button.size,
+      onClick: p,
+      sx: {
+        flexGrow: 1
+      },
+      children: r
+    }), /* @__PURE__ */ e(R, {
+      size: 800,
+      title: i,
+      opened: c,
+      onClose: g,
+      closeOnClickOutside: !1,
+      withCloseButton: !1,
+      children: c && /* @__PURE__ */ d(B, {
+        children: [/* @__PURE__ */ e(ke, {
+          value: h,
+          onChange: u
+        }), /* @__PURE__ */ d(w, {
+          position: "apart",
+          children: [/* @__PURE__ */ e(b, {
+            onClick: k,
+            color: "red",
+            leftIcon: /* @__PURE__ */ e(ue, {
+              size: 20
+            }),
+            children: "Rest"
+          }), /* @__PURE__ */ d(w, {
+            position: "right",
+            children: [/* @__PURE__ */ e(b, {
+              onClick: A,
+              variant: "subtle",
+              children: "Cancel"
+            }), /* @__PURE__ */ e(b, {
+              onClick: l,
+              children: "OK"
+            })]
+          })]
+        })]
+      })
+    })]
+  });
+}), I = {
   pre: ["function pre_process({ method, url, params, headers, data }, utils) {", "    // your code goes here", "    return { method, url, params, headers, data }", "}"].join(`
 `),
   post: ["function post_process(res, utils) {", "    // your code goes here", "    return data", "}"].join(`
@@ -308,49 +410,109 @@ function De({
       config: {
         host: "",
         processing: {
-          pre: R.pre,
-          post: R.post
+          pre: I.pre,
+          post: I.post
         }
       }
     }
   });
-  return /* @__PURE__ */ e(v, { mx: "auto", children: /* @__PURE__ */ d("form", { onSubmit: s(t), children: [
-    /* @__PURE__ */ e(m, { name: "key", control: r, render: ({
-      field: o
-    }) => /* @__PURE__ */ e(z, { mb: n.spacing, size: n.size, required: !0, label: "Name", placeholder: "A unique name", ...o }) }),
-    /* @__PURE__ */ e(V, { label: "Connection Info", labelPosition: "center" }),
-    /* @__PURE__ */ e(m, { name: "config.host", control: r, render: ({
-      field: o
-    }) => /* @__PURE__ */ e(z, { mb: n.spacing, size: n.size, required: !0, label: "Base URL", sx: {
-      flexGrow: 1
-    }, ...o }) }),
-    /* @__PURE__ */ d(w, { grow: !0, children: [
-      /* @__PURE__ */ e(m, { name: "config.processing.pre", control: r, render: ({
-        field: o
-      }) => /* @__PURE__ */ e(Y, { label: "Pre Processing", modalTitle: "This function will run before sending the request (for scenarios like encryption)", defaultValue: R.pre, ...o, styles: n }) }),
-      /* @__PURE__ */ e(m, { name: "config.processing.post", control: r, render: ({
-        field: o
-      }) => /* @__PURE__ */ e(Y, { label: "Post Processing", modalTitle: "This function will run after sending the request (for scenarios like decryption)", defaultValue: R.post, ...o, styles: n }) })
-    ] }),
-    /* @__PURE__ */ e(w, { position: "right", mt: n.spacing, children: /* @__PURE__ */ e(b, { type: "submit", size: n.button.size, children: "Save" }) })
-  ] }) });
+  return /* @__PURE__ */ e(v, {
+    mx: "auto",
+    children: /* @__PURE__ */ d("form", {
+      onSubmit: s(t),
+      children: [/* @__PURE__ */ e(m, {
+        name: "key",
+        control: r,
+        render: ({
+          field: o
+        }) => /* @__PURE__ */ e(z, {
+          mb: n.spacing,
+          size: n.size,
+          required: !0,
+          label: "Name",
+          placeholder: "A unique name",
+          ...o
+        })
+      }), /* @__PURE__ */ e(V, {
+        label: "Connection Info",
+        labelPosition: "center"
+      }), /* @__PURE__ */ e(m, {
+        name: "config.host",
+        control: r,
+        render: ({
+          field: o
+        }) => /* @__PURE__ */ e(z, {
+          mb: n.spacing,
+          size: n.size,
+          required: !0,
+          label: "Base URL",
+          sx: {
+            flexGrow: 1
+          },
+          ...o
+        })
+      }), /* @__PURE__ */ d(w, {
+        grow: !0,
+        children: [/* @__PURE__ */ e(m, {
+          name: "config.processing.pre",
+          control: r,
+          render: ({
+            field: o
+          }) => /* @__PURE__ */ e(Z, {
+            label: "Pre Processing",
+            modalTitle: "This function will run before sending the request (for scenarios like encryption)",
+            defaultValue: I.pre,
+            ...o,
+            styles: n
+          })
+        }), /* @__PURE__ */ e(m, {
+          name: "config.processing.post",
+          control: r,
+          render: ({
+            field: o
+          }) => /* @__PURE__ */ e(Z, {
+            label: "Post Processing",
+            modalTitle: "This function will run after sending the request (for scenarios like decryption)",
+            defaultValue: I.post,
+            ...o,
+            styles: n
+          })
+        })]
+      }), /* @__PURE__ */ e(w, {
+        position: "right",
+        mt: n.spacing,
+        children: /* @__PURE__ */ e(b, {
+          type: "submit",
+          size: n.button.size,
+          children: "Save"
+        })
+      })]
+    })
+  });
 }
 function Te({
   styles: t = D
 }) {
-  return /* @__PURE__ */ e(v, { mx: "auto", children: /* @__PURE__ */ d(oe, { mt: t.spacing, icon: /* @__PURE__ */ e(pe, { size: 16 }), children: [
-    "Only ",
-    /* @__PURE__ */ e("b", { children: "SELECT" }),
-    " privilege is needed."
-  ] }) });
+  return /* @__PURE__ */ e(v, {
+    mx: "auto",
+    children: /* @__PURE__ */ d(oe, {
+      mt: t.spacing,
+      icon: /* @__PURE__ */ e(pe, {
+        size: 16
+      }),
+      children: ["Only ", /* @__PURE__ */ e("b", {
+        children: "SELECT"
+      }), " privilege is needed."]
+    })
+  });
 }
 function qe({
   postSubmit: t,
   styles: n = D
 }) {
-  const [r, i] = Z("postgresql"), s = async ({
+  const [r, i] = ee("postgresql"), s = async ({
     type: c,
-    key: u,
+    key: p,
     config: g
   }) => {
     _({
@@ -362,76 +524,107 @@ function qe({
     try {
       console.log({
         type: c,
-        key: u,
+        key: p,
         config: g
-      }), await P.datasource.create(c, u, g), S({
+      }), await P.datasource.create(c, p, g), S({
         id: "for-creating",
         title: "Successful",
         message: "Data source is added",
         color: "green"
       }), t();
-    } catch (l) {
+    } catch (h) {
       S({
         id: "for-creating",
         title: "Failed",
-        message: l.message,
+        message: h.message,
         color: "red"
       });
     }
   }, o = r === "postgresql" || r === "mysql", a = r === "http";
-  return /* @__PURE__ */ d(v, { mx: "auto", children: [
-    /* @__PURE__ */ e(ae, { fullWidth: !0, mb: n.spacing, size: n.size, data: [{
-      label: "PostgreSQL",
-      value: "postgresql"
-    }, {
-      label: "MySQL",
-      value: "mysql"
-    }, {
-      label: "HTTP",
-      value: "http"
-    }], value: r, onChange: (c) => i(c) }),
-    o && /* @__PURE__ */ e(Te, { styles: n }),
-    o && /* @__PURE__ */ e(ye, { submit: s, styles: n, type: r }),
-    a && /* @__PURE__ */ e(De, { submit: s, styles: n })
-  ] });
+  return /* @__PURE__ */ d(v, {
+    mx: "auto",
+    children: [/* @__PURE__ */ e(ae, {
+      fullWidth: !0,
+      mb: n.spacing,
+      size: n.size,
+      data: [{
+        label: "PostgreSQL",
+        value: "postgresql"
+      }, {
+        label: "MySQL",
+        value: "mysql"
+      }, {
+        label: "HTTP",
+        value: "http"
+      }],
+      value: r,
+      onChange: (c) => i(c)
+    }), o && /* @__PURE__ */ e(Te, {
+      styles: n
+    }), o && /* @__PURE__ */ e(ye, {
+      submit: s,
+      styles: n,
+      type: r
+    }), a && /* @__PURE__ */ e(De, {
+      submit: s,
+      styles: n
+    })]
+  });
 }
 function xe({
   onSuccess: t,
   styles: n = D
 }) {
-  const [r, i] = F.useState(!1), s = () => i(!0), o = () => i(!1);
-  return /* @__PURE__ */ d(C, { children: [
-    /* @__PURE__ */ e(O, { overflow: "inside", opened: r, onClose: () => i(!1), title: "Add a data source", trapFocus: !0, onDragStart: (c) => {
-      c.stopPropagation();
-    }, children: /* @__PURE__ */ e(qe, { postSubmit: () => {
-      t(), o();
-    }, styles: n }) }),
-    /* @__PURE__ */ e(b, { size: n.button.size, onClick: s, leftIcon: /* @__PURE__ */ e(Q, { size: 20 }), children: "Add a Data Source" })
-  ] });
+  const [r, i] = E.useState(!1), s = () => i(!0), o = () => i(!1);
+  return /* @__PURE__ */ d(C, {
+    children: [/* @__PURE__ */ e(R, {
+      overflow: "inside",
+      opened: r,
+      onClose: () => i(!1),
+      title: "Add a data source",
+      trapFocus: !0,
+      onDragStart: (c) => {
+        c.stopPropagation();
+      },
+      children: /* @__PURE__ */ e(qe, {
+        postSubmit: () => {
+          t(), o();
+        },
+        styles: n
+      })
+    }), /* @__PURE__ */ e(b, {
+      size: n.button.size,
+      onClick: s,
+      leftIcon: /* @__PURE__ */ e(Q, {
+        size: 20
+      }),
+      children: "Add a Data Source"
+    })]
+  });
 }
 const Oe = (t) => t.replace(/([^:])(\/\/+)/g, "$1/");
 function Re(t) {
   G(() => {
-    if (U.__getMonacoInstance())
+    if (N.__getMonacoInstance())
       return;
     console.log("loading monaco for @devtable/settings-form");
     const r = Oe(t);
-    U.config({
+    N.config({
       paths: {
         vs: r
       }
-    }), U.init().then((i) => console.log("monaco instance:", i));
+    }), N.init().then((i) => console.log("monaco instance:", i));
   }, []);
 }
-function N() {
-  return N = Object.assign ? Object.assign.bind() : function(t) {
+function K() {
+  return K = Object.assign ? Object.assign.bind() : function(t) {
     for (var n = 1; n < arguments.length; n++) {
       var r = arguments[n];
       for (var i in r)
         Object.prototype.hasOwnProperty.call(r, i) && (t[i] = r[i]);
     }
     return t;
-  }, N.apply(this, arguments);
+  }, K.apply(this, arguments);
 }
 function Ie(t, n) {
   if (t == null)
@@ -439,10 +632,10 @@ function Ie(t, n) {
   var r, i, s = function(a, c) {
     if (a == null)
       return {};
-    var u, g, l = {}, p = Object.keys(a);
-    for (g = 0; g < p.length; g++)
-      u = p[g], c.indexOf(u) >= 0 || (l[u] = a[u]);
-    return l;
+    var p, g, h = {}, u = Object.keys(a);
+    for (g = 0; g < u.length; g++)
+      p = u[g], c.indexOf(p) >= 0 || (h[p] = a[p]);
+    return h;
   }(t, n);
   if (Object.getOwnPropertySymbols) {
     var o = Object.getOwnPropertySymbols(t);
@@ -454,7 +647,7 @@ function Ie(t, n) {
 var Le = ["size", "color", "stroke"];
 function Fe(t) {
   var n = t.size, r = n === void 0 ? 24 : n, i = t.color, s = i === void 0 ? "currentColor" : i, o = t.stroke, a = o === void 0 ? 2 : o, c = Ie(t, Le);
-  return x.createElement("svg", N({ xmlns: "http://www.w3.org/2000/svg", className: "icon icon-tabler icon-tabler-lock", width: r, height: r, viewBox: "0 0 24 24", strokeWidth: a, stroke: s, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }, c), x.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), x.createElement("rect", { x: 5, y: 11, width: 14, height: 10, rx: 2 }), x.createElement("circle", { cx: 12, cy: 16, r: 1 }), x.createElement("path", { d: "M8 11v-4a4 4 0 0 1 8 0v4" }));
+  return O.createElement("svg", K({ xmlns: "http://www.w3.org/2000/svg", className: "icon icon-tabler icon-tabler-lock", width: r, height: r, viewBox: "0 0 24 24", strokeWidth: a, stroke: s, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }, c), O.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), O.createElement("rect", { x: 5, y: 11, width: 14, height: 10, rx: 2 }), O.createElement("circle", { cx: 12, cy: 16, r: 1 }), O.createElement("path", { d: "M8 11v-4a4 4 0 0 1 8 0v4" }));
 }
 function Ee({
   id: t,
@@ -463,8 +656,8 @@ function Ee({
   onSuccess: i,
   styles: s = D
 }) {
-  const o = E(), a = async () => {
-    t && (_({
+  const o = j(), a = async () => {
+    !t || (_({
       id: "for-deleting",
       title: "Pending",
       message: "Deleting data source...",
@@ -477,25 +670,46 @@ function Ee({
     }), i());
   }, c = () => o.openConfirmModal({
     title: "Delete this data source?",
-    children: /* @__PURE__ */ e(I, { size: s.size, children: "This action won't affect your database." }),
+    children: /* @__PURE__ */ e(L, {
+      size: s.size,
+      children: "This action won't affect your database."
+    }),
     labels: {
       confirm: "Confirm",
       cancel: "Cancel"
     },
     onCancel: () => console.log("Cancel"),
     onConfirm: a
-  }), u = se();
-  return r ? /* @__PURE__ */ e(ce, { withArrow: !0, events: {
-    hover: !0,
-    touch: !1,
-    focus: !1
-  }, label: "This is a preset datasource, it can not be deleted", children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(Fe, { size: 16, color: u.colors.gray[7] }) }) }) : /* @__PURE__ */ e(b, { size: s.button.size, color: "red", onClick: c, leftIcon: /* @__PURE__ */ e(W, { size: 20 }), children: "Delete" });
+  }), p = se();
+  return r ? /* @__PURE__ */ e(ce, {
+    withArrow: !0,
+    events: {
+      hover: !0,
+      touch: !1,
+      focus: !1
+    },
+    label: "This is a preset datasource, it can not be deleted",
+    children: /* @__PURE__ */ e("span", {
+      children: /* @__PURE__ */ e(Fe, {
+        size: 16,
+        color: p.colors.gray[7]
+      })
+    })
+  }) : /* @__PURE__ */ e(b, {
+    size: s.button.size,
+    color: "red",
+    onClick: c,
+    leftIcon: /* @__PURE__ */ e(W, {
+      size: 20
+    }),
+    children: "Delete"
+  });
 }
 function ot({
   styles: t = D,
   config: n
 }) {
-  Re(n.monacoPath), j(n);
+  Re(n.monacoPath), M(n);
   const {
     data: r = [],
     loading: i,
@@ -508,41 +722,84 @@ function ot({
   }, {
     refreshDeps: []
   });
-  return /* @__PURE__ */ d(C, { children: [
-    /* @__PURE__ */ e(w, { pt: t.spacing, position: "right", children: /* @__PURE__ */ e(xe, { onSuccess: s }) }),
-    /* @__PURE__ */ d(v, { mt: t.spacing, sx: {
-      position: "relative"
-    }, children: [
-      /* @__PURE__ */ e(H, { visible: i }),
-      /* @__PURE__ */ d($, { horizontalSpacing: t.spacing, verticalSpacing: t.spacing, fontSize: t.size, highlightOnHover: !0, children: [
-        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { children: [
-          /* @__PURE__ */ e("th", { children: "Type" }),
-          /* @__PURE__ */ e("th", { children: "Name" }),
-          /* @__PURE__ */ e("th", { children: "Action" })
-        ] }) }),
-        /* @__PURE__ */ e("tbody", { children: r.map(({
-          id: o,
-          key: a,
-          type: c,
-          is_preset: u
-        }) => /* @__PURE__ */ d("tr", { children: [
-          /* @__PURE__ */ e("td", { width: 200, children: c }),
-          /* @__PURE__ */ e("td", { children: a }),
-          /* @__PURE__ */ e("td", { width: 200, children: /* @__PURE__ */ e(w, { position: "left", children: /* @__PURE__ */ e(Ee, { isProtected: u, id: o, name: a, onSuccess: s }) }) })
-        ] }, a)) })
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ d(C, {
+    children: [/* @__PURE__ */ e(w, {
+      pt: t.spacing,
+      position: "right",
+      children: /* @__PURE__ */ e(xe, {
+        onSuccess: s
+      })
+    }), /* @__PURE__ */ d(v, {
+      mt: t.spacing,
+      sx: {
+        position: "relative"
+      },
+      children: [/* @__PURE__ */ e(H, {
+        visible: i
+      }), /* @__PURE__ */ d($, {
+        horizontalSpacing: t.spacing,
+        verticalSpacing: t.spacing,
+        fontSize: t.size,
+        highlightOnHover: !0,
+        children: [/* @__PURE__ */ e("thead", {
+          children: /* @__PURE__ */ d("tr", {
+            children: [/* @__PURE__ */ e("th", {
+              children: "Type"
+            }), /* @__PURE__ */ e("th", {
+              children: "Name"
+            }), /* @__PURE__ */ e("th", {
+              children: "Action"
+            })]
+          })
+        }), /* @__PURE__ */ e("tbody", {
+          children: r.map(({
+            id: o,
+            key: a,
+            type: c,
+            is_preset: p
+          }) => /* @__PURE__ */ d("tr", {
+            children: [/* @__PURE__ */ e("td", {
+              width: 200,
+              children: c
+            }), /* @__PURE__ */ e("td", {
+              children: a
+            }), /* @__PURE__ */ e("td", {
+              width: 200,
+              children: /* @__PURE__ */ e(w, {
+                position: "left",
+                children: /* @__PURE__ */ e(Ee, {
+                  isProtected: p,
+                  id: o,
+                  name: a,
+                  onSuccess: s
+                })
+              })
+            })]
+          }, a))
+        })]
+      })]
+    })]
+  });
 }
 const je = J(({
   label: t,
   value: n,
   description: r,
   ...i
-}, s) => /* @__PURE__ */ d(B, { spacing: 2, ref: s, ...i, children: [
-  /* @__PURE__ */ e(I, { size: "sm", children: t }),
-  /* @__PURE__ */ e(I, { size: "xs", color: "dimmed", className: "role-description", children: r })
-] })), X = J(({
+}, s) => /* @__PURE__ */ d(B, {
+  spacing: 2,
+  ref: s,
+  ...i,
+  children: [/* @__PURE__ */ e(L, {
+    size: "sm",
+    children: t
+  }), /* @__PURE__ */ e(L, {
+    size: "xs",
+    color: "dimmed",
+    className: "role-description",
+    children: r
+  })]
+})), Y = J(({
   styles: t,
   value: n,
   onChange: r
@@ -555,36 +812,32 @@ const je = J(({
     value: c.id,
     description: c.description,
     disabled: c.id === 50
-    // SUPERADMIN
   })), {
     refreshDeps: []
   });
-  return /* @__PURE__ */ e(
-    le,
-    {
-      ref: i,
-      mb: t.spacing,
-      size: t.size,
-      required: !0,
-      label: "Role",
-      itemComponent: je,
-      data: s,
-      disabled: o,
-      styles: () => ({
-        item: {
-          "&[data-selected]": {
-            "&, &:hover": {
-              ".role-description": {
-                color: "rgba(255,255,255,.8)"
-              }
+  return /* @__PURE__ */ e(le, {
+    ref: i,
+    mb: t.spacing,
+    size: t.size,
+    required: !0,
+    label: "Role",
+    itemComponent: je,
+    data: s,
+    disabled: o,
+    styles: () => ({
+      item: {
+        "&[data-selected]": {
+          "&, &:hover": {
+            ".role-description": {
+              color: "rgba(255,255,255,.8)"
             }
           }
         }
-      }),
-      value: n,
-      onChange: r
-    }
-  );
+      }
+    }),
+    value: n,
+    onChange: r
+  });
 }), y = {
   size: "sm",
   spacing: "md",
@@ -608,62 +861,126 @@ function Me({
       password: ""
     }
   });
-  return /* @__PURE__ */ e(v, { mx: "auto", children: /* @__PURE__ */ d("form", { onSubmit: s(async ({
-    name: a,
-    email: c,
-    password: u,
-    role_id: g
-  }) => {
-    try {
-      _({
-        id: "for-creating",
-        title: "Pending",
-        message: "Adding account...",
-        loading: !0
-      }), await P.account.create(a, c, u, g), S({
-        id: "for-creating",
-        title: "Successful",
-        message: "Account is added",
-        color: "green"
-      }), t();
-    } catch (l) {
-      S({
-        id: "for-creating",
-        title: "Failed",
-        message: l.message,
-        color: "red"
-      });
-    }
-  }), children: [
-    /* @__PURE__ */ e(m, { name: "name", control: i, render: ({
-      field: a
-    }) => /* @__PURE__ */ e(z, { mb: n.spacing, size: n.size, required: !0, label: "Username", ...a }) }),
-    /* @__PURE__ */ e(m, { name: "email", control: i, render: ({
-      field: a
-    }) => /* @__PURE__ */ e(z, { mb: n.spacing, size: n.size, required: !0, label: "Email", ...a }) }),
-    /* @__PURE__ */ e(m, { name: "password", control: i, render: ({
-      field: a
-    }) => /* @__PURE__ */ e(L, { mb: n.spacing, size: n.size, required: !0, label: "Password", description: "Password must be at least 8 characters long", ...a }) }),
-    /* @__PURE__ */ e(m, { name: "role_id", control: i, render: ({
-      field: a
-    }) => /* @__PURE__ */ e(X, { styles: n, ...a }) }),
-    /* @__PURE__ */ e(w, { position: "right", mt: n.spacing, children: /* @__PURE__ */ e(b, { type: "submit", size: n.button.size, children: "Save" }) })
-  ] }) });
+  return /* @__PURE__ */ e(v, {
+    mx: "auto",
+    children: /* @__PURE__ */ d("form", {
+      onSubmit: s(async ({
+        name: a,
+        email: c,
+        password: p,
+        role_id: g
+      }) => {
+        try {
+          _({
+            id: "for-creating",
+            title: "Pending",
+            message: "Adding account...",
+            loading: !0
+          }), await P.account.create(a, c, p, g), S({
+            id: "for-creating",
+            title: "Successful",
+            message: "Account is added",
+            color: "green"
+          }), t();
+        } catch (h) {
+          S({
+            id: "for-creating",
+            title: "Failed",
+            message: h.message,
+            color: "red"
+          });
+        }
+      }),
+      children: [/* @__PURE__ */ e(m, {
+        name: "name",
+        control: i,
+        render: ({
+          field: a
+        }) => /* @__PURE__ */ e(z, {
+          mb: n.spacing,
+          size: n.size,
+          required: !0,
+          label: "Username",
+          ...a
+        })
+      }), /* @__PURE__ */ e(m, {
+        name: "email",
+        control: i,
+        render: ({
+          field: a
+        }) => /* @__PURE__ */ e(z, {
+          mb: n.spacing,
+          size: n.size,
+          required: !0,
+          label: "Email",
+          ...a
+        })
+      }), /* @__PURE__ */ e(m, {
+        name: "password",
+        control: i,
+        render: ({
+          field: a
+        }) => /* @__PURE__ */ e(F, {
+          mb: n.spacing,
+          size: n.size,
+          required: !0,
+          label: "Password",
+          description: "Password must be at least 8 characters long",
+          ...a
+        })
+      }), /* @__PURE__ */ e(m, {
+        name: "role_id",
+        control: i,
+        render: ({
+          field: a
+        }) => /* @__PURE__ */ e(Y, {
+          styles: n,
+          ...a
+        })
+      }), /* @__PURE__ */ e(w, {
+        position: "right",
+        mt: n.spacing,
+        children: /* @__PURE__ */ e(b, {
+          type: "submit",
+          size: n.button.size,
+          children: "Save"
+        })
+      })]
+    })
+  });
 }
 function Ue({
   onSuccess: t,
   styles: n = y,
   initialRoleID: r
 }) {
-  const [i, s] = F.useState(!1), o = () => s(!0), a = () => s(!1);
-  return /* @__PURE__ */ d(C, { children: [
-    /* @__PURE__ */ e(O, { overflow: "inside", opened: i, onClose: () => s(!1), title: "Add an Account", trapFocus: !0, onDragStart: (u) => {
-      u.stopPropagation();
-    }, children: /* @__PURE__ */ e(Me, { postSubmit: () => {
-      t(), a();
-    }, styles: n, initialRoleID: r }) }),
-    /* @__PURE__ */ e(b, { size: n.button.size, onClick: o, leftIcon: /* @__PURE__ */ e(Q, { size: 20 }), children: "Add an Account" })
-  ] });
+  const [i, s] = E.useState(!1), o = () => s(!0), a = () => s(!1);
+  return /* @__PURE__ */ d(C, {
+    children: [/* @__PURE__ */ e(R, {
+      overflow: "inside",
+      opened: i,
+      onClose: () => s(!1),
+      title: "Add an Account",
+      trapFocus: !0,
+      onDragStart: (p) => {
+        p.stopPropagation();
+      },
+      children: /* @__PURE__ */ e(Me, {
+        postSubmit: () => {
+          t(), a();
+        },
+        styles: n,
+        initialRoleID: r
+      })
+    }), /* @__PURE__ */ e(b, {
+      size: n.button.size,
+      onClick: o,
+      leftIcon: /* @__PURE__ */ e(Q, {
+        size: 20
+      }),
+      children: "Add an Account"
+    })]
+  });
 }
 function Ne({
   id: t,
@@ -671,8 +988,8 @@ function Ne({
   onSuccess: r,
   styles: i = y
 }) {
-  const s = E(), o = async () => {
-    if (t) {
+  const s = j(), o = async () => {
+    if (!!t) {
       _({
         id: "for-deleting",
         title: "Pending",
@@ -704,7 +1021,15 @@ function Ne({
     onCancel: () => console.log("Cancel"),
     onConfirm: o
   });
-  return /* @__PURE__ */ e(b, { size: i.button.size, color: "red", onClick: a, leftIcon: /* @__PURE__ */ e(W, { size: 20 }), children: "Delete" });
+  return /* @__PURE__ */ e(b, {
+    size: i.button.size,
+    color: "red",
+    onClick: a,
+    leftIcon: /* @__PURE__ */ e(W, {
+      size: 20
+    }),
+    children: "Delete"
+  });
 }
 function Ke({
   id: t,
@@ -717,7 +1042,7 @@ function Ke({
   const {
     control: a,
     handleSubmit: c,
-    watch: u
+    watch: p
   } = q({
     defaultValues: {
       name: n,
@@ -727,10 +1052,10 @@ function Ke({
       new_password: ""
     }
   }), g = async ({
-    name: h,
+    name: l,
     email: A,
     role_id: k,
-    reset_password: te,
+    reset_password: x,
     new_password: ne
   }) => {
     try {
@@ -741,10 +1066,10 @@ function Ke({
         loading: !0
       }), await P.account.edit({
         id: t,
-        name: h,
+        name: l,
         email: A,
         role_id: k,
-        reset_password: te,
+        reset_password: x,
         new_password: ne
       }), S({
         id: "for-updating",
@@ -760,115 +1085,226 @@ function Ke({
         color: "red"
       });
     }
-  }, [l, p] = u(["reset_password", "new_password"]);
-  return /* @__PURE__ */ e(v, { mx: "auto", children: /* @__PURE__ */ d("form", { onSubmit: c(g), children: [
-    /* @__PURE__ */ e(m, { name: "name", control: a, render: ({
-      field: h
-    }) => /* @__PURE__ */ e(z, { mb: o.spacing, size: o.size, required: !0, label: "Username", ...h }) }),
-    /* @__PURE__ */ e(m, { name: "email", control: a, render: ({
-      field: h
-    }) => /* @__PURE__ */ e(z, { mb: o.spacing, size: o.size, required: !0, label: "Email", ...h }) }),
-    /* @__PURE__ */ e(m, { name: "role_id", control: a, render: ({
-      field: h
-    }) => /* @__PURE__ */ e(X, { styles: o, ...h }) }),
-    /* @__PURE__ */ e(V, { my: 20, variant: "dashed", label: "", labelPosition: "center" }),
-    /* @__PURE__ */ e(m, { name: "reset_password", control: a, render: ({
-      field: h
-    }) => /* @__PURE__ */ e(de, { mb: o.spacing, size: o.size, label: "Reset password", checked: h.value, onChange: (A) => h.onChange(A.currentTarget.checked), styles: {
-      label: {
-        verticalAlign: "middle"
-      }
-    } }) }),
-    l && /* @__PURE__ */ e(
-      m,
-      {
+  }, [h, u] = p(["reset_password", "new_password"]);
+  return /* @__PURE__ */ e(v, {
+    mx: "auto",
+    children: /* @__PURE__ */ d("form", {
+      onSubmit: c(g),
+      children: [/* @__PURE__ */ e(m, {
+        name: "name",
+        control: a,
+        render: ({
+          field: l
+        }) => /* @__PURE__ */ e(z, {
+          mb: o.spacing,
+          size: o.size,
+          required: !0,
+          label: "Username",
+          ...l
+        })
+      }), /* @__PURE__ */ e(m, {
+        name: "email",
+        control: a,
+        render: ({
+          field: l
+        }) => /* @__PURE__ */ e(z, {
+          mb: o.spacing,
+          size: o.size,
+          required: !0,
+          label: "Email",
+          ...l
+        })
+      }), /* @__PURE__ */ e(m, {
+        name: "role_id",
+        control: a,
+        render: ({
+          field: l
+        }) => /* @__PURE__ */ e(Y, {
+          styles: o,
+          ...l
+        })
+      }), /* @__PURE__ */ e(V, {
+        my: 20,
+        variant: "dashed",
+        label: "",
+        labelPosition: "center"
+      }), /* @__PURE__ */ e(m, {
+        name: "reset_password",
+        control: a,
+        render: ({
+          field: l
+        }) => /* @__PURE__ */ e(de, {
+          mb: o.spacing,
+          size: o.size,
+          label: "Reset password",
+          checked: l.value,
+          onChange: (A) => l.onChange(A.currentTarget.checked),
+          styles: {
+            label: {
+              verticalAlign: "middle"
+            }
+          }
+        })
+      }), h && /* @__PURE__ */ e(m, {
         name: "new_password",
         control: a,
         render: ({
-          field: h
-        }) => /* @__PURE__ */ e(L, { autoComplete: "off", mb: o.spacing, size: o.size, required: !0, description: "Password must be at least 8 characters long", label: "New Password", ...h })
-      }
-    ),
-    /* @__PURE__ */ e(w, { position: "right", mt: o.spacing, children: /* @__PURE__ */ e(b, { type: "submit", size: o.button.size, children: "Submit" }) })
-  ] }) });
+          field: l
+        }) => /* @__PURE__ */ e(F, {
+          autoComplete: "off",
+          mb: o.spacing,
+          size: o.size,
+          required: !0,
+          description: "Password must be at least 8 characters long",
+          label: "New Password",
+          ...l
+        })
+      }), /* @__PURE__ */ e(w, {
+        position: "right",
+        mt: o.spacing,
+        children: /* @__PURE__ */ e(b, {
+          type: "submit",
+          size: o.button.size,
+          children: "Submit"
+        })
+      })]
+    })
+  });
 }
 function Ve({
   account: t,
   onSuccess: n,
   styles: r = y
 }) {
-  const [i, s] = F.useState(!1), o = () => s(!0), a = () => s(!1), c = () => {
+  const [i, s] = E.useState(!1), o = () => s(!0), a = () => s(!1), c = () => {
     n(), a();
   };
-  return /* @__PURE__ */ d(C, { children: [
-    /* @__PURE__ */ e(O, { overflow: "inside", opened: i, onClose: () => s(!1), title: `Editing ${t.name}`, trapFocus: !0, onDragStart: (u) => {
-      u.stopPropagation();
-    }, children: /* @__PURE__ */ e(Ke, { ...t, postSubmit: c, styles: r }) }),
-    /* @__PURE__ */ e(b, { size: r.button.size, onClick: o, leftIcon: /* @__PURE__ */ e(ge, { size: 20 }), children: "Edit" })
-  ] });
+  return /* @__PURE__ */ d(C, {
+    children: [/* @__PURE__ */ e(R, {
+      overflow: "inside",
+      opened: i,
+      onClose: () => s(!1),
+      title: `Editing ${t.name}`,
+      trapFocus: !0,
+      onDragStart: (p) => {
+        p.stopPropagation();
+      },
+      children: /* @__PURE__ */ e(Ke, {
+        ...t,
+        postSubmit: c,
+        styles: r
+      })
+    }), /* @__PURE__ */ e(b, {
+      size: r.button.size,
+      onClick: o,
+      leftIcon: /* @__PURE__ */ e(ge, {
+        size: 20
+      }),
+      children: "Edit"
+    })]
+  });
 }
 function at({
   styles: t = y,
   config: n
 }) {
-  var g;
-  j(n);
+  var g, h;
+  M(n);
   const {
     data: r = [],
     loading: i,
     refresh: s
   } = T(async () => {
     const {
-      data: l
+      data: u
     } = await P.account.list();
-    return l;
+    return u;
   }, {
     refreshDeps: []
   }), {
     data: o = [],
     loading: a
-  } = T(async () => (await P.role.list()).map((p) => ({
-    label: p.name,
-    value: p.id,
-    description: p.description,
-    disabled: p.id === 50
-    // SUPERADMIN
+  } = T(async () => (await P.role.list()).map((l) => ({
+    label: l.name,
+    value: l.id,
+    description: l.description,
+    disabled: l.id === 50
   })), {
     refreshDeps: []
-  }), c = ee(() => o.reduce((l, p) => (l.set(p.value, p.label), l), /* @__PURE__ */ new Map()), [o]), u = (l) => c.get(l) ?? l;
-  return /* @__PURE__ */ d(C, { children: [
-    /* @__PURE__ */ e(w, { pt: t.spacing, position: "right", children: /* @__PURE__ */ e(Ue, { onSuccess: s, initialRoleID: ((g = o == null ? void 0 : o[0]) == null ? void 0 : g.value) ?? 0 }) }),
-    /* @__PURE__ */ d(v, { mt: t.spacing, sx: {
-      position: "relative"
-    }, children: [
-      /* @__PURE__ */ e(H, { visible: i || a }),
-      /* @__PURE__ */ d($, { horizontalSpacing: t.spacing, verticalSpacing: t.spacing, fontSize: t.size, highlightOnHover: !0, children: [
-        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { children: [
-          /* @__PURE__ */ e("th", { children: "Username" }),
-          /* @__PURE__ */ e("th", { children: "Email" }),
-          /* @__PURE__ */ e("th", { children: "Role" }),
-          /* @__PURE__ */ e("th", { children: "Action" })
-        ] }) }),
-        /* @__PURE__ */ e("tbody", { children: r.map((l) => {
-          const {
-            id: p,
-            name: h,
-            email: A,
-            role_id: k
-          } = l;
-          return /* @__PURE__ */ d("tr", { children: [
-            /* @__PURE__ */ e("td", { width: 200, children: h }),
-            /* @__PURE__ */ e("td", { width: 200, children: A }),
-            /* @__PURE__ */ e("td", { width: 200, children: u(k) }),
-            /* @__PURE__ */ e("td", { width: 200, children: /* @__PURE__ */ d(w, { position: "left", children: [
-              /* @__PURE__ */ e(Ve, { account: l, onSuccess: s }),
-              /* @__PURE__ */ e(Ne, { id: p, name: h, onSuccess: s })
-            ] }) })
-          ] }, p);
-        }) })
-      ] })
-    ] })
-  ] });
+  }), c = te(() => o.reduce((u, l) => (u.set(l.value, l.label), u), /* @__PURE__ */ new Map()), [o]), p = (u) => {
+    var l;
+    return (l = c.get(u)) != null ? l : u;
+  };
+  return /* @__PURE__ */ d(C, {
+    children: [/* @__PURE__ */ e(w, {
+      pt: t.spacing,
+      position: "right",
+      children: /* @__PURE__ */ e(Ue, {
+        onSuccess: s,
+        initialRoleID: (h = (g = o == null ? void 0 : o[0]) == null ? void 0 : g.value) != null ? h : 0
+      })
+    }), /* @__PURE__ */ d(v, {
+      mt: t.spacing,
+      sx: {
+        position: "relative"
+      },
+      children: [/* @__PURE__ */ e(H, {
+        visible: i || a
+      }), /* @__PURE__ */ d($, {
+        horizontalSpacing: t.spacing,
+        verticalSpacing: t.spacing,
+        fontSize: t.size,
+        highlightOnHover: !0,
+        children: [/* @__PURE__ */ e("thead", {
+          children: /* @__PURE__ */ d("tr", {
+            children: [/* @__PURE__ */ e("th", {
+              children: "Username"
+            }), /* @__PURE__ */ e("th", {
+              children: "Email"
+            }), /* @__PURE__ */ e("th", {
+              children: "Role"
+            }), /* @__PURE__ */ e("th", {
+              children: "Action"
+            })]
+          })
+        }), /* @__PURE__ */ e("tbody", {
+          children: r.map((u) => {
+            const {
+              id: l,
+              name: A,
+              email: k,
+              role_id: x
+            } = u;
+            return /* @__PURE__ */ d("tr", {
+              children: [/* @__PURE__ */ e("td", {
+                width: 200,
+                children: A
+              }), /* @__PURE__ */ e("td", {
+                width: 200,
+                children: k
+              }), /* @__PURE__ */ e("td", {
+                width: 200,
+                children: p(x)
+              }), /* @__PURE__ */ e("td", {
+                width: 200,
+                children: /* @__PURE__ */ d(w, {
+                  position: "left",
+                  children: [/* @__PURE__ */ e(Ve, {
+                    account: u,
+                    onSuccess: s
+                  }), /* @__PURE__ */ e(Ne, {
+                    id: l,
+                    name: A,
+                    onSuccess: s
+                  })]
+                })
+              })]
+            }, l);
+          })
+        })]
+      })]
+    })]
+  });
 }
 function Be({
   postSubmit: t,
@@ -883,52 +1319,91 @@ function Be({
       password: ""
     }
   });
-  return /* @__PURE__ */ e(v, { mx: "auto", children: /* @__PURE__ */ d("form", { onSubmit: i(async ({
-    name: o,
-    password: a
-  }) => {
-    try {
-      _({
-        id: "for-login",
-        title: "Pending",
-        message: "Loggin in...",
-        loading: !0
-      });
-      const c = await P.account.login(o, a);
-      window.localStorage.setItem("token", c.token), S({
-        id: "for-login",
-        title: "Successful",
-        message: "Logged in",
-        color: "green"
-      }), t(c);
-    } catch (c) {
-      S({
-        id: "for-login",
-        title: "Login Failed",
-        message: c.message,
-        color: "red"
-      });
-    }
-  }), children: [
-    /* @__PURE__ */ e(m, { name: "name", control: r, render: ({
-      field: o
-    }) => /* @__PURE__ */ e(z, { mb: n.spacing, size: n.size, required: !0, label: "Username", ...o }) }),
-    /* @__PURE__ */ e(m, { name: "password", control: r, render: ({
-      field: o
-    }) => /* @__PURE__ */ e(L, { mb: n.spacing, size: n.size, required: !0, label: "Password", ...o }) }),
-    /* @__PURE__ */ e(w, { position: "right", mt: n.spacing, children: /* @__PURE__ */ e(b, { type: "submit", size: n.button.size, children: "Submit" }) })
-  ] }) });
+  return /* @__PURE__ */ e(v, {
+    mx: "auto",
+    children: /* @__PURE__ */ d("form", {
+      onSubmit: i(async ({
+        name: o,
+        password: a
+      }) => {
+        try {
+          _({
+            id: "for-login",
+            title: "Pending",
+            message: "Loggin in...",
+            loading: !0
+          });
+          const c = await P.account.login(o, a);
+          window.localStorage.setItem("token", c.token), S({
+            id: "for-login",
+            title: "Successful",
+            message: "Logged in",
+            color: "green"
+          }), t(c);
+        } catch (c) {
+          S({
+            id: "for-login",
+            title: "Login Failed",
+            message: c.message,
+            color: "red"
+          });
+        }
+      }),
+      children: [/* @__PURE__ */ e(m, {
+        name: "name",
+        control: r,
+        render: ({
+          field: o
+        }) => /* @__PURE__ */ e(z, {
+          mb: n.spacing,
+          size: n.size,
+          required: !0,
+          label: "Username",
+          ...o
+        })
+      }), /* @__PURE__ */ e(m, {
+        name: "password",
+        control: r,
+        render: ({
+          field: o
+        }) => /* @__PURE__ */ e(F, {
+          mb: n.spacing,
+          size: n.size,
+          required: !0,
+          label: "Password",
+          ...o
+        })
+      }), /* @__PURE__ */ e(w, {
+        position: "right",
+        mt: n.spacing,
+        children: /* @__PURE__ */ e(b, {
+          type: "submit",
+          size: n.button.size,
+          children: "Submit"
+        })
+      })]
+    })
+  });
 }
 function st({
   styles: t = y,
   config: n,
   onSuccess: r
 }) {
-  return j(n), /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(v, { mt: t.spacing, sx: {
-    position: "relative"
-  }, children: /* @__PURE__ */ e(Be, { styles: t, postSubmit: r }) }) });
+  return M(n), /* @__PURE__ */ e(C, {
+    children: /* @__PURE__ */ e(v, {
+      mt: t.spacing,
+      sx: {
+        position: "relative"
+      },
+      children: /* @__PURE__ */ e(Be, {
+        styles: t,
+        postSubmit: r
+      })
+    })
+  });
 }
-const M = {
+const U = {
   size: "sm",
   spacing: "md",
   button: {
@@ -937,7 +1412,7 @@ const M = {
 };
 function He({
   postSubmit: t,
-  styles: n = M,
+  styles: n = U,
   initialRoleID: r
 }) {
   const {
@@ -949,89 +1424,148 @@ function He({
       role_id: r
     }
   });
-  return /* @__PURE__ */ e(v, { mx: "auto", children: /* @__PURE__ */ d("form", { onSubmit: s(async ({
-    name: a,
-    role_id: c
-  }) => {
-    try {
-      _({
-        id: "for-creating",
-        title: "Pending",
-        message: "Adding API Key...",
-        loading: !0
-      });
-      const {
-        app_id: u,
-        app_secret: g
-      } = await P.api_key.create(a, c);
-      S({
-        id: "for-creating",
-        title: "Successful",
-        message: "API Key is added",
-        color: "green"
-      }), t(u, g);
-    } catch (u) {
-      S({
-        id: "for-creating",
-        title: "Failed",
-        message: u.message,
-        color: "red"
-      });
-    }
-  }), children: [
-    /* @__PURE__ */ e(m, { name: "name", control: i, render: ({
-      field: a
-    }) => /* @__PURE__ */ e(z, { mb: n.spacing, size: n.size, required: !0, label: "Name", ...a }) }),
-    /* @__PURE__ */ e(m, { name: "role_id", control: i, render: ({
-      field: a
-    }) => /* @__PURE__ */ e(X, { styles: n, ...a }) }),
-    /* @__PURE__ */ e(w, { position: "right", mt: n.spacing, children: /* @__PURE__ */ e(b, { type: "submit", size: n.button.size, children: "Save" }) })
-  ] }) });
+  return /* @__PURE__ */ e(v, {
+    mx: "auto",
+    children: /* @__PURE__ */ d("form", {
+      onSubmit: s(async ({
+        name: a,
+        role_id: c
+      }) => {
+        try {
+          _({
+            id: "for-creating",
+            title: "Pending",
+            message: "Adding API Key...",
+            loading: !0
+          });
+          const {
+            app_id: p,
+            app_secret: g
+          } = await P.api_key.create(a, c);
+          S({
+            id: "for-creating",
+            title: "Successful",
+            message: "API Key is added",
+            color: "green"
+          }), t(p, g);
+        } catch (p) {
+          S({
+            id: "for-creating",
+            title: "Failed",
+            message: p.message,
+            color: "red"
+          });
+        }
+      }),
+      children: [/* @__PURE__ */ e(m, {
+        name: "name",
+        control: i,
+        render: ({
+          field: a
+        }) => /* @__PURE__ */ e(z, {
+          mb: n.spacing,
+          size: n.size,
+          required: !0,
+          label: "Name",
+          ...a
+        })
+      }), /* @__PURE__ */ e(m, {
+        name: "role_id",
+        control: i,
+        render: ({
+          field: a
+        }) => /* @__PURE__ */ e(Y, {
+          styles: n,
+          ...a
+        })
+      }), /* @__PURE__ */ e(w, {
+        position: "right",
+        mt: n.spacing,
+        children: /* @__PURE__ */ e(b, {
+          type: "submit",
+          size: n.button.size,
+          children: "Save"
+        })
+      })]
+    })
+  });
 }
 function $e({
   onSuccess: t,
-  styles: n = M,
+  styles: n = U,
   initialRoleID: r
 }) {
-  const i = E(), [s, o] = F.useState(!1), a = () => o(!0), c = () => o(!1);
-  return /* @__PURE__ */ d(C, { children: [
-    /* @__PURE__ */ e(O, { overflow: "inside", opened: s, onClose: () => o(!1), title: "Add an API Key", trapFocus: !0, onDragStart: (g) => {
-      g.stopPropagation();
-    }, children: /* @__PURE__ */ e(He, { postSubmit: (g, l) => {
-      c(), i.openModal({
-        title: "API Key is generated",
-        children: /* @__PURE__ */ d(B, { children: [
-          /* @__PURE__ */ e(I, { color: "dimmed", children: "Make sure you save it - you won't be able to access it again." }),
-          /* @__PURE__ */ e(z, { defaultValue: g, disabled: !0, label: "APP ID", styles: {
-            input: {
-              cursor: "text !important"
+  const i = j(), [s, o] = E.useState(!1), a = () => o(!0), c = () => o(!1);
+  return /* @__PURE__ */ d(C, {
+    children: [/* @__PURE__ */ e(R, {
+      overflow: "inside",
+      opened: s,
+      onClose: () => o(!1),
+      title: "Add an API Key",
+      trapFocus: !0,
+      onDragStart: (g) => {
+        g.stopPropagation();
+      },
+      children: /* @__PURE__ */ e(He, {
+        postSubmit: (g, h) => {
+          c(), i.openModal({
+            title: "API Key is generated",
+            children: /* @__PURE__ */ d(B, {
+              children: [/* @__PURE__ */ e(L, {
+                color: "dimmed",
+                children: "Make sure you save it - you won't be able to access it again."
+              }), /* @__PURE__ */ e(z, {
+                defaultValue: g,
+                disabled: !0,
+                label: "APP ID",
+                styles: {
+                  input: {
+                    cursor: "text !important"
+                  }
+                }
+              }), /* @__PURE__ */ e(z, {
+                defaultValue: h,
+                disabled: !0,
+                label: "APP Secret",
+                styles: {
+                  input: {
+                    cursor: "text !important"
+                  }
+                }
+              }), /* @__PURE__ */ e(b, {
+                size: "sm",
+                onClick: () => {
+                  Se();
+                },
+                children: "I've saved this API Key"
+              })]
+            }),
+            onClose: () => {
+              t();
             }
-          } }),
-          /* @__PURE__ */ e(z, { defaultValue: l, disabled: !0, label: "APP Secret", styles: {
-            input: {
-              cursor: "text !important"
-            }
-          } }),
-          /* @__PURE__ */ e(b, { size: "sm", onClick: () => {
-            Se();
-          }, children: "I've saved this API Key" })
-        ] }),
-        onClose: () => {
-          t();
-        }
-      });
-    }, styles: n, initialRoleID: r }) }),
-    /* @__PURE__ */ e(b, { size: n.button.size, onClick: a, leftIcon: /* @__PURE__ */ e(Q, { size: 20 }), children: "Add an API Key" })
-  ] });
+          });
+        },
+        styles: n,
+        initialRoleID: r
+      })
+    }), /* @__PURE__ */ e(b, {
+      size: n.button.size,
+      onClick: a,
+      leftIcon: /* @__PURE__ */ e(Q, {
+        size: 20
+      }),
+      children: "Add an API Key"
+    })]
+  });
 }
 function Ge({
   id: t,
   name: n,
   onSuccess: r,
-  styles: i = M
+  styles: i = U
 }) {
-  const s = E(), o = async () => {
-    if (t) {
+  const s = j(), o = async () => {
+    if (!!t) {
       _({
         id: "for-deleting",
         title: "Pending",
@@ -1063,69 +1597,116 @@ function Ge({
     onCancel: () => console.log("Cancel"),
     onConfirm: o
   });
-  return /* @__PURE__ */ e(b, { size: i.button.size, color: "red", onClick: a, leftIcon: /* @__PURE__ */ e(W, { size: 20 }), children: "Delete" });
+  return /* @__PURE__ */ e(b, {
+    size: i.button.size,
+    color: "red",
+    onClick: a,
+    leftIcon: /* @__PURE__ */ e(W, {
+      size: 20
+    }),
+    children: "Delete"
+  });
 }
 function ct({
-  styles: t = M,
+  styles: t = U,
   config: n
 }) {
-  var g;
-  j(n);
+  var g, h;
+  M(n);
   const {
     data: r = [],
     loading: i,
     refresh: s
   } = T(async () => {
     const {
-      data: l
+      data: u
     } = await P.api_key.list();
-    return l;
+    return u;
   }, {
     refreshDeps: []
   }), {
     data: o = [],
     loading: a
-  } = T(async () => (await P.role.list()).map((p) => ({
-    label: p.name,
-    value: p.id,
-    description: p.description,
-    disabled: p.id === 50
-    // SUPERADMIN
+  } = T(async () => (await P.role.list()).map((l) => ({
+    label: l.name,
+    value: l.id,
+    description: l.description,
+    disabled: l.id === 50
   })), {
     refreshDeps: []
-  }), c = ee(() => o.reduce((l, p) => (l.set(p.value, p.label), l), /* @__PURE__ */ new Map()), [o]), u = (l) => c.get(l) ?? l;
-  return /* @__PURE__ */ d(C, { children: [
-    /* @__PURE__ */ e(w, { pt: t.spacing, position: "right", children: /* @__PURE__ */ e($e, { onSuccess: s, initialRoleID: ((g = o == null ? void 0 : o[0]) == null ? void 0 : g.value) ?? 0 }) }),
-    /* @__PURE__ */ d(v, { mt: t.spacing, sx: {
-      position: "relative"
-    }, children: [
-      /* @__PURE__ */ e(H, { visible: i || a }),
-      /* @__PURE__ */ d($, { horizontalSpacing: t.spacing, verticalSpacing: t.spacing, fontSize: t.size, highlightOnHover: !0, children: [
-        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { children: [
-          /* @__PURE__ */ e("th", { children: "Name" }),
-          /* @__PURE__ */ e("th", { children: "APP ID" }),
-          /* @__PURE__ */ e("th", { children: "Role" }),
-          /* @__PURE__ */ e("th", { children: "Action" })
-        ] }) }),
-        /* @__PURE__ */ e("tbody", { children: r.map((l) => {
-          const {
-            id: p,
-            name: h,
-            app_id: A,
-            role_id: k
-          } = l;
-          return /* @__PURE__ */ d("tr", { children: [
-            /* @__PURE__ */ e("td", { width: 200, children: h }),
-            /* @__PURE__ */ e("td", { width: 200, children: A }),
-            /* @__PURE__ */ e("td", { width: 200, children: u(k) }),
-            /* @__PURE__ */ e("td", { width: 200, children: /* @__PURE__ */ e(w, { position: "left", children: /* @__PURE__ */ e(Ge, { id: p, name: h, onSuccess: s }) }) })
-          ] }, p);
-        }) })
-      ] })
-    ] })
-  ] });
+  }), c = te(() => o.reduce((u, l) => (u.set(l.value, l.label), u), /* @__PURE__ */ new Map()), [o]), p = (u) => {
+    var l;
+    return (l = c.get(u)) != null ? l : u;
+  };
+  return /* @__PURE__ */ d(C, {
+    children: [/* @__PURE__ */ e(w, {
+      pt: t.spacing,
+      position: "right",
+      children: /* @__PURE__ */ e($e, {
+        onSuccess: s,
+        initialRoleID: (h = (g = o == null ? void 0 : o[0]) == null ? void 0 : g.value) != null ? h : 0
+      })
+    }), /* @__PURE__ */ d(v, {
+      mt: t.spacing,
+      sx: {
+        position: "relative"
+      },
+      children: [/* @__PURE__ */ e(H, {
+        visible: i || a
+      }), /* @__PURE__ */ d($, {
+        horizontalSpacing: t.spacing,
+        verticalSpacing: t.spacing,
+        fontSize: t.size,
+        highlightOnHover: !0,
+        children: [/* @__PURE__ */ e("thead", {
+          children: /* @__PURE__ */ d("tr", {
+            children: [/* @__PURE__ */ e("th", {
+              children: "Name"
+            }), /* @__PURE__ */ e("th", {
+              children: "APP ID"
+            }), /* @__PURE__ */ e("th", {
+              children: "Role"
+            }), /* @__PURE__ */ e("th", {
+              children: "Action"
+            })]
+          })
+        }), /* @__PURE__ */ e("tbody", {
+          children: r.map((u) => {
+            const {
+              id: l,
+              name: A,
+              app_id: k,
+              role_id: x
+            } = u;
+            return /* @__PURE__ */ d("tr", {
+              children: [/* @__PURE__ */ e("td", {
+                width: 200,
+                children: A
+              }), /* @__PURE__ */ e("td", {
+                width: 200,
+                children: k
+              }), /* @__PURE__ */ e("td", {
+                width: 200,
+                children: p(x)
+              }), /* @__PURE__ */ e("td", {
+                width: 200,
+                children: /* @__PURE__ */ e(w, {
+                  position: "left",
+                  children: /* @__PURE__ */ e(Ge, {
+                    id: l,
+                    name: A,
+                    onSuccess: s
+                  })
+                })
+              })]
+            }, l);
+          })
+        })]
+      })]
+    })]
+  });
 }
-const lt = () => import("./package-b31012f7.mjs").then(({
+const lt = () => import("./package.5579293f.mjs").then(({
   version: t
 }) => (console.log(`[@devtable/dashboard] version: ${t}`), t));
 export {