junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-08-02 12:58:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6
assessment-model/docs/wireframes/ara-projects/1-admin-import/05-configure-documents.html
Daniel Roth a0f865ad85 Add Ara Projects UX wireframes under docs/wireframes 
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>
2026-07-20 15:15:21 +00:00

345 lines
No EOL
25 KiB
HTML
Raw Blame History

<!DOCTYPE html><html class="light" lang="en"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Configure Documents (Step 4)</title>
<!--
Ara Projects wireframe — Configure Documents (Step 4)
Journey 1 — Admin import · screen 5 of 12
Stitch project 8537473387290162501 · screen 3bc214e2ab1b409898d88423383d455f
Original HTML <title>: Configure Document Checklists - Project Setup
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 2px 8px rgba(0, 0, 0, 0.04)",
"lifted": "0 8px 24px rgba(42, 52, 122, 0.10)"
}
},
},
}
</script>
<style>
body { background-color: theme('colors.canvas'); color: theme('colors.on-surface'); }
</style>
<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 !important;
transform: none !important;
opacity: 1 !important;
}
}
</style></head>
<body class="font-body text-body min-h-screen overflow-x-hidden flex flex-col">
<!-- TopNavBar -->
<header class="bg-surface-container-lowest fixed top-0 w-full h-header-height z-50 flex justify-between items-center px-lg border-b border-line">
<div class="flex items-center gap-md">
<span class="font-display text-h3 font-extrabold text-primary">Ara Projects</span>
</div>
<nav class="hidden md:flex items-center gap-lg h-full">
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Dashboard</a>
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Projects</a>
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Maintenance</a>
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Schedule</a>
</nav>
<div class="flex items-center gap-sm">
<button class="p-2 rounded-full hover:bg-surface-low text-on-surface-variant transition-colors">
<span class="material-symbols-outlined">help</span>
</button>
<button class="p-2 rounded-full hover:bg-surface-low text-on-surface-variant transition-colors">
<span class="material-symbols-outlined">notifications</span>
</button>
<div class="w-8 h-8 rounded-full bg-primary-container text-on-primary-container flex items-center justify-center ml-2 border border-line overflow-hidden">
<img alt="User account menu" class="object-cover w-full h-full" data-alt="A professional headshot of a corporate user in a modern office environment, light mode styling, soft neutral background, high contrast lighting." src="../assets/img/img5.png">
</div>
</div>
</header>
<div class="flex flex-1 pt-header-height">
<!-- SideNavBar -->
<aside class="hidden md:flex bg-surface-container fixed left-0 top-header-height h-[calc(100vh-theme(spacing.header-height))] w-sidebar-width p-md flex-col gap-sm">
<div class="mb-lg px-sm">
<div class="flex items-center gap-sm mb-xs">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">dataset</span>
<h2 class="font-display text-subheading text-primary">Project Setup</h2>
</div>
<p class="font-technical text-technical text-on-surface-variant pl-8">Configuration Wizard</p>
</div>
<nav class="flex-1 flex flex-col gap-xs overflow-y-auto">
<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" href="#">
<span class="material-symbols-outlined">layers</span>
<span class="">Workstream</span>
</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" href="#">
<span class="material-symbols-outlined">account_tree</span>
<span class="">Stages</span>
</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">fact_check</span>
<span class="">Checklist</span>
</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" href="#">
<span class="material-symbols-outlined">admin_panel_settings</span>
<span class="">Permissions</span>
</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" href="#">
<span class="material-symbols-outlined">upload_file</span>
<span class="">Import</span>
</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" href="#">
<span class="material-symbols-outlined">table_chart</span>
<span class="">Mapping</span>
</a>
</nav>
<div class="mt-auto flex flex-col gap-xs pt-md border-t border-line">
<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" href="#">
<span class="material-symbols-outlined">help</span>
<span class="">Help Center</span>
</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" href="#">
<span class="material-symbols-outlined">settings</span>
<span class="">Settings</span>
</a>
<button class="mt-sm w-full py-2 px-4 bg-surface-low text-primary border border-line rounded-lg font-body-bold hover:bg-surface-high transition-colors">
Save Progress
</button>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 md:ml-[256px] p-lg md:p-xl max-w-max-width mx-auto w-full flex flex-col gap-lg animate-slide-in-right">
<!-- Header -->
<div class="flex flex-col gap-sm">
<div class="flex items-center justify-between">
<div>
<span class="font-overline text-overline text-on-surface-variant uppercase tracking-wider">Step 4 of 6</span>
<h1 class="font-h1 text-h1 text-ink mt-xs">Configure document checklists</h1>
</div>
<div class="flex items-center gap-sm"><span class="px-3 py-1 bg-surface-container text-on-surface-variant rounded-full font-technical text-technical">2 of 8 workstreams configured</span><span class="px-3 py-1 bg-secondary-container text-on-secondary-container rounded-full font-technical text-technical font-bold">Sample data</span>
<span class="px-3 py-1 bg-accent-soft text-primary rounded-full font-technical text-technical flex items-center gap-xs">
<span class="material-symbols-outlined text-[16px]">info</span>
Auto-save enabled
</span>
</div>
</div>
<p class="text-on-surface-variant max-w-3xl">Define the required documentation for each workstream stage and configure SharePoint integration settings.</p>
</div>
<!-- Bento Layout -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-lg flex-1">
<!-- Workstream Selector (Left Sidebar-ish in content) -->
<div class="lg:col-span-3 flex flex-col gap-md">
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-md h-full flex flex-col">
<h3 class="font-h3 text-h3 text-ink mb-md">Workstreams</h3>
<div class="flex flex-col gap-xs"><button class="flex items-center justify-between w-full p-3 bg-surface-low border border-primary rounded text-left transition-colors"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-primary text-[20px]">window</span><span class="font-body-bold text-primary">Windows</span></div><span class="bg-surface-container-high text-primary px-2 py-0.5 rounded-full font-technical text-[10px]">4 docs</span></button><button class="flex items-center justify-between w-full p-3 hover:bg-surface-low border border-transparent rounded text-left transition-colors group"><div class="flex items-center gap-sm text-on-surface-variant group-hover:text-ink"><span class="material-symbols-outlined text-[20px]">door_open</span><span class="font-body">Doors</span></div><span class="bg-surface-container text-on-surface-variant px-2 py-0.5 rounded-full font-technical text-[10px]">0 docs</span></button><button class="flex items-center justify-between w-full p-3 hover:bg-surface-low border border-transparent rounded text-left transition-colors group"><div class="flex items-center gap-sm text-on-surface-variant group-hover:text-ink"><span class="material-symbols-outlined text-[20px]">roofing</span><span class="font-body">Roofs</span></div><span class="bg-surface-container text-on-surface-variant px-2 py-0.5 rounded-full font-technical text-[10px]">0 docs</span></button><button class="flex items-center justify-between w-full p-3 hover:bg-surface-low border border-transparent rounded text-left transition-colors group"><div class="flex items-center gap-sm text-on-surface-variant group-hover:text-ink"><span class="material-symbols-outlined text-[20px]">format_paint</span><span class="font-body">Cyclical decorations</span></div><span class="bg-surface-container text-on-surface-variant px-2 py-0.5 rounded-full font-technical text-[10px]">0 docs</span></button><button class="flex items-center justify-between w-full p-3 hover:bg-surface-low border border-transparent rounded text-left transition-colors group"><div class="flex items-center gap-sm text-on-surface-variant group-hover:text-ink"><span class="material-symbols-outlined text-[20px]">countertops</span><span class="font-body">Kitchens</span></div><span class="bg-surface-container text-on-surface-variant px-2 py-0.5 rounded-full font-technical text-[10px]">0 docs</span></button><button class="flex items-center justify-between w-full p-3 hover:bg-surface-low border border-transparent rounded text-left transition-colors group"><div class="flex items-center gap-sm text-on-surface-variant group-hover:text-ink"><span class="material-symbols-outlined text-[20px]">bathtub</span><span class="font-body">Bathrooms</span></div><span class="bg-surface-container text-on-surface-variant px-2 py-0.5 rounded-full font-technical text-[10px]">0 docs</span></button><button class="flex items-center justify-between w-full p-3 border rounded text-left transition-colors hover:bg-surface-low border-transparent group"><div class="flex items-center gap-sm text-on-surface-variant group-hover:text-ink"><span class="material-symbols-outlined text-[20px]">warning</span><span class="font-body">Asbestos</span></div><span class="bg-surface-container text-on-surface-variant px-2 py-0.5 rounded-full font-technical text-[10px]">1 doc</span></button><button class="flex items-center justify-between w-full p-3 hover:bg-surface-low border border-transparent rounded text-left transition-colors group"><div class="flex items-center gap-sm text-on-surface-variant group-hover:text-ink"><span class="material-symbols-outlined text-[20px]">heat_pump</span><span class="font-body">Electrical heating</span></div><span class="bg-surface-container text-on-surface-variant px-2 py-0.5 rounded-full font-technical text-[10px]">0 docs</span></button></div>
<button class="mt-auto pt-md flex items-center justify-center gap-xs text-primary font-body-bold hover:opacity-80 transition-opacity">
<span class="material-symbols-outlined text-[20px]">add</span>
Add Workstream
</button>
</div>
</div>
<!-- Detailed Requirement Table & SharePoint (Main Area) -->
<div class="lg:col-span-9 flex flex-col gap-lg">
<!-- Requirements Table Card -->
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card flex flex-col overflow-hidden">
<div class="p-md border-b border-line flex justify-between items-center bg-surface-bright">
<div class="flex items-center gap-sm">
<span class="material-symbols-outlined text-primary">fact_check</span>
<h2 class="font-h3 text-h3 text-ink">Checklist Requirements</h2>
</div>
<button class="flex items-center gap-xs bg-primary text-on-primary px-4 py-2 rounded font-body-bold hover:bg-primary-dark transition-colors">
<span class="material-symbols-outlined text-[18px]">add</span>
Add Requirement
</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead class="bg-surface-low">
<tr>
<th class="p-sm pl-md font-technical text-technical text-ink font-semibold border-b border-line">Document Name</th>
<th class="p-sm font-technical text-technical text-ink font-semibold border-b border-line w-48">Stage Requirement</th>
<th class="p-sm font-technical text-technical text-ink font-semibold border-b border-line">Naming Rules</th>
<th class="p-sm font-technical text-technical text-ink font-semibold border-b border-line w-24 text-center">Required</th>
<th class="p-sm pr-md border-b border-line w-16"></th>
</tr>
</thead>
<tbody><tr class="hover:bg-surface-low/60 transition-colors border-b border-line/50 group"><td class="p-sm pl-md"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-outline text-[20px]">verified</span><span class="font-body font-medium text-ink">Window certificate</span></div></td><td class="p-sm"><select class="w-full bg-surface-container-lowest border border-line rounded px-2 py-1 font-technical text-technical text-on-surface-variant outline-none"><option>Closed</option></select></td><td class="p-sm"><input class="w-full bg-surface-low border border-line rounded px-2 py-1 font-technical text-technical text-ink outline-none" type="text" value="[AssetRef]_[WORef]_Windows_Cert"></td><td class="p-sm text-center"><input checked="" class="w-4 h-4 text-primary bg-surface-container-lowest border-line rounded" type="checkbox"></td><td class="p-sm pr-md text-right"></td></tr><tr class="hover:bg-surface-low/60 transition-colors border-b border-line/50 group"><td class="p-sm pl-md"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-outline text-[20px]">workspace_premium</span><span class="font-body font-medium text-ink">Guarantee</span></div></td><td class="p-sm"><select class="w-full bg-surface-container-lowest border border-line rounded px-2 py-1 font-technical text-technical text-on-surface-variant outline-none"><option>Closed</option></select></td><td class="p-sm"><input class="w-full bg-surface-low border border-line rounded px-2 py-1 font-technical text-technical text-ink outline-none" type="text" value="[AssetRef]_[WORef]_Windows_Guarantee"></td><td class="p-sm text-center"><input checked="" class="w-4 h-4 text-primary bg-surface-container-lowest border-line rounded" type="checkbox"></td><td class="p-sm pr-md text-right"></td></tr><tr class="hover:bg-surface-low/60 transition-colors border-b border-line/50 group"><td class="p-sm pl-md"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-outline text-[20px]">gavel</span><span class="font-body font-medium text-ink">Building control evidence</span></div></td><td class="p-sm"><select class="w-full bg-surface-container-lowest border border-line rounded px-2 py-1 font-technical text-technical text-on-surface-variant outline-none"><option>Charged</option></select></td><td class="p-sm"><input class="w-full bg-surface-low border border-line rounded px-2 py-1 font-technical text-technical text-ink outline-none" type="text" value="[AssetRef]_[WORef]_Windows_BCE"></td><td class="p-sm text-center"><input checked="" class="w-4 h-4 text-primary bg-surface-container-lowest border-line rounded" type="checkbox"></td><td class="p-sm pr-md text-right"></td></tr><tr class="hover:bg-surface-low/60 transition-colors border-b border-line/50 group"><td class="p-sm pl-md"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-outline text-[20px]">inventory_2</span><span class="font-body font-medium text-ink">Handover pack</span></div></td><td class="p-sm"><select class="w-full bg-surface-container-lowest border border-line rounded px-2 py-1 font-technical text-technical text-on-surface-variant outline-none"><option>Closed</option></select></td><td class="p-sm"><input class="w-full bg-surface-low border border-line rounded px-2 py-1 font-technical text-technical text-ink outline-none" type="text" value="[AssetRef]_[WORef]_Windows_HandoverPack"></td><td class="p-sm text-center"><input checked="" class="w-4 h-4 text-primary bg-surface-container-lowest border-line rounded" type="checkbox"></td><td class="p-sm pr-md text-right"></td></tr></tbody>
</table>
</div>
</div>
<!-- SharePoint Configuration Card -->
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-md">
<div class="flex items-start gap-md mb-md">
<div class="p-2 bg-surface-low rounded text-primary">
<span class="material-symbols-outlined text-[24px]">folder_managed</span>
</div>
<div>
<h3 class="font-h3 text-h3 text-ink">SharePoint Folder Structure</h3>
<p class="text-technical font-technical text-on-surface-variant mt-xs">Define where approved documents will be automatically routed in your tenant.</p>
</div>
<div class="ml-auto">
<label class="flex items-center gap-2 cursor-pointer">
<span class="font-technical text-technical text-on-surface-variant">Sync Enabled</span>
<div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
<input checked="" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer border-primary translate-x-5 transition-transform" id="toggle" name="toggle" type="checkbox">
<label class="toggle-label block overflow-hidden h-5 rounded-full bg-primary cursor-pointer" for="toggle"></label>
</div>
</label>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-md">
<div>
<label class="block font-overline text-overline text-on-surface-variant mb-xs">Base URL</label>
<input class="w-full bg-surface-low border border-line rounded px-3 py-2 font-technical text-technical text-ink focus:border-accent focus:ring-1 focus:ring-accent outline-none" type="text" value="https://araproj.sharepoint.com/sites/engineering">
</div>
<div>
<label class="block font-overline text-overline text-on-surface-variant mb-xs">Sub-folder Template</label>
<input class="w-full bg-surface-low border border-line rounded px-3 py-2 font-technical text-technical text-ink focus:border-accent focus:ring-1 focus:ring-accent outline-none" type="text" value="/[AssetRef]/[WORef]/[Workstream]/[Stage]">
</div>
</div>
</div>
</div>
</div>
<!-- Footer Navigation -->
<div class="mt-auto pt-lg border-t border-line flex justify-between items-center pb-lg">
<button class="px-6 py-2 border border-line bg-surface-container-lowest text-on-surface-variant font-body-bold rounded-lg hover:bg-surface-low transition-colors flex items-center gap-sm">
<span class="material-symbols-outlined text-[20px]">arrow_back</span>
Back
</button>
<div class="flex items-center gap-md">
<button class="px-6 py-2 text-primary font-body-bold hover:opacity-80 transition-opacity">
Skip step
</button>
<button class="px-6 py-2 bg-primary text-on-primary font-body-bold rounded-lg hover:bg-primary-dark shadow-card transition-all flex items-center gap-sm">
Save and continue
<span class="material-symbols-outlined text-[20px]">arrow_forward</span>
</button>
</div>
</div>
</main>
</div>
</body></html>
Reference in a new issue View git blame Copy permalink