diff --git a/packages/features/insights/filters/UsersListInTeam.tsx b/packages/features/insights/filters/UsersListInTeam.tsx index 36a7cd1825..e1be54f80a 100644 --- a/packages/features/insights/filters/UsersListInTeam.tsx +++ b/packages/features/insights/filters/UsersListInTeam.tsx @@ -1,3 +1,5 @@ +import { useState } from "react"; + import { FilterCheckboxField, FilterCheckboxFieldsContainer, @@ -5,7 +7,7 @@ import { import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { RouterOutputs } from "@calcom/trpc"; import { trpc } from "@calcom/trpc"; -import { AnimatedPopover, Avatar } from "@calcom/ui"; +import { AnimatedPopover, Avatar, FilterSearchField } from "@calcom/ui"; import { useFilterContext } from "../context/provider"; @@ -23,6 +25,7 @@ export const UserListInTeam = () => { const { t } = useLocale(); const { filter, setConfigFilters } = useFilterContext(); const { selectedFilter, selectedTeamId, selectedMemberUserId, isAll } = filter; + const [searchText, setSearchText] = useState(""); const { data, isSuccess } = trpc.viewer.insights.userList.useQuery({ teamId: selectedTeamId ?? -1, isAll: !!isAll, @@ -34,6 +37,15 @@ export const UserListInTeam = () => { const userListOptions = data?.map(mapUserToOption); const selectedTeamUser = data?.find((item) => item.id === selectedMemberUserId); const userValue = selectedTeamUser ? mapUserToOption(selectedTeamUser) : null; + const filteredUserListOptions = userListOptions?.filter((member) => { + if (searchText.trim() === "") return true; + + const searchLower = searchText.toLowerCase(); + const labelMatch = member.label.toLowerCase().includes(searchLower); + const usernameMatch = member.username?.toLowerCase().includes(searchLower); + + return labelMatch || usernameMatch; + }); if (!isSuccess || data?.length === 0) return null; @@ -47,7 +59,8 @@ export const UserListInTeam = () => { return ( - {userListOptions?.map((member) => ( + setSearchText(e.target.value)} placeholder={t("search")} /> + {filteredUserListOptions?.map((member) => ( { icon={} /> ))} - {userListOptions?.length === 0 && ( + {filteredUserListOptions?.length === 0 && (

{t("no_options_available")}

)}
diff --git a/packages/ui/components/popover/AnimatedPopover.tsx b/packages/ui/components/popover/AnimatedPopover.tsx index 82d122f050..7a025df6ba 100644 --- a/packages/ui/components/popover/AnimatedPopover.tsx +++ b/packages/ui/components/popover/AnimatedPopover.tsx @@ -60,7 +60,7 @@ export const AnimatedPopover = ({ Trigger ) : (
- +
{prefix && {prefix} } {text}