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

package/components/chat-route/chat-list/filter-criteria-rows.js

@@ -0,0 +1,845 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useFormState } from "react-hook-form";
+import { isSameDay } from "date-fns";
+import { Info, Trash2 } from "lucide-react";
+import { FormControl, FormField } from "../../ui/form.js";
+import { Input } from "../../ui/input.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../../ui/tooltip.js";
+import MultipleSelector from "../../custom/multiple-selector.js";
+import MultipleSelectSettingTags from "../../custom/multiple-select-setting-tags.js";
+import DateTimePicker from "../../custom/date-time-picker/index.js";
+import { Combobox } from "../../custom/combobox.js";
+import { CustomSelect } from "../../custom/custom-select.js";
+import PostIdsField from "./post-ids-field.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../ui/select.js";
+import { searchUser } from "@zenify-omni/chat-js/api/user.js";
+import { cn } from "../../../lib/utils.js";
+import { SettingTags } from "@zenify-omni/chat-js/constants/setting.js";
+import {
+  ChatFilterSourceLabel,
+  ChatFilterStatusOptions
+} from "@zenify-omni/chat-js/constants/chat-message.js";
+import {
+  CRM_TYPE_OPTIONS,
+  DATE_FILTER_TYPE_OPTIONS,
+  DateFilterType,
+  HAS_FB_ADS_OPTIONS,
+  IS_GROUP_OPTIONS,
+  IS_UNHANDLED_OPTIONS,
+  PHONE_STATUS_OPTIONS,
+  TAG_MATCH_MODE_OPTIONS,
+  TagMatchMode
+} from "./util.js";
+import FilterGroupSelect from "./filter-group-select.js";
+import {
+  getUser,
+  isAdmin,
+  isSupervisor,
+  isRoleTeamLeader,
+  isRoleTeamLeaderSale
+} from "@zenify-omni/chat-js/utils/auth.js";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const IS_UNANSWERED_OPTIONS = [
+  {
+    value: "true",
+    get label() {
+      return i18n.t("chat:status.unanswered", {
+        defaultValue: "Ch\u01B0a tr\u1EA3 l\u1EDDi"
+      });
+    }
+  },
+  {
+    value: "false",
+    get label() {
+      return i18n.t("common:status.replied", {
+        defaultValue: "\u0110\xE3 tr\u1EA3 l\u1EDDi"
+      });
+    }
+  }
+];
+const boolToSelectValue = (value) => {
+  switch (value) {
+    case true:
+      return "true";
+    case false:
+      return "false";
+    case "post":
+      return "post";
+    default:
+      return "all";
+  }
+};
+const selectValueToBool = (value) => {
+  switch (value) {
+    case "true":
+      return true;
+    case "false":
+      return false;
+    case "post":
+      return "post";
+    default:
+      return "all";
+  }
+};
+function RangeDateMessage({ control }) {
+  const { errors } = useFormState({ control, name: "range_date.from" });
+  const message = errors?.range_date?.from?.message;
+  if (!message) return null;
+  return /* @__PURE__ */ jsx("p", { className: "text-[0.8rem] text-destructive", children: message });
+}
+function buildCriteriaFields({
+  form,
+  sourceOptions,
+  filterSocialPageList,
+  includePersonal
+}) {
+  const user = getUser();
+  const searchUserParams = () => {
+    const groupIds = (form.getValues("group_ids") || []).filter(Boolean);
+    if (groupIds.length > 0) {
+      return { group_ids: JSON.stringify(groupIds.map(Number)) };
+    }
+    return isRoleTeamLeader() || isRoleTeamLeaderSale() ? { group_id: user.group_id } : {};
+  };
+  const canFilterByDepartment = isAdmin() || isSupervisor() || isRoleTeamLeader() || isRoleTeamLeaderSale();
+  const fields = [
+    {
+      key: "read_statuses",
+      label: i18n.t("chat:label.conversationStatus", {
+        defaultValue: "Tr\u1EA1ng th\xE1i cu\u1ED9c h\u1ED9i tho\u1EA1i"
+      }),
+      isActive: (v) => v.read_statuses?.length > 0,
+      reset: () => form.setValue("read_statuses", []),
+      renderValue: () => /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "read_statuses",
+          render: ({ field }) => /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+            MultipleSelector,
+            {
+              ...field,
+              placeholder: i18n.t("chat:field.selectConversationStatus", {
+                defaultValue: "Ch\u1ECDn tr\u1EA1ng th\xE1i cu\u1ED9c h\u1ED9i tho\u1EA1i"
+              }),
+              inputProps: { tabIndex: -1, className: "px-1" },
+              options: ChatFilterStatusOptions,
+              commandProps: {
+                filter: (value, search, keywords) => keywords[0].toLowerCase().includes(search.trim().toLowerCase())
+              }
+            }
+          ) })
+        }
+      )
+    },
+    {
+      key: "sources",
+      label: i18n.t("chat:filter.filterBySource", {
+        defaultValue: "L\u1ECDc theo ngu\u1ED3n"
+      }),
+      isActive: (v) => !v.sources?.includes("all"),
+      reset: () => {
+        form.setValue("sources", ["all"]);
+        form.setValue("page_ids", []);
+        form.setValue("ad_id", "");
+      },
+      renderValue: () => /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "sources",
+          render: ({ field }) => {
+            const realOptions = sourceOptions.filter((o) => o.value !== "all");
+            const selected = realOptions.filter(
+              (o) => field.value.includes(o.value)
+            );
+            return /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+              MultipleSelector,
+              {
+                value: selected,
+                placeholder: i18n.t("chat:placeholder.selectSource", {
+                  defaultValue: "Ch\u1ECDn ngu\u1ED3n"
+                }),
+                inputProps: { className: "px-1" },
+                options: realOptions,
+                onChange: (next) => {
+                  const newSources = next.map((o) => o.value);
+                  if (!newSources.length) {
+                    field.onChange(["all"]);
+                    form.setValue("page_ids", []);
+                    form.setValue("ad_id", "");
+                    return;
+                  }
+                  field.onChange(newSources);
+                  const newPageIds = form.getValues("page_ids").filter((p) => newSources.includes(p.source));
+                  form.setValue("page_ids", newPageIds);
+                  if (!newSources.includes("facebook")) {
+                    form.setValue("ad_id", "");
+                  }
+                }
+              }
+            ) });
+          }
+        }
+      )
+    },
+    {
+      key: "has_fb_ads",
+      label: i18n.t("campaign:field.messageType", {
+        defaultValue: "Lo\u1EA1i tin nh\u1EAFn"
+      }),
+      isActive: (v) => v.has_fb_ads !== void 0 && v.has_fb_ads !== "all",
+      reset: () => {
+        form.setValue("has_fb_ads", "all");
+        form.setValue("ad_id", "");
+        form.setValue("post_ids", []);
+      },
+      renderValue: () => /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "has_fb_ads",
+          render: ({ field }) => /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: boolToSelectValue(field.value) === "all" ? "" : boolToSelectValue(field.value),
+              onValueChange: (value) => {
+                const boolValue = selectValueToBool(value);
+                field.onChange(boolValue);
+                if (boolValue !== true) form.setValue("ad_id", "");
+                if (boolValue !== "post") form.setValue("post_ids", []);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  SelectTrigger,
+                  {
+                    className: cn(
+                      boolToSelectValue(field.value) === "all" && "text-muted-foreground"
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      SelectValue,
+                      {
+                        placeholder: i18n.t("chat:placeholder.selectMessageType", {
+                          defaultValue: "Ch\u1ECDn lo\u1EA1i tin nh\u1EAFn"
+                        })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(SelectContent, { children: HAS_FB_ADS_OPTIONS.filter((o) => o.value !== "all").map(
+                  (option) => /* @__PURE__ */ jsx(
+                    SelectItem,
+                    {
+                      value: boolToSelectValue(option.value),
+                      children: option.label
+                    },
+                    String(option.value)
+                  )
+                ) })
+              ]
+            }
+          ) })
+        }
+      )
+    },
+    {
+      key: "ad_id",
+      label: "Ads ID",
+      isActive: (v) => !!v.ad_id && v.ad_id.trim().length > 0,
+      reset: () => form.setValue("ad_id", ""),
+      renderValue: () => {
+        const sources = form.watch("sources");
+        const hasFbAds = form.watch("has_fb_ads");
+        const enabled = sources.includes("facebook") && hasFbAds === true;
+        return /* @__PURE__ */ jsx(
+          FormField,
+          {
+            control: form.control,
+            name: "ad_id",
+            render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  value: field.value || "",
+                  onChange: (e) => field.onChange(e.target.value),
+                  onBlur: field.onBlur,
+                  disabled: !enabled,
+                  placeholder: i18n.t("chat:placeholder.adsId", {
+                    defaultValue: "Nh\u1EADp Ads ID"
+                  }),
+                  className: cn("py-2", !enabled && "pr-8")
+                }
+              ) }),
+              !enabled && /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(
+                  TooltipTrigger,
+                  {
+                    type: "button",
+                    className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground",
+                    children: /* @__PURE__ */ jsx(Info, { className: "h-3.5 w-3.5" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(TooltipContent, { children: i18n.t("chat:hint.onlyAppliesWhenFacebookAndAds", {
+                  defaultValue: "Ch\u1EC9 \xE1p d\u1EE5ng khi Ngu\u1ED3n c\xF3 Facebook v\xE0 Lo\u1EA1i tin nh\u1EAFn l\xE0\n                        Ads"
+                }) })
+              ] }) })
+            ] })
+          }
+        );
+      }
+    },
+    {
+      key: "post_ids",
+      label: i18n.t("chat:label.post", {
+        defaultValue: "B\xE0i vi\u1EBFt"
+      }),
+      isActive: (v) => v.post_ids?.length > 0,
+      reset: () => form.setValue("post_ids", []),
+      renderValue: () => /* @__PURE__ */ jsx(PostIdsField, { form })
+    },
+    {
+      key: "page_ids",
+      label: i18n.t("common:label.detailedSource", {
+        defaultValue: "Ngu\u1ED3n chi ti\u1EBFt"
+      }),
+      isActive: (v) => v.page_ids?.length > 0,
+      reset: () => form.setValue("page_ids", []),
+      renderValue: () => /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "page_ids",
+          render: ({ field }) => /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+            MultipleSelector,
+            {
+              ...field,
+              placeholder: i18n.t("chat:field.selectDetailedSource", {
+                defaultValue: "Ch\u1ECDn ngu\u1ED3n chi ti\u1EBFt"
+              }),
+              inputProps: { className: "px-1" },
+              options: filterSocialPageList,
+              groupBy: "source",
+              renderGroupHeading: (source) => ChatFilterSourceLabel[source],
+              commandProps: {
+                filter: (value, search, keywords) => keywords.length > 0 && keywords[0].toLowerCase().includes(search.trim().toLowerCase())
+              }
+            }
+          ) })
+        }
+      )
+    },
+    {
+      key: "agents_in_room",
+      label: i18n.t("common:label.agent", {
+        defaultValue: "Chuy\xEAn vi\xEAn"
+      }),
+      isActive: (v) => v.agents_in_room?.length > 0,
+      reset: () => form.setValue("agents_in_room", []),
+      renderValue: () => /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "agents_in_room",
+          render: ({ field }) => /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+            MultipleSelector,
+            {
+              placeholder: i18n.t("common:placeholder.searchAgent", {
+                defaultValue: "Nh\u1EADp \u0111\u1EC3 t\xECm chuy\xEAn vi\xEAn"
+              }),
+              ...field,
+              inputProps: { className: "px-1" },
+              buildOption: (u) => ({ label: u.name, value: u._id }),
+              onSearch: (value) => searchUser({ searchText: value, ...searchUserParams() })
+            }
+          ) })
+        }
+      )
+    },
+    {
+      key: "assigned",
+      label: i18n.t("common:label.assignee", {
+        defaultValue: "Ng\u01B0\u1EDDi ph\u1EE5 tr\xE1ch"
+      }),
+      isActive: (v) => !!v.assigned,
+      reset: () => form.setValue("assigned", null),
+      renderValue: () => /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "assigned",
+          render: ({ field }) => /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+            Combobox,
+            {
+              searchKey: "assigned",
+              placeholder: i18n.t("chat:placeholder.searchAssignee", {
+                defaultValue: "Nh\u1EADp \u0111\u1EC3 t\xECm ng\u01B0\u1EDDi ph\u1EE5 tr\xE1ch"
+              }),
+              ...field,
+              buildOption: (u) => ({ label: u.name, value: u._id }),
+              onSearch: (value) => searchUser({ searchText: value, ...searchUserParams() })
+            }
+          ) })
+        }
+      )
+    },
+    {
+      key: "group_ids",
+      label: i18n.t("common:label.department", {
+        defaultValue: "B\u1ED9 ph\u1EADn"
+      }),
+      isActive: (v) => v.group_ids?.length > 0,
+      reset: () => form.setValue("group_ids", []),
+      renderValue: () => /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "group_ids",
+          render: ({ field }) => /* @__PURE__ */ jsx(
+            FilterGroupSelect,
+            {
+              value: field.value || [],
+              onChange: field.onChange,
+              placeholder: i18n.t("common:placeholder.selectDepartment", {
+                defaultValue: "Ch\u1ECDn b\u1ED9 ph\u1EADn"
+              })
+            }
+          )
+        }
+      )
+    },
+    {
+      key: "crm_type",
+      label: i18n.t("common:label.customerStatus", {
+        defaultValue: "Tr\u1EA1ng th\xE1i kh\xE1ch h\xE0ng"
+      }),
+      isActive: (v) => !!v.crm_type,
+      reset: () => form.setValue("crm_type", ""),
+      renderValue: () => /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "crm_type",
+          render: ({ field }) => /* @__PURE__ */ jsx(
+            CustomSelect,
+            {
+              value: field.value,
+              onChange: field.onChange,
+              options: CRM_TYPE_OPTIONS,
+              placeholder: i18n.t("common:placeholder.selectCustomerStatus", {
+                defaultValue: "Ch\u1ECDn tr\u1EA1ng th\xE1i kh\xE1ch h\xE0ng"
+              })
+            }
+          )
+        }
+      )
+    },
+    {
+      key: "phone_status",
+      label: i18n.t("common:label.phone", {
+        defaultValue: "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i"
+      }),
+      isActive: (v) => v.phone_status && v.phone_status !== "all",
+      reset: () => form.setValue("phone_status", "all"),
+      renderValue: () => /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "phone_status",
+          render: ({ field }) => /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: field.value === "all" ? "" : field.value,
+              onValueChange: field.onChange,
+              children: [
+                /* @__PURE__ */ jsx(
+                  SelectTrigger,
+                  {
+                    className: cn(
+                      field.value === "all" && "text-muted-foreground"
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      SelectValue,
+                      {
+                        placeholder: i18n.t("chat:placeholder.selectPhoneNumber", {
+                          defaultValue: "Ch\u1ECDn s\u1ED1 \u0111i\u1EC7n tho\u1EA1i"
+                        })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(SelectContent, { children: PHONE_STATUS_OPTIONS.filter((o) => o.value !== "all").map(
+                  (option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)
+                ) })
+              ]
+            }
+          ) })
+        }
+      )
+    },
+    {
+      key: "is_unanswered",
+      label: i18n.t("common:label.answerStatus", {
+        defaultValue: "Tr\u1EA1ng th\xE1i tr\u1EA3 l\u1EDDi"
+      }),
+      isActive: (v) => v.is_unanswered && v.is_unanswered !== "all",
+      reset: () => form.setValue("is_unanswered", "all"),
+      renderValue: () => /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "is_unanswered",
+          render: ({ field }) => /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: field.value === "all" ? "" : field.value,
+              onValueChange: field.onChange,
+              children: [
+                /* @__PURE__ */ jsx(
+                  SelectTrigger,
+                  {
+                    className: cn(
+                      field.value === "all" && "text-muted-foreground"
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      SelectValue,
+                      {
+                        placeholder: i18n.t("chat:placeholder.selectReplyStatus", {
+                          defaultValue: "Ch\u1ECDn tr\u1EA1ng th\xE1i tr\u1EA3 l\u1EDDi"
+                        })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(SelectContent, { children: IS_UNANSWERED_OPTIONS.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+              ]
+            }
+          ) })
+        }
+      )
+    },
+    {
+      key: "is_group",
+      label: i18n.t("common:label.group", {
+        defaultValue: "Nh\xF3m"
+      }),
+      isActive: (v) => v.is_group && v.is_group !== "all",
+      reset: () => form.setValue("is_group", "all"),
+      renderValue: () => /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "is_group",
+          render: ({ field }) => /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: field.value === "all" ? "" : field.value,
+              onValueChange: field.onChange,
+              children: [
+                /* @__PURE__ */ jsx(
+                  SelectTrigger,
+                  {
+                    className: cn(
+                      field.value === "all" && "text-muted-foreground"
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      SelectValue,
+                      {
+                        placeholder: i18n.t("chat:placeholder.selectGroup", {
+                          defaultValue: "Ch\u1ECDn nh\xF3m"
+                        })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(SelectContent, { children: IS_GROUP_OPTIONS.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+              ]
+            }
+          ) })
+        }
+      )
+    },
+    {
+      key: "is_unhandled",
+      label: i18n.t("chat:label.interaction", {
+        defaultValue: "T\u01B0\u01A1ng t\xE1c"
+      }),
+      isActive: (v) => !!v.is_unhandled,
+      reset: () => form.setValue("is_unhandled", ""),
+      renderValue: () => /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "is_unhandled",
+          render: ({ field }) => /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(Select, { value: field.value, onValueChange: field.onChange, children: [
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                className: cn(!field.value && "text-muted-foreground"),
+                children: /* @__PURE__ */ jsx(
+                  SelectValue,
+                  {
+                    placeholder: i18n.t(
+                      "chat:placeholder.selectInteractionStatus",
+                      { defaultValue: "Ch\u1ECDn tr\u1EA1ng th\xE1i t\u01B0\u01A1ng t\xE1c" }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectContent, { children: IS_UNHANDLED_OPTIONS.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+          ] }) })
+        }
+      )
+    },
+    {
+      key: "tags",
+      label: "Tags",
+      isActive: (v) => v.tags?.length > 0,
+      reset: () => {
+        form.setValue("tags", []);
+        form.setValue("tag_match_mode", TagMatchMode.Includes);
+      },
+      renderValue: () => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(
+          FormField,
+          {
+            control: form.control,
+            name: "tag_match_mode",
+            render: ({ field }) => {
+              const tags = form.watch("tags") || [];
+              const disabled = tags.length === 0;
+              return /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: field.value || TagMatchMode.Includes,
+                  onValueChange: field.onChange,
+                  disabled,
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { className: "w-[110px] shrink-0", children: /* @__PURE__ */ jsx(
+                      SelectValue,
+                      {
+                        placeholder: i18n.t("chat:label.tagMatchMode", {
+                          defaultValue: "\u0110i\u1EC1u ki\u1EC7n tag"
+                        })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(SelectContent, { children: TAG_MATCH_MODE_OPTIONS.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+                  ]
+                }
+              ) });
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormField,
+          {
+            control: form.control,
+            name: "tags",
+            render: ({ field }) => /* @__PURE__ */ jsx(FormControl, { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+              MultipleSelectSettingTags,
+              {
+                target: SettingTags.Chat,
+                selected: field.value || [],
+                onChange: field.onChange,
+                placeholder: i18n.t("common:placeholder.selectTags", {
+                  defaultValue: "Ch\u1ECDn tags"
+                }),
+                size: "default",
+                inputClassName: "my-0",
+                includePersonal
+              }
+            ) })
+          }
+        )
+      ] })
+    },
+    {
+      key: "range_date",
+      label: i18n.t("common:label.time", {
+        defaultValue: "Th\u1EDDi gian"
+      }),
+      isActive: (v) => !!(v.range_date?.from || v.range_date?.to),
+      reset: () => {
+        form.setValue("range_date", { from: null, to: null });
+        form.setValue("date_filter_type", DateFilterType.LastMsgTime);
+      },
+      renderValue: () => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(
+          FormField,
+          {
+            control: form.control,
+            name: "date_filter_type",
+            render: ({ field }) => /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(Select, { value: field.value, onValueChange: field.onChange, children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(
+                SelectValue,
+                {
+                  placeholder: i18n.t("chat:placeholder.selectTimeType", {
+                    defaultValue: "Ch\u1ECDn lo\u1EA1i th\u1EDDi gian"
+                  })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: DATE_FILTER_TYPE_OPTIONS.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+            FormField,
+            {
+              control: form.control,
+              name: "range_date.from",
+              render: ({ field }) => {
+                const toDate = form.watch("range_date.to");
+                return /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                  DateTimePicker,
+                  {
+                    date: field.value,
+                    onChange: field.onChange,
+                    classNames: {
+                      container: "pl-3 pr-6",
+                      icon: "right-2"
+                    },
+                    disabledDate: toDate ? { after: toDate } : void 0,
+                    disabledHourFunc: (hour) => {
+                      if (!toDate || !isSameDay(field.value, toDate))
+                        return false;
+                      return Number(hour) > toDate.getHours();
+                    },
+                    disabledMinuteFunc: (minute) => {
+                      if (!toDate || !isSameDay(field.value, toDate))
+                        return false;
+                      return field.value.getHours() < toDate.getHours() ? false : Number(minute) >= toDate.getMinutes();
+                    }
+                  }
+                ) });
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+            FormField,
+            {
+              control: form.control,
+              name: "range_date.to",
+              render: ({ field }) => {
+                const fromDate = form.watch("range_date.from");
+                return /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                  DateTimePicker,
+                  {
+                    date: field.value,
+                    onChange: field.onChange,
+                    classNames: {
+                      container: "pl-3 pr-6",
+                      icon: "right-1.5"
+                    },
+                    disabledDate: fromDate ? { before: fromDate } : void 0,
+                    disabledHourFunc: (hour) => {
+                      if (!fromDate || !isSameDay(field.value, fromDate))
+                        return false;
+                      return Number(hour) < fromDate.getHours();
+                    },
+                    disabledMinuteFunc: (minute) => {
+                      if (!fromDate || !isSameDay(field.value, fromDate))
+                        return false;
+                      return fromDate.getHours() < field.value.getHours() ? false : Number(minute) <= fromDate.getMinutes();
+                    }
+                  }
+                ) });
+              }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(RangeDateMessage, { control: form.control })
+      ] })
+    }
+  ];
+  return canFilterByDepartment ? fields : fields.filter((field) => field.key !== "group_ids");
+}
+function getActiveCriteriaKeys(fieldDefs, values) {
+  return fieldDefs.filter((f) => f.isActive(values)).map((f) => f.key);
+}
+function FilterCriteriaRows({
+  form,
+  sourceOptions,
+  filterSocialPageList,
+  includePersonal = false,
+  activeKeys,
+  onRemoveCriteria,
+  onChangeCriteriaType
+}) {
+  const fieldDefs = useMemo(
+    () => buildCriteriaFields({
+      form,
+      sourceOptions,
+      filterSocialPageList,
+      includePersonal
+    }),
+    [form, sourceOptions, filterSocialPageList, includePersonal]
+  );
+  const fieldMap = useMemo(() => {
+    const map = {};
+    fieldDefs.forEach((f) => {
+      map[f.key] = f;
+    });
+    return map;
+  }, [fieldDefs]);
+  const availableFieldDefs = (excludeKey) => fieldDefs.filter(
+    (f) => f.key === excludeKey || !activeKeys.includes(f.key)
+  );
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2 sm:space-y-3", children: activeKeys.map((key) => {
+    const field = fieldMap[key];
+    if (!field) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-criteria-key": key,
+        className: "flex flex-col gap-1.5 rounded-lg border border-border-subtle p-2 sm:flex-row sm:items-start sm:gap-2 sm:border-0 sm:p-0",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:contents", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 sm:flex-initial", children: /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: key,
+                onValueChange: (newKey) => onChangeCriteriaType(key, newKey),
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full sm:w-[240px] sm:shrink-0", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: availableFieldDefs(key).map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.key, children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                    option.icon,
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+                  ] }) }, option.key)) })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "shrink-0 text-destructive hover:text-destructive sm:order-1",
+                onClick: () => onRemoveCriteria(key),
+                children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: field.renderValue() })
+        ]
+      },
+      key
+    );
+  }) });
+}
+export {
+  buildCriteriaFields,
+  FilterCriteriaRows as default,
+  getActiveCriteriaKeys
+};