@zenify-omni/chat-ui-react-js 0.1.0

package/components/org-tree/group-tree-select.js

@@ -0,0 +1,220 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Tree } from "react-arborist";
+import { ChevronRight, ChevronDown, Search, X } from "lucide-react";
+import { CaretSortIcon } from "@radix-ui/react-icons";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../ui/popover.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../ui/tooltip.js";
+import useDebounce from "../../hooks/use-debounce.js";
+import { useOrgTree } from "../../hooks/use-org-tree.js";
+import {
+  eqId,
+  filterBySearch,
+  getGroupDisplayName,
+  findNode
+} from "@zenify-omni/chat-js/utils/org-tree.js";
+import { cn } from "../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+function filterTree(nodes, visibleIds) {
+  if (!visibleIds || !nodes) return nodes;
+  return nodes.filter((n) => visibleIds.has(Number(n.id))).map((n) => ({
+    ...n,
+    children: filterTree(n.children, visibleIds)
+  }));
+}
+function makeNodeRenderer({ selectedId, onPick }) {
+  return function NodeRow({ node, style, dragHandle }) {
+    const id = Number(node.data.id);
+    const isSelected = selectedId != null && Number(selectedId) === id;
+    const isLeaf = node.isLeaf;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dragHandle,
+        style,
+        onClick: () => {
+          if (isLeaf) {
+            onPick?.(id);
+          } else {
+            node.toggle();
+          }
+        },
+        className: cn(
+          "group flex w-full cursor-pointer items-center gap-1 rounded-sm px-1 py-1 text-sm hover:bg-accent",
+          isSelected && "bg-primary/10 font-medium"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: !isLeaf ? node.isOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-60" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-60" }) : null }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: node.data.name }),
+          !isLeaf && !isSelected && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              title: i18n.t("common:label.selectThisUnit", {
+                defaultValue: "Ch\u1ECDn \u0111\u01A1n v\u1ECB n\xE0y"
+              }),
+              onClick: (e) => {
+                e.stopPropagation();
+                onPick?.(id);
+              },
+              className: "shrink-0 rounded bg-primary/90 px-2 py-0.5 text-xs text-primary-foreground opacity-0 transition-opacity hover:bg-primary group-hover:opacity-100",
+              children: i18n.t("common:action.select", { defaultValue: "Ch\u1ECDn" })
+            }
+          )
+        ]
+      }
+    );
+  };
+}
+function GroupTreeSelect({
+  value,
+  onChange,
+  disabled,
+  placeholder = "Ch\u1ECDn \u0111\u01A1n v\u1ECB",
+  clearable = true,
+  className,
+  list: listProp,
+  tree: treeProp
+}) {
+  const { t } = useTranslation();
+  const triggerRef = useRef(null);
+  const treeRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const debounceSearch = useDebounce(searchText, 200);
+  const hasInjectedData = listProp != null && treeProp != null;
+  const { tree: ownTree, list: ownList } = useOrgTree({
+    enabled: hasInjectedData ? false : void 0
+  });
+  const data = hasInjectedData ? treeProp : ownTree;
+  const list = hasInjectedData ? listProp : ownList;
+  const selectedNode = useMemo(() => findNode(list, value), [list, value]);
+  const displayLabel = selectedNode?.name || "";
+  const fullPath = useMemo(
+    () => getGroupDisplayName(value, list, ""),
+    [value, list]
+  );
+  const searchVisibleIds = useMemo(
+    () => filterBySearch(list, debounceSearch),
+    [list, debounceSearch]
+  );
+  useLayoutEffect(() => {
+    if (!open || !treeRef.current) return;
+    const tree = treeRef.current;
+    if (debounceSearch.trim()) {
+      tree.openAll();
+      return;
+    }
+    tree.closeAll();
+    if (!selectedNode) return;
+    const node = tree.get(String(selectedNode.id));
+    if (!node) return;
+    let p = node.parent;
+    while (p) {
+      p.open();
+      p = p.parent;
+    }
+  }, [open, selectedNode, debounceSearch]);
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange?.(null);
+  };
+  const triggerButton = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      disabled,
+      className: cn(
+        "flex h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-card px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:bg-muted",
+        !value && "text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: displayLabel || placeholder }),
+        clearable && value && !disabled ? /* @__PURE__ */ jsx(
+          X,
+          {
+            role: "button",
+            tabIndex: -1,
+            className: "h-3.5 w-3.5 shrink-0 opacity-50 hover:opacity-100",
+            onClick: handleClear
+          }
+        ) : /* @__PURE__ */ jsx(CaretSortIcon, { className: "h-4 w-4 shrink-0 opacity-50" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: true, children: [
+    /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(Tooltip, { open: !!value && !open ? void 0 : false, children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: triggerButton }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { variant: "dark", side: "bottom", children: fullPath })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        align: "start",
+        className: "w-[--radix-popover-trigger-width] min-w-[280px] p-0",
+        sideOffset: 4,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b px-3", children: [
+            /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 opacity-50" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: "flex h-9 w-full bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground",
+                placeholder: t("common:placeholder.searchUnitName", {
+                  defaultValue: "T\xECm t\xEAn \u0111\u01A1n v\u1ECB..."
+                }),
+                value: searchText,
+                onChange: (e) => setSearchText(e.target.value)
+              }
+            )
+          ] }),
+          !list?.length || searchVisibleIds && searchVisibleIds.size === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: list?.length ? t("common:empty.noUnitFound", {
+            defaultValue: "Kh\xF4ng t\xECm th\u1EA5y \u0111\u01A1n v\u1ECB"
+          }) : t("common:empty.noUnit", { defaultValue: "Ch\u01B0a c\xF3 \u0111\u01A1n v\u1ECB" }) }) : /* @__PURE__ */ jsx("div", { className: "px-2 py-2", children: /* @__PURE__ */ jsx(
+            Tree,
+            {
+              ref: treeRef,
+              data: searchVisibleIds ? filterTree(data, searchVisibleIds) : data,
+              indent: 20,
+              height: 300,
+              width: "100%",
+              rowHeight: 32,
+              padding: 4,
+              idAccessor: (n) => String(n.id),
+              childrenAccessor: (n) => n.children,
+              openByDefault: false,
+              selection: value != null ? String(value) : void 0,
+              disableDrag: true,
+              disableDrop: true,
+              disableEdit: true,
+              children: makeNodeRenderer({
+                selectedId: value,
+                onPick: (id) => {
+                  if (!eqId(id, value)) {
+                    onChange?.(Number(id));
+                    setOpen(false);
+                  }
+                }
+              })
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  GroupTreeSelect as default
+};

package/components/posts-route/dialog-select-posts.js

@@ -0,0 +1,284 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { format } from "date-fns";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../ui/dialog.js";
+import { Button } from "../custom/button.js";
+import { Checkbox } from "../ui/checkbox.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../ui/select.js";
+import { getPublishedPosts } from "@zenify-omni/chat-js/api/post.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { useTranslation } from "react-i18next";
+const PAGE_SIZE_OPTIONS = [5, 10, 20];
+function getPostId(post) {
+  return post?.id || post?._id || post?.post_id;
+}
+function getPostThumbnail(post) {
+  return post.attachments?.data?.[0]?.media?.image?.src || null;
+}
+function DialogSelectPosts({
+  open,
+  onClose,
+  pageId,
+  selectedPosts = [],
+  onConfirm
+}) {
+  const { t } = useTranslation();
+  const [tempSelected, setTempSelected] = useState([]);
+  const [pageSize, setPageSize] = useState(PAGE_SIZE_OPTIONS[1]);
+  const [cursors, setCursors] = useState({ before: null, after: null });
+  const [direction, setDirection] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const user = getUser();
+  const tenantId = user?.tenant_id;
+  const handleOpenChange = useCallback(
+    (isOpen) => {
+      if (!isOpen) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  const { data: postsData, isLoading } = useQuery({
+    queryKey: ["dialog-published-posts", pageId, pageSize, direction, cursors],
+    queryFn: async () => {
+      const params = {
+        tenant_id: tenantId,
+        page_id: pageId,
+        limit: pageSize
+      };
+      if (direction === "next" && cursors.after) {
+        params.after = cursors.after;
+      }
+      if (direction === "prev" && cursors.before) {
+        params.before = cursors.before;
+      }
+      const response = await getPublishedPosts({ params });
+      return response.data;
+    },
+    enabled: open && !!pageId && !!tenantId
+  });
+  const posts = useMemo(
+    () => postsData?.data?.data || postsData?.list || [],
+    [postsData]
+  );
+  const paging = postsData?.data?.paging;
+  const totalCount = postsData?.data?.summary?.total_count || posts.length;
+  useEffect(() => {
+    if (!open || selectedPosts.length === 0) return;
+    setTempSelected((prev) => {
+      const selectedIds = selectedPosts.map((e) => {
+        e._id = null;
+        return getPostId(e);
+      });
+      return selectedIds.map((sid) => {
+        const fullPost = posts.find((p) => getPostId(p) === sid);
+        const existing = prev.find((p) => getPostId(p) === sid);
+        return fullPost || existing || selectedPosts.find((p) => getPostId(p) === sid);
+      });
+    });
+  }, [open, selectedPosts, posts]);
+  useEffect(() => {
+    if (open) {
+      setCursors({ before: null, after: null });
+      setDirection(null);
+      setCurrentPage(1);
+    }
+  }, [open]);
+  const tempSelectedIds = tempSelected.map(getPostId);
+  const togglePost = useCallback((post) => {
+    const id = getPostId(post);
+    setTempSelected((prev) => {
+      const exists = prev.some((p) => getPostId(p) === id);
+      if (exists) {
+        return prev.filter((p) => getPostId(p) !== id);
+      }
+      return [...prev, post];
+    });
+  }, []);
+  const handleConfirm = useCallback(() => {
+    onConfirm(tempSelected);
+    onClose();
+  }, [tempSelected, onConfirm, onClose]);
+  const handleNextPage = useCallback(() => {
+    if (paging?.cursors?.after) {
+      setCursors({
+        before: paging.cursors.before,
+        after: paging.cursors.after
+      });
+      setDirection("next");
+      setCurrentPage((prev) => prev + 1);
+    }
+  }, [paging]);
+  const handlePrevPage = useCallback(() => {
+    if (paging?.cursors?.before) {
+      setCursors({
+        before: paging.cursors.before,
+        after: paging.cursors.after
+      });
+      setDirection("prev");
+      setCurrentPage((prev) => Math.max(1, prev - 1));
+    }
+  }, [paging]);
+  const totalPages = Math.ceil(totalCount / pageSize) || 1;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[85vh] sm:max-w-2xl", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("posts:dialog.selectPosts", { defaultValue: "Ch\u1ECDn b\xE0i vi\u1EBFt" }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex max-h-[55vh] flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-muted/50", children: /* @__PURE__ */ jsxs("tr", { className: "border-b", children: [
+          /* @__PURE__ */ jsx("th", { className: "w-10 px-2 py-2" }),
+          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left font-medium", children: t("common:label.post", { defaultValue: "B\xE0i vi\u1EBFt" }) }),
+          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left font-medium", children: t("posts:column.postedAt", {
+            defaultValue: "Th\u1EDDi gian \u0111\u0103ng"
+          }) })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: isLoading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: 3,
+            className: "py-8 text-center text-muted-foreground",
+            children: t("common:status.loading", {
+              defaultValue: "\u0110ang t\u1EA3i..."
+            })
+          }
+        ) }) : posts.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: 3,
+            className: "py-8 text-center text-muted-foreground",
+            children: t("posts:empty.noPosts", {
+              defaultValue: "Kh\xF4ng c\xF3 b\xE0i vi\u1EBFt n\xE0o"
+            })
+          }
+        ) }) : posts.map((post) => {
+          const id = getPostId(post);
+          const isChecked = tempSelectedIds.includes(id);
+          const thumbnail = getPostThumbnail(post);
+          return /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              className: "cursor-pointer border-b hover:bg-muted/30",
+              onClick: () => togglePost(post),
+              children: [
+                /* @__PURE__ */ jsx("td", { className: "px-2 py-2 text-center", children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: isChecked,
+                    onCheckedChange: () => togglePost(post),
+                    onClick: (e) => e.stopPropagation()
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx("div", { className: "h-10 w-10 flex-shrink-0 overflow-hidden rounded bg-muted", children: thumbnail ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: thumbnail,
+                      alt: "",
+                      className: "h-full w-full object-cover"
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted text-xs text-muted-foreground", children: "IMG" }) }),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: "line-clamp-2 max-w-[300px] text-sm",
+                      title: post.message,
+                      children: post.message || i18n.t("posts:label.noContent", {
+                        defaultValue: "(Kh\xF4ng c\xF3 n\u1ED9i dung)"
+                      })
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsx("td", { className: "whitespace-nowrap px-3 py-2 text-muted-foreground", children: post.created_time ? format(
+                  new Date(post.created_time),
+                  "dd/MM/yyyy HH:mm"
+                ) : "--" })
+              ]
+            },
+            id
+          );
+        }) })
+      ] }) }),
+      posts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t px-2 pt-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("common:label.show", { defaultValue: "Hi\u1EC3n th\u1ECB" }) }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: `${pageSize}`,
+              onValueChange: (val) => {
+                setPageSize(Number(val));
+                setCursors({ before: null, after: null });
+                setDirection(null);
+                setCurrentPage(1);
+              },
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[65px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { side: "top", children: PAGE_SIZE_OPTIONS.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("posts:dialog.totalPostsSuffix", {
+            totalCount,
+            defaultValue: "/ {totalCount} b\xE0i vi\u1EBFt"
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "h-8 w-8 p-0",
+              onClick: handlePrevPage,
+              disabled: currentPage <= 1,
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+            currentPage,
+            "/",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "h-8 w-8 p-0",
+              onClick: handleNextPage,
+              disabled: currentPage >= totalPages,
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "sm:justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("posts:message.selectedPostsCount", {
+        length: tempSelected.length,
+        defaultValue: "\u0110\xE3 ch\u1ECDn {length} b\xE0i vi\u1EBFt"
+      }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: t("common:action.cancel", { defaultValue: "H\u1EE7y" }) }),
+        /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleConfirm, children: t("common:action.confirm", { defaultValue: "X\xE1c nh\u1EADn" }) })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  DialogSelectPosts as default
+};

