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

package/dist/index.css

@@ -465,6 +465,12 @@
   .h-\[47px\] {
     height: 47px;
   }
+  .h-\[250px\] {
+    height: 250px;
+  }
+  .h-\[314px\] {
+    height: 314px;
+  }
   .h-\[500px\] {
     height: 500px;
   }
@@ -480,12 +486,6 @@
   .h-screen {
     height: 100vh;
   }
-  .max-h-\[250px\] {
-    max-height: 250px;
-  }
-  .max-h-\[300px\] {
-    max-height: 300px;
-  }
   .min-h-\[120px\] {
     min-height: 120px;
   }
@@ -573,9 +573,6 @@
   .w-\[250px\] {
     width: 250px;
   }
-  .w-\[300px\] {
-    width: 300px;
-  }
   .w-\[500px\] {
     width: 500px;
   }
@@ -588,6 +585,12 @@
   .w-full {
     width: 100%;
   }
+  .max-w-\[400px\] {
+    max-width: 400px;
+  }
+  .min-w-\[261px\] {
+    min-width: 261px;
+  }
   .min-w-\[400px\] {
     min-width: 400px;
   }
@@ -1001,6 +1004,9 @@
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -1034,6 +1040,9 @@
   .py-\[10px\] {
     padding-block: 10px;
   }
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }

package/dist/index.d.mts

@@ -7,6 +7,7 @@ import { InputNumberProps, SelectProps } from 'antd';
 import { Color } from 'antd/es/color-picker';
 import { MessageInstance } from 'antd/es/message/interface';
 import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
+import { ReactNode as ReactNode$1 } from '@tabler/icons-react';
 
 type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 type BaseColor = "primary" | "gray" | "green" | "red" | "yellow" | "blue";
@@ -542,4 +543,37 @@ declare const FilterPopUp: (filter: {
     handleSearch: (listFiler: string[]) => void;
 }) => react_jsx_runtime.JSX.Element;
 
-export { AntDModal, AntDataTable, Breadcrumbs, Calendar, Checkbox, CheckboxGroup, ColorPalettePickerBasic, ColorPickerBasic, DataTable, DatePickerBasic, DatePickerRange, FileUploader, FilterPopUp, GhostButton, HeadingPage, Indicator, InputField, InputFieldNumber, KpiSection, Loader, MenuNavBar, type MenuNavBarProps, PrimaryButton, ProgressBar, Radio, RadioGroup, SecondaryButton, SelectCustom, SelectField, SelectFieldGroup, SelectFieldStatus, SelectFieldStatusReport, SelectFieldTag, Sidebar, SortFilter, Switch, SwitchSelect, TabSelectionButton, TextAreaInput, TextInput, TopNavBar, messageError, messageInfo, messageLoading, messageSuccess, messageWarning, setMessageApi };
+interface UserData {
+    id: string;
+    name: string;
+    profile: string;
+}
+interface ProfileSelectProp {
+    allUser: UserData[];
+    assignUser: UserData[];
+    mode: "show" | "showAssign" | "icon";
+    onUpdateAssignUser: (user: UserData, action?: "add" | "remove") => void;
+}
+declare function ProfileSelect({ allUser, assignUser, mode, onUpdateAssignUser, }: ProfileSelectProp): react_jsx_runtime.JSX.Element;
+
+interface QRCodeGeneratorProps {
+    url: string;
+    previewSize?: number;
+    defaultExportSize?: number;
+    fileBaseName?: string;
+}
+declare const QRCodeGenerator: react.FC<QRCodeGeneratorProps>;
+
+interface TabProjectProp {
+    tabOption: {
+        key: string;
+        label: string;
+        icon: ReactNode$1;
+    }[];
+    projectId: string;
+    now: string;
+    onChange: (key: string) => void;
+}
+declare function TabProject({ tabOption, now, onChange }: TabProjectProp): react_jsx_runtime.JSX.Element;
+
+export { AntDModal, AntDataTable, Breadcrumbs, Calendar, Checkbox, CheckboxGroup, ColorPalettePickerBasic, ColorPickerBasic, DataTable, DatePickerBasic, DatePickerRange, FileUploader, FilterPopUp, GhostButton, HeadingPage, Indicator, InputField, InputFieldNumber, KpiSection, Loader, MenuNavBar, type MenuNavBarProps, PrimaryButton, ProfileSelect, ProgressBar, QRCodeGenerator, Radio, RadioGroup, SecondaryButton, SelectCustom, SelectField, SelectFieldGroup, SelectFieldStatus, SelectFieldStatusReport, SelectFieldTag, Sidebar, SortFilter, Switch, SwitchSelect, TabProject, TabSelectionButton, TextAreaInput, TextInput, TopNavBar, messageError, messageInfo, messageLoading, messageSuccess, messageWarning, setMessageApi };

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import { InputNumberProps, SelectProps } from 'antd';
 import { Color } from 'antd/es/color-picker';
 import { MessageInstance } from 'antd/es/message/interface';
 import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
