{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "virtual-card-manager", "title": "Virtual Card Manager", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/virtual-card-manager/VirtualCardManager.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Check,\n Copy,\n CreditCard,\n Eye,\n EyeOff,\n Plus,\n Radio,\n ShieldCheck,\n SlidersHorizontal,\n Snowflake,\n CheckCircle2,\n Trash2,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Switch } from '@/components/ui/switch'\n\ninterface VirtualCard {\n id: string\n name: string\n brand: 'mastercard' | 'visa'\n last4: string\n fullNumber: string\n holder: string\n avatar: string\n initials: string\n expiry: string\n cvv: string\n spent: number\n limit: number\n type: 'Monthly Recurring' | 'Single-use'\n status: 'Active' | 'Frozen'\n billingCycle: string\n purpose: string\n}\n\nconst initialCards: VirtualCard[] = [\n {\n id: 'vc-1',\n name: 'AWS & Cloud Infrastructure',\n brand: 'mastercard',\n last4: '8492',\n fullNumber: '5532 8920 4108 8492',\n holder: 'Elena Rostova',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80',\n initials: 'ER',\n expiry: '08/29',\n cvv: '482',\n spent: 4200,\n limit: 5000,\n type: 'Monthly Recurring',\n status: 'Active',\n billingCycle: 'Resets on 1st of month',\n purpose: 'Cloud compute, S3 buckets, and RDS instances',\n },\n {\n id: 'vc-2',\n name: 'Marketing & Ad Spend',\n brand: 'visa',\n last4: '3190',\n fullNumber: '4012 8831 9204 3190',\n holder: 'Marcus Chen',\n avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&auto=format&fit=crop&q=80',\n initials: 'MC',\n expiry: '11/28',\n cvv: '915',\n spent: 8750,\n limit: 10000,\n type: 'Monthly Recurring',\n status: 'Active',\n billingCycle: 'Resets on 1st of month',\n purpose: 'Google Ads, LinkedIn campaigns, and Meta Ads',\n },\n {\n id: 'vc-3',\n name: 'Travel & Conferences',\n brand: 'visa',\n last4: '6021',\n fullNumber: '4111 5900 1284 6021',\n holder: 'Sarah Jenkins',\n avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&auto=format&fit=crop&q=80',\n initials: 'SJ',\n expiry: '03/27',\n cvv: '304',\n spent: 1850,\n limit: 2500,\n type: 'Single-use',\n status: 'Frozen',\n billingCycle: 'Single event allowance',\n purpose: 'Q3 Design Systems Summit flights and lodging',\n },\n {\n id: 'vc-4',\n name: 'SaaS Subscriptions',\n brand: 'mastercard',\n last4: '9455',\n fullNumber: '5241 7719 3302 9455',\n holder: 'Elena Rostova',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80',\n initials: 'ER',\n expiry: '05/29',\n cvv: '729',\n spent: 620,\n limit: 1200,\n type: 'Monthly Recurring',\n status: 'Active',\n billingCycle: 'Resets on 1st of month',\n purpose: 'GitHub Enterprise, Figma, and Slack licenses',\n },\n]\n\nexport interface VirtualCardManagerProps {\n className?: string\n}\n\nexport function VirtualCardManager({ className }: VirtualCardManagerProps) {\n const [cards, setCards] = React.useState(initialCards)\n const [selectedId, setSelectedId] = React.useState('vc-1')\n const [showDetails, setShowDetails] = React.useState(false)\n const [copied, setCopied] = React.useState(false)\n const [actionFeedback, setActionFeedback] = React.useState(null)\n\n const selectedCard = cards.find((c) => c.id === selectedId) ?? cards[0]\n const isSelectedFrozen = selectedCard?.status === 'Frozen'\n const selectedPercent =\n selectedCard && selectedCard.limit > 0\n ? Math.min(100, Math.round((selectedCard.spent / selectedCard.limit) * 100))\n : 0\n\n const showFeedback = React.useCallback((msg: string) => {\n setActionFeedback(msg)\n setTimeout(() => {\n setActionFeedback((prev) => (prev === msg ? null : prev))\n }, 3000)\n }, [])\n\n const toggleFreeze = React.useCallback((id: string) => {\n setCards((prev) =>\n prev.map((c) => {\n if (c.id === id) {\n const nextStatus = c.status === 'Active' ? 'Frozen' : 'Active'\n return { ...c, status: nextStatus }\n }\n return c\n }),\n )\n }, [])\n\n const handleCopyNumber = React.useCallback(() => {\n if (!selectedCard) return\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(selectedCard.fullNumber.replace(/\\s+/g, ''))\n }\n setCopied(true)\n setTimeout(() => setCopied(false), 2000)\n }, [selectedCard])\n\n const adjustLimit = React.useCallback(\n (cardId: string) => {\n setCards((prev) =>\n prev.map((c) => {\n if (c.id === cardId) {\n const newLimit = c.limit === 5000 ? 7500 : c.limit === 10000 ? 12000 : c.limit + 1000\n return { ...c, limit: newLimit }\n }\n return c\n }),\n )\n const current = cards.find((c) => c.id === cardId)\n const newLimit = current\n ? current.limit === 5000\n ? 7500\n : current.limit === 10000\n ? 12000\n : current.limit + 1000\n : 0\n showFeedback(`Limit updated to $${newLimit.toLocaleString()}`)\n },\n [cards, showFeedback],\n )\n\n const terminateCard = React.useCallback(\n (cardId: string) => {\n if (cards.length <= 1) {\n showFeedback('Cannot terminate the last remaining card')\n return\n }\n const remaining = cards.filter((c) => c.id !== cardId)\n setCards(remaining)\n if (selectedId === cardId) {\n setSelectedId(remaining[0].id)\n }\n showFeedback('Card terminated permanently')\n },\n [cards, selectedId, showFeedback],\n )\n\n const issueNewCard = React.useCallback(() => {\n const newId = `vc-${Date.now().toString().slice(-4)}`\n const newLast4 = Math.floor(1000 + Math.random() * 9000).toString()\n const newCard: VirtualCard = {\n id: newId,\n name: 'AI & API Workloads',\n brand: 'visa',\n last4: newLast4,\n fullNumber: `4400 1284 9912 ${newLast4}`,\n holder: 'Elena Rostova',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80',\n initials: 'ER',\n expiry: '09/30',\n cvv: '814',\n spent: 0,\n limit: 3000,\n type: 'Monthly Recurring',\n status: 'Active',\n billingCycle: 'Resets on 1st of month',\n purpose: 'OpenAI, Anthropic, and Vector DB infrastructure',\n }\n setCards((prev) => [newCard, ...prev])\n setSelectedId(newId)\n showFeedback('New virtual card issued successfully')\n }, [showFeedback])\n\n return (\n
\n {/* Header */}\n
\n
\n
\n

Virtual Cards

\n \n {cards.length} Cards\n \n
\n

\n Generate instant corporate cards for subscriptions, vendors, and team expense limits.\n

\n
\n\n
\n \n
\n
\n\n {/* Notification / Action feedback */}\n {actionFeedback && (\n
\n
\n \n {actionFeedback}\n
\n setActionFeedback(null)}\n >\n Dismiss\n \n
\n )}\n\n {/* Virtual Card Visual Hero */}\n \n \n
\n
\n
\n {selectedCard.name}\n \n {selectedCard.status}\n \n
\n \n {selectedCard.purpose} · {selectedCard.billingCycle}\n \n
\n \n Ending in {selectedCard.last4}\n \n
\n \n\n \n
\n {/* Stylized Dark Credit Card Container */}\n
\n \n {/* Ambient light accents */}\n \n \n\n {/* Frozen watermark overlay */}\n {isSelectedFrozen && (\n
\n
\n \n Card Frozen\n
\n

Transactions are currently blocked

\n
\n )}\n\n {/* Top Row: Chip & Contactless + Brand Logo */}\n
\n
\n {/* Metallic EMV Chip */}\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n {/* NFC Wave icon */}\n
\n \n
\n
\n\n {/* Brand Indicator */}\n
\n \n Virtual\n \n {selectedCard.brand === 'mastercard' ? (\n
\n
\n
\n
\n ) : (\n
\n VISA\n
\n )}\n
\n
\n\n {/* Middle Row: Card Number & Quick Actions */}\n
\n
\n

\n {showDetails ? selectedCard.fullNumber : `•••• •••• •••• ${selectedCard.last4}`}\n

\n
\n setShowDetails(!showDetails)}\n >\n {showDetails ? : }\n \n \n {copied ? : }\n \n
\n
\n
\n\n {/* Bottom Row: Cardholder, Expiry, CVV */}\n
\n
\n

Cardholder

\n

\n {selectedCard.holder}\n

\n
\n\n
\n

Expires

\n

{selectedCard.expiry}

\n
\n\n
\n

CVV

\n

\n {showDetails ? selectedCard.cvv : '•••'}\n

\n
\n
\n
\n
\n\n {/* Card Controls & Spending Breakdown */}\n
\n {/* Spending Limit Meter */}\n
\n
\n Monthly Spending Limit\n \n ${selectedCard.spent.toLocaleString()} / ${selectedCard.limit.toLocaleString()}\n \n
\n\n \n\n
\n \n ${Math.max(0, selectedCard.limit - selectedCard.spent).toLocaleString()} available\n \n {selectedPercent}% utilized\n
\n
\n\n {/* Card Controls Row */}\n
\n {/* Freeze Card Toggle */}\n
\n
\n

Freeze Card

\n

Block charges

\n
\n toggleFreeze(selectedCard.id)}\n />\n
\n\n {/* Change Limit Button */}\n adjustLimit(selectedCard.id)}\n >\n
\n Adjust Limit\n \n
\n Edit monthly cap\n \n\n {/* Terminate Card Button */}\n terminateCard(selectedCard.id)}\n >\n
\n Terminate\n \n
\n Close permanently\n \n
\n\n {/* Card Meta Specs */}\n
\n
\n Cardholder\n
\n \n \n {selectedCard.initials}\n \n {selectedCard.holder}\n
\n
\n\n
\n Card Type\n