package/components/reports-route/agents/multi-select-agents.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import MultipleSelector from "../../custom/multiple-selector.js";
+import { useQuery } from "@tanstack/react-query";
+import { allUser as searchAllUser } from "@zenify-omni/chat-js/api/user.js";
+import { UserRole } from "@zenify-omni/chat-js/constants/user.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { useTranslation } from "react-i18next";
+const MultipleSelectAgents = React.forwardRef((props, ref) => {
+  const { t } = useTranslation();
+  const groupIds = props.groupIds ?? [];
+  const { data: users } = useQuery({
+    enabled: groupIds.length > 0,
+    queryKey: [QUERY_KEY.GET_ALL_AGENT_WITH_GROUP, { groupIds }],
+    queryFn: async () => {
+      const params = {
+        roles: JSON.stringify([
+          UserRole.ADMINISTRATOR,
+          UserRole.AGENT,
+          UserRole.SUPERVISOR,
+          UserRole.TEAM_LEADER
+        ]),
+        group_ids: JSON.stringify(groupIds)
+      };
+      const { data } = await searchAllUser(params);
+      const users2 = data?.list?.filter((user) => !!user.agent_id)?.map((user) => ({
+        value: [user._id, user.name].join("-"),
+        label: user.name,
+        agent_id: user.agent_id,
+        group_id: user.group_id.toString(),
+        object_id: user._id
+      }));
+      return users2 ?? [];
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    MultipleSelector,
+    {
+      ref,
+      ...props,
+      options: users,
+      commandProps: {
+        filter: (value, search) => value.toLowerCase().includes(search.toLowerCase())
+      },
+      placeholder: t("common:placeholder.selectAgent", {
+        defaultValue: "Ch\u1ECDn chuy\xEAn vi\xEAn"
+      })
+    }
+  );
+});
+MultipleSelectAgents.displayName = "MultipleSelectAgents";
+var multi_select_agents_default = MultipleSelectAgents;
+export {
+  multi_select_agents_default as default
+};

package/components/reports-route/agents/multi-select-search-agents.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import MultipleSelector from "../../custom/multiple-selector.js";
+import { UserRole } from "@zenify-omni/chat-js/constants/user.js";
+import { allUser as searchAllUser } from "@zenify-omni/chat-js/api/user.js";
+const MultipleSelectSearchAgents = React.forwardRef((props, ref) => {
+  const handleSearchAllUsers = async (keyword) => {
+    if (keyword.length < 2) {
+      return [];
+    }
+    const { data } = await searchAllUser({
+      keyword,
+      roles: JSON.stringify([
+        UserRole.AGENT,
+        UserRole.TEAM_LEADER,
+        UserRole.SUPERVISOR,
+        UserRole.ADMINISTRATOR
+      ])
+    });
+    const options = data?.list?.filter((option) => !!option.agent_id).map((option) => ({
+      label: option.name,
+      value: [option.name, option._id].join("-"),
+      agent_id: option.agent_id,
+      group_id: option.group_id?.toString(),
+      object_id: option._id
+    }));
+    return options ?? [];
+  };
+  return /* @__PURE__ */ jsx(
+    MultipleSelector,
+    {
+      ref,
+      ...props,
+      onSearch: handleSearchAllUsers,
+      placeholder: props.placeholder ?? "Nh\u1EADp \u0111\u1EC3 t\xECm chuy\xEAn vi\xEAn"
+    }
+  );
+});
+MultipleSelectSearchAgents.displayName = "MultipleSelectSearchAgents";
+var multi_select_search_agents_default = MultipleSelectSearchAgents;
+export {
+  multi_select_search_agents_default as default
+};