62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:Tae82,'use client' import * as React from 'react' import { Activity, ArrowRight, ArrowRightLeft, CalendarClock, Check, CheckCircle2, ChevronRight, Clock, Copy, Database, Download, Filter, Key, Layers, Pencil, RefreshCw, Search, Server, ShieldCheck, Timer, } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Input } from '@/components/ui/input' import { Separator } from '@/components/ui/separator' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' export type SyncMode = 'Upsert on Match Key' | 'Update if Newer' | 'Update only (Null overwrite off)' | 'Always Overwrite' export interface FieldMapping { id: string sourceColumn: string sourceType: string sourceTable?: string destinationField: string destinationObject: string destinationType: string isMatchKey?: boolean syncMode: SyncMode transform: string sampleValue: string active: boolean } export interface SyncRunRecord { id: string runNumber: string startedAt: string duration: string durationSec: number status: 'succeeded' | 'running' | 'failed' | 'warning' statusLabel: string totalRecords: number insertedRecords: number updatedRecords: number deletedRecords: number failedRecords: number warehouse: string queryId: string batchId: string syncTrigger: 'Scheduled Cron' | 'Manual Trigger' | 'dbt Cloud Webhook' | 'API Dispatch' errorSummary?: string } export interface ReverseEtlMetrics { recordsSynced: number successRate: number duration: string warehouseName: string insertions: number updates: number deletions: number scheduleInterval: string nextRunIn: string } export interface ReverseEtlSyncManagerProps { initialMappings?: FieldMapping[] initialRuns?: SyncRunRecord[] initialMetrics?: ReverseEtlMetrics className?: string } const defaultMappings: FieldMapping[] = [ { id: 'map-1', sourceColumn: 'customer_id', sourceType: 'VARCHAR(64) [PK]', sourceTable: 'analytics.dim_high_value_customers', destinationField: 'External_ID__c', destinationObject: 'Account', destinationType: 'Text(64) [Unique Match Key]', isMatchKey: true, syncMode: 'Upsert on Match Key', transform: 'Direct Map (Primary Key)', sampleValue: 'CUST_9918203', active: true, }, { id: 'map-2', sourceColumn: 'calculated_arr', sourceType: 'NUMBER(14,2)', sourceTable: 'analytics.dim_high_value_customers', destinationField: 'AnnualRevenue', destinationObject: 'Account', destinationType: 'Currency(16,2)', isMatchKey: false, syncMode: 'Update if Newer', transform: 'Currency Cast (USD)', sampleValue: '$14,250.00', active: true, }, { id: 'map-3', sourceColumn: 'last_login_at', sourceType: 'TIMESTAMP_TZ', sourceTable: 'analytics.dim_high_value_customers', destinationField: 'Last_Active_Date__c', destinationObject: 'Contact', destinationType: 'DateTime', isMatchKey: false, syncMode: 'Update only (Null overwrite off)', transform: 'ISO8601 Date Parse', sampleValue: '2026-08-21 14:30:00', active: true, }, { id: 'map-4', sourceColumn: 'health_score', sourceType: 'INTEGER', sourceTable: 'analytics.dim_high_value_customers', destinationField: 'Health_Score__c', destinationObject: 'Account', destinationType: 'Number(3,0)', isMatchKey: false, syncMode: 'Update if Newer', transform: 'Score Normalizer (0-100)', sampleValue: '94.8 / 100', active: true, }, { id: 'map-5', sourceColumn: 'plan_tier', sourceType: 'VARCHAR(50)', sourceTable: 'analytics.dim_high_value_customers', destinationField: 'Plan_Tier__c', destinationObject: 'Account', destinationType: 'Picklist', isMatchKey: false, syncMode: 'Upsert on Match Key', transform: 'Enum Mapping (3 Tiers)', sampleValue: 'Tier 1 Enterprise', active: true, }, ] const defaultRuns: SyncRunRecord[] = [ { id: 'run-8821', runNumber: '#SYNC-8821', startedAt: '2026-08-21T14:00:00Z', duration: '01m:12s', durationSec: 72, status: 'succeeded', statusLabel: 'Succeeded', totalRecords: 14290, insertedRecords: 428, updatedRecords: 13862, deletedRecords: 0, failedRecords: 0, warehouse: 'SNOWFLAKE_WH_XS', queryId: '01b64e9a-0001-2a81-0000-00049281a8b1', batchId: 'sf-bulk-batch-7718902', syncTrigger: 'Scheduled Cron', }, { id: 'run-8820', runNumber: '#SYNC-8820', startedAt: '2026-08-21T13:00:00Z', duration: '00m:58s', durationSec: 58, status: 'succeeded', statusLabel: 'Succeeded', totalRecords: 3410, insertedRecords: 85, updatedRecords: 3325, deletedRecords: 0, failedRecords: 0, warehouse: 'SNOWFLAKE_WH_XS', queryId: '01b64e9a-0001-2a80-0000-00049279b904', batchId: 'sf-bulk-batch-7718819', syncTrigger: 'Scheduled Cron', }, { id: 'run-8819', runNumber: '#SYNC-8819', startedAt: '2026-08-21T12:00:00Z', duration: '01m:45s', durationSec: 105, status: 'succeeded', statusLabel: 'Succeeded', totalRecords: 12850, insertedRecords: 310, updatedRecords: 12540, deletedRecords: 0, failedRecords: 0, warehouse: 'SNOWFLAKE_WH_XS', queryId: '01b64e9a-0001-2a7f-0000-00049265f128', batchId: 'sf-bulk-batch-7718744', syncTrigger: 'dbt Cloud Webhook', }, { id: 'run-8818', runNumber: '#SYNC-8818', startedAt: '2026-08-21T11:00:00Z', duration: '00m:42s', durationSec: 42, status: 'succeeded', statusLabel: 'Succeeded', totalRecords: 980, insertedRecords: 12, updatedRecords: 968, deletedRecords: 0, failedRecords: 0, warehouse: 'SNOWFLAKE_WH_XS', queryId: '01b64e9a-0001-2a7e-0000-00049251cc90', batchId: 'sf-bulk-batch-7718690', syncTrigger: 'Scheduled Cron', }, ] const defaultMetrics: ReverseEtlMetrics = { recordsSynced: 14290, successRate: 100, duration: '01m:12s', warehouseName: 'Snowflake SQL Warehouse', insertions: 428, updates: 13862, deletions: 0, scheduleInterval: 'Every 1 hour', nextRunIn: '48m', } function formatNumber(num: number): string { return new Intl.NumberFormat('en-US').format(num) } function formatTimestamp(iso: string): string { try { const d = new Date(iso) return d.toISOString().replace('T', ' ').replace('.000Z', ' UTC').replace('Z', ' UTC') } catch { return iso } } export function ReverseEtlSyncManager({ initialMappings, initialRuns, initialMetrics, className, }: ReverseEtlSyncManagerProps) { const [mappings] = React.useState(initialMappings ? [...initialMappings] : [...defaultMappings]) const [runs, setRuns] = React.useState(initialRuns ? [...initialRuns] : [...defaultRuns]) const [metrics] = React.useState(initialMetrics ? { ...initialMetrics } : { ...defaultMetrics }) const [isSyncing, setIsSyncing] = React.useState(false) const [syncNotice, setSyncNotice] = React.useState(false) const [isEditingMappings, setIsEditingMappings] = React.useState(false) const [mappingSearch, setMappingSearch] = React.useState('') const [selectedModeFilter, setSelectedModeFilter] = React.useState('all') const [expandedRunIds, setExpandedRunIds] = React.useState>({ 'run-8821': true, }) const [copiedQueryId, setCopiedQueryId] = React.useState(null) const [copiedManifest, setCopiedManifest] = React.useState(false) const filteredMappings = React.useMemo(() => { return mappings.filter((m) => { const matchesSearch = mappingSearch.trim() === '' || m.sourceColumn.toLowerCase().includes(mappingSearch.toLowerCase()) || m.destinationField.toLowerCase().includes(mappingSearch.toLowerCase()) || m.destinationObject.toLowerCase().includes(mappingSearch.toLowerCase()) || m.syncMode.toLowerCase().includes(mappingSearch.toLowerCase()) || m.sampleValue.toLowerCase().includes(mappingSearch.toLowerCase()) const matchesMode = selectedModeFilter === 'all' || (selectedModeFilter === 'upsert' && m.syncMode.includes('Upsert')) || (selectedModeFilter === 'update_if_newer' && m.syncMode === 'Update if Newer') || (selectedModeFilter === 'update_only' && m.syncMode.includes('Update only')) return matchesSearch && matchesMode }) }, [mappings, mappingSearch, selectedModeFilter]) function triggerManualSync() { if (isSyncing) return setIsSyncing(true) setSyncNotice(true) setTimeout(() => { setIsSyncing(false) const newRunId = `run-${Date.now()}` setRuns((prev) => [ { id: newRunId, runNumber: `#SYNC-${8822 + (prev.length - 4)}`, startedAt: new Date().toISOString(), duration: '01m:08s', durationSec: 68, status: 'succeeded', statusLabel: 'Succeeded', totalRecords: 14290, insertedRecords: 428, updatedRecords: 13862, deletedRecords: 0, failedRecords: 0, warehouse: 'SNOWFLAKE_WH_XS', queryId: `01b64e9a-0001-${Math.floor(1000 + Math.random() * 9000)}-0000-${Math.floor(100000000000 + Math.random() * 900000000000).toString(16)}`, batchId: `sf-bulk-batch-${Math.floor(7718900 + Math.random() * 1000)}`, syncTrigger: 'Manual Trigger', }, ...prev, ]) setExpandedRunIds((prev) => ({ ...prev, [newRunId]: true })) }, 2200) setTimeout(() => { setSyncNotice(false) }, 6500) } function toggleEditMappings() { setIsEditingMappings((prev) => !prev) } function toggleRunExpand(id: string) { setExpandedRunIds((prev) => ({ ...prev, [id]: !prev[id], })) } function copyQueryId(id: string, text: string) { if (typeof navigator !== 'undefined' && navigator.clipboard) { navigator.clipboard.writeText(text) setCopiedQueryId(id) setTimeout(() => { setCopiedQueryId((current) => (current === id ? null : current)) }, 2000) } } function exportSyncManifest() { const manifestData = { syncName: 'Snowflake Gold Marts → Salesforce Accounts & Hubspot', source: 'Snowflake: analytics.dim_high_value_customers', destination: 'Salesforce CRM & HubSpot Marketing', exportTimestamp: new Date().toISOString(), metrics, fieldMappings: mappings, recentRuns: runs, } if (typeof document !== 'undefined') { const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(manifestData, null, 2)) const downloadAnchor = document.createElement('a') downloadAnchor.setAttribute('href', dataStr) downloadAnchor.setAttribute( 'download', `reverse-etl-sync-manifest-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`, ) document.body.appendChild(downloadAnchor) downloadAnchor.click() downloadAnchor.remove() setCopiedManifest(true) setTimeout(() => { setCopiedManifest(false) }, 2000) } } return (

