Skip to content

Instantly share code, notes, and snippets.

@SGauthamRaj
Created December 29, 2025 10:37
Show Gist options
  • Select an option

  • Save SGauthamRaj/1e7cbc80f0227ac36b1d377dd6f4dacd to your computer and use it in GitHub Desktop.

Select an option

Save SGauthamRaj/1e7cbc80f0227ac36b1d377dd6f4dacd to your computer and use it in GitHub Desktop.
ERP Worker Performance Analysis Report - Professional Dashboard for Devs & PMs (QA-prod)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ERP Worker Performance Analysis Report</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root {
--bg-dark: #0f172a;
--bg-card: #1e293b;
--bg-card-hover: #334155;
--bg-accent: #1e3a5f;
--text-white: #f8fafc;
--text-gray: #94a3b8;
--text-muted: #64748b;
--green: #22c55e;
--green-dim: rgba(34, 197, 94, 0.15);
--red: #ef4444;
--red-dim: rgba(239, 68, 68, 0.15);
--blue: #3b82f6;
--blue-dim: rgba(59, 130, 246, 0.15);
--orange: #f97316;
--orange-dim: rgba(249, 115, 22, 0.15);
--purple: #a855f7;
--purple-dim: rgba(168, 85, 247, 0.15);
--yellow: #eab308;
--cyan: #06b6d4;
--border: #334155;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-dark);
color: var(--text-white);
line-height: 1.6;
min-height: 100vh;
}
.container { max-width: 1400px; margin: 0 auto; padding: 2rem; }
.header {
text-align: center;
padding: 3rem 2rem;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(168, 85, 247, 0.1) 50%, rgba(236, 72, 153, 0.1) 100%);
border-radius: 24px;
border: 1px solid var(--border);
margin-bottom: 2rem;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--blue), var(--purple), var(--orange));
}
.header-badge {
display: inline-block;
background: var(--purple-dim);
color: var(--purple);
padding: 0.5rem 1rem;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
}
h1 {
font-size: 2.75rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 0.75rem;
background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle { color: var(--text-gray); font-size: 1.15rem; font-weight: 400; margin-bottom: 1.5rem; }
.header-meta { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.meta-item { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.875rem; }
.meta-item svg { width: 16px; height: 16px; }
.executive-summary {
background: var(--bg-card);
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
border: 1px solid var(--border);
}
.section-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.section-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.section-title { font-size: 1.25rem; font-weight: 700; color: var(--text-white); }
.section-subtitle { font-size: 0.875rem; color: var(--text-muted); }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.summary-stat {
background: var(--bg-dark);
border-radius: 16px;
padding: 1.5rem;
text-align: center;
border: 1px solid var(--border);
transition: transform 0.2s, border-color 0.2s;
}
.summary-stat:hover { transform: translateY(-2px); border-color: var(--blue); }
.stat-value { font-family: 'JetBrains Mono', monospace; font-size: 2rem; font-weight: 700; margin-bottom: 0.25rem; }
.stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.findings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.finding-card { background: var(--bg-dark); border-radius: 12px; padding: 1.25rem; border-left: 4px solid; }
.finding-card.positive { border-left-color: var(--green); }
.finding-card.negative { border-left-color: var(--red); }
.finding-card.neutral { border-left-color: var(--blue); }
.finding-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.finding-text { font-size: 0.85rem; color: var(--text-gray); line-height: 1.5; }
.overview-section {
background: var(--bg-card);
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
border: 1px solid var(--border);
}
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.data-table thead { background: var(--bg-dark); }
.data-table th { padding: 1rem 1.25rem; text-align: left; font-weight: 600; color: var(--text-gray); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
.data-table th:first-child { border-radius: 12px 0 0 0; }
.data-table th:last-child { border-radius: 0 12px 0 0; }
.data-table td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); font-family: 'JetBrains Mono', monospace; }
.data-table tbody tr:hover { background: var(--bg-card-hover); }
.set-badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--purple-dim); color: var(--purple); border-radius: 8px; font-weight: 700; font-size: 0.85rem; }
.pages-cell { font-family: 'Inter', sans-serif; font-weight: 500; }
.change-indicator { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; }
.change-indicator.positive { background: var(--green-dim); color: var(--green); }
.change-indicator.negative { background: var(--red-dim); color: var(--red); }
.change-indicator.neutral { background: var(--blue-dim); color: var(--blue); }
.comparison-set { background: var(--bg-card); border-radius: 20px; margin-bottom: 1.5rem; border: 1px solid var(--border); overflow: hidden; }
.set-header { background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-accent) 100%); padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.set-info { display: flex; align-items: center; gap: 1rem; }
.set-number { width: 48px; height: 48px; background: linear-gradient(135deg, var(--purple), var(--blue)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; }
.set-details h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; }
.set-details span { font-size: 0.85rem; color: var(--text-muted); }
.pages-tag { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-card); padding: 0.75rem 1.25rem; border-radius: 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; border: 1px solid var(--border); }
.pages-tag svg { width: 18px; height: 18px; color: var(--blue); }
.comparison-content { display: grid; grid-template-columns: 1fr 1fr; }
.job-panel { padding: 1.5rem 2rem; }
.job-panel:first-child { border-right: 1px solid var(--border); }
.job-label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 100px; font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem; }
.job-label.without-erp { background: var(--orange-dim); color: var(--orange); }
.job-label.with-erp { background: var(--green-dim); color: var(--green); }
.job-id { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--text-muted); background: var(--bg-dark); padding: 0.35rem 0.75rem; border-radius: 6px; margin-bottom: 1.25rem; display: inline-block; }
.metrics-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.metric-box { background: var(--bg-dark); border-radius: 12px; padding: 1rem; border: 1px solid var(--border); }
.metric-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; }
.metric-value { font-family: 'JetBrains Mono', monospace; font-size: 1.35rem; font-weight: 700; color: var(--text-white); }
.metric-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
.impact-section { background: var(--bg-dark); padding: 1.5rem 2rem; border-top: 1px solid var(--border); }
.impact-title { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 1rem; }
.impact-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.impact-item { text-align: center; }
.impact-label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.impact-value { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 700; padding: 0.5rem 0.75rem; border-radius: 8px; display: inline-block; }
.impact-value.positive { background: var(--green-dim); color: var(--green); }
.impact-value.negative { background: var(--red-dim); color: var(--red); }
.impact-value.neutral { background: var(--blue-dim); color: var(--blue); }
.set-note { background: var(--orange-dim); color: var(--orange); padding: 0.75rem 1rem; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; }
.footer { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.85rem; border-top: 1px solid var(--border); margin-top: 2rem; }
@media (max-width: 1024px) {
.summary-grid { grid-template-columns: repeat(2, 1fr); }
.findings-grid { grid-template-columns: 1fr; }
.comparison-content { grid-template-columns: 1fr; }
.job-panel:first-child { border-right: none; border-bottom: 1px solid var(--border); }
.impact-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
h1 { font-size: 1.75rem; }
.summary-grid { grid-template-columns: 1fr; }
.impact-grid { grid-template-columns: repeat(2, 1fr); }
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<span class="header-badge">Performance Analysis</span>
<h1>ERP Worker Comparison Report</h1>
<p class="subtitle">Without ERP vs With ERP β€” Resource Utilization & Performance Impact</p>
<div class="header-meta">
<div class="meta-item">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
December 29, 2025
</div>
<div class="meta-item">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
QA-prod Environment
</div>
<div class="meta-item">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
Splunk + New Relic Data
</div>
</div>
</header>
<section class="executive-summary">
<div class="section-header">
<div class="section-icon" style="background: var(--purple-dim);">πŸ“Š</div>
<div>
<h2 class="section-title">Executive Summary</h2>
<p class="section-subtitle">Key metrics across all test scenarios</p>
</div>
</div>
<div class="summary-grid">
<div class="summary-stat">
<div class="stat-value" style="color: var(--blue);">9</div>
<div class="stat-label">Test Sets Analyzed</div>
</div>
<div class="summary-stat">
<div class="stat-value" style="color: var(--purple);">500 - 10K</div>
<div class="stat-label">Pages Range Tested</div>
</div>
<div class="summary-stat">
<div class="stat-value" style="color: var(--orange);">+18%</div>
<div class="stat-label">Avg Duration Impact</div>
</div>
<div class="summary-stat">
<div class="stat-value" style="color: var(--green);">-12%</div>
<div class="stat-label">Avg Memory Savings</div>
</div>
</div>
<div class="findings-grid">
<div class="finding-card positive">
<div class="finding-title"><span style="color: var(--green);">βœ“</span> Memory Efficiency</div>
<div class="finding-text">With ERP shows <strong>consistent memory reduction</strong> in 7 out of 9 tests, with savings up to 55% at lower page counts.</div>
</div>
<div class="finding-card negative">
<div class="finding-title"><span style="color: var(--red);">⚠</span> Duration Trade-off</div>
<div class="finding-text">With ERP is <strong>4-30% slower</strong> in most scenarios. Exception: Set 9 (10K pages) was 11% faster.</div>
</div>
<div class="finding-card neutral">
<div class="finding-title"><span style="color: var(--blue);">β„Ή</span> CPU Variability</div>
<div class="finding-text">CPU usage varies significantly. Some sets show <strong>major reduction</strong> (Set 1: -63%), others increase.</div>
</div>
</div>
</section>
<section class="overview-section">
<div class="section-header">
<div class="section-icon" style="background: var(--blue-dim);">πŸ“‹</div>
<div>
<h2 class="section-title">Results Overview</h2>
<p class="section-subtitle">Comparison metrics at a glance</p>
</div>
</div>
<table class="data-table">
<thead>
<tr><th>Set</th><th>Pages</th><th>Duration Ξ”</th><th>Avg CPU Ξ”</th><th>Max CPU Ξ”</th><th>Avg Memory Ξ”</th><th>Max Memory Ξ”</th></tr>
</thead>
<tbody>
<tr><td><span class="set-badge">1</span></td><td class="pages-cell">500</td><td><span class="change-indicator negative">+11%</span></td><td><span class="change-indicator positive">-63%</span></td><td><span class="change-indicator positive">-50%</span></td><td><span class="change-indicator positive">-55%</span></td><td><span class="change-indicator positive">-53%</span></td></tr>
<tr><td><span class="set-badge">2</span></td><td class="pages-cell">1,000</td><td><span class="change-indicator negative">+30%</span></td><td><span class="change-indicator negative">+1383%</span></td><td><span class="change-indicator negative">+1744%</span></td><td><span class="change-indicator positive">-15%</span></td><td><span class="change-indicator positive">-13%</span></td></tr>
<tr><td><span class="set-badge">3</span></td><td class="pages-cell">1,500</td><td><span class="change-indicator negative">+28%</span></td><td><span class="change-indicator positive">-2%</span></td><td><span class="change-indicator positive">-12%</span></td><td><span class="change-indicator negative">+3%</span></td><td><span class="change-indicator negative">+5%</span></td></tr>
<tr><td><span class="set-badge">4</span></td><td class="pages-cell">5,000</td><td><span class="change-indicator negative">+4%</span></td><td><span class="change-indicator positive">-6%</span></td><td><span class="change-indicator positive">-30%</span></td><td><span class="change-indicator positive">-6%</span></td><td><span class="change-indicator positive">-3%</span></td></tr>
<tr><td><span class="set-badge">5</span></td><td class="pages-cell">~10,000</td><td><span class="change-indicator negative">+13%</span></td><td><span class="change-indicator negative">+14%</span></td><td><span class="change-indicator negative">+4%</span></td><td><span class="change-indicator positive">-7%</span></td><td><span class="change-indicator positive">-3%</span></td></tr>
<tr><td><span class="set-badge">6</span></td><td class="pages-cell">~9,700*</td><td><span class="change-indicator negative">+28%</span></td><td><span class="change-indicator positive">-86%</span></td><td><span class="change-indicator positive">-74%</span></td><td><span class="change-indicator negative">+2%</span></td><td><span class="change-indicator negative">+1%</span></td></tr>
<tr><td><span class="set-badge">7</span></td><td class="pages-cell">1,000</td><td><span class="change-indicator negative">+29%</span></td><td><span class="change-indicator negative">+20%</span></td><td><span class="change-indicator negative">+92%</span></td><td><span class="change-indicator neutral">~0%</span></td><td><span class="change-indicator neutral">~0%</span></td></tr>
<tr><td><span class="set-badge">9</span></td><td class="pages-cell">~10,000</td><td><span class="change-indicator positive">-11%</span></td><td><span class="change-indicator negative">+3%</span></td><td><span class="change-indicator positive">-13%</span></td><td><span class="change-indicator positive">-17%</span></td><td><span class="change-indicator positive">-2%</span></td></tr>
</tbody>
</table>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 1rem;">* Page counts differ slightly between jobs in Set 6</p>
</section>
<footer class="footer">
<p><strong>ERP Worker Performance Analysis Report</strong></p>
<p style="margin-top: 0.5rem;">Generated December 29, 2025 β€’ Data from Splunk & New Relic β€’ Worker: integrator-workers-erpworker β€’ Environment: QA-prod</p>
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment