{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "virtual-card-manager", "title": "Virtual Card Manager", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/virtual-card-manager/virtual-card-manager.component.ts", "content": "// Mercury / Ramp style corporate virtual card manager: interactive dark credit card\n// visual hero with EMV chip, revealable credentials, live spending limit progress,\n// instant freeze toggles, limit adjusters, and an active virtual cards table.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Check,\n CheckCircle2,\n Copy,\n CreditCard,\n Eye,\n EyeOff,\n LucideAngularModule,\n Plus,\n Radio,\n ShieldCheck,\n SlidersHorizontal,\n Snowflake,\n Trash2,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\n\nexport interface 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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-virtual-card-manager, [ui-virtual-card-manager]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSwitchComponent,\n ],\n template: `\n
\n \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 \n @if (actionFeedback()) {\n \n
\n \n {{ actionFeedback() }}\n
\n \n Dismiss\n \n
\n }\n\n \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 \n
\n
\n \n
\n
\n\n \n @if (isSelectedFrozen()) {\n \n \n \n Card Frozen\n
\n

Transactions are currently blocked

\n
\n }\n\n \n
\n
\n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n \n
\n \n
\n
\n\n \n
\n Virtual\n @if (selectedCard().brand === 'mastercard') {\n
\n
\n
\n
\n } @else {\n
VISA
\n }\n
\n
\n\n \n
\n
\n \n {{ showDetails() ? selectedCard().fullNumber : '•••• •••• •••• ' + selectedCard().last4 }}\n

\n
\n \n @if (showDetails()) {\n \n } @else {\n \n }\n \n \n @if (copied()) {\n \n } @else {\n \n }\n \n
\n
\n
\n\n \n
\n
\n

Cardholder

\n

\n {{ selectedCard().holder }}\n

\n
\n\n
\n

Expires

\n

\n {{ selectedCard().expiry }}\n

\n
\n\n
\n

CVV

\n

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

\n
\n
\n
\n \n\n \n
\n \n
\n
\n Monthly Spending Limit\n \n \\${{ selectedCard().spent.toLocaleString() }} / \\${{ selectedCard().limit.toLocaleString() }}\n \n
\n\n \n\n
\n \n \\${{ availableFunds().toLocaleString() }} available\n \n {{ selectedPercent() }}% utilized \n
\n
\n\n \n
\n \n \n
\n

Freeze Card

\n

Block charges

\n
\n \n
\n\n \n \n \n Adjust Limit\n \n \n Edit monthly cap\n \n\n \n \n \n Terminate\n \n \n Close permanently\n \n
\n\n \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 \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 @for (card of cards(); track card.id) {\n
\n \n
\n
\n \n
\n\n
\n
\n

{{ card.name }}

\n
\n
\n •••• {{ card.last4 }}\n ·\n {{ card.brand }}\n
\n
\n
\n\n \n
\n \n \n {{ card.initials }}\n \n
\n

{{ card.holder }}

\n

{{ card.type }}

\n
\n
\n\n \n
\n
\n \n \\${{ card.spent.toLocaleString() }} / \\${{ card.limit.toLocaleString() }}\n \n {{ cardPercent(card) }}% \n
\n \n
\n\n \n
\n \n {{ card.status }}\n \n\n
\n \n {{ selectedId() === card.id ? 'Viewing' : 'View Card' }}\n \n\n \n @if (card.status === 'Active') {\n \n } @else {\n \n }\n \n
\n
\n
\n }\n
\n
\n
\n \n `,\n})\nexport class UiVirtualCardManagerComponent {\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Copy = Copy\n protected readonly CreditCard = CreditCard\n protected readonly Eye = Eye\n protected readonly EyeOff = EyeOff\n protected readonly Plus = Plus\n protected readonly Radio = Radio\n protected readonly ShieldCheck = ShieldCheck\n protected readonly SlidersHorizontal = SlidersHorizontal\n protected readonly Snowflake = Snowflake\n protected readonly Trash2 = Trash2\n protected readonly Zap = Zap\n\n @Input('class') className?: string\n @Input() set initialCards(v: VirtualCard[] | undefined) {\n if (v) this.cards.set(v.map((c) => ({ ...c })))\n }\n\n readonly cards = signal(initialCards.map((c) => ({ ...c })))\n readonly selectedId = signal('vc-1')\n readonly showDetails = signal(false)\n readonly copied = signal(false)\n readonly actionFeedback = signal(null)\n private copyTimer: ReturnType | undefined\n private feedbackTimer: ReturnType | undefined\n\n readonly selectedCard = computed(() => this.cards().find((c) => c.id === this.selectedId()) ?? this.cards()[0])\n\n readonly selectedPercent = computed(() => {\n const card = this.selectedCard()\n if (!card || card.limit === 0) return 0\n return Math.min(100, Math.round((card.spent / card.limit) * 100))\n })\n\n readonly availableFunds = computed(() => {\n const card = this.selectedCard()\n return Math.max(0, card.limit - card.spent)\n })\n\n readonly isSelectedFrozen = computed(() => this.selectedCard()?.status === 'Frozen')\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n\n get cardVisualClass(): string {\n return cn(\n 'relative aspect-[1.586/1] w-full max-w-[420px] rounded-2xl p-6 text-white transition-[filter] duration-300 lg:max-w-full',\n 'border border-zinc-700/60 bg-gradient-to-br from-zinc-900 via-neutral-900 to-zinc-950 shadow-xl',\n this.isSelectedFrozen() && 'contrast-95 grayscale filter',\n )\n }\n\n rowClass(card: VirtualCard): string {\n return cn(\n 'group flex flex-col gap-4 p-4 transition-colors sm:flex-row sm:items-center sm:justify-between',\n this.selectedId() === card.id ? 'bg-muted/40' : 'hover:bg-muted/20',\n )\n }\n\n cardIconClass(card: VirtualCard): string {\n return cn(\n 'border-border flex size-10 shrink-0 items-center justify-center rounded-lg border shadow-xs transition-transform',\n card.status === 'Frozen' ? 'bg-muted/60 text-muted-foreground' : 'bg-primary/10 text-primary',\n )\n }\n\n cardPercent(card: VirtualCard): number {\n if (card.limit === 0) return 0\n return Math.min(100, Math.round((card.spent / card.limit) * 100))\n }\n\n toggleFreeze(id: string): void {\n this.cards.update((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 handleCopyNumber(): void {\n const card = this.selectedCard()\n if (!card) return\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n void navigator.clipboard.writeText(card.fullNumber.replace(/\\s+/g, ''))\n }\n this.copied.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copied.set(false), 2000)\n }\n\n adjustLimit(cardId: string): void {\n const current = this.cards().find((c) => c.id === cardId)\n const newLimit = !current\n ? 0\n : current.limit === 5000\n ? 7500\n : current.limit === 10000\n ? 12000\n : current.limit + 1000\n this.cards.update((prev) =>\n prev.map((c) => {\n if (c.id === cardId) {\n const next = c.limit === 5000 ? 7500 : c.limit === 10000 ? 12000 : c.limit + 1000\n return { ...c, limit: next }\n }\n return c\n }),\n )\n this.showFeedback(`Limit updated to $${newLimit.toLocaleString()}`)\n }\n\n terminateCard(cardId: string): void {\n if (this.cards().length <= 1) {\n this.showFeedback('Cannot terminate the last remaining card')\n return\n }\n const remaining = this.cards().filter((c) => c.id !== cardId)\n this.cards.set(remaining)\n if (this.selectedId() === cardId) {\n this.selectedId.set(remaining[0].id)\n }\n this.showFeedback('Card terminated permanently')\n }\n\n issueNewCard(): void {\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 this.cards.update((prev) => [newCard, ...prev])\n this.selectedId.set(newId)\n this.showFeedback('New virtual card issued successfully')\n }\n\n showFeedback(msg: string): void {\n this.actionFeedback.set(msg)\n clearTimeout(this.feedbackTimer)\n this.feedbackTimer = setTimeout(() => {\n if (this.actionFeedback() === msg) this.actionFeedback.set(null)\n }, 3000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/virtual-card-manager/virtual-card-manager.component.ts" }, { "path": "packages/registry-angular/blocks/virtual-card-manager/index.ts", "content": "export { UiVirtualCardManagerComponent, type VirtualCard } from './virtual-card-manager.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/virtual-card-manager/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/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" ] }