function MainComponent() { const [activeTab, setActiveTab] = React.useState('overview'); const [showAddSource, setShowAddSource] = React.useState(false); const [showAddTopic, setShowAddTopic] = React.useState(false); const [showProducerConfig, setShowProducerConfig] = React.useState(false); const [dataSources, setDataSources] = React.useState([ { id: 1, name: 'Customer Database', type: 'PostgreSQL', status: 'connected', lastSync: '2 min ago', recordsIngested: '1.2M', throughput: '450/sec', topic: 'customer-events' }, { id: 2, name: 'IoT Sensors', type: 'MQTT', status: 'connected', lastSync: '1 min ago', recordsIngested: '5.8M', throughput: '2.1K/sec', topic: 'sensor-data' }, { id: 3, name: 'Web Analytics', type: 'REST API', status: 'warning', lastSync: '15 min ago', recordsIngested: '890K', throughput: '120/sec', topic: 'web-events' }, { id: 4, name: 'Log Files', type: 'File System', status: 'connected', lastSync: '30 sec ago', recordsIngested: '3.4M', throughput: '800/sec', topic: 'application-logs' } ]); const [kafkaTopics, setKafkaTopics] = React.useState([ { name: 'customer-events', partitions: 12, replicas: 3, retention: '7 days', size: '2.4GB', messagesPerSec: '450', consumers: 3 }, { name: 'sensor-data', partitions: 24, replicas: 3, retention: '30 days', size: '15.2GB', messagesPerSec: '2.1K', consumers: 5 }, { name: 'web-events', partitions: 8, replicas: 2, retention: '3 days', size: '890MB', messagesPerSec: '120', consumers: 2 }, { name: 'application-logs', partitions: 16, replicas: 3, retention: '14 days', size: '8.7GB', messagesPerSec: '800', consumers: 4 } ]); const [schemas, setSchemas] = React.useState([ { id: 1, name: 'customer-schema', version: '1.2', topic: 'customer-events', format: 'Avro', fields: 8, lastUpdated: '2 days ago' }, { id: 2, name: 'sensor-schema', version: '2.1', topic: 'sensor-data', format: 'JSON', fields: 12, lastUpdated: '1 week ago' }, { id: 3, name: 'web-events-schema', version: '1.0', topic: 'web-events', format: 'Avro', fields: 15, lastUpdated: '3 days ago' } ]); const [producers, setProducers] = React.useState([ { id: 'prod-001', name: 'Customer DB Producer', topic: 'customer-events', status: 'running', throughput: '450 msg/sec', errors: 0, lastMessage: '5 sec ago' }, { id: 'prod-002', name: 'IoT Sensor Producer', topic: 'sensor-data', status: 'running', throughput: '2.1K msg/sec', errors: 2, lastMessage: '1 sec ago' }, { id: 'prod-003', name: 'Web Analytics Producer', topic: 'web-events', status: 'warning', throughput: '120 msg/sec', errors: 15, lastMessage: '2 min ago' } ]); const [newDataSource, setNewDataSource] = React.useState({ name: '', type: 'PostgreSQL', connectionString: '', topic: '', batchSize: '1000', pollInterval: '5000' }); const [newTopic, setNewTopic] = React.useState({ name: '', partitions: '12', replicas: '3', retention: '7', retentionUnit: 'days' }); const [producerConfig, setProducerConfig] = React.useState({ batchSize: '16384', lingerMs: '5', compressionType: 'snappy', acks: 'all', retries: '3', maxInFlightRequests: '5' }); const getStatusColor = (status)=>{ switch(status){ case 'connected': case 'running': return 'text-green-600 bg-green-100'; case 'warning': return 'text-yellow-600 bg-yellow-100'; case 'error': case 'disconnected': return 'text-red-600 bg-red-100'; default: return 'text-gray-600 bg-gray-100'; } }; const getStatusIcon = (status)=>{ switch(status){ case 'connected': case 'running': return 'fa-check-circle'; case 'warning': return 'fa-exclamation-triangle'; case 'error': case 'disconnected': return 'fa-times-circle'; default: return 'fa-question-circle'; } }; const handleAddDataSource = (e)=>{ e.preventDefault(); const newSource = { id: dataSources.length + 1, ...newDataSource, status: 'connected', lastSync: 'Just now', recordsIngested: '0', throughput: '0/sec' }; setDataSources([ ...dataSources, newSource ]); setNewDataSource({ name: '', type: 'PostgreSQL', connectionString: '', topic: '', batchSize: '1000', pollInterval: '5000' }); setShowAddSource(false); }; const handleAddTopic = (e)=>{ e.preventDefault(); const topic = { name: newTopic.name, partitions: parseInt(newTopic.partitions), replicas: parseInt(newTopic.replicas), retention: `${newTopic.retention} ${newTopic.retentionUnit}`, size: '0MB', messagesPerSec: '0', consumers: 0 }; setKafkaTopics([ ...kafkaTopics, topic ]); setNewTopic({ name: '', partitions: '12', replicas: '3', retention: '7', retentionUnit: 'days' }); setShowAddTopic(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 250, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-sm border-b", __source: { fileName: "", lineNumber: 251, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 252, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-6", __source: { fileName: "", lineNumber: 253, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 256, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-blue-600 hover:text-blue-800", __source: { fileName: "", lineNumber: 257, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left", __source: { fileName: "", lineNumber: 258, columnNumber: 21 }, __self: this }), " Back to Dashboard")), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900 mt-2", __source: { fileName: "", lineNumber: 261, columnNumber: 17 }, __self: this }, "Data Ingestion"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-600 mt-1", __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, "Manage data sources, Kafka topics, and ingestion pipelines")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "", lineNumber: 268, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowAddSource(true), className: "bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 269, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this }), "Add Data Source"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowAddTopic(true), className: "bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors", __source: { fileName: "", lineNumber: 275, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 279, columnNumber: 19 }, __self: this }), "Create Topic"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowProducerConfig(true), className: "bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog mr-2", __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }), "Producer Config")))))), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8", __source: { fileName: "", lineNumber: 293, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 294, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-8", __source: { fileName: "", lineNumber: 295, columnNumber: 11 }, __self: this }, [ { id: 'overview', name: 'Overview', icon: 'fa-chart-line' }, { id: 'sources', name: 'Data Sources', icon: 'fa-database' }, { id: 'topics', name: 'Kafka Topics', icon: 'fa-stream' }, { id: 'schemas', name: 'Schema Registry', icon: 'fa-code' }, { id: 'producers', name: 'Producers', icon: 'fa-paper-plane' }, { id: 'monitoring', name: 'Monitoring', icon: 'fa-chart-bar' } ].map((tab)=>/*#__PURE__*/ React.createElement("button", { key: tab.id, onClick: ()=>setActiveTab(tab.id), className: `flex items-center px-3 py-2 text-sm font-medium rounded-md ${activeTab === tab.id ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:text-gray-700'}`, __source: { fileName: "", lineNumber: 304, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${tab.icon} mr-2`, __source: { fileName: "", lineNumber: 313, columnNumber: 17 }, __self: this }), tab.name)))), activeTab === 'overview' && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 321, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 322, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 323, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 324, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-blue-100 rounded-lg", __source: { fileName: "", lineNumber: 325, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-database text-blue-600 text-xl", __source: { fileName: "", lineNumber: 326, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 328, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-600", __source: { fileName: "", lineNumber: 329, columnNumber: 21 }, __self: this }, "Active Sources"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 330, columnNumber: 21 }, __self: this }, dataSources.length)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 335, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 336, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-green-100 rounded-lg", __source: { fileName: "", lineNumber: 337, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stream text-green-600 text-xl", __source: { fileName: "", lineNumber: 338, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 340, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-600", __source: { fileName: "", lineNumber: 341, columnNumber: 21 }, __self: this }, "Kafka Topics"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 342, columnNumber: 21 }, __self: this }, kafkaTopics.length)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 348, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-purple-100 rounded-lg", __source: { fileName: "", lineNumber: 349, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tachometer-alt text-purple-600 text-xl", __source: { fileName: "", lineNumber: 350, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 352, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-600", __source: { fileName: "", lineNumber: 353, columnNumber: 21 }, __self: this }, "Total Throughput"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 354, columnNumber: 21 }, __self: this }, "3.47K/sec")))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 359, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 360, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-yellow-100 rounded-lg", __source: { fileName: "", lineNumber: 361, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle text-yellow-600 text-xl", __source: { fileName: "", lineNumber: 362, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 364, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-600", __source: { fileName: "", lineNumber: 365, columnNumber: 21 }, __self: this }, "Alerts"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 366, columnNumber: 21 }, __self: this }, "2"))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 372, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 373, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 374, columnNumber: 17 }, __self: this }, "Recent Activity"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 375, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between py-2 border-b border-gray-100", __source: { fileName: "", lineNumber: 376, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 377, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 rounded-full bg-green-500 mr-3", __source: { fileName: "", lineNumber: 378, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-900", __source: { fileName: "", lineNumber: 379, columnNumber: 23 }, __self: this }, "Customer DB connected successfully")), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 381, columnNumber: 21 }, __self: this }, "2 min ago")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between py-2 border-b border-gray-100", __source: { fileName: "", lineNumber: 383, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 384, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 rounded-full bg-yellow-500 mr-3", __source: { fileName: "", lineNumber: 385, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-900", __source: { fileName: "", lineNumber: 386, columnNumber: 23 }, __self: this }, "Web Analytics producer warning")), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 388, columnNumber: 21 }, __self: this }, "5 min ago")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between py-2 border-b border-gray-100", __source: { fileName: "", lineNumber: 390, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 391, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 rounded-full bg-blue-500 mr-3", __source: { fileName: "", lineNumber: 392, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-900", __source: { fileName: "", lineNumber: 393, columnNumber: 23 }, __self: this }, "New topic 'sensor-data' created")), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 395, columnNumber: 21 }, __self: this }, "1 hour ago")))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 400, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 401, columnNumber: 17 }, __self: this }, "System Health"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 402, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 403, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 404, columnNumber: 21 }, __self: this }, "Kafka Cluster"), /*#__PURE__*/ React.createElement("span", { className: "px-2 py-1 rounded-full text-xs font-medium text-green-600 bg-green-100", __source: { fileName: "", lineNumber: 405, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mr-1", __source: { fileName: "", lineNumber: 406, columnNumber: 23 }, __self: this }), "Healthy")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 409, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 410, columnNumber: 21 }, __self: this }, "Schema Registry"), /*#__PURE__*/ React.createElement("span", { className: "px-2 py-1 rounded-full text-xs font-medium text-green-600 bg-green-100", __source: { fileName: "", lineNumber: 411, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mr-1", __source: { fileName: "", lineNumber: 412, columnNumber: 23 }, __self: this }), "Healthy")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 415, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 416, columnNumber: 21 }, __self: this }, "Connect Cluster"), /*#__PURE__*/ React.createElement("span", { className: "px-2 py-1 rounded-full text-xs font-medium text-yellow-600 bg-yellow-100", __source: { fileName: "", lineNumber: 417, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle mr-1", __source: { fileName: "", lineNumber: 418, columnNumber: 23 }, __self: this }), "Warning")))))), activeTab === 'sources' && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 428, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-6", __source: { fileName: "", lineNumber: 429, columnNumber: 13 }, __self: this }, dataSources.map((source)=>/*#__PURE__*/ React.createElement("div", { key: source.id, className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 431, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 432, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 433, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900", __source: { fileName: "", lineNumber: 434, columnNumber: 23 }, __self: this }, source.name), /*#__PURE__*/ React.createElement("span", { className: "ml-3 px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700", __source: { fileName: "", lineNumber: 435, columnNumber: 23 }, __self: this }, source.type), /*#__PURE__*/ React.createElement("span", { className: `ml-2 px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(source.status)}`, __source: { fileName: "", lineNumber: 438, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${getStatusIcon(source.status)} mr-1`, __source: { fileName: "", lineNumber: 439, columnNumber: 25 }, __self: this }), source.status)), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 443, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors", __source: { fileName: "", lineNumber: 444, columnNumber: 23 }, __self: this }, "Configure"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 447, columnNumber: 23 }, __self: this }, "Test Connection"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-4", __source: { fileName: "", lineNumber: 453, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 454, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 455, columnNumber: 23 }, __self: this }, "Topic"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 456, columnNumber: 23 }, __self: this }, source.topic)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 458, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 459, columnNumber: 23 }, __self: this }, "Last Sync"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 460, columnNumber: 23 }, __self: this }, source.lastSync)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 462, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 463, columnNumber: 23 }, __self: this }, "Records Ingested"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 464, columnNumber: 23 }, __self: this }, source.recordsIngested)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 466, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 467, columnNumber: 23 }, __self: this }, "Throughput"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 468, columnNumber: 23 }, __self: this }, source.throughput)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 470, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 471, columnNumber: 23 }, __self: this }, "Actions"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1", __source: { fileName: "", lineNumber: 472, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-600 hover:text-blue-800", __source: { fileName: "", lineNumber: 473, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play", __source: { fileName: "", lineNumber: 474, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-yellow-600 hover:text-yellow-800", __source: { fileName: "", lineNumber: 476, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pause", __source: { fileName: "", lineNumber: 477, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-red-600 hover:text-red-800", __source: { fileName: "", lineNumber: 479, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stop", __source: { fileName: "", lineNumber: 480, columnNumber: 27 }, __self: this }))))))))), activeTab === 'topics' && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 492, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-6", __source: { fileName: "", lineNumber: 493, columnNumber: 13 }, __self: this }, kafkaTopics.map((topic, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 495, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 496, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900", __source: { fileName: "", lineNumber: 497, columnNumber: 21 }, __self: this }, topic.name), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 498, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors", __source: { fileName: "", lineNumber: 499, columnNumber: 23 }, __self: this }, "View Messages"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 text-sm bg-green-100 text-green-700 rounded hover:bg-green-200 transition-colors", __source: { fileName: "", lineNumber: 502, columnNumber: 23 }, __self: this }, "Scale"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 505, columnNumber: 23 }, __self: this }, "Configure"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-6 gap-4", __source: { fileName: "", lineNumber: 511, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 512, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 513, columnNumber: 23 }, __self: this }, "Partitions"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 514, columnNumber: 23 }, __self: this }, topic.partitions)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 516, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 517, columnNumber: 23 }, __self: this }, "Replicas"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 518, columnNumber: 23 }, __self: this }, topic.replicas)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 520, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 521, columnNumber: 23 }, __self: this }, "Retention"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 522, columnNumber: 23 }, __self: this }, topic.retention)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 524, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 525, columnNumber: 23 }, __self: this }, "Size"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 526, columnNumber: 23 }, __self: this }, topic.size)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 528, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 529, columnNumber: 23 }, __self: this }, "Messages/sec"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 530, columnNumber: 23 }, __self: this }, topic.messagesPerSec)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 532, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 533, columnNumber: 23 }, __self: this }, "Consumers"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 534, columnNumber: 23 }, __self: this }, topic.consumers))))))), activeTab === 'schemas' && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 544, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-6", __source: { fileName: "", lineNumber: 545, columnNumber: 13 }, __self: this }, schemas.map((schema)=>/*#__PURE__*/ React.createElement("div", { key: schema.id, className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 547, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 548, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 549, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900", __source: { fileName: "", lineNumber: 550, columnNumber: 23 }, __self: this }, schema.name), /*#__PURE__*/ React.createElement("span", { className: "ml-3 px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700", __source: { fileName: "", lineNumber: 551, columnNumber: 23 }, __self: this }, "v", schema.version), /*#__PURE__*/ React.createElement("span", { className: "ml-2 px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700", __source: { fileName: "", lineNumber: 554, columnNumber: 23 }, __self: this }, schema.format)), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 558, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors", __source: { fileName: "", lineNumber: 559, columnNumber: 23 }, __self: this }, "View Schema"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 text-sm bg-green-100 text-green-700 rounded hover:bg-green-200 transition-colors", __source: { fileName: "", lineNumber: 562, columnNumber: 23 }, __self: this }, "Update Version"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 text-sm bg-purple-100 text-purple-700 rounded hover:bg-purple-200 transition-colors", __source: { fileName: "", lineNumber: 565, columnNumber: 23 }, __self: this }, "Validate"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 571, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 572, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 573, columnNumber: 23 }, __self: this }, "Topic"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 574, columnNumber: 23 }, __self: this }, schema.topic)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 576, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 577, columnNumber: 23 }, __self: this }, "Fields"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 578, columnNumber: 23 }, __self: this }, schema.fields)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 580, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 581, columnNumber: 23 }, __self: this }, "Last Updated"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 582, columnNumber: 23 }, __self: this }, schema.lastUpdated)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 584, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 585, columnNumber: 23 }, __self: this }, "Compatibility"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-green-600", __source: { fileName: "", lineNumber: 586, columnNumber: 23 }, __self: this }, "Backward"))))))), activeTab === 'producers' && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 596, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-6", __source: { fileName: "", lineNumber: 597, columnNumber: 13 }, __self: this }, producers.map((producer)=>/*#__PURE__*/ React.createElement("div", { key: producer.id, className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 599, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 600, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 601, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900", __source: { fileName: "", lineNumber: 602, columnNumber: 23 }, __self: this }, producer.name), /*#__PURE__*/ React.createElement("span", { className: "ml-3 px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700", __source: { fileName: "", lineNumber: 603, columnNumber: 23 }, __self: this }, producer.id), /*#__PURE__*/ React.createElement("span", { className: `ml-2 px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(producer.status)}`, __source: { fileName: "", lineNumber: 606, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${getStatusIcon(producer.status)} mr-1`, __source: { fileName: "", lineNumber: 607, columnNumber: 25 }, __self: this }), producer.status)), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 611, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors", __source: { fileName: "", lineNumber: 612, columnNumber: 23 }, __self: this }, "Restart"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 text-sm bg-yellow-100 text-yellow-700 rounded hover:bg-yellow-200 transition-colors", __source: { fileName: "", lineNumber: 615, columnNumber: 23 }, __self: this }, "Pause"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 618, columnNumber: 23 }, __self: this }, "Logs"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-4", __source: { fileName: "", lineNumber: 624, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 625, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 626, columnNumber: 23 }, __self: this }, "Topic"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 627, columnNumber: 23 }, __self: this }, producer.topic)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 629, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 630, columnNumber: 23 }, __self: this }, "Throughput"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 631, columnNumber: 23 }, __self: this }, producer.throughput)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 633, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 634, columnNumber: 23 }, __self: this }, "Errors"), /*#__PURE__*/ React.createElement("p", { className: `font-semibold ${producer.errors > 0 ? 'text-red-600' : 'text-green-600'}`, __source: { fileName: "", lineNumber: 635, columnNumber: 23 }, __self: this }, producer.errors)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 639, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 640, columnNumber: 23 }, __self: this }, "Last Message"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 641, columnNumber: 23 }, __self: this }, producer.lastMessage)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 643, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 644, columnNumber: 23 }, __self: this }, "Actions"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1", __source: { fileName: "", lineNumber: 645, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-green-600 hover:text-green-800", __source: { fileName: "", lineNumber: 646, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play", __source: { fileName: "", lineNumber: 647, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-yellow-600 hover:text-yellow-800", __source: { fileName: "", lineNumber: 649, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pause", __source: { fileName: "", lineNumber: 650, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-red-600 hover:text-red-800", __source: { fileName: "", lineNumber: 652, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stop", __source: { fileName: "", lineNumber: 653, columnNumber: 27 }, __self: this }))))))))), activeTab === 'monitoring' && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 665, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 666, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 667, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 668, columnNumber: 17 }, __self: this }, "Throughput Metrics"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 669, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 670, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 671, columnNumber: 21 }, __self: this }, "customer-events"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 672, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-32 bg-gray-200 rounded-full h-2 mr-3", __source: { fileName: "", lineNumber: 673, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2 rounded-full", style: { width: '45%' }, __source: { fileName: "", lineNumber: 674, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 676, columnNumber: 23 }, __self: this }, "450/sec"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 679, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 680, columnNumber: 21 }, __self: this }, "sensor-data"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 681, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-32 bg-gray-200 rounded-full h-2 mr-3", __source: { fileName: "", lineNumber: 682, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-green-600 h-2 rounded-full", style: { width: '85%' }, __source: { fileName: "", lineNumber: 683, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 685, columnNumber: 23 }, __self: this }, "2.1K/sec"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 688, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 689, columnNumber: 21 }, __self: this }, "web-events"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 690, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-32 bg-gray-200 rounded-full h-2 mr-3", __source: { fileName: "", lineNumber: 691, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-600 h-2 rounded-full", style: { width: '12%' }, __source: { fileName: "", lineNumber: 692, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 694, columnNumber: 23 }, __self: this }, "120/sec"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 697, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 698, columnNumber: 21 }, __self: this }, "application-logs"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 699, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-32 bg-gray-200 rounded-full h-2 mr-3", __source: { fileName: "", lineNumber: 700, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-purple-600 h-2 rounded-full", style: { width: '65%' }, __source: { fileName: "", lineNumber: 701, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 703, columnNumber: 23 }, __self: this }, "800/sec"))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 709, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 710, columnNumber: 17 }, __self: this }, "Error Rates"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 711, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 712, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 713, columnNumber: 21 }, __self: this }, "Customer DB Producer"), /*#__PURE__*/ React.createElement("span", { className: "px-2 py-1 rounded-full text-xs font-medium text-green-600 bg-green-100", __source: { fileName: "", lineNumber: 714, columnNumber: 21 }, __self: this }, "0 errors")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 718, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 719, columnNumber: 21 }, __self: this }, "IoT Sensor Producer"), /*#__PURE__*/ React.createElement("span", { className: "px-2 py-1 rounded-full text-xs font-medium text-yellow-600 bg-yellow-100", __source: { fileName: "", lineNumber: 720, columnNumber: 21 }, __self: this }, "2 errors")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 724, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 725, columnNumber: 21 }, __self: this }, "Web Analytics Producer"), /*#__PURE__*/ React.createElement("span", { className: "px-2 py-1 rounded-full text-xs font-medium text-red-600 bg-red-100", __source: { fileName: "", lineNumber: 726, columnNumber: 21 }, __self: this }, "15 errors"))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 734, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 735, columnNumber: 15 }, __self: this }, "Real-time Message Flow"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 736, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-4 bg-blue-50 rounded-lg", __source: { fileName: "", lineNumber: 737, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 738, columnNumber: 19 }, __self: this }, "3,470"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 739, columnNumber: 19 }, __self: this }, "Messages/sec")), /*#__PURE__*/ React.createElement("div", { className: "text-center p-4 bg-green-50 rounded-lg", __source: { fileName: "", lineNumber: 741, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-green-600", __source: { fileName: "", lineNumber: 742, columnNumber: 19 }, __self: this }, "99.8%"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 743, columnNumber: 19 }, __self: this }, "Success Rate")), /*#__PURE__*/ React.createElement("div", { className: "text-center p-4 bg-yellow-50 rounded-lg", __source: { fileName: "", lineNumber: 745, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-yellow-600", __source: { fileName: "", lineNumber: 746, columnNumber: 19 }, __self: this }, "12ms"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 747, columnNumber: 19 }, __self: this }, "Avg Latency")), /*#__PURE__*/ React.createElement("div", { className: "text-center p-4 bg-purple-50 rounded-lg", __source: { fileName: "", lineNumber: 749, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-purple-600", __source: { fileName: "", lineNumber: 750, columnNumber: 19 }, __self: this }, "24.8GB"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 751, columnNumber: 19 }, __self: this }, "Data Today")))))), showAddSource && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 760, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 761, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 762, columnNumber: 13 }, __self: this }, "Add Data Source"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddDataSource, __source: { fileName: "", lineNumber: 763, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 764, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 765, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 766, columnNumber: 19 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: newDataSource.name, onChange: (e)=>setNewDataSource({ ...newDataSource, name: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 767, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 776, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 777, columnNumber: 19 }, __self: this }, "Type"), /*#__PURE__*/ React.createElement("select", { name: "type", value: newDataSource.type, onChange: (e)=>setNewDataSource({ ...newDataSource, type: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 778, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "PostgreSQL", __source: { fileName: "", lineNumber: 784, columnNumber: 21 }, __self: this }, "PostgreSQL"), /*#__PURE__*/ React.createElement("option", { value: "MySQL", __source: { fileName: "", lineNumber: 785, columnNumber: 21 }, __self: this }, "MySQL"), /*#__PURE__*/ React.createElement("option", { value: "MongoDB", __source: { fileName: "", lineNumber: 786, columnNumber: 21 }, __self: this }, "MongoDB"), /*#__PURE__*/ React.createElement("option", { value: "REST API", __source: { fileName: "", lineNumber: 787, columnNumber: 21 }, __self: this }, "REST API"), /*#__PURE__*/ React.createElement("option", { value: "MQTT", __source: { fileName: "", lineNumber: 788, columnNumber: 21 }, __self: this }, "MQTT"), /*#__PURE__*/ React.createElement("option", { value: "File System", __source: { fileName: "", lineNumber: 789, columnNumber: 21 }, __self: this }, "File System"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 792, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 793, columnNumber: 19 }, __self: this }, "Connection String"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "connectionString", value: newDataSource.connectionString, onChange: (e)=>setNewDataSource({ ...newDataSource, connectionString: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 794, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 803, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 804, columnNumber: 19 }, __self: this }, "Target Topic"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "topic", value: newDataSource.topic, onChange: (e)=>setNewDataSource({ ...newDataSource, topic: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 805, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 814, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 815, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 816, columnNumber: 21 }, __self: this }, "Batch Size"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "batchSize", value: newDataSource.batchSize, onChange: (e)=>setNewDataSource({ ...newDataSource, batchSize: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 817, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 825, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 826, columnNumber: 21 }, __self: this }, "Poll Interval (ms)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "pollInterval", value: newDataSource.pollInterval, onChange: (e)=>setNewDataSource({ ...newDataSource, pollInterval: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 827, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-3 mt-6", __source: { fileName: "", lineNumber: 837, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowAddSource(false), className: "px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 transition-colors", __source: { fileName: "", lineNumber: 838, columnNumber: 17 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 845, columnNumber: 17 }, __self: this }, "Add Source"))))), showAddTopic && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 858, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 859, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 860, columnNumber: 13 }, __self: this }, "Create Kafka Topic"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddTopic, __source: { fileName: "", lineNumber: 861, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 862, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 863, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 864, columnNumber: 19 }, __self: this }, "Topic Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: newTopic.name, onChange: (e)=>setNewTopic({ ...newTopic, name: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 865, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 874, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 875, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 876, columnNumber: 21 }, __self: this }, "Partitions"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "partitions", value: newTopic.partitions, onChange: (e)=>setNewTopic({ ...newTopic, partitions: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", min: "1", __source: { fileName: "", lineNumber: 877, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 886, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 887, columnNumber: 21 }, __self: this }, "Replicas"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "replicas", value: newTopic.replicas, onChange: (e)=>setNewTopic({ ...newTopic, replicas: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", min: "1", max: "3", __source: { fileName: "", lineNumber: 888, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 899, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 900, columnNumber: 19 }, __self: this }, "Retention"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 901, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "retention", value: newTopic.retention, onChange: (e)=>setNewTopic({ ...newTopic, retention: e.target.value }), className: "flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", min: "1", __source: { fileName: "", lineNumber: 902, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "retentionUnit", value: newTopic.retentionUnit, onChange: (e)=>setNewTopic({ ...newTopic, retentionUnit: e.target.value }), className: "px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 910, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "hours", __source: { fileName: "", lineNumber: 916, columnNumber: 23 }, __self: this }, "Hours"), /*#__PURE__*/ React.createElement("option", { value: "days", __source: { fileName: "", lineNumber: 917, columnNumber: 23 }, __self: this }, "Days"), /*#__PURE__*/ React.createElement("option", { value: "weeks", __source: { fileName: "", lineNumber: 918, columnNumber: 23 }, __self: this }, "Weeks"))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-3 mt-6", __source: { fileName: "", lineNumber: 923, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowAddTopic(false), className: "px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 transition-colors", __source: { fileName: "", lineNumber: 924, columnNumber: 17 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors", __source: { fileName: "", lineNumber: 931, columnNumber: 17 }, __self: this }, "Create Topic"))))), showProducerConfig && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 944, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 945, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 946, columnNumber: 13 }, __self: this }, "Producer Configuration"), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); setShowProducerConfig(false); }, __source: { fileName: "", lineNumber: 947, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 948, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 949, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 950, columnNumber: 19 }, __self: this }, "Batch Size"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "batchSize", value: producerConfig.batchSize, onChange: (e)=>setProducerConfig({ ...producerConfig, batchSize: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 951, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 959, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 960, columnNumber: 19 }, __self: this }, "Linger MS"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "lingerMs", value: producerConfig.lingerMs, onChange: (e)=>setProducerConfig({ ...producerConfig, lingerMs: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 961, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 969, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 970, columnNumber: 19 }, __self: this }, "Compression Type"), /*#__PURE__*/ React.createElement("select", { name: "compressionType", value: producerConfig.compressionType, onChange: (e)=>setProducerConfig({ ...producerConfig, compressionType: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 971, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "none", __source: { fileName: "", lineNumber: 977, columnNumber: 21 }, __self: this }, "None"), /*#__PURE__*/ React.createElement("option", { value: "gzip", __source: { fileName: "", lineNumber: 978, columnNumber: 21 }, __self: this }, "GZIP"), /*#__PURE__*/ React.createElement("option", { value: "snappy", __source: { fileName: "", lineNumber: 979, columnNumber: 21 }, __self: this }, "Snappy"), /*#__PURE__*/ React.createElement("option", { value: "lz4", __source: { fileName: "", lineNumber: 980, columnNumber: 21 }, __self: this }, "LZ4"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 983, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 984, columnNumber: 19 }, __self: this }, "Acknowledgments"), /*#__PURE__*/ React.createElement("select", { name: "acks", value: producerConfig.acks, onChange: (e)=>setProducerConfig({ ...producerConfig, acks: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 985, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "0", __source: { fileName: "", lineNumber: 991, columnNumber: 21 }, __self: this }, "0 (No wait)"), /*#__PURE__*/ React.createElement("option", { value: "1", __source: { fileName: "", lineNumber: 992, columnNumber: 21 }, __self: this }, "1 (Leader only)"), /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 993, columnNumber: 21 }, __self: this }, "All (All replicas)"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 996, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 997, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 998, columnNumber: 21 }, __self: this }, "Retries"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "retries", value: producerConfig.retries, onChange: (e)=>setProducerConfig({ ...producerConfig, retries: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 999, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1007, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 1008, columnNumber: 21 }, __self: this }, "Max In-Flight"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "maxInFlightRequests", value: producerConfig.maxInFlightRequests, onChange: (e)=>setProducerConfig({ ...producerConfig, maxInFlightRequests: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 1009, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-3 mt-6", __source: { fileName: "", lineNumber: 1019, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowProducerConfig(false), className: "px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 transition-colors", __source: { fileName: "", lineNumber: 1020, columnNumber: 17 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors", __source: { fileName: "", lineNumber: 1027, columnNumber: 17 }, __self: this }, "Save Configuration")))))); }