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

package/components/leads-route/table/contact-cell-name.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { Eye } from "lucide-react";
+import { Button } from "../../custom/button.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../../ui/tooltip.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { notFoundValue } from "@zenify-omni/chat-js/constants/common.js";
+const ContactQuickViewButton = ({ contact, onQuickView }) => {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "icon",
+        variant: "ghost",
+        className: "size-7 rounded-[6px] bg-transparent text-black",
+        onClick: (e) => {
+          e.stopPropagation();
+          onQuickView(contact);
+        },
+        children: /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5 cursor-pointer text-black" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "Xem nhanh" })
+  ] }) });
+};
+const RenderContactCellName = ({
+  row,
+  handleNavigateDetail,
+  onQuickView
+}) => {
+  const [isHover, setIsHover] = useState(false);
+  const [isActiveHover, setIsActiveHover] = useState(null);
+  const rowRef = useRef(null);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rowRef,
+      className: "group flex h-full w-full items-center",
+      onMouseEnter: () => setIsHover(true),
+      onMouseLeave: () => {
+        if (isActiveHover == row.original._id) {
+          return;
+        }
+        setIsHover(false);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "min-w-0 flex-1 cursor-pointer transition-all duration-200 group-hover:pr-1",
+            onClick: () => handleNavigateDetail(row),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "block truncate underline",
+                title: maskData(row.getValue("name")),
+                children: maskData(row.getValue("name")) ?? notFoundValue
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "ml-2 flex items-center", children: isHover && /* @__PURE__ */ jsx("div", { className: "animate-slide-in flex items-center", children: onQuickView && /* @__PURE__ */ jsx(
+          ContactQuickViewButton,
+          {
+            contact: row.original,
+            onQuickView
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  ContactQuickViewButton,
+  RenderContactCellName
+};

package/components/leads-route/table/edit-fields.js

@@ -0,0 +1,142 @@
+import { format } from "date-fns";
+import { CustomerTypeContext, GenderOptions } from "@zenify-omni/chat-js/constants/user.js";
+const EDIT_PERMISSION = "2";
+const INLINE_EDITABLE_DYNAMIC_TYPES = /* @__PURE__ */ new Set([
+  "phone",
+  "text",
+  "textarea",
+  "number",
+  "date",
+  "select",
+  "multi-select",
+  "radio",
+  "checkbox"
+]);
+const normalizeMultiSelect = (values) => (values || []).map((item) => item?.value ?? item);
+const normalizeDate = (value) => {
+  if (!value) return null;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+};
+const resolveOptionLabel = (data, value) => {
+  const option = (data || []).find(
+    (item) => String(item?.id ?? item) === String(value)
+  );
+  if (!option) return value;
+  return option.text ?? option;
+};
+const toDateInput = (value) => {
+  if (!value) return void 0;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? void 0 : date;
+};
+const defaultRowPatch = (config, value) => ({
+  [config.key]: config.normalize ? config.normalize(value) : value
+});
+const withDefaults = (config) => ({
+  payloadKey: config.key,
+  allow_edit: true,
+  getInputValue: (row) => row.original[config.key],
+  ...config,
+  buildRowPatch: config.buildRowPatch || ((value) => defaultRowPatch(config, value))
+});
+function buildLeadUpdate(fieldConfig, inputValue) {
+  if (typeof fieldConfig.buildPayload === "function") {
+    return fieldConfig.buildPayload(inputValue);
+  }
+  const value = fieldConfig.normalize ? fieldConfig.normalize(inputValue) : inputValue;
+  return { [fieldConfig.payloadKey || fieldConfig.key]: value };
+}
+const normalizeDobDate = (value) => value ? format(new Date(value), "yyyy-MM-dd") : null;
+function buildLeadCoreFields({
+  organizes = [],
+  groups = [],
+  cities = [],
+  leadSourceData = [],
+  leadStageData = []
+}) {
+  return {
+    phone: withDefaults({ key: "phone", type: "phone" }),
+    email: withDefaults({ key: "email", type: "text" }),
+    dob: withDefaults({
+      key: "dob",
+      type: "date",
+      normalize: normalizeDobDate,
+      getInputValue: (row) => toDateInput(row.original.dob)
+    }),
+    // BE nhận `organization_id`; cột hiển thị resolve tên qua `organizes`.
+    organization: withDefaults({
+      key: "organization",
+      type: "select-v2",
+      payloadKey: "organization_id",
+      data: organizes,
+      getInputValue: (row) => row.original.organization_id ? String(row.original.organization_id) : null,
+      buildRowPatch: (value) => ({ organization_id: value || null })
+    }),
+    // BE nhận `group_id`; cột hiển thị resolve tên qua `groups`.
+    group: withDefaults({
+      key: "group",
+      type: "select-v2",
+      payloadKey: "group_id",
+      data: groups,
+      getInputValue: (row) => row.original.group_id ? String(row.original.group_id) : null,
+      buildRowPatch: (value) => ({ group_id: value || null })
+    }),
+    // Đổi thành phố -> reset quận huyện (đồng bộ màn chi tiết).
+    city: withDefaults({
+      key: "city",
+      type: "select-v2",
+      data: cities,
+      getInputValue: (row) => row.original.city_id ? String(row.original.city_id) : null,
+      buildPayload: (value) => ({ city_id: value || null, district_id: null }),
+      buildRowPatch: (value) => ({ city_id: value || null, district_id: null })
+    }),
+    // Quận huyện phụ thuộc thành phố -> editor riêng tự fetch theo city_id
+    // hiện tại của dòng (giống UserDetailBasicInfo), không dùng data tĩnh.
+    district_id: withDefaults({
+      key: "district_id",
+      type: "select-v2",
+      editor: "district",
+      getInputValue: (row) => row.original.district_id ? String(row.original.district_id) : null
+    }),
+    customer_type: withDefaults({
+      key: "customer_type",
+      type: "select-v2",
+      data: Object.entries(CustomerTypeContext).map(([id, text]) => ({
+        id,
+        text
+      }))
+    }),
+    gender: withDefaults({
+      key: "gender",
+      type: "select-v2",
+      data: GenderOptions
+    }),
+    address: withDefaults({ key: "address", type: "text" }),
+    // Editor riêng (tự fetch danh sách tag), lưu tường minh qua nút ✓/Ctrl+Enter.
+    tags: withDefaults({
+      key: "tags",
+      type: "multi-select",
+      editor: "tags",
+      payloadKey: "tag_ids",
+      getInputValue: (row) => row.original.tags || [],
+      buildPayload: (value) => ({ tag_ids: (value || []).map((t) => t._id) }),
+      buildRowPatch: (value) => ({ tags: value || [] })
+    }),
+    lead_source: withDefaults({
+      key: "lead_source",
+      type: "select-v2",
+      data: leadSourceData.map((item) => ({ id: item.key, text: item.value }))
+    }),
+    lead_stage: withDefaults({
+      key: "lead_stage",
+      type: "select-v2",
+      data: leadStageData.map((item) => ({ id: item.key, text: item.value })),
+      buildRowPatch: (value) => ({ lead_stage: value || null })
+    })
+  };
+}
+export {
+  INLINE_EDITABLE_DYNAMIC_TYPES,
+  buildLeadUpdate
+};

package/components/leads-route/table/editable-cell.js

@@ -0,0 +1,228 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Check, LoaderCircle, X } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "../../../lib/utils.js";
+import { updateContact } from "@zenify-omni/chat-js/api/contact.js";
+import FieldGenerator from "../../custom/field-generator.js";
+import { CustomSelect } from "../../custom/custom-select.js";
+import MultipleSelectSettingTags from "../../custom/multiple-select-setting-tags.js";
+import { SettingTags } from "@zenify-omni/chat-js/constants/setting.js";
+import { useGetDistrictsByCityId } from "../../../hooks/use-setting-common.js";
+import { Button } from "../../custom/button.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { isLeadEditableByUser } from "@zenify-omni/chat-js/utils/leads.js";
+import { useInlineEditableCell } from "../../../hooks/use-inline-editable-cell.js";
+import { InlineEditPopover } from "../../custom/inline-edit-popover.js";
+import { buildLeadUpdate } from "./edit-fields.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const DistrictEditor = ({ value, cityId, onChange, disabled }) => {
+  const { t } = useTranslation();
+  const { data: districts } = useGetDistrictsByCityId(cityId);
+  return /* @__PURE__ */ jsx(
+    CustomSelect,
+    {
+      size: "small",
+      isSearch: true,
+      isNullValue: true,
+      disabled: disabled || !cityId,
+      placeholder: t("common:placeholder.selectDefault", {
+        defaultValue: "--Ch\u1ECDn--"
+      }),
+      value: value || null,
+      onChange,
+      options: (districts ?? []).map((option) => ({
+        label: option.name,
+        value: String(option.id)
+      }))
+    }
+  );
+};
+function EditableCell({
+  row,
+  fieldConfig,
+  displayNode,
+  onSaved,
+  triggerClassName,
+  editingClassName
+}) {
+  const { t } = useTranslation();
+  const {
+    containerRef,
+    isEditing,
+    isSaving,
+    value,
+    saveMode,
+    isComplex,
+    startEditing,
+    cancel,
+    save,
+    handleChange,
+    handleKeyDown
+  } = useInlineEditableCell({
+    row,
+    fieldConfig,
+    onSave: async (nextValue) => {
+      try {
+        const payload = buildLeadUpdate(fieldConfig, nextValue);
+        const response = await updateContact({
+          id: row.original._id,
+          data: payload
+        });
+        if (response?.error || response?.status && response.status >= 400) {
+          throw response;
+        }
+        const rowPatch = fieldConfig.buildRowPatch ? fieldConfig.buildRowPatch(nextValue) : {
+          [fieldConfig.key]: payload[fieldConfig.payloadKey || fieldConfig.key]
+        };
+        onSaved(row.original._id, rowPatch, response?.data);
+        toast.success(
+          i18n.t("common:toast.updateSuccess", {
+            defaultValue: "C\u1EADp nh\u1EADt th\xE0nh c\xF4ng"
+          })
+        );
+      } catch (error) {
+        throwException(error);
+        throw error;
+      }
+    }
+  });
+  const canEdit = useMemo(
+    () => fieldConfig.allow_edit && isLeadEditableByUser(row.original),
+    [fieldConfig.allow_edit, row.original]
+  );
+  if (!canEdit) {
+    return /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 truncate px-3.5", children: displayNode });
+  }
+  const data = fieldConfig.getData?.(row) ?? fieldConfig.data;
+  const renderEditor = () => {
+    if (fieldConfig.editor === "district") {
+      return /* @__PURE__ */ jsx(
+        DistrictEditor,
+        {
+          value,
+          cityId: row.original.city_id,
+          disabled: isSaving,
+          onChange: (nextValue) => handleChange(nextValue)
+        }
+      );
+    }
+    if (fieldConfig.editor === "tags") {
+      return /* @__PURE__ */ jsx(
+        MultipleSelectSettingTags,
+        {
+          target: SettingTags.LEAD,
+          selected: value || [],
+          onChange: handleChange,
+          disabled: isSaving,
+          size: "small"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      FieldGenerator,
+      {
+        autoFocus: true,
+        field: fieldConfig.field || fieldConfig,
+        type: fieldConfig.type,
+        data,
+        value,
+        onChange: handleChange,
+        disabled: isSaving,
+        disabledAutoFill: true,
+        showTimeComponent: fieldConfig.showTime,
+        align: "end",
+        size: "small",
+        className: "h-7 min-h-7 focus-visible:ring-0 focus-visible:ring-offset-0"
+      }
+    );
+  };
+  const trigger = fieldConfig.isEmptyValue?.(row) ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex h-full min-w-0 flex-1 cursor-text items-center truncate ring-1 ring-inset ring-transparent hover:ring-border/90",
+        triggerClassName
+      ),
+      onClick: startEditing,
+      children: displayNode
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0 z-0 flex cursor-text items-center truncate rounded px-3.5 ring-1 ring-inset ring-transparent transition-colors hover:bg-muted/60 hover:ring-border/90",
+        triggerClassName
+      ),
+      onClick: startEditing,
+      children: displayNode
+    }
+  );
+  if (isComplex) {
+    return /* @__PURE__ */ jsx(
+      InlineEditPopover,
+      {
+        open: isEditing,
+        trigger,
+        onSave: () => void save(),
+        onCancel: cancel,
+        isSaving,
+        children: renderEditor()
+      }
+    );
+  }
+  if (!isEditing) {
+    return trigger;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("flex min-w-0 items-center gap-1", editingClassName),
+      onClick: (event) => event.stopPropagation(),
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: renderEditor() }),
+        isSaving && /* @__PURE__ */ jsx(
+          LoaderCircle,
+          {
+            "aria-label": t("common:status.saving", { defaultValue: "\u0110ang l\u01B0u" }),
+            className: "h-3.5 w-3.5 shrink-0 animate-spin"
+          }
+        ),
+        saveMode === "explicit" && !isSaving && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon",
+            variant: "ghost",
+            "aria-label": t("common:action.saveChanges", {
+              defaultValue: "L\u01B0u thay \u0111\u1ED5i"
+            }),
+            className: "h-6 w-6 shrink-0",
+            onClick: () => void save(),
+            children: /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        !isSaving && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon",
+            variant: "ghost",
+            "aria-label": t("common:action.cancelEdit", {
+              defaultValue: "H\u1EE7y ch\u1EC9nh s\u1EEDa"
+            }),
+            className: "h-6 w-6 shrink-0",
+            onClick: cancel,
+            children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  EditableCell
+};

