"use client"; import { Check, Copy, Loader2, Mail, Plus, RefreshCw, Trash2, X, } from "lucide-react"; import { useState } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/components/ui/empty"; import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputGroup, InputGroupAddon, 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 TeamInvitation { id: string; email?: string; link?: string; role: "admin" | "member" | "viewer"; status: "pending" | "accepted" | "expired" | "revoked"; invitedBy: { name: string; email: string; }; expiresAt?: Date; createdAt: Date; acceptedAt?: Date; } export interface TeamInvitationsProps { invitations?: TeamInvitation[]; onCreate?: (data: { email?: string; role: "admin" | "member" | "viewer"; expiresInDays?: number; message?: string; }) => Promise; onRevoke?: (invitationId: string) => Promise; onResend?: (invitationId: string) => Promise; onCopyLink?: (link: string) => Promise; className?: string; allowDirectLinks?: boolean; } function formatDate(date: Date): string { return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", }).format(date); } function formatTimeUntil(date: Date): string { const now = Date.now(); const diff = date.getTime() - now; if (diff <= 0) return "Expired"; const days = Math.floor(diff / (1000 * 60 * 60 * 24)); const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); if (days > 0) return `${days} day${days !== 1 ? "s" : ""}`; if (hours > 0) return `${hours} hour${hours !== 1 ? "s" : ""}`; return "Less than an hour"; } function getStatusBadge(status: TeamInvitation["status"]) { switch (status) { case "pending": return Pending; case "accepted": return Accepted; case "expired": return Expired; case "revoked": return Revoked; } } export default function TeamInvitations({ invitations = [], onCreate, onRevoke, onResend, onCopyLink, className, allowDirectLinks = true, }: TeamInvitationsProps) { const [createDialogOpen, setCreateDialogOpen] = useState(false); const [isCreating, setIsCreating] = useState(false); const [actionLoading, setActionLoading] = useState(null); const [copiedLink, setCopiedLink] = useState(null); const [errors, setErrors] = useState>({}); const [inviteData, setInviteData] = useState({ email: "", role: "member" as "admin" | "member" | "viewer", expiresInDays: 7, message: "", useDirectLink: false, }); const pendingInvitations = invitations.filter((i) => i.status === "pending"); const acceptedInvitations = invitations.filter( (i) => i.status === "accepted" ); const handleCreate = async () => { setErrors({}); if (!(inviteData.useDirectLink || inviteData.email.trim())) { setErrors({ email: "Email is required" }); return; } if (!inviteData.useDirectLink) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(inviteData.email)) { setErrors({ email: "Please enter a valid email address" }); return; } } setIsCreating(true); try { await onCreate?.({ email: inviteData.useDirectLink ? undefined : inviteData.email, role: inviteData.role, expiresInDays: inviteData.expiresInDays, message: inviteData.message, }); setInviteData({ email: "", role: "member", expiresInDays: 7, message: "", useDirectLink: false, }); setCreateDialogOpen(false); } catch (error) { setErrors({ _general: error instanceof Error ? error.message : "Failed to create invitation", }); } finally { setIsCreating(false); } }; const handleAction = async ( action: () => Promise, invitationId: string ) => { setActionLoading(invitationId); try { await action(); } finally { setActionLoading(null); } }; const handleCopyLink = async (link: string, invitationId: string) => { try { await onCopyLink?.(link); await navigator.clipboard.writeText(link); setCopiedLink(invitationId); setTimeout(() => setCopiedLink(null), 2000); } catch {} }; return (

Invitations {pendingInvitations.length} pending, {acceptedInvitations.length}{" "} accepted

Example Usage