@esic-lab/data-core-ui 0.0.45 → 0.0.47

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,
@@ -3750,41 +3753,66 @@ function Indicator({
   ],
   type,
   arrayData,
-  setArrayData
+  setArrayData,
+  canEdit,
+  onDeleteClick
 }) {
   const [valueSwitch, setValueSwitch] = (0, import_react17.useState)("TEXT");
   const [cacheData, setCacheData] = (0, import_react17.useState)({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
-    numberValue: "",
+    numberValue: 0,
     unit: ""
   });
   const [cacheEditData, setCacheEditData] = (0, import_react17.useState)({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
-    numberValue: "",
+    numberValue: 0,
     unit: ""
   });
   const [editIndex, setEditIndex] = (0, import_react17.useState)(null);
+  const [addError, setAddError] = (0, import_react17.useState)({});
+  const [editError, setEditError] = (0, import_react17.useState)({});
   const handleAddIndicator = () => {
-    if (cacheData.textValue.trim() === "") return;
-    setArrayData([
-      ...arrayData,
-      valueSwitch === "TEXT" ? {
-        indicatorType: type,
-        inputType: "TEXT",
-        textValue: cacheData.textValue
-      } : cacheData
-    ]);
+    const nextErr = {};
+    const textValue = (cacheData.textValue ?? "").trim();
+    const unit = (cacheData.unit ?? "").trim();
+    if (textValue === "") {
+      nextErr.textValue = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14";
+    }
+    if (valueSwitch === "NUMBER") {
+      const num = cacheData.numberValue;
+      if (num === void 0 || num === null || Number(num) <= 0) {
+        nextErr.numberValue = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E04\u0E48\u0E32\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02";
+      }
+      if (unit === "") {
+        nextErr.unit = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E19\u0E48\u0E27\u0E22";
+      }
+    }
+    setAddError(nextErr);
+    if (Object.keys(nextErr).length > 0) return;
+    const newItem = valueSwitch === "TEXT" ? {
+      indicatorType: type,
+      inputType: "TEXT",
+      textValue
+    } : {
+      indicatorType: type,
+      inputType: "NUMBER",
+      textValue,
+      numberValue: Number(cacheData.numberValue),
+      unit
+    };
+    setArrayData([...arrayData, newItem]);
     setCacheData({
       indicatorType: type,
       inputType: valueSwitch,
       textValue: "",
-      numberValue: "",
+      numberValue: 0,
       unit: ""
     });
+    setAddError({});
   };
   const handleChangeCashData = (key, value) => {
     setCacheData((prev) => ({
@@ -3810,11 +3838,32 @@ function Indicator({
     setEditIndex(null);
   };
   const handleConfirmEditIndicator = (index) => {
-    if (cacheEditData.textValue.trim() === "") return;
+    const nextErr = {};
+    const textValue = (cacheEditData.textValue ?? "").trim();
+    const unit = (cacheEditData.unit ?? "").trim();
+    const num = cacheEditData.numberValue;
+    if (textValue === "") {
+      nextErr.textValue = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14";
+    }
+    if (cacheEditData.inputType === "NUMBER") {
+      if (num === void 0 || num === null || Number(num) <= 0) {
+        nextErr.numberValue = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E04\u0E48\u0E32\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02";
+      }
+      if (unit === "") {
+        nextErr.unit = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E19\u0E48\u0E27\u0E22";
+      }
+    }
+    setEditError(nextErr);
+    if (Object.keys(nextErr).length > 0) return;
     const newData = [...arrayData];
-    newData[index] = cacheEditData;
+    newData[index] = {
+      ...cacheEditData,
+      textValue,
+      ...cacheEditData.inputType === "NUMBER" ? { numberValue: Number(num), unit } : { numberValue: void 0, unit: void 0 }
+    };
     setArrayData(newData);
     setEditIndex(null);
+    setEditError({});
   };
   const handleChangeEditCashData = (e) => {
     const { name, value } = e.target;
@@ -3830,16 +3879,29 @@ function Indicator({
       {
         className: `space-x-2 grid ${valueSwitch === "TEXT" ? `grid-cols-[140px_1fr_50px]` : `grid-cols-[140px_1fr_200px_200px_50px]`} items-start`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SwitchSelect, { option, onClick: handleClick, value: valueSwitch, label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17", required: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            SwitchSelect,
+            {
+              option,
+              onClick: handleClick,
+              value: valueSwitch,
+              label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17",
+              required: true
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             InputField,
             {
               label: `\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
               value: cacheData.textValue,
               className: "h-[32px]",
-              onChange: (e) => handleChangeCashData("textValue", String(e)),
+              onChange: (val) => {
+                handleChangeCashData("textValue", val ?? "");
+                setAddError((p) => ({ ...p, textValue: void 0 }));
+              },
               placeholder: `\u0E23\u0E30\u0E1A\u0E38\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
-              required: true
+              required: true,
+              error: addError.textValue
             }
           ),
           valueSwitch === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
@@ -3847,11 +3909,16 @@ function Indicator({
               InputFieldNumber,
               {
                 label: `\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
-                value: cacheData.numberValue ?? "",
+                value: cacheData.numberValue ?? 0,
                 className: "h-[32px]",
-                onChange: (e) => handleChangeCashData("numberValue", String(e)),
+                onChange: (val) => {
+                  handleChangeCashData("numberValue", val ?? 0);
+                  setAddError((p) => ({ ...p, numberValue: void 0 }));
+                },
+                min: 0,
                 placeholder: `\u0E23\u0E30\u0E1A\u0E38\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
-                required: true
+                required: true,
+                error: addError.numberValue
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -3860,53 +3927,83 @@ function Indicator({
                 label: `\u0E2B\u0E19\u0E48\u0E27\u0E22`,
                 value: cacheData.unit ?? "",
                 className: "h-[32px]",
-                onChange: (e) => handleChangeCashData("unit", String(e)),
+                onChange: (val) => {
+                  handleChangeCashData("unit", val ?? "");
+                  setAddError((p) => ({ ...p, unit: void 0 }));
+                },
                 placeholder: "\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E19\u0E48\u0E27\u0E22",
-                required: true
+                required: true,
+                error: addError.unit
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react12.IconCirclePlus, { onClick: handleAddIndicator, className: "mt-7 cursor-pointer", size: 32 })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_icons_react12.IconCirclePlus,
+            {
+              onClick: handleAddIndicator,
+              className: "mt-8 cursor-pointer",
+              size: 32
+            }
+          )
         ]
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: arrayData.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
-        className: `space-y-4 grid ${item.inputType === "TEXT" ? `grid-cols-[140px_1fr_50px_50px]` : `grid-cols-[140px_1fr_200px_150px_50px_50px]`} items-start`,
+        className: `space-y-2 grid ${item.inputType === "TEXT" ? `grid-cols-[140px_1fr_50px_50px]` : `grid-cols-[140px_1fr_200px_150px_50px_50px]`} items-start`,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.inputType === "TEXT" ? "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" : "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }),
-          index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            import_antd20.Input,
-            {
-              className: "body-1 mt-2",
-              variant: "underlined",
-              value: cacheEditData.textValue,
-              name: "textValue",
-              onChange: (e) => handleChangeEditCashData(e)
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.textValue }),
-          item.inputType === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-            index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-              import_antd20.Input,
-              {
-                className: "body-1 mt-2",
-                variant: "underlined",
-                value: cacheEditData.numberValue,
-                name: "numberValue",
-                onChange: (e) => handleChangeEditCashData(e)
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.numberValue }),
-            index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-[8px]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               import_antd20.Input,
               {
                 className: "body-1 mt-2",
                 variant: "underlined",
-                value: cacheEditData.unit,
-                name: "unit",
-                onChange: (e) => handleChangeEditCashData(e)
+                value: cacheEditData.textValue,
+                name: "textValue",
+                onChange: (e) => {
+                  handleChangeEditCashData(e);
+                  setEditError((p) => ({ ...p, textValue: void 0 }));
+                }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.unit })
+            ),
+            editError.textValue && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-red-500 caption-1", children: editError.textValue })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.textValue }),
+          item.inputType === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+            index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-[8px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                import_antd20.Input,
+                {
+                  type: "number",
+                  className: "body-1 mt-2",
+                  variant: "underlined",
+                  value: cacheEditData.numberValue,
+                  name: "numberValue",
+                  onChange: (e) => {
+                    handleChangeEditCashData(e);
+                    setEditError((p) => ({ ...p, numberValue: void 0 }));
+                  }
+                }
+              ),
+              editError.numberValue && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-red-500 caption-1", children: editError.numberValue })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.numberValue }),
+            index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-[8px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                import_antd20.Input,
+                {
+                  className: "body-1 mt-2",
+                  variant: "underlined",
+                  value: cacheEditData.unit,
+                  name: "unit",
+                  onChange: (e) => {
+                    handleChangeEditCashData(e);
+                    setEditError((p) => ({ ...p, unit: void 0 }));
+                  }
+                }
+              ),
+              editError.unit && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-red-500 caption-1", children: editError.unit })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.unit })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2 flex", children: editIndex !== null ? editIndex === index ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex", children: [
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -3916,11 +4013,36 @@ function Indicator({
                 onClick: () => handleConfirmEditIndicator(index)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react12.IconX, { className: "cursor-pointer text-red-600", onClick: handleCancelEditIndicator })
-          ] }) : void 0 : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react12.IconPencil, { className: "cursor-pointer", onClick: () => handleEditIndicator(index) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react12.IconTrash, { onClick: () => handleDeleteIndicator(index) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              import_icons_react12.IconX,
+              {
+                className: "cursor-pointer text-red-600",
+                onClick: handleCancelEditIndicator
+              }
+            )
+          ] }) : void 0 : canEdit && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_icons_react12.IconPencil,
+            {
+              className: "cursor-pointer",
+              onClick: () => handleEditIndicator(index)
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_icons_react12.IconTrash,
+            {
+              onClick: () => {
+                const confirm = () => handleDeleteIndicator(index);
+                if (onDeleteClick) {
+                  onDeleteClick({ index, item, confirm });
+                } else {
+                  confirm();
+                }
+              }
+            }
+          ) })
         ]
-      }
+      },
+      index
     )) })
   ] });
 }
@@ -3962,6 +4084,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,
@@ -3986,7 +4508,9 @@ var FilterPopUp = (filter) => {
   Loader,
   MenuNavBar,
   PrimaryButton,
+  ProfileSelect,
   ProgressBar,
+  QRCodeGenerator,
   Radio,
   RadioGroup,
   SecondaryButton,
@@ -4000,6 +4524,7 @@ var FilterPopUp = (filter) => {
   SortFilter,
   Switch,
   SwitchSelect,
+  TabProject,
   TabSelectionButton,
   TextAreaInput,
   TextInput,