"use client"; import { AlertTriangle, ArrowUpRight, Crown, Loader2, Trash2, Users, } from "lucide-react"; import { useState } from "react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { FieldDescription, FieldLabel } from "@/components/ui/field"; import { Progress } from "@/components/ui/progress"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface AccountInfo { type: "free" | "pro" | "enterprise"; status: "active" | "trial" | "suspended" | "cancelled"; trialEndsAt?: Date; memberCount?: number; memberLimit?: number; storageUsed?: number; storageLimit?: number; } export interface SettingsAccountProps { account?: AccountInfo; onUpgrade?: () => Promise; onDelete?: () => Promise; onTransfer?: () => Promise; className?: string; } function formatBytes(bytes: number): string { if (bytes === 0) return "0 Bytes"; const k = 1024; const sizes = ["Bytes", "KB", "MB", "GB", "TB"]; const i = Math.floor(Math.log(bytes) / Math.log(k)); return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`; } function formatDate(date: Date): string { return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", }).format(date); } export default function SettingsAccount({ account, onUpgrade, onDelete, onTransfer, className, }: SettingsAccountProps) { const [isDeleting, setIsDeleting] = useState(false); if (!account) { return null; } const getStatusBadge = (status: AccountInfo["status"]) => { switch (status) { case "active": return ( Active ); case "trial": return ( Trial ); case "suspended": return ( Suspended ); case "cancelled": return ( Cancelled ); } }; const getPlanBadge = (type: AccountInfo["type"]) => { switch (type) { case "free": return ( Free ); case "pro": return ( Pro ); case "enterprise": return ( Enterprise ); } }; const memberPercentage = account.memberLimit && account.memberCount ? (account.memberCount / account.memberLimit) * 100 : 0; const storagePercentage = account.storageLimit && account.storageUsed ? (account.storageUsed / account.storageLimit) * 100 : 0; return (

Account Manage your account settings and subscription

{/* Account Overview */}

Plan

{getPlanBadge(account.type)} {getStatusBadge(account.status)}

{account.status === "trial" && account.trialEndsAt && (

Trial ends on {formatDate(account.trialEndsAt)}

)} {account.type !== "enterprise" && ( )}

{account.memberLimit !== undefined && (

Team Members

{account.memberCount || 0} / {account.memberLimit} {memberPercentage.toFixed(0)}%

)}

{account.storageLimit !== undefined && ( <>

Storage

{formatBytes(account.storageUsed || 0)} /{" "} {formatBytes(account.storageLimit)} {storagePercentage.toFixed(1)}%

)} {/* Account Actions */}

Transfer Account

Transfer ownership of this account to another user

Danger Zone

Permanently delete your account and all associated data Delete Account? This will permanently delete your account and all associated data. This action cannot be undone. Please type{" "} DELETE to confirm. Cancel { setIsDeleting(true); try { await onDelete?.(); } finally { setIsDeleting(false); } }} > Delete Account

); }

Example Usage