{/* Top Header: Sync Pipeline Name, Source, Destination & Global Triggers */}

Snowflake Gold Marts → Salesforce Accounts & Hubspot

{/* Real-Time Sync Status Badge */} {isSyncing ? (

) : (

Sync Succeeded · {formatNumber(metrics.recordsSynced)} Records Updated

)}

{/* Source to Destination Breadcrumb */}

Snowflake: analytics.dim_high_value_customers

{/* Header Action Controls */}

{/* Active Sync Notification Alert Banner */} {syncNotice && (

Salesforce Bulk API 2.0

)} {/* 4 Reverse ETL KPI Cards */}

{/* 1. Records Synced */}

Records Synced

{formatNumber(metrics.recordsSynced)} Records

{metrics.successRate}% Success

Failed Records 0 Errors

{/* 2. Sync Duration */}

Sync Duration

{metrics.duration} runtime

{metrics.warehouseName}

Throughput 198 rows/sec

{/* 3. Changes Detected */}

Changes Detected

{formatNumber(metrics.recordsSynced)} Total Deltas

{metrics.insertions} Insertions {formatNumber(metrics.updates)} Updates {metrics.deletions} Deletions

{/* Segmented distribution progress bar */}

{/* 4. Next Scheduled Run */}

Next Scheduled Run