package/components/org-tree/group-name-display.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { useOrgTree } from "../../hooks/use-org-tree.js";
+import { useOrgTreeEnabled } from "../../hooks/use-feature-flags.js";
+import { getGroupDisplayName, getGroupNodeName } from "@zenify-omni/chat-js/utils/org-tree.js";
+import { cn } from "../../lib/utils.js";
+function useGroupName(groupId, fallbackName = "", { nameOnly = false } = {}) {
+  const orgTreeEnabled = useOrgTreeEnabled();
+  const { list } = useOrgTree({ enabled: orgTreeEnabled });
+  if (!orgTreeEnabled) return fallbackName || "";
+  return nameOnly ? getGroupNodeName(groupId, list, fallbackName) : getGroupDisplayName(groupId, list, fallbackName);
+}
+function GroupNameDisplay({
+  groupId,
+  fallbackName = "",
+  className,
+  showTooltip = true,
+  // nameOnly: mặc định chỉ hiện tên bộ phận (không kèm cấp cha) cho gọn bảng.
+  // Tooltip vẫn là full path. Truyền nameOnly={false} nếu cần hiện cả cấp cha.
+  nameOnly = true
+}) {
+  const display = useGroupName(groupId, fallbackName, { nameOnly });
+  const fullPath = useGroupName(groupId, fallbackName);
+  if (!display) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("truncate", className),
+      title: showTooltip ? fullPath : void 0,
+      children: display
+    }
+  );
+}
+export {
+  GroupNameDisplay as default,
+  useGroupName
+};

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

