{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cash-flow-treasury-dashboard", "title": "Cash Flow Treasury Dashboard", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/cash-flow-treasury-dashboard/CashFlowTreasuryDashboard.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n ArrowDownLeft,\n ArrowUpRight,\n Building2,\n CheckCircle2,\n Flame,\n Landmark,\n Lock,\n RefreshCw,\n Send,\n Shield,\n ShieldCheck,\n TrendingUp,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\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 { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface CashFlowTreasuryDashboardProps {\n className?: string\n onDeposit?: () => void\n onTransfer?: (accountName?: string) => void\n onManageSweep?: () => void\n}\n\ninterface HealthCard {\n title: string\n value: string\n highlight?: string\n badgeText: string\n badgeVariant: 'default' | 'secondary' | 'outline' | 'destructive'\n badgeClass?: string\n description: string\n metricFootnote: string\n progressValue: number\n icon: React.ComponentType<{ className?: string }>\n}\n\nconst healthCards: HealthCard[] = [\n {\n title: 'Total Cash Runway',\n value: '28.4 Months Runway',\n badgeText: 'Optimal Runway',\n badgeVariant: 'outline',\n badgeClass: 'bg-success/10 text-success border-success/20',\n description: 'At current net burn rate ($170.8k/mo)',\n metricFootnote: 'Zero dilution horizon through Q4 2028',\n progressValue: 94,\n icon: ShieldCheck,\n },\n {\n title: 'Net Monthly Burn',\n value: '-$170,800.00 / mo',\n badgeText: '-12% vs budget',\n badgeVariant: 'outline',\n badgeClass: 'bg-success/10 text-success border-success/20',\n description: 'Gross outflow $415.8k offset by $245.0k inflow',\n metricFootnote: '$23,200 under monthly board approved cap',\n progressValue: 74,\n icon: Flame,\n },\n {\n title: 'Projected 30-Day Inflow',\n value: '+$245,000.00',\n badgeText: '+18.4% YoY',\n badgeVariant: 'outline',\n badgeClass: 'bg-success/10 text-success border-success/20',\n description: 'From customer subscriptions & ARR renewals',\n metricFootnote: '96.2% contracted recurring enterprise revenue',\n progressValue: 88,\n icon: TrendingUp,\n },\n {\n title: 'Yield on Treasury Funds',\n value: '5.14% APY',\n highlight: '$20,800/mo interest earned',\n badgeText: 'Yield Active',\n badgeVariant: 'outline',\n badgeClass: 'bg-success/10 text-success border-success/20',\n description: '$2.85M deployed in US Treasury bills & sweeps',\n metricFootnote: '$249,600 annualized passive treasury income',\n progressValue: 98,\n icon: TrendingUp,\n },\n]\n\ninterface InflowItem {\n id: string\n name: string\n amount: string\n rawAmount: number\n percentage: number\n category: string\n detail: string\n color: string\n}\n\nconst inflowBreakdown: InflowItem[] = [\n {\n id: 'in-arr',\n name: 'Customer ARR',\n amount: '+$210,000.00',\n rawAmount: 210000,\n percentage: 85.7,\n category: 'Subscription ARR',\n detail: 'Enterprise multi-seat renewals and monthly cloud subscriptions',\n color: 'bg-success',\n },\n {\n id: 'in-yield',\n name: 'Treasury Yield',\n amount: '+$20,800.00',\n rawAmount: 20800,\n percentage: 8.5,\n category: 'Money Market Sweep',\n detail: 'Accrued interest from 5.14% APY government sweeps & T-Bills',\n color: 'bg-teal-500',\n },\n {\n id: 'in-rebates',\n name: 'Partner Rebates',\n amount: '+$14,200.00',\n rawAmount: 14200,\n percentage: 5.8,\n category: 'Interchange & Cashback',\n detail: 'Corporate card cashback and cloud partner referral volume',\n color: 'bg-cyan-500',\n },\n]\n\ninterface OutflowItem {\n id: string\n name: string\n amount: string\n rawAmount: number\n percentage: number\n category: string\n detail: string\n color: string\n}\n\nconst outflowBreakdown: OutflowItem[] = [\n {\n id: 'out-payroll',\n name: 'Payroll & Benefits',\n amount: '-$138,400.00',\n rawAmount: 138400,\n percentage: 81.0,\n category: 'Compensation',\n detail: '42 full-time employees, health insurance, and 401(k) matching',\n color: 'bg-destructive',\n },\n {\n id: 'out-infra',\n name: 'Cloud Infrastructure',\n amount: '-$24,800.00',\n rawAmount: 24800,\n percentage: 14.5,\n category: 'Hosting & AI APIs',\n detail: 'AWS compute clusters, Vercel edge deployment, & OpenAI inference',\n color: 'bg-warning',\n },\n {\n id: 'out-office',\n name: 'Office & Taxes',\n amount: '-$7,600.00',\n rawAmount: 7600,\n percentage: 4.5,\n category: 'G&A and Compliance',\n detail: 'San Francisco hub lease, state registrations & tax prep reserves',\n color: 'bg-slate-500 dark:bg-slate-400',\n },\n]\n\ninterface BankAccount {\n id: string\n name: string\n institution: string\n accountType: string\n accountMask: string\n routingMask: string\n purpose: string\n apy: string\n balance: string\n balanceRaw: number\n status: 'Active' | 'Yield Sweeping' | 'Ringfenced' | 'Reserve Locked'\n statusType: 'success' | 'info' | 'warning'\n isSweepAccount?: boolean\n}\n\nconst bankAccounts: BankAccount[] = [\n {\n id: 'acc-operating',\n name: 'Chase Corporate Operating',\n institution: 'JPMorgan Chase Bank',\n accountType: 'Operating Checking',\n accountMask: '•••• 4892',\n routingMask: '•••• 0210',\n purpose: 'Primary AP, vendor payouts & incoming customer wires',\n apy: '0.05% APY',\n balance: '$1,420,500.00',\n balanceRaw: 1420500,\n status: 'Active',\n statusType: 'success',\n },\n {\n id: 'acc-sweep',\n name: 'Morgan Stanley Treasury Sweep',\n institution: 'Morgan Stanley Private Bank',\n accountType: 'High-Yield Treasury Sweep',\n accountMask: '•••• 9210',\n routingMask: '•••• 0119',\n purpose: 'Automated daily sweep of cash over $1.0M into 4-week US T-Bills',\n apy: '5.14% APY',\n balance: '$2,850,000.00',\n balanceRaw: 2850000,\n status: 'Yield Sweeping',\n statusType: 'success',\n isSweepAccount: true,\n },\n {\n id: 'acc-payroll',\n name: 'SVB Payroll Escrow',\n institution: 'Silicon Valley Bank',\n accountType: 'Payroll Escrow',\n accountMask: '•••• 1049',\n routingMask: '•••• 1211',\n purpose: 'Ringfenced 2-cycle buffer for bi-weekly employee compensation',\n apy: '1.20% APY',\n balance: '$380,240.00',\n balanceRaw: 380240,\n status: 'Ringfenced',\n statusType: 'info',\n },\n {\n id: 'acc-tax',\n name: 'Citi Corporate Tax Reserve',\n institution: 'Citibank N.A.',\n accountType: 'Tax Reserve',\n accountMask: '•••• 8832',\n routingMask: '•••• 0008',\n purpose: 'Q3 estimated federal/state taxes & corporate franchise reserves',\n apy: '2.10% APY',\n balance: '$199,500.00',\n balanceRaw: 199500,\n status: 'Reserve Locked',\n statusType: 'warning',\n },\n]\n\nconst trajectoryMilestones = [\n {\n day: 'Day 1',\n date: 'Aug 21',\n title: 'Starting Liquidity',\n amount: '$4,850,240.00',\n note: 'Base cash balance',\n cx: 50,\n cy: 130,\n },\n {\n day: 'Day 7',\n date: 'Aug 28',\n title: 'Weekly ARR Inflow',\n amount: '+$52,500.00',\n note: 'SaaS recurring billing',\n cx: 180,\n cy: 123,\n },\n {\n day: 'Day 15',\n date: 'Sep 05',\n title: 'Mid-Month Payroll Run',\n amount: '-$69,200.00',\n note: 'Bi-weekly payroll disbursal',\n cx: 330,\n cy: 144,\n },\n {\n day: 'Day 22',\n date: 'Sep 12',\n title: 'Enterprise ARR Renewals',\n amount: '+$185,000.00',\n note: 'Annual contract renewals',\n cx: 490,\n cy: 89,\n },\n {\n day: 'Day 30',\n date: 'Sep 20',\n title: 'Projected Ending Balance',\n amount: '$4,924,440.00',\n note: '+$74,200 net increase',\n cx: 650,\n cy: 108,\n },\n]\n\nexport function CashFlowTreasuryDashboard({\n className,\n onDeposit,\n onTransfer,\n onManageSweep,\n}: CashFlowTreasuryDashboardProps) {\n const [activeTab, setActiveTab] = React.useState<'30d' | '60d' | '90d'>('30d')\n const [activeMilestone, setActiveMilestone] = React.useState(null)\n const [actionFeedback, setActionFeedback] = React.useState(null)\n const [isAutoSweepActive, setIsAutoSweepActive] = React.useState(true)\n\n const triggerNotification = React.useCallback((msg: string) => {\n setActionFeedback(msg)\n setTimeout(() => {\n setActionFeedback((prev) => (prev === msg ? null : prev))\n }, 4000)\n }, [])\n\n function handleDeposit() {\n onDeposit?.()\n triggerNotification('Deposit modal opened. Direct ACH & Wire instructions ready for UIPKGE Technologies Inc.')\n }\n\n function handleTransfer(accountName?: string) {\n onTransfer?.(accountName)\n triggerNotification(\n accountName\n ? `Transfer interface initiated from ${accountName}. Real-time settlement active.`\n : 'Initiating wire & multi-account transfer portal.',\n )\n }\n\n function handleManageSweep() {\n onManageSweep?.()\n setIsAutoSweepActive((prev) => {\n const next = !prev\n triggerNotification(\n next\n ? 'Auto-Sweep rule ACTIVE: Daily excess over $1.0M swept into 5.14% APY Treasury Bills.'\n : 'Auto-Sweep rule PAUSED. Funds will remain in standard operating checking.',\n )\n return next\n })\n }\n\n return (\n
\n {/* Top Action Feedback Banner */}\n {actionFeedback && (\n
\n
\n \n {actionFeedback}\n
\n setActionFeedback(null)}\n >\n Close message\n ×\n \n
\n )}\n\n {/* Header Section */}\n
\n
\n {/* Company & Title */}\n
\n
\n \n UIPKGE Technologies Inc.\n \n \n \n Live FDIC Insured Sweeps ($5M Aggregate)\n \n
\n\n
\n

