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

package/dist/index.mjs

@@ -2424,7 +2424,7 @@ function SelectField({
           Select,
           {
             showSearch: true,
-            value,
+            value: value ? value : void 0,
             defaultValue,
             onChange,
             className: `body-1 flex justify-center w-full ${className ?? ""}`,
@@ -2495,7 +2495,7 @@ function SelectFieldGroup({
           Select2,
           {
             showSearch: true,
-            value,
+            value: value ? value : void 0,
             defaultValue,
             onChange,
             className: `body-1 flex justify-center w-full ${className ?? ""}`,
@@ -2582,7 +2582,7 @@ function SelectFieldStatus({
           {
             disabled,
             suffixIcon: /* @__PURE__ */ jsx29(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,
@@ -2649,7 +2649,7 @@ function SelectFieldStatusReport({
           {
             disabled,
             suffixIcon: /* @__PURE__ */ jsx30(DownOutlined2, { style: { color: value ? "#fff" : "#D9D9D9" } }),
-            value,
+            value: value ? value : void 0,
             onChange,
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
             placeholder,
@@ -2721,7 +2721,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) => {
@@ -2791,7 +2791,7 @@ function SelectCustom({
         /* @__PURE__ */ jsx32(
           Select6,
           {
-            value,
+            value: value ? value : void 0,
             onChange: handleChange,
             placeholder,
             options: filteredOptions,
@@ -2800,16 +2800,29 @@ function SelectCustom({
           }
         ),
         error && /* @__PURE__ */ jsx32("p", { className: "text-red-500 caption-1", children: error }),
-        /* @__PURE__ */ jsx32("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ jsxs28("div", { className: "flex justify-between items-center py-[2px] body-1", children: [
-          /* @__PURE__ */ jsxs28("div", { className: "flex flex-row gap-[8px]", children: [
-            /* @__PURE__ */ jsxs28("p", { children: [
-              index + 1,
-              "."
-            ] }),
-            /* @__PURE__ */ jsx32("p", { children: v })
-          ] }),
-          /* @__PURE__ */ jsx32(IconTrash, { className: "cursor-pointer", onClick: () => handleDelete(v) })
-        ] }, index)) })
+        /* @__PURE__ */ jsx32("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ jsxs28(
+          "div",
+          {
+            className: "flex justify-between items-center py-[2px] body-1",
+            children: [
+              /* @__PURE__ */ jsxs28("div", { className: "flex flex-row gap-[8px]", children: [
+                /* @__PURE__ */ jsxs28("p", { children: [
+                  index + 1,
+                  "."
+                ] }),
+                /* @__PURE__ */ jsx32("p", { children: v })
+              ] }),
+              /* @__PURE__ */ jsx32(
+                IconTrash,
+                {
+                  className: "cursor-pointer",
+                  onClick: () => handleDelete(v)
+                }
+              )
+            ]
+          },
+          index
+        )) })
       ] })
     }
   );
@@ -3891,6 +3904,406 @@ var FilterPopUp = (filter) => {
     ] }) : void 0
   ] });
 };
