Skip to content

Instantly share code, notes, and snippets.

@rickysullivan-gallagher

rickysullivan-gallagher/ado-daily-report-template.html

Created March 25, 2026 02:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rickysullivan-gallagher/10e7f3730b978f11011afe0c18bada6e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rickysullivan-gallagher/10e7f3730b978f11011afe0c18bada6e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ado-daily-report-template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Accelerator Sprint Report – {{SPRINT_NAME}}</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #f4f6f9;
color: #1e2330;
padding: 32px 24px;
}
.container { max-width: 960px; margin: 0 auto; }
/* Header */
.header {
background: linear-gradient(135deg, #1a3a5c 0%, #0f6cbf 100%);
color: white;
border-radius: 12px;
padding: 28px 32px;
margin-bottom: 24px;
}
.header h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.header .meta { margin-top: 8px; font-size: 13px; opacity: 0.85; display: flex; gap: 24px; flex-wrap: wrap; }
.header .meta span { display: flex; align-items: center; gap: 6px; }
/* Summary cards */
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 14px;
margin-bottom: 24px;
}
.card {
background: white;
border-radius: 10px;
padding: 18px 20px;
box-shadow: 0 1px 4px rgba(0,0,0,.07);
text-align: center;
}
.card .value { font-size: 32px; font-weight: 800; color: #0f6cbf; line-height: 1; }
.card .label { font-size: 12px; color: #6b7280; margin-top: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.card.green .value { color: #16a34a; }
.card.amber .value { color: #d97706; }
.card.red .value { color: #dc2626; }
/* Chart */
.chart-section {
background: white;
border-radius: 10px;
padding: 22px 24px;
box-shadow: 0 1px 4px rgba(0,0,0,.07);
margin-bottom: 24px;
}
.chart-section h2 { font-size: 14px; font-weight: 700; color: #374151; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bar-label { width: 60px; font-size: 13px; color: #374151; text-align: right; flex-shrink: 0; }
.bar-track { flex: 1; background: #f3f4f6; border-radius: 6px; height: 26px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; color: white; font-size: 12px; font-weight: 700; transition: width 0.4s; }
.bar-fill.new { background: #6366f1; }
.bar-fill.active { background: #0f6cbf; }
.bar-fill.closed { background: #16a34a; }
.bar-count { font-size: 13px; color: #6b7280; width: 30px; text-align: right; flex-shrink: 0; }
/* Tables */
.section {
background: white;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,.07);
margin-bottom: 24px;
overflow: hidden;
}
.section-header {
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 10px;
}
.section-header h2 { font-size: 14px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.5px; }
.section-header .count-badge {
background: #e0e7ff;
color: #3730a3;
border-radius: 20px;
padding: 2px 9px;
font-size: 12px;
font-weight: 700;
}
table { width: 100%; border-collapse: collapse; }
th {
background: #f8fafc;
font-size: 11px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 10px 16px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
td {
padding: 11px 16px;
font-size: 13px;
border-bottom: 1px solid #f3f4f6;
vertical-align: top;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f9fafb; }
.wi-id { color: #9ca3af; font-size: 12px; font-family: monospace; }
.wi-link { color: #0f6cbf; text-decoration: none; font-weight: 500; }
.wi-link:hover { text-decoration: underline; }
/* Status badges */
.badge {
display: inline-block;
border-radius: 20px;
padding: 2px 10px;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
.badge-new { background: #ede9fe; color: #5b21b6; }
.badge-active { background: #dbeafe; color: #1d4ed8; }
.badge-closed { background: #dcfce7; color: #166534; }
/* Type badges */
.type-story { background: #fce7f3; color: #9d174d; font-size: 11px; border-radius: 4px; padding: 2px 7px; font-weight: 600; }
.type-task { background: #e0f2fe; color: #0369a1; font-size: 11px; border-radius: 4px; padding: 2px 7px; font-weight: 600; }
.type-bug { background: #fee2e2; color: #991b1b; font-size: 11px; border-radius: 4px; padding: 2px 7px; font-weight: 600; }
.assignee { color: #374151; }
.unassigned { color: #9ca3af; font-style: italic; }
/* Parent group label */
.parent-row td { background: #f0f4f8; font-weight: 600; color: #1e2330; font-size: 12px; }
.indent { padding-left: 28px !important; }
.footer { text-align: center; font-size: 12px; color: #9ca3af; margin-top: 16px; }
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<h1>🚀 AI Accelerator — Daily Sprint Report</h1>
<div class="meta">
<span>📅 <strong>Date:</strong> {{FORMATTED_DATE}}</span>
<span>🔁 <strong>Sprint:</strong> {{SPRINT_NAME}} ({{SPRINT_DATES}})</span>
<span>🏢 <strong>Project:</strong> Security Product</span>
<span>👥 <strong>Team:</strong> AI Accelerator</span>
</div>
</div>
<!-- Summary Cards -->
<div class="summary-grid">
<div class="card">
<div class="value">{{TOTAL_ITEMS}}</div>
<div class="label">Total Items</div>
</div>
<div class="card">
<div class="value">{{TOTAL_STORIES}}</div>
<div class="label">User Stories</div>
</div>
<div class="card">
<div class="value">{{TOTAL_TASKS}}</div>
<div class="label">Tasks</div>
</div>
<div class="card">
<div class="value">{{TOTAL_BUGS}}</div>
<div class="label">Bugs</div>
</div>
<div class="card" style="border-top: 3px solid #6366f1;">
<div class="value" style="color:#6366f1;">{{COUNT_NEW}}</div>
<div class="label">New</div>
</div>
<div class="card" style="border-top: 3px solid #0f6cbf;">
<div class="value">{{COUNT_ACTIVE}}</div>
<div class="label">Active</div>
</div>
<div class="card green" style="border-top: 3px solid #16a34a;">
<div class="value">{{COUNT_CLOSED}}</div>
<div class="label">Closed</div>
</div>
</div>
<!-- Status Chart -->
<div class="chart-section">
<h2>📊 Status Breakdown</h2>
<div class="bar-row">
<div class="bar-label">New</div>
<div class="bar-track">
<div class="bar-fill new" style="width:{{BAR_WIDTH_NEW}}%;">{{COUNT_NEW}} items</div>
</div>
<div class="bar-count">{{COUNT_NEW}}</div>
</div>
<div class="bar-row">
<div class="bar-label">Active</div>
<div class="bar-track">
<div class="bar-fill active" style="width:{{BAR_WIDTH_ACTIVE}}%;">{{COUNT_ACTIVE}} items</div>
</div>
<div class="bar-count">{{COUNT_ACTIVE}}</div>
</div>
<div class="bar-row">
<div class="bar-label">Closed</div>
<div class="bar-track">
<div class="bar-fill closed" style="width:{{BAR_WIDTH_CLOSED}}%;">{{COUNT_CLOSED}} items</div>
</div>
<div class="bar-count">{{COUNT_CLOSED}}</div>
</div>
</div>
<!-- Work Items Section -->
<div class="section">
<div class="section-header">
<h2>📋 All Work Items</h2>
<span class="count-badge">{{TOTAL_ITEMS}}</span>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Assignee</th>
<th>Parent</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{{WORK_ITEMS_TABLE}}
</tbody>
</table>
</div>
<!-- Bugs Section -->
<div class="section">
<div class="section-header">
<h2>🐛 Bugs</h2>
<span class="count-badge" style="background:#fee2e2;color:#991b1b;">{{TOTAL_BUGS}}</span>
</div>
<table>
<tbody>
{{BUGS_TABLE}}
</tbody>
</table>
</div>
<!-- Assignee Breakdown -->
<div class="section">
<div class="section-header">
<h2>👤 Work by Assignee</h2>
</div>
<table>
<thead>
<tr>
<th>Team Member</th>
<th>Total Items</th>
<th>New</th>
<th>Active</th>
<th>Closed</th>
</tr>
</thead>
<tbody>
{{ASSIGNEE_BREAKDOWN}}
</tbody>
</table>
</div>
<div class="footer">
Generated automatically · AI Accelerator Daily Report · Sprint {{SPRINT_NAME}} · {{FOOTER_DATE}}
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment