@esic-lab/data-core-ui 0.0.44 → 0.0.46

package/dist/index.js

@@ -377,7 +377,9 @@ __export(index_exports, {
   Loader: () => Loader,
   MenuNavBar: () => MenuNavBar,
   PrimaryButton: () => PrimaryButton,
+  ProfileSelect: () => ProfileSelect,
   ProgressBar: () => ProgressBar,
+  QRCodeGenerator: () => QRCodeGenerator,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
   SecondaryButton: () => SecondaryButton,
@@ -391,6 +393,7 @@ __export(index_exports, {
   SortFilter: () => SortFilter,
   Switch: () => Switch,
   SwitchSelect: () => SwitchSelect,
+  TabProject: () => TabProject,
   TabSelectionButton: () => TabSelectionButton,
   TextAreaInput: () => TextAreaInput,
   TextInput: () => TextInput,
@@ -2482,7 +2485,7 @@ function SelectField({
           import_antd7.Select,
           {
             showSearch: true,
-            value,
+            value: value ? value : void 0,
             defaultValue,
             onChange,
             className: `body-1 flex justify-center w-full ${className ?? ""}`,
@@ -2553,7 +2556,7 @@ function SelectFieldGroup({
           import_antd8.Select,
           {
             showSearch: true,
-            value,
+            value: value ? value : void 0,
             defaultValue,
             onChange,
             className: `body-1 flex justify-center w-full ${className ?? ""}`,
@@ -2640,7 +2643,7 @@ function SelectFieldStatus({
           {
             disabled,
             suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
-            value,
+            value: value ? value : void 0,
             onChange,
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
             placeholder,
@@ -2707,7 +2710,7 @@ function SelectFieldStatusReport({
           {
             disabled,
             suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons2.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
-            value,
+            value: value ? value : void 0,
             onChange,
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
             placeholder,
@@ -2779,7 +2782,7 @@ function SelectFieldTag({
             mode: "tags",
             className: `body-1 flex justify-center w-full ${className ?? ""}`,
             placeholder,
-            value,
+            value: value ? value : void 0,
             onChange: handleChange,
             onSearch: handleSearch,
             filterOption: (input, option) => {
@@ -2849,7 +2852,7 @@ function SelectCustom({
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           import_antd12.Select,
           {
-            value,
+            value: value ? value : void 0,
             onChange: handleChange,
             placeholder,
             options: filteredOptions,
@@ -2858,16 +2861,29 @@ function SelectCustom({
           }
         ),
         error && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-red-500 caption-1", children: error }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex justify-between items-center py-[2px] body-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-row gap-[8px]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { children: [
-              index + 1,
-              "."
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { children: v })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons_react8.IconTrash, { className: "cursor-pointer", onClick: () => handleDelete(v) })
-        ] }, index)) })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          "div",
+          {
+            className: "flex justify-between items-center py-[2px] body-1",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-row gap-[8px]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { children: [
+                  index + 1,
+                  "."
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { children: v })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                import_icons_react8.IconTrash,
+                {
+                  className: "cursor-pointer",
+                  onClick: () => handleDelete(v)
+                }
+              )
+            ]
+          },
+          index
+        )) })
       ] })
     }
   );
@@ -3949,6 +3965,406 @@ var FilterPopUp = (filter) => {
     ] }) : void 0
   ] });
 };
