mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-08-02 12:58:24 +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>
382 lines
No EOL
22 KiB
HTML
382 lines
No EOL
22 KiB
HTML
<!DOCTYPE html><html class="light" lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Contractor B View (Refined Consistency)</title>
|
|
<!--
|
|
Ara Projects wireframe — Contractor B View (Refined Consistency)
|
|
Journey 3 — Contractor toggle · screen 3 of 4
|
|
Stitch project 8537473387290162501 · screen a143086fea17448d847aa696a6011f01
|
|
Original HTML <title>: Contractor View - Ara Projects
|
|
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": {
|
|
"background": "#f8f9ff",
|
|
"tan-soft": "#f4ebdc",
|
|
"primary-fixed-dim": "#bcc2ff",
|
|
"surface-container-low": "#eff4ff",
|
|
"inverse-surface": "#263141",
|
|
"surface": "#f8f9ff",
|
|
"error-soft": "#fdecea",
|
|
"outline-variant": "#c6c5d2",
|
|
"on-background": "#111c2b",
|
|
"on-surface-variant": "#454650",
|
|
"on-tan": "#3d2f16",
|
|
"secondary-fixed-dim": "#e7c08b",
|
|
"on-tertiary-fixed-variant": "#004a79",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-dim": "#cfdbef",
|
|
"tertiary-fixed-dim": "#9acbff",
|
|
"primary-container": "#2a347a",
|
|
"ink": "#111111",
|
|
"secondary-fixed": "#ffddb2",
|
|
"on-primary-fixed-variant": "#364087",
|
|
"on-error": "#ffffff",
|
|
"secondary-container": "#ffd6a0",
|
|
"on-secondary-fixed-variant": "#5d4218",
|
|
"surface-container-highest": "#d8e3f8",
|
|
"on-surface": "#111c2b",
|
|
"surface-high": "#d9e5f4",
|
|
"on-tertiary": "#ffffff",
|
|
"on-error-container": "#93000a",
|
|
"surface-low": "#e3edf9",
|
|
"primary-fixed": "#dfe0ff",
|
|
"tertiary-fixed": "#d0e4ff",
|
|
"secondary": "#77592d",
|
|
"surface-variant": "#d8e3f8",
|
|
"error-container": "#ffdad6",
|
|
"canvas": "#eef4fc",
|
|
"on-secondary-fixed": "#291800",
|
|
"on-primary-fixed": "#04105a",
|
|
"on-primary-container": "#96a0ed",
|
|
"accent-soft": "#e4f1fc",
|
|
"surface-container-high": "#dee9fe",
|
|
"on-tertiary-fixed": "#001d34",
|
|
"tertiary": "#002743",
|
|
"inverse-on-surface": "#ebf1ff",
|
|
"inverse-primary": "#bcc2ff",
|
|
"line": "#d2ddec",
|
|
"primary": "#111c64",
|
|
"on-secondary-container": "#795c2f",
|
|
"surface-container": "#e6eeff",
|
|
"surface-bright": "#f8f9ff",
|
|
"outline": "#767682",
|
|
"primary-dark": "#222a63",
|
|
"surface-tint": "#4f58a0",
|
|
"error": "#b3261e",
|
|
"on-secondary": "#ffffff",
|
|
"tertiary-container": "#003d66",
|
|
"on-tertiary-container": "#50aaf9",
|
|
"on-primary": "#ffffff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"sm": "8px",
|
|
"md": "16px",
|
|
"lg": "24px",
|
|
"xs": "4px",
|
|
"header-height": "64px",
|
|
"sidebar-width": "256px",
|
|
"xl": "40px",
|
|
"max-width": "1440px"
|
|
},
|
|
"fontFamily": {
|
|
"body": [
|
|
"Montserrat"
|
|
],
|
|
"technical": [
|
|
"Questrial"
|
|
],
|
|
"display": [
|
|
"Montserrat"
|
|
],
|
|
"overline": [
|
|
"Questrial"
|
|
],
|
|
"h2": [
|
|
"Montserrat"
|
|
],
|
|
"h1": [
|
|
"Montserrat"
|
|
],
|
|
"subheading": [
|
|
"Montserrat"
|
|
],
|
|
"h3": [
|
|
"Montserrat"
|
|
],
|
|
"display-mobile": [
|
|
"Montserrat"
|
|
],
|
|
"body-bold": [
|
|
"Montserrat"
|
|
]
|
|
},
|
|
"fontSize": {
|
|
"body": [
|
|
"14px",
|
|
{
|
|
"lineHeight": "1.25",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"technical": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"display": [
|
|
"36px",
|
|
{
|
|
"lineHeight": "1.1",
|
|
"fontWeight": "800"
|
|
}
|
|
],
|
|
"overline": [
|
|
"11px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"letterSpacing": "0.05em",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"h2": [
|
|
"24px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "800"
|
|
}
|
|
],
|
|
"h1": [
|
|
"30px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "800"
|
|
}
|
|
],
|
|
"subheading": [
|
|
"18px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"h3": [
|
|
"20px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"display-mobile": [
|
|
"32px",
|
|
{
|
|
"lineHeight": "1.1",
|
|
"fontWeight": "800"
|
|
}
|
|
],
|
|
"body-bold": [
|
|
"14px",
|
|
{
|
|
"lineHeight": "1.25",
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.material-symbols-outlined.fill {
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-canvas text-on-surface font-body min-h-screen flex flex-col">
|
|
<!-- TopNavBar -->
|
|
<header class="bg-surface-container-lowest dark:bg-inverse-surface h-header-height w-full sticky top-0 z-50 shadow-card border-b border-line dark:border-outline-variant">
|
|
<div class="flex justify-between items-center px-lg w-full max-w-max-width mx-auto h-full">
|
|
<div class="flex items-center gap-lg h-full">
|
|
<div class="font-h2 text-h2 text-primary dark:text-primary-fixed-dim flex items-center gap-sm">
|
|
<span class="material-symbols-outlined text-[28px]">domain</span>
|
|
Ara Projects
|
|
</div>
|
|
<!-- Scoped Navigation Links -->
|
|
<nav class="hidden md:flex h-full items-end gap-md ml-xl">
|
|
<a class="text-on-surface-variant dark:text-outline-variant font-body hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer active:opacity-80 py-4" href="#">Dashboard</a>
|
|
<a class="text-primary dark:text-primary-fixed-dim border-b-2 border-primary dark:border-primary-fixed-dim pb-[14px] font-body-bold cursor-pointer active:opacity-80 pt-4" href="#">Work orders</a>
|
|
<a class="text-on-surface-variant dark:text-outline-variant font-body hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer active:opacity-80 py-4" href="#">Documents</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-md">
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80 p-xs rounded-full hover:bg-surface-low">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
</button>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80 p-xs rounded-full hover:bg-surface-low">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
</button>
|
|
<div class="h-8 w-8 rounded-full bg-surface-high border border-line flex items-center justify-center overflow-hidden cursor-pointer">
|
|
<img alt="User profile" class="w-full h-full object-cover" data-alt="A clean, modern corporate headshot avatar of an admin user in a well-lit office environment, professional attire, soft neutral background, high resolution, minimalist aesthetic." src="../assets/img/img14.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Impersonation Bar -->
|
|
<div class="bg-accent-soft sticky top-header-height z-40 w-full border-b border-line px-lg py-sm flex items-center justify-between shadow-sm">
|
|
<div class="flex items-center gap-md max-w-max-width mx-auto w-full">
|
|
<span class="material-symbols-outlined text-primary">visibility</span>
|
|
<span class="font-body text-body text-primary mr-2">Viewing as</span>
|
|
<div class="relative inline-block w-64">
|
|
<select class="block w-full pl-3 pr-10 py-1.5 text-body font-body border border-line bg-surface-container-lowest rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary sm:text-sm appearance-none cursor-pointer"><option>Contractor A (Windows, Roofs, Doors)</option><option selected="">Contractor B (Kitchens, Bathrooms, Cyclical decorations)</option><option>Contractor C (Electrical heating, Asbestos)</option></select>
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-on-surface-variant">
|
|
<span class="material-symbols-outlined text-[20px]">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow"></div>
|
|
<button class="font-body text-body text-primary hover:text-primary-dark transition-colors px-4 py-1.5 border border-primary rounded-md hover:bg-surface-container-lowest focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1">
|
|
Exit contractor view
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Main Content Container -->
|
|
<main class="flex-grow w-full max-w-max-width mx-auto px-lg py-lg space-y-lg">
|
|
<!-- Header Band -->
|
|
<div class="bg-gradient-to-r from-primary-container to-primary-dark rounded-xl p-lg shadow-card text-on-primary relative overflow-hidden" style="background-color: #2a347a;">
|
|
<!-- Decorative overlay -->
|
|
<div class="absolute inset-0 opacity-10 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiIGZpbGw9IiNmZmYiLz48L3N2Zz4=')]"></div>
|
|
<div class="relative z-10 flex flex-col gap-md">
|
|
<div class="flex gap-sm items-center">
|
|
<span class="px-3 py-1 bg-surface-container-lowest/20 rounded-full font-overline text-overline uppercase tracking-wider backdrop-blur-sm border border-surface-container-lowest/30">Assigned work</span>
|
|
<span class="px-3 py-1 bg-surface-container-lowest/20 rounded-full font-overline text-overline uppercase tracking-wider backdrop-blur-sm border border-surface-container-lowest/30">Contractor B</span>
|
|
<span class="px-3 py-1 bg-tan-soft text-on-tan rounded-full font-overline text-overline uppercase tracking-wider border border-secondary-container">Sample data</span>
|
|
</div>
|
|
<h1 class="font-display text-display">Your work orders</h1>
|
|
<p class="font-body text-body text-primary-fixed-dim">Assigned workstreams: Kitchens, Bathrooms, Cyclical decorations</p>
|
|
</div>
|
|
</div>
|
|
<!-- Metric Tiles -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-md">
|
|
<!-- Tile 1 -->
|
|
<div class="bg-surface-container-lowest p-md rounded-lg shadow-card border border-line flex flex-col justify-between">
|
|
<div class="flex justify-between items-start mb-sm">
|
|
<span class="font-body text-body text-on-surface-variant">Assigned work orders</span>
|
|
<span class="material-symbols-outlined text-outline">assignment</span>
|
|
</div>
|
|
<div class="font-h1 text-h1 text-primary">315</div>
|
|
</div>
|
|
<!-- Tile 2 -->
|
|
<div class="bg-surface-container-lowest p-md rounded-lg shadow-card border border-error-container relative overflow-hidden flex flex-col justify-between group cursor-pointer hover:bg-error-soft/30 transition-colors">
|
|
<div class="absolute -right-4 -top-4 w-16 h-16 rounded-full border-4 border-error/20 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-error opacity-50">warning</span>
|
|
</div>
|
|
<div class="flex justify-between items-start mb-sm relative z-10">
|
|
<span class="font-body text-body text-error">Overdue</span>
|
|
</div>
|
|
<div class="font-h1 text-h1 text-error relative z-10">12</div>
|
|
</div>
|
|
<!-- Tile 3 -->
|
|
<div class="bg-surface-container-lowest p-md rounded-lg shadow-card border border-line flex flex-col justify-between">
|
|
<div class="flex justify-between items-start mb-sm">
|
|
<span class="font-body text-body text-on-surface-variant">Docs complete</span>
|
|
<span class="material-symbols-outlined text-outline">description</span>
|
|
</div>
|
|
<div class="flex items-end gap-2"><div class="font-h1 text-h1 text-primary">91%</div><div class="w-full bg-surface-high rounded-full h-2 mb-2"><div class="bg-primary h-2 rounded-full" style="width: 91%"></div></div></div>
|
|
</div>
|
|
</div>
|
|
<!-- Main Content Area: Table and Side Panel -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-lg items-start">
|
|
<!-- Table Container (Spans 3 cols) -->
|
|
<div class="lg:col-span-3 bg-surface-container-lowest rounded-lg shadow-card border border-line overflow-hidden">
|
|
<div class="p-md border-b border-line flex justify-between items-center bg-surface-bright">
|
|
<h2 class="font-h3 text-h3 text-on-surface">Work orders</h2>
|
|
<div class="flex gap-2">
|
|
<button class="p-xs rounded hover:bg-surface-low text-on-surface-variant transition-colors"><span class="material-symbols-outlined text-[20px]">filter_list</span></button>
|
|
<button class="p-xs rounded hover:bg-surface-low text-on-surface-variant transition-colors"><span class="material-symbols-outlined text-[20px]">sort</span></button>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-surface-low border-b border-line">
|
|
<th class="p-md font-body-bold text-body text-ink-muted whitespace-nowrap">WO ref</th>
|
|
<th class="p-md font-body-bold text-body text-ink-muted whitespace-nowrap">Asset ref</th>
|
|
<th class="p-md font-body-bold text-body text-ink-muted whitespace-nowrap">Address</th>
|
|
<th class="p-md font-body-bold text-body text-ink-muted whitespace-nowrap">Workstream</th>
|
|
<th class="p-md font-body-bold text-body text-ink-muted whitespace-nowrap">Stage</th>
|
|
<th class="p-md font-body-bold text-body text-ink-muted whitespace-nowrap">Forecast end</th>
|
|
<th class="p-md font-body-bold text-body text-ink-muted whitespace-nowrap">Docs</th>
|
|
<th class="p-md font-body-bold text-body text-ink-muted whitespace-nowrap text-right">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-line"><tr class="hover:bg-surface-low/60 transition-colors group"><td class="p-md font-technical text-technical text-primary font-medium">WO-23882</td><td class="p-md font-technical text-technical text-on-surface-variant">100245</td><td class="p-md font-body text-body text-on-surface">12 High St</td><td class="p-md font-body text-body text-on-surface">Bathrooms</td><td class="p-md"><span class="inline-flex items-center px-2.5 py-0.5 rounded-full font-technical text-technical bg-accent-soft text-on-tertiary-fixed-variant border border-surface-dim">In progress</span></td><td class="p-md font-technical text-technical text-on-surface-variant">18 Jul</td><td class="p-md font-technical text-technical text-on-surface-variant">1/4</td><td class="p-md text-right"><button class="font-body-bold text-body text-primary hover:text-primary-dark transition-colors border border-line rounded px-3 py-1 bg-surface-container-lowest shadow-sm hover:bg-surface-low group-hover:border-primary/50">Open</button></td></tr><tr class="hover:bg-surface-low/60 transition-colors group"><td class="p-md font-technical text-technical text-primary font-medium">WO-23904</td><td class="p-md font-technical text-technical text-on-surface-variant">100312</td><td class="p-md font-body text-body text-on-surface">5 Mill Lane</td><td class="p-md font-body text-body text-on-surface">Kitchens</td><td class="p-md"><span class="inline-flex items-center px-2.5 py-0.5 rounded-full font-technical text-technical bg-surface-container-high text-on-surface border border-outline-variant">Ordered</span></td><td class="p-md font-technical text-technical text-on-surface-variant">25 Jul</td><td class="p-md font-technical text-technical text-on-surface-variant">0/5</td><td class="p-md text-right"><button class="font-body-bold text-body text-primary hover:text-primary-dark transition-colors border border-line rounded px-3 py-1 bg-surface-container-lowest shadow-sm hover:bg-surface-low group-hover:border-primary/50">Open</button></td></tr><tr class="hover:bg-surface-low/60 transition-colors group"><td class="p-md font-technical text-technical text-primary font-medium">WO-23910</td><td class="p-md font-technical text-technical text-on-surface-variant">100455</td><td class="p-md font-body text-body text-on-surface">22 Park View</td><td class="p-md font-body text-body text-on-surface">Cyclical decorations</td><td class="p-md"><span class="inline-flex items-center px-2.5 py-0.5 rounded-full font-technical text-technical bg-accent-soft text-on-tertiary-fixed-variant border border-surface-dim">Awaiting authorisation</span></td><td class="p-md font-technical text-technical text-on-surface-variant">30 Jul</td><td class="p-md font-technical text-technical text-on-surface-variant">2/2</td><td class="p-md text-right"><button class="font-body-bold text-body text-primary hover:text-primary-dark transition-colors border border-line rounded px-3 py-1 bg-surface-container-lowest shadow-sm hover:bg-surface-low group-hover:border-primary/50">Open</button></td></tr></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="p-sm border-t border-line bg-surface-bright flex justify-center">
|
|
<button class="font-body text-body text-on-surface-variant hover:text-primary py-1 px-4 rounded hover:bg-surface-low transition-colors">View all 315 orders</button>
|
|
</div>
|
|
</div>
|
|
<!-- Side Panel -->
|
|
<div class="lg:col-span-1 bg-surface-container-lowest rounded-lg shadow-card border border-line p-md sticky top-[140px]">
|
|
<h3 class="font-subheading text-subheading text-on-surface mb-md pb-xs border-b border-line flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary text-[20px]">info</span>
|
|
What you can do
|
|
</h3>
|
|
<ul class="space-y-sm font-body text-body text-on-surface-variant">
|
|
<li class="flex items-start gap-2">
|
|
<span class="material-symbols-outlined text-outline text-[18px] mt-0.5">check_circle</span>
|
|
<span class="">Update the stage on your orders.</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="material-symbols-outlined text-outline text-[18px] mt-0.5">upload_file</span>
|
|
<span class="">Upload evidence against required documents.</span>
|
|
</li>
|
|
</ul>
|
|
<div class="mt-lg pt-md border-t border-line">
|
|
<div class="bg-surface-low p-sm rounded border border-surface-dim flex items-start gap-2">
|
|
<span class="material-symbols-outlined text-on-surface-variant text-[18px] mt-0.5">block</span>
|
|
<p class="font-technical text-technical text-on-surface-variant">You cannot change costs or omit orders; contact a Stonewater or Domna admin.</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-lg pt-md border-t border-line">
|
|
<h3 class="font-subheading text-subheading text-on-surface mb-md pb-xs border-b border-line flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary text-[20px]">hub</span>
|
|
Stonewater Workspace
|
|
</h3>
|
|
<p class="font-body text-body text-on-surface-variant mb-md">Access shared resources and support documentation.</p>
|
|
<button class="w-full font-body-bold text-body text-primary border border-primary rounded-md py-2 hover:bg-surface-low transition-colors flex items-center justify-center gap-2">
|
|
<span class="material-symbols-outlined text-[18px]">help_center</span>
|
|
Help Center
|
|
</button>
|
|
</div></div>
|
|
</div>
|
|
</main>
|
|
<!-- Footer Note -->
|
|
<footer class="w-full border-t border-line mt-auto bg-surface py-md">
|
|
<div class="max-w-max-width mx-auto px-lg text-center">
|
|
<p class="font-technical text-technical text-outline flex items-center justify-center gap-2">
|
|
<span class="material-symbols-outlined text-[16px]">visibility</span>
|
|
You see work orders assigned to your organisation. Stonewater and Domna admins manage the wider programme.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
</body></html> |