\n Treasury & Cash Flow Management\n

\n

\n Real-time liquidity monitoring, 30-day runway projection, and automated 5.14% APY yield sweep desk.\n

\n
\n
\n\n {/* Header Action Controls */}\n
\n \n \n
\n
\n\n \n\n {/* Net Total Liquidity Hero Metric Row */}\n
\n
\n
Net Total Liquidity
\n
\n \n $4,850,240.00\n \n \n \n +$74,200.00 (+1.55%) this month\n \n
\n

Aggregated across 4 corporate custody & sweep accounts

\n
\n\n {/* Liquidity Allocation Mini Pills */}\n
\n
\n Available Cash\n $1,420,500.00\n 29.3% in Operating\n
\n\n
\n
\n Yield Sweep\n \n 5.14% APY\n \n
\n $2,850,000.00\n 58.8% in T-Bills\n
\n\n
\n Escrow & Reserves\n $579,740.00\n 11.9% Ringfenced\n
\n
\n
\n
\n\n {/* 4 Treasury Health Metric Cards */}\n
\n {healthCards.map((card) => {\n const Icon = card.icon\n return (\n \n \n {card.title}\n \n {card.badgeText}\n \n \n\n \n
\n \n {card.value}\n
\n {card.highlight &&

{card.highlight}

}\n

{card.description}

\n
\n\n
\n \n
\n {card.metricFootnote}\n
\n
\n \n \n )\n })}\n
\n\n {/* 30-Day Cash Flow Projection & Inflow/Outflow Breakdown Section */}\n
\n {/* 30-Day Cash Flow Projection Chart (7 Cols on LG) */}\n \n \n
\n
\n
\n 30-Day Cash Flow Projection\n \n 95% Confidence Band\n \n
\n \n Trajectory from $4,850,240.00 to projected{' '}\n $4,924,440.00 balance.\n \n
\n\n {/* Timeframe selector */}\n
\n setActiveTab('30d')}\n >\n 30D Projection\n \n setActiveTab('60d')}\n >\n 60D\n \n setActiveTab('90d')}\n >\n 90D\n \n
\n
\n \n\n \n {/* Responsive Projection SVG Curve with Confidence Corridor */}\n
\n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* Horizontal Grid Guidelines */}\n \n \n \n \n \n\n {/* Guideline Labels */}\n \n \n $5.10M\n \n \n $4.85M\n \n \n $4.60M\n \n \n\n {/* 95% Confidence Band Polygon Area */}\n \n\n {/* Upper Confidence Bound Line (Dashed) */}\n \n\n {/* Lower Confidence Bound Line (Dashed) */}\n \n\n {/* Median Expected Trajectory Main Curve */}\n \n\n {/* Milestone Markers on Curve */}\n {trajectoryMilestones.map((m, idx) => (\n setActiveMilestone(idx)}>\n \n {activeMilestone === idx && (\n \n )}\n \n ))}\n \n\n {/* Bottom X-Axis Milestone Labels */}\n
\n {trajectoryMilestones.map((m, idx) => (\n setActiveMilestone(idx)}\n >\n {m.day}\n {m.date}\n \n {m.amount}\n \n
\n ))}\n
\n
\n\n {/* Chart Key Legend & Milestone Detail Bar */}\n
\n
\n
\n \n Expected Trajectory\n
\n
\n \n 95% Confidence Corridor\n
\n
\n \n Cash Events\n
\n
\n\n
\n Net 30-Day Delta: +$74,200.00\n
\n
\n \n \n\n {/* Inflow & Outflow Breakdown Side Column (5 Cols on LG) */}\n
\n {/* Inflow Breakdown Card */}\n \n \n
\n
\n
\n \n
\n
\n Projected 30D Inflow\n Total incoming cash: +$245,000.00\n
\n
\n \n 100%\n \n
\n \n \n {inflowBreakdown.map((item) => (\n
\n
\n
\n {item.name}\n ({item.percentage}%)\n
\n \n {item.amount}\n \n
\n \n

{item.detail}

\n
\n ))}\n \n \n\n {/* Outflow Breakdown Card */}\n \n \n
\n
\n
\n \n
\n
\n Projected 30D Outflow\n Total operational burn: -$170,800.00\n
\n
\n \n 100%\n \n
\n \n \n {outflowBreakdown.map((item) => (\n
\n
\n
\n {item.name}\n ({item.percentage}%)\n
\n \n {item.amount}\n \n
\n \n

{item.detail}

\n
\n ))}\n \n \n
\n \n\n {/* Connected Corporate Bank Accounts Table */}\n
\n
\n
\n
\n \n

