diff --git a/apps/console/src/pages/iam/organizations/people/_components/PeopleList.tsx b/apps/console/src/pages/iam/organizations/people/_components/PeopleList.tsx
index ca64a7dc9..573f665c8 100644
--- a/apps/console/src/pages/iam/organizations/people/_components/PeopleList.tsx
+++ b/apps/console/src/pages/iam/organizations/people/_components/PeopleList.tsx
@@ -20,7 +20,10 @@
import { getAssignableRoles, getMembershipRoles, peopleRoles } from "@probo/helpers";
import {
- Checkbox,
+ Button,
+ Dropdown,
+ DropdownCheckboxItem,
+ IconChevronDown,
IconMagnifyingGlass,
Input,
Option,
@@ -192,15 +195,21 @@ export function PeopleList(props: {
debouncedRefetchQuery(value);
};
- const handleStateFilterToggle = (state: ProfileState) => {
+ const handleStateFilterChange = (state: ProfileState, checked: boolean) => {
debouncedRefetchQuery.cancel();
- const newStates = statesFilter.includes(state)
- ? statesFilter.filter(s => s !== state)
- : [...statesFilter, state];
+ const newStates = checked
+ ? [...statesFilter, state]
+ : statesFilter.filter(s => s !== state);
setStatesFilter(newStates);
refetchPeople({ states: newStates });
};
+ const statusFilterLabel = statesFilter.length === 0
+ ? t("peopleList.filters.allStatuses")
+ : statesFilter
+ .map(state => t(`peopleList.filters.${state.toLowerCase()}`))
+ .join(", ");
+
const handleRoleFilterChange = (value: string) => {
debouncedRefetchQuery.cancel();
const newRole = value === "ALL" ? null : (value as MembershipRole);
@@ -234,18 +243,24 @@ export function PeopleList(props: {
value={queryFilter ?? ""}
onValueChange={handleQueryFilterChange}
/>
-
- {t("peopleList.filters.status")}
+
+ {statusFilterLabel}
+
+
+ )}
+ >
{PROFILE_STATES.map(state => (
-
+
))}
-
+