"use client"; import { Crown, Loader2, MoreVertical, Send, Trash2, UserPlus, } 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 { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputGroup, InputGroupInput } from "@/components/ui/input-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; 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; } export interface SettingsTeamMembersProps { members?: TeamMember[]; currentUserId?: string; onInvite?: (data: { email: string; role: "admin" | "member" | "viewer"; message?: string; }) => Promise; onRemove?: (memberId: string) => Promise; onChangeRole?: ( memberId: string, role: "admin" | "member" | "viewer" ) => Promise; onTransferOwnership?: (memberId: string) => Promise; className?: string; } const roleDescriptions = { owner: "Full access to all settings and billing", admin: "Can manage team members and settings", member: "Can create and edit content", viewer: "Read-only access", }; 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); } export default function SettingsTeamMembers({ members = [], currentUserId, onInvite, onRemove, onChangeRole, onTransferOwnership, className, }: SettingsTeamMembersProps) { const [isInviting, setIsInviting] = useState(false); const [inviteDialogOpen, setInviteDialogOpen] = useState(false); const [errors, setErrors] = useState>({}); const [inviteData, setInviteData] = useState({ email: "", role: "member" as "admin" | "member" | "viewer", message: "", }); const handleInvite = async () => { setErrors({}); if (!inviteData.email.trim()) { setErrors({ email: "Email is required" }); return; } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(inviteData.email)) { setErrors({ email: "Please enter a valid email address" }); return; } setIsInviting(true); try { await onInvite?.(inviteData); setInviteData({ email: "", role: "member", message: "" }); setInviteDialogOpen(false); } catch (error) { setErrors({ _general: error instanceof Error ? error.message : "Failed to send invitation", }); } finally { setIsInviting(false); } }; const getInitials = (name: string): string => name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() .slice(0, 2); return (

Team Members Manage team members and their roles

Alice Admin

Bob Writer

Example Usage