{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cap-table-ownership-summary", "title": "Cap Table Ownership Summary", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/cap-table-ownership-summary/CapTableOwnershipSummary.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Award,\n Building2,\n Calculator,\n Check,\n Coins,\n FileSpreadsheet,\n Info,\n Layers,\n Plus,\n RefreshCw,\n Search,\n ShieldCheck,\n TrendingUp,\n Users,\n X,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } 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 { Input } from '@/components/ui/input'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface CapTableOwnershipSummaryProps {\n initialInvestment?: number\n initialPreMoney?: number\n className?: string\n}\n\nexport interface Shareholder {\n id: string\n name: string\n role: string\n avatar: string\n shareClass: 'Common Stock' | 'Series Seed Preferred' | 'ISO Option Pool'\n shares: number\n ownershipPct: number\n equityValue: number\n vestingDetail: string\n vestedMonths: number\n totalMonths: number\n isVestedComplete: boolean\n grantDate: string\n liquidationPref?: string\n}\n\nconst initialShareholders: Shareholder[] = [\n {\n id: 'sh-1',\n name: 'Elena Rostova',\n role: 'Co-Founder & CEO',\n avatar: 'ER',\n shareClass: 'Common Stock',\n shares: 3500000,\n ownershipPct: 35.0,\n equityValue: 15750000,\n vestingDetail: '48-Month Vesting · 24/48 Months Vested',\n vestedMonths: 24,\n totalMonths: 48,\n isVestedComplete: false,\n grantDate: 'Feb 15, 2024 · 1-yr Cliff (Satisfied)',\n },\n {\n id: 'sh-2',\n name: 'Marcus Vance',\n role: 'Co-Founder & CTO',\n avatar: 'MV',\n shareClass: 'Common Stock',\n shares: 2500000,\n ownershipPct: 25.0,\n equityValue: 11250000,\n vestingDetail: '48-Month Vesting · 24/48 Months Vested',\n vestedMonths: 24,\n totalMonths: 48,\n isVestedComplete: false,\n grantDate: 'Feb 15, 2024 · 1-yr Cliff (Satisfied)',\n },\n {\n id: 'sh-3',\n name: 'Founders Fund / Seed Syndicate',\n role: 'Lead Seed Investor',\n avatar: 'FF',\n shareClass: 'Series Seed Preferred',\n shares: 1500000,\n ownershipPct: 15.0,\n equityValue: 6750000,\n vestingDetail: 'Fully Vested (100%) · 1.0x Non-Participating',\n vestedMonths: 48,\n totalMonths: 48,\n isVestedComplete: true,\n grantDate: 'Aug 10, 2024 · Board Seat (1)',\n liquidationPref: '1.0x Pref ($6.75M)',\n },\n {\n id: 'sh-4',\n name: 'Sequoia Scout Seed SPV',\n role: 'Seed Co-Investor',\n avatar: 'SQ',\n shareClass: 'Series Seed Preferred',\n shares: 1000000,\n ownershipPct: 10.0,\n equityValue: 4500000,\n vestingDetail: 'Fully Vested (100%) · 1.0x Non-Participating',\n vestedMonths: 48,\n totalMonths: 48,\n isVestedComplete: true,\n grantDate: 'Aug 10, 2024 · Pro-Rata Rights',\n liquidationPref: '1.0x Pref ($4.50M)',\n },\n {\n id: 'sh-5',\n name: 'Unallocated Employee Option Pool',\n role: '2024 Equity Incentive Plan (EIP)',\n avatar: 'EP',\n shareClass: 'ISO Option Pool',\n shares: 1500000,\n ownershipPct: 15.0,\n equityValue: 6750000,\n vestingDetail: 'Authorized Pool · Available for Future Key Hires',\n vestedMonths: 0,\n totalMonths: 48,\n isVestedComplete: false,\n grantDate: 'Board Authorized · Dec 01, 2024',\n },\n]\n\nexport function CapTableOwnershipSummary({\n initialInvestment = 10000000,\n initialPreMoney = 50000000,\n className,\n}: CapTableOwnershipSummaryProps) {\n const currentSharePrice = 4.5\n const currentTotalShares = 10000000\n\n const [shareholders, setShareholders] = React.useState(initialShareholders)\n const [searchQuery, setSearchQuery] = React.useState('')\n const [selectedClassFilter, setSelectedClassFilter] = React.useState<\n 'All' | 'Common Stock' | 'Series Seed Preferred' | 'ISO Option Pool'\n >('All')\n\n // Export Cap Table feedback state\n const [isExporting, setIsExporting] = React.useState(false)\n const [exportSuccess, setExportSuccess] = React.useState(false)\n\n const handleExportCapTable = () => {\n setIsExporting(true)\n setTimeout(() => {\n setIsExporting(false)\n setExportSuccess(true)\n setTimeout(() => {\n setExportSuccess(false)\n }, 2500)\n }, 1000)\n }\n\n // Issue Grant Modal State\n const [isGrantDialogOpen, setIsGrantDialogOpen] = React.useState(false)\n const [grantSuccessMessage, setGrantSuccessMessage] = React.useState(false)\n const [grantName, setGrantName] = React.useState('')\n const [grantRole, setGrantRole] = React.useState('')\n const [grantShares, setGrantShares] = React.useState(50000)\n const [grantClass, setGrantClass] = React.useState<'ISO Options' | 'NSO Options' | 'Restricted Stock'>('ISO Options')\n const grantVesting = '4-Year Vesting · 1-Year Cliff (25%), then Monthly'\n\n const handleCreateGrant = (e: React.FormEvent) => {\n e.preventDefault()\n if (!grantName.trim() || grantShares <= 0) return\n\n setGrantSuccessMessage(true)\n setTimeout(() => {\n setGrantSuccessMessage(false)\n setIsGrantDialogOpen(false)\n setGrantName('')\n setGrantRole('')\n setGrantShares(50000)\n }, 1500)\n }\n\n // Filtered Shareholders\n const filteredShareholders = React.useMemo(() => {\n return shareholders.filter((sh) => {\n if (selectedClassFilter !== 'All' && sh.shareClass !== selectedClassFilter) {\n return false\n }\n if (searchQuery.trim()) {\n const q = searchQuery.toLowerCase()\n const matchName = sh.name.toLowerCase().includes(q)\n const matchRole = sh.role.toLowerCase().includes(q)\n const matchClass = sh.shareClass.toLowerCase().includes(q)\n return matchName || matchRole || matchClass\n }\n return true\n })\n }, [shareholders, selectedClassFilter, searchQuery])\n\n // Round Modeling Simulator State\n const [simPreMoney, setSimPreMoney] = React.useState(initialPreMoney)\n const [simInvestment, setSimInvestment] = React.useState(initialInvestment)\n\n const setPresetScenario = (preMoney: number, investment: number) => {\n setSimPreMoney(preMoney)\n setSimInvestment(investment)\n }\n\n // Dynamic Round Calculations\n const simPostMoney = React.useMemo(() => simPreMoney + simInvestment, [simPreMoney, simInvestment])\n const simNewSharePrice = React.useMemo(() => {\n if (currentTotalShares <= 0) return 0\n return simPreMoney / currentTotalShares\n }, [simPreMoney, currentTotalShares])\n\n const simNewSharesIssued = React.useMemo(() => {\n if (simNewSharePrice <= 0) return 0\n return Math.round(simInvestment / simNewSharePrice)\n }, [simInvestment, simNewSharePrice])\n\n const simTotalPostShares = React.useMemo(\n () => currentTotalShares + simNewSharesIssued,\n [currentTotalShares, simNewSharesIssued],\n )\n\n const simFounderShares = 6000000\n const simSeedShares = 2500000\n const simOptionShares = 1500000\n\n const simFounderPct = React.useMemo(() => (simFounderShares / simTotalPostShares) * 100, [simTotalPostShares])\n const simSeedPct = React.useMemo(() => (simSeedShares / simTotalPostShares) * 100, [simTotalPostShares])\n const simOptionPct = React.useMemo(() => (simOptionShares / simTotalPostShares) * 100, [simTotalPostShares])\n const simNewInvestorPct = React.useMemo(\n () => (simNewSharesIssued / simTotalPostShares) * 100,\n [simNewSharesIssued, simTotalPostShares],\n )\n\n const simFounderValue = React.useMemo(() => (simFounderPct / 100) * simPostMoney, [simFounderPct, simPostMoney])\n const simSeedValue = React.useMemo(() => (simSeedPct / 100) * simPostMoney, [simSeedPct, simPostMoney])\n const simOptionValue = React.useMemo(() => (simOptionPct / 100) * simPostMoney, [simOptionPct, simPostMoney])\n\n const formatCurrency = (val: number): string => {\n return val.toLocaleString('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })\n }\n\n const formatNumber = (val: number): string => {\n return val.toLocaleString('en-US')\n }\n\n const formatPercent = (val: number, decimals = 1): string => {\n return `${val.toFixed(decimals)}%`\n }\n\n return (\n
\n {/* Top Header */}\n
\n
\n
\n \n \n
\n
\n

\n Capitalization Table & Equity Ownership\n

\n
\n \n \n Audited · Series Seed\n \n
\n\n
\n \n UIPKGE Technologies Inc. · Delaware C-Corp\n \n EIN: 93-8472910\n \n \n 409A FMV: ${currentSharePrice.toFixed(2)}/share\n \n
\n
\n\n {/* Action Buttons */}\n
\n \n {isExporting ? (\n \n ) : exportSuccess ? (\n \n ) : (\n \n )}\n \n {exportSuccess ? 'Cap Table Exported!' : isExporting ? 'Exporting...' : 'Export Cap Table (Excel)'}\n \n \n\n \n
\n \n\n {/* Issue Equity Grant Dialog Modal Overlay */}\n {isGrantDialogOpen && (\n \n \n \n
\n \n \n Issue New Equity Option Grant\n \n setIsGrantDialogOpen(false)}\n >\n \n \n
\n \n Authorize and draft an option grant under the 2024 Equity Incentive Plan (EIP).\n \n \n\n \n {grantSuccessMessage ? (\n
\n \n

Option Grant Issued & Drafted!

\n

\n Sent to Board of Directors for electronic consent signature.\n

\n
\n ) : (\n
\n
\n \n setGrantName(e.target.value)}\n placeholder=\"e.g. Dr. Sarah Chen\"\n required\n className=\"h-9 text-xs\"\n />\n
\n\n
\n
\n \n setGrantRole(e.target.value)}\n placeholder=\"e.g. Principal AI Scientist\"\n required\n className=\"h-9 text-xs\"\n />\n
\n\n
\n \n setGrantShares(Number(e.target.value))}\n required\n className=\"h-9 font-mono text-xs tabular-nums\"\n />\n
\n
\n\n
\n
\n \n
\n {grantClass}\n \n EIP-2024\n \n
\n
\n\n
\n \n
\n ${currentSharePrice.toFixed(2)} / share\n Fair Market\n
\n
\n
\n\n
\n \n \n

\n 25% vests at 12-month cliff; remaining 75% vests monthly in 36 equal installments.\n

\n
\n\n
\n \n \n
\n
\n )}\n \n \n \n )}\n\n {/* 4 Capital Structure Overview Cards */}\n
\n {/* Total Fully Diluted Shares Card */}\n \n \n Total Fully Diluted Shares\n
\n \n
\n \n \n
10,000,000
\n
\n Authorized: 15,000,000\n 66.7% Issued\n
\n \n \n\n {/* Founder Common Stock Card */}\n \n \n Founder Common Stock\n
\n \n
\n \n \n
\n 6,000,000\n 60.0%\n
\n
\n 2 Co-Founders\n $27,000,000.00\n
\n \n \n\n {/* Series Seed Preferred Card */}\n \n \n Series Seed Preferred\n
\n \n
\n \n \n
\n 2,500,000\n 25.0%\n
\n
\n 2 Seed Investors · 1.0x Pref\n $11,250,000.00\n
\n \n \n\n {/* Unallocated Option Pool Card */}\n \n \n Unallocated Option Pool\n
\n \n
\n \n \n
\n 1,500,000\n 15.0%\n
\n
\n 2024 EIP Pool\n $6,750,000.00\n
\n \n \n
\n\n {/* Company Valuation Hero & Visual Stacked Ownership Bar Card */}\n \n \n
\n
\n \n Current Post-Money Valuation\n \n
\n \n $45,000,000.00\n \n
\n \n Seed Round Closed\n ($4.50/share)\n
\n
\n
\n\n
\n
\n \n Cap Table Reconciled\n
\n 10,000,000 Total Units\n
\n
\n \n\n \n {/* Multi-segment Stacked Ownership Bar */}\n
\n
\n Fully Diluted Equity Distribution\n 100.0% Allocation\n
\n\n
\n {/* Founders 60% Emerald */}\n \n {/* Seed Investors 25% */}\n \n {/* Option Pool 15% Blue */}\n \n
\n\n {/* Stacked Bar Legend */}\n
\n
\n
\n \n
\n
Founders (Common)
\n
6,000,000 shares
\n
\n
\n
\n
60.0%
\n
$27,000,000.00
\n
\n
\n\n
\n
\n \n
\n
Seed Investors (Preferred)
\n
2,500,000 shares
\n
\n
\n
\n
25.0%
\n
$11,250,000.00
\n
\n
\n\n
\n
\n \n
\n
Employee Option Pool
\n
1,500,000 shares
\n
\n
\n
\n
15.0%
\n
$6,750,000.00
\n
\n
\n
\n
\n \n \n\n {/* Shareholder Breakdown Table Card */}\n \n \n
\n
\n \n Shareholder & Equity Register\n \n \n Detailed registry of individual grants, share classes, fully diluted ownership, and vesting timelines.\n \n
\n\n
\n {/* Search */}\n
\n \n setSearchQuery(e.target.value)}\n placeholder=\"Search shareholder or role...\"\n className=\"h-8 pl-8 text-xs\"\n />\n
\n\n {/* Share Class Filter Buttons */}\n
\n setSelectedClassFilter('All')}\n >\n All (5)\n \n setSelectedClassFilter('Common Stock')}\n >\n Common (2)\n \n setSelectedClassFilter('Series Seed Preferred')}\n >\n Preferred (2)\n \n setSelectedClassFilter('ISO Option Pool')}\n >\n Pool (1)\n \n
\n
\n
\n \n\n \n
\n \n \n \n Shareholder / Entity\n Share Class\n Shares Owned\n Fully Diluted %\n Total Equity Value\n Vesting & Status\n \n \n \n {filteredShareholders.map((sh) => (\n \n {/* Shareholder Name & Role */}\n \n
\n \n \n {\n {\n 'Common Stock': sh.avatar,\n 'Series Seed Preferred': sh.avatar,\n 'ISO Option Pool': sh.avatar,\n }[sh.shareClass]\n }\n \n \n
\n
{sh.name}
\n
{sh.role}
\n
{sh.grantDate}
\n
\n
\n \n\n {/* Share Class Badge */}\n \n {sh.shareClass === 'Common Stock' ? (\n \n Common Stock\n \n ) : sh.shareClass === 'Series Seed Preferred' ? (\n \n Series Seed Preferred\n \n ) : (\n \n ISO Option Pool\n \n )}\n \n\n {/* Shares Owned */}\n \n
\n {\n {\n 'Common Stock': formatNumber(sh.shares),\n 'Series Seed Preferred': formatNumber(sh.shares),\n 'ISO Option Pool': formatNumber(sh.shares),\n }[sh.shareClass]\n }\n
\n
Shares
\n \n\n {/* Fully Diluted Ownership Percentage */}\n \n
\n {formatPercent(sh.ownershipPct)}\n
\n
of 10,000,000
\n \n\n {/* Total Equity Value */}\n \n
\n {formatCurrency(sh.equityValue)}\n
\n
@ $4.50/share
\n \n\n {/* Vesting Status Progress */}\n \n
\n
\n \n {sh.isVestedComplete\n ? '100% Vested'\n : sh.vestedMonths > 0\n ? `${Math.round((sh.vestedMonths / sh.totalMonths) * 100)}% Vested`\n : 'Unallocated'}\n \n \n {sh.vestedMonths}/{sh.totalMonths} mo\n \n
\n\n
\n 0 ? 'bg-success' : 'bg-info/40',\n )}\n style={{\n width: `${sh.isVestedComplete ? 100 : (sh.vestedMonths / sh.totalMonths) * 100}%`,\n }}\n />\n
\n\n
{sh.vestingDetail}
\n
\n \n \n ))}\n \n
\n
\n\n {/* Table Summary Bar */}\n
\n
\n Showing {filteredShareholders.length} of{' '}\n 5 cap table stakeholders\n
\n
\n
\n Total Shares: \n 10,000,000\n
\n
\n Total Ownership: \n 100.0%\n
\n
\n Total Valuation: \n $45,000,000.00\n
\n
\n
\n \n \n\n {/* Round Modeling Simulator Card (Series A Dilution Simulator) */}\n \n \n
\n
\n
\n
\n \n
\n \n Round Modeling Simulator (Series A Pro-Forma)\n \n
\n \n Simulate Series A pre-money valuation and capital raised to preview diluted ownership percentages, new\n share price, and stakeholder equity value accretion.\n \n
\n\n {/* Preset Scenario Buttons */}\n
\n setPresetScenario(30000000, 5000000)}\n >\n $5M @ $30M Pre\n \n setPresetScenario(50000000, 10000000)}\n >\n $10M @ $50M Pre\n \n setPresetScenario(60000000, 15000000)}\n >\n $15M @ $60M Pre\n \n
\n
\n \n\n \n {/* Simulator Inputs */}\n
\n {/* Pre-Money Valuation Input */}\n
\n
\n \n \n ${(simPreMoney / 1000000).toFixed(1)}M\n \n
\n
\n setSimPreMoney(Number(e.target.value) || 0)}\n className=\"font-mono text-base font-bold tabular-nums\"\n />\n
\n

