{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "cash-flow-treasury-dashboard",
  "title": "Cash Flow Treasury Dashboard",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/cash-flow-treasury-dashboard/CashFlowTreasuryDashboard.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, type HTMLAttributes } from 'vue'\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-vue-next'\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\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst emit = defineEmits<{\n  deposit: []\n  transfer: [accountName?: string]\n  manageSweep: []\n}>()\n\nconst activeTab = ref<'30d' | '60d' | '90d'>('30d')\nconst activeMilestone = ref<number | null>(null)\nconst actionFeedback = ref<string | null>(null)\nconst isAutoSweepActive = ref(true)\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: any\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\nfunction triggerNotification(msg: string) {\n  actionFeedback.value = msg\n  setTimeout(() => {\n    if (actionFeedback.value === msg) {\n      actionFeedback.value = null\n    }\n  }, 4000)\n}\n\nfunction handleDeposit() {\n  emit('deposit')\n  triggerNotification('Deposit modal opened. Direct ACH & Wire instructions ready for UIPKGE Technologies Inc.')\n}\n\nfunction handleTransfer(accountName?: string) {\n  emit('transfer', 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\nfunction handleManageSweep() {\n  emit('manageSweep')\n  isAutoSweepActive.value = !isAutoSweepActive.value\n  triggerNotification(\n    isAutoSweepActive.value\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}\n</script>\n\n<template>\n  <div data-slot=\"cash-flow-treasury-dashboard\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Top Action Feedback Banner -->\n    <div\n      v-if=\"actionFeedback\"\n      class=\"bg-primary/10 border-primary/20 text-foreground flex flex-wrap items-center justify-between gap-x-2 rounded-lg border px-4 py-3 text-xs shadow-xs\"\n    >\n      <div class=\"flex items-center gap-2.5\">\n        <CheckCircle2 class=\"text-primary size-4 shrink-0\" aria-hidden=\"true\" />\n        <span class=\"font-medium\">{{ actionFeedback }}</span>\n      </div>\n      <button\n        type=\"button\"\n        class=\"text-muted-foreground hover:text-foreground inline-flex size-5 items-center justify-center rounded-sm\"\n        @click=\"actionFeedback = null\"\n      >\n        <span class=\"sr-only\">Close message</span>\n        &times;\n      </button>\n    </div>\n\n    <!-- Header Section -->\n    <div class=\"bg-card border-border relative overflow-hidden rounded-xl border p-6 shadow-xs\">\n      <div class=\"flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between\">\n        <!-- Company & Title -->\n        <div class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-center gap-2.5\">\n            <span class=\"text-muted-foreground font-mono text-xs font-semibold tracking-wider uppercase\">\n              UIPKGE Technologies Inc.\n            </span>\n            <Badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success gap-1.5 text-xs font-medium\">\n              <span class=\"bg-success size-1.5 animate-pulse rounded-full\" aria-hidden=\"true\" />\n              Live FDIC Insured Sweeps ($5M Aggregate)\n            </Badge>\n          </div>\n\n          <div>\n            <h1 class=\"text-foreground text-2xl font-semibold tracking-tight sm:text-3xl\">\n              Treasury &amp; Cash Flow Management\n            </h1>\n            <p class=\"text-muted-foreground mt-0.5 text-xs sm:text-sm\">\n              Real-time liquidity monitoring, 30-day runway projection, and automated 5.14% APY yield sweep desk.\n            </p>\n          </div>\n        </div>\n\n        <!-- Header Action Controls -->\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <Button variant=\"outline\" class=\"gap-2 text-xs font-medium sm:text-sm\" @click=\"handleDeposit\">\n            <ArrowDownLeft class=\"size-4\" aria-hidden=\"true\" />\n            Deposit Funds\n          </Button>\n          <Button class=\"gap-2 text-xs font-medium sm:text-sm\" @click=\"handleTransfer()\">\n            <ArrowUpRight class=\"size-4\" aria-hidden=\"true\" />\n            Initiate Wire / Transfer\n          </Button>\n        </div>\n      </div>\n\n      <Separator class=\"my-5\" />\n\n      <!-- Net Total Liquidity Hero Metric Row -->\n      <div class=\"grid grid-cols-1 gap-6 md:grid-cols-12 md:items-end\">\n        <div class=\"space-y-1.5 md:col-span-6 lg:col-span-5\">\n          <div class=\"text-muted-foreground text-xs font-medium\">Net Total Liquidity</div>\n          <div class=\"flex flex-wrap items-baseline gap-3\">\n            <span class=\"text-foreground text-3xl font-semibold tracking-tight tabular-nums sm:text-4xl\">\n              $4,850,240.00\n            </span>\n            <Badge\n              variant=\"outline\"\n              class=\"border-success/20 bg-success/10 text-success gap-1 px-2 py-0.5 text-xs font-semibold\"\n            >\n              <TrendingUp class=\"size-3\" aria-hidden=\"true\" />\n              +$74,200.00 (+1.55%) this month\n            </Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">Aggregated across 4 corporate custody &amp; sweep accounts</p>\n        </div>\n\n        <!-- Liquidity Allocation Mini Pills -->\n        <div class=\"grid grid-cols-1 gap-2.5 sm:grid-cols-3 md:col-span-6 lg:col-span-7\">\n          <div class=\"border-border bg-muted/40 rounded-lg border p-2.5\">\n            <span class=\"text-muted-foreground block text-xs\">Available Cash</span>\n            <span class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">$1,420,500.00</span>\n            <span class=\"text-muted-foreground mt-0.5 block text-xs\">29.3% in Operating</span>\n          </div>\n\n          <div class=\"border-border bg-muted/40 rounded-lg border p-2.5\">\n            <div class=\"flex flex-wrap items-center justify-between gap-x-2\">\n              <span class=\"text-muted-foreground block text-xs\">Yield Sweep</span>\n              <Badge variant=\"outline\" class=\"border-success/30 text-success px-1 py-0 text-xs font-normal\">\n                5.14% APY\n              </Badge>\n            </div>\n            <span class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">$2,850,000.00</span>\n            <span class=\"text-muted-foreground mt-0.5 block text-xs\">58.8% in T-Bills</span>\n          </div>\n\n          <div class=\"border-border bg-muted/40 rounded-lg border p-2.5\">\n            <span class=\"text-muted-foreground block text-xs\">Escrow &amp; Reserves</span>\n            <span class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">$579,740.00</span>\n            <span class=\"text-muted-foreground mt-0.5 block text-xs\">11.9% Ringfenced</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- 4 Treasury Health Metric Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <Card\n        v-for=\"card in healthCards\"\n        :key=\"card.title\"\n        class=\"border-border relative flex flex-col justify-between overflow-hidden shadow-xs\"\n      >\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-tight\">\n            {{ card.title }}\n          </CardTitle>\n          <Badge :variant=\"card.badgeVariant\" :class=\"cn('text-xs font-medium', card.badgeClass)\">\n            {{ card.badgeText }}\n          </Badge>\n        </CardHeader>\n\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div\n              :class=\"\n                cn(\n                  'text-foreground text-2xl font-semibold tracking-tight tabular-nums',\n                  card.title === 'Yield on Treasury Funds' && 'text-success',\n                )\n              \"\n            >\n              {{ card.value }}\n            </div>\n            <p v-if=\"card.highlight\" class=\"text-success mt-0.5 text-xs font-semibold\">\n              {{ card.highlight }}\n            </p>\n            <p class=\"text-muted-foreground mt-1 text-xs leading-normal\">\n              {{ card.description }}\n            </p>\n          </div>\n\n          <div class=\"space-y-1.5 border-t pt-2.5\">\n            <Progress :model-value=\"card.progressValue\" class=\"h-1.5\" />\n            <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n              <span>{{ card.metricFootnote }}</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- 30-Day Cash Flow Projection & Inflow/Outflow Breakdown Section -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n      <!-- 30-Day Cash Flow Projection Chart (7 Cols on LG) -->\n      <Card class=\"border-border flex flex-col justify-between shadow-xs lg:col-span-7\">\n        <CardHeader class=\"border-b pb-4\">\n          <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"space-y-0.5\">\n              <div class=\"flex items-center gap-2\">\n                <CardTitle class=\"text-base font-semibold tracking-tight\"> 30-Day Cash Flow Projection </CardTitle>\n                <Badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success text-xs\">\n                  95% Confidence Band\n                </Badge>\n              </div>\n              <CardDescription class=\"text-xs\">\n                Trajectory from <strong class=\"text-foreground\">$4,850,240.00</strong> to projected\n                <strong class=\"text-foreground\">$4,924,440.00</strong> balance.\n              </CardDescription>\n            </div>\n\n            <!-- Timeframe selector -->\n            <div class=\"flex items-center rounded-lg border p-0.5 text-xs\">\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'rounded-md px-2.5 py-1 font-medium transition-colors',\n                    activeTab === '30d'\n                      ? 'bg-primary text-primary-foreground shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )\n                \"\n                @click=\"activeTab = '30d'\"\n              >\n                30D Projection\n              </button>\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'rounded-md px-2.5 py-1 font-medium transition-colors',\n                    activeTab === '60d'\n                      ? 'bg-primary text-primary-foreground shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )\n                \"\n                @click=\"activeTab = '60d'\"\n              >\n                60D\n              </button>\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'rounded-md px-2.5 py-1 font-medium transition-colors',\n                    activeTab === '90d'\n                      ? 'bg-primary text-primary-foreground shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )\n                \"\n                @click=\"activeTab = '90d'\"\n              >\n                90D\n              </button>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"space-y-4 pt-5\">\n          <!-- Responsive Projection SVG Curve with Confidence Corridor -->\n          <div class=\"bg-muted/10 relative w-full overflow-x-auto rounded-lg border p-2\">\n            <svg\n              viewBox=\"0 0 700 220\"\n              class=\"h-56 w-full max-w-[560px] min-w-full overflow-visible\"\n              preserveAspectRatio=\"none\"\n              aria-label=\"30-day corporate cash projection graph\"\n            >\n              <defs>\n                <linearGradient id=\"cfBandGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop offset=\"0%\" stop-color=\"#10B981\" stop-opacity=\"0.22\" />\n                  <stop offset=\"100%\" stop-color=\"#10B981\" stop-opacity=\"0.02\" />\n                </linearGradient>\n                <linearGradient id=\"cfLineGradient\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n                  <stop offset=\"0%\" stop-color=\"#10B981\" />\n                  <stop offset=\"45%\" stop-color=\"#06B6D4\" />\n                  <stop offset=\"100%\" stop-color=\"#10B981\" />\n                </linearGradient>\n              </defs>\n\n              <!-- Horizontal Grid Guidelines -->\n              <g stroke=\"currentColor\" class=\"text-border/60\" stroke-width=\"1\" stroke-dasharray=\"3 3\">\n                <line x1=\"40\" y1=\"55\" x2=\"670\" y2=\"55\" />\n                <line x1=\"40\" y1=\"115\" x2=\"670\" y2=\"115\" />\n                <line x1=\"40\" y1=\"175\" x2=\"670\" y2=\"175\" />\n              </g>\n\n              <!-- Guideline Labels -->\n              <g class=\"fill-muted-foreground font-mono text-xs\" font-size=\"12\">\n                <text x=\"4\" y=\"58\">$5.10M</text>\n                <text x=\"4\" y=\"118\">$4.85M</text>\n                <text x=\"4\" y=\"178\">$4.60M</text>\n              </g>\n\n              <!-- 95% Confidence Band Polygon Area -->\n              <path\n                d=\"M 50,120 C 110,110 140,95 180,90 C 240,85 280,105 330,105 C 390,105 430,55 490,55 C 550,55 590,75 650,75 L 650,140 C 590,140 550,125 490,125 C 430,125 390,175 330,175 C 280,175 240,155 180,155 C 140,155 110,140 50,140 Z\"\n                fill=\"url(#cfBandGradient)\"\n              />\n\n              <!-- Upper Confidence Bound Line (Dashed) -->\n              <path\n                d=\"M 50,120 C 110,110 140,95 180,90 C 240,85 280,105 330,105 C 390,105 430,55 490,55 C 550,55 590,75 650,75\"\n                fill=\"none\"\n                stroke=\"#10B981\"\n                stroke-width=\"1.5\"\n                stroke-dasharray=\"4 4\"\n                opacity=\"0.6\"\n              />\n\n              <!-- Lower Confidence Bound Line (Dashed) -->\n              <path\n                d=\"M 50,140 C 110,140 140,155 180,155 C 240,155 280,175 330,175 C 390,175 430,125 490,125 C 550,125 590,140 650,140\"\n                fill=\"none\"\n                stroke=\"#10B981\"\n                stroke-width=\"1.5\"\n                stroke-dasharray=\"4 4\"\n                opacity=\"0.4\"\n              />\n\n              <!-- Median Expected Trajectory Main Curve -->\n              <path\n                d=\"M 50,130 C 110,128 140,123 180,123 C 240,123 280,144 330,144 C 390,144 430,89 490,89 C 550,89 590,108 650,108\"\n                fill=\"none\"\n                stroke=\"url(#cfLineGradient)\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n              />\n\n              <!-- Milestone Markers on Curve -->\n              <g\n                v-for=\"(m, idx) in trajectoryMilestones\"\n                :key=\"m.day\"\n                class=\"cursor-pointer\"\n                @mouseenter=\"activeMilestone = idx\"\n              >\n                <circle :cx=\"m.cx\" :cy=\"m.cy\" r=\"6\" class=\"fill-background stroke-emerald-500\" stroke-width=\"3\" />\n                <circle\n                  v-if=\"activeMilestone === idx\"\n                  :cx=\"m.cx\"\n                  :cy=\"m.cy\"\n                  r=\"11\"\n                  class=\"fill-success/20 stroke-emerald-400\"\n                  stroke-width=\"1\"\n                />\n              </g>\n            </svg>\n\n            <!-- Bottom X-Axis Milestone Labels -->\n            <div class=\"mt-2 grid max-w-[560px] min-w-full grid-cols-5 gap-1 border-t pt-2 text-center\">\n              <div\n                v-for=\"(m, idx) in trajectoryMilestones\"\n                :key=\"m.day\"\n                :class=\"\n                  cn(\n                    'rounded-md p-1 transition-colors',\n                    activeMilestone === idx ? 'bg-muted ring-border/80 ring-1' : 'hover:bg-muted/40',\n                  )\n                \"\n                @mouseenter=\"activeMilestone = idx\"\n              >\n                <span class=\"text-foreground block text-xs font-semibold\">{{ m.day }}</span>\n                <span class=\"text-muted-foreground block text-xs\">{{ m.date }}</span>\n                <span\n                  :class=\"\n                    cn(\n                      'font-mono text-xs font-medium tabular-nums',\n                      m.amount.startsWith('+')\n                        ? 'text-success'\n                        : m.amount.startsWith('-')\n                          ? 'text-destructive'\n                          : 'text-foreground',\n                    )\n                  \"\n                >\n                  {{ m.amount }}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Chart Key Legend & Milestone Detail Bar -->\n          <div class=\"flex flex-wrap items-center justify-between gap-3 text-xs\">\n            <div class=\"flex flex-wrap items-center gap-4\">\n              <div class=\"flex items-center gap-1.5\">\n                <span class=\"bg-success size-2.5 rounded-full\" />\n                <span class=\"text-foreground font-medium\">Expected Trajectory</span>\n              </div>\n              <div class=\"flex items-center gap-1.5\">\n                <span class=\"border-success bg-success/20 h-2 w-4 rounded-xs border border-dashed\" />\n                <span class=\"text-muted-foreground\">95% Confidence Corridor</span>\n              </div>\n              <div class=\"flex items-center gap-1.5\">\n                <span class=\"bg-background border-success size-2 rounded-full border-2\" />\n                <span class=\"text-muted-foreground\">Cash Events</span>\n              </div>\n            </div>\n\n            <div class=\"text-muted-foreground font-mono\">\n              Net 30-Day Delta: <strong class=\"text-success\">+$74,200.00</strong>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Inflow & Outflow Breakdown Side Column (5 Cols on LG) -->\n      <div class=\"space-y-4 lg:col-span-5\">\n        <!-- Inflow Breakdown Card -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center justify-between gap-x-2\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"bg-success/10 text-success flex size-7 items-center justify-center rounded-md\">\n                  <ArrowDownLeft class=\"size-4\" aria-hidden=\"true\" />\n                </div>\n                <div>\n                  <CardTitle class=\"text-sm font-semibold tracking-tight\">Projected 30D Inflow</CardTitle>\n                  <CardDescription class=\"text-xs\">Total incoming cash: +$245,000.00</CardDescription>\n                </div>\n              </div>\n              <Badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success text-xs font-semibold\">\n                100%\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent class=\"space-y-3\">\n            <div v-for=\"item in inflowBreakdown\" :key=\"item.id\" class=\"space-y-1.5\">\n              <div class=\"flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"text-foreground font-medium\">{{ item.name }}</span>\n                  <span class=\"text-muted-foreground font-mono text-xs\">({{ item.percentage }}%)</span>\n                </div>\n                <span class=\"text-success text-success font-mono font-semibold tabular-nums\">\n                  {{ item.amount }}\n                </span>\n              </div>\n              <Progress :model-value=\"item.percentage\" class=\"h-2\" />\n              <p class=\"text-muted-foreground text-xs\">{{ item.detail }}</p>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Outflow Breakdown Card -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center justify-between gap-x-2\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"bg-destructive/10 text-destructive flex size-7 items-center justify-center rounded-md\">\n                  <ArrowUpRight class=\"size-4\" aria-hidden=\"true\" />\n                </div>\n                <div>\n                  <CardTitle class=\"text-sm font-semibold tracking-tight\">Projected 30D Outflow</CardTitle>\n                  <CardDescription class=\"text-xs\">Total operational burn: -$170,800.00</CardDescription>\n                </div>\n              </div>\n              <Badge\n                variant=\"outline\"\n                class=\"border-destructive/20 bg-destructive/10 text-destructive text-xs font-semibold\"\n              >\n                100%\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent class=\"space-y-3\">\n            <div v-for=\"item in outflowBreakdown\" :key=\"item.id\" class=\"space-y-1.5\">\n              <div class=\"flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"text-foreground font-medium\">{{ item.name }}</span>\n                  <span class=\"text-muted-foreground font-mono text-xs\">({{ item.percentage }}%)</span>\n                </div>\n                <span class=\"text-destructive text-destructive font-mono font-semibold tabular-nums\">\n                  {{ item.amount }}\n                </span>\n              </div>\n              <Progress :model-value=\"item.percentage\" class=\"h-2\" />\n              <p class=\"text-muted-foreground text-xs\">{{ item.detail }}</p>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n\n    <!-- Connected Corporate Bank Accounts Table -->\n    <div class=\"bg-card border-border overflow-hidden rounded-xl border shadow-xs\">\n      <div class=\"flex flex-col gap-3 border-b p-5 sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"space-y-1\">\n          <div class=\"flex items-center gap-2.5\">\n            <Landmark class=\"text-muted-foreground size-5\" aria-hidden=\"true\" />\n            <h3 class=\"text-foreground text-base font-semibold tracking-tight sm:text-lg\">\n              Connected Corporate Bank &amp; Treasury Accounts\n            </h3>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">\n            4 institutional accounts connected via real-time Open Banking / Plaid Exchange\n          </p>\n        </div>\n\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            :class=\"\n              cn(\n                'gap-1.5 text-xs',\n                isAutoSweepActive ? 'border-success/30 bg-success/10 text-success' : 'text-muted-foreground',\n              )\n            \"\n            @click=\"handleManageSweep\"\n          >\n            <Zap class=\"size-3.5\" aria-hidden=\"true\" />\n            <span>Auto-Sweep Rule: {{ isAutoSweepActive ? 'Active (5.14% APY)' : 'Paused' }}</span>\n          </Button>\n\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            class=\"gap-1.5 text-xs\"\n            @click=\"triggerNotification('Bank balances refreshed from Federal Reserve Fedwire & NACHA feeds.')\"\n          >\n            <RefreshCw class=\"size-3.5\" aria-hidden=\"true\" />\n            Refresh Balances\n          </Button>\n        </div>\n      </div>\n\n      <div class=\"overflow-x-auto\">\n        <Table>\n          <TableHeader>\n            <TableRow class=\"bg-muted/40 hover:bg-muted/40\">\n              <TableHead class=\"min-w-[240px]\">Institution &amp; Account</TableHead>\n              <TableHead class=\"min-w-[220px]\">Purpose &amp; Routing</TableHead>\n              <TableHead class=\"text-center\">APY / Yield</TableHead>\n              <TableHead class=\"text-right\">Available Balance</TableHead>\n              <TableHead class=\"text-center\">Status</TableHead>\n              <TableHead class=\"text-right\">Actions</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow v-for=\"account in bankAccounts\" :key=\"account.id\" class=\"hover:bg-muted/30\">\n              <!-- Account & Institution -->\n              <TableCell>\n                <div class=\"flex items-center gap-3\">\n                  <div\n                    class=\"border-border/80 bg-background flex size-10 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                  >\n                    <!-- Chase -->\n                    <svg\n                      v-if=\"account.id === 'acc-operating'\"\n                      viewBox=\"0 0 24 24\"\n                      class=\"size-5 shrink-0 text-[#117ACA]\"\n                      fill=\"currentColor\"\n                    >\n                      <path\n                        d=\"M12 2.5L7.5 7h4.8L16.2 3.1 12 2.5zm9.5 9.5L17 7.5v4.8l3.9 3.9.6-4.2zm-9.5 9.5L16.5 17h-4.8L7.8 20.9l4.2.6zm-9.5-9.5L7 16.5v-4.8L3.1 7.8 2.5 12z\"\n                      />\n                    </svg>\n                    <!-- Morgan Stanley Sweep -->\n                    <svg v-else-if=\"account.id === 'acc-sweep'\" viewBox=\"0 0 24 24\" class=\"size-5 shrink-0\" fill=\"none\">\n                      <rect width=\"24\" height=\"24\" rx=\"4\" fill=\"#002D62\" />\n                      <path d=\"M4 17V7l5 5-5 5zm8 0V7l5 5-5 5z\" fill=\"#00A3E0\" />\n                      <circle cx=\"18\" cy=\"12\" r=\"2\" fill=\"#FFFFFF\" />\n                    </svg>\n                    <!-- SVB -->\n                    <svg\n                      v-else-if=\"account.id === 'acc-payroll'\"\n                      viewBox=\"0 0 24 24\"\n                      class=\"size-5 shrink-0\"\n                      fill=\"none\"\n                    >\n                      <rect width=\"24\" height=\"24\" rx=\"4\" fill=\"#005587\" />\n                      <path d=\"M6 15l6-9 6 9-3 1.5-3-4.5-3 4.5L6 15z\" fill=\"#FFFFFF\" />\n                      <path d=\"M9 16.5l3-4.5 3 4.5-3 1.5-3-1.5z\" fill=\"#00A3E0\" />\n                    </svg>\n                    <!-- Citibank -->\n                    <svg v-else-if=\"account.id === 'acc-tax'\" viewBox=\"0 0 24 24\" class=\"size-5 shrink-0\" fill=\"none\">\n                      <path\n                        d=\"M12 4.5C8 4.5 4.5 6.8 4 9.5h2.5c.5-1.5 3-2.5 5.5-2.5s5 1 5.5 2.5H20c-.5-2.7-4-5-8-5z\"\n                        fill=\"#EC111A\"\n                      />\n                      <rect x=\"4\" y=\"11\" width=\"3\" height=\"8\" rx=\"0.5\" fill=\"#003B70\" />\n                      <circle cx=\"12\" cy=\"15\" r=\"4\" fill=\"#003B70\" />\n                      <rect x=\"17\" y=\"11\" width=\"3\" height=\"8\" rx=\"0.5\" fill=\"#003B70\" />\n                    </svg>\n                    <Building2 v-else class=\"text-muted-foreground size-5\" />\n                  </div>\n\n                  <div class=\"min-w-0 space-y-0.5\">\n                    <div class=\"flex items-center gap-2\">\n                      <span class=\"text-foreground truncate text-sm font-semibold\">{{ account.name }}</span>\n                    </div>\n                    <div class=\"flex items-center gap-2\">\n                      <span class=\"text-muted-foreground truncate text-xs\">{{ account.institution }}</span>\n                      <span class=\"text-muted-foreground font-mono text-xs\">{{ account.accountMask }}</span>\n                    </div>\n                  </div>\n                </div>\n              </TableCell>\n\n              <!-- Purpose -->\n              <TableCell>\n                <div class=\"space-y-0.5\">\n                  <span class=\"text-foreground block text-xs font-medium\">{{ account.accountType }}</span>\n                  <span class=\"text-muted-foreground block text-xs leading-tight\">{{ account.purpose }}</span>\n                </div>\n              </TableCell>\n\n              <!-- APY Rate -->\n              <TableCell class=\"text-center\">\n                <Badge\n                  v-if=\"account.isSweepAccount\"\n                  variant=\"outline\"\n                  class=\"border-success/30 bg-success/10 text-success font-mono text-xs font-semibold\"\n                >\n                  {{ account.apy }}\n                </Badge>\n                <span v-else class=\"text-muted-foreground font-mono text-xs\">\n                  {{ account.apy }}\n                </span>\n              </TableCell>\n\n              <!-- Balance -->\n              <TableCell class=\"text-right\">\n                <span class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">\n                  {{ account.balance }}\n                </span>\n              </TableCell>\n\n              <!-- Status -->\n              <TableCell class=\"text-center\">\n                <Badge\n                  v-if=\"account.statusType === 'success'\"\n                  variant=\"outline\"\n                  class=\"border-success/20 bg-success/10 text-success gap-1 text-xs font-medium\"\n                >\n                  <span class=\"bg-success size-1.5 rounded-full\" aria-hidden=\"true\" />\n                  {{ account.status }}\n                </Badge>\n                <Badge\n                  v-else-if=\"account.statusType === 'info'\"\n                  variant=\"outline\"\n                  class=\"border-info/20 bg-info/10 text-info gap-1 text-xs font-medium\"\n                >\n                  <span class=\"bg-info size-1.5 rounded-full\" aria-hidden=\"true\" />\n                  {{ account.status }}\n                </Badge>\n                <Badge\n                  v-else\n                  variant=\"outline\"\n                  class=\"border-warning/20 bg-warning/10 text-warning gap-1 text-xs font-medium\"\n                >\n                  <Lock class=\"size-3\" aria-hidden=\"true\" />\n                  {{ account.status }}\n                </Badge>\n              </TableCell>\n\n              <!-- Actions -->\n              <TableCell class=\"text-right\">\n                <div class=\"flex items-center justify-end gap-1.5\">\n                  <Button\n                    v-if=\"account.isSweepAccount\"\n                    size=\"sm\"\n                    variant=\"outline\"\n                    class=\"h-8 gap-1 text-xs\"\n                    @click=\"handleManageSweep\"\n                  >\n                    <Zap class=\"text-success size-3\" aria-hidden=\"true\" />\n                    Configure Sweep\n                  </Button>\n                  <Button v-else size=\"sm\" variant=\"outline\" class=\"h-8 text-xs\" @click=\"handleTransfer(account.name)\">\n                    Transfer\n                  </Button>\n                </div>\n              </TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      </div>\n\n      <!-- Table Summary Footer -->\n      <div class=\"bg-muted/20 flex flex-col items-center justify-between gap-3 border-t p-4 sm:flex-row\">\n        <div class=\"flex items-center gap-2\">\n          <Shield class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n          <p class=\"text-muted-foreground text-xs\">\n            Custody verified through Member FINRA / SIPC &amp; FDIC depository institutions.\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <span class=\"text-muted-foreground font-mono text-xs\">\n            Net Liquidity: <strong class=\"text-foreground\">$4,850,240.00</strong>\n          </span>\n          <Button size=\"sm\" class=\"h-8 text-xs font-medium\" @click=\"handleTransfer()\">\n            <Send class=\"mr-1.5 size-3.5\" aria-hidden=\"true\" />\n            Transfer Between Accounts\n          </Button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CashFlowTreasuryDashboard.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/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"
  ]
}