in {metrics.nextRunIn} remaining

{metrics.scheduleInterval}

Cron Expression 0 * * * *

{/* Field Mapping Configuration Table Card */}

Field Mapping Configuration ({mappings.length} Mappings Active) {isEditingMappings && ( Editing Mode Active )}

Schema transformation matrix mapping Snowflake warehouse marts to Salesforce CRM object attributes and match keys

Primary Match: Account: External_ID__c

{/* Filter / Search Toolbar for Mappings */}

Source Column (Snowflake) Destination Field (Salesforce CRM) Data Type & Sync Mode Sample Sync Value Status {filteredMappings.map((mapping) => ( {/* Source Column (Snowflake) */}

{mapping.sourceColumn} {mapping.isMatchKey && ( )}

{mapping.sourceType} · {mapping.transform}

{/* Mapping Arrow (→) */}

{/* Destination Field (Salesforce CRM) */}

{mapping.destinationObject} {mapping.destinationField}

Target Type: {mapping.destinationType}

{/* Data Type & Sync Mode */}

{mapping.syncMode}

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

{/* Sample Sync Value */}

› {mapping.sampleValue}

Live sample preview

{/* Status Badge / Toggle */} Active ))}

{/* Sync Run History & Error Queue Table Card */}

Sync Run History & Execution Log (Recent {runs.length} Runs) Audit trail of automated and manual reverse ETL execution runs, Snowflake query IDs, and Salesforce Bulk API ingestion

