diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/_components/sidebar/TeamSettingsSidebar.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/_components/sidebar/TeamSettingsSidebar.tsx
index e435c2da92b..21c2a1ddfaa 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/_components/sidebar/TeamSettingsSidebar.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/_components/sidebar/TeamSettingsSidebar.tsx
@@ -1,5 +1,5 @@
import type { Team } from "@/api/team";
-import { GradientAvatar } from "@/components/blocks/Avatars/GradientAvatar";
+import { Badge } from "@/components/ui/badge";
import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
import type { ThirdwebClient } from "thirdweb";
import { SidebarLink } from "./SidebarLink";
@@ -57,14 +57,13 @@ function RenderLinkGroup(props: {
}) {
return (
<>
-
-
-
{props.title}
+
+
+ {props.title}
+
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx
index 1235109d4a7..4b200dc8de4 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx
@@ -39,6 +39,7 @@ export function ManageInvitesSection(props: {
}) {
let topSection: React.ReactNode = null;
+ const [searchTerm, setSearchTerm] = useState("");
const [deletedInviteIds, setDeletedInviteIds] = useState([]);
const [role, setRole] = useState("ALL ROLES");
const [sortBy, setSortBy] = useState("date");
@@ -46,6 +47,12 @@ export function ManageInvitesSection(props: {
const invitesToShow = useMemo(() => {
let value = props.teamInvites;
+ if (searchTerm) {
+ value = value.filter((inv) =>
+ inv.email.toLowerCase().includes(searchTerm.toLowerCase()),
+ );
+ }
+
value = value.filter((inv) => !deletedInviteIds.includes(inv.id));
if (role !== "ALL ROLES") {
@@ -68,7 +75,7 @@ export function ManageInvitesSection(props: {
}
return value;
- }, [role, props.teamInvites, sortBy, deletedInviteIds]);
+ }, [role, props.teamInvites, sortBy, deletedInviteIds, searchTerm]);
if (!props.userHasEditPermission) {
topSection = (
@@ -89,6 +96,9 @@ export function ManageInvitesSection(props: {
setRole={setRole}
setSortBy={setSortBy}
sortBy={sortBy}
+ searchTerm={searchTerm}
+ setSearchTerm={setSearchTerm}
+ searchPlaceholder="Search Email"
/>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
index 30c0d4dd3fe..3d14e12180f 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
@@ -36,6 +36,7 @@ export function ManageMembersSection(props: {
}) {
let topSection: React.ReactNode = null;
+ const [searchTerm, setSearchTerm] = useState("");
const [deletedMembersIds, setDeletedMembersIds] = useState([]);
const [role, setRole] = useState("ALL ROLES");
const [sortBy, setSortBy] = useState("date");
@@ -43,6 +44,12 @@ export function ManageMembersSection(props: {
const membersToShow = useMemo(() => {
let value = props.members;
+ if (searchTerm) {
+ value = value.filter((m) =>
+ m.account.name.toLowerCase().includes(searchTerm.toLowerCase()),
+ );
+ }
+
value = value.filter((m) => !deletedMembersIds.includes(m.accountId));
if (role !== "ALL ROLES") {
@@ -69,7 +76,7 @@ export function ManageMembersSection(props: {
}
return value;
- }, [role, props.members, sortBy, deletedMembersIds]);
+ }, [role, props.members, sortBy, deletedMembersIds, searchTerm]);
if (!props.userHasEditPermission) {
topSection = (
@@ -90,6 +97,9 @@ export function ManageMembersSection(props: {
setRole={setRole}
setSortBy={setSortBy}
sortBy={sortBy}
+ searchTerm={searchTerm}
+ setSearchTerm={setSearchTerm}
+ searchPlaceholder="Search Team Members"
/>
@@ -147,7 +157,7 @@ function MemberRow(props: {
void;
setSortBy: (sortBy: MemberSortId) => void;
sortBy: MemberSortId;
+ searchTerm: string;
+ setSearchTerm: (searchTerm: string) => void;
+ searchPlaceholder: string;
}) {
- const { role, setRole, setSortBy, sortBy } = props;
+ const { role, setRole, setSortBy, sortBy, searchTerm, setSearchTerm } = props;
return (