{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "cash-flow-treasury-dashboard",
  "title": "Cash Flow Treasury Dashboard",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/cash-flow-treasury-dashboard/cash-flow-treasury-dashboard.component.ts",
      "content": "// Fluxo and Mercury style corporate cash flow treasury dashboard: 30-day runway\n// projection with a confidence corridor, liquidity buffer monitor, inflow/outflow\n// breakdown, and a connected bank accounts table. Port of the React block 1:1.\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  EventEmitter,\n  Input,\n  Output,\n  inject,\n  signal,\n} from '@angular/core'\nimport {\n  ArrowDownLeft,\n  ArrowUpRight,\n  Building2,\n  CheckCircle2,\n  Flame,\n  Landmark,\n  Lock,\n  LucideAngularModule,\n  RefreshCw,\n  Send,\n  Shield,\n  ShieldCheck,\n  TrendingUp,\n  Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\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 { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n  UiTableBodyComponent,\n  UiTableCellComponent,\n  UiTableComponent,\n  UiTableHeadComponent,\n  UiTableHeaderComponent,\n  UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type TreasuryTab = '30d' | '60d' | '90d'\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  // Carried for parity with the React/Vue data; the card chrome renders no icon.\n  icon: unknown\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 FlowItem {\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: FlowItem[] = [\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\nconst outflowBreakdown: FlowItem[] = [\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\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-cash-flow-treasury-dashboard, [ui-cash-flow-treasury-dashboard]',\n  standalone: true,\n  // React renders the root <div> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiCardDescriptionComponent,\n    UiCardHeaderComponent,\n    UiCardTitleComponent,\n    UiProgressComponent,\n    UiSeparatorComponent,\n    UiTableBodyComponent,\n    UiTableCellComponent,\n    UiTableComponent,\n    UiTableHeadComponent,\n    UiTableHeaderComponent,\n    UiTableRowComponent,\n  ],\n  template: `\n    <div data-slot=\"cash-flow-treasury-dashboard\" [class]=\"rootClass\">\n      <!-- Top Action Feedback Banner -->\n      @if (actionFeedback()) {\n        <div\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            <lucide-icon [img]=\"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)=\"dismissFeedback()\"\n          >\n            <span class=\"sr-only\">Close message</span>\n            &times;\n          </button>\n        </div>\n      }\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              <span\n                ui-badge\n                variant=\"outline\"\n                class=\"border-success/20 bg-success/10 text-success gap-1.5 text-xs font-medium\"\n              >\n                <span class=\"bg-success size-1.5 animate-pulse rounded-full\" aria-hidden=\"true\"></span>\n                Live FDIC Insured Sweeps ($5M Aggregate)\n              </span>\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 ui-button variant=\"outline\" class=\"gap-2 text-xs font-medium sm:text-sm\" (click)=\"handleDeposit()\">\n              <lucide-icon [img]=\"ArrowDownLeft\" class=\"size-4\" aria-hidden=\"true\" />\n              Deposit Funds\n            </button>\n            <button ui-button class=\"gap-2 text-xs font-medium sm:text-sm\" (click)=\"handleTransfer()\">\n              <lucide-icon [img]=\"ArrowUpRight\" class=\"size-4\" aria-hidden=\"true\" />\n              Initiate Wire / Transfer\n            </button>\n          </div>\n        </div>\n\n        <ui-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              <span\n                ui-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                <lucide-icon [img]=\"TrendingUp\" class=\"size-3\" aria-hidden=\"true\" />\n                +$74,200.00 (+1.55%) this month\n              </span>\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                <span ui-badge variant=\"outline\" class=\"border-success/30 text-success px-1 py-0 text-xs font-normal\">\n                  5.14% APY\n                </span>\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        @for (card of healthCards; track card.title) {\n          <div ui-card class=\"border-border relative flex flex-col justify-between overflow-hidden shadow-xs\">\n            <div ui-card-header class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <div ui-card-title class=\"text-muted-foreground text-xs font-medium tracking-tight\">{{ card.title }}</div>\n              <span ui-badge [variant]=\"card.badgeVariant\" [class]=\"'text-xs font-medium ' + (card.badgeClass ?? '')\">\n                {{ card.badgeText }}\n              </span>\n            </div>\n\n            <div ui-card-content class=\"space-y-3\">\n              <div>\n                <div [class]=\"healthValueClass(card.title)\">{{ card.value }}</div>\n                @if (card.highlight) {\n                  <p class=\"text-success mt-0.5 text-xs font-semibold\">{{ card.highlight }}</p>\n                }\n                <p class=\"text-muted-foreground mt-1 text-xs leading-normal\">{{ card.description }}</p>\n              </div>\n\n              <div class=\"space-y-1.5 border-t pt-2.5\">\n                <ui-progress [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            </div>\n          </div>\n        }\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        <div ui-card class=\"border-border flex flex-col justify-between shadow-xs lg:col-span-7\">\n          <div ui-card-header 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                  <div ui-card-title class=\"text-base font-semibold tracking-tight\">30-Day Cash Flow Projection</div>\n                  <span ui-badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success text-xs\">\n                    95% Confidence Band\n                  </span>\n                </div>\n                <div ui-card-description 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                </div>\n              </div>\n\n              <!-- Timeframe selector -->\n              <div class=\"flex items-center rounded-lg border p-0.5 text-xs\">\n                @for (tab of timeframeTabs; track tab.value) {\n                  <button type=\"button\" [class]=\"timeframeTabClass(tab.value)\" (click)=\"setActiveTab(tab.value)\">\n                    {{ tab.label }}\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n\n          <div ui-card-content 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=\"cfBandGradientNg\" 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=\"cfLineGradientNg\" 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(#cfBandGradientNg)\"\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(#cfLineGradientNg)\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n\n                <!-- Milestone Markers on Curve -->\n                @for (m of milestones; track m.day; let idx = $index) {\n                  <g class=\"cursor-pointer\" (mouseenter)=\"setActiveMilestone(idx)\">\n                    <circle\n                      [attr.cx]=\"m.cx\"\n                      [attr.cy]=\"m.cy\"\n                      r=\"6\"\n                      class=\"fill-background stroke-emerald-500\"\n                      stroke-width=\"3\"\n                    />\n                    @if (activeMilestone() === idx) {\n                      <circle\n                        [attr.cx]=\"m.cx\"\n                        [attr.cy]=\"m.cy\"\n                        r=\"11\"\n                        class=\"fill-success/20 stroke-emerald-400\"\n                        stroke-width=\"1\"\n                      />\n                    }\n                  </g>\n                }\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                @for (m of milestones; track m.day; let idx = $index) {\n                  <div [class]=\"milestoneCellClass(idx)\" (mouseenter)=\"setActiveMilestone(idx)\">\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 [class]=\"milestoneAmountClass(m.amount)\">{{ m.amount }}</span>\n                  </div>\n                }\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\"></span>\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\"></span>\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\"></span>\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          </div>\n        </div>\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          <div ui-card class=\"border-border shadow-xs\">\n            <div ui-card-header 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                    <lucide-icon [img]=\"ArrowDownLeft\" class=\"size-4\" aria-hidden=\"true\" />\n                  </div>\n                  <div>\n                    <div ui-card-title class=\"text-sm font-semibold tracking-tight\">Projected 30D Inflow</div>\n                    <div ui-card-description class=\"text-xs\">Total incoming cash: +$245,000.00</div>\n                  </div>\n                </div>\n                <span\n                  ui-badge\n                  variant=\"outline\"\n                  class=\"border-success/20 bg-success/10 text-success text-xs font-semibold\"\n                >\n                  100%\n                </span>\n              </div>\n            </div>\n            <div ui-card-content class=\"space-y-3\">\n              @for (item of inflow; track item.id) {\n                <div 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 font-mono font-semibold tabular-nums\">{{ item.amount }}</span>\n                  </div>\n                  <ui-progress [value]=\"item.percentage\" class=\"h-2\" />\n                  <p class=\"text-muted-foreground text-xs\">{{ item.detail }}</p>\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Outflow Breakdown Card -->\n          <div ui-card class=\"border-border shadow-xs\">\n            <div ui-card-header 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                    <lucide-icon [img]=\"ArrowUpRight\" class=\"size-4\" aria-hidden=\"true\" />\n                  </div>\n                  <div>\n                    <div ui-card-title class=\"text-sm font-semibold tracking-tight\">Projected 30D Outflow</div>\n                    <div ui-card-description class=\"text-xs\">Total operational burn: -$170,800.00</div>\n                  </div>\n                </div>\n                <span\n                  ui-badge\n                  variant=\"outline\"\n                  class=\"border-destructive/20 bg-destructive/10 text-destructive text-xs font-semibold\"\n                >\n                  100%\n                </span>\n              </div>\n            </div>\n            <div ui-card-content class=\"space-y-3\">\n              @for (item of outflow; track item.id) {\n                <div 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 font-mono font-semibold tabular-nums\">{{ item.amount }}</span>\n                  </div>\n                  <ui-progress [value]=\"item.percentage\" class=\"h-2\" />\n                  <p class=\"text-muted-foreground text-xs\">{{ item.detail }}</p>\n                </div>\n              }\n            </div>\n          </div>\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              <lucide-icon [img]=\"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 ui-button size=\"sm\" variant=\"outline\" [class]=\"sweepButtonClass\" (click)=\"handleManageSweep()\">\n              <lucide-icon [img]=\"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 ui-button size=\"sm\" variant=\"outline\" class=\"gap-1.5 text-xs\" (click)=\"refreshBalances()\">\n              <lucide-icon [img]=\"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 ui-table>\n            <thead ui-table-header>\n              <tr ui-table-row class=\"bg-muted/40 hover:bg-muted/40\">\n                <th ui-table-head class=\"min-w-[240px]\">Institution &amp; Account</th>\n                <th ui-table-head class=\"min-w-[220px]\">Purpose &amp; Routing</th>\n                <th ui-table-head class=\"text-center\">APY / Yield</th>\n                <th ui-table-head class=\"text-right\">Available Balance</th>\n                <th ui-table-head class=\"text-center\">Status</th>\n                <th ui-table-head class=\"text-right\">Actions</th>\n              </tr>\n            </thead>\n            <tbody ui-table-body>\n              @for (account of accounts; track account.id) {\n                <tr ui-table-row class=\"hover:bg-muted/30\">\n                  <!-- Account & Institution -->\n                  <td ui-table-cell>\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                        @switch (account.id) {\n                          @case ('acc-operating') {\n                            <svg viewBox=\"0 0 24 24\" class=\"size-5 shrink-0 text-[#117ACA]\" fill=\"currentColor\">\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                          }\n                          @case ('acc-sweep') {\n                            <svg 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                          }\n                          @case ('acc-payroll') {\n                            <svg viewBox=\"0 0 24 24\" class=\"size-5 shrink-0\" fill=\"none\">\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                          }\n                          @case ('acc-tax') {\n                            <svg 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                          }\n                          @default {\n                            <lucide-icon [img]=\"Building2\" class=\"text-muted-foreground size-5\" />\n                          }\n                        }\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                  </td>\n\n                  <!-- Purpose -->\n                  <td ui-table-cell>\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                  </td>\n\n                  <!-- APY Rate -->\n                  <td ui-table-cell class=\"text-center\">\n                    @if (account.isSweepAccount) {\n                      <span\n                        ui-badge\n                        variant=\"outline\"\n                        class=\"border-success/30 bg-success/10 text-success font-mono text-xs font-semibold\"\n                      >\n                        {{ account.apy }}\n                      </span>\n                    } @else {\n                      <span class=\"text-muted-foreground font-mono text-xs\">{{ account.apy }}</span>\n                    }\n                  </td>\n\n                  <!-- Balance -->\n                  <td ui-table-cell class=\"text-right\">\n                    <span class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{\n                      account.balance\n                    }}</span>\n                  </td>\n\n                  <!-- Status -->\n                  <td ui-table-cell class=\"text-center\">\n                    @if (account.statusType === 'success') {\n                      <span\n                        ui-badge\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\"></span>\n                        {{ account.status }}\n                      </span>\n                    } @else if (account.statusType === 'info') {\n                      <span\n                        ui-badge\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\"></span>\n                        {{ account.status }}\n                      </span>\n                    } @else {\n                      <span\n                        ui-badge\n                        variant=\"outline\"\n                        class=\"border-warning/20 bg-warning/10 text-warning gap-1 text-xs font-medium\"\n                      >\n                        <lucide-icon [img]=\"Lock\" class=\"size-3\" aria-hidden=\"true\" />\n                        {{ account.status }}\n                      </span>\n                    }\n                  </td>\n\n                  <!-- Actions -->\n                  <td ui-table-cell class=\"text-right\">\n                    <div class=\"flex items-center justify-end gap-1.5\">\n                      @if (account.isSweepAccount) {\n                        <button\n                          ui-button\n                          size=\"sm\"\n                          variant=\"outline\"\n                          class=\"h-8 gap-1 text-xs\"\n                          (click)=\"handleManageSweep()\"\n                        >\n                          <lucide-icon [img]=\"Zap\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                          Configure Sweep\n                        </button>\n                      } @else {\n                        <button\n                          ui-button\n                          size=\"sm\"\n                          variant=\"outline\"\n                          class=\"h-8 text-xs\"\n                          (click)=\"handleTransfer(account.name)\"\n                        >\n                          Transfer\n                        </button>\n                      }\n                    </div>\n                  </td>\n                </tr>\n              }\n            </tbody>\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            <lucide-icon [img]=\"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 ui-button size=\"sm\" class=\"h-8 text-xs font-medium\" (click)=\"handleTransfer()\">\n              <lucide-icon [img]=\"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  `,\n})\nexport class UiCashFlowTreasuryDashboardComponent {\n  protected readonly ArrowDownLeft = ArrowDownLeft\n  protected readonly ArrowUpRight = ArrowUpRight\n  protected readonly Building2 = Building2\n  protected readonly CheckCircle2 = CheckCircle2\n  protected readonly Landmark = Landmark\n  protected readonly Lock = Lock\n  protected readonly RefreshCw = RefreshCw\n  protected readonly Send = Send\n  protected readonly Shield = Shield\n  protected readonly TrendingUp = TrendingUp\n  protected readonly Zap = Zap\n\n  protected readonly healthCards = healthCards\n  protected readonly inflow = inflowBreakdown\n  protected readonly outflow = outflowBreakdown\n  protected readonly accounts = bankAccounts\n  protected readonly milestones = trajectoryMilestones\n  protected readonly timeframeTabs: { value: TreasuryTab; label: string }[] = [\n    { value: '30d', label: '30D Projection' },\n    { value: '60d', label: '60D' },\n    { value: '90d', label: '90D' },\n  ]\n\n  @Input('class') className?: string\n\n  @Output() readonly deposit = new EventEmitter<void>()\n  @Output() readonly transfer = new EventEmitter<string | undefined>()\n  @Output() readonly manageSweep = new EventEmitter<void>()\n\n  readonly activeTab = signal<TreasuryTab>('30d')\n  readonly activeMilestone = signal<number | null>(null)\n  readonly actionFeedback = signal<string | null>(null)\n  readonly isAutoSweepActive = signal(true)\n\n  private feedbackTimer: ReturnType<typeof setTimeout> | undefined\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.feedbackTimer))\n  }\n\n  get rootClass(): string {\n    return cn('w-full space-y-6', this.className)\n  }\n\n  get sweepButtonClass(): string {\n    return cn(\n      'gap-1.5 text-xs',\n      this.isAutoSweepActive() ? 'border-success/30 bg-success/10 text-success' : 'text-muted-foreground',\n    )\n  }\n\n  timeframeTabClass(tab: TreasuryTab): string {\n    return cn(\n      'rounded-md px-2.5 py-1 font-medium transition-colors',\n      this.activeTab() === tab\n        ? 'bg-primary text-primary-foreground shadow-xs'\n        : 'text-muted-foreground hover:text-foreground',\n    )\n  }\n\n  healthValueClass(title: string): string {\n    return cn(\n      'text-foreground text-2xl font-semibold tracking-tight tabular-nums',\n      title === 'Yield on Treasury Funds' && 'text-success',\n    )\n  }\n\n  milestoneCellClass(idx: number): string {\n    return cn(\n      'rounded-md p-1 transition-colors',\n      this.activeMilestone() === idx ? 'bg-muted ring-border/80 ring-1' : 'hover:bg-muted/40',\n    )\n  }\n\n  milestoneAmountClass(amount: string): string {\n    return cn(\n      'font-mono text-xs font-medium tabular-nums',\n      amount.startsWith('+') ? 'text-success' : amount.startsWith('-') ? 'text-destructive' : 'text-foreground',\n    )\n  }\n\n  setActiveTab(tab: TreasuryTab): void {\n    this.activeTab.set(tab)\n  }\n\n  setActiveMilestone(idx: number | null): void {\n    this.activeMilestone.set(idx)\n  }\n\n  dismissFeedback(): void {\n    this.actionFeedback.set(null)\n  }\n\n  private triggerNotification(msg: string): void {\n    this.actionFeedback.set(msg)\n    clearTimeout(this.feedbackTimer)\n    this.feedbackTimer = setTimeout(() => {\n      this.actionFeedback.update((prev) => (prev === msg ? null : prev))\n    }, 4000)\n  }\n\n  handleDeposit(): void {\n    this.deposit.emit()\n    this.triggerNotification('Deposit modal opened. Direct ACH & Wire instructions ready for UIPKGE Technologies Inc.')\n  }\n\n  handleTransfer(accountName?: string): void {\n    this.transfer.emit(accountName)\n    this.triggerNotification(\n      accountName\n        ? `Transfer interface initiated from ${accountName}. Real-time settlement active.`\n        : 'Initiating wire & multi-account transfer portal.',\n    )\n  }\n\n  handleManageSweep(): void {\n    const next = !this.isAutoSweepActive()\n    this.isAutoSweepActive.set(next)\n    this.manageSweep.emit()\n    this.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  }\n\n  refreshBalances(): void {\n    this.triggerNotification('Bank balances refreshed from Federal Reserve Fedwire & NACHA feeds.')\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cash-flow-treasury-dashboard/cash-flow-treasury-dashboard.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/cash-flow-treasury-dashboard/index.ts",
      "content": "export { UiCashFlowTreasuryDashboardComponent, type TreasuryTab } from './cash-flow-treasury-dashboard.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cash-flow-treasury-dashboard/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "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/separator.json",
    "https://uipkge.dev/r/angular/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"
  ]
}