+
+// src/ProfileSelect/ProfileSelect/ProfileSelect.tsx
+import { useEffect as useEffect7, useRef as useRef6, useState as useState17 } from "react";
+import { IconSearch, IconUsers, IconX as IconX4 } from "@tabler/icons-react";
+import { Input as Input5 } from "antd";
+import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
+function ProfileSelect({
+  allUser,
+  assignUser,
+  mode,
+  onUpdateAssignUser
+}) {
+  const [maxVisible, setMaxVisible] = useState17(4);
+  const [userNotAssign, setUserNotAssign] = useState17([]);
+  const [search, setSearch] = useState17("");
+  const [isShowSelect, setIsShowSelect] = useState17(false);
+  const containerRef = useRef6(null);
+  const selectRef = useRef6(null);
+  const avatarSize = 30;
+  const spacing = 8;
+  useEffect7(() => {
+    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);
+    };
+  }, []);
+  useEffect7(() => {
+    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]);
+  useEffect7(() => {
+    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__ */ jsxs36("div", { ref: containerRef, className: "relative body-1", children: [
+    mode === "icon" ? /* @__PURE__ */ jsx42("button", { children: /* @__PURE__ */ jsx42(
+      IconUsers,
+      {
+        size: 40,
+        className: "p-2 border rounded cursor-pointer",
+        onClick: () => setIsShowSelect(!isShowSelect)
+      }
+    ) }) : mode === "showAssign" ? /* @__PURE__ */ jsxs36(
+      "button",
+      {
+        className: "w-full h-[40px] flex -space-x-2 p-2  border-1 rounded-sm",
+        onClick: () => setIsShowSelect(!isShowSelect),
+        children: [
+          visibleUsers.map((user) => /* @__PURE__ */ jsx42("div", { className: "flex items-center cursor-point", children: /* @__PURE__ */ jsxs36("label", { className: "relative group cursor-pointer", children: [
+            /* @__PURE__ */ jsx42(
+              "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__ */ jsx42(
+              "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__ */ jsx42(IconX4, { className: "w-4 h-4 text-red-500" })
+              }
+            )
+          ] }) }, user.id)),
+          showPlus && /* @__PURE__ */ jsxs36(
+            "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__ */ jsxs36("div", { className: "w-full h-[40px] flex -space-x-2 p-2  border-1 rounded-sm", children: [
+      visibleUsers.map((user) => /* @__PURE__ */ jsx42("div", { className: "flex items-center ", children: /* @__PURE__ */ jsx42("label", { className: "relative group ", children: /* @__PURE__ */ jsx42(
+        "img",
+        {
+          src: user.profile,
+          alt: user.name,
+          style: {
+            width: avatarSize,
+            height: avatarSize,
+            borderRadius: "50%"
+          },
+          className: "border border-white transition"
+        }
+      ) }) }, user.id)),
+      showPlus && /* @__PURE__ */ jsxs36(
+        "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__ */ jsxs36(
+      "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__ */ jsxs36("div", { className: "flex border-1 rounded-md p-2 gap-2 items-center", children: [
+            /* @__PURE__ */ jsx42(IconSearch, {}),
+            /* @__PURE__ */ jsx42(
+              Input5,
+              {
+                variant: "borderless",
+                placeholder: "\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E0A\u0E37\u0E48\u0E2D",
+                className: "body-3",
+                value: search,
+                onChange: (e) => setSearch(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs36("div", { className: "overflow-y-auto h-[250px] pt-2 px-4 body-3", children: [
+            filteredAssigned.length > 0 && /* @__PURE__ */ jsxs36(Fragment8, { children: [
+              /* @__PURE__ */ jsx42("div", { children: "\u0E2A\u0E21\u0E32\u0E0A\u0E34\u0E01\u0E17\u0E35\u0E48\u0E40\u0E25\u0E37\u0E2D\u0E01" }),
+              filteredAssigned.map((user) => /* @__PURE__ */ jsxs36(
+                "button",
+                {
+                  className: "flex items-center group my-1 w-full p-1 rounded hover:bg-gray-100",
+                  onClick: () => onUpdateAssignUser(user, "remove"),
+                  children: [
+                    /* @__PURE__ */ jsxs36("label", { className: "relative  cursor-pointer", children: [
+                      /* @__PURE__ */ jsx42(
+                        "img",
+                        {
+                          src: user.profile,
+                          alt: user.name,
+                          style: {
+                            width: avatarSize,
+                            height: avatarSize,
+                            borderRadius: "50%"
+                          },
+                          className: "border-2 border-red-500"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx42(
+                        "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__ */ jsx42(IconX4, { className: "text-red-500", size: 15 })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx42("span", { className: "ml-2", children: user.name })
+                  ]
+                },
+                user.id
+              ))
+            ] }),
+            /* @__PURE__ */ jsx42("div", { children: "\u0E1C\u0E39\u0E49\u0E04\u0E19 " }),
+            filteredUnassigned.map((user) => /* @__PURE__ */ jsxs36(
+              "button",
+              {
+                className: "flex items-center my-1 hover:bg-gray-100 w-full p-1 rounded",
+                onClick: () => onUpdateAssignUser(user),
+                children: [
+                  /* @__PURE__ */ jsx42(
+                    "img",
+                    {
+                      src: user.profile,
+                      alt: user.name,
+                      style: {
+                        width: avatarSize,
+                        height: avatarSize,
+                        borderRadius: "50%"
+                      },
+                      className: "border "
+                    }
+                  ),
+                  /* @__PURE__ */ jsx42("span", { className: "ml-2", children: user.name })
+                ]
+              },
+              user.id
+            ))
+          ] })
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// src/Button/QRCode/QRCode.tsx
+import { useEffect as useEffect8, useRef as useRef7, useState as useState18 } from "react";
+import QRCode from "qrcode";
+import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+var QRCodeGenerator = ({
+  url,
+  previewSize = 200,
+  defaultExportSize = 512,
+  fileBaseName = "qr-code"
+}) => {
+  const canvasRef = useRef7(null);
+  const [format3, setFormat] = useState18("png");
+  const [exportSize, setExportSize] = useState18(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"
+    }
+  ];
+  useEffect8(() => {
+    if (!canvasRef.current) return;
+    QRCode.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 QRCode.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 QRCode.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__ */ jsxs37("div", { style: { display: "inline-flex", flexDirection: "column", gap: 8 }, className: "justify-center items-center", children: [
+    url === "" ? /* @__PURE__ */ jsx43("div", { className: "border-1 p-2 mb-2", style: { width: `${previewSize}px`, height: `${previewSize}px` } }) : /* @__PURE__ */ jsx43("canvas", { ref: canvasRef, className: "border-1 p-2 mb-2" }),
+    /* @__PURE__ */ jsxs37(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: 8,
+          alignItems: "center",
+          flexWrap: "wrap"
+        },
+        className: "flex-col",
+        children: [
+          /* @__PURE__ */ jsxs37("div", { className: "flex gap-2 mx-2", children: [
+            /* @__PURE__ */ jsx43("label", { className: "border-1 p-2 rounded-md flex flex-col w-1/2 text-sm text-gray-400", children: /* @__PURE__ */ jsx43(
+              SelectField,
+              {
+                label: "\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A",
+                value: format3,
+                onChange: (e) => setFormat(e.target.value),
+                options: typeOption
+              }
+            ) }),
+            /* @__PURE__ */ jsx43("label", { className: "border-1 p-2 rounded-md flex flex-col w-1/2 text-sm text-gray-400", children: /* @__PURE__ */ jsx43(
+              SelectField,
+              {
+                label: "\u0E02\u0E19\u0E32\u0E14 (px)",
+                value: exportSize,
+                onChange: (e) => setExportSize(Number(e.target.value)),
+                options: sizeOption
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx43(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
+import { Tabs } from "antd";
+import { jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
+function TabProject({ tabOption, now, onChange }) {
+  return /* @__PURE__ */ jsx44(
+    Tabs,
+    {
+      activeKey: now,
+      items: tabOption.map((item, i) => {
+        return {
+          key: item.key,
+          label: /* @__PURE__ */ jsxs38(
+            "button",
+            {
+              className: "tab-label flex gap-2 items-center body-1",
+              onClick: () => onChange(item.key),
+              children: [
+                item.icon,
+                /* @__PURE__ */ jsx44("span", { children: item.label })
+              ]
+            }
+          )
+        };
+      })
+    }
+  );
+}
 export {
   AntDModal,
   AntDataTable,
@@ -3914,7 +4327,9 @@ export {
   Loader,
   MenuNavBar,
   PrimaryButton,
+  ProfileSelect,
   ProgressBar,
+  QRCodeGenerator,
   Radio,
   RadioGroup,
   SecondaryButton,
@@ -3928,6 +4343,7 @@ export {
   SortFilter,
   Switch,
   SwitchSelect,
+  TabProject,
   TabSelectionButton,
   TextAreaInput,
   TextInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",