{runs.map((run) => { const isExpanded = !!expandedRunIds[run.id] return (

{/* Run Summary Header Row */}

toggleRunExpand(run.id)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault() toggleRunExpand(run.id) } }} > {/* Left Rail: Chevron, Run ID, Status, Timestamp & Trigger */}

{run.runNumber} {run.statusLabel} {formatTimestamp(run.startedAt)} {run.syncTrigger}

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

{/* Right Rail: Duration, Rows Affected, Warehouse */}

{run.warehouse}

{/* Expanded Run Diagnostics Details */} {isExpanded && (

{/* Snowflake Query Identifier */}

Snowflake Query ID

{run.queryId}

SQL compilation: 180ms · Warehousing tier: XS

{/* Salesforce Bulk API Batch ID */}

Salesforce Bulk Batch ID Bulk 2.0

{run.batchId}

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

{/* Ingestion Breakdown */}

Ingestion Breakdown 100% Ingested

+{formatNumber(run.insertedRecords)} Ins ~{formatNumber(run.updatedRecords)} Upd {run.deletedRecords} Del

Zero dead-letter quarantine items

)}

) })}

{/* Bottom Engine & Sync Ingestion Protocol Telemetry Bar */}

Daily API Quota: 94,200 / 100,000 remaining

) } export default ReverseEtlSyncManager 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","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"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/reverse-etl-sync-manager/ReverseEtlSyncManager.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/ReverseEtlSyncManager.tsx"}],"className":"h-[70svh] min-h-80"}]]}]