Pages Hard
Construction — Contractor Dashboard
A rugged contractor admin dashboard with KPI cards for active jobs, monthly revenue, deployed crews and open estimates, a CSS bar chart of revenue by month, a jobs-by-status breakdown, crew utilization meters and a filterable recent-jobs table with status badges.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--hv: #f5c518; /* hi-vis yellow */
--steel: #2b3440;
--steel-d: #1b222b;
--bg: #eceae6; /* concrete */
--ink: #1a1d22;
--muted: #666c75;
--orange: #e8642a; /* safety orange */
--white: #ffffff;
--line: #d6d3cc;
--card: #ffffff;
--green: #2f9e5e;
--blue: #3a72c4;
--radius: 10px;
--shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 24px rgba(27, 34, 43, 0.06);
--font: 'Inter', system-ui, -apple-system, sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
body {
font-family: var(--font);
background:
repeating-linear-gradient(135deg, rgba(43, 52, 64, 0.015) 0 14px, transparent 14px 28px),
var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.shell {
max-width: 1180px;
margin: 0 auto;
padding: 0 20px 64px;
}
/* ---------- topbar ---------- */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 0;
border-bottom: 3px solid var(--steel);
position: sticky;
top: 0;
background: var(--bg);
z-index: 5;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
}
.brand__mark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--hv);
color: var(--steel-d);
font-weight: 900;
font-size: 18px;
letter-spacing: -0.5px;
border: 2px solid var(--steel-d);
border-radius: 6px;
transform: rotate(-3deg);
}
.brand__text {
display: flex;
flex-direction: column;
}
.brand__name {
font-weight: 800;
font-size: 18px;
letter-spacing: -0.4px;
text-transform: uppercase;
}
.brand__sub {
font-size: 12px;
color: var(--muted);
}
.topbar__right {
display: flex;
align-items: center;
gap: 14px;
}
.hazard {
width: 56px;
height: 18px;
border-radius: 3px;
background: repeating-linear-gradient(
-45deg,
var(--hv) 0 10px,
var(--steel-d) 10px 20px
);
}
.user {
display: flex;
flex-direction: column;
text-align: right;
line-height: 1.2;
}
.user__name {
font-weight: 700;
font-size: 14px;
}
.user__role {
font-size: 12px;
color: var(--muted);
}
.user__avatar {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--steel);
color: var(--white);
font-weight: 700;
font-size: 14px;
}
/* ---------- board head ---------- */
.board__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 28px 0 18px;
}
.board__head h1 {
font-size: 30px;
font-weight: 900;
letter-spacing: -1px;
text-transform: uppercase;
}
.board__week {
font-size: 13px;
color: var(--muted);
font-weight: 600;
}
/* ---------- KPI cards ---------- */
.kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 16px;
}
.kpi {
position: relative;
background: var(--card);
border: 1px solid var(--line);
border-left: 5px solid var(--steel);
border-radius: var(--radius);
padding: 18px 18px 16px;
box-shadow: var(--shadow);
overflow: hidden;
}
.kpi--hv {
border-left-color: var(--hv);
}
.kpi--orange {
border-left-color: var(--orange);
}
.kpi__label {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--muted);
}
.kpi__value {
display: block;
margin: 8px 0 6px;
font-size: 30px;
font-weight: 900;
letter-spacing: -1px;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.kpi__delta {
font-size: 12px;
font-weight: 700;
}
.kpi__delta--up {
color: var(--green);
}
.kpi__delta--down {
color: var(--orange);
}
.kpi__delta--flat {
color: var(--muted);
}
/* ---------- grid ---------- */
.grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow);
}
.panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.panel__head h2 {
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.panel__tag {
font-size: 11px;
font-weight: 700;
color: var(--muted);
background: var(--bg);
border: 1px solid var(--line);
padding: 3px 8px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
/* ---------- chart ---------- */
.panel--chart {
position: relative;
}
.chart {
display: flex;
align-items: flex-end;
gap: 14px;
height: 220px;
padding-top: 10px;
border-bottom: 2px solid var(--steel);
}
.bar {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 8px;
height: 100%;
cursor: pointer;
}
.bar__fill {
width: 100%;
max-width: 46px;
height: 0;
background: linear-gradient(180deg, var(--steel) 0%, var(--steel-d) 100%);
border-radius: 5px 5px 0 0;
transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s;
border-top: 3px solid var(--hv);
}
.bar:hover .bar__fill,
.bar:focus-visible .bar__fill {
background: linear-gradient(180deg, var(--orange) 0%, #c44e1c 100%);
border-top-color: var(--steel-d);
}
.bar__label {
font-size: 12px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
}
.bar:focus-visible {
outline: 3px solid var(--hv);
outline-offset: 2px;
border-radius: 4px;
}
.chart__tooltip {
position: absolute;
pointer-events: none;
background: var(--steel-d);
color: var(--white);
font-size: 12px;
font-weight: 700;
padding: 6px 10px;
border-radius: 6px;
transform: translate(-50%, -100%);
white-space: nowrap;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.chart__tooltip::after {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--steel-d);
border-bottom: 0;
}
/* ---------- statuses ---------- */
.statuses,
.crews {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.status-row {
display: grid;
grid-template-columns: 14px 1fr 1fr auto;
align-items: center;
gap: 10px;
font-size: 13px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 3px;
}
.dot--prog {
background: var(--blue);
}
.dot--sched {
background: var(--hv);
}
.dot--hold {
background: var(--orange);
}
.dot--done {
background: var(--green);
}
.status-row__name {
font-weight: 600;
}
.status-row__bar {
height: 8px;
background: var(--bg);
border-radius: 999px;
overflow: hidden;
}
.status-row__bar > span {
display: block;
height: 100%;
background: var(--steel);
border-radius: 999px;
}
.status-row__n {
font-weight: 800;
font-variant-numeric: tabular-nums;
min-width: 24px;
text-align: right;
}
/* ---------- crews ---------- */
.crew__top {
display: flex;
justify-content: space-between;
font-size: 13px;
margin-bottom: 6px;
}
.crew__name {
font-weight: 600;
}
.crew__pct {
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.crew__meter {
height: 9px;
background: var(--bg);
border-radius: 999px;
overflow: hidden;
}
.crew__fill {
display: block;
height: 100%;
border-radius: 999px;
}
.crew__fill--high {
background: var(--orange);
}
.crew__fill--mid {
background: var(--hv);
}
.crew__fill--low {
background: var(--green);
}
/* ---------- table ---------- */
.panel--table {
margin-top: 0;
}
.filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.chip {
font-family: var(--font);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--steel);
background: var(--white);
border: 1.5px solid var(--line);
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
transition: all 0.12s;
}
.chip:hover {
border-color: var(--steel);
}
.chip.is-active {
background: var(--steel);
color: var(--white);
border-color: var(--steel-d);
}
.chip__n {
display: inline-block;
margin-left: 4px;
opacity: 0.7;
}
.chip:focus-visible {
outline: 3px solid var(--hv);
outline-offset: 2px;
}
.table-wrap {
overflow-x: auto;
}
.jobs {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 640px;
}
.jobs th {
text-align: left;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--muted);
font-weight: 700;
padding: 10px 12px;
border-bottom: 2px solid var(--steel);
}
.jobs th.num,
.jobs td.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.jobs td {
padding: 12px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.jobs tbody tr:hover {
background: rgba(245, 197, 24, 0.07);
}
.job__name {
font-weight: 700;
}
.job__id {
display: block;
font-size: 11px;
color: var(--muted);
font-weight: 600;
}
.badge {
display: inline-block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 4px 9px;
border-radius: 6px;
border: 1.5px solid;
white-space: nowrap;
}
.badge--progress {
color: var(--blue);
border-color: var(--blue);
background: rgba(58, 114, 196, 0.1);
}
.badge--scheduled {
color: #8a6d00;
border-color: var(--hv);
background: rgba(245, 197, 24, 0.18);
}
.badge--hold {
color: var(--orange);
border-color: var(--orange);
background: rgba(232, 100, 42, 0.1);
}
.badge--complete {
color: var(--green);
border-color: var(--green);
background: rgba(47, 158, 94, 0.1);
}
.empty {
text-align: center;
color: var(--muted);
font-weight: 600;
padding: 28px 0;
}
/* ---------- responsive ---------- */
@media (max-width: 920px) {
.kpis {
grid-template-columns: repeat(2, 1fr);
}
.grid {
grid-template-columns: 1fr 1fr;
}
.panel--chart {
grid-column: 1 / -1;
}
}
@media (max-width: 520px) {
.shell {
padding: 0 14px 48px;
}
.topbar__right {
gap: 10px;
}
.hazard,
.user {
display: none;
}
.board__head {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.board__head h1 {
font-size: 24px;
}
.kpis {
grid-template-columns: 1fr;
}
.grid {
grid-template-columns: 1fr;
}
.kpi__value {
font-size: 26px;
}
.chart {
height: 180px;
gap: 8px;
}
.panel__head {
align-items: flex-start;
}
}(function () {
"use strict";
/* ---------- animated KPI counters ---------- */
function animateCount(el) {
var target = parseFloat(el.getAttribute("data-count")) || 0;
var prefix = el.getAttribute("data-prefix") || "";
var dur = 900;
var start = performance.now();
function step(now) {
var p = Math.min((now - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
var val = Math.round(target * eased);
el.textContent = prefix + val.toLocaleString("en-US");
if (p < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
document.querySelectorAll(".kpi__value[data-count]").forEach(animateCount);
/* ---------- revenue bar chart ---------- */
var revenue = [
{ m: "Jan", v: 312400 },
{ m: "Feb", v: 358900 },
{ m: "Mar", v: 401200 },
{ m: "Apr", v: 376500 },
{ m: "May", v: 437200 },
{ m: "Jun", v: 487300 }
];
var max = Math.max.apply(null, revenue.map(function (d) { return d.v; }));
var chart = document.getElementById("chart");
var tooltip = document.getElementById("tooltip");
function money(n) {
return "$" + n.toLocaleString("en-US");
}
if (chart) {
revenue.forEach(function (d) {
var bar = document.createElement("div");
bar.className = "bar";
bar.tabIndex = 0;
bar.setAttribute("role", "listitem");
bar.setAttribute("aria-label", d.m + " 2026: " + money(d.v));
var fill = document.createElement("div");
fill.className = "bar__fill";
var label = document.createElement("span");
label.className = "bar__label";
label.textContent = d.m;
bar.appendChild(fill);
bar.appendChild(label);
chart.appendChild(bar);
// animate height after paint
requestAnimationFrame(function () {
fill.style.height = Math.round((d.v / max) * 100) + "%";
});
function showTip() {
if (!tooltip) return;
tooltip.hidden = false;
tooltip.textContent = d.m + " — " + money(d.v);
var br = bar.getBoundingClientRect();
var cr = chart.parentElement.getBoundingClientRect();
tooltip.style.left = br.left - cr.left + br.width / 2 + "px";
tooltip.style.top = br.top - cr.top - 6 + "px";
}
function hideTip() {
if (tooltip) tooltip.hidden = true;
}
bar.addEventListener("mouseenter", showTip);
bar.addEventListener("mousemove", showTip);
bar.addEventListener("mouseleave", hideTip);
bar.addEventListener("focus", showTip);
bar.addEventListener("blur", hideTip);
});
}
/* ---------- recent jobs table ---------- */
var jobs = [
{ id: "JOB-2241", name: "Maple Ridge Kitchen Remodel", client: "Dana & Paul Whitfield", site: "418 Maple Ridge Dr", value: 84500, crew: "Finish · Crew D", status: "progress" },
{ id: "JOB-2238", name: "Lakeshore Office Build-Out", client: "Northwind Capital LLC", site: "2200 Lakeshore Blvd, Ste 7", value: 312000, crew: "Framing · Crew B", status: "progress" },
{ id: "JOB-2247", name: "Harbor View Deck & Pergola", client: "Renee Alvarado", site: "61 Harbor View Ln", value: 38900, crew: "Sitework · Crew F", status: "scheduled" },
{ id: "JOB-2230", name: "Cedar Hollow Foundation Pour", client: "Cedar Hollow Homes", site: "Lot 14, Cedar Hollow", value: 156400, crew: "Concrete · Crew A", status: "progress" },
{ id: "JOB-2219", name: "Greenway Roof Replacement", client: "Greenway HOA", site: "Bldgs 3–5, Greenway Ct", value: 98700, crew: "Roofing · Crew E", status: "hold" },
{ id: "JOB-2252", name: "Sunset Bistro TI Fit-Out", client: "Sunset Bistro Group", site: "75 Market St, Unit 2", value: 224800, crew: "MEP · Crew C", status: "scheduled" },
{ id: "JOB-2205", name: "Birchwood ADU Garage Conversion", client: "Tomás & Lena Ortiz", site: "33 Birchwood Ave", value: 67200, crew: "Finish · Crew D", status: "complete" },
{ id: "JOB-2243", name: "Ironside Warehouse Slab Repair", client: "Ironside Logistics", site: "900 Industrial Pkwy", value: 41300, crew: "Concrete · Crew A", status: "progress" },
{ id: "JOB-2211", name: "Willow Park Bathroom Suite", client: "Karen Boateng", site: "12 Willow Park Rd", value: 29850, crew: "MEP · Crew C", status: "hold" },
{ id: "JOB-2199", name: "Hillcrest Retaining Wall", client: "City of Hillcrest", site: "Hillcrest Trailhead", value: 73600, crew: "Sitework · Crew F", status: "complete" }
];
var labels = {
progress: "In progress",
scheduled: "Scheduled",
hold: "On hold",
complete: "Complete"
};
var body = document.getElementById("jobs-body");
var empty = document.getElementById("empty");
var chips = Array.prototype.slice.call(document.querySelectorAll(".chip"));
function render(filter) {
var rows = jobs.filter(function (j) {
return filter === "all" || j.status === filter;
});
body.innerHTML = "";
rows.forEach(function (j) {
var tr = document.createElement("tr");
tr.innerHTML =
'<td><span class="job__name">' + j.name + '</span>' +
'<span class="job__id">' + j.id + "</span></td>" +
"<td>" + j.client + "</td>" +
"<td>" + j.site + "</td>" +
'<td class="num">$' + j.value.toLocaleString("en-US") + "</td>" +
"<td>" + j.crew + "</td>" +
'<td><span class="badge badge--' + j.status + '">' + labels[j.status] + "</span></td>";
body.appendChild(tr);
});
if (empty) empty.hidden = rows.length !== 0;
}
// counts per filter for the chips
document.getElementById("cnt-all").textContent = jobs.length;
chips.forEach(function (chip) {
chip.addEventListener("click", function () {
chips.forEach(function (c) {
c.classList.remove("is-active");
c.setAttribute("aria-pressed", "false");
});
chip.classList.add("is-active");
chip.setAttribute("aria-pressed", "true");
render(chip.getAttribute("data-filter"));
});
});
render("all");
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contractor Dashboard — Bedrock Builders</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="shell">
<header class="topbar">
<div class="brand">
<span class="brand__mark" aria-hidden="true">BB</span>
<div class="brand__text">
<span class="brand__name">Bedrock Builders</span>
<span class="brand__sub">General Contracting · Lic. #CGC-148820</span>
</div>
</div>
<div class="topbar__right">
<span class="hazard" aria-hidden="true"></span>
<div class="user">
<span class="user__name">Marcus Reyes</span>
<span class="user__role">Operations Lead</span>
</div>
<span class="user__avatar" aria-hidden="true">MR</span>
</div>
</header>
<main class="board">
<div class="board__head">
<h1>Dashboard</h1>
<p class="board__week">Week of Jun 16 – Jun 22, 2026</p>
</div>
<!-- KPI CARDS -->
<section class="kpis" aria-label="Key metrics">
<article class="kpi kpi--hv">
<span class="kpi__label">Active Jobs</span>
<span class="kpi__value" data-count="14">0</span>
<span class="kpi__delta kpi__delta--up">▲ 2 vs last week</span>
</article>
<article class="kpi">
<span class="kpi__label">Revenue This Month</span>
<span class="kpi__value" data-count="487300" data-prefix="$">0</span>
<span class="kpi__delta kpi__delta--up">▲ 11.4% MoM</span>
</article>
<article class="kpi">
<span class="kpi__label">Crews Deployed</span>
<span class="kpi__value" data-count="6">0</span>
<span class="kpi__delta kpi__delta--flat">– same as last week</span>
</article>
<article class="kpi kpi--orange">
<span class="kpi__label">Open Estimates</span>
<span class="kpi__value" data-count="9">0</span>
<span class="kpi__delta kpi__delta--down">▼ 3 awaiting sign-off</span>
</article>
</section>
<div class="grid">
<!-- REVENUE BAR CHART -->
<section class="panel panel--chart" aria-label="Revenue by month">
<div class="panel__head">
<h2>Revenue by Month</h2>
<span class="panel__tag">Last 6 months</span>
</div>
<div class="chart" id="chart" role="img" aria-label="Bar chart of monthly revenue from January to June 2026">
<!-- bars injected by script -->
</div>
<div class="chart__tooltip" id="tooltip" hidden></div>
</section>
<!-- JOBS BY STATUS -->
<section class="panel" aria-label="Jobs by status">
<div class="panel__head">
<h2>Jobs by Status</h2>
<span class="panel__tag">23 total</span>
</div>
<ul class="statuses">
<li class="status-row">
<span class="dot dot--prog" aria-hidden="true"></span>
<span class="status-row__name">In progress</span>
<span class="status-row__bar"><span style="width:61%"></span></span>
<span class="status-row__n">14</span>
</li>
<li class="status-row">
<span class="dot dot--sched" aria-hidden="true"></span>
<span class="status-row__name">Scheduled</span>
<span class="status-row__bar"><span style="width:22%"></span></span>
<span class="status-row__n">5</span>
</li>
<li class="status-row">
<span class="dot dot--hold" aria-hidden="true"></span>
<span class="status-row__name">On hold</span>
<span class="status-row__bar"><span style="width:9%"></span></span>
<span class="status-row__n">2</span>
</li>
<li class="status-row">
<span class="dot dot--done" aria-hidden="true"></span>
<span class="status-row__name">Complete (MTD)</span>
<span class="status-row__bar"><span style="width:8%"></span></span>
<span class="status-row__n">2</span>
</li>
</ul>
</section>
<!-- CREW UTILIZATION -->
<section class="panel" aria-label="Crew utilization">
<div class="panel__head">
<h2>Crew Utilization</h2>
<span class="panel__tag">This week</span>
</div>
<ul class="crews">
<li class="crew">
<div class="crew__top"><span class="crew__name">Concrete · Crew A</span><span class="crew__pct">95%</span></div>
<div class="crew__meter"><span class="crew__fill crew__fill--high" style="width:95%"></span></div>
</li>
<li class="crew">
<div class="crew__top"><span class="crew__name">Framing · Crew B</span><span class="crew__pct">82%</span></div>
<div class="crew__meter"><span class="crew__fill crew__fill--high" style="width:82%"></span></div>
</li>
<li class="crew">
<div class="crew__top"><span class="crew__name">MEP · Crew C</span><span class="crew__pct">68%</span></div>
<div class="crew__meter"><span class="crew__fill crew__fill--mid" style="width:68%"></span></div>
</li>
<li class="crew">
<div class="crew__top"><span class="crew__name">Finish · Crew D</span><span class="crew__pct">54%</span></div>
<div class="crew__meter"><span class="crew__fill crew__fill--mid" style="width:54%"></span></div>
</li>
<li class="crew">
<div class="crew__top"><span class="crew__name">Roofing · Crew E</span><span class="crew__pct">38%</span></div>
<div class="crew__meter"><span class="crew__fill crew__fill--low" style="width:38%"></span></div>
</li>
<li class="crew">
<div class="crew__top"><span class="crew__name">Sitework · Crew F</span><span class="crew__pct">21%</span></div>
<div class="crew__meter"><span class="crew__fill crew__fill--low" style="width:21%"></span></div>
</li>
</ul>
</section>
</div>
<!-- RECENT JOBS TABLE -->
<section class="panel panel--table" aria-label="Recent jobs">
<div class="panel__head">
<h2>Recent Jobs</h2>
<div class="filters" role="group" aria-label="Filter jobs by status">
<button class="chip is-active" data-filter="all" aria-pressed="true">All <span class="chip__n" id="cnt-all">0</span></button>
<button class="chip" data-filter="progress" aria-pressed="false">In progress</button>
<button class="chip" data-filter="scheduled" aria-pressed="false">Scheduled</button>
<button class="chip" data-filter="hold" aria-pressed="false">On hold</button>
<button class="chip" data-filter="complete" aria-pressed="false">Complete</button>
</div>
</div>
<div class="table-wrap">
<table class="jobs">
<thead>
<tr>
<th scope="col">Job</th>
<th scope="col">Client</th>
<th scope="col">Site</th>
<th scope="col" class="num">Contract</th>
<th scope="col">Crew</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody id="jobs-body">
<!-- rows injected by script -->
</tbody>
</table>
</div>
<p class="empty" id="empty" hidden>No jobs match this filter.</p>
</section>
</main>
</div>
<script src="script.js"></script>
</body>
</html>Contractor Dashboard
A back-office overview built for a general contractor. The top row stacks four chunky KPI cards — active jobs, revenue this month, crews deployed and open estimates — each with a trend delta and a hi-vis accent. Below them a CSS-only bar chart plots revenue across the last six months with animated bars and an interactive tooltip on hover.
The middle band splits into a jobs-by-status breakdown (in progress, scheduled, on hold, complete) and a set of crew utilization meters showing how booked each crew is this week. A recent jobs table rounds it out, with client, site, value, crew and status badges, plus filter chips that re-render the rows live and keep a running count.
Everything is vanilla HTML, CSS and JavaScript — no frameworks, no build step. The bar chart, the animated KPI counters and the table filters all work the moment you drop the three snippets together.
Illustrative UI only — not for real construction management.