@@ -0,0 +1,208 @@
+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 { Checkbox } from "../ui/checkbox.js";
+import useDebounce from "../../hooks/use-debounce.js";
+import { useOrgTree } from "../../hooks/use-org-tree.js";
+import {
+  eqId,
+  filterBySearch,
+  getPathLabels,
+  findNode,
+  buildTree
+} from "@zenify-omni/chat-js/utils/org-tree.js";
+import { cn } from "../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+function makeNodeRenderer({ selectedSet, searchVisibleIds, onToggleId }) {
+  return function NodeRow({ node, style, dragHandle }) {
+    const id = Number(node.data.id);
+    if (searchVisibleIds && !searchVisibleIds.has(id)) return null;
+    const isChecked = selectedSet.has(id);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dragHandle,
+        style,
+        className: "flex w-full items-center gap-1 rounded-sm px-1 py-1 text-sm hover:bg-accent",
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                if (!node.isLeaf) node.toggle();
+              },
+              className: "flex h-4 w-4 shrink-0 items-center justify-center",
+              children: !node.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__ */ jsxs("label", { className: "flex flex-1 cursor-pointer items-center gap-2 truncate", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: isChecked,
+                onCheckedChange: () => onToggleId?.(id)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: node.data.name })
+          ] })
+        ]
+      }
+    );
+  };
+}
+function GroupTreeMultiSelect({
+  value = [],
+  onChange,
+  disabled,
+  placeholder = "Xem to\xE0n b\u1ED9 d\u1EEF li\u1EC7u tenant",
+  className,
+  list: externalList,
+  labelWithPath = true
+}) {
+  const { t } = useTranslation();
+  const treeRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const debounceSearch = useDebounce(searchText, 200);
+  const hasExternal = Array.isArray(externalList);
+  const { tree: hookTree, list: hookList } = useOrgTree({
+    enabled: !hasExternal
+  });
+  const list = hasExternal ? externalList : hookList;
+  const data = useMemo(() => {
+    if (!hasExternal) return hookTree;
+    const ids = new Set((externalList || []).map((n) => Number(n.id)));
+    const rerooted = (externalList || []).map(
+      (n) => ids.has(Number(n.parent_id)) ? n : { ...n, parent_id: 0 }
+    );
+    return buildTree(rerooted);
+  }, [hasExternal, externalList, hookTree]);
+  const selectedSet = useMemo(
+    () => new Set((value || []).map((id) => Number(id))),
+    [value]
+  );
+  const selectedNodes = useMemo(
+    () => (value || []).map((id) => findNode(list, id)).filter(Boolean),
+    [value, list]
+  );
+  const searchVisibleIds = useMemo(
+    () => filterBySearch(list, debounceSearch),
+    [list, debounceSearch]
+  );
+  useLayoutEffect(() => {
+    if (!open || !treeRef.current) return;
+    if (debounceSearch.trim()) {
+      treeRef.current.openAll();
+    } else {
+      treeRef.current.closeAll();
+    }
+  }, [open, debounceSearch]);
+  const toggleId = (id) => {
+    const numId = Number(id);
+    if (selectedSet.has(numId)) {
+      onChange?.(value.filter((v) => !eqId(v, numId)));
+    } else {
+      onChange?.([...value || [], numId]);
+    }
+  };
+  const removeId = (e, id) => {
+    e.stopPropagation();
+    onChange?.(value.filter((v) => !eqId(v, id)));
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: true, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        className: cn(
+          "flex min-h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-card px-3 py-1.5 text-sm shadow-sm ring-offset-background focus:outline-none disabled:cursor-not-allowed disabled:bg-muted",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 text-left", children: selectedNodes.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) : selectedNodes.map((node) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 rounded-md bg-primary/10 px-2 py-0.5 text-xs",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "max-w-[200px] truncate", children: labelWithPath ? getPathLabels(list, node) : node.name }),
+                !disabled && /* @__PURE__ */ jsx(
+                  X,
+                  {
+                    role: "button",
+                    tabIndex: -1,
+                    className: "h-3 w-3 shrink-0 opacity-50 hover:opacity-100",
+                    onClick: (e) => removeId(e, node.id)
+                  }
+                )
+              ]
+            },
+            node.id
+          )) }),
+          /* @__PURE__ */ jsx(CaretSortIcon, { className: "h-4 w-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__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,
+              indent: 20,
+              height: 300,
+              width: "100%",
+              rowHeight: 32,
+              padding: 4,
+              idAccessor: (n) => String(n.id),
+              childrenAccessor: (n) => n.children,
+              openByDefault: false,
+              disableDrag: true,
+              disableDrop: true,
+              disableEdit: true,
+              children: makeNodeRenderer({
+                selectedSet,
+                searchVisibleIds,
+                onToggleId: toggleId
+              })
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  GroupTreeMultiSelect as default
+};