+
+// src/ProfileSelect/ProfileSelect/ProfileSelect.tsx
+var import_react19 = require("react");
+var import_icons_react14 = require("@tabler/icons-react");
+var import_antd21 = require("antd");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function ProfileSelect({
+  allUser,
+  assignUser,
+  mode,
+  onUpdateAssignUser
+}) {
+  const [maxVisible, setMaxVisible] = (0, import_react19.useState)(4);
+  const [userNotAssign, setUserNotAssign] = (0, import_react19.useState)([]);
+  const [search, setSearch] = (0, import_react19.useState)("");
+  const [isShowSelect, setIsShowSelect] = (0, import_react19.useState)(false);
+  const containerRef = (0, import_react19.useRef)(null);
+  const selectRef = (0, import_react19.useRef)(null);
+  const avatarSize = 30;
+  const spacing = 8;
+  (0, import_react19.useEffect)(() => {
+    const handler = (e) => {
+      if (!selectRef?.current?.contains(e.target) && !containerRef?.current?.contains(e.target)) {
+        setIsShowSelect(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+    };
+  }, []);
+  (0, import_react19.useEffect)(() => {
+    if (!containerRef.current) return;
+    const updateWidth = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        const count = Math.floor(rect.width / (avatarSize + spacing));
+        setMaxVisible(Math.max(1, count));
+      }
+    };
+    const resizeObserver = new ResizeObserver(updateWidth);
+    resizeObserver.observe(containerRef.current);
+    updateWidth();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [allUser]);
+  (0, import_react19.useEffect)(() => {
+    setUserNotAssign(
+      allUser.filter((u) => !assignUser.some((au) => au.id === u.id))
+    );
+  }, [allUser, assignUser]);
+  const showPlus = assignUser.length > maxVisible;
+  const visibleUsers = showPlus ? assignUser.slice(0, maxVisible - 1) : assignUser;
+  const extraCount = assignUser.length - (maxVisible - 1);
+  const normalizedSearch = search.trim().toLowerCase();
+  const filteredAssigned = normalizedSearch ? assignUser.filter(
+    (u) => u.name.toLowerCase().includes(normalizedSearch)
+  ) : assignUser;
+  const filteredUnassigned = normalizedSearch ? userNotAssign.filter(
+    (u) => u.name.toLowerCase().includes(normalizedSearch)
+  ) : userNotAssign;
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref: containerRef, className: "relative body-1", children: [
+    mode === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      import_icons_react14.IconUsers,
+      {
+        size: 40,
+        className: "p-2 border rounded cursor-pointer",
+        onClick: () => setIsShowSelect(!isShowSelect)
+      }
+    ) }) : mode === "showAssign" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      "button",
+      {
+        className: "w-full h-[40px] flex -space-x-2 p-2  border-1 rounded-sm",
+        onClick: () => setIsShowSelect(!isShowSelect),
+        children: [
+          visibleUsers.map((user) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex items-center cursor-point", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("label", { className: "relative group cursor-pointer", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "img",
+              {
+                src: user.profile,
+                alt: user.name,
+                style: {
+                  width: avatarSize,
+                  height: avatarSize,
+                  borderRadius: "50%"
+                },
+                className: "border border-white group-hover:border-2 group-hover:border-red-500 transition"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "span",
+              {
+                className: "absolute top-0 right-0 -translate-y-2 translate-x-2 \r\n               rounded-full bg-white opacity-0 group-hover:opacity-100 \r\n               border-2 border-red-500 flex items-center justify-center transition",
+                onClick: () => onUpdateAssignUser(user, "remove"),
+                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_icons_react14.IconX, { className: "w-4 h-4 text-red-500" })
+              }
+            )
+          ] }) }, user.id)),
+          showPlus && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+            "div",
+            {
+              className: "border border-white flex items-center justify-center bg-gray-300 text-black text-sm",
+              style: {
+                width: avatarSize,
+                height: avatarSize,
+                borderRadius: "50%"
+              },
+              children: [
+                "+",
+                extraCount
+              ]
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "w-full h-[40px] flex -space-x-2 p-2  border-1 rounded-sm", children: [
+      visibleUsers.map((user) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex items-center ", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { className: "relative group ", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "img",
+        {
+          src: user.profile,
+          alt: user.name,
+          style: {
+            width: avatarSize,
+            height: avatarSize,
+            borderRadius: "50%"
+          },
+          className: "border border-white transition"
+        }
+      ) }) }, user.id)),
+      showPlus && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        "div",
+        {
+          className: "border border-white flex items-center justify-center bg-gray-300 text-black text-sm",
+          style: {
+            width: avatarSize,
+            height: avatarSize,
+            borderRadius: "50%"
+          },
+          children: [
+            "+",
+            extraCount
+          ]
+        }
+      )
+    ] }),
+    isShowSelect ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      "div",
+      {
+        className: "absolute top-12 min-w-[261px] max-w-[400px] w-full h-[314px] p-2 text-xs border-1 rounded-sm ",
+        ref: selectRef,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex border-1 rounded-md p-2 gap-2 items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_icons_react14.IconSearch, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              import_antd21.Input,
+              {
+                variant: "borderless",
+                placeholder: "\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E0A\u0E37\u0E48\u0E2D",
+                className: "body-3",
+                value: search,
+                onChange: (e) => setSearch(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "overflow-y-auto h-[250px] pt-2 px-4 body-3", children: [
+            filteredAssigned.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: "\u0E2A\u0E21\u0E32\u0E0A\u0E34\u0E01\u0E17\u0E35\u0E48\u0E40\u0E25\u0E37\u0E2D\u0E01" }),
+              filteredAssigned.map((user) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+                "button",
+                {
+                  className: "flex items-center group my-1 w-full p-1 rounded hover:bg-gray-100",
+                  onClick: () => onUpdateAssignUser(user, "remove"),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("label", { className: "relative  cursor-pointer", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                        "img",
+                        {
+                          src: user.profile,
+                          alt: user.name,
+                          style: {
+                            width: avatarSize,
+                            height: avatarSize,
+                            borderRadius: "50%"
+                          },
+                          className: "border-2 border-red-500"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                        "span",
+                        {
+                          className: "absolute top-0 right-0 -translate-y-2 translate-x-2 \r\n               rounded-full bg-white opacity-0 group-hover:opacity-100 \r\n               border-2 border-red-500 flex items-center justify-center transition",
+                          onClick: () => onUpdateAssignUser(user, "remove"),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_icons_react14.IconX, { className: "text-red-500", size: 15 })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ml-2", children: user.name })
+                  ]
+                },
+                user.id
+              ))
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: "\u0E1C\u0E39\u0E49\u0E04\u0E19 " }),
+            filteredUnassigned.map((user) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+              "button",
+              {
+                className: "flex items-center my-1 hover:bg-gray-100 w-full p-1 rounded",
+                onClick: () => onUpdateAssignUser(user),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                    "img",
+                    {
+                      src: user.profile,
+                      alt: user.name,
+                      style: {
+                        width: avatarSize,
+                        height: avatarSize,
+                        borderRadius: "50%"
+                      },
+                      className: "border "
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ml-2", children: user.name })
+                ]
+              },
+              user.id
+            ))
+          ] })
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// src/Button/QRCode/QRCode.tsx
+var import_react20 = require("react");
+var import_qrcode = __toESM(require("qrcode"));
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var QRCodeGenerator = ({
+  url,
+  previewSize = 200,
+  defaultExportSize = 512,
+  fileBaseName = "qr-code"
+}) => {
+  const canvasRef = (0, import_react20.useRef)(null);
+  const [format3, setFormat] = (0, import_react20.useState)("png");
+  const [exportSize, setExportSize] = (0, import_react20.useState)(defaultExportSize);
+  const sizeOption = [
+    {
+      label: "64 x 64",
+      value: "64"
+    },
+    {
+      label: "128 x 128",
+      value: "128"
+    },
+    {
+      label: "256 x 256",
+      value: "256"
+    },
+    {
+      label: "512 x 512",
+      value: "512"
+    },
+    {
+      label: "1024 x 1024",
+      value: "1024"
+    },
+    {
+      label: "2048 x 2048",
+      value: "2048"
+    },
+    {
+      label: "4096 x 4096",
+      value: "4096"
+    }
+  ];
+  const typeOption = [
+    {
+      label: "PNG",
+      value: "png"
+    },
+    {
+      label: "SVG",
+      value: "svg"
+    },
+    {
+      label: "JPEG",
+      value: "jpeg"
+    }
+  ];
+  (0, import_react20.useEffect)(() => {
+    if (!canvasRef.current) return;
+    import_qrcode.default.toCanvas(canvasRef.current, url, { width: previewSize, margin: 1 }, (error) => {
+      if (error) console.error(error);
+    });
+  }, [url, previewSize]);
+  const download = async () => {
+    try {
+      if (format3 === "svg") {
+        const svgString = await import_qrcode.default.toString(url, {
+          type: "svg",
+          width: exportSize,
+          margin: 1
+        });
+        const blob = new Blob([svgString], { type: "image/svg+xml" });
+        const objUrl = URL.createObjectURL(blob);
+        triggerDownload(objUrl, `${fileBaseName}.svg`);
+        URL.revokeObjectURL(objUrl);
+      } else {
+        const offscreen = document.createElement("canvas");
+        await import_qrcode.default.toCanvas(offscreen, url, {
+          width: exportSize,
+          margin: 1
+        });
+        const mime = format3 === "png" ? "image/png" : "image/jpeg";
+        const dataURL = format3 === "jpeg" ? offscreen.toDataURL(mime, 0.92) : offscreen.toDataURL(mime);
+        triggerDownload(dataURL, `${fileBaseName}.${format3}`);
+      }
+    } catch (err) {
+      console.error("Failed to generate QR export:", err);
+      alert("Sorry, something went wrong creating the download.");
+    }
+  };
+  const triggerDownload = (href, filename) => {
+    const a = document.createElement("a");
+    a.href = href;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { style: { display: "inline-flex", flexDirection: "column", gap: 8 }, className: "justify-center items-center", children: [
+    url === "" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "border-1 p-2 mb-2", style: { width: `${previewSize}px`, height: `${previewSize}px` } }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("canvas", { ref: canvasRef, className: "border-1 p-2 mb-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: 8,
+          alignItems: "center",
+          flexWrap: "wrap"
+        },
+        className: "flex-col",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex gap-2 mx-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("label", { className: "border-1 p-2 rounded-md flex flex-col w-1/2 text-sm text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              SelectField,
+              {
+                label: "\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A",
+                value: format3,
+                onChange: (e) => setFormat(e.target.value),
+                options: typeOption
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("label", { className: "border-1 p-2 rounded-md flex flex-col w-1/2 text-sm text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              SelectField,
+              {
+                label: "\u0E02\u0E19\u0E32\u0E14 (px)",
+                value: exportSize,
+                onChange: (e) => setExportSize(Number(e.target.value)),
+                options: sizeOption
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PrimaryButton, { onClick: download, disabled: url === "", textColor: "white", title: "\u0E14\u0E32\u0E27\u0E42\u0E2B\u0E25\u0E14\u0E23\u0E2B\u0E31\u0E2A QR" })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/TabPropject/Tabproject/TabProject.tsx
+var import_antd22 = require("antd");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function TabProject({ tabOption, now, onChange }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_antd22.Tabs,
+    {
+      activeKey: now,
+      items: tabOption.map((item, i) => {
+        return {
+          key: item.key,
+          label: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+            "button",
+            {
+              className: "tab-label flex gap-2 items-center body-1",
+              onClick: () => onChange(item.key),
+              children: [
+                item.icon,
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: item.label })
+              ]
+            }
+          )
+        };
+      })
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AntDModal,
@@ -3973,7 +4389,9 @@ var FilterPopUp = (filter) => {
   Loader,
   MenuNavBar,
   PrimaryButton,
+  ProfileSelect,
   ProgressBar,
+  QRCodeGenerator,
   Radio,
   RadioGroup,
   SecondaryButton,
@@ -3987,6 +4405,7 @@ var FilterPopUp = (filter) => {
   SortFilter,
   Switch,
   SwitchSelect,
+  TabProject,
   TabSelectionButton,
   TextAreaInput,
   TextInput,