\n Connected Corporate Bank & Treasury Accounts\n

\n
\n

\n 4 institutional accounts connected via real-time Open Banking / Plaid Exchange\n

\n
\n\n
\n \n \n Auto-Sweep Rule: {isAutoSweepActive ? 'Active (5.14% APY)' : 'Paused'}\n \n\n triggerNotification('Bank balances refreshed from Federal Reserve Fedwire & NACHA feeds.')}\n >\n \n Refresh Balances\n \n
\n
\n\n
\n \n \n \n Institution & Account\n Purpose & Routing\n APY / Yield\n Available Balance\n Status\n Actions\n \n \n \n {bankAccounts.map((account) => (\n \n {/* Account & Institution */}\n \n
\n
\n {/* Chase */}\n {account.id === 'acc-operating' ? (\n \n \n \n ) : account.id === 'acc-sweep' ? (\n /* Morgan Stanley Sweep */\n \n \n \n \n \n ) : account.id === 'acc-payroll' ? (\n /* SVB */\n \n \n \n \n \n ) : account.id === 'acc-tax' ? (\n /* Citibank */\n \n \n \n \n \n \n ) : (\n \n )}\n
\n\n
\n
\n {account.name}\n
\n
\n {account.institution}\n {account.accountMask}\n
\n
\n
\n \n\n {/* Purpose */}\n \n
\n {account.accountType}\n {account.purpose}\n
\n \n\n {/* APY Rate */}\n \n {account.isSweepAccount ? (\n \n {account.apy}\n \n ) : (\n {account.apy}\n )}\n \n\n {/* Balance */}\n \n \n {account.balance}\n \n \n\n {/* Status */}\n \n {account.statusType === 'success' ? (\n \n \n {account.status}\n \n ) : account.statusType === 'info' ? (\n \n \n {account.status}\n \n ) : (\n \n \n {account.status}\n \n )}\n \n\n {/* Actions */}\n \n
\n {account.isSweepAccount ? (\n \n ) : (\n handleTransfer(account.name)}\n >\n Transfer\n \n )}\n
\n \n \n ))}\n \n
\n
\n\n {/* Table Summary Footer */}\n
\n
\n \n

\n Custody verified through Member FINRA / SIPC & FDIC depository institutions.\n

\n
\n
\n \n Net Liquidity: $4,850,240.00\n \n \n
\n
\n
\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/CashFlowTreasuryDashboard.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "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/separator.json", "https://uipkge.dev/r/react/table.json" ], "description": "Fluxo and Mercury style corporate cash flow treasury dashboard with 30-day runway projection, liquidity buffer monitor, inflow/outflow breakdown, and connected bank accounts table.", "categories": [ "finance", "dashboard", "analytics" ] }