"use client"; import { Crown, Loader2, Mail, MoreVertical, Shield, Trash2, User, UserCheck, } from "lucide-react"; import { useState } from "react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/components/ui/empty"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface TeamMember { id: string; name: string; email: string; avatar?: string; role: "owner" | "admin" | "member" | "viewer"; status: "active" | "invited" | "suspended"; lastActive?: Date; joinedAt: Date; aiUsage?: { tokens: number; sessions: number; }; } export interface TeamMemberListProps { members?: TeamMember[]; currentUserId?: string; onPromote?: (memberId: string) => Promise; onDemote?: (memberId: string) => Promise; onRemove?: (memberId: string) => Promise; onResendInvite?: (memberId: string) => Promise; className?: string; showSearch?: boolean; showFilters?: boolean; showUsage?: boolean; } function formatDate(date: Date): string { return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", }).format(date); } function formatLastActive(date?: Date): string { if (!date) return "Never"; const now = Date.now(); const diff = now - date.getTime(); const minutes = Math.floor(diff / 60_000); const hours = Math.floor(minutes / 60); const days = Math.floor(hours / 24); if (minutes < 1) return "Just now"; if (minutes < 60) return `${minutes}m ago`; if (hours < 24) return `${hours}h ago`; if (days < 7) return `${days}d ago`; return formatDate(date); } function formatNumber(num: number): string { if (num >= 1_000_000) { return `${(num / 1_000_000).toFixed(1)}M`; } if (num >= 1000) { return `${(num / 1000).toFixed(1)}K`; } return num.toString(); } function getRoleIcon(role: TeamMember["role"]) { switch (role) { case "owner": return Crown; case "admin": return Shield; case "member": return UserCheck; case "viewer": return User; default: return User; } } function getRoleBadgeVariant(role: TeamMember["role"]) { switch (role) { case "owner": return "default"; case "admin": return "secondary"; default: return "outline"; } } function getInitials(name: string): string { return name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() .slice(0, 2); } export default function TeamMemberList({ members = [], currentUserId, onPromote, onDemote, onRemove, onResendInvite, className, showSearch = true, showFilters = true, showUsage = false, }: TeamMemberListProps) { const [searchQuery, setSearchQuery] = useState(""); const [roleFilter, setRoleFilter] = useState("all"); const [statusFilter, setStatusFilter] = useState("all"); const [actionLoading, setActionLoading] = useState(null); const filteredMembers = members.filter((member) => { const matchesSearch = !searchQuery.trim() || member.name.toLowerCase().includes(searchQuery.toLowerCase()) || member.email.toLowerCase().includes(searchQuery.toLowerCase()); const matchesRole = roleFilter === "all" || member.role === roleFilter; const matchesStatus = statusFilter === "all" || member.status === statusFilter; return matchesSearch && matchesRole && matchesStatus; }); const handleAction = async ( action: () => Promise, memberId: string ) => { setActionLoading(memberId); try { await action(); } finally { setActionLoading(null); } }; return (

Team Members {members.length} member{members.length !== 1 ? "s" : ""} in your team

{showSearch && ( setSearchQuery(e.target.value)} placeholder="Search members…" type="search" value={searchQuery} /> )} {showFilters && (

)}

{filteredMembers.length === 0 ? ( {searchQuery || roleFilter !== "all" || statusFilter !== "all" ? "No members found" : "No members yet"} {searchQuery || roleFilter !== "all" || statusFilter !== "all" ? "Try adjusting your filters" : "Invite members to get started"} ) : (

{filteredMembers.map((member, idx) => { const RoleIcon = getRoleIcon(member.role); const isCurrentUser = member.id === currentUserId; const canModify = !isCurrentUser && member.role !== "owner"; return (

{" "} {getInitials(member.name)} {member.name} {isCurrentUser && ( You )} {member.role} {member.status === "invited" && ( Invited )} {member.status === "suspended" && ( Suspended )}

{member.email}

Joined {formatDate(member.joinedAt)} {member.lastActive && ( <> Active {formatLastActive(member.lastActive)} )} {showUsage && member.aiUsage && ( <> {formatNumber(member.aiUsage.tokens)} tokens {member.aiUsage.sessions} session {member.aiUsage.sessions !== 1 ? "s" : ""} )}

{canModify && ( {member.role === "member" && onPromote && ( handleAction( () => onPromote(member.id), member.id ) } > Promote to Admin )} {member.role === "admin" && onDemote && ( handleAction( () => onDemote(member.id), member.id ) } > Demote to Member )} {member.status === "invited" && onResendInvite && ( handleAction( () => onResendInvite(member.id), member.id ) } > Resend Invitation )} {member.role !== "viewer" && ( )} {onRemove && ( <> handleAction( () => onRemove(member.id), member.id ) } variant="destructive" > Remove Member )} )}

{idx < filteredMembers.length - 1 && }

); })}

)} ); }

Example Usage