+import { ReactNode as ReactNode$1 } from '@tabler/icons-react';
 
 type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 type BaseColor = "primary" | "gray" | "green" | "red" | "yellow" | "blue";
@@ -542,4 +543,37 @@ declare const FilterPopUp: (filter: {
     handleSearch: (listFiler: string[]) => void;
 }) => react_jsx_runtime.JSX.Element;
 
-export { AntDModal, AntDataTable, Breadcrumbs, Calendar, Checkbox, CheckboxGroup, ColorPalettePickerBasic, ColorPickerBasic, DataTable, DatePickerBasic, DatePickerRange, FileUploader, FilterPopUp, GhostButton, HeadingPage, Indicator, InputField, InputFieldNumber, KpiSection, Loader, MenuNavBar, type MenuNavBarProps, PrimaryButton, ProgressBar, Radio, RadioGroup, SecondaryButton, SelectCustom, SelectField, SelectFieldGroup, SelectFieldStatus, SelectFieldStatusReport, SelectFieldTag, Sidebar, SortFilter, Switch, SwitchSelect, TabSelectionButton, TextAreaInput, TextInput, TopNavBar, messageError, messageInfo, messageLoading, messageSuccess, messageWarning, setMessageApi };
+interface UserData {
+    id: string;
+    name: string;
+    profile: string;
+}
+interface ProfileSelectProp {
+    allUser: UserData[];
+    assignUser: UserData[];
+    mode: "show" | "showAssign" | "icon";
+    onUpdateAssignUser: (user: UserData, action?: "add" | "remove") => void;
+}
+declare function ProfileSelect({ allUser, assignUser, mode, onUpdateAssignUser, }: ProfileSelectProp): react_jsx_runtime.JSX.Element;
+
+interface QRCodeGeneratorProps {
+    url: string;
+    previewSize?: number;
+    defaultExportSize?: number;
+    fileBaseName?: string;
+}
+declare const QRCodeGenerator: react.FC<QRCodeGeneratorProps>;
+
+interface TabProjectProp {
+    tabOption: {
+        key: string;
+        label: string;
+        icon: ReactNode$1;
+    }[];
+    projectId: string;
+    now: string;
+    onChange: (key: string) => void;
+}
+declare function TabProject({ tabOption, now, onChange }: TabProjectProp): react_jsx_runtime.JSX.Element;
+
+export { AntDModal, AntDataTable, Breadcrumbs, Calendar, Checkbox, CheckboxGroup, ColorPalettePickerBasic, ColorPickerBasic, DataTable, DatePickerBasic, DatePickerRange, FileUploader, FilterPopUp, GhostButton, HeadingPage, Indicator, InputField, InputFieldNumber, KpiSection, Loader, MenuNavBar, type MenuNavBarProps, PrimaryButton, ProfileSelect, ProgressBar, QRCodeGenerator, Radio, RadioGroup, SecondaryButton, SelectCustom, SelectField, SelectFieldGroup, SelectFieldStatus, SelectFieldStatusReport, SelectFieldTag, Sidebar, SortFilter, Switch, SwitchSelect, TabProject, TabSelectionButton, TextAreaInput, TextInput, TopNavBar, messageError, messageInfo, messageLoading, messageSuccess, messageWarning, setMessageApi };

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,
@@ -3962,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,
@@ -3986,7 +4389,9 @@ var FilterPopUp = (filter) => {
   Loader,
   MenuNavBar,
   PrimaryButton,
+  ProfileSelect,
   ProgressBar,
+  QRCodeGenerator,
   Radio,
   RadioGroup,
   SecondaryButton,
@@ -4000,6 +4405,7 @@ var FilterPopUp = (filter) => {
   SortFilter,
   Switch,
   SwitchSelect,
+  TabProject,
   TabSelectionButton,
   TextAreaInput,
   TextInput,

package/dist/index.mjs

@@ -3904,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,
@@ -3927,7 +4327,9 @@ export {
   Loader,
   MenuNavBar,
   PrimaryButton,
+  ProfileSelect,
   ProgressBar,
+  QRCodeGenerator,
   Radio,
   RadioGroup,
   SecondaryButton,
@@ -3941,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.45",
+  "version": "0.0.46",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",