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

package/components/dialogs/invite-agent.js

@@ -0,0 +1,677 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { useEffect, useMemo, useState } from "react";
+import { Plus, Check, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "../ui/dialog.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../ui/select.js";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "../ui/table.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { Button } from "../custom/button.js";
+import { Input } from "../ui/input.js";
+import {
+  useAllUserGroups,
+  useAllAgent,
+  useGetAllQueuesV3
+} from "../../hooks/use-setting-common.js";
+import { renderUserRoleContext } from "@zenify-omni/chat-js/utils/auth.js";
+import { getAllAgent as fetchAgentsByGroup } from "@zenify-omni/chat-js/api/report.js";
+import { throwException } from "../../exceptions/throw-exception.js";
+import { getQueueDetail } from "@zenify-omni/chat-js/api/settings/queue-v3.js";
+import useDebounce from "../../hooks/use-debounce.js";
+import { removeVietnameseTones } from "@zenify-omni/chat-js/utils/string.js";
+import { useTranslation } from "react-i18next";
+const TARGET_TYPES = {
+  AGENT: "agent",
+  QUEUE: "queue",
+  GROUP: "group"
+};
+const TARGET_OPTIONS = [
+  {
+    value: TARGET_TYPES.AGENT,
+    get label() {
+      return i18n.t("common:label.agent", {
+        defaultValue: "Chuy\xEAn vi\xEAn"
+      });
+    }
+  },
+  {
+    value: TARGET_TYPES.QUEUE,
+    get label() {
+      return i18n.t("common:label.queue", {
+        defaultValue: "H\xE0ng \u0111\u1EE3i"
+      });
+    }
+  },
+  {
+    value: TARGET_TYPES.GROUP,
+    get label() {
+      return i18n.t("common:label.department", {
+        defaultValue: "B\u1ED9 ph\u1EADn"
+      });
+    }
+  }
+];
+const InviteAgentDialog = ({
+  agentOnlineList = [],
+  isLoading,
+  onInvite,
+  title
+}) => {
+  const { t } = useTranslation();
+  const allGroups = useAllUserGroups();
+  const { data: allQueues } = useGetAllQueuesV3({
+    params: { page: 1, limit: 1e3 }
+  });
+  const allAgents = useAllAgent();
+  const [searchText, setSearchText] = useState("");
+  const debouncedSearchText = useDebounce(searchText, 500);
+  const [requested, setRequested] = useState([]);
+  const [ok, setOk] = useState([]);
+  const [requestedQueueIds, setRequestedQueueIds] = useState([]);
+  const [okQueueIds, setOkQueueIds] = useState([]);
+  const [requestedGroupIds, setRequestedGroupIds] = useState([]);
+  const [okGroupIds, setOkGroupIds] = useState([]);
+  const [targetType, setTargetType] = useState(TARGET_TYPES.AGENT);
+  const [selectedQueue, setSelectedQueue] = useState(null);
+  const [selectedGroup, setSelectedGroup] = useState(null);
+  const [queueAgents, setQueueAgents] = useState([]);
+  const [groupAgents, setGroupAgents] = useState([]);
+  const [isQueueAgentsLoading, setIsQueueAgentsLoading] = useState(false);
+  const [isGroupAgentsLoading, setIsGroupAgentsLoading] = useState(false);
+  const [detailType, setDetailType] = useState(null);
+  const filterAgentOnlineList = useMemo(() => {
+    const trimmedSearchText = debouncedSearchText.trim();
+    if (!trimmedSearchText.length) return agentOnlineList;
+    const normalizeKeyword = removeVietnameseTones(
+      trimmedSearchText.toLowerCase()
+    );
+    const filteredList = agentOnlineList.filter((agent) => {
+      const normalizedEmail = removeVietnameseTones(
+        agent?.name?.toLowerCase() || ""
+      );
+      const normalizedName = removeVietnameseTones(
+        agent?.email?.toLowerCase() || ""
+      );
+      return normalizedEmail.includes(normalizeKeyword) || normalizedName.includes(normalizeKeyword);
+    });
+    return filteredList;
+  }, [agentOnlineList, debouncedSearchText]);
+  const AGENT_PAGE_SIZE = 50;
+  const [agentPage, setAgentPage] = useState(1);
+  useEffect(() => {
+    setAgentPage(1);
+  }, [debouncedSearchText, agentOnlineList]);
+  const agentPageCount = Math.max(
+    1,
+    Math.ceil(filterAgentOnlineList.length / AGENT_PAGE_SIZE)
+  );
+  const pagedAgentOnlineList = useMemo(
+    () => filterAgentOnlineList.slice(
+      (agentPage - 1) * AGENT_PAGE_SIZE,
+      agentPage * AGENT_PAGE_SIZE
+    ),
+    [filterAgentOnlineList, agentPage]
+  );
+  const handleTransfer = (row) => {
+    addRequested(row._id);
+    onInvite({
+      type: "user",
+      ids: [row._id]
+      // ...row,
+      // ...meta,
+      // ...(userId ? { userId } : {}),
+    });
+  };
+  const addRequested = (agentId) => {
+    if (requested.includes(agentId)) return;
+    setRequested((prevState) => [...prevState, agentId]);
+    setTimeout(() => {
+      setOk((prevState) => [...prevState, agentId]);
+    }, 3e3);
+  };
+  const handleSelectQueue = async (queue) => {
+    if (!queue) return;
+    setSelectedQueue(queue);
+    setIsQueueAgentsLoading(true);
+    setQueueAgents([]);
+    try {
+      const queueDetail = await getQueueDetail({ id: queue._id });
+      setQueueAgents(queueDetail?.agents || []);
+    } catch (error) {
+      throwException(error);
+      setQueueAgents([]);
+    }
+    setIsQueueAgentsLoading(false);
+    setDetailType("queue");
+  };
+  const handleSelectGroup = async (group) => {
+    if (!group) return;
+    setIsGroupAgentsLoading(true);
+    setSelectedGroup(group);
+    try {
+      const { data, error } = await fetchAgentsByGroup(
+        JSON.stringify([group.id])
+      );
+      if (error) {
+        setGroupAgents([]);
+      } else {
+        setGroupAgents(data?.list || []);
+      }
+    } catch (error) {
+      throwException(error);
+      setGroupAgents([]);
+    }
+    setIsGroupAgentsLoading(false);
+    setDetailType("group");
+  };
+  const handleInviteQueue = (queue) => {
+    if (!queue) return;
+    const id = queue._id;
+    if (requestedQueueIds.includes(id)) return;
+    const queueIds = [queue._id];
+    setRequestedQueueIds((prev) => [...prev, id]);
+    setTimeout(() => {
+      setOkQueueIds((prev) => [...prev, id]);
+    }, 3e3);
+    onInvite({
+      // queue_ids: queueIds,
+      type: "queue",
+      ids: queueIds
+    });
+  };
+  const handleInviteGroup = (group) => {
+    if (!group) return;
+    const id = Number(group.id);
+    if (requestedGroupIds.includes(id)) return;
+    const groupIds = [id];
+    setRequestedGroupIds((prev) => [...prev, id]);
+    setTimeout(() => {
+      setOkGroupIds((prev) => [...prev, id]);
+    }, 3e3);
+    onInvite({
+      // group_ids: groupIds,
+      type: "group",
+      ids: groupIds
+    });
+  };
+  const handleCloseDetail = () => {
+    setDetailType(null);
+    setSelectedQueue(null);
+    setSelectedGroup(null);
+    setQueueAgents([]);
+    setGroupAgents([]);
+  };
+  const renderAgentRows = () => {
+    if (isLoading) {
+      return Array.from({ length: 10 }).map((_, index) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }) })
+      ] }, index));
+    }
+    if (!filterAgentOnlineList.length) {
+      return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 4, className: "h-24 text-center", children: t("common:message.noAgentAvailable", {
+        defaultValue: "Kh\xF4ng t\xECm th\u1EA5y chuy\xEAn vi\xEAn n\xE0o s\u1EB5n s\xE0ng"
+      }) }) });
+    }
+    return pagedAgentOnlineList.map((row) => {
+      const group = allGroups.find((gr) => gr.id == row.groupId)?.text;
+      return /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium hover:opacity-75", children: row.name }) }) }),
+        /* @__PURE__ */ jsx(TableCell, { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium hover:opacity-75", children: row.email }) }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-medium hover:opacity-75", children: renderUserRoleContext(row) || "-" }) }) }),
+        /* @__PURE__ */ jsx(TableCell, { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium hover:opacity-75", children: group || "-" }) }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "w-full text-center", children: !ok.includes(row._id) ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => handleTransfer(row),
+            loading: requested.includes(row._id),
+            className: "w-[30%] text-sm",
+            title: t("common:action.sendInviteRequest", {
+              defaultValue: "G\u1EEDi y\xEAu c\u1EA7u m\u1EDDi tham gia"
+            }),
+            children: /* @__PURE__ */ jsx(Plus, {})
+          }
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            className: "w-[30%] text-sm",
+            title: t("common:action.resendRequest", {
+              defaultValue: "G\u1EEDi l\u1EA1i y\xEAu c\u1EA7u"
+            }),
+            onClick: () => {
+              setOk(
+                (prevState) => prevState.filter((item) => item !== row._id)
+              );
+              setRequested(
+                (prevState) => prevState.filter((item) => item !== row._id)
+              );
+            },
+            children: /* @__PURE__ */ jsx(Check, {})
+          }
+        ) }) })
+      ] }, row._id);
+    });
+  };
+  const renderQueueRows = () => {
+    const queues = Array.isArray(allQueues) ? allQueues : [];
+    if (!queues.length) {
+      return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 3, className: "h-24 text-center", children: t("common:empty.noQueue", {
+        defaultValue: "Kh\xF4ng c\xF3 h\xE0ng \u0111\u1EE3i n\xE0o"
+      }) }) });
+    }
+    return queues.map((queue) => /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "block w-full truncate text-left text-sm font-medium text-primary hover:underline",
+          onClick: () => handleSelectQueue(queue),
+          children: queue.name || "-"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-medium hover:opacity-75", children: queue.agents?.length || 0 }) }) }),
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "w-full text-center", children: !okQueueIds.includes(queue._id) ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "w-[30%] text-sm",
+          title: t("common:action.inviteWholeQueue", {
+            defaultValue: "M\u1EDDi to\xE0n b\u1ED9 h\xE0ng \u0111\u1EE3i"
+          }),
+          onClick: () => handleInviteQueue(queue),
+          loading: requestedQueueIds.includes(queue._id),
+          children: /* @__PURE__ */ jsx(Plus, {})
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          className: "w-[30%] text-sm",
+          title: t("common:action.resendRequest", {
+            defaultValue: "G\u1EEDi l\u1EA1i y\xEAu c\u1EA7u"
+          }),
+          onClick: () => {
+            setOkQueueIds((prev) => prev.filter((id) => id !== queue._id));
+            setRequestedQueueIds(
+              (prev) => prev.filter((id) => id !== queue._id)
+            );
+          },
+          children: /* @__PURE__ */ jsx(Check, {})
+        }
+      ) }) })
+    ] }, queue._id));
+  };
+  const renderQueueAgentsRows = () => {
+    if (!selectedQueue) return null;
+    if (isQueueAgentsLoading) {
+      return Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-3 rounded-lg border px-3 py-2 shadow-sm",
+          children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10 rounded-full" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-56" })
+            ] }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-md" })
+          ]
+        },
+        index
+      ));
+    }
+    if (!queueAgents.length) {
+      return /* @__PURE__ */ jsx("div", { className: "px-1 text-center text-sm", children: t("common:empty.noAgentsInQueue", {
+        defaultValue: "Kh\xF4ng c\xF3 chuy\xEAn vi\xEAn n\xE0o trong h\xE0ng \u0111\u1EE3i n\xE0y"
+      }) });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: queueAgents.map((queueAgent) => {
+      const agent = allAgents.find((item) => item._id === queueAgent._id);
+      if (!agent) return null;
+      const username = agent.email || agent.name || "-";
+      const group = allGroups.find(
+        (gr) => String(gr.id) === String(agent.group_id)
+      );
+      const renderSubInfo = (agent2) => {
+        let role = renderUserRoleContext({
+          roles: agent2.roles,
+          role: agent2.role
+        });
+        let groupName = group?.text;
+        return [username, role, groupName].filter(Boolean).join(" ");
+      };
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-3 rounded-lg border px-3 py-2 shadow-sm",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted text-sm font-semibold text-foreground", children: agent.avatar ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: agent.avatar,
+                alt: username,
+                className: "h-10 w-10 rounded-full object-cover"
+              }
+            ) : null }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: username }),
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-foreground", children: renderSubInfo(agent) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end" })
+          ]
+        },
+        queueAgent._id
+      );
+    }) });
+  };
+  const renderGroupRows = () => {
+    if (!allGroups.length) {
+      return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 3, className: "h-24 text-center", children: t("common:empty.noDepartments", {
+        defaultValue: "Kh\xF4ng c\xF3 b\u1ED9 ph\u1EADn n\xE0o"
+      }) }) });
+    }
+    return allGroups.map((group) => {
+      const agentsInGroup = allAgents.filter(
+        (agent) => String(agent.group_id) === String(group.id)
+      );
+      return /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "block w-full truncate text-left text-sm font-medium text-primary hover:underline",
+            onClick: () => handleSelectGroup(group),
+            children: group.text
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-medium hover:opacity-75", children: agentsInGroup.length }) }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "w-full text-center", children: !okGroupIds.includes(Number(group.id)) ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "w-[30%] text-sm",
+            title: t("common:action.inviteWholeDepartment", {
+              defaultValue: "M\u1EDDi to\xE0n b\u1ED9 b\u1ED9 ph\u1EADn"
+            }),
+            onClick: () => handleInviteGroup(group),
+            loading: requestedGroupIds.includes(Number(group.id)),
+            children: /* @__PURE__ */ jsx(Plus, {})
+          }
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            className: "w-[30%] text-sm",
+            title: t("common:action.resendRequest", {
+              defaultValue: "G\u1EEDi l\u1EA1i y\xEAu c\u1EA7u"
+            }),
+            onClick: () => {
+              setOkGroupIds(
+                (prev) => prev.filter((id) => id !== Number(group.id))
+              );
+              setRequestedGroupIds(
+                (prev) => prev.filter((id) => id !== Number(group.id))
+              );
+            },
+            children: /* @__PURE__ */ jsx(Check, {})
+          }
+        ) }) })
+      ] }, group.id);
+    });
+  };
+  const renderGroupAgentsRows = () => {
+    if (!selectedGroup) return null;
+    if (isGroupAgentsLoading) {
+      return Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-3 rounded-lg border px-3 py-2 shadow-sm",
+          children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10 rounded-full" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-56" })
+            ] }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-md" })
+          ]
+        },
+        index
+      ));
+    }
+    if (!groupAgents.length) {
+      return /* @__PURE__ */ jsx("div", { className: "px-1 text-center text-sm", children: t("common:empty.noAgentsInDepartment", {
+        defaultValue: "Kh\xF4ng c\xF3 chuy\xEAn vi\xEAn n\xE0o trong b\u1ED9 ph\u1EADn n\xE0y"
+      }) });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: groupAgents.map((agent) => {
+      const username = agent.email || agent.name || "-";
+      const group = allGroups.find(
+        (gr) => String(gr.id) === String(agent.group_id)
+      );
+      const renderSubInfo = (agent2) => {
+        let role = renderUserRoleContext({
+          roles: agent2.roles,
+          role: agent2.role
+        });
+        let groupName = group?.text;
+        return [username, role, groupName].filter(Boolean).join(" ");
+      };
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-3 rounded-lg border px-3 py-2 shadow-sm",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted text-sm font-semibold text-foreground", children: agent.avatar ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: agent.avatar,
+                alt: username,
+                className: "h-10 w-10 rounded-full object-cover"
+              }
+            ) : null }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: username }),
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-foreground", children: renderSubInfo(agent) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end" })
+          ]
+        },
+        agent._id
+      );
+    }) });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[80%] overflow-auto sm:max-w-[60%]", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+        /* @__PURE__ */ jsx(DialogDescription, {})
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: t("common:label.target", { defaultValue: "\u0110\u1ED1i t\u01B0\u1EE3ng" }) }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: targetType,
+                onValueChange: (value) => {
+                  setTargetType(value);
+                  setSelectedQueue(null);
+                  setSelectedGroup(null);
+                  setQueueAgents([]);
+                  setGroupAgents([]);
+                  setSearchText("");
+                },
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-48", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: TARGET_OPTIONS.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+                ]
+              }
+            )
+          ] }),
+          targetType === TARGET_TYPES.AGENT && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: searchText,
+              onChange: (e) => setSearchText(e.target.value),
+              placeholder: t("common:placeholder.enterSearchInfo", {
+                defaultValue: "Nh\u1EADp th\xF4ng tin t\xECm ki\u1EBFm"
+              })
+            }
+          ) })
+        ] }),
+        targetType === TARGET_TYPES.AGENT && /* @__PURE__ */ jsxs("div", { className: "rounded-md border", children: [
+          /* @__PURE__ */ jsxs(Table, { className: "w-full table-fixed", children: [
+            /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+              /* @__PURE__ */ jsx(TableHead, { children: t("common:label.agentName", {
+                defaultValue: "T\xEAn chuy\xEAn vi\xEAn"
+              }) }),
+              /* @__PURE__ */ jsx(TableHead, { children: "Email" }),
+              /* @__PURE__ */ jsx(TableHead, { children: t("common:label.position", { defaultValue: "Ch\u1EE9c v\u1EE5" }) }),
+              /* @__PURE__ */ jsx(TableHead, { children: t("common:label.department", {
+                defaultValue: "B\u1ED9 ph\u1EADn"
+              }) }),
+              /* @__PURE__ */ jsx(TableHead, { className: "text-center", children: t("common:table.action", { defaultValue: "H\xE0nh \u0111\u1ED9ng" }) })
+            ] }) }),
+            /* @__PURE__ */ jsx(TableBody, { children: renderAgentRows() })
+          ] }),
+          !isLoading && filterAgentOnlineList.length > AGENT_PAGE_SIZE && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t px-3 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("common:pagination.pageOf", {
+              page: agentPage,
+              total: agentPageCount,
+              defaultValue: "Trang {page}/{total}"
+            }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  className: "h-7 w-7 p-0",
+                  "aria-label": t("common:action.previousPage", {
+                    defaultValue: "Trang tr\u01B0\u1EDBc"
+                  }),
+                  disabled: agentPage <= 1,
+                  onClick: () => setAgentPage((p) => Math.max(1, p - 1)),
+                  children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  className: "h-7 w-7 p-0",
+                  "aria-label": t("common:action.nextPage", {
+                    defaultValue: "Trang sau"
+                  }),
+                  disabled: agentPage >= agentPageCount,
+                  onClick: () => setAgentPage((p) => Math.min(agentPageCount, p + 1)),
+                  children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        targetType === TARGET_TYPES.QUEUE && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs(Table, { className: "w-full table-fixed", children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableHead, { children: t("common:label.queueName", {
+              defaultValue: "T\xEAn h\xE0ng \u0111\u1EE3i"
+            }) }),
+            /* @__PURE__ */ jsx(TableHead, { children: t("common:label.agentCount", {
+              defaultValue: "S\u1ED1 l\u01B0\u1EE3ng chuy\xEAn vi\xEAn"
+            }) }),
+            /* @__PURE__ */ jsx(TableHead, { className: "text-center", children: t("common:table.action", {
+              defaultValue: "H\xE0nh \u0111\u1ED9ng"
+            }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: renderQueueRows() })
+        ] }) }) }),
+        targetType === TARGET_TYPES.GROUP && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs(Table, { className: "w-full table-fixed", children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableHead, { children: t("common:label.departmentName", {
+              defaultValue: "T\xEAn b\u1ED9 ph\u1EADn"
+            }) }),
+            /* @__PURE__ */ jsx(TableHead, { children: t("common:label.agentCount", {
+              defaultValue: "S\u1ED1 l\u01B0\u1EE3ng chuy\xEAn vi\xEAn"
+            }) }),
+            /* @__PURE__ */ jsx(TableHead, { className: "text-center", children: t("common:table.action", {
+              defaultValue: "H\xE0nh \u0111\u1ED9ng"
+            }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: renderGroupRows() })
+        ] }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: detailType === "queue",
+        onOpenChange: (open) => {
+          if (!open) handleCloseDetail();
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[80%] overflow-auto sm:max-w-[60%]", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: selectedQueue?.DESCRIPTION || i18n.t("settings:user.agentList", {
+              defaultValue: "Danh s\xE1ch chuy\xEAn vi\xEAn"
+            }) }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: (queueAgents?.length ?? 0) > 0 ? t("common:unit.members", {
+              length: queueAgents.length,
+              defaultValue: "{length} th\xE0nh vi\xEAn"
+            }) : t("common:unit.members", {
+              length: selectedQueue?.AGENT_COUNT || 0,
+              defaultValue: "{length} th\xE0nh vi\xEAn"
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: renderQueueAgentsRows() })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: detailType === "group",
+        onOpenChange: (open) => {
+          if (!open) handleCloseDetail();
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[80%] overflow-auto sm:max-w-[60%]", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: selectedGroup?.text || i18n.t("settings:user.agentList", {
+              defaultValue: "Danh s\xE1ch chuy\xEAn vi\xEAn"
+            }) }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: (groupAgents?.length ?? 0) > 0 ? t("common:unit.members", {
+              length: groupAgents.length,
+              defaultValue: "{length} th\xE0nh vi\xEAn"
+            }) : "" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: renderGroupAgentsRows() })
+        ] })
+      }
+    )
+  ] });
+};
+var invite_agent_default = InviteAgentDialog;
+export {
+  invite_agent_default as default
+};