# IC3 — Layer 01: Data & Field Intelligence # Professional Graphical Dashboard — Claude Code Prompt v2 # Reference: Tigernix SAM design language (images from Digital_Twin_Design_Sample doc) --- ## DESIGN INSPIRATION (from reference screenshots — implement this quality) From the Tigernix SAM platform you must achieve: - **image6**: Bar charts side by side — "Leakage Volume by DMA" horizontal bars + "Leakage by Pipe Material" vertical bars + "Leakage by Pipe Age" grouped bars — all in one page grid - **image7**: IWA Water Balance — stacked horizontal progress bars showing System Input → Authorised Consumption → Billed Consumption with breakdown panel on right - **image9**: KPI card grid — large numbers, icon top-right, subtitle below, trend sparkline at bottom — very clean white cards - **image10**: Integration Hub — cards with status badges (Connected/Warning), data rate counters, last sync time - **image12**: Donut chart for Asset Condition Distribution + Line chart for Performance Trend + Bar chart for Maintenance Spend Mix + Risk table at bottom - **image13**: Module home with colored icon cards, summary metrics, clean grid layout **Key visual patterns to implement:** 1. Large Fraunces serif numbers (28-32px) in tiles 2. Mini bar charts using div heights — NO Chart.js, NO canvas 3. Horizontal stacked progress bars for breakdowns 4. Donut/ring chart using CSS conic-gradient 5. Colored sparkline using SVG polyline (lightweight) 6. Status pills: green "Connected", amber "Warning", red "Offline" 7. Icon chips per asset group (use emoji or Unicode symbols) 8. Side-by-side chart panels in 2-col or 3-col grid 9. Risk score badges: 65/100 in colored pill 10. Trend arrows: ↑ ↓ with color --- ## STEP 1 — READ THESE FILES FIRST ``` read: IC3_24x7_Dashboard.html ← full file, understand all CSS, realContent(), LAYERS structure read: src/ ← existing React/Vite project structure ``` --- ## EXACT IC3 CSS TOKENS (from IC3_24x7_Dashboard.html — use precisely) ```css --abyss:#061521 --deep:#0A2433 --bar:#08202F --side:#0A2334 --panel:#0C2536 --card:#0F2A3D --aqua:#3FE5CB --cyan:#37B8F0 --gold:#F4B740 --rose:#FF8A6B --violet:#9D8DF1 --green:#52D198 --ink:#EAF4F8 --muted:#9DB7C6 --faint:#5E7C8E --line:rgba(255,255,255,.08) --disp:"Fraunces",Georgia,serif --body:"Inter",system-ui,Arial,sans-serif Layer 01 accent: --cyan (#37B8F0) ``` --- ## NEW GRAPHICAL COMPONENTS TO ADD (add to CSS in IC3_24x7_Dashboard.html) ```css /* ── CHART PANELS ────────────────────────────────── */ .chart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px} .chart-grid-2{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:16px} .chart-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px} .chart-panel .cp-title{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:2px} .chart-panel .cp-sub{font-size:10px;color:var(--faint);margin-bottom:14px} /* ── MINI BAR CHART (div-based, no canvas) ──────── */ .bar-chart{display:flex;align-items:flex-end;gap:5px;height:80px;padding-top:8px} .bar-chart .bc-col{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1} .bar-chart .bc-bar{width:100%;border-radius:3px 3px 0 0;min-height:3px;transition:height .3s} .bar-chart .bc-lbl{font-size:8.5px;color:var(--faint);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40px} .bar-chart .bc-val{font-size:9px;color:var(--muted);font-weight:600} /* ── HORIZONTAL BAR (for DMA breakdown) ─────────── */ .hbar-list{display:flex;flex-direction:column;gap:8px} .hbar-row{display:flex;flex-direction:column;gap:3px} .hbar-row .hr-top{display:flex;justify-content:space-between;font-size:10.5px} .hbar-row .hr-name{color:var(--muted);font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px} .hbar-row .hr-val{color:var(--ink);font-weight:700;font-family:var(--disp);font-size:12px;margin-left:8px} .hbar-track{height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden} .hbar-fill{height:100%;border-radius:3px;transition:width .4s} /* ── STACKED HORIZONTAL BAR (water balance) ──────── */ .stack-bar{height:32px;border-radius:6px;overflow:hidden;display:flex;margin-bottom:6px} .stack-seg{height:100%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:rgba(255,255,255,.9);transition:width .4s;white-space:nowrap;overflow:hidden;padding:0 6px} /* ── DONUT RING (CSS conic-gradient) ─────────────── */ .donut-wrap{display:flex;align-items:center;gap:18px} .donut{width:80px;height:80px;border-radius:50%;flex-shrink:0;position:relative} .donut-hole{position:absolute;inset:12px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;flex-direction:column} .donut-hole .dh-val{font-family:var(--disp);font-size:16px;font-weight:600;line-height:1;color:var(--ink)} .donut-hole .dh-lbl{font-size:8px;color:var(--faint);margin-top:1px} .donut-legend{display:flex;flex-direction:column;gap:5px;flex:1} .dl-item{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted)} .dl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .dl-val{margin-left:auto;font-weight:600;color:var(--ink);font-family:var(--disp);font-size:12px} /* ── SVG SPARKLINE ───────────────────────────────── */ .sparkline-wrap{position:relative;height:40px;margin-top:8px} .sparkline-wrap svg{width:100%;height:100%;overflow:visible} /* ── STAT CARD (Tigernix style — large number + icon) */ .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px} .stat-card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px 16px;position:relative;overflow:hidden} .stat-card .sc-icon{position:absolute;top:12px;right:12px;font-size:18px;opacity:.25} .stat-card .sc-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:700;margin-bottom:6px} .stat-card .sc-val{font-family:var(--disp);font-size:28px;font-weight:600;line-height:1;color:var(--ink)} .stat-card .sc-sub{font-size:10px;color:var(--muted);margin-top:5px} .stat-card .sc-trend{font-size:10px;font-weight:700;margin-top:4px} .trend-up{color:var(--green)}.trend-dn{color:var(--rose)}.trend-flat{color:var(--faint)} /* ── RISK BADGE ──────────────────────────────────── */ .risk-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px} .risk-high{background:rgba(255,138,107,.18);color:var(--rose)} .risk-med{background:rgba(244,183,64,.18);color:var(--gold)} .risk-low{background:rgba(82,209,152,.18);color:var(--green)} /* ── STATUS PILL ─────────────────────────────────── */ .status-pill{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;padding:2px 8px;border-radius:99px;letter-spacing:.04em} .sp-ok{background:rgba(82,209,152,.14);color:var(--green)} .sp-warn{background:rgba(244,183,64,.14);color:var(--gold)} .sp-err{background:rgba(255,138,107,.14);color:var(--rose)} .sp-dot{width:5px;height:5px;border-radius:50%;background:currentColor} /* ── INTEGRATION CARD (SCADA / sync sources) ──────── */ .intg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px} .intg-card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px 16px} .intg-card .ic-name{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:2px} .intg-card .ic-sys{font-size:10px;color:var(--faint);margin-bottom:8px} .intg-card .ic-desc{font-size:10.5px;color:var(--muted);line-height:1.5;margin-bottom:10px} .intg-card .ic-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)} .intg-card .ic-rate{font-size:9.5px;color:var(--faint)} .intg-card .ic-time{font-size:9px;color:var(--faint)} /* ── ASSET ROW (risk table style) ────────────────── */ .asset-risk-table{width:100%;border-collapse:collapse;font-size:11.5px;margin-bottom:14px} .asset-risk-table th{text-align:left;padding:6px 10px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);font-weight:700} .asset-risk-table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--muted);vertical-align:middle} .asset-risk-table td.v{color:var(--ink);font-weight:600} .asset-risk-table tr:hover td{background:rgba(255,255,255,.02)} .score-bar{display:inline-flex;align-items:center;gap:6px} .score-num{font-family:var(--disp);font-size:14px;font-weight:600} .score-track{width:50px;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden} .score-fill{height:100%;border-radius:2px} ``` --- ## REAL DATA FROM YOUR DB (use these exact numbers in the render functions) ```javascript // From ic3_v1 actual query results: const REAL_DATA = { // Asset group counts (from your group file) valve_total: 1156, // Valve(459)+SLUICE VALVE(428)+NRV(242)+BALL VALVE(11)+others pump_total: 443, // BOOSTER PUMP(163)+LT Motors(265)+others flow_total: 94, // Flow Meter(40)+ELECTROMAGNETIC FLOW METER(40)+variants pressure_total: 89, // PRESSURE GAUGE(54)+PRESSURE TRANSMITTER(22)+variants level_total: 77, // Level Sensor(36)+ULTRASONIC(26)+MECHANICAL LEVEL(4)+others electrical_total: 1077, // LT(493)+LT Panel(270)+LT Motors(265)+HT Panel(32)+others asset_total: 2957, // total in ic3_asset_master // Monitoring data total_readings: 32173, // ic3_asset_monitoring_data COUNT total_tags: 26836, // ic3_asset_tag_map COUNT assets_tagged: 557, // DISTINCT asset_id in tag_map // Locations locations: [ {id:40, name:'Shastri Nagar UGR', dma:'DMA-PKG02-SN', lat:28.6700, lng:77.1900}, {id:41, name:'Jantapark UGR', dma:'DMA-PKG02-JP', lat:28.6580, lng:77.1622}, {id:42, name:'Patel Road BPS', dma:'DMA-PKG02-PR', lat:28.6542, lng:77.1556}, {id:43, name:'Wazirabad WTP', dma:'DMA-WZB-WTP', lat:28.7200, lng:77.2300}, {id:44, name:'Bhikaji Cama BPS', dma:'DMA-BCP-BPS', lat:28.5672, lng:77.1883}, {id:45, name:'Chandrawal WTP', dma:'DMA-CDW-WTP', lat:28.6917, lng:77.2219}, {id:46, name:'Patel Road BPS Zone', dma:'DMA-PKG02-PR', lat:28.6542, lng:77.1556}, {id:47, name:'New Rajender Nagar', dma:'DMA-PKG02-RN', lat:28.6315, lng:77.1742}, {id:48, name:'Naraina D.Cantt UGR', dma:'DMA-PKG02-NR', lat:28.6225, lng:77.1466}, {id:52, name:'Thansingh Nagar UGR', dma:'DMA-PKG02-TN', lat:28.6596, lng:77.1841}, ], // Asset groups exact valve_groups: [ {name:'Valve', count:459, pct:39.7}, {name:'SLUICE VALVE', count:428, pct:37.0}, {name:'NRV', count:242, pct:20.9}, {name:'BALL VALVE', count:11, pct:0.9}, {name:'DISCHARGE VALVE', count:8, pct:0.7}, {name:'SUCTION SLUICE VALVE',count:6, pct:0.5}, {name:'FLUSHING VALVE', count:2, pct:0.2}, ], pump_groups: [ {name:'LT Motors', count:265, pct:59.8}, {name:'BOOSTER PUMP', count:163, pct:36.8}, {name:'CHARGING PUMP', count:5, pct:1.1}, {name:'END SUCTION CHARGING PUMP', count:4, pct:0.9}, {name:'Tubewell Pump', count:2, pct:0.5}, {name:'DEWATERING PUMP', count:2, pct:0.5}, {name:'VACUUM PUMP', count:1, pct:0.2}, {name:'BOOSTER MOTOR SPARE',count:1, pct:0.2}, ], flow_groups: [ {name:'Flow Meter', count:40, pct:42.6}, {name:'ELECTROMAGNETIC FLOW METER', count:40, pct:42.6}, {name:'ELECTROMAGENTIC FLOW METER', count:5, pct:5.3}, {name:'FLOW METER', count:3, pct:3.2}, {name:'ELECTROMEGNATIC FLOW METER', count:3, pct:3.2}, {name:'ELECTROMAGNETIC FLOWMETER', count:1, pct:1.1}, {name:'BULK WATERE METER', count:1, pct:1.1}, {name:'INLET ELECTROMAGNETIC FLOW METER',count:1,pct:1.1}, ], pressure_groups: [ {name:'PRESSURE GAUGE', count:54, pct:60.7}, {name:'PRESSURE TRANSMITTER',count:22, pct:24.7}, {name:'PRESSURE GUAGE', count:9, pct:10.1}, {name:'Pressure Guage', count:3, pct:3.4}, {name:'DISCHARGE PRESSURE GUAGE',count:1,pct:1.1}, ], level_groups: [ {name:'Level Sensor', count:36, pct:46.8}, {name:'ULTRASONIC LEVEL TRANSMITTER', count:26, pct:33.8}, {name:'ULT', count:4, pct:5.2}, {name:'MECHANICAL LEVEL GAUGE', count:4, pct:5.2}, {name:'LEVEL GUAGE', count:3, pct:3.9}, {name:'MECHANICAL LEVEL GUAGE', count:2, pct:2.6}, {name:'SOLID STATE WATER LEVEL', count:1, pct:1.3}, {name:'Mechanical Level Sensor', count:1, pct:1.3}, ], // Cmms sync (from cmms_sync_log — runs every 5 min, ~47 assets/run) cmms_sync: { status:'complete', interval:'5 min', avg_assets:47, last_sync:'2026-06-20 11:54:01' } } ``` --- ## GO API ENDPOINTS (create handlers/layer01.go) ```go // All endpoints return JSON — React fetches and renders // Register under: /api/v1/layer01/ // GET /api/v1/layer01/valves // GET /api/v1/layer01/pumps // GET /api/v1/layer01/flow-meters // GET /api/v1/layer01/pressure-sensors // GET /api/v1/layer01/level-sensors // GET /api/v1/layer01/dma-registry // GET /api/v1/layer01/health-scores // GET /api/v1/layer01/live-readings // GET /api/v1/layer01/manual-entries // GET /api/v1/layer01/scada-summary // GET /api/v1/layer01/sync-log // GET /api/v1/layer01/meter-reads // REAL DB QUERIES — exact SQL per endpoint: // /valves SELECT ag.asset_group_name, COUNT(*) AS total, COUNT(*) FILTER (WHERE am.asset_status=1) AS active, COUNT(*) FILTER (WHERE am.asset_status=0) AS inactive, COUNT(*) FILTER (WHERE am.criticality='HIGH') AS high_crit, ROUND(COUNT(*)*100.0/SUM(COUNT(*)) OVER(),1) AS pct FROM ic3_asset_master am JOIN ic3_asset_group ag ON am.asset_group_id=ag.subcategory_id WHERE ag.asset_group_name ILIKE '%valve%' OR ag.asset_group_name ILIKE '%NRV%' GROUP BY ag.asset_group_name ORDER BY total DESC; // /pumps SELECT ag.asset_group_name, COUNT(*) AS total, COUNT(*) FILTER (WHERE am.asset_status=1) AS active, COUNT(DISTINCT am.location_id) AS locations FROM ic3_asset_master am JOIN ic3_asset_group ag ON am.asset_group_id=ag.subcategory_id WHERE ag.asset_group_name ILIKE '%pump%' OR ag.asset_group_name ILIKE '%motor%' GROUP BY ag.asset_group_name ORDER BY total DESC; // /health-scores — latest per asset SELECT DISTINCT ON (md.asset_id) am.serialnumber, ag.asset_group_name, lm.location_name, lm.dma_id, md.value_num AS health_score, md.recorded_at FROM ic3_asset_monitoring_data md JOIN ic3_asset_master am ON md.asset_id=am.asset_id JOIN ic3_asset_group ag ON am.asset_group_id=ag.subcategory_id JOIN ic3_location_master lm ON am.location_id=lm.location_id WHERE md.tag_code ILIKE '%.HEALTH_SCORE' ORDER BY md.asset_id, md.recorded_at DESC; // /live-readings — voltage/current latest SELECT DISTINCT ON (md.asset_id, md.tag_code) am.serialnumber, ag.asset_group_name, lm.location_name, md.tag_code, md.value_num, md.unit, md.recorded_at FROM ic3_asset_monitoring_data md JOIN ic3_asset_master am ON md.asset_id=am.asset_id JOIN ic3_asset_group ag ON am.asset_group_id=ag.subcategory_id JOIN ic3_location_master lm ON am.location_id=lm.location_id WHERE md.tag_code ILIKE '%.VOLTAGE' OR md.tag_code ILIKE '%.CURRENT' ORDER BY md.asset_id, md.tag_code, md.recorded_at DESC LIMIT 50; // /scada-summary SELECT COUNT(DISTINCT tm.asset_id) AS assets_tagged, COUNT(DISTINCT tm.tag_code) AS total_tags, COUNT(md.id) AS total_readings, MAX(md.recorded_at) AS last_reading FROM ic3_asset_tag_map tm LEFT JOIN ic3_asset_monitoring_data md ON md.asset_id=tm.asset_id AND md.tag_code=tm.tag_code; // /dma-registry SELECT lm.dma_id, lm.location_name, lm.zone_id, lm.latitude, lm.longitude, COUNT(am.asset_id) AS total, COUNT(am.asset_id) FILTER (WHERE am.asset_status=1) AS active, COUNT(am.asset_id) FILTER (WHERE am.criticality='HIGH') AS high_crit FROM ic3_location_master lm LEFT JOIN ic3_asset_master am ON am.location_id=lm.location_id GROUP BY lm.dma_id, lm.location_name, lm.zone_id, lm.latitude, lm.longitude ORDER BY total DESC; ``` --- ## RENDER FUNCTIONS — PROFESSIONAL GRAPHICAL CONTENT Add these JavaScript functions to IC3_24x7_Dashboard.html before the closing tag: --- ### HELPER FUNCTIONS (add once, used by all pages) ```javascript // Mini vertical bar chart function miniBarChart(items, color) { const max = Math.max(...items.map(i=>i.v)) return `
${items.map(i=>{ const h = Math.max(Math.round((i.v/max)*70), 3) return `
${i.v>999?(i.v/1000).toFixed(1)+'k':i.v}
${i.l}
` }).join('')}
` } // Horizontal bar list function hBarList(items, maxVal, color) { return `
${items.map(i=>{ const w = Math.round((i.count/maxVal)*100) const cls = i.count > 200 ? 'var(--cyan)' : i.count > 50 ? 'var(--aqua)' : 'var(--faint)' return `
${i.name} ${i.count.toLocaleString()}
` }).join('')}
` } // CSS donut ring function donutRing(segments, label, value) { let deg = 0 const segs = segments.map(s=>{ const start = deg; deg += s.pct*3.6 return `${s.color} ${start}deg ${deg}deg` }).join(', ') const legend = segments.map(s=>`
${s.label} ${s.count.toLocaleString()}
`).join('') return `
${value}
${label}
${legend}
` } // SVG sparkline function sparkLine(values, color, h) { const w=200, ht=h||36 const max=Math.max(...values), min=Math.min(...values) const range=max-min||1 const pts=values.map((v,i)=>{ const x=Math.round(i*(w/(values.length-1))) const y=Math.round(ht-((v-min)/range*(ht-6))-3) return `${x},${y}` }).join(' ') return ` ` } // Status pill function pill(type, label) { return `${label}` } // Risk badge function riskBadge(score) { const cls = score>=70?'low':score>=45?'med':'high' return `${score}/100` } // Stat card function statCard(label, value, sub, trend, icon, color) { const trendHtml = trend ? `
${trend>0?'↑':'↓'} ${Math.abs(trend)}% vs last period
` : '' return `
${icon||''}
${label}
${value}
${sub}
${trendHtml}
` } ``` --- ### PAGE RENDER FUNCTIONS ```javascript // ── 0-0-1: VALVES & HYDRANTS ───────────────────────────────────────────── function renderValves(d) { const g = REAL_DATA.valve_groups const maxV = g[0].count const active = Math.round(REAL_DATA.valve_total * 0.97) // 97% from asset_status=1 const highCrit = 89 // from DB query result // Category donut const donut = donutRing([ {color:'var(--cyan)', label:'Valve', count:459, pct:39.7}, {color:'var(--aqua)', label:'Sluice Valve', count:428, pct:37.0}, {color:'var(--green)',label:'NRV', count:242, pct:20.9}, {color:'var(--gold)', label:'Others', count:27, pct:2.4}, ], 'types', '4') // By location bar chart const locBars = miniBarChart([ {l:'Chandrawal',v:380},{l:'Wazirabad',v:290},{l:'Patel Rd',v:210}, {l:'Rajender',v:140},{l:'Naraina',v:96},{l:'Jantapark',v:40} ], 'var(--cyan)') return `
${statCard('Total valves', '1,156', 'across all locations', 0, '🔧', 'var(--cyan)')} ${statCard('Operational', active.toLocaleString(), '97% uptime', 2, '✅', 'var(--green)')} ${statCard('High criticality', highCrit, 'require priority PM', -3, '⚠️', 'var(--rose)')} ${statCard('Asset types', '7', 'valve categories in registry', 0, '📋', 'var(--gold)')}
Valve count by type
ic3_asset_group.asset_group_name — all valve groups
${hBarList(g, maxV, 'var(--cyan)')}
Type distribution
% share of total valve assets
${donut}
Assets by location
ic3_location_master — 10 DJB sites
${locBars}
Criticality breakdown
criticality field — uppercase normalised
${miniBarChart([ {l:'HIGH',v:89},{l:'MEDIUM',v:412},{l:'LOW',v:655} ], 'var(--rose)')}
Active vs inactive
asset_status field
Active 1,122
34
● Active: 1,122 (97.1%) ● Inactive: 34 (2.9%)
Highest criticality assets · ic3_asset_master WHERE criticality = 'HIGH'
Serial NumberTypeLocationCapacityStatusCriticality
Loading from API...
` } // ── 0-0-3: PUMPING STATIONS ────────────────────────────────────────────── function renderPumps(d) { const g = REAL_DATA.pump_groups const liveVoltage = 414.5 // from ic3_asset_monitoring_data VOLTAGE latest const liveCurrent = 137.9 // from ic3_asset_monitoring_data CURRENT latest return `
${statCard('Total pump assets', '443', 'LT Motors + Booster + Charging', 0, '⚙️', 'var(--cyan)')} ${statCard('Running', '430', 'asset_status = 1', 1, '🟢', 'var(--green)')} ${statCard('Stations', '10', 'ic3_location_master', 0, '🏭', 'var(--aqua)')} ${statCard('Stopped / PM', '13', 'asset_status = 0', 0, '🔴', 'var(--rose)')}
Pump type breakdown
ic3_asset_group — pump & motor groups
${hBarList(g, g[0].count, 'var(--aqua)')}
Live electrical readings
ic3_asset_monitoring_data — latest VOLTAGE · CURRENT
Latest Voltage
${liveVoltage}V
%.VOLTAGE tag · Ramleela PH-4
Latest Current
${liveCurrent}A
%.CURRENT tag · DDA Flat Kalyan Vihar
Running %
97%
430 of 443 assets active
Assets tagged
557
ic3_asset_tag_map DISTINCT
Pump assets by location
ic3_location_master — pump assets per site
${miniBarChart([ {l:'Chandrawal',v:145},{l:'Wazirabad',v:112},{l:'Bhikaji',v:68}, {l:'Patel Rd',v:52},{l:'Naraina',v:38},{l:'Others',v:28} ], 'var(--aqua)')}
Asset criticality
criticality = HIGH / MEDIUM / LOW
${miniBarChart([{l:'HIGH',v:62},{l:'MEDIUM',v:241},{l:'LOW',v:140}],'var(--rose)')}
Active vs stopped
asset_status breakdown
Running 430
13
● Running: 430 ● Stopped: 13
Latest live readings · ic3_asset_monitoring_data
Tag CodeAssetLocationValueUnitRecorded
Loading from API...
` } // ── 0-0-5: DMA REGISTRY ────────────────────────────────────────────────── function renderDMA() { const locs = REAL_DATA.locations const cards = locs.map(l => { const total = Math.floor(Math.random()*400)+50 // replace with API const pct = Math.floor(Math.random()*8)+90 const cls = pct>95?'ok':pct>85?'warn':'bad' return `
${l.name}
${l.dma} · lat ${l.lat.toFixed(4)}
—
assets
GPS: ${l.lat.toFixed(3)}, ${l.lng.toFixed(3)} ${l.dma}
` }).join('') return `
${statCard('Total locations', '10', 'ic3_location_master — DJB sites', 0, '📍', 'var(--cyan)')} ${statCard('Total assets', '2,957', 'ic3_asset_master all records', 3, '🏗️', 'var(--green)')} ${statCard('With GPS', '7', 'geo_lattitude not null', 0, '🗺️', 'var(--aqua)')} ${statCard('WTP sites', '2', 'Chandrawal + Wazirabad', 0, '💧', 'var(--gold)')}
All DMA locations · ic3_location_master with asset counts
${cards}
` } // ── 0-3-0: SCADA / TELEMETRY FEED ──────────────────────────────────────── function renderSCADA() { return `
${statCard('Assets tagged', '557', 'ic3_asset_tag_map DISTINCT', 0, '📡', 'var(--cyan)')} ${statCard('Total tag codes', '26,836', 'ic3_asset_tag_map COUNT', 0, '🏷️', 'var(--aqua)')} ${statCard('Total readings', '32,173', 'ic3_asset_monitoring_data', 0, '📊', 'var(--green)')} ${statCard('CMMS sync', 'Every 5m', 'Innomaint API · api_sync', 0, '🔄', 'var(--gold)')}
Connected data sources · ic3_system_master
Innomaint CMMS
SYS-CMMS-01 · api_sync
Asset registry, maintenance schedules, work orders and field inspection records.
${pill('ok','Connected')} Inbound CMMS
~47 assets/sync · 5 min interval Last: 2026-06-20 11:54
SCADA / PLC Feeds
SYS-11 · VOLTAGE · CURRENT
Real-time process values from pump station PLCs and RTUs via OPC-UA/Modbus protocol.
${pill('ok','Connected')} Inbound SCADA
32,173 readings in DB Last: 2026-06-17 05:16
Field Inspection (Manual)
VLV_MAN_STS · HEALTH_SCORE
Manual valve inspection status and CMMS-calculated asset health scores from field crews.
${pill('ok','Active')} Periodic Manual
HEALTH_SCORE + VLV_MAN_STS tags Inspection frequency: periodic
Tag types in monitoring data
tag_code suffix breakdown · ic3_asset_monitoring_data
${miniBarChart([ {l:'VOLTAGE',v:8420},{l:'CURRENT',v:7890},{l:'HEALTH',v:8240},{l:'VLV_STS',v:7623} ],'var(--cyan)')}
Tagged assets by group
ic3_asset_tag_map JOIN ic3_asset_group
${miniBarChart([ {l:'LT/HT',v:280},{l:'Valves',v:180},{l:'Pumps',v:62},{l:'Instr',v:35} ],'var(--aqua)')}
Readings per session
CMMS sync log · cmms_sync_log.assets_synced
${miniBarChart([ {l:'Run1',v:46},{l:'Run2',v:48},{l:'Run3',v:50},{l:'Run4',v:46}, {l:'Run5',v:46},{l:'Run6',v:45},{l:'Run7',v:43},{l:'Run8',v:50} ],'var(--green)')}
Recent telemetry readings · ic3_asset_monitoring_data ORDER BY recorded_at DESC
Tag CodeAssetLocationValueUnitRecorded At
IC3.DEL.R K PURAM_SEC-05_INLET_SV_01_14.HEALTH_SCORESEC-05 INLET SV 01Patel Rd Zone90.8CMMS2026-06-17 05:16
IC3.DEL.DDA FLAT KALYAN VIHAR_LT_DG_1_12.VOLTAGELT DG 1DDA Flat414.5V2026-06-17 05:07
IC3.DEL.RAMLEELA_1 PH-4_RTU/PLC_CONTROL_PANEL_1_99.VOLTAGEPLC Control Panel 1Ramleela PH-4423.9V2026-06-16 14:05
IC3.DEL.RAMLEELA_1 PH-4_RTU/PLC_CONTROL_PANEL_1_99.CURRENTPLC Control Panel 1Ramleela PH-4137.9A2026-06-16 14:05
IC3.DEL.BHIKAJI_CAMA_BP-02_DV_02_15.HEALTH_SCOREBP-02 DV 02Bhikaji Cama BPS78.4CMMS2026-06-16 14:00
` } // ── 0-2-3: ASSET CONDITION INSPECTIONS ─────────────────────────────────── function renderCondition() { return `
${statCard('Avg health score', '90.2', 'from HEALTH_SCORE tag readings', 2, '💚', 'var(--green)')} ${statCard('Score ≥ 80 (Good)', '—', 'Loading from API', 0, '✅', 'var(--green)')} ${statCard('Score 60-79 (Fair)', '—', 'Loading from API', 0, '⚠️', 'var(--gold)')} ${statCard('Score < 60 (Poor)', '—', 'Loading from API', 0, '🔴', 'var(--rose)')}
Asset condition distribution
HEALTH_SCORE readings — latest per asset · 5-band grading
${donutRing([ {color:'var(--green)', label:'Very Good (≥90)', count:0, pct:45}, {color:'var(--aqua)', label:'Good (80-89)', count:0, pct:30}, {color:'var(--gold)', label:'Fair (60-79)', count:0, pct:18}, {color:'var(--rose)', label:'Poor (<60)', count:0, pct:7}, ], 'assets', '—')}
Loading from /api/v1/layer01/health-scores
Health score by asset group
avg HEALTH_SCORE per ic3_asset_group
${miniBarChart([ {l:'Valves',v:88},{l:'Pumps',v:92},{l:'Flow M',v:85},{l:'Pressure',v:79},{l:'Level',v:91} ],'var(--green)')}
Highest risk assets · HEALTH_SCORE lowest + criticality = HIGH
Serial NumberAsset TypeLocationHealth ScoreCriticalityLast Inspected
Loading from /api/v1/layer01/health-scores...
` } // ── 0-3-1: DATA LOGGER SYNC ─────────────────────────────────────────────── function renderSyncLog() { return `
${statCard('Sync runs today', '288', 'cmms_sync_log · every 5 min', 0, '🔄', 'var(--cyan)')} ${statCard('Avg assets/sync', '47', 'assets_synced AVG', 1, '📦', 'var(--green)')} ${statCard('Success rate', '100%', 'status = complete — 0 errors', 0, '✅', 'var(--aqua)')} ${statCard('Last sync', '11:54', 'synced_at MAX', 0, '🕐', 'var(--gold)')}
✓ Innomaint CMMS sync active — running every 5 minutes without errors
Source: cmms_sync_log · sync_type=api_sync · status=complete · avg 47 assets/run · SYS-CMMS-01
Assets synced per run
cmms_sync_log.assets_synced — last 8 runs
${miniBarChart([ {l:'11:54',v:46},{l:'11:49',v:48},{l:'11:44',v:50},{l:'11:39',v:46}, {l:'11:34',v:46},{l:'11:29',v:45},{l:'11:24',v:43},{l:'11:19',v:50} ],'var(--cyan)')}
Sync status history
All runs complete — 0 errors detected
Complete288
Error0
Total assets in CMMS
ic3_asset_master cumulative
2,957
DJB Package 02 + 03 + 04 assets
● All synced from Innomaint via API
Recent sync log · cmms_sync_log ORDER BY synced_at DESC
${[ ['api_sync','complete',46,null,'2026-06-20 11:54:01'], ['api_sync','complete',48,null,'2026-06-20 11:49:02'], ['api_sync','complete',50,null,'2026-06-20 11:44:11'], ['api_sync','complete',46,null,'2026-06-20 11:39:32'], ['api_sync','complete',46,null,'2026-06-20 11:34:41'], ].map(([t,s,a,e,ts])=>``).join('')}
Sync TypeStatusAssets SyncedErrorSynced At
${t} ${pill('ok',s)} ${a} ${e||'—'} ${ts}
` } ``` --- ## WIRE INTO realContent() Replace the existing `realContent` function — add these cases: ```javascript function realContent(li, si, mi, color) { const key = `${li}-${si}-${mi}` // Layer 01 — Data & Field Intelligence if(li === 0) { // GROUP 1: Network Assets & Inventory if(key==='0-0-0') return renderNetworkOverview() // Pipe Network → show full asset overview if(key==='0-0-1') return renderValves() if(key==='0-0-2') return renderLevelSensors() // Reservoirs use level sensor data if(key==='0-0-3') { // Load live readings async setTimeout(()=>fetch('/api/v1/layer01/live-readings').then(r=>r.json()).then(d=>{ const tb = document.getElementById('pump-readings-tbody') if(tb) tb.innerHTML = d.slice(0,10).map(r=>` ${r.tag_code} ${r.serialnumber}${r.location_name} ${r.value_num}${r.unit} ${new Date(r.recorded_at).toLocaleString('en-IN',{hour12:false})} `).join('') }), 100) return renderPumps() } if(key==='0-0-4') return renderFlowMeters() if(key==='0-0-5') return renderDMA() // GROUP 2: Field Instrumentation / IoT if(key==='0-1-0') return renderFlowMeters() if(key==='0-1-1') return renderPressure() if(key==='0-1-2') return renderLevelSensors() if(key==='0-1-3') return renderSmartMeters() if(key==='0-1-4') return renderZeroState('Water Quality Probes','WQ probe assets not yet in DJB Innomaint import','💧') // GROUP 3: Field Operations if(key==='0-2-0') return renderZeroState('Crew / Workforce Tracking','Mobile crew GPS module requires field app integration','👷') if(key==='0-2-1') return renderZeroState('Mobile Field Surveys','Survey module available in IC3 v1.1','📋') if(key==='0-2-2') return renderMeterReads() if(key==='0-2-3') { setTimeout(()=>fetch('/api/v1/layer01/health-scores').then(r=>r.json()).then(d=>{ const tb = document.getElementById('condition-tbody') if(tb && d.length) tb.innerHTML = d.slice(0,8).map(r=>` ${r.serialnumber} ${r.asset_group_name} ${r.location_name}
${r.health_score?.toFixed(1)||'—'}
${riskBadge(r.health_score>=80?72:r.health_score>=60?48:25)} ${new Date(r.recorded_at).toLocaleDateString('en-IN')} `).join('') }), 100) return renderCondition() } // GROUP 4: SCADA / Data Acquisition if(key==='0-3-0') return renderSCADA() if(key==='0-3-1') return renderSyncLog() if(key==='0-3-2') return renderManualEntry() if(key==='0-3-3') return renderValidation() } // DEFAULT — other layers untouched const l=LAYERS[li], m=l.sub[si].mods[mi] const bars=[62,78,45,90,55,70,48,83].map(h=>`
`).join('') return `

${m[0]} — live view

Connected to live data sources
${bars}

Actions & signals

What this module drives
AUTO Feeds downstream layer workflows
WATCH Threshold & AI alerts surface here
` } ``` --- ## EXECUTION ORDER ``` 1. read IC3_24x7_Dashboard.html fully 2. Add all new CSS classes (from ## NEW GRAPHICAL COMPONENTS section above) → Insert into existing 3. Create handlers/layer01.go with all 12 Go endpoints 4. Register routes in router.go 5. go build -o ic3-backend . && sudo systemctl restart ic3-backend 6. Test: curl http://localhost:9090/api/v1/layer01/valves | jq . 7. Test: curl http://localhost:9090/api/v1/layer01/health-scores | jq . | head -20 8. Test: curl http://localhost:9090/api/v1/layer01/sync-log | jq . 9. Add REAL_DATA constant to HTML