\n Implies a share price of{' '}\n \n ${simNewSharePrice.toFixed(2)} / share\n {' '}\n (+{(((simNewSharePrice - currentSharePrice) / currentSharePrice) * 100).toFixed(1)}% step-up).\n

\n
\n\n {/* New Investment Raised Input */}\n
\n
\n \n \n ${(simInvestment / 1000000).toFixed(1)}M\n \n
\n
\n setSimInvestment(Number(e.target.value) || 0)}\n className=\"font-mono text-base font-bold tabular-nums\"\n />\n
\n

\n Issues{' '}\n \n {formatNumber(simNewSharesIssued)} new shares\n {' '}\n to Series A lead syndicate.\n

\n
\n
\n\n {/* Calculated Pro-Forma Summary Metrics */}\n
\n
\n
Post-Money Valuation
\n
\n {formatCurrency(simPostMoney)}\n
\n
Pre-Money + Investment
\n
\n\n
\n
Series A Share Price
\n
\n ${simNewSharePrice.toFixed(2)}\n
\n
\n vs ${currentSharePrice.toFixed(2)} Seed (+\n {(((simNewSharePrice - currentSharePrice) / currentSharePrice) * 100).toFixed(1)}%)\n
\n
\n\n
\n
Total Diluted Shares
\n
\n {formatNumber(simTotalPostShares)}\n
\n
+{formatNumber(simNewSharesIssued)} New Shares
\n
\n\n
\n
Investor Dilution Rate
\n
\n {formatPercent(simNewInvestorPct)}\n
\n
Effective Round Dilution
\n
\n
\n\n {/* Post-Round Dilution & Valuation Comparison Table */}\n
\n
\n Post-Series A Ownership Comparison\n Pro-Forma Stakeholder Impact\n
\n\n {/* Visual Comparison Bar */}\n
\n
\n \n \n \n \n
\n
\n\n {/* Stakeholder Comparative Grid */}\n
\n {/* Founders */}\n
\n
\n
\n \n Founders\n
\n \n {formatPercent(simFounderPct)}\n \n
\n
\n Dilution:\n \n 60.0% → {formatPercent(simFounderPct)} (-{(60 - simFounderPct).toFixed(1)}%)\n \n
\n
\n Equity Value:\n \n {formatCurrency(simFounderValue)}\n \n
\n
\n Value Accretion:\n \n +{formatCurrency(simFounderValue - 27000000)}\n \n
\n
\n\n {/* Seed Investors */}\n
\n
\n
\n \n Seed Investors\n
\n \n {formatPercent(simSeedPct)}\n \n
\n
\n Dilution:\n \n 25.0% → {formatPercent(simSeedPct)} (-{(25 - simSeedPct).toFixed(1)}%)\n \n
\n
\n Equity Value:\n \n {formatCurrency(simSeedValue)}\n \n
\n
\n Value Accretion:\n \n +{formatCurrency(simSeedValue - 11250000)}\n \n
\n
\n\n {/* Option Pool */}\n
\n
\n
\n \n Option Pool\n
\n \n {formatPercent(simOptionPct)}\n \n
\n
\n Dilution:\n \n 15.0% → {formatPercent(simOptionPct)} (-{(15 - simOptionPct).toFixed(1)}%)\n \n
\n
\n Equity Value:\n \n {formatCurrency(simOptionValue)}\n \n
\n
\n Value Accretion:\n \n +{formatCurrency(simOptionValue - 6750000)}\n \n
\n
\n\n {/* New Series A Investors */}\n
\n
\n
\n \n Series A Syndicate\n
\n \n New Investor\n \n
\n
\n New Ownership:\n \n {formatPercent(simNewInvestorPct)}\n \n
\n
\n Shares Purchased:\n \n {formatNumber(simNewSharesIssued)}\n \n
\n
\n Capital Invested:\n \n {formatCurrency(simInvestment)}\n \n
\n
\n
\n
\n\n {/* Insight Banner Callout */}\n
\n \n
\n Round Dynamics Takeaway: \n Raising {formatCurrency(simInvestment)} at\n a {formatCurrency(simPreMoney)} pre-money\n valuation generates a{' '}\n ${simNewSharePrice.toFixed(2)} share price.\n Although existing founders experience{' '}\n {(60 - simFounderPct).toFixed(1)}%{' '}\n dilution, their net equity value increases by{' '}\n +{formatCurrency(simFounderValue - 27000000)} (+\n {(((simFounderValue - 27000000) / 27000000) * 100).toFixed(1)}%) due to the valuation step-up.\n
\n
\n \n \n \n )\n}\n\nexport default CapTableOwnershipSummary\n", "type": "registry:block", "target": "~/components/blocks/CapTableOwnershipSummary.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/input.json", "https://uipkge.dev/r/react/table.json" ], "description": "Carta-style company equity capitalization table, share class breakdown, fully diluted ownership percentages, shareholder vesting progress, and interactive round dilution modeling simulator.", "categories": [ "finance", "app", "dashboard" ] }