{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-catalog-lineage",
  "title": "Data Catalog Lineage",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-react/blocks/data-catalog-lineage/DataCatalogLineage.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  Activity,\n  AlertCircle,\n  ArrowRight,\n  ArrowRightLeft,\n  BarChart3,\n  Check,\n  CheckCircle2,\n  Clock,\n  Coins,\n  Copy,\n  CreditCard,\n  Database,\n  ExternalLink,\n  Eye,\n  FileCode2,\n  GitFork,\n  HelpCircle,\n  Key,\n  Landmark,\n  Layers,\n  LineChart,\n  Play,\n  RefreshCw,\n  Search,\n  ShieldCheck,\n  Table2,\n  Terminal,\n  Users,\n  Workflow,\n  X,\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 { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nexport interface ColumnDef {\n  name: string\n  type: string\n  nullable: boolean\n  isPrimaryKey?: boolean\n  description: string\n  sampleValue: string\n  distinctPct: string\n  constraints?: string\n}\n\nexport interface QualityAssertion {\n  id: string\n  name: string\n  type: string\n  targetColumn: string\n  description: string\n  executionTime: string\n  lastRun: string\n  status: 'passed' | 'warning' | 'failed'\n  ruleDefinition: string\n}\n\nexport interface LineageSourceNode {\n  id: string\n  name: string\n  schema: string\n  connector: string\n  type: string\n  rowCount: string\n  latency: string\n  status: 'fresh' | 'syncing' | 'delayed'\n  iconName: 'CreditCard' | 'Users' | 'Landmark'\n  description: string\n}\n\nexport interface LineageTransformNode {\n  id: string\n  name: string\n  modelType: string\n  engine: string\n  runtime: string\n  lastRun: string\n  testsPassed: string\n  status: 'passed' | 'running' | 'failed'\n  iconName: 'Layers' | 'Coins'\n  description: string\n}\n\nexport interface LineageConsumerNode {\n  id: string\n  name: string\n  category: string\n  tool: string\n  frequency: string\n  audience: string\n  status: 'active' | 'syncing'\n  iconName: 'BarChart3' | 'ArrowRightLeft' | 'LineChart'\n  description: string\n}\n\nexport interface DataCatalogLineageProps {\n  className?: string\n}\n\nconst sourceNodes: LineageSourceNode[] = [\n  {\n    id: 'src-stripe',\n    name: 'raw_stripe.charges',\n    schema: 'raw_stripe',\n    connector: 'Fivetran CDC',\n    type: 'PostgreSQL Raw',\n    rowCount: '1.42M rows',\n    latency: '~5m sync',\n    status: 'fresh',\n    iconName: 'CreditCard',\n    description: 'Direct transactional charge events, currency conversions, refunds, and card processing fees.',\n  },\n  {\n    id: 'src-salesforce',\n    name: 'raw_salesforce.accounts',\n    schema: 'raw_salesforce',\n    connector: 'Airbyte Cloud',\n    type: 'CRM Extract',\n    rowCount: '84.5k rows',\n    latency: '~15m sync',\n    status: 'fresh',\n    iconName: 'Users',\n    description: 'Enterprise accounts, contract values, billing contacts, and subscription tier assignments.',\n  },\n  {\n    id: 'src-bank',\n    name: 'raw_bank.transfers',\n    schema: 'raw_bank',\n    connector: 'Kafka Stream',\n    type: 'Banking API',\n    rowCount: '620k rows',\n    latency: '<1m latency',\n    status: 'fresh',\n    iconName: 'Landmark',\n    description: 'Direct bank wire settlement entries, ACH clearances, and treasury reconciliation logs.',\n  },\n]\n\nconst transformNodes: LineageTransformNode[] = [\n  {\n    id: 'tr-daily-revenue',\n    name: 'dbt.int_daily_revenue',\n    modelType: 'dbt Incremental',\n    engine: 'dbt Core 1.8',\n    runtime: '1m 24s',\n    lastRun: '22m ago',\n    testsPassed: '14/14 Passed',\n    status: 'passed',\n    iconName: 'Layers',\n    description: 'Aggregates daily charge events into standardized GAAP revenue recognized per customer.',\n  },\n  {\n    id: 'tr-fx-rates',\n    name: 'dbt.int_fx_normalized_rates',\n    modelType: 'dbt View',\n    engine: 'dbt Core 1.8',\n    runtime: '18s',\n    lastRun: '25m ago',\n    testsPassed: '6/6 Passed',\n    status: 'passed',\n    iconName: 'Coins',\n    description: 'Normalized exchange rate matrix cross-referencing European Central Bank & Federal Reserve feeds.',\n  },\n]\n\nconst consumerNodes: LineageConsumerNode[] = [\n  {\n    id: 'cons-metabase',\n    name: 'Executive Board Metabase Dashboard',\n    category: 'BI Dashboard',\n    tool: 'Metabase Enterprise',\n    frequency: 'Hourly auto-refresh',\n    audience: '42 active executives',\n    status: 'active',\n    iconName: 'BarChart3',\n    description: 'C-Suite executive dashboard tracking recurring revenue, net burn rate, and board deck slide metrics.',\n  },\n  {\n    id: 'cons-netsuite',\n    name: 'Finance NetSuite Sync',\n    category: 'Reverse ETL',\n    tool: 'Census Reverse ETL',\n    frequency: 'Hourly batch',\n    audience: 'Accounting ERP Ledger',\n    status: 'active',\n    iconName: 'ArrowRightLeft',\n    description: 'Automated journal entry creation and revenue recognition schedules into NetSuite ERP.',\n  },\n  {\n    id: 'cons-looker',\n    name: 'Looker ARR Report',\n    category: 'Looker Model',\n    tool: 'Looker Explore',\n    frequency: 'Live semantic model',\n    audience: '18 connected reports',\n    status: 'active',\n    iconName: 'LineChart',\n    description: 'Self-service exploration model for RevOps, cohort retention, contraction, and expansion ARR.',\n  },\n]\n\nconst columns: ColumnDef[] = [\n  {\n    name: 'month_id',\n    type: 'varchar(7)',\n    nullable: false,\n    isPrimaryKey: true,\n    description: 'YYYY-MM billing calendar interval identifier (e.g. 2026-03) representing fiscal calendar close.',\n    sampleValue: \"'2026-03'\",\n    distinctPct: '100% Unique',\n    constraints: 'PRIMARY KEY, ISO-8601',\n  },\n  {\n    name: 'gross_revenue',\n    type: 'decimal(18,2)',\n    nullable: false,\n    description:\n      'Total unadjusted transaction volume processed across all payment gateways before churn and discounts.',\n    sampleValue: '$1,842,500.00',\n    distinctPct: '99.8% Distinct',\n    constraints: 'CHECK (gross_revenue >= 0)',\n  },\n  {\n    name: 'net_arr',\n    type: 'decimal(18,2)',\n    nullable: false,\n    description:\n      'Annualized recurring revenue normalized across all active multi-year and monthly enterprise contracts.',\n    sampleValue: '$14,680,240.00',\n    distinctPct: '98.9% Distinct',\n    constraints: 'CHECK (net_arr >= 0)',\n  },\n  {\n    name: 'churned_mrr',\n    type: 'decimal(18,2)',\n    nullable: true,\n    description:\n      'Monthly recurring revenue lost in the period due to voluntary cancellations or involuntary card downgrades.',\n    sampleValue: '-$12,450.00',\n    distinctPct: '42.1% Distinct',\n    constraints: 'CHECK (churned_mrr <= 0)',\n  },\n  {\n    name: 'active_subscriptions',\n    type: 'integer',\n    nullable: false,\n    description: 'Total count of distinct active paying enterprise accounts and self-serve team workspaces.',\n    sampleValue: '3,842',\n    distinctPct: '100% Integer',\n    constraints: 'CHECK (active_subscriptions > 0)',\n  },\n]\n\nconst qualityAssertions: QualityAssertion[] = [\n  {\n    id: 'test-1',\n    name: 'assert_unique_month_id',\n    type: 'Primary Key Uniqueness',\n    targetColumn: 'month_id',\n    description: 'Verifies that every monthly fiscal partition key is strictly unique with 0 duplicate rows.',\n    executionTime: '420ms',\n    lastRun: '18m ago',\n    status: 'passed',\n    ruleDefinition: 'dbt_expectations.expect_compound_columns_to_be_unique(month_id)',\n  },\n  {\n    id: 'test-2',\n    name: 'assert_positive_gross_revenue',\n    type: 'Value Range Check',\n    targetColumn: 'gross_revenue',\n    description: 'Ensures that processed monthly gross revenue cannot be negative under GAAP rules.',\n    executionTime: '380ms',\n    lastRun: '18m ago',\n    status: 'passed',\n    ruleDefinition: 'dbt_expectations.expect_column_values_to_be_between(min_value=0)',\n  },\n  {\n    id: 'test-3',\n    name: 'assert_foreign_key_accounts_integrity',\n    type: 'Referential Integrity',\n    targetColumn: 'account_id (upstream join)',\n    description: 'Validates that 100% of underlying subscription revenue lines match valid accounts in Salesforce CRM.',\n    executionTime: '890ms',\n    lastRun: '18m ago',\n    status: 'passed',\n    ruleDefinition: \"dbt_utils.relationships(to=ref('raw_salesforce_accounts'), field='id')\",\n  },\n  {\n    id: 'test-4',\n    name: 'assert_not_null_critical_metrics',\n    type: 'Completeness / Non-Null',\n    targetColumn: 'month_id, gross_revenue, net_arr',\n    description: 'Guarantees zero null occurrences across high-priority C-Suite revenue and ARR metrics.',\n    executionTime: '310ms',\n    lastRun: '18m ago',\n    status: 'passed',\n    ruleDefinition: 'dbt.test_not_null_composite(columns=[month_id, gross_revenue, net_arr])',\n  },\n  {\n    id: 'test-5',\n    name: 'assert_valid_iso_month_format',\n    type: 'Regex Format Validation',\n    targetColumn: 'month_id',\n    description: 'Asserts all month partition tokens adhere to standard ISO format regex `^\\\\d{4}-(0[1-9]|1[0-2])$`.',\n    executionTime: '240ms',\n    lastRun: '18m ago',\n    status: 'passed',\n    ruleDefinition: 'dbt_expectations.expect_column_values_to_match_regex(pattern=\"^\\\\\\\\d{4}-(0[1-9]|1[0-2])$\")',\n  },\n  {\n    id: 'test-6',\n    name: 'assert_monotonic_active_subscriptions',\n    type: 'Anomaly Detection (3-Sigma)',\n    targetColumn: 'active_subscriptions',\n    description:\n      'Monte Carlo ML rule checking month-over-month subscription volatility is within 3-sigma confidence bounds.',\n    executionTime: '610ms',\n    lastRun: '18m ago',\n    status: 'passed',\n    ruleDefinition: 'monte_carlo.metric_anomaly_detector(threshold_sigma=3.0, sensitivity=0.95)',\n  },\n]\n\nexport function DataCatalogLineage({ className }: DataCatalogLineageProps) {\n  const [activeTab, setActiveTab] = React.useState('schema')\n  const [searchQuery, setSearchQuery] = React.useState('')\n  const [copiedRef, setCopiedRef] = React.useState(false)\n  const [copiedQuery, setCopiedQuery] = React.useState(false)\n  const [isRunningTests, setIsRunningTests] = React.useState(false)\n  const [isQueryModalOpen, setIsQueryModalOpen] = React.useState(false)\n  const [selectedNodeId, setSelectedNodeId] = React.useState<string | null>('target-table')\n  const [filterSeverity, setFilterSeverity] = React.useState<'all' | 'critical' | 'schema'>('all')\n\n  const filteredColumns = React.useMemo(() => {\n    const query = searchQuery.trim().toLowerCase()\n    if (!query) return columns\n    return columns.filter(\n      (col) =>\n        col.name.toLowerCase().includes(query) ||\n        col.type.toLowerCase().includes(query) ||\n        col.description.toLowerCase().includes(query),\n    )\n  }, [searchQuery])\n\n  const filteredQualityTests = React.useMemo(() => {\n    if (filterSeverity === 'critical') {\n      return qualityAssertions.filter((t) => t.type.includes('Primary') || t.type.includes('Referential'))\n    }\n    if (filterSeverity === 'schema') {\n      return qualityAssertions.filter((t) => t.type.includes('Format') || t.type.includes('Completeness'))\n    }\n    return qualityAssertions\n  }, [filterSeverity])\n\n  const selectedNodeDetails = React.useMemo(() => {\n    if (selectedNodeId === 'target-table') {\n      return {\n        title: 'analytics.fct_monthly_financials',\n        badge: 'Active Target Table',\n        description:\n          'Gold-tier core financial mart consolidating Stripe billing, FX rates, and Salesforce CRM accounts for executive reporting.',\n        metadata: [\n          { label: 'Layer', value: 'Marts / Core Analytics' },\n          { label: 'Schema', value: 'production_dw' },\n          { label: 'Total Rows', value: '240,000' },\n          { label: 'Freshness SLA', value: '60 mins (Current: 18m)' },\n        ],\n      }\n    }\n\n    const src = sourceNodes.find((n) => n.id === selectedNodeId)\n    if (src) {\n      return {\n        title: src.name,\n        badge: 'Source Table',\n        description: src.description,\n        metadata: [\n          { label: 'Connector', value: src.connector },\n          { label: 'Ingestion Type', value: src.type },\n          { label: 'Volume', value: src.rowCount },\n          { label: 'Sync Cadence', value: src.latency },\n        ],\n      }\n    }\n\n    const tr = transformNodes.find((n) => n.id === selectedNodeId)\n    if (tr) {\n      return {\n        title: tr.name,\n        badge: 'dbt Intermediate Model',\n        description: tr.description,\n        metadata: [\n          { label: 'Engine', value: tr.engine },\n          { label: 'Materialization', value: tr.modelType },\n          { label: 'Build Duration', value: tr.runtime },\n          { label: 'Test Suite', value: tr.testsPassed },\n        ],\n      }\n    }\n\n    const cons = consumerNodes.find((n) => n.id === selectedNodeId)\n    if (cons) {\n      return {\n        title: cons.name,\n        badge: 'Downstream Consumer',\n        description: cons.description,\n        metadata: [\n          { label: 'Tool Platform', value: cons.tool },\n          { label: 'Type', value: cons.category },\n          { label: 'Audience / Usage', value: cons.audience },\n          { label: 'Sync Schedule', value: cons.frequency },\n        ],\n      }\n    }\n\n    return null\n  }, [selectedNodeId])\n\n  const copyRef = React.useCallback((text: string) => {\n    if (typeof navigator !== 'undefined' && navigator.clipboard) {\n      navigator.clipboard.writeText(text)\n      setCopiedRef(true)\n      setTimeout(() => {\n        setCopiedRef(false)\n      }, 2000)\n    }\n  }, [])\n\n  const copyCompiledSQL = React.useCallback(() => {\n    const sql = `{{ config(\n    materialized='incremental',\n    unique_key='month_id',\n    schema='production_dw',\n    tags=['finance', 'tier_1_gold', 'executive_kpi']\n) }}\n\nWITH daily_rev AS (\n    SELECT * FROM {{ ref('int_daily_revenue') }}\n    {% if is_incremental() %}\n    WHERE event_date >= dateadd(day, -3, current_date)\n    {% endif %}\n),\n\nfx_rates AS (\n    SELECT * FROM {{ ref('int_fx_normalized_rates') }}\n),\n\nmonthly_aggregates AS (\n    SELECT\n        TO_CHAR(d.event_date, 'YYYY-MM') AS month_id,\n        SUM(d.gross_amount_usd) AS gross_revenue,\n        SUM(d.annualized_contract_val) AS net_arr,\n        SUM(CASE WHEN d.is_churned THEN d.mrr_impact ELSE 0 END) AS churned_mrr,\n        COUNT(DISTINCT d.customer_account_id) AS active_subscriptions\n    FROM daily_rev d\n    LEFT JOIN fx_rates fx ON d.currency = fx.currency AND d.event_date = fx.rate_date\n    GROUP BY 1\n)\n\nSELECT\n    month_id,\n    ROUND(gross_revenue, 2) AS gross_revenue,\n    ROUND(net_arr, 2) AS net_arr,\n    ROUND(churned_mrr, 2) AS churned_mrr,\n    active_subscriptions\nFROM monthly_aggregates\nORDER BY month_id DESC;`\n\n    if (typeof navigator !== 'undefined' && navigator.clipboard) {\n      navigator.clipboard.writeText(sql)\n      setCopiedQuery(true)\n      setTimeout(() => {\n        setCopiedQuery(false)\n      }, 2000)\n    }\n  }, [])\n\n  const runSimulatedTests = React.useCallback(() => {\n    setIsRunningTests(true)\n    setTimeout(() => {\n      setIsRunningTests(false)\n    }, 1200)\n  }, [])\n\n  return (\n    <div\n      data-slot=\"data-catalog-lineage\"\n      className={cn(\n        'bg-background text-foreground border-border w-full space-y-6 rounded-xl border p-4 shadow-xs sm:p-6',\n        className,\n      )}\n    >\n      {/* Header Section */}\n      <header className=\"border-border bg-card/60 rounded-xl border p-4 sm:p-5\">\n        <div className=\"flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between\">\n          <div className=\"space-y-2.5\">\n            {/* Cluster / Warehouse breadcrumbs */}\n            <div className=\"flex flex-wrap items-center gap-2 text-xs\">\n              <div className=\"bg-primary/10 text-primary flex size-6 items-center justify-center rounded-md\">\n                <Database className=\"size-3.5\" />\n              </div>\n              <span className=\"text-muted-foreground font-mono\">snowflake-dw-production.us-east-1</span>\n              <span className=\"text-muted-foreground\">/</span>\n              <Badge variant=\"outline\" className=\"font-mono text-xs font-normal\">\n                schema: production_dw\n              </Badge>\n              <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                Tier 1 Core Mart\n              </Badge>\n            </div>\n\n            {/* Table Title and Badges */}\n            <div className=\"flex flex-wrap items-center gap-3\">\n              <h1 className=\"text-foreground font-mono text-xl font-bold tracking-tight break-all sm:text-2xl\">\n                analytics.fct_monthly_financials\n              </h1>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-7 gap-1 px-2 text-xs\"\n                onClick={() => copyRef('analytics.fct_monthly_financials')}\n              >\n                {copiedRef ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n                <span className=\"font-mono\">{copiedRef ? 'Copied Ref!' : 'Copy Name'}</span>\n              </Button>\n            </div>\n\n            {/* Metadata Badges: Freshness, SLA, Owner */}\n            <div className=\"flex flex-wrap items-center gap-2 pt-0.5 text-xs\">\n              {/* Data Freshness */}\n              <div className=\"border-border bg-background inline-flex items-center gap-2 rounded-md border px-2.5 py-1\">\n                <span className=\"relative flex size-2\">\n                  <span className=\"bg-success absolute inline-flex size-full rounded-full opacity-75\" />\n                  <span className=\"bg-success relative inline-flex size-2 rounded-full\" />\n                </span>\n                <span className=\"text-muted-foreground\">Freshness:</span>\n                <span className=\"text-foreground font-medium\">Updated 18m ago</span>\n                <span className=\"text-success font-medium\">SLA: Healthy</span>\n              </div>\n\n              {/* Table Owner */}\n              <div className=\"border-border bg-background inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1\">\n                <Users className=\"text-muted-foreground size-3.5\" />\n                <span className=\"text-muted-foreground\">Owner:</span>\n                <span className=\"text-foreground font-medium\">Data Platform Squad</span>\n                <Badge variant=\"secondary\" className=\"h-4.5 px-1 font-mono text-xs\">\n                  #data-eng-core\n                </Badge>\n              </div>\n\n              {/* Stats */}\n              <div className=\"border-border bg-background inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1\">\n                <Table2 className=\"text-muted-foreground size-3.5\" />\n                <span className=\"text-muted-foreground\">Rows:</span>\n                <span className=\"text-foreground font-mono font-medium\">240,000</span>\n                <span className=\"text-foreground font-mono font-medium\">5 columns</span>\n              </div>\n            </div>\n          </div>\n\n          {/* Header Actions */}\n          <div className=\"flex flex-wrap items-center gap-2.5 pt-1 lg:pt-0\">\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"h-9 gap-1.5 text-xs\"\n              onClick={() => {\n                setSelectedNodeId('target-table')\n                setActiveTab('schema')\n              }}\n            >\n              <GitFork className=\"text-info size-3.5\" />\n              <span>View Upstream Lineage</span>\n            </Button>\n\n            <Button\n              variant=\"default\"\n              size=\"sm\"\n              className=\"h-9 gap-1.5 text-xs font-medium\"\n              onClick={() => setIsQueryModalOpen(!isQueryModalOpen)}\n            >\n              <Terminal className=\"size-3.5\" />\n              <span>Query Table</span>\n            </Button>\n          </div>\n        </div>\n      </header>\n\n      {/* Interactive SQL Query Drawer / Bar */}\n      {isQueryModalOpen && (\n        <div className=\"border-border bg-muted/30 overflow-hidden rounded-xl border transition-colors\">\n          <div className=\"border-border bg-card flex items-center justify-between border-b px-4 py-2.5\">\n            <div className=\"flex items-center gap-2\">\n              <Terminal className=\"text-primary size-4\" />\n              <span className=\"text-foreground font-mono text-xs font-semibold\">\n                Snowflake SQL Console · Interactive Query Runner\n              </span>\n              <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                Snowflake XS Warehouse\n              </Badge>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <Button variant=\"ghost\" size=\"sm\" className=\"h-7 text-xs\" onClick={copyCompiledSQL}>\n                {copiedQuery ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n                <span>{copiedQuery ? 'Copied' : 'Copy SQL'}</span>\n              </Button>\n              <Button variant=\"ghost\" size=\"sm\" className=\"size-7 p-0\" onClick={() => setIsQueryModalOpen(false)}>\n                <X className=\"size-4\" />\n              </Button>\n            </div>\n          </div>\n          <div className=\"space-y-3 p-4\">\n            <div className=\"overflow-x-auto rounded-lg bg-neutral-950 p-3 font-mono text-xs text-neutral-100 dark:bg-neutral-950\">\n              <pre className=\"leading-relaxed whitespace-pre\">\n                <code>{`SELECT\n  month_id,\n  gross_revenue,\n  net_arr,\n  churned_mrr,\n  active_subscriptions\nFROM production_dw.analytics.fct_monthly_financials\nORDER BY month_id DESC\nLIMIT 5;`}</code>\n              </pre>\n            </div>\n            {/* Query Results Preview */}\n            <div className=\"border-border bg-card overflow-hidden rounded-lg border\">\n              <Table>\n                <TableHeader>\n                  <TableRow className=\"bg-muted/50 hover:bg-muted/50\">\n                    <TableHead className=\"font-mono text-xs\">month_id (varchar)</TableHead>\n                    <TableHead className=\"text-right font-mono text-xs\">gross_revenue (decimal)</TableHead>\n                    <TableHead className=\"text-right font-mono text-xs\">net_arr (decimal)</TableHead>\n                    <TableHead className=\"text-right font-mono text-xs\">churned_mrr (decimal)</TableHead>\n                    <TableHead className=\"text-right font-mono text-xs\">active_subscriptions (int)</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  <TableRow className=\"font-mono text-xs\">\n                    <TableCell className=\"text-warning font-semibold\">2026-03</TableCell>\n                    <TableCell className=\"text-right\">$1,842,500.00</TableCell>\n                    <TableCell className=\"text-success text-right font-medium\">$14,680,240.00</TableCell>\n                    <TableCell className=\"text-destructive text-right\">-$12,450.00</TableCell>\n                    <TableCell className=\"text-right\">3,842</TableCell>\n                  </TableRow>\n                  <TableRow className=\"font-mono text-xs\">\n                    <TableCell className=\"text-warning font-semibold\">2026-02</TableCell>\n                    <TableCell className=\"text-right\">$1,798,200.00</TableCell>\n                    <TableCell className=\"text-success text-right font-medium\">$14,350,100.00</TableCell>\n                    <TableCell className=\"text-destructive text-right\">-$14,100.00</TableCell>\n                    <TableCell className=\"text-right\">3,780</TableCell>\n                  </TableRow>\n                  <TableRow className=\"font-mono text-xs\">\n                    <TableCell className=\"text-warning font-semibold\">2026-01</TableCell>\n                    <TableCell className=\"text-right\">$1,720,000.00</TableCell>\n                    <TableCell className=\"text-success text-right font-medium\">$13,920,400.00</TableCell>\n                    <TableCell className=\"text-destructive text-right\">-$9,800.00</TableCell>\n                    <TableCell className=\"text-right\">3,712</TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* 3-Column Lineage Pipeline Map Section */}\n      <section className=\"border-border bg-card/40 space-y-4 rounded-xl border p-4 sm:p-5\">\n        <div className=\"border-border/80 flex flex-col gap-2 border-b pb-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"space-y-0.5\">\n            <div className=\"flex items-center gap-2\">\n              <Workflow className=\"text-primary size-4\" />\n              <h2 className=\"text-foreground text-sm font-semibold tracking-tight\">End-to-End Data Lineage Graph</h2>\n              <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                DAG Depth: 3 Tiers\n              </Badge>\n            </div>\n            <p className=\"text-muted-foreground text-xs\">\n              Interactive trace of upstream ingest sources, dbt intermediate transformations, and active downstream BI\n              consumers.\n            </p>\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <div className=\"border-border bg-background inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs\">\n              <span className=\"bg-success size-2 rounded-full\" />\n              <span className=\"text-muted-foreground\">Pipeline State:</span>\n              <span className=\"text-foreground font-medium\">All 3 Tiers Fresh</span>\n            </div>\n          </div>\n        </div>\n\n        {/* 3-Column Pipeline Map Grid */}\n        <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-3\">\n          {/* COLUMN 1: Source Tables (Left 1/3) */}\n          <div className=\"space-y-3\">\n            <div className=\"flex items-center justify-between px-1\">\n              <div className=\"flex items-center gap-1.5\">\n                <Database className=\"text-muted-foreground size-3.5\" />\n                <span className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                  1. Source Tables (3)\n                </span>\n              </div>\n              <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                Upstream Raw\n              </Badge>\n            </div>\n\n            <div className=\"space-y-2.5\">\n              {sourceNodes.map((source) => (\n                <div\n                  key={source.id}\n                  className={cn(\n                    'group relative cursor-pointer rounded-lg border p-3 text-xs shadow-xs transition-colors',\n                    selectedNodeId === source.id\n                      ? 'border-primary bg-primary/5 ring-primary/30 ring-1'\n                      : 'border-border bg-card hover:border-border/80 hover:bg-muted/40',\n                  )}\n                  onClick={() => setSelectedNodeId(source.id)}\n                >\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <div className=\"flex items-center gap-2\">\n                      <div className=\"bg-muted text-foreground border-border/60 flex size-7 shrink-0 items-center justify-center rounded-md border\">\n                        {source.iconName === 'CreditCard' ? (\n                          <CreditCard className=\"text-chart-1 size-3.5\" />\n                        ) : source.iconName === 'Users' ? (\n                          <Users className=\"text-info size-3.5\" />\n                        ) : (\n                          <Landmark className=\"text-warning size-3.5\" />\n                        )}\n                      </div>\n                      <div className=\"min-w-0\">\n                        <span className=\"text-foreground block truncate font-mono font-semibold\">{source.name}</span>\n                        <span className=\"text-muted-foreground text-xs\">{source.connector}</span>\n                      </div>\n                    </div>\n                    <Badge className=\"border-success/20 bg-success/10 text-success shrink-0 font-mono text-xs\">\n                      {source.status}\n                    </Badge>\n                  </div>\n\n                  <div className=\"border-border/50 text-muted-foreground mt-2.5 flex items-center justify-between border-t pt-2\">\n                    <span className=\"font-mono\">{source.rowCount}</span>\n                    <span className=\"flex items-center gap-1 font-mono\">\n                      <Clock className=\"size-3\" />\n                      {source.latency}\n                    </span>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* COLUMN 2: Transform Models (Center 1/3) */}\n          <div className=\"space-y-3\">\n            <div className=\"flex items-center justify-between px-1\">\n              <div className=\"flex items-center gap-1.5\">\n                <Layers className=\"text-muted-foreground size-3.5\" />\n                <span className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                  2. Transform Models (2)\n                </span>\n              </div>\n              <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                dbt Models\n              </Badge>\n            </div>\n\n            <div className=\"space-y-2.5\">\n              {transformNodes.map((transform) => (\n                <div\n                  key={transform.id}\n                  className={cn(\n                    'group relative cursor-pointer rounded-lg border p-3 text-xs shadow-xs transition-colors',\n                    selectedNodeId === transform.id\n                      ? 'border-primary bg-primary/5 ring-primary/30 ring-1'\n                      : 'border-border bg-card hover:border-border/80 hover:bg-muted/40',\n                  )}\n                  onClick={() => setSelectedNodeId(transform.id)}\n                >\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <div className=\"flex items-center gap-2\">\n                      <div className=\"bg-primary/10 text-primary border-primary/20 flex size-7 shrink-0 items-center justify-center rounded-md border\">\n                        {transform.iconName === 'Layers' ? (\n                          <Layers className=\"size-3.5\" />\n                        ) : (\n                          <Coins className=\"size-3.5\" />\n                        )}\n                      </div>\n                      <div className=\"min-w-0\">\n                        <span className=\"text-foreground block truncate font-mono font-semibold\">{transform.name}</span>\n                        <span className=\"text-muted-foreground text-xs\">{transform.modelType}</span>\n                      </div>\n                    </div>\n                    <Badge variant=\"secondary\" className=\"shrink-0 font-mono text-xs\">\n                      {transform.runtime}\n                    </Badge>\n                  </div>\n\n                  <div className=\"border-border/50 text-muted-foreground mt-2.5 flex items-center justify-between border-t pt-2\">\n                    <span className=\"text-success flex items-center gap-1 font-medium\">\n                      <CheckCircle2 className=\"size-3\" />\n                      {transform.testsPassed}\n                    </span>\n                    <span className=\"font-mono\">{transform.lastRun}</span>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* COLUMN 3: Downstream Consumers & Active Target (Right 1/3) */}\n          <div className=\"space-y-3\">\n            <div className=\"flex items-center justify-between px-1\">\n              <div className=\"flex items-center gap-1.5\">\n                <BarChart3 className=\"text-muted-foreground size-3.5\" />\n                <span className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                  3. Downstream & Target\n                </span>\n              </div>\n              <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                Marts & Consumers\n              </Badge>\n            </div>\n\n            <div className=\"space-y-2.5\">\n              {/* Active Target Node Highlight */}\n              <div\n                className={cn(\n                  'relative cursor-pointer rounded-lg border-2 p-3 text-xs shadow-xs transition-colors',\n                  selectedNodeId === 'target-table'\n                    ? 'border-primary bg-primary/10 ring-primary/20 ring-2'\n                    : 'border-primary/60 bg-primary/5 hover:border-primary',\n                )}\n                onClick={() => setSelectedNodeId('target-table')}\n              >\n                <div className=\"flex items-start justify-between gap-2\">\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"bg-primary text-primary-foreground flex size-7 shrink-0 items-center justify-center rounded-md\">\n                      <Table2 className=\"size-3.5\" />\n                    </div>\n                    <div className=\"min-w-0\">\n                      <div className=\"flex items-center gap-1.5\">\n                        <span className=\"text-foreground truncate font-mono font-bold\">fct_monthly_financials</span>\n                      </div>\n                      <span className=\"text-primary text-xs font-medium\">Active Catalog Target</span>\n                    </div>\n                  </div>\n                  <Badge className=\"bg-primary text-primary-foreground shrink-0 text-xs font-medium\">Current</Badge>\n                </div>\n              </div>\n\n              {/* Downstream Consumers */}\n              {consumerNodes.map((consumer) => (\n                <div\n                  key={consumer.id}\n                  className={cn(\n                    'group relative cursor-pointer rounded-lg border p-3 text-xs shadow-xs transition-colors',\n                    selectedNodeId === consumer.id\n                      ? 'border-primary bg-primary/5 ring-primary/30 ring-1'\n                      : 'border-border bg-card hover:border-border/80 hover:bg-muted/40',\n                  )}\n                  onClick={() => setSelectedNodeId(consumer.id)}\n                >\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <div className=\"flex items-center gap-2\">\n                      <div className=\"bg-muted text-foreground border-border/60 flex size-7 shrink-0 items-center justify-center rounded-md border\">\n                        {consumer.iconName === 'BarChart3' ? (\n                          <BarChart3 className=\"text-info size-3.5\" />\n                        ) : consumer.iconName === 'ArrowRightLeft' ? (\n                          <ArrowRightLeft className=\"text-chart-2 size-3.5\" />\n                        ) : (\n                          <LineChart className=\"text-success size-3.5\" />\n                        )}\n                      </div>\n                      <div className=\"min-w-0\">\n                        <span className=\"text-foreground block truncate font-medium\">{consumer.name}</span>\n                        <span className=\"text-muted-foreground text-xs\">\n                          {consumer.category} · {consumer.tool}\n                        </span>\n                      </div>\n                    </div>\n                    <Badge variant=\"secondary\" className=\"shrink-0 text-xs\">\n                      {consumer.status}\n                    </Badge>\n                  </div>\n\n                  <div className=\"border-border/50 text-muted-foreground mt-2.5 flex items-center justify-between border-t pt-2\">\n                    <span className=\"truncate\">{consumer.audience}</span>\n                    <span className=\"shrink-0 font-mono text-xs\">{consumer.frequency}</span>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n\n        {/* Interactive Node Inspector Drawer / Card */}\n        {selectedNodeDetails && (\n          <div className=\"border-border/80 bg-muted/40 rounded-lg border p-3.5 text-xs\">\n            <div className=\"border-border/60 flex flex-col gap-2 border-b pb-2 sm:flex-row sm:items-center sm:justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"text-foreground font-mono font-bold\">{selectedNodeDetails.title}</span>\n                <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                  {selectedNodeDetails.badge}\n                </Badge>\n              </div>\n              <span className=\"text-muted-foreground text-xs\">Node Inspector</span>\n            </div>\n            <p className=\"text-muted-foreground mt-2\">{selectedNodeDetails.description}</p>\n            <div className=\"mt-3 grid grid-cols-2 gap-2 sm:grid-cols-4\">\n              {selectedNodeDetails.metadata.map((item) => (\n                <div key={item.label} className=\"border-border/60 bg-card rounded-md border px-2.5 py-1.5\">\n                  <span className=\"text-muted-foreground block text-xs\">{item.label}:</span>\n                  <span className=\"text-foreground block truncate font-mono font-medium\">{item.value}</span>\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </section>\n\n      {/* Table Schema, Quality Tests & Governance Tabs */}\n      <Tabs value={activeTab} onValueChange={setActiveTab} defaultValue=\"schema\" className=\"w-full\">\n        <TabsList className=\"grid h-10 w-full grid-cols-2 p-1 sm:grid-cols-4\">\n          <TabsTrigger value=\"schema\" className=\"gap-1.5 text-xs\">\n            <Table2 className=\"size-3.5\" />\n            <span>Schema & Columns</span>\n            <span className=\"bg-muted rounded-full px-1.5 font-mono text-xs\">{columns.length}</span>\n          </TabsTrigger>\n\n          <TabsTrigger value=\"tests\" className=\"gap-1.5 text-xs\">\n            <ShieldCheck className=\"text-success size-3.5\" />\n            <span>Quality Tests</span>\n            <span className=\"bg-success/10 text-success rounded-full px-1.5 font-mono text-xs font-semibold\">6/6</span>\n          </TabsTrigger>\n\n          <TabsTrigger value=\"sql\" className=\"gap-1.5 text-xs\">\n            <FileCode2 className=\"size-3.5\" />\n            <span>dbt Model SQL</span>\n          </TabsTrigger>\n\n          <TabsTrigger value=\"governance\" className=\"gap-1.5 text-xs\">\n            <Activity className=\"size-3.5\" />\n            <span>SLA & Governance</span>\n          </TabsTrigger>\n        </TabsList>\n\n        {/* TAB 1: Schema & Column Definitions */}\n        <TabsContent value=\"schema\" className=\"mt-4 space-y-4\">\n          {/* Controls Bar */}\n          <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"relative w-full sm:w-72\">\n              <Search className=\"text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\" />\n              <Input\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                placeholder=\"Search columns, types, or terms...\"\n                className=\"h-8.5 pl-8 text-xs\"\n              />\n            </div>\n\n            <div className=\"flex items-center gap-2\">\n              <div className=\"text-muted-foreground text-xs\">\n                Showing <span className=\"text-foreground font-mono font-medium\">{filteredColumns.length}</span> of{' '}\n                {columns.length} columns\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"h-8.5 gap-1.5 text-xs\"\n                onClick={() => copyRef(columns.map((c) => c.name).join(', '))}\n              >\n                <Copy className=\"size-3.5\" />\n                <span>Copy Columns</span>\n              </Button>\n            </div>\n          </div>\n\n          {/* Columns Table Card */}\n          <Card className=\"border-border overflow-hidden border shadow-none\">\n            <Table>\n              <TableHeader>\n                <TableRow className=\"bg-muted/40 hover:bg-muted/40\">\n                  <TableHead className=\"text-xs font-semibold\">Column Name</TableHead>\n                  <TableHead className=\"text-xs font-semibold\">Data Type</TableHead>\n                  <TableHead className=\"text-xs font-semibold\">Nullability</TableHead>\n                  <TableHead className=\"text-xs font-semibold\">Key / Constraint</TableHead>\n                  <TableHead className=\"text-xs font-semibold\">Sample Value</TableHead>\n                  <TableHead className=\"text-xs font-semibold\">Description</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {filteredColumns.map((col) => (\n                  <TableRow key={col.name} className=\"text-xs\">\n                    <TableCell className=\"font-mono font-medium\">\n                      <div className=\"flex items-center gap-1.5\">\n                        {col.isPrimaryKey && <Key className=\"text-warning size-3.5 shrink-0\" />}\n                        <span className={cn(col.isPrimaryKey && 'text-warning font-bold')}>\n                          {{ name: col.name }.name}\n                        </span>\n                      </div>\n                    </TableCell>\n\n                    <TableCell>\n                      <Badge variant=\"secondary\" className=\"font-mono text-xs font-normal\">\n                        {col.type}\n                      </Badge>\n                    </TableCell>\n\n                    <TableCell>\n                      {!col.nullable ? (\n                        <Badge variant=\"outline\" className=\"text-muted-foreground font-mono text-xs font-normal\">\n                          NOT NULL\n                        </Badge>\n                      ) : (\n                        <span className=\"text-muted-foreground font-mono\">NULLABLE</span>\n                      )}\n                    </TableCell>\n\n                    <TableCell>\n                      <div className=\"flex flex-wrap items-center gap-1\">\n                        {col.isPrimaryKey ? (\n                          <Badge className=\"border-warning/30 bg-warning/15 text-warning text-xs font-semibold\">\n                            PRIMARY KEY\n                          </Badge>\n                        ) : col.constraints ? (\n                          <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                            {col.constraints}\n                          </Badge>\n                        ) : (\n                          <span className=\"text-muted-foreground\">—</span>\n                        )}\n                      </div>\n                    </TableCell>\n\n                    <TableCell className=\"text-muted-foreground font-mono\">{col.sampleValue}</TableCell>\n\n                    <TableCell className=\"text-muted-foreground max-w-sm\">{col.description}</TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </Card>\n\n          {/* Summary Stat Cards */}\n          <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n            <div className=\"border-border bg-card space-y-1 rounded-lg border p-3 text-xs\">\n              <span className=\"text-muted-foreground\">Total Schema Columns</span>\n              <span className=\"text-foreground block font-mono text-base font-bold\">5</span>\n              <span className=\"text-muted-foreground text-xs\">1 Primary Key, 4 Measures</span>\n            </div>\n\n            <div className=\"border-border bg-card space-y-1 rounded-lg border p-3 text-xs\">\n              <span className=\"text-muted-foreground\">Completeness Score</span>\n              <span className=\"text-success block font-mono text-base font-bold\">97.5%</span>\n              <span className=\"text-muted-foreground text-xs\">4/5 Non-Nullable fields</span>\n            </div>\n\n            <div className=\"border-border bg-card space-y-1 rounded-lg border p-3 text-xs\">\n              <span className=\"text-muted-foreground\">Table Storage Volume</span>\n              <span className=\"text-foreground block font-mono text-base font-bold\">48.6 MB</span>\n              <span className=\"text-muted-foreground text-xs\">Micro-partition compressed</span>\n            </div>\n\n            <div className=\"border-border bg-card space-y-1 rounded-lg border p-3 text-xs\">\n              <span className=\"text-muted-foreground\">Governance Tier</span>\n              <span className=\"text-primary block font-mono text-base font-bold\">Gold Tier 1</span>\n              <span className=\"text-muted-foreground text-xs\">Certified Financial Source</span>\n            </div>\n          </div>\n        </TabsContent>\n\n        {/* TAB 2: Data Quality Tests Card (6 Passing Assertions) */}\n        <TabsContent value=\"tests\" className=\"mt-4 space-y-4\">\n          {/* Quality Health Summary Card */}\n          <Card className=\"border-border bg-card overflow-hidden border shadow-none\">\n            <CardHeader className=\"border-border/80 border-b p-4 sm:p-5\">\n              <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n                <div className=\"space-y-1\">\n                  <div className=\"flex items-center gap-2\">\n                    <ShieldCheck className=\"text-success size-5\" />\n                    <CardTitle className=\"text-base font-semibold\">Data Quality & Integrity Assertions</CardTitle>\n                    <Badge className=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n                      100% Passing (6/6)\n                    </Badge>\n                  </div>\n                  <CardDescription className=\"text-xs\">\n                    Automated dbt-expectations, Monte Carlo ML anomaly detection, and referential integrity test suite.\n                  </CardDescription>\n                </div>\n\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"h-8.5 shrink-0 gap-1.5 self-start text-xs sm:self-auto\"\n                  disabled={isRunningTests}\n                  onClick={runSimulatedTests}\n                >\n                  <RefreshCw className={cn('size-3.5', isRunningTests && 'text-primary animate-spin')} />\n                  <span>{isRunningTests ? 'Running 6 Tests...' : 'Re-run Test Suite'}</span>\n                </Button>\n              </div>\n            </CardHeader>\n\n            <CardContent className=\"space-y-4 p-4 sm:p-5\">\n              {/* Filter Pills */}\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className={cn('h-7 text-xs', filterSeverity === 'all' && 'bg-muted font-semibold')}\n                  onClick={() => setFilterSeverity('all')}\n                >\n                  All Assertions (6)\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className={cn('h-7 text-xs', filterSeverity === 'critical' && 'bg-muted font-semibold')}\n                  onClick={() => setFilterSeverity('critical')}\n                >\n                  Primary Key & Referential (2)\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className={cn('h-7 text-xs', filterSeverity === 'schema' && 'bg-muted font-semibold')}\n                  onClick={() => setFilterSeverity('schema')}\n                >\n                  Format & Completeness (2)\n                </Button>\n              </div>\n\n              {/* Assertions List */}\n              <div className=\"space-y-2.5\">\n                {filteredQualityTests.map((assertion) => (\n                  <div\n                    key={assertion.id}\n                    className=\"border-border bg-muted/20 hover:bg-muted/40 rounded-lg border p-3.5 transition-colors\"\n                  >\n                    <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n                      <div className=\"flex items-start gap-2.5\">\n                        <div className=\"bg-success/15 text-success mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full\">\n                          <Check className=\"size-3.5\" />\n                        </div>\n                        <div className=\"space-y-1\">\n                          <div className=\"flex flex-wrap items-center gap-2\">\n                            <span className=\"text-foreground font-mono text-xs font-bold\">{assertion.name}</span>\n                            <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                              {assertion.type}\n                            </Badge>\n                            <span className=\"text-muted-foreground text-xs\">\n                              target: <code className=\"text-foreground font-mono\">{assertion.targetColumn}</code>\n                            </span>\n                          </div>\n                          <p className=\"text-muted-foreground text-xs\">{assertion.description}</p>\n                          <div className=\"text-muted-foreground bg-background/80 border-border/50 inline-block rounded border px-2 py-0.5 font-mono text-xs\">\n                            {assertion.ruleDefinition}\n                          </div>\n                        </div>\n                      </div>\n\n                      <div className=\"flex shrink-0 items-center gap-3 self-end text-xs sm:self-center\">\n                        <div className=\"text-right\">\n                          <span className=\"text-muted-foreground block text-xs\">Duration</span>\n                          <span className=\"text-foreground font-mono font-medium\">{assertion.executionTime}</span>\n                        </div>\n                        <Badge className=\"border-success/20 bg-success/10 text-success font-mono text-xs\">Passed</Badge>\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n        </TabsContent>\n\n        {/* TAB 3: Compiled SQL / dbt Model */}\n        <TabsContent value=\"sql\" className=\"mt-4\">\n          <div className=\"border-border bg-muted/40 overflow-hidden rounded-xl border\">\n            <div className=\"border-border bg-card flex items-center justify-between border-b px-4 py-2.5\">\n              <div className=\"flex items-center gap-2\">\n                <FileCode2 className=\"text-primary size-4\" />\n                <span className=\"text-foreground font-mono text-xs font-semibold\">\n                  models/marts/finance/fct_monthly_financials.sql\n                </span>\n                <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                  dbt v1.8 Incremental\n                </Badge>\n              </div>\n              <Button variant=\"ghost\" size=\"sm\" className=\"h-7 gap-1 text-xs\" onClick={copyCompiledSQL}>\n                {copiedQuery ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n                <span>{copiedQuery ? 'Copied Model' : 'Copy dbt Code'}</span>\n              </Button>\n            </div>\n\n            <div className=\"overflow-x-auto bg-neutral-950 p-4 font-mono text-xs leading-relaxed text-neutral-100 dark:bg-neutral-950\">\n              <pre className=\"whitespace-pre\">\n                <code>{`{{ config(\n    materialized='incremental',\n    unique_key='month_id',\n    schema='production_dw',\n    tags=['finance', 'tier_1_gold', 'executive_kpi']\n) }}\n\nWITH daily_rev AS (\n    SELECT * FROM {{ ref('int_daily_revenue') }}\n    {% if is_incremental() %}\n    WHERE event_date >= dateadd(day, -3, current_date)\n    {% endif %}\n),\n\nfx_rates AS (\n    SELECT * FROM {{ ref('int_fx_normalized_rates') }}\n),\n\nmonthly_aggregates AS (\n    SELECT\n        TO_CHAR(d.event_date, 'YYYY-MM') AS month_id,\n        SUM(d.gross_amount_usd) AS gross_revenue,\n        SUM(d.annualized_contract_val) AS net_arr,\n        SUM(CASE WHEN d.is_churned THEN d.mrr_impact ELSE 0 END) AS churned_mrr,\n        COUNT(DISTINCT d.customer_account_id) AS active_subscriptions\n    FROM daily_rev d\n    LEFT JOIN fx_rates fx ON d.currency = fx.currency AND d.event_date = fx.rate_date\n    GROUP BY 1\n)\n\nSELECT\n    month_id,\n    ROUND(gross_revenue, 2) AS gross_revenue,\n    ROUND(net_arr, 2) AS net_arr,\n    ROUND(churned_mrr, 2) AS churned_mrr,\n    active_subscriptions\nFROM monthly_aggregates\nORDER BY month_id DESC;`}</code>\n              </pre>\n            </div>\n          </div>\n        </TabsContent>\n\n        {/* TAB 4: SLA & Governance */}\n        <TabsContent value=\"governance\" className=\"mt-4 space-y-4\">\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n            {/* Ownership & Contacts */}\n            <Card className=\"border-border space-y-3 border p-4 shadow-none\">\n              <div className=\"border-border/80 flex items-center gap-2 border-b pb-2\">\n                <Users className=\"text-primary size-4\" />\n                <h3 className=\"text-foreground text-sm font-semibold\">Table Ownership & Escalation</h3>\n              </div>\n              <div className=\"space-y-2 text-xs\">\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-muted-foreground\">Owning Team:</span>\n                  <span className=\"text-foreground font-semibold\">Data Platform Squad</span>\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-muted-foreground\">Technical Lead:</span>\n                  <span className=\"text-foreground font-mono\">@sarah.lin (Principal Data Eng)</span>\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-muted-foreground\">Slack Channel:</span>\n                  <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                    #data-platform-alerts\n                  </Badge>\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-muted-foreground\">On-Call Rotation:</span>\n                  <span className=\"text-foreground\">PagerDuty · Tier 1 High Severity</span>\n                </div>\n              </div>\n            </Card>\n\n            {/* Freshness SLA Target */}\n            <Card className=\"border-border space-y-3 border p-4 shadow-none\">\n              <div className=\"border-border/80 flex items-center gap-2 border-b pb-2\">\n                <Clock className=\"text-success size-4\" />\n                <h3 className=\"text-foreground text-sm font-semibold\">Freshness SLA & Cadence</h3>\n              </div>\n              <div className=\"space-y-2 text-xs\">\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-muted-foreground\">Target SLA Threshold:</span>\n                  <span className=\"text-foreground font-mono font-medium\">&lt; 60 minutes</span>\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-muted-foreground\">Current Latency:</span>\n                  <span className=\"text-success font-mono font-bold\">18 minutes (Compliant)</span>\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-muted-foreground\">Cron Schedule:</span>\n                  <code className=\"text-foreground bg-muted rounded px-1.5 py-0.5 font-mono text-xs\">\n                    0 * * * * (Hourly)\n                  </code>\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-muted-foreground\">Historical Uptime:</span>\n                  <span className=\"text-foreground font-mono font-medium\">99.98% (Last 90 days)</span>\n                </div>\n              </div>\n            </Card>\n          </div>\n        </TabsContent>\n      </Tabs>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "~/components/blocks/DataCatalogLineage.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/input.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/table.json",
    "https://uipkge.dev/r/react/tabs.json"
  ],
  "description": "Alation and Monte Carlo style enterprise data catalog lineage map and table documentation explorer with interactive upstream source DAGs, dbt transform models, downstream BI consumer traces, schema column definitions with types and constraints, automated data quality assertions, and SQL console query runner.",
  "categories": [
    "devops",
    "app",
    "analytics",
    "data"
  ]
}