mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-07-27 22:45:03 +00:00
a0f865ad85
Static Stitch export previously only available locally; referenced by the Ara Projects issues (#405-#429). README explains which parts are spec vs placeholder. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
448 lines
No EOL
21 KiB
HTML
448 lines
No EOL
21 KiB
HTML
<!DOCTYPE html><html lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Programme Dashboard (Three-Band Layout)</title>
|
|
<!--
|
|
Ara Projects wireframe — Programme Dashboard (Three-Band Layout)
|
|
Journey 1 — Admin import · screen 12 of 12
|
|
Stitch project 8537473387290162501 · screen 7811d91c3e3840369266ca99b145b03f
|
|
Original HTML <title>: Programme Dashboard - Domna
|
|
Self-contained export: Tailwind, fonts and images vendored to ../assets/.
|
|
Body markup is unmodified except for these local asset paths.
|
|
-->
|
|
<script src="../assets/tailwind-play.js"></script>
|
|
<link href="../assets/fonts.css" rel="stylesheet">
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"primary": "#2a347a",
|
|
"primary-dark": "#222a63",
|
|
"accent": "#3d9be9",
|
|
"tan": "#bd9967",
|
|
"tan-soft": "#f4ebdc",
|
|
"error": "#b3261e",
|
|
"error-soft": "#fdecea",
|
|
"canvas": "#eef4fc",
|
|
"surface": "#ffffff",
|
|
"surface-low": "#e3edf9",
|
|
"surface-high": "#d9e5f4",
|
|
"line": "#d2ddec",
|
|
"ink": "#111111",
|
|
"ink-muted": "#4c5768",
|
|
"ink-soft": "#6f7a8a",
|
|
"on-primary": "#ffffff",
|
|
"on-surface": "#111111"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"xl": "40px",
|
|
"sm": "8px",
|
|
"xs": "4px",
|
|
"header-height": "64px",
|
|
"lg": "24px",
|
|
"max-width": "1440px",
|
|
"sidebar-width": "256px",
|
|
"md": "16px"
|
|
},
|
|
"fontFamily": {
|
|
"display": ["Montserrat"],
|
|
"body": ["Montserrat"],
|
|
"h2": ["Montserrat"],
|
|
"technical": ["Questrial"],
|
|
"overline": ["Questrial"],
|
|
"h1": ["Montserrat"],
|
|
"display-mobile": ["Montserrat"],
|
|
"subheading": ["Montserrat"],
|
|
"body-bold": ["Montserrat"],
|
|
"h3": ["Montserrat"]
|
|
},
|
|
"fontSize": {
|
|
"display": ["36px", { "lineHeight": "1.1", "fontWeight": "800" }],
|
|
"body": ["14px", { "lineHeight": "1.25", "fontWeight": "500" }],
|
|
"h2": ["24px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
|
"technical": ["12px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"overline": ["11px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700" }],
|
|
"h1": ["30px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
|
"display-mobile": ["32px", { "lineHeight": "1.1", "fontWeight": "800" }],
|
|
"subheading": ["18px", { "lineHeight": "1.4", "fontWeight": "700" }],
|
|
"body-bold": ["14px", { "lineHeight": "1.25", "fontWeight": "600" }],
|
|
"h3": ["20px", { "lineHeight": "1.4", "fontWeight": "700" }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@keyframes slide-in-right {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animate-slide-in-right {
|
|
animation: slide-in-right 400ms ease-out forwards;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-slide-in-right {
|
|
animation: none;
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
</style></head>
|
|
<body class="bg-canvas text-ink font-body min-h-screen pt-header-height">
|
|
<!-- TopNavBar -->
|
|
<nav class="fixed top-0 w-full h-header-height z-50 flex justify-between items-center px-lg bg-surface border-b border-line">
|
|
<div class="flex items-center gap-xl">
|
|
<div class="flex items-center gap-md">
|
|
<div class="font-display text-h3 text-primary flex items-center gap-xs">
|
|
<span aria-hidden="true" class="material-symbols-outlined">layers</span>
|
|
Domna
|
|
</div>
|
|
<div class="hidden lg:flex items-center gap-xs bg-surface-low px-2 py-1 rounded-DEFAULT text-ink-muted text-technical font-body-bold">
|
|
<span aria-hidden="true" class="material-symbols-outlined text-[16px]">domain</span>
|
|
Stonewater
|
|
</div>
|
|
</div>
|
|
<div class="hidden lg:flex gap-lg h-full items-end">
|
|
<a class="text-primary border-b-2 border-primary pb-1 font-body-bold" href="#">Dashboard</a>
|
|
<a class="text-ink-muted hover:text-primary transition-colors pb-1" href="#">Work orders</a>
|
|
<a class="text-ink-muted hover:text-primary transition-colors pb-1" href="#">Workstreams</a>
|
|
<a class="text-ink-muted hover:text-primary transition-colors pb-1" href="#">Properties</a>
|
|
<a class="text-ink-muted hover:text-primary transition-colors pb-1" href="#">Documents</a>
|
|
<a class="text-ink-muted hover:text-primary transition-colors pb-1" href="#">Imports</a>
|
|
<a class="text-ink-muted hover:text-primary transition-colors pb-1" href="#">Reports</a>
|
|
<a class="text-ink-muted hover:text-primary transition-colors pb-1" href="#">Admin</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-md">
|
|
<label class="hidden md:flex items-center gap-xs cursor-pointer text-ink-muted hover:text-primary transition-colors">
|
|
<input class="rounded border-line text-primary focus:ring-primary bg-surface w-4 h-4 cursor-pointer" type="checkbox">
|
|
<span class="font-body-bold">View as contractor</span>
|
|
</label>
|
|
<div class="w-px h-6 bg-line hidden md:block"></div>
|
|
<button aria-label="Help" class="text-ink-muted hover:text-primary transition-colors cursor-pointer active:opacity-80 p-sm">
|
|
<span class="material-symbols-outlined">help</span>
|
|
</button>
|
|
<button aria-label="User account" class="w-8 h-8 rounded-full bg-surface-low text-primary flex items-center justify-center border border-line hover:bg-surface-high transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]">person</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<!-- Main Content -->
|
|
<main class="max-w-[1440px] mx-auto px-lg py-lg space-y-md md:space-y-lg animate-slide-in-right">
|
|
<!-- Header Info -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-sm">
|
|
<div>
|
|
<h1 class="font-h1 text-h1 text-primary">Programme dashboard</h1>
|
|
<div class="flex items-center gap-sm mt-xs">
|
|
<span class="bg-surface-low text-ink-muted px-2 py-1 rounded font-technical text-technical">Sample data</span>
|
|
<p class="font-technical text-technical text-ink-soft">Last updated today, 09:14</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-sm">
|
|
<button class="flex items-center gap-xs px-md py-sm bg-surface-low border border-line rounded-DEFAULT hover:bg-surface-high transition-colors text-primary font-body-bold">
|
|
<span aria-hidden="true" class="material-symbols-outlined text-[20px]">upload</span>
|
|
Import
|
|
</button>
|
|
<button class="flex items-center gap-xs px-md py-sm bg-primary text-on-primary rounded-DEFAULT hover:bg-primary-dark transition-colors font-body-bold shadow-sm">
|
|
<span aria-hidden="true" class="material-symbols-outlined text-[20px]">add</span>
|
|
Add work order
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Band 1: Programme -->
|
|
<section class="bg-primary rounded-lg p-lg text-on-primary shadow-sm relative overflow-hidden flex flex-col md:flex-row gap-lg">
|
|
<div class="absolute right-0 top-0 w-1/2 h-full opacity-10 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-white via-transparent to-transparent"></div>
|
|
<div class="flex-1 border-b md:border-b-0 md:border-r border-surface-low/20 pb-sm md:pb-0 md:pr-lg flex flex-col justify-center h-[120px]">
|
|
<h2 class="font-subheading text-subheading text-surface-low">Total work orders</h2>
|
|
<div class="font-display text-[48px] font-extrabold leading-none mt-sm">1,231</div>
|
|
</div>
|
|
<div class="flex-1 flex flex-col justify-center h-[120px] md:pl-md">
|
|
<h2 class="font-subheading text-subheading text-surface-low">Handover evidence</h2>
|
|
<div class="font-display text-[48px] font-extrabold leading-none mt-sm">82%</div>
|
|
<div class="w-full bg-surface-low/20 rounded-full h-1 mt-md max-w-sm">
|
|
<div class="bg-tan h-1 rounded-full" style="width: 82%"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Band 2: Programme Health -->
|
|
<section>
|
|
<h3 class="font-subheading text-subheading text-primary mb-sm">Programme Health</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-md">
|
|
<div class="bg-surface p-md rounded-lg border border-line shadow-sm flex flex-col gap-sm justify-center h-[90px]">
|
|
<div class="font-overline text-overline text-ink-muted uppercase tracking-wider">Total work orders</div>
|
|
<div class="font-h2 text-h2 text-ink">1,231</div>
|
|
</div>
|
|
<div class="bg-surface p-md rounded-lg border border-line shadow-sm flex flex-col gap-sm justify-center h-[90px]">
|
|
<div class="font-overline text-overline text-ink-muted uppercase tracking-wider">In progress</div>
|
|
<div class="font-h2 text-h2 text-ink">312</div>
|
|
</div>
|
|
<div class="bg-surface p-md rounded-lg border border-line shadow-sm flex flex-col gap-sm justify-center h-[90px]">
|
|
<div class="font-overline text-overline text-ink-muted uppercase tracking-wider">Completed</div>
|
|
<div class="font-h2 text-h2 text-ink">486</div>
|
|
</div>
|
|
<div class="bg-surface p-md rounded-lg border border-error/50 ring-1 ring-error/20 shadow-sm flex flex-col gap-sm justify-center h-[90px]">
|
|
<div class="font-overline text-overline text-error uppercase tracking-wider">Overdue</div>
|
|
<div class="font-h2 text-h2 text-error">74</div>
|
|
</div>
|
|
<div class="bg-surface p-md rounded-lg border border-line shadow-sm flex flex-col gap-sm justify-center h-[90px]">
|
|
<div class="font-overline text-overline text-ink-muted uppercase tracking-wider">Handover evidence</div>
|
|
<div class="font-h2 text-h2 text-ink">82%</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Band 3: Needs attention row -->
|
|
<section>
|
|
<h3 class="font-subheading text-subheading text-primary mb-sm">Needs Attention</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-md">
|
|
<div class="bg-surface p-md rounded-lg border border-line shadow-sm flex flex-col gap-xs justify-between h-[100px]">
|
|
<div class="font-overline text-overline text-ink-muted uppercase tracking-wider">Awaiting auth</div>
|
|
<div class="flex justify-between items-end">
|
|
<div class="font-h2 text-h2 text-ink">31</div>
|
|
<a class="text-primary hover:underline text-sm font-body-bold" href="#">Review</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-error-soft p-md rounded-lg border border-error/20 shadow-sm flex flex-col gap-xs justify-between h-[100px]">
|
|
<div class="font-overline text-overline text-error uppercase tracking-wider">Overdue</div>
|
|
<div class="flex justify-between items-end">
|
|
<div class="font-h2 text-h2 text-error">74</div>
|
|
<a class="text-error hover:underline text-sm font-body-bold" href="#">Review</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface p-md rounded-lg border border-line shadow-sm flex flex-col gap-xs justify-between h-[100px]">
|
|
<div class="font-overline text-overline text-ink-muted uppercase tracking-wider">No access</div>
|
|
<div class="flex justify-between items-end">
|
|
<div class="font-h2 text-h2 text-ink">18</div>
|
|
<a class="text-primary hover:underline text-sm font-body-bold" href="#">Review</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface p-md rounded-lg border border-line shadow-sm flex flex-col gap-xs justify-between h-[100px]">
|
|
<div class="font-overline text-overline text-ink-muted uppercase tracking-wider">Missing Handover</div>
|
|
<div class="flex justify-between items-end">
|
|
<div class="font-h2 text-h2 text-ink">96</div>
|
|
<a class="text-primary hover:underline text-sm font-body-bold" href="#">Review</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-tan-soft p-md rounded-lg border border-tan/30 shadow-sm flex flex-col gap-xs justify-between h-[100px]">
|
|
<div class="font-overline text-overline text-[#5d4218] uppercase tracking-wider">Priority Orders</div>
|
|
<div class="flex justify-between items-end">
|
|
<div class="font-h2 text-h2 text-[#5d4218]">12</div>
|
|
<a class="text-[#5d4218] hover:underline text-sm font-body-bold" href="#">Review</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-lg">
|
|
<!-- Workstream table -->
|
|
<section class="bg-surface rounded-lg border border-line shadow-sm overflow-hidden flex flex-col h-[400px]">
|
|
<div class="p-md border-b border-line bg-surface-low/30 sticky top-0 z-10">
|
|
<h3 class="font-h3 text-h3 text-primary">Workstreams</h3>
|
|
</div>
|
|
<div class="overflow-y-auto flex-1">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead class="sticky top-0 bg-surface z-10 shadow-sm">
|
|
<tr class="border-b border-line bg-surface-low/10">
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal">Name</th>
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal text-right">Orders</th>
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal text-right">% Complete</th>
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal text-right">Overdue</th>
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal text-right">Missing docs</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-body text-ink divide-y divide-line">
|
|
<tr class="hover:bg-surface-low/30 transition-colors">
|
|
<td class="p-sm font-body-bold">Windows</td>
|
|
<td class="p-sm text-right">240</td>
|
|
<td class="p-sm text-right">61%</td>
|
|
<td class="p-sm text-right text-error font-body-bold">18</td>
|
|
<td class="p-sm text-right">22</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-low/30 transition-colors">
|
|
<td class="p-sm font-body-bold">Doors</td>
|
|
<td class="p-sm text-right">180</td>
|
|
<td class="p-sm text-right">54%</td>
|
|
<td class="p-sm text-right text-error font-body-bold">9</td>
|
|
<td class="p-sm text-right">14</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-low/30 transition-colors">
|
|
<td class="p-sm font-body-bold">Roofs</td>
|
|
<td class="p-sm text-right">72</td>
|
|
<td class="p-sm text-right">38%</td>
|
|
<td class="p-sm text-right text-error font-body-bold">12</td>
|
|
<td class="p-sm text-right">19</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-low/30 transition-colors">
|
|
<td class="p-sm font-body-bold">Kitchens</td>
|
|
<td class="p-sm text-right">210</td>
|
|
<td class="p-sm text-right">47%</td>
|
|
<td class="p-sm text-right text-error font-body-bold">14</td>
|
|
<td class="p-sm text-right">16</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-low/30 transition-colors">
|
|
<td class="p-sm font-body-bold">Bathrooms</td>
|
|
<td class="p-sm text-right">195</td>
|
|
<td class="p-sm text-right">51%</td>
|
|
<td class="p-sm text-right text-error font-body-bold">8</td>
|
|
<td class="p-sm text-right">11</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-low/30 transition-colors">
|
|
<td class="p-sm font-body-bold">Asbestos</td>
|
|
<td class="p-sm text-right">44</td>
|
|
<td class="p-sm text-right">72%</td>
|
|
<td class="p-sm text-right text-error font-body-bold">2</td>
|
|
<td class="p-sm text-right">3</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-low/30 transition-colors">
|
|
<td class="p-sm font-body-bold">Electrical heating</td>
|
|
<td class="p-sm text-right">96</td>
|
|
<td class="p-sm text-right">33%</td>
|
|
<td class="p-sm text-right text-error font-body-bold">11</td>
|
|
<td class="p-sm text-right">9</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-low/30 transition-colors">
|
|
<td class="p-sm font-body-bold">Cyclical decorations</td>
|
|
<td class="p-sm text-right">194</td>
|
|
<td class="p-sm text-right">45%</td>
|
|
<td class="p-sm text-right">0</td>
|
|
<td class="p-sm text-right">2</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<!-- Contractor table -->
|
|
<section class="bg-surface rounded-lg border border-line shadow-sm overflow-hidden flex flex-col h-[400px]">
|
|
<div class="p-md border-b border-line bg-surface-low/30 sticky top-0 z-10">
|
|
<h3 class="font-h3 text-h3 text-primary">Contractors</h3>
|
|
</div>
|
|
<div class="overflow-y-auto flex-1">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead class="sticky top-0 bg-surface z-10 shadow-sm">
|
|
<tr class="border-b border-line bg-surface-low/10">
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal">Contractor</th>
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal text-right">Orders</th>
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal text-right">Overdue</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-body text-ink divide-y divide-line">
|
|
<tr class="hover:bg-surface-low/30 transition-colors">
|
|
<td class="p-sm font-body-bold">Contractor A</td>
|
|
<td class="p-sm text-right">420</td>
|
|
<td class="p-sm text-right text-error font-body-bold">68</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-low/30 transition-colors">
|
|
<td class="p-sm font-body-bold">Contractor B</td>
|
|
<td class="p-sm text-right">315</td>
|
|
<td class="p-sm text-right text-error font-body-bold">12</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-low/30 transition-colors">
|
|
<td class="p-sm font-body-bold">Contractor C</td>
|
|
<td class="p-sm text-right">210</td>
|
|
<td class="p-sm text-right text-error font-body-bold">4</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="p-md text-ink-muted text-sm font-technical border-t border-line mt-auto">
|
|
Note: 286 work orders currently unassigned
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- Recent work orders -->
|
|
<section class="bg-surface rounded-lg border border-line shadow-sm overflow-hidden">
|
|
<div class="p-md border-b border-line bg-surface-low/30 flex justify-between items-center">
|
|
<h3 class="font-h3 text-h3 text-primary">Recent work orders</h3>
|
|
<button class="text-primary hover:text-primary-dark font-body-bold text-sm transition-colors">View all</button>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="border-b border-line bg-surface-low/10">
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal">ID</th>
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal">Asset</th>
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal">Property</th>
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal">Workstream</th>
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal">Contractor</th>
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal">Status</th>
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal text-right">Date</th>
|
|
<th class="p-sm font-overline text-overline text-ink-muted font-normal text-right">Handover</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-body text-ink divide-y divide-line">
|
|
<tr class="hover:bg-surface-low/30 transition-colors cursor-pointer">
|
|
<td class="p-sm font-technical text-ink-muted">WO-23881</td>
|
|
<td class="p-sm text-ink-muted">100245</td>
|
|
<td class="p-sm">12 High St</td>
|
|
<td class="p-sm">Windows</td>
|
|
<td class="p-sm">Contractor A</td>
|
|
<td class="p-sm"><span class="inline-block px-2 py-1 bg-surface-low text-ink rounded text-xs font-body-bold">Awaiting authorisation</span></td>
|
|
<td class="p-sm text-right text-ink-muted">12 Jul</td>
|
|
<td class="p-sm text-right text-ink-muted">2/4</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-low/30 transition-colors cursor-pointer">
|
|
<td class="p-sm font-technical text-ink-muted">WO-23882</td>
|
|
<td class="p-sm text-ink-muted">100245</td>
|
|
<td class="p-sm">12 High St</td>
|
|
<td class="p-sm">Bathrooms</td>
|
|
<td class="p-sm">Contractor B</td>
|
|
<td class="p-sm"><span class="inline-block px-2 py-1 bg-surface-low text-ink rounded text-xs font-body-bold">In progress</span></td>
|
|
<td class="p-sm text-right text-ink-muted">18 Jul</td>
|
|
<td class="p-sm text-right text-ink-muted">1/4</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-low/30 transition-colors cursor-pointer bg-error-soft/50">
|
|
<td class="p-sm font-technical text-ink-muted">WO-23883</td>
|
|
<td class="p-sm text-ink-muted">100309</td>
|
|
<td class="p-sm">4 Vale Rd</td>
|
|
<td class="p-sm">Roofs</td>
|
|
<td class="p-sm">Contractor A</td>
|
|
<td class="p-sm"><span class="inline-block px-2 py-1 bg-error-soft text-error rounded text-xs font-body-bold">Overdue</span></td>
|
|
<td class="p-sm text-right text-ink-muted">03 Jul</td>
|
|
<td class="p-sm text-right text-ink-muted">0/4</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-low/30 transition-colors cursor-pointer">
|
|
<td class="p-sm font-technical text-ink-muted">WO-23884</td>
|
|
<td class="p-sm text-ink-muted">100412</td>
|
|
<td class="p-sm">8 Mill Lane</td>
|
|
<td class="p-sm">Electrical heating</td>
|
|
<td class="p-sm">Contractor C</td>
|
|
<td class="p-sm"><span class="inline-block px-2 py-1 bg-surface-low text-ink rounded text-xs font-body-bold">Ordered</span></td>
|
|
<td class="p-sm text-right text-ink-muted">21 Jul</td>
|
|
<td class="p-sm text-right text-ink-muted">0/3</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-low/30 transition-colors cursor-pointer">
|
|
<td class="p-sm font-technical text-ink-muted">WO-23885</td>
|
|
<td class="p-sm text-ink-muted">100508</td>
|
|
<td class="p-sm">16 Park View</td>
|
|
<td class="p-sm">Asbestos</td>
|
|
<td class="p-sm">Contractor C</td>
|
|
<td class="p-sm"><span class="inline-block px-2 py-1 bg-surface-low text-primary rounded text-xs font-body-bold">Completed</span></td>
|
|
<td class="p-sm text-right text-ink-muted">09 Jul</td>
|
|
<td class="p-sm text-right text-ink-muted">2/3</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<!-- Footer Note -->
|
|
<footer class="pt-lg pb-xl border-t border-line text-center">
|
|
<p class="text-ink-soft text-technical font-technical">Programme dashboard • Confidential and proprietary to Domna and Stonewater.</p>
|
|
</footer>
|
|
</main>
|
|
|
|
|
|
</body></html> |