{selectedCard.type}

\n
\n\n
\n Fraud Protection\n
\n \n 3D Secure Active\n
\n
\n
\n
\n
\n \n \n\n {/* Active Cards Grid / Table */}\n \n \n
\n
\n Active Cards List\n \n All company virtual cards currently assigned to team members and services.\n \n
\n \n {cards.length} Issued\n \n
\n \n\n \n
\n {cards.map((card) => (\n \n {/* Card Identity & Number */}\n
\n \n \n
\n\n
\n
\n

{card.name}

\n
\n
\n •••• {card.last4}\n ·\n {card.brand}\n
\n
\n
\n\n {/* Cardholder Avatar & Name */}\n
\n \n \n {card.initials}\n \n
\n

{card.holder}

\n

{card.type}

\n
\n
\n\n {/* Spending Limit & Progress */}\n
\n
\n \n ${card.spent.toLocaleString()} / ${card.limit.toLocaleString()}\n \n \n {Math.round((card.spent / card.limit) * 100)}%\n \n
\n \n
\n\n {/* Status Badge & Actions */}\n
\n \n {card.status}\n \n\n
\n setSelectedId(card.id)}\n >\n {selectedId === card.id ? 'Viewing' : 'View Card'}\n \n\n toggleFreeze(card.id)}\n >\n {card.status === 'Active' ? (\n \n ) : (\n \n )}\n \n
\n
\n
\n ))}\n
\n \n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/VirtualCardManager.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/switch.json" ], "description": "Mercury/Ramp-style corporate virtual card manager: interactive dark credit card visual hero with EMV chip, revealable credentials, live spending limit progress bar, instant freeze toggles, limit adjusters, and an active virtual cards table.", "categories": [ "finance", "app", "billing" ] }