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>
311 lines
No EOL
23 KiB
HTML
311 lines
No EOL
23 KiB
HTML
<!DOCTYPE html><html class="h-full" lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Validate Import (Import Flow)</title>
|
|
<!--
|
|
Ara Projects wireframe — Validate Import (Import Flow)
|
|
Journey 1 — Admin import · screen 10 of 12
|
|
Stitch project 8537473387290162501 · screen 575034188aa946fabef6a9b514dd342c
|
|
Original HTML <title>: Validate Import - 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: {
|
|
"on-secondary-fixed": "#291800",
|
|
"on-secondary": "#ffffff",
|
|
"surface-low": "#e3edf9",
|
|
"tertiary-fixed": "#d0e4ff",
|
|
"on-tertiary-fixed-variant": "#004a79",
|
|
"ink": "#111111",
|
|
"primary-dark": "#222a63",
|
|
"error-container": "#ffdad6",
|
|
"primary-fixed-dim": "#bcc2ff",
|
|
"secondary-fixed": "#ffddb2",
|
|
"surface-container": "#e6eeff",
|
|
"primary-fixed": "#dfe0ff",
|
|
"outline-variant": "#c6c5d2",
|
|
"surface-variant": "#d8e3f8",
|
|
"on-primary-container": "#96a0ed",
|
|
"on-background": "#111c2b",
|
|
"surface-high": "#d9e5f4",
|
|
"on-tertiary": "#ffffff",
|
|
"primary-container": "#2a347a",
|
|
"secondary-container": "#ffd6a0",
|
|
"surface-dim": "#cfdbef",
|
|
"on-error-container": "#93000a",
|
|
"on-surface-variant": "#454650",
|
|
"secondary": "#77592d",
|
|
"on-primary-fixed": "#04105a",
|
|
"tertiary": "#002743",
|
|
"canvas": "#eef4fc",
|
|
"on-surface": "#111c2b",
|
|
"surface-bright": "#f8f9ff",
|
|
"on-primary-fixed-variant": "#364087",
|
|
"primary": "#111c64",
|
|
"inverse-on-surface": "#ebf1ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-error": "#ffffff",
|
|
"accent-soft": "#e4f1fc",
|
|
"tertiary-container": "#003d66",
|
|
"on-tan": "#3d2f16",
|
|
"on-primary": "#ffffff",
|
|
"inverse-surface": "#263141",
|
|
"tan-soft": "#f4ebdc",
|
|
"outline": "#767682",
|
|
"on-secondary-container": "#795c2f",
|
|
"background": "#f8f9ff",
|
|
"on-tertiary-container": "#50aaf9",
|
|
"line": "#d2ddec",
|
|
"surface-container-high": "#dee9fe",
|
|
"on-tertiary-fixed": "#001d34",
|
|
"tertiary-fixed-dim": "#9acbff",
|
|
"inverse-primary": "#bcc2ff",
|
|
"on-secondary-fixed-variant": "#5d4218",
|
|
"surface": "#f8f9ff",
|
|
"error-soft": "#fdecea",
|
|
"surface-container-highest": "#d8e3f8",
|
|
"secondary-fixed-dim": "#e7c08b",
|
|
"error": "#b3261e",
|
|
"surface-container-low": "#eff4ff",
|
|
"surface-tint": "#4f58a0"
|
|
},
|
|
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" }]
|
|
},
|
|
boxShadow: {
|
|
'card': '0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.04)',
|
|
'lifted': '0 20px 25px -5px rgba(42, 52, 122, 0.10), 0 10px 10px -5px rgba(42, 52, 122, 0.04)'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@keyframes slide-in-right {
|
|
from {
|
|
transform: translateX(20px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.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-on-surface h-full flex flex-col font-body font-body text-body">
|
|
<!-- TopNavBar -->
|
|
<header class="fixed top-0 w-full h-header-height z-50 flex justify-between items-center px-lg bg-surface-container-lowest border-b border-line">
|
|
<div class="flex items-center gap-lg h-full">
|
|
<span class="font-display text-h3 font-extrabold text-primary">Ara Projects</span>
|
|
<div class="relative hidden md:flex items-center ml-lg">
|
|
<span class="material-symbols-outlined absolute left-sm text-outline">search</span>
|
|
<input class="pl-xl pr-sm py-sm bg-surface-low border border-line rounded focus:border-primary focus:ring-0 text-body font-body w-64 transition-colors" placeholder="Search..." type="text">
|
|
</div>
|
|
</div>
|
|
<nav class="hidden md:flex items-center h-full gap-lg">
|
|
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80 font-body text-body" href="#">Dashboard</a>
|
|
<a class="h-full flex items-center text-primary border-b-2 border-primary pb-1 cursor-pointer active:opacity-80 font-body text-body" href="#">Projects</a>
|
|
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80 font-body text-body" href="#">Maintenance</a>
|
|
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80 font-body text-body" href="#">Schedule</a>
|
|
</nav>
|
|
<div class="flex items-center gap-md">
|
|
<button class="p-sm text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80">
|
|
<span class="material-symbols-outlined">help</span>
|
|
</button>
|
|
<button class="p-sm text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80 relative">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
<span class="absolute top-sm right-sm w-2 h-2 bg-error rounded-full"></span>
|
|
</button>
|
|
<div class="w-8 h-8 rounded-full bg-surface-high overflow-hidden ml-sm cursor-pointer border border-line">
|
|
<img alt="User account menu" class="w-full h-full object-cover" data-alt="A professional headshot of a person looking forward in a corporate setting. High key lighting, modern, light mode." src="../assets/img/img22.png">
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="flex flex-1 pt-header-height h-full">
|
|
<!-- SideNavBar -->
|
|
<aside class="fixed left-0 top-header-height h-[calc(100vh-theme(spacing.header-height))] w-sidebar-width p-md flex flex-col gap-sm bg-surface-container z-40 overflow-y-auto">
|
|
<div class="p-md flex items-center gap-md mb-md">
|
|
<div class="w-10 h-10 rounded-lg bg-surface-low flex items-center justify-center text-primary border border-line">
|
|
<span class="material-symbols-outlined">account_tree</span>
|
|
</div>
|
|
<div>
|
|
<h2 class="font-display text-subheading text-primary">Project Setup</h2>
|
|
<p class="font-technical text-technical text-on-surface-variant">Configuration Wizard</p>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 flex flex-col gap-xs">
|
|
<a class="flex items-center gap-md p-sm text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg font-body text-body" href="#">
|
|
<span class="material-symbols-outlined">layers</span>
|
|
Workstream
|
|
</a>
|
|
<a class="flex items-center gap-md p-sm text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg font-body text-body" href="#">
|
|
<span class="material-symbols-outlined">account_tree</span>
|
|
Stages
|
|
</a>
|
|
<a class="flex items-center gap-md p-sm text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg font-body text-body" href="#">
|
|
<span class="material-symbols-outlined">fact_check</span>
|
|
Checklist
|
|
</a>
|
|
<a class="flex items-center gap-md p-sm text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg font-body text-body" href="#">
|
|
<span class="material-symbols-outlined">admin_panel_settings</span>
|
|
Permissions
|
|
</a>
|
|
<a class="flex items-center gap-md p-sm bg-primary text-on-primary font-body-bold rounded-lg cursor-pointer active:scale-95" href="#">
|
|
<span class="material-symbols-outlined">upload_file</span>
|
|
Import
|
|
</a>
|
|
<a class="flex items-center gap-md p-sm text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg font-body text-body" href="#">
|
|
<span class="material-symbols-outlined">table_chart</span>
|
|
Mapping
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto flex flex-col gap-xs pt-md border-t border-line">
|
|
<button class="w-full py-sm px-md bg-surface-low text-primary border border-line rounded-lg font-body-bold hover:bg-surface-high transition-colors">
|
|
Save Progress
|
|
</button>
|
|
<a class="flex items-center gap-md p-sm text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer rounded-lg font-body text-body mt-sm" href="#">
|
|
<span class="material-symbols-outlined">help</span>
|
|
Help Center
|
|
</a>
|
|
<a class="flex items-center gap-md p-sm text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer rounded-lg font-body text-body" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
Settings
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Canvas -->
|
|
<main class="flex-1 ml-sidebar-width p-lg max-w-max-width mx-auto w-full flex flex-col gap-lg animate-slide-in-right">
|
|
<!-- Page Header -->
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-sm mb-xs"><h1 class="font-h2 text-h2 text-primary">Validate import</h1><span class="px-xs py-1 rounded bg-surface-container text-primary font-overline text-overline">Sample data</span></div>
|
|
<p class="text-on-surface-variant text-body font-body">Review and resolve issues before finalizing the import process.</p>
|
|
</div>
|
|
<div class="flex gap-sm">
|
|
<button class="px-md py-sm bg-surface-low border border-line rounded-lg text-primary font-body-bold hover:bg-surface-high transition-colors flex items-center gap-sm">
|
|
<span class="material-symbols-outlined text-[20px]">arrow_back</span>
|
|
Back
|
|
</button>
|
|
<button class="px-md py-sm bg-primary text-on-primary rounded-lg font-body-bold hover:opacity-90 transition-opacity flex items-center gap-sm shadow-card">
|
|
Continue to Summary
|
|
<span class="material-symbols-outlined text-[20px]">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Stats Row -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-md"><div class="bg-surface-container-lowest p-md rounded-lg shadow-card border border-line flex flex-col gap-xs"><div class="flex items-center justify-between text-on-surface-variant"><span class="font-body-bold text-body">Ready to import</span><span class="material-symbols-outlined text-[20px] text-[#166534]">check_circle</span></div><span class="font-display text-display text-primary">1,231</span></div><div class="bg-surface-container-lowest p-md rounded-lg shadow-card border border-error-container flex flex-col gap-xs bg-error-soft"><div class="flex items-center justify-between text-error"><span class="font-body-bold text-body">Errors</span><span class="material-symbols-outlined text-[20px]">error</span></div><span class="font-display text-display text-error">17</span></div><div class="bg-surface-container-lowest p-md rounded-lg shadow-card border border-secondary-container flex flex-col gap-xs bg-tan-soft"><div class="flex items-center justify-between text-on-secondary-fixed-variant"><span class="font-body-bold text-body">Warnings</span><span class="material-symbols-outlined text-[20px]">warning</span></div><span class="font-display text-display text-on-secondary-fixed-variant">10</span></div><div class="bg-surface-container-lowest p-md rounded-lg shadow-card border border-line flex flex-col gap-xs"><div class="flex items-center justify-between text-on-surface-variant"><span class="font-body-bold text-body">Updates detected</span><span class="material-symbols-outlined text-[20px]">update</span></div><span class="font-display text-display text-primary">118</span></div><div class="bg-surface-container-lowest p-md rounded-lg shadow-card border border-line flex flex-col gap-xs"><div class="flex items-center justify-between text-on-surface-variant"><span class="font-body-bold text-body">Omissions detected</span><span class="material-symbols-outlined text-[20px]">visibility_off</span></div><span class="font-display text-display text-primary">26</span></div><div class="bg-surface-container-lowest p-md rounded-lg shadow-card border border-line flex flex-col gap-xs"><div class="flex items-center justify-between text-on-surface-variant"><span class="font-body-bold text-body">Priority changes</span><span class="material-symbols-outlined text-[20px]">priority_high</span></div><span class="font-display text-display text-primary">12</span></div></div>
|
|
<!-- Main Layout: Content + Actions Sidebar -->
|
|
<div class="flex flex-col lg:flex-row gap-lg flex-1">
|
|
<!-- Table Area -->
|
|
<div class="flex-1 bg-surface-container-lowest rounded-lg shadow-card border border-line flex flex-col overflow-hidden">
|
|
<!-- Tabs -->
|
|
<div class="flex border-b border-line bg-surface-bright px-md pt-sm gap-md"><button class="px-sm py-sm font-body-bold text-primary border-b-2 border-primary">Errors (17)</button><button class="px-sm py-sm font-body text-on-surface-variant hover:text-primary transition-colors">Warnings (10)</button><button class="px-sm py-sm font-body text-on-surface-variant hover:text-primary transition-colors">Ready (1,231)</button><button class="px-sm py-sm font-body text-on-surface-variant hover:text-primary transition-colors">Updates (118)</button><button class="px-sm py-sm font-body text-on-surface-variant hover:text-primary transition-colors">Omissions (26)</button></div>
|
|
<!-- Table Filters (Simulated) -->
|
|
<div class="p-sm border-b border-line bg-surface-low flex gap-sm items-center"><button class="px-sm py-sm font-body-bold text-primary border-b-2 border-primary">Errors (17)</button><button class="px-sm py-sm font-body text-on-surface-variant hover:text-primary transition-colors">Warnings (10)</button><button class="px-sm py-sm font-body text-on-surface-variant hover:text-primary transition-colors">Ready (1,231)</button><button class="px-sm py-sm font-body text-on-surface-variant hover:text-primary transition-colors">Updates (118)</button><button class="px-sm py-sm font-body text-on-surface-variant hover:text-primary transition-colors">Omissions (26)</button></div>
|
|
<!-- Table -->
|
|
<div class="overflow-auto flex-1">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead class="bg-surface-low text-ink-muted font-overline text-overline sticky top-0 z-10 border-b border-line">
|
|
<tr><th class="p-sm w-10 text-center"><input class="rounded border-line text-primary focus:ring-primary" type="checkbox"></th><th class="p-sm">Row #</th><th class="p-sm">WO #</th><th class="p-sm">Asset ID</th><th class="p-sm">Issue Type</th><th class="p-sm">Description</th><th class="p-sm">Affected Field</th><th class="p-sm text-right">Action</th></tr>
|
|
</thead>
|
|
<tbody class="font-body text-body divide-y divide-line"><tr class="hover:bg-surface-high/60 transition-colors group"><td class="p-sm text-center"><input class="rounded border-line text-primary focus:ring-primary" type="checkbox"></td><td class="p-sm font-technical text-technical text-on-surface-variant">42</td><td class="p-sm font-technical text-technical">WO-23881</td><td class="p-sm font-technical text-technical">100245</td><td class="p-sm"><span class="inline-flex items-center gap-xs px-xs py-1 rounded-full bg-error-soft text-error font-body-bold text-[12px]"><span class="material-symbols-outlined text-[14px]">error</span>Error</span></td><td class="p-sm">missing forecast end date</td><td class="p-sm font-technical text-technical text-on-surface-variant">Forecast end</td><td class="p-sm text-right"><button class="text-primary hover:underline font-body-bold text-[12px]">Edit Row</button></td></tr><tr class="hover:bg-surface-high/60 transition-colors group"><td class="p-sm text-center"><input class="rounded border-line text-primary focus:ring-primary" type="checkbox"></td><td class="p-sm font-technical text-technical text-on-surface-variant">87</td><td class="p-sm font-technical text-technical">WO-23914</td><td class="p-sm font-technical text-technical">100388</td><td class="p-sm"><span class="inline-flex items-center gap-xs px-xs py-1 rounded-full bg-error-soft text-error font-body-bold text-[12px]"><span class="material-symbols-outlined text-[14px]">error</span>Error</span></td><td class="p-sm">missing postcode</td><td class="p-sm font-technical text-technical text-on-surface-variant">Postcode</td><td class="p-sm text-right"><button class="text-primary hover:underline font-body-bold text-[12px]">Edit Row</button></td></tr><tr class="hover:bg-surface-high/60 transition-colors group"><td class="p-sm text-center"><input class="rounded border-line text-primary focus:ring-primary" type="checkbox"></td><td class="p-sm font-technical text-technical text-on-surface-variant">143</td><td class="p-sm font-technical text-technical">WO-24109</td><td class="p-sm font-technical text-technical">100611</td><td class="p-sm"><span class="inline-flex items-center gap-xs px-xs py-1 rounded-full bg-error-soft text-error font-body-bold text-[12px]"><span class="material-symbols-outlined text-[14px]">error</span>Error</span></td><td class="p-sm">unknown workstream label</td><td class="p-sm font-technical text-technical text-on-surface-variant">Workstream</td><td class="p-sm text-right"><button class="text-primary hover:underline font-body-bold text-[12px]">Edit Row</button></td></tr></tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination (Simulated) -->
|
|
<div class="p-sm border-t border-line bg-surface-bright flex items-center justify-between text-body font-body text-on-surface-variant">
|
|
<span class="">Showing 1-3 of 17 errors</span>
|
|
<div class="flex gap-xs">
|
|
<button class="p-xs rounded hover:bg-surface-low disabled:opacity-50" disabled=""><span class="material-symbols-outlined text-[20px]">chevron_left</span></button>
|
|
<button class="p-xs rounded hover:bg-surface-low"><span class="material-symbols-outlined text-[20px]">chevron_right</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Actions Sidebar -->
|
|
<div class="w-full lg:w-64 flex flex-col gap-md">
|
|
<div class="bg-surface-container-lowest p-md rounded-lg shadow-card border border-line">
|
|
<h3 class="font-h3 text-h3 text-primary mb-sm">Bulk Actions</h3>
|
|
<p class="font-body text-body text-on-surface-variant mb-md text-[13px]">Select rows in the table to apply fixes simultaneously.</p>
|
|
<div class="flex flex-col gap-sm">
|
|
<button class="w-full py-sm px-md bg-surface-low border border-line text-primary rounded-lg font-body-bold hover:bg-surface-high transition-colors flex items-center justify-center gap-sm disabled:opacity-50" disabled="">
|
|
<span class="material-symbols-outlined text-[18px]">build</span>
|
|
Fix Selected Now
|
|
</button>
|
|
<button class="w-full py-sm px-md bg-surface-container-lowest border border-line text-on-surface-variant rounded-lg font-body-bold hover:bg-surface-low transition-colors flex items-center justify-center gap-sm disabled:opacity-50" disabled="">
|
|
<span class="material-symbols-outlined text-[18px]">delete</span>
|
|
Ignore Selected
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-md rounded-lg shadow-card border border-line">
|
|
<h3 class="font-h3 text-h3 text-primary mb-sm">Reporting</h3>
|
|
<p class="font-body text-body text-on-surface-variant mb-md text-[13px]">Download a full log of identified issues for offline review.</p>
|
|
<button class="w-full py-sm px-md bg-surface-container-lowest border border-line text-primary rounded-lg font-body-bold hover:bg-surface-low transition-colors flex items-center justify-center gap-sm">
|
|
<span class="material-symbols-outlined text-[18px]">download</span>
|
|
Download Report
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body></html> |