{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "reverse-etl-sync-manager", "title": "Reverse Etl Sync Manager", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/reverse-etl-sync-manager/ReverseEtlSyncManager.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n ArrowRight,\n ArrowRightLeft,\n CalendarClock,\n Check,\n CheckCircle2,\n ChevronRight,\n Clock,\n Copy,\n Database,\n Download,\n Filter,\n Key,\n Layers,\n Pencil,\n RefreshCw,\n Search,\n Server,\n ShieldCheck,\n Timer,\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'\n\nexport type SyncMode =\n | 'Upsert on Match Key'\n | 'Update if Newer'\n | 'Update only (Null overwrite off)'\n | 'Always Overwrite'\n\nexport interface FieldMapping {\n id: string\n sourceColumn: string\n sourceType: string\n sourceTable?: string\n destinationField: string\n destinationObject: string\n destinationType: string\n isMatchKey?: boolean\n syncMode: SyncMode\n transform: string\n sampleValue: string\n active: boolean\n}\n\nexport interface SyncRunRecord {\n id: string\n runNumber: string\n startedAt: string\n duration: string\n durationSec: number\n status: 'succeeded' | 'running' | 'failed' | 'warning'\n statusLabel: string\n totalRecords: number\n insertedRecords: number\n updatedRecords: number\n deletedRecords: number\n failedRecords: number\n warehouse: string\n queryId: string\n batchId: string\n syncTrigger: 'Scheduled Cron' | 'Manual Trigger' | 'dbt Cloud Webhook' | 'API Dispatch'\n errorSummary?: string\n}\n\nexport interface ReverseEtlMetrics {\n recordsSynced: number\n successRate: number\n duration: string\n warehouseName: string\n insertions: number\n updates: number\n deletions: number\n scheduleInterval: string\n nextRunIn: string\n}\n\nexport interface ReverseEtlSyncManagerProps {\n initialMappings?: FieldMapping[]\n initialRuns?: SyncRunRecord[]\n initialMetrics?: ReverseEtlMetrics\n className?: string\n}\n\nconst defaultMappings: FieldMapping[] = [\n {\n id: 'map-1',\n sourceColumn: 'customer_id',\n sourceType: 'VARCHAR(64) [PK]',\n sourceTable: 'analytics.dim_high_value_customers',\n destinationField: 'External_ID__c',\n destinationObject: 'Account',\n destinationType: 'Text(64) [Unique Match Key]',\n isMatchKey: true,\n syncMode: 'Upsert on Match Key',\n transform: 'Direct Map (Primary Key)',\n sampleValue: 'CUST_9918203',\n active: true,\n },\n {\n id: 'map-2',\n sourceColumn: 'calculated_arr',\n sourceType: 'NUMBER(14,2)',\n sourceTable: 'analytics.dim_high_value_customers',\n destinationField: 'AnnualRevenue',\n destinationObject: 'Account',\n destinationType: 'Currency(16,2)',\n isMatchKey: false,\n syncMode: 'Update if Newer',\n transform: 'Currency Cast (USD)',\n sampleValue: '$14,250.00',\n active: true,\n },\n {\n id: 'map-3',\n sourceColumn: 'last_login_at',\n sourceType: 'TIMESTAMP_TZ',\n sourceTable: 'analytics.dim_high_value_customers',\n destinationField: 'Last_Active_Date__c',\n destinationObject: 'Contact',\n destinationType: 'DateTime',\n isMatchKey: false,\n syncMode: 'Update only (Null overwrite off)',\n transform: 'ISO8601 Date Parse',\n sampleValue: '2026-08-21 14:30:00',\n active: true,\n },\n {\n id: 'map-4',\n sourceColumn: 'health_score',\n sourceType: 'INTEGER',\n sourceTable: 'analytics.dim_high_value_customers',\n destinationField: 'Health_Score__c',\n destinationObject: 'Account',\n destinationType: 'Number(3,0)',\n isMatchKey: false,\n syncMode: 'Update if Newer',\n transform: 'Score Normalizer (0-100)',\n sampleValue: '94.8 / 100',\n active: true,\n },\n {\n id: 'map-5',\n sourceColumn: 'plan_tier',\n sourceType: 'VARCHAR(50)',\n sourceTable: 'analytics.dim_high_value_customers',\n destinationField: 'Plan_Tier__c',\n destinationObject: 'Account',\n destinationType: 'Picklist',\n isMatchKey: false,\n syncMode: 'Upsert on Match Key',\n transform: 'Enum Mapping (3 Tiers)',\n sampleValue: 'Tier 1 Enterprise',\n active: true,\n },\n]\n\nconst defaultRuns: SyncRunRecord[] = [\n {\n id: 'run-8821',\n runNumber: '#SYNC-8821',\n startedAt: '2026-08-21T14:00:00Z',\n duration: '01m:12s',\n durationSec: 72,\n status: 'succeeded',\n statusLabel: 'Succeeded',\n totalRecords: 14290,\n insertedRecords: 428,\n updatedRecords: 13862,\n deletedRecords: 0,\n failedRecords: 0,\n warehouse: 'SNOWFLAKE_WH_XS',\n queryId: '01b64e9a-0001-2a81-0000-00049281a8b1',\n batchId: 'sf-bulk-batch-7718902',\n syncTrigger: 'Scheduled Cron',\n },\n {\n id: 'run-8820',\n runNumber: '#SYNC-8820',\n startedAt: '2026-08-21T13:00:00Z',\n duration: '00m:58s',\n durationSec: 58,\n status: 'succeeded',\n statusLabel: 'Succeeded',\n totalRecords: 3410,\n insertedRecords: 85,\n updatedRecords: 3325,\n deletedRecords: 0,\n failedRecords: 0,\n warehouse: 'SNOWFLAKE_WH_XS',\n queryId: '01b64e9a-0001-2a80-0000-00049279b904',\n batchId: 'sf-bulk-batch-7718819',\n syncTrigger: 'Scheduled Cron',\n },\n {\n id: 'run-8819',\n runNumber: '#SYNC-8819',\n startedAt: '2026-08-21T12:00:00Z',\n duration: '01m:45s',\n durationSec: 105,\n status: 'succeeded',\n statusLabel: 'Succeeded',\n totalRecords: 12850,\n insertedRecords: 310,\n updatedRecords: 12540,\n deletedRecords: 0,\n failedRecords: 0,\n warehouse: 'SNOWFLAKE_WH_XS',\n queryId: '01b64e9a-0001-2a7f-0000-00049265f128',\n batchId: 'sf-bulk-batch-7718744',\n syncTrigger: 'dbt Cloud Webhook',\n },\n {\n id: 'run-8818',\n runNumber: '#SYNC-8818',\n startedAt: '2026-08-21T11:00:00Z',\n duration: '00m:42s',\n durationSec: 42,\n status: 'succeeded',\n statusLabel: 'Succeeded',\n totalRecords: 980,\n insertedRecords: 12,\n updatedRecords: 968,\n deletedRecords: 0,\n failedRecords: 0,\n warehouse: 'SNOWFLAKE_WH_XS',\n queryId: '01b64e9a-0001-2a7e-0000-00049251cc90',\n batchId: 'sf-bulk-batch-7718690',\n syncTrigger: 'Scheduled Cron',\n },\n]\n\nconst defaultMetrics: ReverseEtlMetrics = {\n recordsSynced: 14290,\n successRate: 100,\n duration: '01m:12s',\n warehouseName: 'Snowflake SQL Warehouse',\n insertions: 428,\n updates: 13862,\n deletions: 0,\n scheduleInterval: 'Every 1 hour',\n nextRunIn: '48m',\n}\n\nfunction formatNumber(num: number): string {\n return new Intl.NumberFormat('en-US').format(num)\n}\n\nfunction formatTimestamp(iso: string): string {\n try {\n const d = new Date(iso)\n return d.toISOString().replace('T', ' ').replace('.000Z', ' UTC').replace('Z', ' UTC')\n } catch {\n return iso\n }\n}\n\nexport function ReverseEtlSyncManager({\n initialMappings,\n initialRuns,\n initialMetrics,\n className,\n}: ReverseEtlSyncManagerProps) {\n const [mappings] = React.useState(initialMappings ? [...initialMappings] : [...defaultMappings])\n const [runs, setRuns] = React.useState(initialRuns ? [...initialRuns] : [...defaultRuns])\n const [metrics] = React.useState(initialMetrics ? { ...initialMetrics } : { ...defaultMetrics })\n\n const [isSyncing, setIsSyncing] = React.useState(false)\n const [syncNotice, setSyncNotice] = React.useState(false)\n const [isEditingMappings, setIsEditingMappings] = React.useState(false)\n const [mappingSearch, setMappingSearch] = React.useState('')\n const [selectedModeFilter, setSelectedModeFilter] = React.useState('all')\n const [expandedRunIds, setExpandedRunIds] = React.useState>({\n 'run-8821': true,\n })\n const [copiedQueryId, setCopiedQueryId] = React.useState(null)\n const [copiedManifest, setCopiedManifest] = React.useState(false)\n\n const filteredMappings = React.useMemo(() => {\n return mappings.filter((m) => {\n const matchesSearch =\n mappingSearch.trim() === '' ||\n m.sourceColumn.toLowerCase().includes(mappingSearch.toLowerCase()) ||\n m.destinationField.toLowerCase().includes(mappingSearch.toLowerCase()) ||\n m.destinationObject.toLowerCase().includes(mappingSearch.toLowerCase()) ||\n m.syncMode.toLowerCase().includes(mappingSearch.toLowerCase()) ||\n m.sampleValue.toLowerCase().includes(mappingSearch.toLowerCase())\n\n const matchesMode =\n selectedModeFilter === 'all' ||\n (selectedModeFilter === 'upsert' && m.syncMode.includes('Upsert')) ||\n (selectedModeFilter === 'update_if_newer' && m.syncMode === 'Update if Newer') ||\n (selectedModeFilter === 'update_only' && m.syncMode.includes('Update only'))\n\n return matchesSearch && matchesMode\n })\n }, [mappings, mappingSearch, selectedModeFilter])\n\n function triggerManualSync() {\n if (isSyncing) return\n setIsSyncing(true)\n setSyncNotice(true)\n\n setTimeout(() => {\n setIsSyncing(false)\n const newRunId = `run-${Date.now()}`\n setRuns((prev) => [\n {\n id: newRunId,\n runNumber: `#SYNC-${8822 + (prev.length - 4)}`,\n startedAt: new Date().toISOString(),\n duration: '01m:08s',\n durationSec: 68,\n status: 'succeeded',\n statusLabel: 'Succeeded',\n totalRecords: 14290,\n insertedRecords: 428,\n updatedRecords: 13862,\n deletedRecords: 0,\n failedRecords: 0,\n warehouse: 'SNOWFLAKE_WH_XS',\n queryId: `01b64e9a-0001-${Math.floor(1000 + Math.random() * 9000)}-0000-${Math.floor(100000000000 + Math.random() * 900000000000).toString(16)}`,\n batchId: `sf-bulk-batch-${Math.floor(7718900 + Math.random() * 1000)}`,\n syncTrigger: 'Manual Trigger',\n },\n ...prev,\n ])\n setExpandedRunIds((prev) => ({ ...prev, [newRunId]: true }))\n }, 2200)\n\n setTimeout(() => {\n setSyncNotice(false)\n }, 6500)\n }\n\n function toggleEditMappings() {\n setIsEditingMappings((prev) => !prev)\n }\n\n function toggleRunExpand(id: string) {\n setExpandedRunIds((prev) => ({\n ...prev,\n [id]: !prev[id],\n }))\n }\n\n function copyQueryId(id: string, text: string) {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(text)\n setCopiedQueryId(id)\n setTimeout(() => {\n setCopiedQueryId((current) => (current === id ? null : current))\n }, 2000)\n }\n }\n\n function exportSyncManifest() {\n const manifestData = {\n syncName: 'Snowflake Gold Marts → Salesforce Accounts & Hubspot',\n source: 'Snowflake: analytics.dim_high_value_customers',\n destination: 'Salesforce CRM & HubSpot Marketing',\n exportTimestamp: new Date().toISOString(),\n metrics,\n fieldMappings: mappings,\n recentRuns: runs,\n }\n\n if (typeof document !== 'undefined') {\n const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(manifestData, null, 2))\n const downloadAnchor = document.createElement('a')\n downloadAnchor.setAttribute('href', dataStr)\n downloadAnchor.setAttribute(\n 'download',\n `reverse-etl-sync-manifest-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`,\n )\n document.body.appendChild(downloadAnchor)\n downloadAnchor.click()\n downloadAnchor.remove()\n setCopiedManifest(true)\n setTimeout(() => {\n setCopiedManifest(false)\n }, 2000)\n }\n }\n\n return (\n
\n {/* Top Header: Sync Pipeline Name, Source, Destination & Global Triggers */}\n
\n
\n
\n \n
\n
\n
\n

\n Snowflake Gold Marts → Salesforce Accounts & Hubspot\n

\n\n {/* Real-Time Sync Status Badge */}\n {isSyncing ? (\n
\n \n Syncing Warehouse Deltas...\n
\n ) : (\n
\n \n \n \n \n Sync Succeeded · {formatNumber(metrics.recordsSynced)} Records Updated\n
\n )}\n
\n\n {/* Source to Destination Breadcrumb */}\n
\n \n \n Snowflake:\n analytics.dim_high_value_customers\n \n \n \n \n Salesforce CRM & HubSpot Marketing\n \n \n
\n
\n
\n\n {/* Header Action Controls */}\n
\n \n \n {isEditingMappings ? 'Exit Mapping Mode' : 'Edit Field Mappings'}\n \n\n \n {copiedManifest ? (\n \n ) : (\n \n )}\n {copiedManifest ? 'Exported' : 'Export Audit JSON'}\n \n\n \n \n {isSyncing ? 'Dispatching Batch...' : 'Trigger Sync Now'}\n \n
\n
\n\n {/* Active Sync Notification Alert Banner */}\n {syncNotice && (\n
\n
\n \n
\n Manual Reverse ETL Sync Triggered:\n \n {' '}\n Executing incremental delta reconciliation on{' '}\n analytics.dim_high_value_customers via Snowflake\n Warehouse SNOWFLAKE_WH_XS.\n \n
\n
\n \n Salesforce Bulk API 2.0\n \n
\n )}\n\n {/* 4 Reverse ETL KPI Cards */}\n
\n {/* 1. Records Synced */}\n \n \n
\n Records Synced\n
\n \n
\n
\n
\n
\n \n {formatNumber(metrics.recordsSynced)}\n \n Records\n
\n
\n \n {metrics.successRate}% Success\n \n
\n
\n Failed Records\n 0 Errors\n
\n
\n \n \n\n {/* 2. Sync Duration */}\n \n \n
\n Sync Duration\n
\n \n
\n
\n
\n
\n \n {metrics.duration}\n \n runtime\n
\n
\n \n {metrics.warehouseName}\n \n
\n
\n Throughput\n 198 rows/sec\n
\n
\n \n \n\n {/* 3. Changes Detected */}\n \n \n
\n Changes Detected\n
\n \n
\n
\n
\n
\n \n {formatNumber(metrics.recordsSynced)}\n \n Total Deltas\n
\n
\n \n {metrics.insertions} Insertions\n \n \n {formatNumber(metrics.updates)} Updates\n \n \n {metrics.deletions} Deletions\n \n
\n {/* Segmented distribution progress bar */}\n
\n \n \n
\n
\n \n \n\n {/* 4. Next Scheduled Run */}\n \n \n
\n Next Scheduled Run\n
\n \n
\n
\n
\n
\n \n in {metrics.nextRunIn}\n \n remaining\n
\n
\n \n {metrics.scheduleInterval}\n \n
\n
\n Cron Expression\n 0 * * * *\n
\n
\n \n \n
\n\n {/* Field Mapping Configuration Table Card */}\n \n \n
\n
\n
\n \n Field Mapping Configuration ({mappings.length} Mappings Active)\n \n {isEditingMappings && (\n \n Editing Mode Active\n \n )}\n
\n \n Schema transformation matrix mapping Snowflake warehouse marts to Salesforce CRM object attributes and\n match keys\n \n
\n\n
\n \n Primary Match: Account: External_ID__c\n \n
\n
\n \n\n {/* Filter / Search Toolbar for Mappings */}\n
\n
\n
\n \n setMappingSearch(e.target.value)}\n placeholder=\"Search mappings...\"\n className=\"pl-9 text-xs\"\n />\n
\n\n
\n \n \n Mode:\n \n\n setSelectedModeFilter('all')}\n >\n All ({mappings.length})\n \n\n setSelectedModeFilter('upsert')}\n >\n Upsert Keys (2)\n \n\n setSelectedModeFilter('update_if_newer')}\n >\n Update if Newer (2)\n \n\n setSelectedModeFilter('update_only')}\n >\n Update Only (1)\n \n
\n
\n
\n\n \n
\n \n \n \n Source Column (Snowflake)\n \n Destination Field (Salesforce CRM)\n Data Type & Sync Mode\n Sample Sync Value\n Status\n \n \n \n {filteredMappings.map((mapping) => (\n \n {/* Source Column (Snowflake) */}\n \n
\n
\n \n {mapping.sourceColumn}\n \n {mapping.isMatchKey && (\n \n \n Match Key\n \n )}\n
\n
\n {mapping.sourceType}\n ·\n \n {mapping.transform}\n \n
\n
\n \n\n {/* Mapping Arrow (→) */}\n \n
\n \n
\n \n\n {/* Destination Field (Salesforce CRM) */}\n \n
\n
\n \n {mapping.destinationObject}\n \n \n {mapping.destinationField}\n \n
\n

\n Target Type: {mapping.destinationType}\n

\n
\n \n\n {/* Data Type & Sync Mode */}\n \n
\n \n {mapping.syncMode}\n \n

\n {mapping.isMatchKey ? 'Primary deduplication index' : 'Safe incremental sync'}\n

\n
\n \n\n {/* Sample Sync Value */}\n \n
\n
\n ›\n {mapping.sampleValue}\n
\n

Live sample preview

\n
\n \n\n {/* Status Badge / Toggle */}\n \n \n \n Active\n \n \n \n ))}\n \n
\n
\n \n \n\n {/* Sync Run History & Error Queue Table Card */}\n \n \n
\n
\n \n Sync Run History & Execution Log (Recent {runs.length} Runs)\n \n \n Audit trail of automated and manual reverse ETL execution runs, Snowflake query IDs, and Salesforce Bulk\n API ingestion\n \n
\n\n
\n
\n \n Error DLQ: 0 Failed Records\n
\n
\n
\n \n\n \n
\n {runs.map((run) => {\n const isExpanded = !!expandedRunIds[run.id]\n return (\n \n {/* Run Summary Header Row */}\n toggleRunExpand(run.id)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n toggleRunExpand(run.id)\n }\n }}\n >\n {/* Left Rail: Chevron, Run ID, Status, Timestamp & Trigger */}\n
\n \n \n \n\n
\n
\n {run.runNumber}\n\n \n \n {run.statusLabel}\n \n\n \n {formatTimestamp(run.startedAt)}\n \n\n \n {run.syncTrigger}\n \n
\n\n

\n Processed {formatNumber(run.totalRecords)} records ({formatNumber(run.insertedRecords)} added,{' '}\n {formatNumber(run.updatedRecords)} updated) · 0 failed\n

\n
\n
\n\n {/* Right Rail: Duration, Rows Affected, Warehouse */}\n
\n
\n \n Duration:\n {run.duration}\n
\n\n
\n {run.warehouse}\n
\n
\n
\n\n {/* Expanded Run Diagnostics Details */}\n {isExpanded && (\n
\n
\n
\n {/* Snowflake Query Identifier */}\n
\n
\n Snowflake Query ID\n copyQueryId(run.id, run.queryId)}\n >\n {copiedQueryId === run.id ? (\n \n ) : (\n \n )}\n {copiedQueryId === run.id ? 'Copied' : 'Copy'}\n \n
\n

{run.queryId}

\n

\n SQL compilation: 180ms · Warehousing tier: XS\n

\n
\n\n {/* Salesforce Bulk API Batch ID */}\n
\n
\n \n Salesforce Bulk Batch ID\n \n \n Bulk 2.0\n \n
\n

{run.batchId}

\n

\n Chunk size: 10,000 records/batch · HTTP 200 OK\n

\n
\n\n {/* Ingestion Breakdown */}\n
\n
\n Ingestion Breakdown\n 100% Ingested\n
\n
\n +{formatNumber(run.insertedRecords)} Ins\n ~{formatNumber(run.updatedRecords)} Upd\n {run.deletedRecords} Del\n
\n

Zero dead-letter quarantine items

\n
\n
\n
\n
\n )}\n
\n )\n })}\n \n \n\n {/* Bottom Engine & Sync Ingestion Protocol Telemetry Bar */}\n
\n
\n
\n \n Reverse ETL Engine:\n Census / Hightouch Protocol v4.2\n
\n\n \n\n
\n \n Source DW:\n Snowflake (AWS us-east-1)\n
\n\n \n\n
\n \n Target SaaS:\n Salesforce Bulk API 2.0 + HubSpot v3\n
\n
\n\n
\n \n Daily API Quota: 94,200 / 100,000 remaining\n
\n
\n \n \n )\n}\n\nexport default ReverseEtlSyncManager\n", "type": "registry:block", "target": "~/components/blocks/ReverseEtlSyncManager.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" ], "description": "Census and Hightouch style Reverse ETL sync manager and data activation pipeline for synchronizing Snowflake data warehouse marts to SaaS destinations (Salesforce CRM and HubSpot) with live telemetry cards, schema field mapping matrix, and sync run history log.", "categories": [ "devops", "app", "analytics", "data" ] }