mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-07-27 22:45:03 +00:00
Merge pull request #430 from Hestia-Homes/docs/ara-projects-wireframes
Add Ara Projects UX wireframes
This commit is contained in:
KhalimCK
GitHub
commit
2e203c7d17
61 changed files with 9491 additions and 0 deletions
|
|
@ -0,0 +1,220 @@
|
|||
<!DOCTYPE html><html class="light" lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>Getting Started (Empty State)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — Getting Started (Empty State)
|
||||
Journey 1 — Admin import · screen 1 of 12
|
||||
Stitch project 8537473387290162501 · screen f0dd0f99a8e948588a7fae543000dc23
|
||||
Original HTML <title>: Getting Started - 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" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.shadow-card {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-canvas text-on-surface min-h-screen flex flex-col font-body antialiased">
|
||||
<!-- 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-md h-full">
|
||||
<a class="h-full flex items-center text-primary border-b-2 border-primary pb-1 px-sm" href="#">
|
||||
<span class="font-body-bold text-body-bold">Dashboard</span>
|
||||
</a>
|
||||
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer px-sm" href="#">
|
||||
<span class="font-body text-body">Projects</span>
|
||||
</a>
|
||||
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer px-sm" href="#">
|
||||
<span class="font-body text-body">Maintenance</span>
|
||||
</a>
|
||||
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer px-sm" href="#">
|
||||
<span class="font-body text-body">Schedule</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="flex items-center gap-sm">
|
||||
<button class="p-xs text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||
</button>
|
||||
<button class="p-xs text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</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 directly at the camera. The lighting is bright and even, set against a clean, light-colored background. The style is modern corporate, matching a clean UI aesthetic." src="../assets/img/img13.png">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-1 mt-header-height p-lg flex flex-col items-center justify-center max-w-[1440px] mx-auto w-full gap-xl">
|
||||
<!-- Empty State Card -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-xl flex flex-col items-center text-center max-w-2xl w-full">
|
||||
<div class="w-24 h-24 bg-surface-low rounded-full flex items-center justify-center mb-lg">
|
||||
<span class="material-symbols-outlined text-[48px] text-primary" data-icon="folder_open">folder_open</span>
|
||||
</div>
|
||||
<h1 class="font-h1 text-h1 text-primary mb-sm">Welcome to Ara Projects</h1>
|
||||
<p class="font-body text-body text-on-surface-variant max-w-md mb-xl">
|
||||
You don't have any active projects yet. Start by creating a new project to organize your workflows, track progress, and manage resources efficiently.
|
||||
</p>
|
||||
<button class="bg-primary text-on-primary font-body-bold text-body-bold px-lg py-sm rounded-DEFAULT hover:bg-primary-dark transition-colors flex items-center gap-sm">
|
||||
<span class="material-symbols-outlined" data-icon="add">add</span>
|
||||
Create project
|
||||
</button>
|
||||
</div>
|
||||
<!-- How setup works - Bento Grid Layout -->
|
||||
<div class="w-full max-w-4xl mt-lg">
|
||||
<h2 class="font-h2 text-h2 text-primary mb-lg text-center">How setup works</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-md">
|
||||
<!-- Step 1 -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-lg flex gap-md">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-high flex items-center justify-center shrink-0">
|
||||
<span class="font-body-bold text-primary">1</span>
|
||||
</div>
|
||||
<div><h3 class="font-h3 text-h3 text-primary mb-xs">Project details</h3><p class="font-body text-body text-on-surface-variant">Set up the basic parameters, naming conventions, and core objectives for your new project.</p></div>
|
||||
</div>
|
||||
<!-- Step 2 -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-lg flex gap-md">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-high flex items-center justify-center shrink-0">
|
||||
<span class="font-body-bold text-primary">2</span>
|
||||
</div>
|
||||
<div><h3 class="font-h3 text-h3 text-primary mb-xs">Workstreams and stages</h3><p class="font-body text-body text-on-surface-variant">Map out the lifecycle of your project with custom stages, milestones, and deliverables.</p></div>
|
||||
</div>
|
||||
<!-- Step 3 -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-lg flex gap-md">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-high flex items-center justify-center shrink-0">
|
||||
<span class="font-body-bold text-primary">3</span>
|
||||
</div>
|
||||
<div><h3 class="font-h3 text-h3 text-primary mb-xs">Documents and permissions</h3><p class="font-body text-body text-on-surface-variant">Create actionable tasks and quality assurance checks for each stage of the project.</p></div>
|
||||
</div>
|
||||
<!-- Step 4 -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-lg flex gap-md">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-high flex items-center justify-center shrink-0">
|
||||
<span class="font-body-bold text-primary">4</span>
|
||||
</div>
|
||||
<div><h3 class="font-h3 text-h3 text-primary mb-xs">Import and validate work orders</h3><p class="font-body text-body text-on-surface-variant">Invite team members and assign specific roles to ensure secure and structured collaboration.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,264 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>Project Details (Step 1)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — Project Details (Step 1)
|
||||
Journey 1 — Admin import · screen 2 of 12
|
||||
Stitch project 8537473387290162501 · screen 976cbaa080624a9d9d02f39b0618c0c3
|
||||
Original HTML <title>: Project details - Step 1 of 6
|
||||
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 4px 0 rgba(0,0,0,0.04)",
|
||||
"lifted": "0 8px 24px 0 rgba(42,52,122,0.10)"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.material-symbols-outlined[data-weight="fill"] {
|
||||
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
/* Custom Toggle Switch Styles */
|
||||
.toggle-checkbox:checked {
|
||||
right: 0;
|
||||
border-color: #111c64;
|
||||
}
|
||||
.toggle-checkbox:checked + .toggle-label {
|
||||
background-color: #111c64;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-canvas text-on-surface font-body font-body text-body antialiased min-h-screen">
|
||||
<!-- Background Canvas Context (Getting Started Behind Overlay) -->
|
||||
<div class="fixed inset-0 z-0 flex items-center justify-center pointer-events-none opacity-40">
|
||||
<div class="max-w-4xl w-full p-xl">
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-card border border-line p-xl">
|
||||
<div class="h-64 bg-surface-low rounded-lg mb-lg"></div>
|
||||
<div class="h-8 bg-surface-low rounded w-1/3 mb-md"></div>
|
||||
<div class="h-4 bg-surface-low rounded w-2/3 mb-sm"></div>
|
||||
<div class="h-4 bg-surface-low rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal Overlay -->
|
||||
<div class="fixed inset-0 z-50 flex items-center justify-center p-md sm:p-lg bg-ink/40 backdrop-blur-sm overflow-y-auto">
|
||||
<!-- Modal Container -->
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-lifted border border-line w-full max-w-[640px] my-auto relative animate-slide-in-right">
|
||||
<!-- Modal Header -->
|
||||
<div class="flex items-center justify-between p-lg border-b border-line">
|
||||
<div><span class="inline-block bg-secondary-container text-on-secondary-container text-overline px-sm py-xs rounded mb-xs uppercase">Sample data</span>
|
||||
<h2 class="font-h3 text-h3 text-primary mb-xs">Project details</h2>
|
||||
<p class="font-technical text-technical text-on-surface-variant flex items-center gap-xs">
|
||||
<span class="inline-flex w-4 h-4 rounded-full bg-primary-fixed text-on-primary-fixed items-center justify-center text-[10px] font-bold">1</span>
|
||||
Step 1 of 6 in Configuration Wizard
|
||||
</p>
|
||||
</div>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors p-sm rounded-full hover:bg-surface-low">
|
||||
<span class="material-symbols-outlined" data-icon="close">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Modal Body (Form) -->
|
||||
<div class="p-lg">
|
||||
<form class="space-y-lg">
|
||||
<!-- Form Grid Layout -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-lg">
|
||||
<!-- Project Name -->
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block font-body-bold text-body-bold text-on-surface mb-sm" for="projectName">Project Name <span class="text-error">*</span></label>
|
||||
<input class="w-full bg-surface-low border border-line rounded-lg px-md py-sm focus:border-primary focus:ring-1 focus:ring-primary transition-colors font-body text-body text-on-surface outline-none" id="projectName" placeholder="e.g. Alpha Sector Deployment" type="text" value="Stonewater Planned Works 2026">
|
||||
</div>
|
||||
<!-- Client -->
|
||||
<div>
|
||||
<label class="block font-body-bold text-body-bold text-on-surface mb-sm" for="client">Client</label>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-surface-low border border-line rounded-lg pl-md pr-xl py-sm focus:border-primary focus:ring-1 focus:ring-primary transition-colors font-body text-body text-on-surface outline-none appearance-none cursor-pointer" id="client">
|
||||
<option disabled="" selected="" value="">Select client...</option>
|
||||
<option value="1">Acme Corp</option>
|
||||
<option value="2">Stark Industries</option>
|
||||
<option value="3">Wayne Enterprises</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-sm top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" data-icon="expand_more">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Project Type -->
|
||||
<div>
|
||||
<label class="block font-body-bold text-body-bold text-on-surface mb-sm" for="projectType">Project Type</label>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-surface-low border border-line rounded-lg pl-md pr-xl py-sm focus:border-primary focus:ring-1 focus:ring-primary transition-colors font-body text-body text-on-surface outline-none appearance-none cursor-pointer" id="projectType">
|
||||
<option disabled="" selected="" value="">Select type...</option>
|
||||
<option value="infrastructure">Infrastructure</option>
|
||||
<option value="software">Software Migration</option>
|
||||
<option value="facility">Facility Management</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-sm top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" data-icon="expand_more">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block font-body-bold text-body-bold text-on-surface mb-sm" for="description">Description</label>
|
||||
<textarea class="w-full bg-surface-low border border-line rounded-lg px-md py-sm focus:border-primary focus:ring-1 focus:ring-primary transition-colors font-body text-body text-on-surface outline-none resize-none" id="description" placeholder="Provide a brief overview of the project scope and objectives..." rows="3"></textarea>
|
||||
</div>
|
||||
<!-- Start Date -->
|
||||
<div>
|
||||
<label class="block font-body-bold text-body-bold text-on-surface mb-sm" for="startDate">Start Date</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-low border border-line rounded-lg pl-md pr-xl py-sm focus:border-primary focus:ring-1 focus:ring-primary transition-colors font-technical text-technical text-on-surface outline-none cursor-pointer" id="startDate" type="date">
|
||||
<span class="material-symbols-outlined absolute right-sm top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" data-icon="calendar_month">calendar_month</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Date -->
|
||||
<div>
|
||||
<label class="block font-body-bold text-body-bold text-on-surface mb-sm" for="endDate">Estimated End Date</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-low border border-line rounded-lg pl-md pr-xl py-sm focus:border-primary focus:ring-1 focus:ring-primary transition-colors font-technical text-technical text-on-surface outline-none cursor-pointer" id="endDate" type="date">
|
||||
<span class="material-symbols-outlined absolute right-sm top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" data-icon="event">event</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Divider -->
|
||||
<div class="w-full h-px bg-line my-lg"></div>
|
||||
<!-- Admin Access Toggle -->
|
||||
<div class="flex items-center justify-between p-md bg-surface-high rounded-lg border border-line">
|
||||
<div class="pr-md">
|
||||
<h4 class="font-body-bold text-body-bold text-on-surface mb-xs">Grant Domna admin access</h4>
|
||||
<p class="font-technical text-technical text-on-surface-variant">Domna admins can help configure this project, support imports, and view project data. Stonewater can revoke this at any time.</p>
|
||||
</div>
|
||||
<div class="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in flex-shrink-0">
|
||||
<input class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-surface-container-lowest border-4 border-line appearance-none cursor-pointer z-10 top-0 left-0 transition-all duration-300" id="toggle" name="toggle" type="checkbox">
|
||||
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-line cursor-pointer transition-colors duration-300" for="toggle"></label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Modal Footer (Actions) -->
|
||||
<div class="p-lg bg-surface-bright border-t border-line rounded-b-xl flex justify-end gap-md">
|
||||
<button class="px-lg py-sm rounded-lg font-body-bold text-body-bold text-on-surface-variant bg-surface-container-lowest border border-line hover:bg-surface-low hover:text-on-surface transition-colors" type="button">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="px-lg py-sm rounded-lg font-body-bold text-body-bold text-on-primary bg-primary hover:bg-primary-dark shadow-sm transition-colors flex items-center gap-sm" type="button">
|
||||
Create and continue
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="arrow_forward">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,443 @@
|
|||
<!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 Stages (Step 3)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — Configure Stages (Step 3)
|
||||
Journey 1 — Admin import · screen 4 of 12
|
||||
Stitch project 8537473387290162501 · screen 6e731f2e843a4c55b4d3b96fe21e02bf
|
||||
Original HTML <title>: Ara Projects - Configure Stages
|
||||
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"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { background-color: theme('colors.canvas'); }
|
||||
.shadow-card { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02); }
|
||||
.shadow-lifted { box-shadow: 0 20px 25px -5px rgba(42, 52, 122, 0.1), 0 10px 10px -5px rgba(42, 52, 122, 0.04); }
|
||||
</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;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
</style></head>
|
||||
<body class="font-body text-body text-on-surface min-h-screen">
|
||||
<!-- TopNavBar -->
|
||||
<nav 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-xl h-full">
|
||||
<div class="font-display text-h3 font-extrabold text-primary">Ara Projects</div>
|
||||
<div class="hidden md:flex h-full items-center gap-md">
|
||||
<!-- Project Setup Context, so standard nav is suppressed or inactive, but keeping structure per JSON -->
|
||||
<a class="text-on-surface-variant h-full flex items-center px-sm hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Dashboard</a>
|
||||
<a class="text-on-surface-variant h-full flex items-center px-sm hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Projects</a>
|
||||
<a class="text-on-surface-variant h-full flex items-center px-sm hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Maintenance</a>
|
||||
<a class="text-on-surface-variant h-full flex items-center px-sm hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Schedule</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-md">
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
</button>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-high overflow-hidden 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, neutral lighting, corporate environment, high quality photography, soft depth of field." src="../assets/img/img20.png">
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- 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">
|
||||
<div class="mb-lg px-sm pt-md">
|
||||
<div class="flex items-center gap-sm mb-xs">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-high flex items-center justify-center text-primary border border-line">
|
||||
<span class="material-symbols-outlined">settings_suggest</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>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col gap-xs">
|
||||
<a class="flex items-center gap-sm px-sm py-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined">layers</span>
|
||||
<span class="">Workstream</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-sm px-sm py-sm rounded-lg bg-primary text-on-primary font-body-bold cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">account_tree</span>
|
||||
<span class="">Stages</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-sm px-sm py-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all 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-sm px-sm py-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined">admin_panel_settings</span>
|
||||
<span class="">Permissions</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-sm px-sm py-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined">upload_file</span>
|
||||
<span class="">Import</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-sm px-sm py-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" 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-lg border-t border-line">
|
||||
<a class="flex items-center gap-sm px-sm py-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
<span class="">Help Center</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-sm px-sm py-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="">Settings</span>
|
||||
</a>
|
||||
<button class="mt-md w-full bg-primary text-on-primary font-body-bold py-sm rounded-lg hover:bg-primary-dark transition-colors">
|
||||
Save Progress
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Canvas -->
|
||||
<main class="ml-sidebar-width pt-header-height min-h-screen p-xl flex flex-col animate-slide-in-right">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-end mb-lg">
|
||||
<div>
|
||||
<p class="font-overline text-overline text-primary tracking-widest uppercase mb-xs">Step 3 of 6</p>
|
||||
<h1 class="font-h1 text-h1 text-primary">Configure stages</h1>
|
||||
<p class="text-on-surface-variant mt-sm max-w-2xl">Define the lifecycle stages for your tasks. Reorder the default stages below, or apply specific overrides for different workstreams.</p>
|
||||
</div>
|
||||
<div class="flex gap-md">
|
||||
<button class="px-lg py-sm rounded-lg bg-surface-lowest border border-line text-on-surface hover:bg-surface-low transition-colors font-body-bold">
|
||||
Back
|
||||
</button>
|
||||
<button class="px-lg py-sm rounded-lg bg-primary text-on-primary hover:bg-primary-dark transition-colors font-body-bold">
|
||||
Save and continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Grid Layout -->
|
||||
<div class="grid grid-cols-12 gap-lg flex-1">
|
||||
<!-- Main Content Area - Default Stage Ladder -->
|
||||
<div class="col-span-8 flex flex-col gap-md">
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card flex-1 flex flex-col">
|
||||
<div class="p-lg border-b border-line bg-surface-bright flex justify-between items-center rounded-t-lg">
|
||||
<h2 class="font-h3 text-h3 text-primary">Default stage ladder</h2>
|
||||
<button class="text-primary hover:text-primary-dark flex items-center gap-xs font-body-bold text-technical">
|
||||
<span class="material-symbols-outlined text-[18px]">add</span> Add Stage
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-lg flex-1 bg-surface-bright">
|
||||
<!-- Draggable List Container -->
|
||||
<div class="flex flex-col gap-sm"><!-- Row 1 -->
|
||||
<div class="flex items-center gap-md p-md bg-surface-container-lowest border border-line rounded-lg shadow-sm hover:border-primary transition-colors group cursor-grab">
|
||||
<span class="material-symbols-outlined text-outline-variant cursor-grab">drag_indicator</span>
|
||||
<div class="w-8 h-8 rounded-full bg-accent-soft text-primary flex items-center justify-center font-technical font-bold">1</div>
|
||||
<div class="flex-1">
|
||||
<input class="w-full bg-transparent border-none p-0 focus:ring-0 font-body-bold text-on-surface" type="text" value="Ordered">
|
||||
<p class="font-technical text-technical text-on-surface-variant">New</p>
|
||||
</div>
|
||||
<div class="flex gap-sm opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-xs text-outline hover:text-primary"><span class="material-symbols-outlined text-[20px]">edit</span></button>
|
||||
<button class="p-xs text-outline hover:text-error"><span class="material-symbols-outlined text-[20px]">delete</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Row 2 -->
|
||||
<div class="flex items-center gap-md p-md bg-surface-container-lowest border border-line rounded-lg shadow-sm hover:border-primary transition-colors group cursor-grab">
|
||||
<span class="material-symbols-outlined text-outline-variant cursor-grab">drag_indicator</span>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-low text-on-surface-variant flex items-center justify-center font-technical font-bold">2</div>
|
||||
<div class="flex-1">
|
||||
<input class="w-full bg-transparent border-none p-0 focus:ring-0 font-body-bold text-on-surface" type="text" value="Awaiting authorisation">
|
||||
<p class="font-technical text-technical text-on-surface-variant">Active</p>
|
||||
</div>
|
||||
<div class="flex gap-sm opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-xs text-outline hover:text-primary"><span class="material-symbols-outlined text-[20px]">edit</span></button>
|
||||
<button class="p-xs text-outline hover:text-error"><span class="material-symbols-outlined text-[20px]">delete</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Row 3 -->
|
||||
<div class="flex items-center gap-md p-md bg-surface-container-lowest border border-line rounded-lg shadow-sm hover:border-primary transition-colors group cursor-grab">
|
||||
<span class="material-symbols-outlined text-outline-variant cursor-grab">drag_indicator</span>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-low text-on-surface-variant flex items-center justify-center font-technical font-bold">3</div>
|
||||
<div class="flex-1">
|
||||
<input class="w-full bg-transparent border-none p-0 focus:ring-0 font-body-bold text-on-surface" type="text" value="Assigned">
|
||||
<p class="font-technical text-technical text-on-surface-variant">Active</p>
|
||||
</div>
|
||||
<div class="flex gap-sm opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-xs text-outline hover:text-primary"><span class="material-symbols-outlined text-[20px]">edit</span></button>
|
||||
<button class="p-xs text-outline hover:text-error"><span class="material-symbols-outlined text-[20px]">delete</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Row 4 -->
|
||||
<div class="flex items-center gap-md p-md bg-surface-container-lowest border border-line rounded-lg shadow-sm hover:border-primary transition-colors group cursor-grab">
|
||||
<span class="material-symbols-outlined text-outline-variant cursor-grab">drag_indicator</span>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-low text-on-surface-variant flex items-center justify-center font-technical font-bold">4</div>
|
||||
<div class="flex-1">
|
||||
<input class="w-full bg-transparent border-none p-0 focus:ring-0 font-body-bold text-on-surface" type="text" value="In progress">
|
||||
<p class="font-technical text-technical text-on-surface-variant">Active</p>
|
||||
</div>
|
||||
<div class="flex gap-sm opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-xs text-outline hover:text-primary"><span class="material-symbols-outlined text-[20px]">edit</span></button>
|
||||
<button class="p-xs text-outline hover:text-error"><span class="material-symbols-outlined text-[20px]">delete</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Row 5 -->
|
||||
<div class="flex items-center gap-md p-md bg-surface-container-lowest border border-line rounded-lg shadow-sm hover:border-primary transition-colors group cursor-grab">
|
||||
<span class="material-symbols-outlined text-outline-variant cursor-grab">drag_indicator</span>
|
||||
<div class="w-8 h-8 rounded-full bg-tan-soft text-on-tan flex items-center justify-center font-technical font-bold">5</div>
|
||||
<div class="flex-1">
|
||||
<input class="w-full bg-transparent border-none p-0 focus:ring-0 font-body-bold text-on-surface" type="text" value="Completed">
|
||||
<p class="font-technical text-technical text-on-surface-variant">Complete</p>
|
||||
</div>
|
||||
<div class="flex gap-sm opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-xs text-outline hover:text-primary"><span class="material-symbols-outlined text-[20px]">edit</span></button>
|
||||
<button class="p-xs text-outline hover:text-error"><span class="material-symbols-outlined text-[20px]">delete</span></button>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar Context - Workstream Overrides -->
|
||||
<div class="col-span-4 flex flex-col gap-md">
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card h-full flex flex-col">
|
||||
<div class="p-lg border-b border-line bg-surface-low rounded-t-lg">
|
||||
<div class="flex items-center gap-sm mb-xs">
|
||||
<span class="material-symbols-outlined text-primary">rule</span>
|
||||
<h2 class="font-h3 text-h3 text-primary">Workstream overrides</h2>
|
||||
</div>
|
||||
<p class="font-technical text-technical text-on-surface-variant">Customize stages for specific workstreams.</p>
|
||||
</div>
|
||||
<div class="p-md flex-1 overflow-y-auto">
|
||||
<div class="space-y-sm"><!-- Asbestos - Custom -->
|
||||
<div class="p-md border border-line rounded-lg bg-surface-bright hover:bg-surface-low transition-colors cursor-pointer">
|
||||
<div class="flex justify-between items-center mb-xs">
|
||||
<span class="font-body-bold text-on-surface">Asbestos</span>
|
||||
<span class="px-2 py-1 bg-accent-soft text-primary font-overline text-overline rounded-full">Custom</span>
|
||||
</div>
|
||||
<p class="font-technical text-technical text-on-surface-variant mb-sm">Specific lifecycle for hazardous materials.</p>
|
||||
<div class="flex items-center gap-xs text-technical font-technical text-outline">
|
||||
<span class="material-symbols-outlined text-[16px]">account_tree</span>
|
||||
<span class="">6 Stages configured</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Windows - Default -->
|
||||
<div class="p-md border border-line rounded-lg bg-surface-bright hover:bg-surface-low transition-colors cursor-pointer opacity-70">
|
||||
<div class="flex justify-between items-center mb-xs">
|
||||
<span class="font-body-bold text-on-surface">Windows</span>
|
||||
<span class="px-2 py-1 bg-surface-high text-on-surface-variant font-overline text-overline rounded-full">Default</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-xs text-technical font-technical text-outline">
|
||||
<span class="material-symbols-outlined text-[16px]">account_tree</span>
|
||||
<span class="">Default settings applied</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Doors - Default -->
|
||||
<div class="p-md border border-line rounded-lg bg-surface-bright hover:bg-surface-low transition-colors cursor-pointer opacity-70">
|
||||
<div class="flex justify-between items-center mb-xs">
|
||||
<span class="font-body-bold text-on-surface">Doors</span>
|
||||
<span class="px-2 py-1 bg-surface-high text-on-surface-variant font-overline text-overline rounded-full">Default</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-xs text-technical font-technical text-outline">
|
||||
<span class="material-symbols-outlined text-[16px]">account_tree</span>
|
||||
<span class="">Default settings applied</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Roofs - Default -->
|
||||
<div class="p-md border border-line rounded-lg bg-surface-bright hover:bg-surface-low transition-colors cursor-pointer opacity-70">
|
||||
<div class="flex justify-between items-center mb-xs">
|
||||
<span class="font-body-bold text-on-surface">Roofs</span>
|
||||
<span class="px-2 py-1 bg-surface-high text-on-surface-variant font-overline text-overline rounded-full">Default</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-xs text-technical font-technical text-outline">
|
||||
<span class="material-symbols-outlined text-[16px]">account_tree</span>
|
||||
<span class="">Default settings applied</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Kitchens - Default -->
|
||||
<div class="p-md border border-line rounded-lg bg-surface-bright hover:bg-surface-low transition-colors cursor-pointer opacity-70">
|
||||
<div class="flex justify-between items-center mb-xs">
|
||||
<span class="font-body-bold text-on-surface">Kitchens</span>
|
||||
<span class="px-2 py-1 bg-surface-high text-on-surface-variant font-overline text-overline rounded-full">Default</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-xs text-technical font-technical text-outline">
|
||||
<span class="material-symbols-outlined text-[16px]">account_tree</span>
|
||||
<span class="">Default settings applied</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bathrooms - Default -->
|
||||
<div class="p-md border border-line rounded-lg bg-surface-bright hover:bg-surface-low transition-colors cursor-pointer opacity-70">
|
||||
<div class="flex justify-between items-center mb-xs">
|
||||
<span class="font-body-bold text-on-surface">Bathrooms</span>
|
||||
<span class="px-2 py-1 bg-surface-high text-on-surface-variant font-overline text-overline rounded-full">Default</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-xs text-technical font-technical text-outline">
|
||||
<span class="material-symbols-outlined text-[16px]">account_tree</span>
|
||||
<span class="">Default settings applied</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Electrical heating - Default -->
|
||||
<div class="p-md border border-line rounded-lg bg-surface-bright hover:bg-surface-low transition-colors cursor-pointer opacity-70">
|
||||
<div class="flex justify-between items-center mb-xs">
|
||||
<span class="font-body-bold text-on-surface">Electrical heating</span>
|
||||
<span class="px-2 py-1 bg-surface-high text-on-surface-variant font-overline text-overline rounded-full">Default</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-xs text-technical font-technical text-outline">
|
||||
<span class="material-symbols-outlined text-[16px]">account_tree</span>
|
||||
<span class="">Default settings applied</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Cyclical decorations - Default -->
|
||||
<div class="p-md border border-line rounded-lg bg-surface-bright hover:bg-surface-low transition-colors cursor-pointer opacity-70">
|
||||
<div class="flex justify-between items-center mb-xs">
|
||||
<span class="font-body-bold text-on-surface">Cyclical decorations</span>
|
||||
<span class="px-2 py-1 bg-surface-high text-on-surface-variant font-overline text-overline rounded-full">Default</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-xs text-technical font-technical text-outline">
|
||||
<span class="material-symbols-outlined text-[16px]">account_tree</span>
|
||||
<span class="">Default settings applied</span>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="p-md border-t border-line bg-surface-bright rounded-b-lg">
|
||||
<button class="w-full py-sm border border-primary text-primary font-body-bold rounded-lg hover:bg-primary hover:text-on-primary transition-colors flex justify-center items-center gap-xs">
|
||||
<span class="material-symbols-outlined text-[20px]">add</span> Create Override
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,345 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,292 @@
|
|||
<!DOCTYPE html><html class="light" lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>Contractors & Permissions (Step 5 - Updated)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — Contractors & Permissions (Step 5 - Updated)
|
||||
Journey 1 — Admin import · screen 6 of 12
|
||||
Stitch project 8537473387290162501 · screen b328e11663ee4e03b485195ffd5af676
|
||||
Original HTML <title>: Contractors and Permissions - 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" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.shadow-card {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
</style>
|
||||
<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 font-body min-h-screen">
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 w-full h-header-height z-50 flex justify-between items-center px-lg bg-surface-container-lowest dark:bg-surface-container-lowest border-b border-line dark:border-outline-variant flat no shadows">
|
||||
<div class="flex items-center gap-md">
|
||||
<h1 class="font-display text-h3 font-extrabold text-primary dark:text-primary-fixed-dim">Ara Projects</h1>
|
||||
<div class="relative hidden md:block">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 transform -translate-y-1/2 text-outline">search</span>
|
||||
<input class="pl-10 pr-4 py-2 bg-surface-low border border-line rounded-lg text-body font-body focus:outline-none focus:border-accent w-64" placeholder="Search..." type="text">
|
||||
</div>
|
||||
</div>
|
||||
<nav class="hidden md:flex gap-lg items-center h-full">
|
||||
<a class="h-full flex items-center text-on-surface-variant dark:text-on-surface-variant hover:text-primary dark:hover:text-primary-fixed-dim transition-colors cursor-pointer active:opacity-80 font-body text-body" href="#">Dashboard</a>
|
||||
<a class="h-full flex items-center text-primary dark:text-primary-fixed-dim border-b-2 border-primary dark:border-primary-fixed-dim pb-1 hover:text-primary dark:hover:text-primary-fixed-dim transition-colors cursor-pointer active:opacity-80 font-body text-body" href="#">Projects</a>
|
||||
<a class="h-full flex items-center text-on-surface-variant dark:text-on-surface-variant hover:text-primary dark:hover:text-primary-fixed-dim 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 dark:text-on-surface-variant hover:text-primary dark:hover:text-primary-fixed-dim transition-colors cursor-pointer active:opacity-80 font-body text-body" href="#">Schedule</a>
|
||||
</nav>
|
||||
<div class="flex items-center gap-md">
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
</button>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-high border border-line overflow-hidden cursor-pointer">
|
||||
<img alt="User account menu" class="w-full h-full object-cover" data-alt="A small, professional portrait of a user in a well-lit office setting. The style is modern corporate photography with a soft depth of field." src="../assets/img/img4.png">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- 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 dark:bg-surface-container flat no shadows">
|
||||
<div class="mb-lg px-sm">
|
||||
<div class="flex items-center gap-sm mb-sm">
|
||||
<div class="w-10 h-10 rounded-lg bg-primary-container text-on-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined" data-weight="fill" style="font-variation-settings: 'FILL' 1;">assignment</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-display text-subheading text-primary dark:text-primary-fixed-dim">Project Setup</h2>
|
||||
<p class="font-body text-technical text-on-surface-variant">Configuration Wizard</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-surface-high rounded-full h-2 mb-2">
|
||||
<div class="bg-primary h-2 rounded-full" style="width: 66%"></div>
|
||||
</div>
|
||||
<p class="font-body text-technical text-on-surface-variant text-right">Step 5 of 6</p>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col gap-xs">
|
||||
<a class="flex items-center gap-md px-md py-sm rounded-lg text-on-surface-variant dark:text-on-surface-variant hover:bg-surface-high dark:hover:bg-surface-variant transition-all cursor-pointer active:scale-95 font-body text-body" href="#">
|
||||
<span class="material-symbols-outlined">layers</span>
|
||||
Workstream
|
||||
<span class="material-symbols-outlined ml-auto text-primary" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm rounded-lg text-on-surface-variant dark:text-on-surface-variant hover:bg-surface-high dark:hover:bg-surface-variant transition-all cursor-pointer active:scale-95 font-body text-body" href="#">
|
||||
<span class="material-symbols-outlined">account_tree</span>
|
||||
Stages
|
||||
<span class="material-symbols-outlined ml-auto text-primary" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm rounded-lg text-on-surface-variant dark:text-on-surface-variant hover:bg-surface-high dark:hover:bg-surface-variant transition-all cursor-pointer active:scale-95 font-body text-body" href="#">
|
||||
<span class="material-symbols-outlined">fact_check</span>
|
||||
Checklist
|
||||
<span class="material-symbols-outlined ml-auto text-primary" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm bg-primary dark:bg-primary-container text-on-primary dark:text-on-primary-container font-body-bold rounded-lg transition-all cursor-pointer active:scale-95 text-body" href="#">
|
||||
<span class="material-symbols-outlined">admin_panel_settings</span>
|
||||
Permissions
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm rounded-lg text-on-surface-variant dark:text-on-surface-variant hover:bg-surface-high dark:hover:bg-surface-variant transition-all cursor-pointer active:scale-95 font-body text-body" href="#">
|
||||
<span class="material-symbols-outlined">upload_file</span>
|
||||
Import
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm rounded-lg text-on-surface-variant dark:text-on-surface-variant hover:bg-surface-high dark:hover:bg-surface-variant transition-all cursor-pointer active:scale-95 font-body text-body" href="#">
|
||||
<span class="material-symbols-outlined">table_chart</span>
|
||||
Mapping
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-md border-t border-line">
|
||||
<a class="flex items-center gap-md px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 font-body text-body" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
Help Center
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 font-body text-body" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
Settings
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="ml-sidebar-width mt-header-height p-lg max-w-max-width mx-auto animate-slide-in-right">
|
||||
<div class="flex justify-between items-end mb-lg">
|
||||
<div>
|
||||
<h2 class="font-h1 text-h1 text-on-surface mb-xs">Contractors and permissions</h2>
|
||||
<p class="font-body text-body text-on-surface-variant">Manage external access and capabilities within this project.</p>
|
||||
</div>
|
||||
<div class="flex gap-sm">
|
||||
|
||||
<button class="flex items-center gap-sm px-4 py-2 rounded-lg bg-primary text-on-primary font-body-bold hover:bg-primary-dark transition-colors">
|
||||
<span class="material-symbols-outlined">person_add</span>
|
||||
Add contractor
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table Card -->
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-card border border-line overflow-hidden mb-lg"><div class="px-4 py-2 bg-surface-low border-b border-line flex items-center gap-2"><span class="material-symbols-outlined text-outline text-technical">info</span><span class="text-technical font-body text-on-surface-variant">Sample data</span></div>
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-low border-b border-line">
|
||||
<th class="py-3 px-4 font-body-bold text-body text-on-surface">Contractor Name</th>
|
||||
<th class="py-3 px-4 font-body-bold text-body text-on-surface">Assigned Workstreams</th>
|
||||
<th class="py-3 px-4 font-body-bold text-body text-on-surface text-center">Update Stages</th>
|
||||
<th class="py-3 px-4 font-body-bold text-body text-on-surface text-center">Upload Docs</th>
|
||||
|
||||
<th class="py-3 px-4 font-body-bold text-body text-on-surface text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-technical text-technical">
|
||||
<!-- Row 1 -->
|
||||
<tr class="border-b border-line hover:bg-surface-low/60 transition-colors"><td class="py-4 px-4"><div class="flex items-center gap-3"><div class="w-8 h-8 rounded-full bg-surface-high flex items-center justify-center text-primary font-body-bold">A</div><span class="font-body-bold text-body text-on-surface">Apex Construction</span></div></td><td class="py-4 px-4"><div class="flex flex-wrap gap-2"><span class="px-2 py-1 rounded-full bg-accent-soft text-on-surface-variant font-overline">Windows</span><span class="px-2 py-1 rounded-full bg-surface-high text-on-surface-variant font-overline">Roofs</span><span class="px-2 py-1 rounded-full bg-surface-high text-on-surface-variant font-overline">Doors</span></div></td><td class="py-4 px-4 text-center"><label class="relative inline-flex items-center cursor-pointer"><input checked="" class="sr-only peer" type="checkbox" value=""><div class="w-11 h-6 bg-surface-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div></label></td><td class="py-4 px-4 text-center"><label class="relative inline-flex items-center cursor-pointer"><input checked="" class="sr-only peer" type="checkbox" value=""><div class="w-11 h-6 bg-surface-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div></label></td><td class="py-4 px-4 text-right"><button class="text-on-surface-variant hover:text-primary transition-colors"><span class="material-symbols-outlined">more_vert</span></button></td></tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="border-b border-line hover:bg-surface-low/60 transition-colors"><td class="py-4 px-4"><div class="flex items-center gap-3"><div class="w-8 h-8 rounded-full bg-surface-high flex items-center justify-center text-primary font-body-bold">B</div><span class="font-body-bold text-body text-on-surface">Elevate Electric</span></div></td><td class="py-4 px-4"><div class="flex flex-wrap gap-2"><span class="px-2 py-1 rounded-full bg-accent-soft text-on-surface-variant font-overline">Kitchens</span><span class="px-2 py-1 rounded-full bg-surface-high text-on-surface-variant font-overline">Bathrooms</span><span class="px-2 py-1 rounded-full bg-surface-high text-on-surface-variant font-overline">Cyclical decorations</span></div></td><td class="py-4 px-4 text-center"><label class="relative inline-flex items-center cursor-pointer"><input class="sr-only peer" type="checkbox" value=""><div class="w-11 h-6 bg-surface-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div></label></td><td class="py-4 px-4 text-center"><label class="relative inline-flex items-center cursor-pointer"><input class="sr-only peer" type="checkbox" value=""><div class="w-11 h-6 bg-surface-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div></label></td><td class="py-4 px-4 text-right"><button class="text-on-surface-variant hover:text-primary transition-colors"><span class="material-symbols-outlined">more_vert</span></button></td></tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-surface-low/60 transition-colors"><td class="py-4 px-4"><div class="flex items-center gap-3"><div class="w-8 h-8 rounded-full bg-surface-high flex items-center justify-center text-primary font-body-bold">C</div><span class="font-body-bold text-body text-on-surface">Prime Plumbing</span></div></td><td class="py-4 px-4"><div class="flex flex-wrap gap-2"><span class="px-2 py-1 rounded-full bg-accent-soft text-on-surface-variant font-overline">Electrical heating</span><span class="px-2 py-1 rounded-full bg-surface-high text-on-surface-variant font-overline">Asbestos</span></div></td><td class="py-4 px-4 text-center"><label class="relative inline-flex items-center cursor-pointer"><input class="sr-only peer" type="checkbox" value=""><div class="w-11 h-6 bg-surface-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div></label></td><td class="py-4 px-4 text-center"><label class="relative inline-flex items-center cursor-pointer"><input class="sr-only peer" type="checkbox" value=""><div class="w-11 h-6 bg-surface-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div></label></td><td class="py-4 px-4 text-right"><button class="text-on-surface-variant hover:text-primary transition-colors"><span class="material-symbols-outlined">more_vert</span></button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Global Settings Card -->
|
||||
<!-- Footer Actions -->
|
||||
<div class="flex justify-between items-center pt-md border-t border-line mt-xl">
|
||||
<button class="px-6 py-3 rounded-lg bg-surface-low text-on-surface font-body-bold hover:bg-surface-high transition-colors">
|
||||
Back
|
||||
</button>
|
||||
<button class="px-6 py-3 rounded-lg bg-primary text-on-primary font-body-bold hover:bg-primary-dark transition-colors shadow-card">
|
||||
Save and continue
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,323 @@
|
|||
<!DOCTYPE html><html class="light" lang="en" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>Import Upload (Step 6)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — Import Upload (Step 6)
|
||||
Journey 1 — Admin import · screen 7 of 12
|
||||
Stitch project 8537473387290162501 · screen 7053d9accf824e3c876da3162e58998c
|
||||
Original HTML <title>: Import Programme Data
|
||||
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"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.icon-fill {
|
||||
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
</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;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
</style></head>
|
||||
<body class="bg-canvas text-on-background font-body min-h-screen antialiased flex flex-col" style="min-height: 1024px;">
|
||||
<!-- 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">
|
||||
<div class="font-display text-h3 font-extrabold text-primary">
|
||||
Ara Projects
|
||||
</div>
|
||||
<nav class="hidden md:flex gap-md">
|
||||
<a class="font-body text-body text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Dashboard</a>
|
||||
<a class="font-body text-body text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Projects</a>
|
||||
<a class="font-body text-body text-primary border-b-2 border-primary pb-1 cursor-pointer active:opacity-80" href="#">Maintenance</a>
|
||||
<a class="font-body text-body text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Schedule</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-sm">
|
||||
<button class="p-xs text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||
</button>
|
||||
<button class="p-xs text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-high overflow-hidden border border-line ml-sm">
|
||||
<img alt="User account menu" class="object-cover w-full h-full" data-alt="A small, circular avatar portrait of a professional woman with a warm, subtle smile in a modern corporate setting. She is wearing a dark indigo blazer. The background is a soft, out-of-focus light gray. Clean, corporate aesthetic." src="../assets/img/img17.png">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex flex-1 pt-header-height">
|
||||
<!-- 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 hidden md:flex">
|
||||
<div class="mb-md p-sm">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-low flex items-center justify-center mb-sm border border-line shadow-sm">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="rocket_launch">rocket_launch</span>
|
||||
</div>
|
||||
<h2 class="font-display text-subheading text-primary">Project Setup</h2>
|
||||
<p class="font-body text-technical text-on-surface-variant mt-xs">Configuration Wizard</p>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col gap-xs">
|
||||
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="layers">layers</span>
|
||||
<span class="font-body text-body">Workstream</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="account_tree">account_tree</span>
|
||||
<span class="font-body text-body">Stages</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="fact_check">fact_check</span>
|
||||
<span class="font-body text-body">Checklist</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="admin_panel_settings">admin_panel_settings</span>
|
||||
<span class="font-body text-body">Permissions</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-sm p-sm rounded-lg bg-primary text-on-primary font-body-bold cursor-pointer active:scale-95 shadow-sm" href="#">
|
||||
<span class="material-symbols-outlined text-xl icon-fill" data-icon="upload_file">upload_file</span>
|
||||
<span class="">Import</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="table_chart">table_chart</span>
|
||||
<span class="font-body text-body">Mapping</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto flex flex-col gap-sm">
|
||||
<button class="w-full py-sm px-md rounded-lg bg-primary-container text-on-primary-container font-body-bold hover:opacity-90 transition-opacity">
|
||||
Save Progress
|
||||
</button>
|
||||
<div class="border-t border-line pt-sm flex flex-col gap-xs">
|
||||
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="help">help</span>
|
||||
<span class="font-body text-body">Help Center</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-sm p-sm rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer" href="#">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="settings">settings</span>
|
||||
<span class="font-body text-body">Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 md:ml-sidebar-width p-lg max-w-max-width mx-auto w-full animate-slide-in-right" style="min-height: 1024px;">
|
||||
<div class="flex justify-between items-end mb-lg">
|
||||
<div>
|
||||
<span class="font-technical text-technical text-primary uppercase tracking-widest mb-xs block">Step 6 of 6</span>
|
||||
<h1 class="font-h1 text-h1 text-ink">Import programme data</h1>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-xs">
|
||||
<div class="w-8 h-2 rounded-full bg-surface-high"></div>
|
||||
<div class="w-8 h-2 rounded-full bg-surface-high"></div>
|
||||
<div class="w-8 h-2 rounded-full bg-surface-high"></div>
|
||||
<div class="w-8 h-2 rounded-full bg-surface-high"></div>
|
||||
<div class="w-8 h-2 rounded-full bg-surface-high"></div>
|
||||
<div class="w-16 h-2 rounded-full bg-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-lg">
|
||||
<!-- Import Canvas -->
|
||||
<div class="lg:col-span-2 flex flex-col gap-md">
|
||||
<!-- Dropzone Card -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-lg border border-line shadow-sm relative overflow-hidden group">
|
||||
<!-- Decorative background element -->
|
||||
<div class="absolute -right-20 -top-20 w-64 h-64 bg-surface-high rounded-full opacity-50 blur-3xl group-hover:bg-primary-fixed-dim transition-colors duration-700"></div>
|
||||
<div class="relative z-10 border-2 border-dashed border-outline-variant hover:border-primary rounded-lg p-xl flex flex-col items-center justify-center text-center min-h-[300px] transition-colors bg-surface-bright/50">
|
||||
<div class="w-16 h-16 rounded-full bg-surface-container flex items-center justify-center mb-md text-primary">
|
||||
<span class="material-symbols-outlined text-display" data-icon="cloud_upload">cloud_upload</span>
|
||||
</div>
|
||||
<h3 class="font-h3 text-h3 text-ink mb-xs">Drag and drop your file here</h3>
|
||||
<p class="font-body text-body text-on-surface-variant mb-md max-w-sm">
|
||||
Supported formats: .csv, .xlsx, .xls. Maximum file size 50MB. Ensure data matches the required schema.
|
||||
</p>
|
||||
<div class="flex items-center gap-sm">
|
||||
<button class="py-sm px-lg rounded-lg bg-primary text-on-primary font-body-bold hover:bg-primary-dark transition-colors shadow-sm">Browse files</button>
|
||||
<span class="font-body text-technical text-on-surface-variant mx-xs">or</span>
|
||||
<button class="flex items-center gap-xs py-sm px-md rounded-lg border border-line text-on-surface-variant font-body-bold hover:bg-surface-low transition-colors"><span class="material-symbols-outlined text-lg" data-icon="download">download</span>Download template</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Required Fields Info -->
|
||||
|
||||
</div>
|
||||
<!-- Guidance Sidebar -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="bg-surface-container-lowest rounded-xl p-md border border-line shadow-sm sticky top-[88px]">
|
||||
<h3 class="font-h3 text-h3 text-ink mb-md">What happens next?</h3>
|
||||
<div class="relative pl-lg border-l-2 border-line space-y-md">
|
||||
<!-- Step 1 -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[25px] top-0 w-6 h-6 rounded-full bg-surface-container border-2 border-primary flex items-center justify-center">
|
||||
<div class="w-2 h-2 rounded-full bg-primary"></div>
|
||||
</div>
|
||||
<h4 class="font-body-bold text-body text-ink mb-xs">Upload & Validation</h4>
|
||||
<p class="font-body text-technical text-on-surface-variant">We'll scan your file to ensure all required fields are present and data formats are correct.</p>
|
||||
</div>
|
||||
<!-- Step 2 -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[25px] top-0 w-6 h-6 rounded-full bg-surface-container border-2 border-line flex items-center justify-center">
|
||||
</div>
|
||||
<h4 class="font-body-bold text-body text-ink mb-xs">Column Mapping</h4>
|
||||
<p class="font-body text-technical text-on-surface-variant">You'll have a chance to map any unrecognized columns to our system's fields.</p>
|
||||
</div>
|
||||
<!-- Step 3 -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[25px] top-0 w-6 h-6 rounded-full bg-surface-container border-2 border-line flex items-center justify-center">
|
||||
</div>
|
||||
<h4 class="font-body-bold text-body text-ink mb-xs">Preview & Commit</h4>
|
||||
<p class="font-body text-technical text-on-surface-variant">Review a sample of the imported data before finalizing the changes to the database.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-xl pt-md border-t border-line flex gap-sm">
|
||||
<button class="flex-1 py-sm px-md rounded-lg border border-line text-on-surface-variant font-body-bold hover:bg-surface-low transition-colors text-center">
|
||||
Back
|
||||
</button>
|
||||
<button class="flex-1 py-sm px-md rounded-lg bg-primary text-on-primary font-body-bold hover:bg-primary-dark transition-colors shadow-sm text-center opacity-50 cursor-not-allowed">
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,676 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>Map Columns (Rebuilt)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — Map Columns (Rebuilt)
|
||||
Journey 1 — Admin import · screen 8 of 12
|
||||
Stitch project 8537473387290162501 · screen df4eb43b57d84f19ae21b362006ceaaf
|
||||
Original HTML <title>: Map columns - 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": "#1d2459",
|
||||
"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": "#111c64",
|
||||
"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": "#2a347a",
|
||||
"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",
|
||||
"accent": "#3d9be9"
|
||||
},
|
||||
"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>
|
||||
.shadow-card {
|
||||
box-shadow: 0 4px 6px -1px rgba(17, 28, 43, 0.04), 0 2px 4px -1px rgba(17, 28, 43, 0.02);
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
||||
}
|
||||
.icon-fill-1 {
|
||||
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
||||
}
|
||||
/* Tabular numerals utility */
|
||||
.tabular-nums {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-canvas text-on-surface font-body antialiased min-h-screen overflow-x-hidden">
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 w-full h-header-height z-50 flex justify-between items-center px-lg bg-surface-container-lowest text-primary border-b border-line">
|
||||
<div class="flex items-center gap-xl">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[24px] text-primary">domain</span>
|
||||
<div class="font-display text-h3 font-extrabold text-primary">Domna</div>
|
||||
</div>
|
||||
<!-- Workspace Switcher -->
|
||||
<div class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-surface-low cursor-pointer transition-colors border border-line">
|
||||
<div class="w-6 h-6 rounded bg-primary text-on-primary flex items-center justify-center font-body-bold text-xs">SW</div>
|
||||
<span class="font-body-bold text-body text-on-surface">Stonewater</span>
|
||||
<span class="material-symbols-outlined text-[18px] text-on-surface-variant">unfold_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation Links -->
|
||||
<nav class="hidden md:flex gap-lg h-full items-center">
|
||||
<a class="h-full flex flex-col justify-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">
|
||||
<span class="font-body text-body">Dashboard</span>
|
||||
</a>
|
||||
<a class="h-full flex flex-col justify-center text-primary border-b-2 border-primary pb-1 cursor-pointer active:opacity-80" href="#">
|
||||
<span class="font-body text-body">Projects</span>
|
||||
</a>
|
||||
<a class="h-full flex flex-col justify-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">
|
||||
<span class="font-body text-body">Maintenance</span>
|
||||
</a>
|
||||
<a class="h-full flex flex-col justify-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">
|
||||
<span class="font-body text-body">Schedule</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- Trailing Actions & Profile -->
|
||||
<div class="flex items-center gap-sm">
|
||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors rounded-full hover:bg-surface-high">
|
||||
<span class="material-symbols-outlined text-[20px]">help</span>
|
||||
</button>
|
||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors rounded-full hover:bg-surface-high">
|
||||
<span class="material-symbols-outlined text-[20px]">notifications</span>
|
||||
</button>
|
||||
<div class="ml-2 w-8 h-8 rounded-full bg-primary-fixed overflow-hidden border border-line cursor-pointer">
|
||||
<img alt="User account menu" class="w-full h-full object-cover" data-alt="A professional headshot of a person looking forward, brightly lit with a soft studio background, highly detailed." src="../assets/img/img9.png">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="hidden md:flex fixed left-0 top-header-height h-[calc(100vh-theme(spacing.header-height))] w-sidebar-width p-md flex-col gap-sm bg-surface-container border-r border-line z-40">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-sm mb-lg px-2 pt-2">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-low flex items-center justify-center border border-line shadow-card text-primary">
|
||||
<span class="material-symbols-outlined">settings_suggest</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>
|
||||
<!-- Navigation Tabs -->
|
||||
<nav class="flex-1 flex flex-col gap-xs">
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">layers</span>
|
||||
<span class="font-body text-body">Workstream</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">account_tree</span>
|
||||
<span class="font-body text-body">Stages</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">fact_check</span>
|
||||
<span class="font-body text-body">Checklist</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">admin_panel_settings</span>
|
||||
<span class="font-body text-body">Permissions</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">upload_file</span>
|
||||
<span class="font-body text-body">Import</span>
|
||||
</a>
|
||||
<!-- Active Tab -->
|
||||
<a class="flex items-center gap-md px-3 py-2 bg-primary text-on-primary font-body-bold rounded-lg cursor-pointer active:scale-95 shadow-sm" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">table_chart</span>
|
||||
<span class="">Mapping</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- CTA & Footer -->
|
||||
<div class="mt-auto flex flex-col gap-sm pt-md border-t border-line">
|
||||
<button class="w-full bg-surface-low border border-line text-primary font-body-bold text-body py-2 rounded-lg hover:bg-surface-high transition-colors shadow-sm flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">save</span>
|
||||
Save progress
|
||||
</button>
|
||||
<div class="flex flex-col gap-xs mt-2">
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">help</span>
|
||||
<span class="font-body text-body">Help center</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">settings</span>
|
||||
<span class="font-body text-body">Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="pt-[calc(theme(spacing.header-height)+theme(spacing.lg))] md:pl-[calc(theme(spacing.sidebar-width)+theme(spacing.lg))] pr-lg pb-xl max-w-[1440px] mx-auto min-h-screen flex flex-col">
|
||||
<!-- Page Header -->
|
||||
<div class="flex justify-between items-end mb-lg">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 text-on-surface-variant mb-2">
|
||||
<span class="font-technical text-technical">Import</span>
|
||||
<span class="material-symbols-outlined text-[14px]">chevron_right</span>
|
||||
<span class="font-technical text-technical text-primary">Mapping</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<h1 class="font-display text-h1 text-on-surface">Map columns</h1>
|
||||
<span class="px-2 py-1 bg-surface-low text-on-surface-variant text-xs font-technical border border-line rounded">Sample data</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-md">
|
||||
<button class="px-4 py-2 border border-line bg-surface-container-lowest rounded-lg font-body-bold text-body text-on-surface hover:bg-surface-low transition-colors shadow-sm">
|
||||
Back
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-primary text-on-primary rounded-lg font-body-bold text-body hover:bg-primary-dark transition-colors shadow-sm flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">check_circle</span>
|
||||
Validate import
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- File Summary Card -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line p-lg mb-lg shadow-card flex items-center justify-between">
|
||||
<div class="flex items-center gap-md">
|
||||
<div class="w-12 h-12 bg-surface-low rounded-lg flex items-center justify-center border border-line text-primary">
|
||||
<span class="material-symbols-outlined text-[24px]">description</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-body-bold text-body text-on-surface">stonewater_planned_works_upload.xlsx</h3>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">1,248 rows found</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-6 items-center">
|
||||
<div class="text-right">
|
||||
<div class="font-technical text-overline text-on-surface-variant uppercase tracking-wider mb-1">Auto-matched</div>
|
||||
<div class="font-body-bold text-h3 text-primary tabular-nums">38</div>
|
||||
</div>
|
||||
<div class="w-px bg-line h-10"></div>
|
||||
<div class="text-right">
|
||||
<div class="font-technical text-overline text-error uppercase tracking-wider mb-1">Needs review</div>
|
||||
<div class="font-body-bold text-h3 text-error tabular-nums">3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mapping Tables Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-lg flex-1">
|
||||
<!-- Column Mapping Table -->
|
||||
<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 bg-surface-bright flex justify-between items-center">
|
||||
<h2 class="font-display text-subheading text-on-surface">Column mapping</h2>
|
||||
<span class="px-2 py-1 bg-surface-low rounded-full font-technical text-technical text-on-surface-variant">File → Ara</span>
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1 p-0">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="bg-surface-low sticky top-0 z-10">
|
||||
<tr>
|
||||
<th class="py-3 px-md font-technical text-overline text-on-surface-variant uppercase border-b border-line w-5/12">File column</th>
|
||||
<th class="py-3 px-md font-technical text-overline text-on-surface-variant uppercase border-b border-line w-2/12 text-center">Status</th>
|
||||
<th class="py-3 px-md font-technical text-overline text-on-surface-variant uppercase border-b border-line w-5/12">Ara field</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-body text-body divide-y divide-line">
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Asset Ref</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48 tabular-nums">e.g. 100245</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Asset reference</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Works Order Number</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48 tabular-nums">e.g. WO-23881</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Work order reference</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Address Line 1</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48 tabular-nums">e.g. 12 High St</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Address</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Postcode</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48 tabular-nums">e.g. SW1A 1AA</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Postcode</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-error-soft/30 hover:bg-error-soft/50 transition-colors border-l-4 border-l-error">
|
||||
<td class="py-3 px-md pl-3">
|
||||
<div class="font-body-bold text-on-surface flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px] text-error">warning</span>
|
||||
Work Type
|
||||
</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48">e.g. Bathroom Programme</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-error">help</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<button class="w-full bg-surface-container-lowest border border-error text-error font-body-bold rounded py-1.5 px-2 text-body hover:bg-error-soft transition-colors flex justify-between items-center">
|
||||
Review mapping
|
||||
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Contractor Name</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48">e.g. Contractor A</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Contractor</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-error-soft/30 hover:bg-error-soft/50 transition-colors border-l-4 border-l-error">
|
||||
<td class="py-3 px-md pl-3">
|
||||
<div class="font-body-bold text-on-surface flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px] text-error">warning</span>
|
||||
Status
|
||||
</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48">e.g. Assigned</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-error">help</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<button class="w-full bg-surface-container-lowest border border-error text-error font-body-bold rounded py-1.5 px-2 text-body hover:bg-error-soft transition-colors flex justify-between items-center">
|
||||
Review mapping
|
||||
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Forecast Start</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48 tabular-nums">e.g. 2026-07-01</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Forecast start</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Forecast End</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48 tabular-nums">e.g. 2026-07-15</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Forecast end</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-error-soft/30 hover:bg-error-soft/50 transition-colors border-l-4 border-l-error">
|
||||
<td class="py-3 px-md pl-3">
|
||||
<div class="font-body-bold text-on-surface flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px] text-error">warning</span>
|
||||
Priority
|
||||
</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48">e.g. Yes</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-error">help</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<button class="w-full bg-surface-container-lowest border border-error text-error font-body-bold rounded py-1.5 px-2 text-body hover:bg-error-soft transition-colors flex justify-between items-center">
|
||||
Review mapping
|
||||
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Workstream Value Mapping Table -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card flex flex-col overflow-hidden relative">
|
||||
<!-- Gated Overlay -->
|
||||
<div class="absolute inset-0 z-20 bg-surface-container-lowest/80 backdrop-blur-[2px] flex items-center justify-center p-lg">
|
||||
<div class="text-center bg-surface-container-lowest border border-line p-lg rounded-lg shadow-card">
|
||||
<span class="material-symbols-outlined text-[32px] text-outline mb-2">account_tree</span>
|
||||
<p class="font-body-bold text-h3 text-on-surface">Complete column mapping to map cell values</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-md border-b border-line bg-surface-bright flex justify-between items-center opacity-40">
|
||||
<div>
|
||||
<h2 class="font-display text-subheading text-on-surface">Workstream value mapping</h2>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-0.5">Mapping distinct values from the Work Type column</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1 p-0 opacity-40 select-none">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="bg-surface-low sticky top-0 z-10">
|
||||
<tr>
|
||||
<th class="py-3 px-md font-technical text-overline text-on-surface-variant uppercase border-b border-line w-5/12">File value</th>
|
||||
<th class="py-3 px-md font-technical text-overline text-on-surface-variant uppercase border-b border-line w-2/12 text-center">Status</th>
|
||||
<th class="py-3 px-md font-technical text-overline text-on-surface-variant uppercase border-b border-line w-5/12">Ara workstream</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-body text-body divide-y divide-line">
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Window Programme</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">240 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer" disabled="">
|
||||
<option selected="">Windows</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Door Replacement</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">180 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer" disabled="">
|
||||
<option selected="">Doors</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Roofing Works</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">72 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer" disabled="">
|
||||
<option selected="">Roofing</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Cyclical Decorations</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">194 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer" disabled="">
|
||||
<option selected="">Decorations</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Kitchen Programme</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">210 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer" disabled="">
|
||||
<option selected="">Kitchens</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-error-soft/30 hover:bg-error-soft/50 transition-colors border-l-4 border-l-error">
|
||||
<td class="py-3 px-md pl-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2 py-1 bg-surface-container-highest text-on-surface rounded font-technical border border-line">Bathroom Programme</span>
|
||||
<span class="material-symbols-outlined text-[16px] text-error">warning</span>
|
||||
</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">195 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-error">help</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-container-lowest border border-error text-error rounded py-1.5 px-2 text-body focus:outline-none focus:ring-1 focus:ring-error appearance-none cursor-pointer" disabled="">
|
||||
<option disabled="" selected="" value="">Select workstream...</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Asbestos Removal</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">44 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer" disabled="">
|
||||
<option selected="">Asbestos</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Electrical Heating Works</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">96 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer" disabled="">
|
||||
<option selected="">Electrical heating</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,673 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>Map Columns (Workstream Unlocked)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — Map Columns (Workstream Unlocked)
|
||||
Journey 1 — Admin import · screen 9 of 12
|
||||
Stitch project 8537473387290162501 · screen ac72c40f3bd742b38a8248e8398f5b90
|
||||
Original HTML <title>: Map columns - 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": "#1d2459",
|
||||
"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": "#111c64",
|
||||
"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": "#2a347a",
|
||||
"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",
|
||||
"accent": "#3d9be9"
|
||||
},
|
||||
"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>
|
||||
.shadow-card {
|
||||
box-shadow: 0 4px 6px -1px rgba(17, 28, 43, 0.04), 0 2px 4px -1px rgba(17, 28, 43, 0.02);
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
||||
}
|
||||
.icon-fill-1 {
|
||||
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
||||
}
|
||||
/* Tabular numerals utility */
|
||||
.tabular-nums {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-canvas text-on-surface font-body antialiased min-h-screen overflow-x-hidden">
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 w-full h-header-height z-50 flex justify-between items-center px-lg bg-surface-container-lowest text-primary border-b border-line">
|
||||
<div class="flex items-center gap-xl">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[24px] text-primary">domain</span>
|
||||
<div class="font-display text-h3 font-extrabold text-primary">Domna</div>
|
||||
</div>
|
||||
<!-- Workspace Switcher -->
|
||||
<div class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-surface-low cursor-pointer transition-colors border border-line">
|
||||
<div class="w-6 h-6 rounded bg-primary text-on-primary flex items-center justify-center font-body-bold text-xs">SW</div>
|
||||
<span class="font-body-bold text-body text-on-surface">Stonewater</span>
|
||||
<span class="material-symbols-outlined text-[18px] text-on-surface-variant">unfold_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation Links -->
|
||||
<nav class="hidden md:flex gap-lg h-full items-center">
|
||||
<a class="h-full flex flex-col justify-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">
|
||||
<span class="font-body text-body">Dashboard</span>
|
||||
</a>
|
||||
<a class="h-full flex flex-col justify-center text-primary border-b-2 border-primary pb-1 cursor-pointer active:opacity-80" href="#">
|
||||
<span class="font-body text-body">Projects</span>
|
||||
</a>
|
||||
<a class="h-full flex flex-col justify-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">
|
||||
<span class="font-body text-body">Maintenance</span>
|
||||
</a>
|
||||
<a class="h-full flex flex-col justify-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">
|
||||
<span class="font-body text-body">Schedule</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- Trailing Actions & Profile -->
|
||||
<div class="flex items-center gap-sm">
|
||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors rounded-full hover:bg-surface-high">
|
||||
<span class="material-symbols-outlined text-[20px]">help</span>
|
||||
</button>
|
||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors rounded-full hover:bg-surface-high">
|
||||
<span class="material-symbols-outlined text-[20px]">notifications</span>
|
||||
</button>
|
||||
<div class="ml-2 w-8 h-8 rounded-full bg-primary-fixed overflow-hidden border border-line cursor-pointer">
|
||||
<img alt="User account menu" class="w-full h-full object-cover" data-alt="A professional headshot of a person looking forward, brightly lit with a soft studio background, highly detailed." src="../assets/img/img9.png">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="hidden md:flex fixed left-0 top-header-height h-[calc(100vh-theme(spacing.header-height))] w-sidebar-width p-md flex-col gap-sm bg-surface-container border-r border-line z-40">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-sm mb-lg px-2 pt-2">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-low flex items-center justify-center border border-line shadow-card text-primary">
|
||||
<span class="material-symbols-outlined">settings_suggest</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>
|
||||
<!-- Navigation Tabs -->
|
||||
<nav class="flex-1 flex flex-col gap-xs">
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">layers</span>
|
||||
<span class="font-body text-body">Workstream</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">account_tree</span>
|
||||
<span class="font-body text-body">Stages</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">fact_check</span>
|
||||
<span class="font-body text-body">Checklist</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">admin_panel_settings</span>
|
||||
<span class="font-body text-body">Permissions</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95 rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">upload_file</span>
|
||||
<span class="font-body text-body">Import</span>
|
||||
</a>
|
||||
<!-- Active Tab -->
|
||||
<a class="flex items-center gap-md px-3 py-2 bg-primary text-on-primary font-body-bold rounded-lg cursor-pointer active:scale-95 shadow-sm" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">table_chart</span>
|
||||
<span class="">Mapping</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- CTA & Footer -->
|
||||
<div class="mt-auto flex flex-col gap-sm pt-md border-t border-line">
|
||||
<button class="w-full bg-surface-low border border-line text-primary font-body-bold text-body py-2 rounded-lg hover:bg-surface-high transition-colors shadow-sm flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">save</span>
|
||||
Save progress
|
||||
</button>
|
||||
<div class="flex flex-col gap-xs mt-2">
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">help</span>
|
||||
<span class="font-body text-body">Help center</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-3 py-2 text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">settings</span>
|
||||
<span class="font-body text-body">Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="pt-[calc(theme(spacing.header-height)+theme(spacing.lg))] md:pl-[calc(theme(spacing.sidebar-width)+theme(spacing.lg))] pr-lg pb-xl max-w-[1440px] mx-auto min-h-screen flex flex-col">
|
||||
<!-- Page Header -->
|
||||
<div class="flex justify-between items-end mb-lg">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 text-on-surface-variant mb-2">
|
||||
<span class="font-technical text-technical">Import</span>
|
||||
<span class="material-symbols-outlined text-[14px]">chevron_right</span>
|
||||
<span class="font-technical text-technical text-primary">Mapping</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<h1 class="font-display text-h1 text-on-surface">Map columns</h1>
|
||||
<span class="px-2 py-1 bg-surface-low text-on-surface-variant text-xs font-technical border border-line rounded">Sample data</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-md">
|
||||
<button class="px-4 py-2 border border-line bg-surface-container-lowest rounded-lg font-body-bold text-body text-on-surface hover:bg-surface-low transition-colors shadow-sm">
|
||||
Back
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-primary text-on-primary rounded-lg font-body-bold text-body hover:bg-primary-dark transition-colors shadow-sm flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">check_circle</span>
|
||||
Validate import
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- File Summary Card -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line p-lg mb-lg shadow-card flex items-center justify-between">
|
||||
<div class="flex items-center gap-md">
|
||||
<div class="w-12 h-12 bg-surface-low rounded-lg flex items-center justify-center border border-line text-primary">
|
||||
<span class="material-symbols-outlined text-[24px]">description</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-body-bold text-body text-on-surface">stonewater_planned_works_upload.xlsx</h3>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">1,248 rows found</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-6 items-center">
|
||||
<div class="text-right">
|
||||
<div class="font-technical text-overline text-on-surface-variant uppercase tracking-wider mb-1">Auto-matched</div>
|
||||
<div class="font-body-bold text-h3 text-primary tabular-nums">39</div>
|
||||
</div>
|
||||
<div class="w-px bg-line h-10"></div>
|
||||
<div class="text-right">
|
||||
<div class="font-technical text-overline text-error uppercase tracking-wider mb-1">Needs review</div>
|
||||
<div class="font-body-bold text-h3 text-error tabular-nums">2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mapping Tables Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-lg flex-1 animate-slide-in-right">
|
||||
<!-- Column Mapping Table -->
|
||||
<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 bg-surface-bright flex justify-between items-center">
|
||||
<h2 class="font-display text-subheading text-on-surface">Column mapping</h2>
|
||||
<span class="px-2 py-1 bg-surface-low rounded-full font-technical text-technical text-on-surface-variant">File → Ara</span>
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1 p-0">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="bg-surface-low sticky top-0 z-10">
|
||||
<tr>
|
||||
<th class="py-3 px-md font-technical text-overline text-on-surface-variant uppercase border-b border-line w-5/12">File column</th>
|
||||
<th class="py-3 px-md font-technical text-overline text-on-surface-variant uppercase border-b border-line w-2/12 text-center">Status</th>
|
||||
<th class="py-3 px-md font-technical text-overline text-on-surface-variant uppercase border-b border-line w-5/12">Ara field</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-body text-body divide-y divide-line">
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Asset Ref</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48 tabular-nums">e.g. 100245</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Asset reference</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Works Order Number</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48 tabular-nums">e.g. WO-23881</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Work order reference</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Address Line 1</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48 tabular-nums">e.g. 12 High St</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Address</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Postcode</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48 tabular-nums">e.g. SW1A 1AA</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Postcode</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Work Type</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48">e.g. Bathroom Programme</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Workstream</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Contractor Name</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48">e.g. Contractor A</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Contractor</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-error-soft/30 hover:bg-error-soft/50 transition-colors border-l-4 border-l-error">
|
||||
<td class="py-3 px-md pl-3">
|
||||
<div class="font-body-bold text-on-surface flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px] text-error">warning</span>
|
||||
Status
|
||||
</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48">e.g. Assigned</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-error">help</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<button class="w-full bg-surface-container-lowest border border-error text-error font-body-bold rounded py-1.5 px-2 text-body hover:bg-error-soft transition-colors flex justify-between items-center">
|
||||
Review mapping
|
||||
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Forecast Start</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48 tabular-nums">e.g. 2026-07-01</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Forecast start</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<div class="font-body-bold">Forecast End</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48 tabular-nums">e.g. 2026-07-15</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Forecast end</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-error-soft/30 hover:bg-error-soft/50 transition-colors border-l-4 border-l-error">
|
||||
<td class="py-3 px-md pl-3">
|
||||
<div class="font-body-bold text-on-surface flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px] text-error">warning</span>
|
||||
Priority
|
||||
</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant truncate w-48">e.g. Yes</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-error">help</span>
|
||||
</td>
|
||||
<td class="py-3 px-md">
|
||||
<button class="w-full bg-surface-container-lowest border border-error text-error font-body-bold rounded py-1.5 px-2 text-body hover:bg-error-soft transition-colors flex justify-between items-center">
|
||||
Review mapping
|
||||
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Workstream Value Mapping Table -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card flex flex-col overflow-hidden relative">
|
||||
<div class="p-md border-b border-line bg-surface-bright flex justify-between items-center">
|
||||
<div>
|
||||
<h2 class="font-display text-subheading text-on-surface">Workstream value mapping</h2>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-0.5">Mapping distinct values from the Work Type column</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1 p-0">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="bg-surface-low sticky top-0 z-10">
|
||||
<tr>
|
||||
<th class="py-3 px-md font-technical text-overline text-on-surface-variant uppercase border-b border-line w-5/12">File value</th>
|
||||
<th class="py-3 px-md font-technical text-overline text-on-surface-variant uppercase border-b border-line w-2/12 text-center">Status</th>
|
||||
<th class="py-3 px-md font-technical text-overline text-on-surface-variant uppercase border-b border-line w-5/12">Ara workstream</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-body text-body divide-y divide-line">
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Window Programme</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">240 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Windows</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Door Replacement</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">180 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Doors</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Roofing Works</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">72 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Roofs</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Cyclical Decorations</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">194 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Cyclical decorations</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Kitchen Programme</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">210 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Kitchens</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-error-soft/30 hover:bg-error-soft/50 transition-colors border-l-4 border-l-error">
|
||||
<td class="py-3 px-md pl-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2 py-1 bg-surface-container-highest text-on-surface rounded font-technical border border-line">Bathroom Programme</span>
|
||||
<span class="material-symbols-outlined text-[16px] text-error">warning</span>
|
||||
</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">195 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-error">help</span></td>
|
||||
<td class="py-3 px-md relative">
|
||||
<div class="w-full bg-surface-container-lowest border border-error text-error rounded py-1.5 px-2 text-body focus:outline-none focus:ring-1 focus:ring-error flex justify-between items-center cursor-pointer shadow-sm">
|
||||
<span class="">Select workstream...</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
</div>
|
||||
<div class="absolute top-[calc(100%-8px)] left-md right-md bg-surface-container-lowest border border-line rounded-lg shadow-card z-50 py-1 flex flex-col text-on-surface font-body text-body">
|
||||
<div class="px-3 py-2 hover:bg-surface-low cursor-pointer">Bathrooms</div>
|
||||
<div class="px-3 py-2 hover:bg-surface-low cursor-pointer">Kitchens</div>
|
||||
<div class="px-3 py-2 hover:bg-surface-low cursor-pointer">Windows</div>
|
||||
<div class="px-3 py-2 hover:bg-surface-low cursor-pointer">Doors</div>
|
||||
<div class="px-3 py-2 hover:bg-surface-low cursor-pointer">Roofing</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Asbestos Removal</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">44 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Asbestos</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="py-3 px-md">
|
||||
<span class="px-2 py-1 bg-surface-variant text-on-surface-variant rounded font-technical">Electrical Heating Works</span>
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-1 tabular-nums">96 rows</div>
|
||||
</td>
|
||||
<td class="py-3 px-md text-center"><span class="material-symbols-outlined text-[20px] text-primary icon-fill-1">check_circle</span></td>
|
||||
<td class="py-3 px-md">
|
||||
<select class="w-full bg-surface-low border border-line rounded py-1.5 px-2 text-body focus:outline-none focus:border-primary appearance-none cursor-pointer">
|
||||
<option selected="">Electrical heating</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,311 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,323 @@
|
|||
<!DOCTYPE html><html class="h-full bg-canvas" lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>Review Import Summary (Import Flow)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — Review Import Summary (Import Flow)
|
||||
Journey 1 — Admin import · screen 11 of 12
|
||||
Stitch project 8537473387290162501 · screen 49991ef0e2264ed5b4dfffc12e5aa9da
|
||||
Original HTML <title>: Review Import Summary - 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"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.shadow-card {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-full text-on-surface antialiased bg-canvas flex flex-col">
|
||||
<!-- TopNav - Immutable Content & Mandated Styling -->
|
||||
<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">
|
||||
<div class="font-display text-h3 font-extrabold text-primary">Ara Projects</div>
|
||||
<nav class="hidden md:flex gap-md h-full items-center ml-xl">
|
||||
<a class="h-full flex items-center px-sm text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">
|
||||
<span class="font-body text-body">Dashboard</span>
|
||||
</a>
|
||||
<a class="h-full flex items-center px-sm text-primary border-b-2 border-primary pb-1 cursor-pointer active:opacity-80" href="#">
|
||||
<span class="font-body text-body">Projects</span>
|
||||
</a>
|
||||
<a class="h-full flex items-center px-sm text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">
|
||||
<span class="font-body text-body">Maintenance</span>
|
||||
</a>
|
||||
<a class="h-full flex items-center px-sm text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">
|
||||
<span class="font-body text-body">Schedule</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-md">
|
||||
<button class="p-2 rounded-full hover:bg-surface-high transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-[20px]">help</span>
|
||||
</button>
|
||||
<button class="p-2 rounded-full hover:bg-surface-high transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-[20px]">notifications</span>
|
||||
</button>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-high border border-line overflow-hidden flex items-center justify-center">
|
||||
<img alt="User account menu" class="object-cover w-full h-full" data-alt="A professional headshot of an industrial project manager, wearing a hardhat and safety vest, neutral background, sharp focus, well-lit, conveying competence and stability." src="../assets/img/img12.png">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex flex-1 pt-[64px]">
|
||||
<!-- SideNavBar - Immutable Content & Mandated Styling -->
|
||||
<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 hidden md:flex overflow-y-auto">
|
||||
<div class="mb-lg px-sm">
|
||||
<div class="flex items-center gap-sm mb-xs">
|
||||
<div class="w-8 h-8 rounded bg-primary-container text-on-primary flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[20px]">architecture</span>
|
||||
</div>
|
||||
<span class="font-display text-subheading text-primary">Project Setup</span>
|
||||
</div>
|
||||
<div class="font-technical text-technical text-on-surface-variant pl-10">Configuration Wizard</div>
|
||||
</div>
|
||||
<nav class="flex flex-col gap-xs flex-1">
|
||||
<a class="flex items-center gap-md px-sm py-2 rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">layers</span>
|
||||
<span class="font-body text-body">Workstream</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-sm py-2 rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">account_tree</span>
|
||||
<span class="font-body text-body">Stages</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-sm py-2 rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">fact_check</span>
|
||||
<span class="font-body text-body">Checklist</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-sm py-2 rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">admin_panel_settings</span>
|
||||
<span class="font-body text-body">Permissions</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-sm py-2 rounded-lg bg-primary text-on-primary font-body-bold cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">upload_file</span>
|
||||
<span class="font-body text-body">Import</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-sm py-2 rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">table_chart</span>
|
||||
<span class="font-body text-body">Mapping</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-md border-t border-line/50">
|
||||
<button class="w-full py-2 mb-md rounded-lg border border-primary text-primary font-body-bold hover:bg-surface-high transition-colors">Save Progress</button>
|
||||
<div class="flex flex-col gap-xs">
|
||||
<a class="flex items-center gap-md px-sm py-2 rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">help</span>
|
||||
<span class="font-body text-body">Help Center</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-md px-sm py-2 rounded-lg text-on-surface-variant hover:bg-surface-high transition-all cursor-pointer" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">settings</span>
|
||||
<span class="font-body text-body">Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 md:ml-sidebar-width p-lg md:p-xl max-w-max-width mx-auto w-full flex flex-col gap-lg animate-slide-in">
|
||||
<div class="flex flex-col gap-sm md:flex-row md:items-end md:justify-between mb-sm">
|
||||
<div>
|
||||
<h1 class="font-h1 text-h1 text-primary mb-xs">Review import summary</h1><span class="inline-flex items-center px-2 py-1 rounded bg-accent-soft text-primary font-technical text-technical ml-sm">Sample data</span>
|
||||
<p class="font-body text-body text-on-surface-variant">Review the categorized changes before committing to the project database.</p><div class="flex items-center gap-xs mt-sm text-primary font-body-bold text-sm"><span class="material-symbols-outlined text-[18px]">description</span>stonewater_planned_works_upload.xlsx</div>
|
||||
</div>
|
||||
<div class="flex gap-sm">
|
||||
<button class="px-md py-2 rounded-lg border border-line bg-surface font-body-bold text-on-surface hover:bg-surface-low transition-colors">Back</button>
|
||||
<button class="px-md py-2 rounded-lg border border-line bg-surface font-body-bold text-on-surface hover:bg-surface-low transition-colors text-error">Cancel</button>
|
||||
<button class="px-md py-2 rounded-lg bg-primary text-on-primary font-body-bold hover:bg-primary-dark transition-colors flex items-center gap-sm">
|
||||
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
Confirm import
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 xl:grid-cols-12 gap-lg">
|
||||
<!-- Data Breakdown Grid -->
|
||||
<div class="xl:col-span-8 flex flex-col gap-md">
|
||||
<!-- High Priority Card -->
|
||||
<div class="bg-surface rounded-lg p-md md:p-lg border border-line shadow-card flex flex-col md:flex-row gap-lg justify-between items-start">
|
||||
<div class="flex gap-md">
|
||||
<div class="w-12 h-12 rounded-full bg-accent-soft flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-[24px] text-tertiary-container">add_task</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-h3 text-h3 text-on-surface mb-xs">New Work Orders</h3>
|
||||
<p class="font-body text-body text-on-surface-variant mb-md">1,087 new records identified for insertion into active staging.</p>
|
||||
<div class="flex gap-sm">
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full bg-surface-low font-technical text-technical text-ink-muted">12 Critical</span>
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full bg-surface-low font-technical text-technical text-ink-muted">89 Standard</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="px-4 py-2 rounded border border-line text-primary font-body-bold hover:bg-surface-low transition-colors whitespace-nowrap">Review List</button>
|
||||
</div>
|
||||
<!-- Updates Card -->
|
||||
<div class="bg-surface rounded-lg p-md md:p-lg border border-line shadow-card flex flex-col md:flex-row gap-lg justify-between items-start">
|
||||
<div class="flex gap-md">
|
||||
<div class="w-12 h-12 rounded-full bg-tan-soft flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-[24px] text-secondary">update</span>
|
||||
</div>
|
||||
<div><h3 class="font-h3 text-h3 text-on-surface mb-xs">Proposed Updates</h3><p class="font-body text-body text-on-surface-variant mb-md">118 existing records will be modified based on matching IDs.</p><div class="flex flex-wrap gap-sm"><span class="inline-flex items-center px-2 py-1 rounded-full bg-surface-low font-technical text-technical text-ink-muted">Forecast cost (42)</span><span class="inline-flex items-center px-2 py-1 rounded-full bg-surface-low font-technical text-technical text-ink-muted">Forecast dates (51)</span><span class="inline-flex items-center px-2 py-1 rounded-full bg-surface-low font-technical text-technical text-ink-muted">Contractor (25)</span></div></div>
|
||||
</div>
|
||||
<button class="px-4 py-2 rounded border border-line text-primary font-body-bold hover:bg-surface-low transition-colors whitespace-nowrap">Review Diffs</button>
|
||||
</div>
|
||||
<!-- Grid Layout for smaller metric cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-md"><div class="bg-surface rounded-lg p-md border border-line shadow-card flex flex-col justify-between h-full"><div class="flex justify-between items-start mb-lg"><div class="w-10 h-10 rounded-full bg-tan-soft flex items-center justify-center"><span class="material-symbols-outlined text-[20px] text-secondary">priority_high</span></div><span class="font-display text-h2 text-on-surface">12</span></div><div><h4 class="font-body-bold text-body-bold text-on-surface mb-xs">Priority changes</h4><p class="font-technical text-technical text-on-surface-variant mb-md">Existing work orders with updated urgency levels.</p><button class="text-primary font-body-bold hover:underline flex items-center gap-xs text-sm">Review Changes <span class="material-symbols-outlined text-[16px]">arrow_forward</span></button></div></div>
|
||||
<!-- Omissions -->
|
||||
<div class="bg-surface rounded-lg p-md border border-line shadow-card flex flex-col justify-between h-full"><div class="flex justify-between items-start mb-lg"><div class="w-10 h-10 rounded-full bg-error-soft flex items-center justify-center"><span class="material-symbols-outlined text-[20px] text-error">warning</span></div><span class="font-display text-h2 text-error">26</span></div><div><h4 class="font-body-bold text-body-bold text-on-surface mb-xs">Omissions and deleted orders</h4><p class="font-technical text-technical text-on-surface-variant mb-md">Rows ignored due to invalid formatting or missing required fields.</p><button class="text-primary font-body-bold hover:underline flex items-center gap-xs text-sm">View Details <span class="material-symbols-outlined text-[16px]">arrow_forward</span></button></div></div>
|
||||
<!-- Contractors -->
|
||||
<div class="bg-surface rounded-lg p-md border border-line shadow-card flex flex-col justify-between h-full">
|
||||
<div class="flex justify-between items-start mb-lg">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-high flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[20px] text-on-surface">engineering</span>
|
||||
</div>
|
||||
<span class="font-display text-h2 text-on-surface">2</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-body-bold text-body-bold text-on-surface mb-xs">New Contractors</h4>
|
||||
<p class="font-technical text-technical text-on-surface-variant mb-md">Entities not previously registered in the master directory.</p>
|
||||
<button class="text-primary font-body-bold hover:underline flex items-center gap-xs text-sm">
|
||||
Map Entities <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contextual Sidebar -->
|
||||
<div class="xl:col-span-4 flex flex-col gap-md">
|
||||
<div class="bg-surface-low rounded-lg p-md border border-line h-full"><div class="mb-md pb-md border-b border-line"><h3 class="font-body-bold text-body-bold text-on-surface mb-sm">Import Summary</h3><div class="flex flex-col gap-xs"><div class="flex justify-between text-technical"><span class="text-on-surface-variant">Rows to import</span><span class="font-body-bold text-on-surface">1,231</span></div><div class="flex justify-between text-technical"><span class="text-on-surface-variant">Rows blocked</span><span class="font-body-bold text-error">17</span></div><div class="flex justify-between text-technical"><span class="text-on-surface-variant">Review issues carried</span><span class="font-body-bold text-secondary">10</span></div></div></div>
|
||||
<div class="flex items-center gap-sm mb-md pb-md border-b border-line">
|
||||
<span class="material-symbols-outlined text-primary">info</span>
|
||||
<h3 class="font-body-bold text-body-bold text-on-surface">Post-Import Effects</h3>
|
||||
</div>
|
||||
<ul class="flex flex-col gap-md">
|
||||
<li class="flex gap-sm">
|
||||
<span class="material-symbols-outlined text-[20px] text-on-surface-variant mt-0.5">timeline</span>
|
||||
<div>
|
||||
<h4 class="font-body-bold text-body text-on-surface">Timeline Recalculation</h4>
|
||||
<p class="font-technical text-technical text-on-surface-variant">Adding new critical path items will automatically shift downstream dependencies.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex gap-sm">
|
||||
<span class="material-symbols-outlined text-[20px] text-on-surface-variant mt-0.5">notifications_active</span>
|
||||
<div>
|
||||
<h4 class="font-body-bold text-body text-on-surface">Notifications Dispatched</h4>
|
||||
<p class="font-technical text-technical text-on-surface-variant">Assigned contractors will receive automated alerts for new and updated work orders.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex gap-sm">
|
||||
<span class="material-symbols-outlined text-[20px] text-on-surface-variant mt-0.5">database</span>
|
||||
<div>
|
||||
<h4 class="font-body-bold text-body text-on-surface">Audit Logging</h4>
|
||||
<p class="font-technical text-technical text-on-surface-variant">All modifications are stamped with your user ID and timestamped for compliance.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,448 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,400 @@
|
|||
<!DOCTYPE html><html class="light" lang="en" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>1. Property View (Start)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — 1. Property View (Start)
|
||||
Journey 2 — Contractor · screen 1 of 9
|
||||
Stitch project 8537473387290162501 · screen 67ecb97c91084727a093082b2e181d2e
|
||||
Original HTML <title>: Ara Projects - Work Order Detail
|
||||
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-primary": "#ffffff",
|
||||
"error-soft": "#fdecea",
|
||||
"surface-container-highest": "#d8e3f8",
|
||||
"tertiary-fixed-dim": "#9acbff",
|
||||
"secondary-fixed-dim": "#e7c08b",
|
||||
"outline": "#767682",
|
||||
"canvas": "#eef4fc",
|
||||
"on-tertiary-fixed-variant": "#004a79",
|
||||
"on-tertiary-container": "#50aaf9",
|
||||
"on-background": "#111c2b",
|
||||
"on-secondary-fixed-variant": "#5d4218",
|
||||
"surface-container-low": "#eff4ff",
|
||||
"tertiary": "#002743",
|
||||
"accent-soft": "#e4f1fc",
|
||||
"on-primary-fixed-variant": "#364087",
|
||||
"secondary-container": "#ffd6a0",
|
||||
"primary-dark": "#222a63",
|
||||
"on-surface-variant": "#454650",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-container": "#795c2f",
|
||||
"primary-fixed-dim": "#bcc2ff",
|
||||
"secondary-fixed": "#ffddb2",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-fixed": "#d0e4ff",
|
||||
"tertiary-container": "#003d66",
|
||||
"inverse-on-surface": "#ebf1ff",
|
||||
"primary": "#111c64",
|
||||
"on-tertiary-fixed": "#001d34",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-primary": "#bcc2ff",
|
||||
"on-secondary-fixed": "#291800",
|
||||
"line": "#d2ddec",
|
||||
"on-primary-fixed": "#04105a",
|
||||
"surface-dim": "#cfdbef",
|
||||
"on-surface": "#111c2b",
|
||||
"primary-fixed": "#dfe0ff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#dee9fe",
|
||||
"surface-bright": "#f8f9ff",
|
||||
"surface-low": "#e3edf9",
|
||||
"surface": "#f8f9ff",
|
||||
"on-tan": "#3d2f16",
|
||||
"ink": "#111111",
|
||||
"inverse-surface": "#263141",
|
||||
"background": "#f8f9ff",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#2a347a",
|
||||
"surface-high": "#d9e5f4",
|
||||
"secondary": "#77592d",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-tint": "#4f58a0",
|
||||
"tan-soft": "#f4ebdc",
|
||||
"on-primary-container": "#96a0ed",
|
||||
"surface-container": "#e6eeff",
|
||||
"error": "#b3261e",
|
||||
"surface-variant": "#d8e3f8",
|
||||
"outline-variant": "#c6c5d2"
|
||||
},
|
||||
borderRadius: {
|
||||
DEFAULT: "0.25rem",
|
||||
lg: "0.5rem",
|
||||
xl: "0.75rem",
|
||||
full: "9999px"
|
||||
},
|
||||
spacing: {
|
||||
md: "16px",
|
||||
xs: "4px",
|
||||
lg: "24px",
|
||||
"sidebar-width": "256px",
|
||||
"header-height": "64px",
|
||||
xl: "40px",
|
||||
sm: "8px",
|
||||
"max-width": "1440px"
|
||||
},
|
||||
fontFamily: {
|
||||
display: ["Montserrat"],
|
||||
h1: ["Montserrat"],
|
||||
"body-bold": ["Montserrat"],
|
||||
h3: ["Montserrat"],
|
||||
body: ["Montserrat"],
|
||||
h2: ["Montserrat"],
|
||||
subheading: ["Montserrat"],
|
||||
overline: ["Questrial"],
|
||||
technical: ["Questrial"],
|
||||
"display-mobile": ["Montserrat"]
|
||||
},
|
||||
fontSize: {
|
||||
display: ["36px", { lineHeight: "1.1", fontWeight: "800" }],
|
||||
h1: ["30px", { lineHeight: "1.2", fontWeight: "800" }],
|
||||
"body-bold": ["14px", { lineHeight: "1.25", fontWeight: "600" }],
|
||||
h3: ["20px", { lineHeight: "1.4", fontWeight: "700" }],
|
||||
body: ["14px", { lineHeight: "1.25", fontWeight: "500" }],
|
||||
h2: ["24px", { lineHeight: "1.2", fontWeight: "800" }],
|
||||
subheading: ["18px", { lineHeight: "1.4", fontWeight: "700" }],
|
||||
overline: ["11px", { lineHeight: "1.2", letterSpacing: "0.05em", fontWeight: "700" }],
|
||||
technical: ["12px", { lineHeight: "1.4", fontWeight: "400" }],
|
||||
"display-mobile": ["32px", { lineHeight: "1.1", fontWeight: "800" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
||||
}
|
||||
.material-symbols-outlined.filled {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-canvas text-on-surface font-body antialiased min-h-screen flex" data-mode="connect">
|
||||
<!-- SideNavBar -->
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 flex flex-col min-h-screen">
|
||||
<!-- TopAppBar Context -->
|
||||
<header class="bg-surface-container-lowest h-header-height w-full sticky top-0 z-30 shadow-sm flex justify-between items-center px-lg border-b border-line"><div class="flex items-center gap-lg"><div class="flex items-center gap-sm mr-lg"><div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-on-primary font-h3 text-[14px]">S</div><span class="font-h3 text-h3 text-primary">Stonewater</span></div><nav class="flex items-center gap-md"><a href="#" class="font-body text-body text-on-surface-variant hover:text-primary">Dashboard</a><a href="#" class="font-body-bold text-body text-primary border-b-2 border-primary py-2">Work orders</a><a href="#" class="font-body text-body text-on-surface-variant hover:text-primary">Documents</a></nav></div><div class="flex items-center gap-md"><span class="px-3 py-1 rounded-full bg-tan-soft text-on-tan font-overline text-overline uppercase tracking-wider">Contractor A</span><div class="w-8 h-8 rounded-full bg-surface-high flex items-center justify-center cursor-pointer"><span class="material-symbols-outlined" data-icon="person">person</span></div></div></header>
|
||||
<!-- Canvas Content -->
|
||||
<div class="p-lg max-w-max-width mx-auto w-full flex flex-col gap-lg flex-1">
|
||||
<!-- Hero / Header Card -->
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-card border border-line p-lg flex flex-col md:flex-row justify-between items-start md:items-end gap-md">
|
||||
<div>
|
||||
<div class="flex items-center gap-sm mb-xs">
|
||||
<span class="font-overline text-overline text-on-surface-variant uppercase tracking-wider">Work Order</span>
|
||||
<h1 class="font-h1 text-h1 text-on-surface">WO-23881 (Windows)</h1>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-x-lg gap-y-sm mt-sm">
|
||||
<div class="flex items-center gap-xs text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="location_on">location_on</span>
|
||||
<span class="font-body text-body">12 High St</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-xs text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="qr_code_2">qr_code_2</span>
|
||||
<span class="font-technical text-technical">Asset: 100245</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-xs text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="category">category</span>
|
||||
<span class="font-body text-body">Windows</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right"><div class="inline-flex items-center gap-sm px-4 py-2 bg-secondary-container text-on-secondary-container rounded-full font-body-bold text-body-bold mb-sm"><span class="material-symbols-outlined text-[20px]" data-icon="assignment_ind">assignment_ind</span>Assigned</div>
|
||||
|
||||
<div class="font-technical text-technical text-on-surface-variant mt-xs">Forecast end: 12 Jul<br><span class="text-outline-variant">Forecast dates are set by Stonewater</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stage Ladder -->
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-card border border-line p-lg w-full overflow-x-auto">
|
||||
<h3 class="font-subheading text-subheading text-on-surface mb-lg">Order Progress</h3>
|
||||
<div class="flex items-center min-w-max pb-sm justify-between"><!-- Stage 1: Ordered (Completed) -->
|
||||
<div class="flex-1 flex flex-col items-center relative">
|
||||
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center z-10 text-on-primary">
|
||||
<span class="material-symbols-outlined filled text-[16px]">check</span>
|
||||
</div>
|
||||
<span class="font-body-bold text-body mt-sm text-primary">Ordered</span>
|
||||
<!-- Line to next -->
|
||||
<div class="absolute top-4 left-1/2 w-full h-1 bg-primary -z-0"></div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 2: In progress (Active) -->
|
||||
<div class="flex-1 flex flex-col items-center relative">
|
||||
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center z-10 text-on-primary">
|
||||
<span class="material-symbols-outlined text-[16px]">construction</span>
|
||||
</div>
|
||||
<span class="font-body-bold text-body mt-sm text-primary">In progress</span>
|
||||
<!-- Line from prev -->
|
||||
<div class="absolute top-4 right-1/2 w-full h-1 bg-primary -z-0"></div>
|
||||
<!-- Line to next -->
|
||||
<div class="absolute top-4 left-1/2 w-full h-1 bg-surface-high -z-0"></div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 3: Completed (Pending) -->
|
||||
<div class="flex-1 flex flex-col items-center relative">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-high flex items-center justify-center z-10 text-outline">
|
||||
<span class="material-symbols-outlined text-[16px]">task_alt</span>
|
||||
</div>
|
||||
<span class="font-body text-body mt-sm text-outline">Completed</span>
|
||||
<!-- Line from prev -->
|
||||
<div class="absolute top-4 right-1/2 w-full h-1 bg-surface-high -z-0"></div>
|
||||
<!-- Line to next -->
|
||||
<div class="absolute top-4 left-1/2 w-full h-1 bg-surface-high -z-0"></div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 4: Charged (Pending) -->
|
||||
<div class="flex-1 flex flex-col items-center relative">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-high flex items-center justify-center z-10 text-outline">
|
||||
<span class="material-symbols-outlined text-[16px]">payments</span>
|
||||
</div>
|
||||
<span class="font-body text-body mt-sm text-outline">Charged</span>
|
||||
<!-- Line from prev -->
|
||||
<div class="absolute top-4 right-1/2 w-full h-1 bg-surface-high -z-0"></div>
|
||||
<!-- Line to next -->
|
||||
<div class="absolute top-4 left-1/2 w-full h-1 bg-surface-high -z-0"></div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 5: Closed (Pending) -->
|
||||
<div class="flex-1 flex flex-col items-center relative">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-high flex items-center justify-center z-10 text-outline">
|
||||
<span class="material-symbols-outlined text-[16px]">inventory_2</span>
|
||||
</div>
|
||||
<span class="font-body text-body mt-sm text-outline">Closed</span>
|
||||
<!-- Line from prev -->
|
||||
<div class="absolute top-4 right-1/2 w-full h-1 bg-surface-high -z-0"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
<!-- Main Content Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-lg">
|
||||
<!-- Left Column: Actions & Docs -->
|
||||
<div class="lg:col-span-2 flex flex-col gap-lg">
|
||||
<!-- Booking Panel -->
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-card border border-line overflow-hidden">
|
||||
<div class="p-lg border-b border-line bg-surface-bright flex justify-between items-center">
|
||||
<h3 class="font-subheading text-subheading text-on-surface flex items-center gap-sm">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="event">event</span>
|
||||
Booking
|
||||
</h3>
|
||||
<span class="font-overline text-overline px-3 py-1 bg-surface-high rounded-full text-on-surface-variant">Not yet booked</span>
|
||||
</div>
|
||||
<div class="p-lg flex flex-col md:flex-row gap-md items-end">
|
||||
<div class="w-full md:w-1/2 flex flex-col gap-sm">
|
||||
<label class="font-body-bold text-body text-on-surface">Proposed Date</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-low border border-line rounded-lg px-4 py-3 font-body text-on-surface focus:border-accent-soft focus:ring-1 focus:ring-accent-soft transition-colors" type="date">
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full md:w-auto bg-primary text-on-primary font-body-bold text-body-bold px-lg py-3 rounded-lg hover:bg-primary-dark transition-colors shadow-sm active:scale-95 flex items-center justify-center gap-sm">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="event_available">event_available</span>
|
||||
Book appointment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Evidence Panel -->
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-card border border-line overflow-hidden">
|
||||
<div class="p-lg border-b border-line bg-surface-bright flex justify-between items-center">
|
||||
<h3 class="font-subheading text-subheading text-on-surface flex items-center gap-sm">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="folder_special">folder_special</span>
|
||||
Required Evidence
|
||||
</h3>
|
||||
<div class="flex items-center gap-xs">
|
||||
<span class="font-body-bold text-primary">2</span>
|
||||
<span class="font-body text-on-surface-variant">of 4 uploaded</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-0">
|
||||
<!-- Uploaded Doc 1 -->
|
||||
<div class="flex items-center justify-between p-md border-b border-line bg-surface-container-lowest hover:bg-surface-low/60 transition-colors">
|
||||
<div class="flex items-center gap-md">
|
||||
<div class="w-10 h-10 rounded bg-accent-soft flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-body-bold text-body text-on-surface">Window certificate</h4>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-xs">Uploaded 04 Jul</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined filled text-primary" data-icon="check_circle">check_circle</span>
|
||||
</div>
|
||||
<!-- Uploaded Doc 2 -->
|
||||
<div class="flex items-center justify-between p-md border-b border-line bg-surface-container-lowest hover:bg-surface-low/60 transition-colors">
|
||||
<div class="flex items-center gap-md">
|
||||
<div class="w-10 h-10 rounded bg-accent-soft flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="verified">verified</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-body-bold text-body text-on-surface">Guarantee</h4>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-xs">Uploaded 06 Jul</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined filled text-primary" data-icon="check_circle">check_circle</span>
|
||||
</div>
|
||||
<!-- Missing Doc 1 -->
|
||||
<div class="flex items-center justify-between p-md border-b border-line bg-surface-bright border-dashed">
|
||||
<div class="flex items-center gap-md opacity-60">
|
||||
<div class="w-10 h-10 rounded bg-surface-high flex items-center justify-center text-outline">
|
||||
<span class="material-symbols-outlined" data-icon="upload_file">upload_file</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-body text-body text-on-surface">Building control evidence</h4>
|
||||
<p class="font-technical text-technical text-outline mt-xs">Required before completion</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-primary font-body-bold text-body hover:underline flex items-center gap-xs">
|
||||
Upload <span class="material-symbols-outlined text-[16px]" data-icon="add">add</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Missing Doc 2 -->
|
||||
<div class="flex items-center justify-between p-md bg-surface-bright border-dashed">
|
||||
<div class="flex items-center gap-md opacity-60">
|
||||
<div class="w-10 h-10 rounded bg-surface-high flex items-center justify-center text-outline">
|
||||
<span class="material-symbols-outlined" data-icon="upload_file">upload_file</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-body text-body text-on-surface">Handover pack</h4>
|
||||
<p class="font-technical text-technical text-outline mt-xs">Required before completion</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-primary font-body-bold text-body hover:underline flex items-center gap-xs">
|
||||
Upload <span class="material-symbols-outlined text-[16px]" data-icon="add">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Sidebar Panels -->
|
||||
<div class="flex flex-col gap-lg">
|
||||
<!-- Completion Panel -->
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-card border border-line p-lg flex flex-col items-center text-center">
|
||||
<div class="w-16 h-16 rounded-full bg-surface-high flex items-center justify-center mb-md text-outline">
|
||||
<span class="material-symbols-outlined text-[32px]" data-icon="task">task</span>
|
||||
</div>
|
||||
<h3 class="font-h3 text-h3 text-on-surface mb-sm">Complete this order</h3>
|
||||
<p class="font-body text-body text-on-surface-variant mb-lg">
|
||||
2 of 4 required documents uploaded
|
||||
</p>
|
||||
<div class="w-full bg-surface-container-high rounded-full h-2 mb-lg overflow-hidden">
|
||||
<div class="bg-primary h-2 rounded-full" style="width: 50%"></div>
|
||||
</div>
|
||||
<button class="w-full bg-surface-high text-outline font-body-bold text-body-bold px-lg py-3 rounded-lg cursor-not-allowed flex items-center justify-center gap-sm" disabled="">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="block">block</span>
|
||||
Mark completed
|
||||
</button>
|
||||
<p class="font-technical text-technical text-outline mt-sm">Upload all evidence to unlock</p>
|
||||
</div>
|
||||
<!-- Activity Log -->
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-card border border-line overflow-hidden flex-1">
|
||||
<div class="p-lg border-b border-line bg-surface-bright">
|
||||
<h3 class="font-subheading text-subheading text-on-surface flex items-center gap-sm">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="history">history</span>
|
||||
Activity Log
|
||||
</h3>
|
||||
</div>
|
||||
<div class="p-lg relative">
|
||||
<!-- Vertical timeline line -->
|
||||
<div class="absolute left-[35px] top-lg bottom-lg w-px bg-line"></div>
|
||||
<div class="flex flex-col gap-lg">
|
||||
<!-- Log Item 1 -->
|
||||
<div class="flex gap-md relative z-10">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-lowest border-2 border-primary flex items-center justify-center shrink-0">
|
||||
<div class="w-3 h-3 rounded-full bg-primary"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body-bold text-body text-on-surface">Guarantee uploaded</p>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-xs">06 Jul - System</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Log Item 2 -->
|
||||
<div class="flex gap-md relative z-10">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-lowest border-2 border-line flex items-center justify-center shrink-0">
|
||||
<div class="w-2 h-2 rounded-full bg-outline-variant"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body text-body text-on-surface">Window certificate uploaded</p>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-xs">04 Jul - Contractor A</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Log Item 3 -->
|
||||
<div class="flex gap-md relative z-10">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-lowest border-2 border-line flex items-center justify-center shrink-0">
|
||||
<div class="w-2 h-2 rounded-full bg-outline-variant"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body text-body text-on-surface">Order Assigned</p>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-xs">02 Jul - Stonewater</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="p-lg border-t border-line flex justify-center"><span class="px-3 py-1 rounded-full bg-accent-soft text-on-surface-variant font-overline text-overline uppercase tracking-wider">Sample data</span></footer></main>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,354 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>2. Book Appointment (Refined)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — 2. Book Appointment (Refined)
|
||||
Journey 2 — Contractor · screen 2 of 9
|
||||
Stitch project 8537473387290162501 · screen 453af7c4b60548c2af2e2871dc76b2fb
|
||||
Original HTML <title>: Book Appointment - 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-primary": "#ffffff",
|
||||
"error-soft": "#fdecea",
|
||||
"surface-container-highest": "#d8e3f8",
|
||||
"tertiary-fixed-dim": "#9acbff",
|
||||
"secondary-fixed-dim": "#e7c08b",
|
||||
"outline": "#767682",
|
||||
"canvas": "#eef4fc",
|
||||
"on-tertiary-fixed-variant": "#004a79",
|
||||
"on-tertiary-container": "#50aaf9",
|
||||
"on-background": "#111c2b",
|
||||
"on-secondary-fixed-variant": "#5d4218",
|
||||
"surface-container-low": "#eff4ff",
|
||||
"tertiary": "#002743",
|
||||
"accent-soft": "#e4f1fc",
|
||||
"on-primary-fixed-variant": "#364087",
|
||||
"secondary-container": "#ffd6a0",
|
||||
"primary-dark": "#222a63",
|
||||
"on-surface-variant": "#454650",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-container": "#795c2f",
|
||||
"primary-fixed-dim": "#bcc2ff",
|
||||
"secondary-fixed": "#ffddb2",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-fixed": "#d0e4ff",
|
||||
"tertiary-container": "#003d66",
|
||||
"inverse-on-surface": "#ebf1ff",
|
||||
"primary": "#111c64",
|
||||
"on-tertiary-fixed": "#001d34",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-primary": "#bcc2ff",
|
||||
"on-secondary-fixed": "#291800",
|
||||
"line": "#d2ddec",
|
||||
"on-primary-fixed": "#04105a",
|
||||
"surface-dim": "#cfdbef",
|
||||
"on-surface": "#111c2b",
|
||||
"primary-fixed": "#dfe0ff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#dee9fe",
|
||||
"surface-bright": "#f8f9ff",
|
||||
"surface-low": "#e3edf9",
|
||||
"surface": "#f8f9ff",
|
||||
"on-tan": "#3d2f16",
|
||||
"ink": "#111111",
|
||||
"inverse-surface": "#263141",
|
||||
"background": "#f8f9ff",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#2a347a",
|
||||
"surface-high": "#d9e5f4",
|
||||
"secondary": "#77592d",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-tint": "#4f58a0",
|
||||
"tan-soft": "#f4ebdc",
|
||||
"on-primary-container": "#96a0ed",
|
||||
"surface-container": "#e6eeff",
|
||||
"error": "#b3261e",
|
||||
"surface-variant": "#d8e3f8",
|
||||
"outline-variant": "#c6c5d2"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"md": "16px",
|
||||
"xs": "4px",
|
||||
"lg": "24px",
|
||||
"sidebar-width": "256px",
|
||||
"header-height": "64px",
|
||||
"xl": "40px",
|
||||
"sm": "8px",
|
||||
"max-width": "1440px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display": [
|
||||
"Montserrat"
|
||||
],
|
||||
"h1": [
|
||||
"Montserrat"
|
||||
],
|
||||
"body-bold": [
|
||||
"Montserrat"
|
||||
],
|
||||
"h3": [
|
||||
"Montserrat"
|
||||
],
|
||||
"body": [
|
||||
"Montserrat"
|
||||
],
|
||||
"h2": [
|
||||
"Montserrat"
|
||||
],
|
||||
"subheading": [
|
||||
"Montserrat"
|
||||
],
|
||||
"overline": [
|
||||
"Questrial"
|
||||
],
|
||||
"technical": [
|
||||
"Questrial"
|
||||
],
|
||||
"display-mobile": [
|
||||
"Montserrat"
|
||||
]
|
||||
},
|
||||
"fontSize": {
|
||||
"display": [
|
||||
"36px",
|
||||
{
|
||||
"lineHeight": "1.1",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"h1": [
|
||||
"30px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"body-bold": [
|
||||
"14px",
|
||||
{
|
||||
"lineHeight": "1.25",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
],
|
||||
"h3": [
|
||||
"20px",
|
||||
{
|
||||
"lineHeight": "1.4",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"body": [
|
||||
"14px",
|
||||
{
|
||||
"lineHeight": "1.25",
|
||||
"fontWeight": "500"
|
||||
}
|
||||
],
|
||||
"h2": [
|
||||
"24px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"subheading": [
|
||||
"18px",
|
||||
{
|
||||
"lineHeight": "1.4",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"overline": [
|
||||
"11px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"letterSpacing": "0.05em",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"technical": [
|
||||
"12px",
|
||||
{
|
||||
"lineHeight": "1.4",
|
||||
"fontWeight": "400"
|
||||
}
|
||||
],
|
||||
"display-mobile": [
|
||||
"32px",
|
||||
{
|
||||
"lineHeight": "1.1",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-canvas text-on-surface font-body antialiased selection:bg-primary-fixed-dim selection:text-on-primary-fixed flex h-screen overflow-hidden">
|
||||
<!-- TopNavBar (Mobile Only) -->
|
||||
<header class="md:hidden bg-surface-container-lowest h-header-height w-full sticky top-0 z-50 border-b border-line shadow-card flex justify-between items-center px-lg">
|
||||
<div class="flex items-center gap-sm">
|
||||
<span class="font-h2 text-h2 text-primary">Ara Projects</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-md">
|
||||
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer active:opacity-80">search</span>
|
||||
<img alt="User profile" class="w-8 h-8 rounded-full object-cover shadow-sm" data-alt="A small circular avatar placeholder showing a generic silhouette for a user profile in a corporate application context. Bright lighting, professional tone." src="../assets/img/img2.png">
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar (Desktop Only) -->
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 h-screen overflow-y-auto relative bg-canvas">
|
||||
<!-- Top App Bar (Desktop specific content area header) -->
|
||||
<div class="hidden md:flex sticky top-0 z-30 h-header-height bg-surface-container-lowest border-b border-line items-center px-xl justify-between"><div class="flex items-center gap-lg"><div class="flex items-center gap-sm"><div class="w-8 h-8 rounded bg-primary flex items-center justify-center text-on-primary font-bold">D</div><span class="font-h3 text-primary">Domna</span></div><div class="h-6 w-[1px] bg-line"></div><span class="text-on-surface-variant font-body">Stonewater Planned Works 2026</span><span class="bg-tan-soft text-on-tan px-2 py-0.5 rounded text-xs font-body-bold">Contractor A</span></div><div class="flex items-center gap-lg font-body"><a class="text-primary font-body-bold" href="#">Dashboard</a><a class="text-on-surface-variant hover:text-primary" href="#">Work orders</a><a class="text-on-surface-variant hover:text-primary" href="#">Documents</a></div></div>
|
||||
<!-- Canvas Container -->
|
||||
<div class="max-w-max-width mx-auto p-lg md:p-xl flex flex-col gap-lg">
|
||||
<!-- Page Header -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-md mb-sm">
|
||||
<div>
|
||||
<div class="flex items-center gap-sm mb-xs">
|
||||
<span class="bg-accent-soft text-on-tertiary-fixed-variant px-2 py-0.5 rounded-full font-overline uppercase tracking-wider">Sample data</span>
|
||||
<h1 class="font-h1 text-h1 text-on-surface">WO-23881</h1>
|
||||
</div>
|
||||
<p class="font-body text-on-surface-variant">Routine boiler maintenance and safety check.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-sm">
|
||||
<button class="px-4 py-2 border border-line text-on-surface bg-surface hover:bg-surface-low rounded-lg font-body-bold transition-colors">
|
||||
Cancel Order
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-primary text-on-primary rounded-lg font-body-bold hover:opacity-90 transition-opacity">
|
||||
Update Status
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Grid Layout -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-lg">
|
||||
<!-- Left Column: Main Details & Progress -->
|
||||
<div class="lg:col-span-12 flex flex-col gap-lg">
|
||||
<!-- Progress Card -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-lg">
|
||||
<h2 class="font-h3 text-h3 mb-md text-on-surface">Work Order Progress</h2>
|
||||
<!-- Stage Ladder -->
|
||||
<div class="flex flex-col gap-0 relative">
|
||||
<!-- Line connecting nodes -->
|
||||
<div class="absolute left-[11px] top-4 bottom-4 w-[2px] bg-line z-0"></div>
|
||||
<!-- Stage 1: Received -->
|
||||
<div class="flex items-start gap-md relative z-10 pb-md">
|
||||
<div class="w-6 h-6 rounded-full bg-primary flex items-center justify-center mt-0.5 shadow-sm">
|
||||
<span class="material-symbols-outlined text-[14px] text-on-primary" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-body-bold text-on-surface">Received</div>
|
||||
<div class="font-technical text-on-surface-variant mt-1">12 Jul 2024, 09:14 AM</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stage 2: In Progress (Active) -->
|
||||
<div class="flex items-start gap-md relative z-10 pb-md">
|
||||
<div class="w-6 h-6 rounded-full bg-primary flex items-center justify-center mt-0.5 shadow-sm ring-4 ring-primary-container/20">
|
||||
<div class="w-2 h-2 rounded-full bg-on-primary"></div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<div class="flex items-center gap-sm">
|
||||
<div class="font-body-bold text-primary">In progress</div>
|
||||
<span class="bg-surface-high text-on-surface-variant px-2 py-0.5 rounded-full font-overline tracking-wider">Booked</span>
|
||||
</div>
|
||||
<div class="font-body text-on-surface mt-1 p-sm bg-surface-low rounded-md border border-line inline-block">
|
||||
Booked for 15 Jul
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stage 3: Completed (Pending) -->
|
||||
<div class="flex items-start gap-md relative z-10">
|
||||
<div class="w-6 h-6 rounded-full bg-surface-high border-2 border-surface flex items-center justify-center mt-0.5">
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-body-bold text-on-surface-variant">Completed</div>
|
||||
<div class="font-technical text-outline mt-1">Pending contractor sign-off</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Details Card -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-lg">
|
||||
<h2 class="font-h3 text-h3 mb-md text-on-surface">Job Details</h2>
|
||||
<div class="grid grid-cols-2 gap-y-md gap-x-lg">
|
||||
<div>
|
||||
<div class="font-overline text-on-surface-variant uppercase tracking-wider mb-xs">Property</div>
|
||||
<div class="font-body text-on-surface">12 High St</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-overline text-on-surface-variant uppercase tracking-wider mb-xs">Tenant Contact</div>
|
||||
<div class="font-body text-on-surface">Sarah Jenkins<br>+44 7700 900451</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-overline text-on-surface-variant uppercase tracking-wider mb-xs">Priority</div>
|
||||
<div class="inline-block px-2 py-1 bg-tan-soft text-on-tan rounded-full font-body-bold text-xs">Standard (7 Days)</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-overline text-on-surface-variant uppercase tracking-wider mb-xs">Trade</div>
|
||||
<div class="font-body text-on-surface">Plumbing / Heating</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Contractor Chrome & Actions -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Modal Backdrop & Content (Book Appointment) -->
|
||||
<!-- Default hidden, removed for preview purposes based on prompt requirement to show the modal state, but prompt implies result state. I will show the modal as requested in frame 2 setup -->
|
||||
<div class="fixed inset-0 z-[100] flex items-center justify-center bg-ink/40 backdrop-blur-sm transition-opacity" id="booking-modal">
|
||||
<!-- Modal Card -->
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-[0_24px_48px_-12px_rgba(42,52,122,0.10)] border border-line w-full max-w-md mx-md overflow-hidden flex flex-col scale-100 transition-transform">
|
||||
<!-- Modal Header -->
|
||||
<div class="px-lg py-md border-b border-line flex justify-between items-center bg-surface">
|
||||
<h2 class="font-h3 text-on-surface">Book appointment</h2>
|
||||
<button class="text-outline hover:text-on-surface transition-colors" onclick="document.getElementById('booking-modal').classList.add('hidden')">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Modal Body -->
|
||||
<div class="p-lg flex flex-col gap-md">
|
||||
<div class="flex flex-col gap-xs">
|
||||
<label class="font-body-bold text-on-surface text-sm">Date</label>
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline pointer-events-none">calendar_today</span>
|
||||
<input class="w-full pl-10 pr-4 py-2 bg-surface-low border border-line rounded-lg text-on-surface focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-body" readonly="" type="text" value="15 Jul">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-xs">
|
||||
<label class="font-body-bold text-on-surface text-sm">Booking Notes</label>
|
||||
<textarea class="w-full p-3 bg-surface-low border border-line rounded-lg text-on-surface focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-body resize-none h-24" placeholder="Enter notes...">The resident is contacted outside of Ara; these would be optional internal notes helpful for the contractor</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal Footer -->
|
||||
<div class="px-lg py-md border-t border-line bg-surface flex justify-end gap-sm">
|
||||
<button class="px-4 py-2 bg-surface border border-line text-on-surface rounded-lg font-body-bold hover:bg-surface-low transition-colors" onclick="document.getElementById('booking-modal').classList.add('hidden')">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-primary text-on-primary rounded-lg font-body-bold hover:opacity-90 transition-opacity flex items-center gap-2" onclick="document.getElementById('booking-modal').classList.add('hidden')">
|
||||
Confirm booking
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
<!DOCTYPE html><html class="light" lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>3. Report No Access (Contractor View)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — 3. Report No Access (Contractor View)
|
||||
Journey 2 — Contractor · screen 3 of 9
|
||||
Stitch project 8537473387290162501 · screen 430a1c23079240caa77ca27865f28ebe
|
||||
Original HTML <title>: Report No Access - 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-primary": "#ffffff",
|
||||
"error-soft": "#fdecea",
|
||||
"surface-container-highest": "#d8e3f8",
|
||||
"tertiary-fixed-dim": "#9acbff",
|
||||
"secondary-fixed-dim": "#e7c08b",
|
||||
"outline": "#767682",
|
||||
"canvas": "#eef4fc",
|
||||
"on-tertiary-fixed-variant": "#004a79",
|
||||
"on-tertiary-container": "#50aaf9",
|
||||
"on-background": "#111c2b",
|
||||
"on-secondary-fixed-variant": "#5d4218",
|
||||
"surface-container-low": "#eff4ff",
|
||||
"tertiary": "#002743",
|
||||
"accent-soft": "#e4f1fc",
|
||||
"on-primary-fixed-variant": "#364087",
|
||||
"secondary-container": "#ffd6a0",
|
||||
"primary-dark": "#222a63",
|
||||
"on-surface-variant": "#454650",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-container": "#795c2f",
|
||||
"primary-fixed-dim": "#bcc2ff",
|
||||
"secondary-fixed": "#ffddb2",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-fixed": "#d0e4ff",
|
||||
"tertiary-container": "#003d66",
|
||||
"inverse-on-surface": "#ebf1ff",
|
||||
"primary": "#111c64",
|
||||
"on-tertiary-fixed": "#001d34",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-primary": "#bcc2ff",
|
||||
"on-secondary-fixed": "#291800",
|
||||
"line": "#d2ddec",
|
||||
"on-primary-fixed": "#04105a",
|
||||
"surface-dim": "#cfdbef",
|
||||
"on-surface": "#111c2b",
|
||||
"primary-fixed": "#dfe0ff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#dee9fe",
|
||||
"surface-bright": "#f8f9ff",
|
||||
"surface-low": "#e3edf9",
|
||||
"surface": "#f8f9ff",
|
||||
"on-tan": "#3d2f16",
|
||||
"ink": "#111111",
|
||||
"inverse-surface": "#263141",
|
||||
"background": "#f8f9ff",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#2a347a",
|
||||
"surface-high": "#d9e5f4",
|
||||
"secondary": "#77592d",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-tint": "#4f58a0",
|
||||
"tan-soft": "#f4ebdc",
|
||||
"on-primary-container": "#96a0ed",
|
||||
"surface-container": "#e6eeff",
|
||||
"error": "#b3261e",
|
||||
"surface-variant": "#d8e3f8",
|
||||
"outline-variant": "#c6c5d2"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"md": "16px",
|
||||
"xs": "4px",
|
||||
"lg": "24px",
|
||||
"sidebar-width": "256px",
|
||||
"header-height": "64px",
|
||||
"xl": "40px",
|
||||
"sm": "8px",
|
||||
"max-width": "1440px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display": ["Montserrat"],
|
||||
"h1": ["Montserrat"],
|
||||
"body-bold": ["Montserrat"],
|
||||
"h3": ["Montserrat"],
|
||||
"body": ["Montserrat"],
|
||||
"h2": ["Montserrat"],
|
||||
"subheading": ["Montserrat"],
|
||||
"overline": ["Questrial"],
|
||||
"technical": ["Questrial"],
|
||||
"display-mobile": ["Montserrat"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display": ["36px", { "lineHeight": "1.1", "fontWeight": "800" }],
|
||||
"h1": ["30px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
||||
"body-bold": ["14px", { "lineHeight": "1.25", "fontWeight": "600" }],
|
||||
"h3": ["20px", { "lineHeight": "1.4", "fontWeight": "700" }],
|
||||
"body": ["14px", { "lineHeight": "1.25", "fontWeight": "500" }],
|
||||
"h2": ["24px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
||||
"subheading": ["18px", { "lineHeight": "1.4", "fontWeight": "700" }],
|
||||
"overline": ["11px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700" }],
|
||||
"technical": ["12px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
||||
"display-mobile": ["32px", { "lineHeight": "1.1", "fontWeight": "800" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { background-color: theme('colors.canvas'); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body text-body text-on-surface antialiased min-h-screen flex flex-col"><nav class="hidden md:flex bg-surface w-sidebar-width h-screen fixed left-0 top-0 flex-col p-md gap-sm z-40 border-r border-line"><div class="flex items-center gap-sm mb-lg px-sm pt-sm"><div class="w-8 h-8 bg-primary rounded-DEFAULT flex items-center justify-center text-on-primary font-display text-h3">D</div><div><h1 class="font-h1 text-h1 text-primary truncate text-lg">Stonewater</h1><span class="bg-secondary-container text-on-secondary-container font-overline text-overline px-sm py-xs rounded-full uppercase">Contractor A</span></div></div><div class="flex-1 flex flex-col gap-xs overflow-y-auto"><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">dashboard</span><span class="font-body text-body">Dashboard</span></a><a class="flex items-center gap-sm p-sm bg-primary-container text-on-primary-container rounded-lg transition-all" href="#"><span class="material-symbols-outlined text-[20px]">handyman</span><span class="font-body text-body font-bold">Work orders</span></a><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">description</span><span class="font-body text-body">Documents</span></a></div><div class="mt-auto border-t border-line pt-sm flex flex-col gap-xs"><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">help</span><span class="font-body text-body">Help</span></a><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">settings</span><span class="font-body text-body">Settings</span></a></div></nav>
|
||||
<!-- TopNavBar (Excluded as per Semantic Shell Mandate for focused tasks) -->
|
||||
<!-- SideNavBar (Excluded as per Semantic Shell Mandate for focused tasks) -->
|
||||
<!-- Main Canvas Content -->
|
||||
<main class="flex-1 md:ml-[256px] flex flex-col min-h-screen bg-canvas">
|
||||
<div class="p-lg xl:p-xl flex-1 overflow-y-auto">
|
||||
<!-- Context Header -->
|
||||
<div class="px-lg xl:px-xl py-lg bg-surface border-b border-line shrink-0 sticky top-0 z-20"><div class="max-w-max-width mx-auto flex flex-col md:flex-row md:items-end justify-between gap-md"><div><div class="flex items-center gap-sm mb-xs"><span class="font-overline text-overline text-on-surface-variant bg-surface-low px-2 py-1 rounded-full uppercase tracking-widest">Stonewater Planned Works 2026</span></div><div class="flex items-center gap-md"><button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-surface-low transition-colors text-on-surface-variant"><span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">arrow_back</span></button><div><h2 class="font-display text-display text-on-surface">Report no access</h2><p class="font-body text-body text-on-surface-variant">WO-23881</p></div></div></div></div></div>
|
||||
<!-- Bento Grid Layout for Action & Context -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-lg items-start max-w-max-width mx-auto">
|
||||
<!-- Main Action Form (Spans 8 columns on md+) -->
|
||||
<div class="md:col-span-8 bg-surface rounded-lg border border-line shadow-card p-md md:p-lg">
|
||||
<!-- Alert / Result Flag (Simulating the state after logging, or current state context) -->
|
||||
<div class="mb-lg p-md rounded-lg bg-tan-soft border border-secondary-fixed flex gap-md items-start">
|
||||
<span class="material-symbols-outlined text-secondary pt-xs" style="font-variation-settings: 'FILL' 1;">warning</span>
|
||||
<div class="flex-grow flex flex-col gap-xs">
|
||||
<h3 class="font-subheading text-subheading text-on-tan">No access, attempt 1 of 2</h3>
|
||||
<p class="font-body text-body text-on-tan/80">Reason: No answer, logged 15 Jul</p>
|
||||
<p class="font-body-bold text-body-bold text-on-tan mt-xs">A second attempt is required</p>
|
||||
</div>
|
||||
<button class="bg-surface-container-lowest border border-line text-on-surface px-md py-sm rounded font-body-bold hover:bg-surface-low transition-colors whitespace-nowrap">
|
||||
Rebook appointment
|
||||
</button>
|
||||
</div>
|
||||
<form class="flex flex-col gap-md">
|
||||
<div class="flex flex-col gap-xs">
|
||||
<label class="font-body-bold text-body-bold text-on-surface" for="reason">Reason</label>
|
||||
<select class="w-full h-12 bg-surface-low border border-line rounded px-md font-body text-body text-on-surface focus:outline-none focus:border-accent-soft focus:ring-1 focus:ring-accent-soft appearance-none" id="reason">
|
||||
<option selected="" value="no_answer">No answer</option>
|
||||
<option value="refused">Refused entry</option>
|
||||
<option value="unsafe">Unsafe conditions</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col gap-xs">
|
||||
<label class="font-body-bold text-body-bold text-on-surface" for="note">Note (Optional)</label>
|
||||
<textarea class="w-full bg-surface-low border border-line rounded p-md font-body text-body text-on-surface focus:outline-none focus:border-accent-soft focus:ring-1 focus:ring-accent-soft resize-y" id="note" placeholder="Add any details about the attempt..." rows="4"></textarea>
|
||||
</div>
|
||||
<div class="flex justify-end pt-sm border-t border-line mt-sm">
|
||||
<button class="text-on-primary font-body-bold px-lg py-sm rounded-lg hover:bg-primary-dark transition-colors shadow-sm bg-primary-container" type="button">
|
||||
Log no access
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Contextual Sidebar Info (Spans 4 columns on md+) -->
|
||||
<div class="md:col-span-4 flex flex-col gap-md">
|
||||
<!-- History Card -->
|
||||
<div class="rounded-lg border border-line shadow-card p-md bg-surface">
|
||||
<div class="flex justify-between items-center mb-md border-b border-line pb-xs">
|
||||
<h2 class="font-subheading text-subheading text-on-surface">History</h2>
|
||||
<span class="bg-surface-low text-on-surface-variant font-overline text-overline px-sm py-xs rounded-full">Sample data</span>
|
||||
</div>
|
||||
<!-- Timeline -->
|
||||
<div class="relative border-l-2 border-line ml-sm pl-md py-sm flex flex-col gap-md">
|
||||
<!-- Current Event -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[25px] w-3 h-3 bg-error rounded-full ring-4 ring-surface-container-lowest"></div>
|
||||
<div class="flex flex-col gap-0">
|
||||
<span class="font-body-bold text-body-bold text-on-surface">No access</span>
|
||||
<span class="font-technical text-technical text-on-surface-variant">15 Jul</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Past Event -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[25px] w-3 h-3 bg-surface-variant rounded-full ring-4 ring-surface-container-lowest"></div>
|
||||
<div class="flex flex-col gap-0">
|
||||
<span class="font-body text-body text-on-surface">Booked</span>
|
||||
<span class="font-technical text-technical text-on-surface-variant">15 Jul</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Work Order Brief -->
|
||||
<div class="rounded-lg border border-line shadow-card p-md bg-surface">
|
||||
<h2 class="font-subheading text-subheading text-on-surface mb-xs border-b border-line pb-xs">Details</h2>
|
||||
<div class="grid grid-cols-2 gap-sm mt-sm">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-overline text-overline text-on-surface-variant">PROPERTY</span>
|
||||
<span class="font-body text-body text-on-surface truncate">12 High St</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-overline text-overline text-on-surface-variant">TRADE</span>
|
||||
<span class="font-body text-body text-on-surface">Windows</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
213
docs/wireframes/ara-projects/2-contractor-journey/04-rebook.html
Normal file
213
docs/wireframes/ara-projects/2-contractor-journey/04-rebook.html
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>4. Rebook (Refined)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — 4. Rebook (Refined)
|
||||
Journey 2 — Contractor · screen 4 of 9
|
||||
Stitch project 8537473387290162501 · screen 82ff888da40b482ea740742990ae3d65
|
||||
Original HTML <title>: Work Order - Rebook After No Access
|
||||
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-primary": "#ffffff",
|
||||
"error-soft": "#fdecea",
|
||||
"surface-container-highest": "#d8e3f8",
|
||||
"tertiary-fixed-dim": "#9acbff",
|
||||
"secondary-fixed-dim": "#e7c08b",
|
||||
"outline": "#767682",
|
||||
"canvas": "#eef4fc",
|
||||
"on-tertiary-fixed-variant": "#004a79",
|
||||
"on-tertiary-container": "#50aaf9",
|
||||
"on-background": "#111c2b",
|
||||
"on-secondary-fixed-variant": "#5d4218",
|
||||
"surface-container-low": "#eff4ff",
|
||||
"tertiary": "#002743",
|
||||
"accent-soft": "#e4f1fc",
|
||||
"on-primary-fixed-variant": "#364087",
|
||||
"secondary-container": "#ffd6a0",
|
||||
"primary-dark": "#222a63",
|
||||
"on-surface-variant": "#454650",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-container": "#795c2f",
|
||||
"primary-fixed-dim": "#bcc2ff",
|
||||
"secondary-fixed": "#ffddb2",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-fixed": "#d0e4ff",
|
||||
"tertiary-container": "#003d66",
|
||||
"inverse-on-surface": "#ebf1ff",
|
||||
"primary": "#111c64",
|
||||
"on-tertiary-fixed": "#001d34",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-primary": "#bcc2ff",
|
||||
"on-secondary-fixed": "#291800",
|
||||
"line": "#d2ddec",
|
||||
"on-primary-fixed": "#04105a",
|
||||
"surface-dim": "#cfdbef",
|
||||
"on-surface": "#111c2b",
|
||||
"primary-fixed": "#dfe0ff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#dee9fe",
|
||||
"surface-bright": "#f8f9ff",
|
||||
"surface-low": "#e3edf9",
|
||||
"surface": "#f8f9ff",
|
||||
"on-tan": "#3d2f16",
|
||||
"ink": "#111111",
|
||||
"inverse-surface": "#263141",
|
||||
"background": "#f8f9ff",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#2a347a",
|
||||
"surface-high": "#d9e5f4",
|
||||
"secondary": "#77592d",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-tint": "#4f58a0",
|
||||
"tan-soft": "#f4ebdc",
|
||||
"on-primary-container": "#96a0ed",
|
||||
"surface-container": "#e6eeff",
|
||||
"error": "#b3261e",
|
||||
"surface-variant": "#d8e3f8",
|
||||
"outline-variant": "#c6c5d2"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"md": "16px",
|
||||
"xs": "4px",
|
||||
"lg": "24px",
|
||||
"sidebar-width": "256px",
|
||||
"header-height": "64px",
|
||||
"xl": "40px",
|
||||
"sm": "8px",
|
||||
"max-width": "1440px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display": ["Montserrat"],
|
||||
"h1": ["Montserrat"],
|
||||
"body-bold": ["Montserrat"],
|
||||
"h3": ["Montserrat"],
|
||||
"body": ["Montserrat"],
|
||||
"h2": ["Montserrat"],
|
||||
"subheading": ["Montserrat"],
|
||||
"overline": ["Questrial"],
|
||||
"technical": ["Questrial"],
|
||||
"display-mobile": ["Montserrat"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display": ["36px", { "lineHeight": "1.1", "fontWeight": "800" }],
|
||||
"h1": ["30px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
||||
"body-bold": ["14px", { "lineHeight": "1.25", "fontWeight": "600" }],
|
||||
"h3": ["20px", { "lineHeight": "1.4", "fontWeight": "700" }],
|
||||
"body": ["14px", { "lineHeight": "1.25", "fontWeight": "500" }],
|
||||
"h2": ["24px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
||||
"subheading": ["18px", { "lineHeight": "1.4", "fontWeight": "700" }],
|
||||
"overline": ["11px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700" }],
|
||||
"technical": ["12px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
||||
"display-mobile": ["32px", { "lineHeight": "1.1", "fontWeight": "800" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.shadow-card {
|
||||
box-shadow: 0 4px 6px -1px rgba(17, 28, 43, 0.04), 0 2px 4px -1px rgba(17, 28, 43, 0.04);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-canvas text-on-surface font-body font-body antialiased min-h-screen flex flex-col md:flex-row">
|
||||
<!-- SideNavBar (Desktop) -->
|
||||
<nav class="hidden md:flex bg-surface w-sidebar-width h-screen fixed left-0 top-0 flex-col p-md gap-sm z-40 border-r border-line"><div class="flex items-center gap-sm mb-lg px-sm pt-sm"><img alt="Stonewater" class="w-8 h-8 rounded-DEFAULT object-cover" src="../assets/img/img6.png"><div><h1 class="font-h1 text-h1 text-primary truncate text-lg">Stonewater</h1><span class="bg-secondary-container text-on-secondary-container font-overline text-overline px-sm py-xs rounded-full uppercase">Contractor A</span></div></div><div class="flex-1 flex flex-col gap-xs overflow-y-auto"><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">dashboard</span><span class="font-body text-body">Dashboard</span></a><a class="flex items-center gap-sm p-sm bg-primary-container text-on-primary-container rounded-lg transition-all" href="#"><span class="material-symbols-outlined text-[20px]">handyman</span><span class="font-body text-body font-bold">Work orders</span></a><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">description</span><span class="font-body text-body">Documents</span></a></div></nav>
|
||||
<!-- TopNavBar (Mobile) -->
|
||||
<header class="md:hidden bg-surface-container-lowest dark:bg-inverse-surface h-header-height w-full sticky top-0 z-50 shadow-card flex justify-between items-center px-lg w-full max-w-max-width mx-auto">
|
||||
<div class="flex items-center gap-sm">
|
||||
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer">menu</span>
|
||||
<span class="font-h2 text-h2 text-primary dark:text-primary-fixed-dim tracking-tight">Ara Projects</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-md">
|
||||
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors duration-200 cursor-pointer">notifications</span>
|
||||
<img alt="User profile" class="w-8 h-8 rounded-full bg-surface-low object-cover" data-alt="A small circular avatar placeholder showing a generic user profile silhouette in a light blue hue on a white background, denoting a logged-in user." src="../assets/img/img1.png">
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 md:ml-sidebar-width flex flex-col min-h-screen">
|
||||
<!-- Header / Breadcrumbs -->
|
||||
<div class="bg-surface-container-lowest border-b border-line px-lg xl:px-xl py-md sticky top-0 md:top-0 z-30 flex items-center justify-between">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center gap-sm text-on-surface-variant font-body text-body"><a class="hover:text-primary transition-colors" href="#">Work orders</a><span class="material-symbols-outlined text-[16px]">chevron_right</span><span class="text-on-surface font-body-bold text-body-bold">WO-23881</span><span class="material-symbols-outlined text-[16px]">chevron_right</span><span class="text-on-surface-variant">12 High St</span><span class="ml-sm bg-accent-soft text-primary font-overline text-overline px-sm py-xs rounded-full uppercase tracking-wider">Sample data</span></div>
|
||||
<h1 class="font-h1 text-h1 text-on-surface mt-xs tracking-tight">Windows</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-sm">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Canvas -->
|
||||
<div class="flex-1 p-lg xl:p-xl max-w-max-width mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-lg items-start">
|
||||
<!-- Left Column: Primary Task Area -->
|
||||
<div class="flex flex-col gap-lg lg:col-span-12">
|
||||
<!-- Status Banner -->
|
||||
<div class="bg-error-soft border border-error/20 rounded-lg p-md flex items-start gap-md">
|
||||
<span class="material-symbols-outlined text-error mt-xs" style="font-variation-settings: 'FILL' 1;">warning</span>
|
||||
<div>
|
||||
<h3 class="font-h3 text-h3 text-on-error-container">No Access Attempted</h3>
|
||||
<p class="font-body text-body text-on-surface-variant mt-xs">The contractor attempted access on 15 Jul but was unable to enter the property. A rebook is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Scheduling Card -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card overflow-hidden">
|
||||
<div class="px-lg py-md border-b border-line bg-surface-low flex justify-between items-center">
|
||||
<h2 class="font-h3 text-h3 text-on-surface flex items-center gap-sm">
|
||||
<span class="material-symbols-outlined text-primary">calendar_month</span>
|
||||
Schedule Rebook
|
||||
</h2>
|
||||
<span class="bg-surface-container-highest text-on-surface-variant font-technical text-technical px-sm py-xs rounded-DEFAULT border border-line">Contractor A • Asset 100245</span>
|
||||
</div>
|
||||
<div class="p-lg">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-lg mb-lg">
|
||||
<!-- Previous Attempt -->
|
||||
<div class="bg-surface-container-low p-md rounded-lg border border-line opacity-75">
|
||||
<div class="font-overline text-overline text-on-surface-variant uppercase mb-xs">Previous Attempt (Failed)</div>
|
||||
<div class="flex items-center gap-sm">
|
||||
<span class="material-symbols-outlined text-error">event_busy</span>
|
||||
<span class="font-body-bold text-body-bold text-on-surface line-through">15 Jul 2024, 09:00 AM</span>
|
||||
</div>
|
||||
<div class="mt-sm font-technical text-technical text-on-surface-variant flex items-center gap-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">door_front</span>
|
||||
Reason: Tenant not home / No answer
|
||||
</div>
|
||||
</div>
|
||||
<!-- New Booking Input -->
|
||||
<div class="bg-surface-bright p-md rounded-lg border-2 border-primary border-dashed relative">
|
||||
<div class="font-overline text-overline text-primary uppercase mb-xs">New Appointment</div>
|
||||
<div class="flex flex-col gap-sm"><label class="font-body text-body text-on-surface-variant">Select date</label><div class="flex items-center bg-surface-low border border-line rounded-DEFAULT px-sm py-xs focus-within:border-accent transition-colors"><span class="material-symbols-outlined text-on-surface-variant mr-xs text-[18px]">calendar_today</span><input class="bg-transparent border-none outline-none font-body text-body text-on-surface w-full focus:ring-0 p-0" readonly="" type="text" value="22 Jul 2024"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-md pt-md border-t border-line">
|
||||
<button class="bg-surface-container text-primary hover:bg-surface-high font-body-bold text-body-bold px-lg py-sm rounded-lg transition-colors border border-primary/20">
|
||||
Cancel Rebook
|
||||
</button>
|
||||
<button class="bg-primary text-on-primary hover:bg-primary-dark font-body-bold text-body-bold px-lg py-sm rounded-lg transition-colors shadow-sm flex items-center gap-xs">
|
||||
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
Confirm booking
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Context/Details -->
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>5. Attend & Start (Contractor Sidebar)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — 5. Attend & Start (Contractor Sidebar)
|
||||
Journey 2 — Contractor · screen 5 of 9
|
||||
Stitch project 8537473387290162501 · screen f8b9e0fb63b249e8a80c16057f18765c
|
||||
Original HTML <title>: Work Order: WO-23881 - Attend and Start
|
||||
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-primary": "#ffffff",
|
||||
"error-soft": "#fdecea",
|
||||
"surface-container-highest": "#d8e3f8",
|
||||
"tertiary-fixed-dim": "#9acbff",
|
||||
"secondary-fixed-dim": "#e7c08b",
|
||||
"outline": "#767682",
|
||||
"canvas": "#eef4fc",
|
||||
"on-tertiary-fixed-variant": "#004a79",
|
||||
"on-tertiary-container": "#50aaf9",
|
||||
"on-background": "#111c2b",
|
||||
"on-secondary-fixed-variant": "#5d4218",
|
||||
"surface-container-low": "#eff4ff",
|
||||
"tertiary": "#002743",
|
||||
"accent-soft": "#e4f1fc",
|
||||
"on-primary-fixed-variant": "#364087",
|
||||
"secondary-container": "#ffd6a0",
|
||||
"primary-dark": "#222a63",
|
||||
"on-surface-variant": "#454650",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-container": "#795c2f",
|
||||
"primary-fixed-dim": "#bcc2ff",
|
||||
"secondary-fixed": "#ffddb2",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-fixed": "#d0e4ff",
|
||||
"tertiary-container": "#003d66",
|
||||
"inverse-on-surface": "#ebf1ff",
|
||||
"primary": "#111c64",
|
||||
"on-tertiary-fixed": "#001d34",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-primary": "#bcc2ff",
|
||||
"on-secondary-fixed": "#291800",
|
||||
"line": "#d2ddec",
|
||||
"on-primary-fixed": "#04105a",
|
||||
"surface-dim": "#cfdbef",
|
||||
"on-surface": "#111c2b",
|
||||
"primary-fixed": "#dfe0ff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#dee9fe",
|
||||
"surface-bright": "#f8f9ff",
|
||||
"surface-low": "#e3edf9",
|
||||
"surface": "#f8f9ff",
|
||||
"on-tan": "#3d2f16",
|
||||
"ink": "#111111",
|
||||
"inverse-surface": "#263141",
|
||||
"background": "#f8f9ff",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#2a347a",
|
||||
"surface-high": "#d9e5f4",
|
||||
"secondary": "#77592d",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-tint": "#4f58a0",
|
||||
"tan-soft": "#f4ebdc",
|
||||
"on-primary-container": "#96a0ed",
|
||||
"surface-container": "#e6eeff",
|
||||
"error": "#b3261e",
|
||||
"surface-variant": "#d8e3f8",
|
||||
"outline-variant": "#c6c5d2"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"md": "16px",
|
||||
"xs": "4px",
|
||||
"lg": "24px",
|
||||
"sidebar-width": "256px",
|
||||
"header-height": "64px",
|
||||
"xl": "40px",
|
||||
"sm": "8px",
|
||||
"max-width": "1440px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display": ["Montserrat"],
|
||||
"h1": ["Montserrat"],
|
||||
"body-bold": ["Montserrat"],
|
||||
"h3": ["Montserrat"],
|
||||
"body": ["Montserrat"],
|
||||
"h2": ["Montserrat"],
|
||||
"subheading": ["Montserrat"],
|
||||
"overline": ["Questrial"],
|
||||
"technical": ["Questrial"],
|
||||
"display-mobile": ["Montserrat"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display": ["36px", { "lineHeight": "1.1", "fontWeight": "800" }],
|
||||
"h1": ["30px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
||||
"body-bold": ["14px", { "lineHeight": "1.25", "fontWeight": "600" }],
|
||||
"h3": ["20px", { "lineHeight": "1.4", "fontWeight": "700" }],
|
||||
"body": ["14px", { "lineHeight": "1.25", "fontWeight": "500" }],
|
||||
"h2": ["24px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
||||
"subheading": ["18px", { "lineHeight": "1.4", "fontWeight": "700" }],
|
||||
"overline": ["11px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700" }],
|
||||
"technical": ["12px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
||||
"display-mobile": ["32px", { "lineHeight": "1.1", "fontWeight": "800" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.shadow-card {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-canvas text-on-surface font-body antialiased min-h-screen flex flex-col md:flex-row">
|
||||
<!-- Side Navigation (Desktop) -->
|
||||
<nav class="hidden md:flex bg-surface w-sidebar-width h-screen fixed left-0 top-0 flex-col p-md gap-sm z-40 border-r border-line"><div class="flex items-center gap-sm mb-lg px-sm pt-sm"><img alt="Stonewater" class="w-8 h-8 rounded-DEFAULT object-cover" src="../assets/img/img6.png"><div><h1 class="font-h1 text-h1 text-primary truncate text-lg">Stonewater</h1><span class="bg-secondary-container text-on-secondary-container font-overline text-overline px-sm py-xs rounded-full uppercase">Contractor A</span></div></div><div class="flex-1 flex flex-col gap-xs overflow-y-auto"><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">dashboard</span><span class="font-body text-body">Dashboard</span></a><a class="flex items-center gap-sm p-sm bg-primary-container text-on-primary-container rounded-lg transition-all" href="#"><span class="material-symbols-outlined text-[20px]">handyman</span><span class="font-body text-body font-bold">Work orders</span></a><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">description</span><span class="font-body text-body">Documents</span></a></div><div class="mt-auto border-t border-line pt-sm flex flex-col gap-xs"><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">help</span><span class="font-body text-body">Help</span></a><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">settings</span><span class="font-body text-body">Settings</span></a></div></nav>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-1 md:ml-[256px] flex flex-col min-h-screen">
|
||||
<!-- Top App Bar (Mobile & Desktop Context) -->
|
||||
<header class="md:hidden bg-surface-container-lowest dark:bg-inverse-surface h-header-height w-full sticky top-0 z-50 shadow-card flex justify-between items-center px-lg w-full max-w-max-width mx-auto"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-on-surface-variant cursor-pointer">menu</span><span class="font-h2 text-h2 text-primary dark:text-primary-fixed-dim tracking-tight">Stonewater</span></div><div class="flex items-center gap-md"><span class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors duration-200 cursor-pointer">notifications</span><img alt="User profile" class="w-8 h-8 rounded-full bg-surface-low object-cover" src="../assets/img/img1.png"></div></header>
|
||||
<!-- Page Header -->
|
||||
<div class="px-lg xl:px-xl py-lg bg-surface border-b border-line shrink-0 sticky top-0 md:top-[0px] z-20">
|
||||
<div class="max-w-max-width mx-auto flex flex-col md:flex-row md:items-end justify-between gap-md">
|
||||
<div>
|
||||
<div class="flex items-center gap-sm mb-xs">
|
||||
<span class="font-overline text-overline text-on-surface-variant bg-surface-low px-2 py-1 rounded-full uppercase tracking-widest">Sample data</span>
|
||||
<span class="font-overline text-overline text-on-surface-variant">Residential Repair</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-md">
|
||||
<h2 class="font-display text-display md:text-display text-on-surface">WO-23881</h2>
|
||||
<span class="px-3 py-1 rounded-full bg-surface-high text-on-surface font-body-bold text-body-bold border border-line">In progress</span>
|
||||
</div>
|
||||
<p class="font-body text-body text-on-surface-variant mt-2 max-w-2xl">Fix leaking pipe under kitchen sink. Tenant reported significant water pooling.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-sm mt-4 md:mt-0 shrink-0">
|
||||
<button class="px-4 py-2 rounded-lg border border-line bg-surface text-on-surface font-body-bold text-body-bold hover:bg-surface-low transition-colors shadow-sm">
|
||||
Reschedule
|
||||
</button>
|
||||
<button class="px-4 py-2 rounded-lg bg-primary text-on-primary font-body-bold text-body-bold hover:bg-primary-dark transition-colors shadow-sm flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span>
|
||||
Mark on site
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Scrollable Content Area -->
|
||||
<div class="p-lg xl:p-xl flex-1 overflow-y-auto">
|
||||
<div class="max-w-max-width mx-auto grid grid-cols-1 lg:grid-cols-12 gap-lg items-start">
|
||||
<!-- Left Column (Details & Activity) -->
|
||||
<div class="lg:col-span-8 flex flex-col gap-lg">
|
||||
<!-- Stage Ladder Card -->
|
||||
<div class="bg-surface rounded-lg shadow-card border border-line p-md md:p-lg">
|
||||
<h3 class="font-h3 text-h3 text-on-surface mb-md">Job Progress</h3>
|
||||
<div class="flex flex-col gap-0 relative">
|
||||
<!-- Track Line -->
|
||||
<div class="absolute left-4 top-4 bottom-4 w-px bg-line z-0"></div>
|
||||
<!-- Stage 1: Raised (Completed) -->
|
||||
<div class="flex items-start gap-md relative z-10 py-sm">
|
||||
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center shrink-0 border-2 border-surface">
|
||||
<span class="material-symbols-outlined text-on-primary text-sm" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||
</div>
|
||||
<div class="pt-1 flex-1">
|
||||
<h4 class="font-body-bold text-body-bold text-on-surface">Raised</h4>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-0.5">20 Jul, 09:14 by Property Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stage 2: Assigned (Completed) -->
|
||||
<div class="flex items-start gap-md relative z-10 py-sm">
|
||||
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center shrink-0 border-2 border-surface">
|
||||
<span class="material-symbols-outlined text-on-primary text-sm" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||
</div>
|
||||
<div class="pt-1 flex-1">
|
||||
<h4 class="font-body-bold text-body-bold text-on-surface">Assigned</h4>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-0.5">20 Jul, 11:30 to Contractor A</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stage 3: On Site (Active) -->
|
||||
<div class="flex items-start gap-md relative z-10 py-sm">
|
||||
<div class="w-8 h-8 rounded-full bg-surface border-2 border-primary flex items-center justify-center shrink-0">
|
||||
<div class="w-3 h-3 rounded-full bg-primary"></div>
|
||||
</div>
|
||||
<div class="pt-1 flex-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-body-bold text-body-bold text-primary">In progress</h4>
|
||||
<span class="font-technical text-technical text-on-surface-variant bg-surface-low px-2 py-0.5 rounded">On site 22 Jul</span>
|
||||
</div>
|
||||
<p class="font-technical text-technical text-on-surface mt-1">Contractor A marked on site.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stage 4: Completed (Pending) -->
|
||||
<div class="flex items-start gap-md relative z-10 py-sm">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-high flex items-center justify-center shrink-0 border-2 border-surface">
|
||||
</div>
|
||||
<div class="pt-1 flex-1 opacity-50">
|
||||
<h4 class="font-body-bold text-body-bold text-on-surface">Completed</h4>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-0.5">Pending resolution</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity Feed Card -->
|
||||
<div class="bg-surface rounded-lg shadow-card border border-line p-md md:p-lg">
|
||||
<div class="flex items-center justify-between mb-md">
|
||||
<h3 class="font-h3 text-h3 text-on-surface">Activity</h3>
|
||||
<button class="font-body-bold text-body-bold text-primary hover:text-primary-dark">View all</button>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex gap-md p-sm rounded-lg hover:bg-surface-low transition-colors">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center shrink-0 text-on-primary-container">
|
||||
<span class="material-symbols-outlined">location_on</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body text-body text-on-surface"><span class="font-body-bold">Contractor A</span> marked status as <span class="font-body-bold text-primary">On site</span></p>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-1">22 Jul, 08:45 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-md p-sm rounded-lg hover:bg-surface-low transition-colors">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-high flex items-center justify-center shrink-0 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined">assignment_ind</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body text-body text-on-surface"><span class="font-body-bold">System</span> automatically dispatched order to <span class="font-body-bold">Contractor A</span></p>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-1">20 Jul, 11:30 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column (Context & Meta) -->
|
||||
<div class="lg:col-span-4 flex flex-col gap-lg">
|
||||
<!-- Contractor Chrome Card -->
|
||||
<div class="bg-surface rounded-lg shadow-card border border-line p-md">
|
||||
<h3 class="font-overline text-overline text-on-surface-variant mb-sm uppercase tracking-wider">Assigned Contractor</h3>
|
||||
<div class="flex items-center gap-md">
|
||||
<div class="w-12 h-12 rounded-lg bg-surface-low flex items-center justify-center border border-line overflow-hidden shrink-0">
|
||||
<img alt="Contractor Logo" class="w-full h-full object-cover" data-alt="A simple, professional corporate logo placeholder for 'Contractor A'. Modern geometric shape, industrial blue and gray colors, clean white background, high quality vector aesthetic." src="../assets/img/img8.png">
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-body-bold text-body-bold text-on-surface">Contractor A</h4>
|
||||
<p class="font-technical text-technical text-on-surface-variant">Plumbing Specialists</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-line flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2 text-on-surface-variant font-technical text-technical">
|
||||
<span class="material-symbols-outlined text-[16px]">call</span>
|
||||
<span>+44 7700 900077</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-on-surface-variant font-technical text-technical">
|
||||
<span class="material-symbols-outlined text-[16px]">mail</span>
|
||||
<span>dispatch@contractora.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Property Details Card -->
|
||||
<div class="bg-surface rounded-lg shadow-card border border-line overflow-hidden">
|
||||
<div class="h-32 w-full bg-surface-low relative border-b border-line">
|
||||
<img alt="Map Location" class="w-full h-full object-cover" data-alt="A clean, modern satellite map view showing a residential street in a suburban area. Roads are light grey, buildings are simple rectangular blocks. Industrial civic tech aesthetic, low contrast colors." data-location="London" src="../assets/img/img7.png">
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-primary drop-shadow-md">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1; font-size: 32px;">location_on</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-md">
|
||||
<h3 class="font-overline text-overline text-on-surface-variant mb-xs uppercase tracking-wider">Property Location</h3>
|
||||
<h4 class="font-body-bold text-body-bold text-on-surface">Flat 12, Example House</h4>
|
||||
<p class="font-technical text-technical text-on-surface-variant mt-1">100 Test Street, London, E1 4XX</p>
|
||||
<button class="w-full mt-4 py-2 rounded-lg bg-surface-low text-primary font-body-bold text-body-bold hover:bg-surface-high transition-colors text-center border border-line">
|
||||
View Property Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,387 @@
|
|||
<!DOCTYPE html><html class="light" lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>6. Completion Blocked (Property View)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — 6. Completion Blocked (Property View)
|
||||
Journey 2 — Contractor · screen 6 of 9
|
||||
Stitch project 8537473387290162501 · screen 3c726fa5f9a94c9683329b000e55730b
|
||||
Original HTML <title>: Work Order WO-23881 - Contractor View
|
||||
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",
|
||||
"error": "#b3261e",
|
||||
"surface-tint": "#4f58a0",
|
||||
"inverse-surface": "#263141",
|
||||
"on-error": "#ffffff",
|
||||
"secondary-fixed": "#ffddb2",
|
||||
"primary-dark": "#222a63",
|
||||
"tan-soft": "#f4ebdc",
|
||||
"secondary-container": "#ffd6a0",
|
||||
"on-secondary-fixed-variant": "#5d4218",
|
||||
"error-soft": "#fdecea",
|
||||
"on-tertiary-fixed": "#001d34",
|
||||
"surface": "#f8f9ff",
|
||||
"tertiary-fixed": "#d0e4ff",
|
||||
"on-primary-container": "#96a0ed",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"line": "#d2ddec",
|
||||
"surface-high": "#d9e5f4",
|
||||
"outline": "#767682",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-primary": "#bcc2ff",
|
||||
"accent-soft": "#e4f1fc",
|
||||
"canvas": "#eef4fc",
|
||||
"surface-bright": "#f8f9ff",
|
||||
"surface-container": "#e6eeff",
|
||||
"on-tertiary-container": "#50aaf9",
|
||||
"primary-fixed-dim": "#bcc2ff",
|
||||
"primary-fixed": "#dfe0ff",
|
||||
"primary-container": "#2a347a",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-dim": "#cfdbef",
|
||||
"surface-container-high": "#dee9fe",
|
||||
"background": "#f8f9ff",
|
||||
"on-surface": "#111c2b",
|
||||
"on-background": "#111c2b",
|
||||
"secondary": "#77592d",
|
||||
"on-surface-variant": "#454650",
|
||||
"on-tan": "#3d2f16",
|
||||
"tertiary-container": "#003d66",
|
||||
"secondary-fixed-dim": "#e7c08b",
|
||||
"outline-variant": "#c6c5d2",
|
||||
"on-primary-fixed": "#04105a",
|
||||
"primary": "#111c64",
|
||||
"surface-container-highest": "#d8e3f8",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-fixed-variant": "#364087",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-container-low": "#eff4ff",
|
||||
"ink": "#111111",
|
||||
"on-secondary-container": "#795c2f",
|
||||
"surface-low": "#e3edf9",
|
||||
"tertiary-fixed-dim": "#9acbff",
|
||||
"inverse-on-surface": "#ebf1ff",
|
||||
"surface-variant": "#d8e3f8",
|
||||
"on-error-container": "#93000a",
|
||||
"on-tertiary-fixed-variant": "#004a79",
|
||||
"tertiary": "#002743"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"header-height": "64px",
|
||||
"xl": "40px",
|
||||
"xs": "4px",
|
||||
"sidebar-width": "256px",
|
||||
"max-width": "1440px",
|
||||
"sm": "8px",
|
||||
"md": "16px",
|
||||
"lg": "24px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"technical": ["Questrial"],
|
||||
"h1": ["Montserrat"],
|
||||
"display-mobile": ["Montserrat"],
|
||||
"body-bold": ["Montserrat"],
|
||||
"body": ["Montserrat"],
|
||||
"overline": ["Questrial"],
|
||||
"h2": ["Montserrat"],
|
||||
"h3": ["Montserrat"],
|
||||
"display": ["Montserrat"],
|
||||
"subheading": ["Montserrat"]
|
||||
},
|
||||
"fontSize": {
|
||||
"technical": ["12px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
||||
"h1": ["30px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
||||
"display-mobile": ["32px", { "lineHeight": "1.1", "fontWeight": "800" }],
|
||||
"body-bold": ["14px", { "lineHeight": "1.25", "fontWeight": "600" }],
|
||||
"body": ["14px", { "lineHeight": "1.25", "fontWeight": "500" }],
|
||||
"overline": ["11px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700" }],
|
||||
"h2": ["24px", { "lineHeight": "1.2", "fontWeight": "800" }],
|
||||
"h3": ["20px", { "lineHeight": "1.4", "fontWeight": "700" }],
|
||||
"display": ["36px", { "lineHeight": "1.1", "fontWeight": "800" }],
|
||||
"subheading": ["18px", { "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>
|
||||
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||
.fill-icon { font-variation-settings: 'FILL' 1; }
|
||||
body { background-color: theme('colors.canvas'); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased text-on-surface font-body">
|
||||
<!-- TopNavBar (Rendered exactly from JSON, active state: Work orders) -->
|
||||
<nav class="bg-surface-container-lowest dark:bg-inverse-surface border-b border-line dark:border-outline-variant shadow-card h-header-height w-full sticky top-0 z-50 flex justify-between items-center px-lg max-w-max-width mx-auto">
|
||||
<div class="flex items-center gap-lg">
|
||||
<span class="font-h2 text-h2 text-primary dark:text-primary-fixed-dim tracking-tight">Ara Projects</span>
|
||||
<div class="hidden md:flex items-center gap-sm h-full pt-1">
|
||||
<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 px-sm py-xs" href="#">Dashboard</a>
|
||||
<a class="text-primary dark:text-primary-fixed-dim border-b-2 border-primary dark:border-primary-fixed-dim pb-1 font-body-bold hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer active:opacity-80 px-sm mt-[2px]" 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 px-sm py-xs" href="#">Workstreams</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 px-sm py-xs" href="#">Properties</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 px-sm py-xs" href="#">Documents</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 px-sm py-xs" href="#">Imports</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 px-sm py-xs" href="#">Reports</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 px-sm py-xs" href="#">Admin</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-md">
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors p-sm rounded-full hover:bg-surface-low cursor-pointer active:opacity-80">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors p-sm rounded-full hover:bg-surface-low cursor-pointer active:opacity-80">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
</button>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-variant overflow-hidden border border-line">
|
||||
<img alt="User profile" class="w-full h-full object-cover" data-alt="A professional headshot of a contractor user in a bright industrial setting, sharp focus, corporate lighting." src="../assets/img/img18.png">
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Main Canvas -->
|
||||
<main class="max-w-max-width mx-auto px-md md:px-xl py-lg md:py-xl grid grid-cols-1 md:grid-cols-12 gap-lg items-start">
|
||||
<!-- Error Banner -->
|
||||
<div class="col-span-1 md:col-span-12 bg-error-container border border-error/20 rounded-lg p-md flex items-start gap-md shadow-sm">
|
||||
<span class="material-symbols-outlined text-on-error-container mt-xs fill-icon">error</span>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-body-bold text-body-bold text-on-error-container">Cannot complete. 2 required documents are missing.</h3>
|
||||
<p class="font-body text-body text-on-error-container/90 mt-1">Building control evidence, Handover pack. Upload both to continue.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Header Section -->
|
||||
<header class="col-span-1 md:col-span-12 flex flex-col md:flex-row justify-between items-start md:items-end gap-md pb-sm border-b border-line">
|
||||
<div>
|
||||
<div class="flex items-center gap-sm mb-2">
|
||||
<span class="font-overline text-overline text-outline tracking-wider uppercase">Work Order</span>
|
||||
<span class="bg-surface-low text-on-surface-variant border border-line font-technical text-technical px-2 py-0.5 rounded-full">Asset: 100245</span>
|
||||
</div>
|
||||
<h1 class="font-h1 text-h1 text-on-surface mb-xs">WO-23881</h1>
|
||||
<div class="flex items-center gap-2 text-on-surface-variant font-body text-body">
|
||||
<span class="material-symbols-outlined text-[18px]">location_on</span>
|
||||
<span>12 High St</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-md">
|
||||
<div class="bg-surface-container-lowest border border-line shadow-sm px-3 py-1.5 rounded-lg flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-outline text-[18px]">badge</span>
|
||||
<span class="font-body-bold text-body-bold text-on-surface">Contractor A</span>
|
||||
</div>
|
||||
<div class="bg-tertiary-container text-on-tertiary font-body-bold text-body-bold px-4 py-2 rounded-full flex items-center gap-2 shadow-sm">
|
||||
<span class="material-symbols-outlined text-[18px]">sync</span>
|
||||
In progress
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Left Column: Content -->
|
||||
<div class="col-span-1 md:col-span-8 flex flex-col gap-lg">
|
||||
<!-- Stage Ladder Card -->
|
||||
<section class="bg-surface-container-lowest border border-line rounded-lg p-lg shadow-card">
|
||||
<h2 class="font-subheading text-subheading text-on-surface mb-lg">Job Progress</h2>
|
||||
<div class="relative flex flex-col md:flex-row justify-between items-start md:items-center w-full gap-4 md:gap-0">
|
||||
<!-- Mobile Line -->
|
||||
<div class="absolute left-[15px] top-[30px] bottom-[30px] w-0.5 bg-line md:hidden z-0"></div>
|
||||
<!-- Desktop Line -->
|
||||
<div class="absolute top-[15px] left-[30px] right-[30px] h-0.5 bg-line hidden md:block z-0"></div>
|
||||
<!-- Active Progress Line Desktop -->
|
||||
<div class="absolute top-[15px] left-[30px] w-[75%] h-0.5 bg-primary hidden md:block z-0"></div>
|
||||
<!-- Active Progress Line Mobile -->
|
||||
<div class="absolute left-[15px] top-[30px] h-[75%] w-0.5 bg-primary md:hidden z-0"></div>
|
||||
<!-- Nodes -->
|
||||
<div class="relative z-10 flex md:flex-col items-center gap-md md:gap-sm text-center">
|
||||
<div class="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center shadow-sm">
|
||||
<span class="material-symbols-outlined text-[16px] font-bold">check</span>
|
||||
</div>
|
||||
<div class="text-left md:text-center">
|
||||
<div class="font-body-bold text-body-bold text-on-surface">Ordered</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-10 flex md:flex-col items-center gap-md md:gap-sm text-center">
|
||||
<div class="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center shadow-sm">
|
||||
<span class="material-symbols-outlined text-[16px] font-bold">check</span>
|
||||
</div>
|
||||
<div class="text-left md:text-center">
|
||||
<div class="font-body-bold text-body-bold text-on-surface">Assigned</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-10 flex md:flex-col items-center gap-md md:gap-sm text-center">
|
||||
<div class="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center shadow-sm">
|
||||
<span class="material-symbols-outlined text-[16px] font-bold">check</span>
|
||||
</div>
|
||||
<div class="text-left md:text-center">
|
||||
<div class="font-body-bold text-body-bold text-on-surface">Booked</div>
|
||||
<div class="font-technical text-technical text-outline mt-0.5">15 Jul</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-10 flex md:flex-col items-center gap-md md:gap-sm text-center">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-lowest border-2 border-primary text-primary flex items-center justify-center shadow-sm ring-4 ring-primary-fixed-dim/30">
|
||||
<div class="w-3 h-3 rounded-full bg-primary"></div>
|
||||
</div>
|
||||
<div class="text-left md:text-center">
|
||||
<div class="font-body-bold text-body-bold text-primary">In progress</div>
|
||||
<div class="font-technical text-technical text-primary mt-0.5">On site 22 Jul</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-10 flex md:flex-col items-center gap-md md:gap-sm text-center opacity-60">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-high border-2 border-line text-outline flex items-center justify-center">
|
||||
</div>
|
||||
<div class="text-left md:text-center">
|
||||
<div class="font-body-bold text-body-bold text-on-surface-variant">Completed</div>
|
||||
<div class="font-technical text-technical text-error mt-0.5 flex items-center justify-start md:justify-center gap-1">
|
||||
<span class="material-symbols-outlined text-[12px]">warning</span> Pending
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Required Evidence Card -->
|
||||
<section class="bg-surface-container-lowest border border-line rounded-lg overflow-hidden shadow-card">
|
||||
<div class="px-lg py-md border-b border-line bg-surface-bright flex justify-between items-center">
|
||||
<h2 class="font-subheading text-subheading text-on-surface flex items-center gap-sm">
|
||||
<span class="material-symbols-outlined text-primary">folder_open</span>
|
||||
Required Evidence
|
||||
</h2>
|
||||
<span class="bg-error-soft text-on-error-container font-technical text-technical px-2 py-1 rounded-full font-bold">2 Missing</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<!-- Item 1: Uploaded -->
|
||||
<div class="flex items-center justify-between p-md border-b border-line hover:bg-surface-low/50 transition-colors">
|
||||
<div class="flex items-center gap-md">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center text-primary border border-line">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-body-bold text-body-bold text-on-surface">Window certificate</div>
|
||||
<div class="font-technical text-technical text-primary-container flex items-center gap-1 mt-0.5">
|
||||
<span class="material-symbols-outlined text-[14px]">check_circle</span> Uploaded
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="font-body-bold text-body-bold text-primary hover:text-primary-dark hover:underline flex items-center gap-1 px-3 py-1.5">
|
||||
<span class="material-symbols-outlined text-[18px]">visibility</span> View
|
||||
</button>
|
||||
</div>
|
||||
<!-- Item 2: Uploaded -->
|
||||
<div class="flex items-center justify-between p-md border-b border-line hover:bg-surface-low/50 transition-colors">
|
||||
<div class="flex items-center gap-md">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center text-primary border border-line">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-body-bold text-body-bold text-on-surface">Guarantee</div>
|
||||
<div class="font-technical text-technical text-primary-container flex items-center gap-1 mt-0.5">
|
||||
<span class="material-symbols-outlined text-[14px]">check_circle</span> Uploaded
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="font-body-bold text-body-bold text-primary hover:text-primary-dark hover:underline flex items-center gap-1 px-3 py-1.5">
|
||||
<span class="material-symbols-outlined text-[18px]">visibility</span> View
|
||||
</button>
|
||||
</div>
|
||||
<!-- Item 3: Missing -->
|
||||
<div class="flex items-center justify-between p-md border-b border-line bg-error-soft/30 hover:bg-error-soft/50 transition-colors">
|
||||
<div class="flex items-center gap-md">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-container-lowest border border-error text-error flex items-center justify-center shadow-sm">
|
||||
<span class="material-symbols-outlined">error</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-body-bold text-body-bold text-on-surface">Building control evidence</div>
|
||||
<div class="font-technical text-technical text-error flex items-center gap-1 mt-0.5">
|
||||
Required for completion
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-surface-container-lowest border border-line hover:border-primary text-primary font-body-bold text-body-bold px-4 py-2 rounded-lg flex items-center gap-2 shadow-sm transition-all hover:shadow-md">
|
||||
<span class="material-symbols-outlined text-[18px]">upload</span> Upload
|
||||
</button>
|
||||
</div>
|
||||
<!-- Item 4: Missing -->
|
||||
<div class="flex items-center justify-between p-md bg-error-soft/30 hover:bg-error-soft/50 transition-colors">
|
||||
<div class="flex items-center gap-md">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-container-lowest border border-error text-error flex items-center justify-center shadow-sm">
|
||||
<span class="material-symbols-outlined">error</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-body-bold text-body-bold text-on-surface">Handover pack</div>
|
||||
<div class="font-technical text-technical text-error flex items-center gap-1 mt-0.5">
|
||||
Required for completion
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-surface-container-lowest border border-line hover:border-primary text-primary font-body-bold text-body-bold px-4 py-2 rounded-lg flex items-center gap-2 shadow-sm transition-all hover:shadow-md">
|
||||
<span class="material-symbols-outlined text-[18px]">upload</span> Upload
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Right Column: Sidebar Actions & Activity -->
|
||||
<div class="col-span-1 md:col-span-4 flex flex-col gap-lg">
|
||||
<!-- Actions Card -->
|
||||
<div class="bg-surface-container-lowest border border-line rounded-lg p-lg shadow-card sticky top-[88px]">
|
||||
<div class="flex items-center justify-between mb-md">
|
||||
<h2 class="font-subheading text-subheading text-on-surface">Actions</h2>
|
||||
<button class="text-outline hover:text-primary transition-colors p-1 rounded hover:bg-surface-low">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-surface-low border border-line rounded-lg p-md mb-md flex flex-col gap-sm">
|
||||
<div class="font-overline text-overline text-outline uppercase tracking-wide">Current Status</div>
|
||||
<div class="font-body-bold text-body-bold text-on-surface flex items-center gap-2">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-tertiary-container"></div>
|
||||
In Progress
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-sm">
|
||||
<button class="w-full bg-surface-high text-outline font-body-bold text-body-bold py-3 rounded-lg flex items-center justify-center gap-2 cursor-not-allowed opacity-70" disabled="">
|
||||
<span class="material-symbols-outlined text-[18px]">task_alt</span> Mark completed
|
||||
</button>
|
||||
<p class="font-technical text-technical text-on-surface-variant leading-relaxed">
|
||||
<span class="material-symbols-outlined text-[14px] text-error inline-block align-middle mr-1">info</span>
|
||||
All required evidence must be provided before marking this work order as completed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity Log Card -->
|
||||
<div class="bg-surface-container-lowest border border-line rounded-lg p-lg shadow-card">
|
||||
<h2 class="font-subheading text-subheading text-on-surface mb-md">Activity Log</h2>
|
||||
<div class="relative pl-4 border-l-2 border-line flex flex-col gap-md">
|
||||
<!-- Log Item 1 -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[23px] top-1 w-2.5 h-2.5 rounded-full bg-outline border-2 border-surface-container-lowest ring-2 ring-line"></div>
|
||||
<div class="font-body text-body text-on-surface">Contractor A marked status as <span class="font-body-bold">On site</span></div>
|
||||
<div class="font-technical text-technical text-outline mt-1">22 Jul 08:30 AM</div>
|
||||
</div>
|
||||
<!-- Log Item 2 -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[23px] top-1 w-2.5 h-2.5 rounded-full bg-outline border-2 border-surface-container-lowest ring-2 ring-line"></div>
|
||||
<div class="font-body text-body text-on-surface">Appointment booked for <span class="font-body-bold">15 Jul</span></div>
|
||||
<div class="font-technical text-technical text-outline mt-1">10 Jul 14:15 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full mt-md py-2 text-primary font-body-bold text-body-bold hover:bg-surface-low rounded-lg transition-colors">
|
||||
View all activity
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,300 @@
|
|||
<!DOCTYPE html><html class="light" lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>7. Upload Evidence (Contractor View)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — 7. Upload Evidence (Contractor View)
|
||||
Journey 2 — Contractor · screen 7 of 9
|
||||
Stitch project 8537473387290162501 · screen 37aa047af7bd4f48b0842cbacf11d37f
|
||||
Original HTML <title>: Ara Projects - Upload Evidence
|
||||
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-primary": "#ffffff",
|
||||
"error-soft": "#fdecea",
|
||||
"surface-container-highest": "#d8e3f8",
|
||||
"tertiary-fixed-dim": "#9acbff",
|
||||
"secondary-fixed-dim": "#e7c08b",
|
||||
"outline": "#767682",
|
||||
"canvas": "#eef4fc",
|
||||
"on-tertiary-fixed-variant": "#004a79",
|
||||
"on-tertiary-container": "#50aaf9",
|
||||
"on-background": "#111c2b",
|
||||
"on-secondary-fixed-variant": "#5d4218",
|
||||
"surface-container-low": "#eff4ff",
|
||||
"tertiary": "#002743",
|
||||
"accent-soft": "#e4f1fc",
|
||||
"on-primary-fixed-variant": "#364087",
|
||||
"secondary-container": "#ffd6a0",
|
||||
"primary-dark": "#222a63",
|
||||
"on-surface-variant": "#454650",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-container": "#795c2f",
|
||||
"primary-fixed-dim": "#bcc2ff",
|
||||
"secondary-fixed": "#ffddb2",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-fixed": "#d0e4ff",
|
||||
"tertiary-container": "#003d66",
|
||||
"inverse-on-surface": "#ebf1ff",
|
||||
"primary": "#111c64",
|
||||
"on-tertiary-fixed": "#001d34",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-primary": "#bcc2ff",
|
||||
"on-secondary-fixed": "#291800",
|
||||
"line": "#d2ddec",
|
||||
"on-primary-fixed": "#04105a",
|
||||
"surface-dim": "#cfdbef",
|
||||
"on-surface": "#111c2b",
|
||||
"primary-fixed": "#dfe0ff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#dee9fe",
|
||||
"surface-bright": "#f8f9ff",
|
||||
"surface-low": "#e3edf9",
|
||||
"surface": "#f8f9ff",
|
||||
"on-tan": "#3d2f16",
|
||||
"ink": "#111111",
|
||||
"inverse-surface": "#263141",
|
||||
"background": "#f8f9ff",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#2a347a",
|
||||
"surface-high": "#d9e5f4",
|
||||
"secondary": "#77592d",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-tint": "#4f58a0",
|
||||
"tan-soft": "#f4ebdc",
|
||||
"on-primary-container": "#96a0ed",
|
||||
"surface-container": "#e6eeff",
|
||||
"error": "#b3261e",
|
||||
"surface-variant": "#d8e3f8",
|
||||
"outline-variant": "#c6c5d2"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"md": "16px",
|
||||
"xs": "4px",
|
||||
"lg": "24px",
|
||||
"sidebar-width": "256px",
|
||||
"header-height": "64px",
|
||||
"xl": "40px",
|
||||
"sm": "8px",
|
||||
"max-width": "1440px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display": [
|
||||
"Montserrat"
|
||||
],
|
||||
"h1": [
|
||||
"Montserrat"
|
||||
],
|
||||
"body-bold": [
|
||||
"Montserrat"
|
||||
],
|
||||
"h3": [
|
||||
"Montserrat"
|
||||
],
|
||||
"body": [
|
||||
"Montserrat"
|
||||
],
|
||||
"h2": [
|
||||
"Montserrat"
|
||||
],
|
||||
"subheading": [
|
||||
"Montserrat"
|
||||
],
|
||||
"overline": [
|
||||
"Questrial"
|
||||
],
|
||||
"technical": [
|
||||
"Questrial"
|
||||
],
|
||||
"display-mobile": [
|
||||
"Montserrat"
|
||||
]
|
||||
},
|
||||
"fontSize": {
|
||||
"display": [
|
||||
"36px",
|
||||
{
|
||||
"lineHeight": "1.1",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"h1": [
|
||||
"30px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"body-bold": [
|
||||
"14px",
|
||||
{
|
||||
"lineHeight": "1.25",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
],
|
||||
"h3": [
|
||||
"20px",
|
||||
{
|
||||
"lineHeight": "1.4",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"body": [
|
||||
"14px",
|
||||
{
|
||||
"lineHeight": "1.25",
|
||||
"fontWeight": "500"
|
||||
}
|
||||
],
|
||||
"h2": [
|
||||
"24px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"subheading": [
|
||||
"18px",
|
||||
{
|
||||
"lineHeight": "1.4",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"overline": [
|
||||
"11px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"letterSpacing": "0.05em",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"technical": [
|
||||
"12px",
|
||||
{
|
||||
"lineHeight": "1.4",
|
||||
"fontWeight": "400"
|
||||
}
|
||||
],
|
||||
"display-mobile": [
|
||||
"32px",
|
||||
{
|
||||
"lineHeight": "1.1",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-canvas text-on-background font-body min-h-screen flex">
|
||||
<!-- Side Nav Bar -->
|
||||
<nav class="hidden md:flex bg-surface w-sidebar-width h-screen fixed left-0 top-0 flex-col p-md gap-sm z-40 border-r border-line"><div class="flex items-center gap-sm mb-lg px-sm pt-sm"><div class="w-8 h-8 bg-primary rounded-DEFAULT flex items-center justify-center text-on-primary font-display text-h3">D</div><div><h1 class="font-h1 text-h1 text-primary truncate text-lg">Stonewater</h1><span class="bg-secondary-container text-on-secondary-container font-overline text-overline px-sm py-xs rounded-full uppercase">Contractor A</span></div></div><div class="flex-1 flex flex-col gap-xs overflow-y-auto"><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">dashboard</span><span class="font-body text-body">Dashboard</span></a><a class="flex items-center gap-sm p-sm bg-primary-container text-on-primary-container rounded-lg transition-all" href="#"><span class="material-symbols-outlined text-[20px]">handyman</span><span class="font-body text-body font-bold">Work orders</span></a><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">description</span><span class="font-body text-body">Documents</span></a></div><div class="mt-auto border-t border-line pt-sm flex flex-col gap-xs"><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">help</span><span class="font-body text-body">Help</span></a><a class="flex items-center gap-sm p-sm text-on-surface-variant hover:bg-surface-low rounded-lg hover:text-primary transition-all" href="#"><span class="material-symbols-outlined text-[20px]">settings</span><span class="font-body text-body">Settings</span></a></div></nav>
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex-1 flex flex-col md:ml-sidebar-width min-h-screen bg-canvas">
|
||||
<!-- Top Nav Bar (Mobile only for links, Desktop for title/actions) -->
|
||||
<header class="bg-surface-container-lowest h-header-height w-full sticky top-0 z-50 border-b border-line flex justify-between items-center px-lg"><div class="flex items-center gap-md"><span class="font-h3 text-h3 text-on-surface">WO-23881</span><span class="px-2 py-1 bg-accent-soft text-primary rounded-full font-overline text-overline uppercase tracking-wider">Sample data</span></div><div class="flex items-center gap-md"><span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors">notifications</span><div class="w-8 h-8 rounded-full bg-surface-high overflow-hidden border border-line"><img alt="User profile" class="w-full h-full object-cover" src="../assets/img/img15.png"></div></div></header>
|
||||
<!-- Main Canvas -->
|
||||
<main class="flex-1 p-lg md:p-xl max-w-max-width mx-auto w-full flex flex-col gap-lg">
|
||||
<!-- Breadcrumb & Header -->
|
||||
<div class="flex flex-col gap-xs">
|
||||
<div class="flex items-center gap-xs font-technical text-technical text-on-surface-variant">
|
||||
<a class="hover:text-primary transition-colors" href="#">Work orders</a>
|
||||
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
||||
<a class="hover:text-primary transition-colors" href="#">WO-23881</a>
|
||||
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
||||
<span class="text-on-surface font-semibold">Upload Evidence</span>
|
||||
</div>
|
||||
<h2 class="font-display text-display text-primary mt-sm">Upload Evidence</h2>
|
||||
<p class="font-body text-body text-on-surface-variant">Provide necessary documentation for work order completion.</p>
|
||||
</div>
|
||||
<!-- Content Layout -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-lg">
|
||||
<!-- Left Column: Upload Area -->
|
||||
<div class="lg:col-span-2 flex flex-col gap-lg">
|
||||
<!-- Required Documents Summary -->
|
||||
<div class="bg-surface-container-lowest p-lg rounded-lg shadow-card border border-line">
|
||||
<div class="flex justify-between items-center mb-md">
|
||||
<h3 class="font-subheading text-subheading text-on-surface">Evidence Requirements</h3>
|
||||
<span class="font-technical text-technical text-on-surface-variant">Evidence 3 of 4</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-sm"><div class="flex items-center justify-between p-sm rounded bg-surface-low border border-line"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span><span class="font-body text-body text-on-surface">Window certificate</span></div><span class="font-technical text-technical text-on-surface-variant">Uploaded</span></div><div class="flex items-center justify-between p-sm rounded bg-surface-low border border-line"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span><span class="font-body text-body text-on-surface">Guarantee</span></div><span class="font-technical text-technical text-on-surface-variant">Uploaded</span></div><div class="flex items-center justify-between p-sm rounded bg-surface-low border border-line"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span><span class="font-body text-body text-on-surface">Building control evidence</span></div><span class="font-technical text-technical text-on-surface-variant">Uploaded</span></div><div class="flex items-center justify-between p-sm rounded border border-line border-dashed"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-on-surface-variant">radio_button_unchecked</span><span class="font-body text-body text-on-surface-variant">Handover pack</span></div><span class="font-technical text-technical text-error">Missing</span></div></div>
|
||||
</div>
|
||||
<!-- Upload Zone -->
|
||||
<div class="bg-surface-container-lowest p-lg rounded-lg shadow-card border border-line flex flex-col gap-md">
|
||||
<h3 class="font-subheading text-subheading text-on-surface">Upload 'Handover pack'</h3>
|
||||
<!-- Mid-upload State (Simulated) -->
|
||||
<div class="border-2 border-dashed border-primary-fixed-dim rounded-lg p-xl flex flex-col items-center justify-center bg-surface-container-low transition-colors hover:bg-surface-high relative overflow-hidden group cursor-pointer">
|
||||
<div class="absolute inset-0 bg-primary opacity-5 animate-pulse"></div>
|
||||
<span class="material-symbols-outlined text-4xl text-primary mb-sm">cloud_upload</span>
|
||||
<p class="font-body-bold text-body-bold text-primary mb-xs">Drag and drop file here</p>
|
||||
<p class="font-technical text-technical text-on-surface-variant">or click to browse</p>
|
||||
<p class="font-overline text-overline text-on-surface-variant mt-sm mt-md uppercase tracking-wide">Supported: PDF, JPG, PNG (Max 20MB)</p>
|
||||
</div>
|
||||
<!-- Uploaded File Item -->
|
||||
<div class="mt-md flex flex-col gap-sm"><div class="flex items-center justify-between p-sm rounded bg-surface-low border border-line"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span><span class="font-body text-body text-on-surface">Window certificate</span></div><span class="font-technical text-technical text-on-surface-variant">Uploaded</span></div><div class="flex items-center justify-between p-sm rounded bg-surface-low border border-line"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span><span class="font-body text-body text-on-surface">Guarantee</span></div><span class="font-technical text-technical text-on-surface-variant">Uploaded</span></div><div class="flex items-center justify-between p-sm rounded bg-surface-low border border-line"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span><span class="font-body text-body text-on-surface">Building control evidence</span></div><span class="font-technical text-technical text-on-surface-variant">Uploaded</span></div><div class="flex items-center justify-between p-sm rounded border border-line border-dashed"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-on-surface-variant">radio_button_unchecked</span><span class="font-body text-body text-on-surface-variant">Handover pack</span></div><span class="font-technical text-technical text-error">Missing</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Status & Actions -->
|
||||
<div class="flex flex-col gap-lg">
|
||||
<!-- Action Card -->
|
||||
<div class="bg-surface-container-lowest p-lg rounded-lg shadow-card border border-line sticky top-[88px]">
|
||||
<h3 class="font-subheading text-subheading text-on-surface mb-md">Completion Status</h3>
|
||||
<div class="bg-error-soft p-sm rounded border border-error-container mb-lg flex items-start gap-sm">
|
||||
<span class="material-symbols-outlined text-error text-lg mt-0.5">error</span>
|
||||
<div>
|
||||
<p class="font-body-bold text-body-bold text-on-error-container">Cannot mark as completed</p>
|
||||
<p class="font-technical text-technical text-on-error-container mt-xs">1 required document missing: Handover pack</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full py-md px-lg bg-surface-dim text-on-surface-variant rounded font-body-bold text-body-bold flex justify-center items-center gap-sm cursor-not-allowed opacity-70" disabled="">
|
||||
<span class="material-symbols-outlined">task_alt</span>
|
||||
Mark completed
|
||||
</button>
|
||||
<p class="font-technical text-technical text-on-surface-variant text-center mt-sm">
|
||||
All required evidence must be uploaded before completion.
|
||||
</p>
|
||||
<div class="mt-lg pt-md border-t border-line">
|
||||
<button class="w-full py-sm px-md border border-line text-on-surface bg-surface-lowest hover:bg-surface-low rounded font-body text-body transition-colors text-center">
|
||||
Save draft & exit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Work Order Summary Snippet -->
|
||||
<div class="bg-surface-container-lowest p-md rounded-lg shadow-card border border-line">
|
||||
<h4 class="font-overline text-overline text-on-surface-variant uppercase tracking-wider mb-sm">WO Details</h4>
|
||||
<div class="flex flex-col gap-xs">
|
||||
<div class="flex justify-between">
|
||||
<span class="font-technical text-technical text-on-surface-variant">Reference</span>
|
||||
<span class="font-body text-body text-on-surface">WO-23881</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="font-technical text-technical text-on-surface-variant">Type</span>
|
||||
<span class="font-body text-body text-on-surface">Window Replacement</span>
|
||||
</div>
|
||||
<div class="flex justify-between mt-xs pt-xs border-t border-line">
|
||||
<span class="font-technical text-technical text-on-surface-variant">Property</span>
|
||||
<span class="font-body text-body text-primary truncate max-w-[150px] text-right">12 High St</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,301 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>8. Completion Cleared (Refined)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — 8. Completion Cleared (Refined)
|
||||
Journey 2 — Contractor · screen 8 of 9
|
||||
Stitch project 8537473387290162501 · screen ed9c95fecd8242be84545c3c3ec4199b
|
||||
Original HTML <title>: Work Order Completion - 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-primary": "#ffffff",
|
||||
"error-soft": "#fdecea",
|
||||
"surface-container-highest": "#d8e3f8",
|
||||
"tertiary-fixed-dim": "#9acbff",
|
||||
"secondary-fixed-dim": "#e7c08b",
|
||||
"outline": "#767682",
|
||||
"canvas": "#eef4fc",
|
||||
"on-tertiary-fixed-variant": "#004a79",
|
||||
"on-tertiary-container": "#50aaf9",
|
||||
"on-background": "#111c2b",
|
||||
"on-secondary-fixed-variant": "#5d4218",
|
||||
"surface-container-low": "#eff4ff",
|
||||
"tertiary": "#002743",
|
||||
"accent-soft": "#e4f1fc",
|
||||
"on-primary-fixed-variant": "#364087",
|
||||
"secondary-container": "#ffd6a0",
|
||||
"primary-dark": "#222a63",
|
||||
"on-surface-variant": "#454650",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-container": "#795c2f",
|
||||
"primary-fixed-dim": "#bcc2ff",
|
||||
"secondary-fixed": "#ffddb2",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-fixed": "#d0e4ff",
|
||||
"tertiary-container": "#003d66",
|
||||
"inverse-on-surface": "#ebf1ff",
|
||||
"primary": "#111c64",
|
||||
"on-tertiary-fixed": "#001d34",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-primary": "#bcc2ff",
|
||||
"on-secondary-fixed": "#291800",
|
||||
"line": "#d2ddec",
|
||||
"on-primary-fixed": "#04105a",
|
||||
"surface-dim": "#cfdbef",
|
||||
"on-surface": "#111c2b",
|
||||
"primary-fixed": "#dfe0ff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#dee9fe",
|
||||
"surface-bright": "#f8f9ff",
|
||||
"surface-low": "#e3edf9",
|
||||
"surface": "#f8f9ff",
|
||||
"on-tan": "#3d2f16",
|
||||
"ink": "#111111",
|
||||
"inverse-surface": "#263141",
|
||||
"background": "#f8f9ff",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#2a347a",
|
||||
"surface-high": "#d9e5f4",
|
||||
"secondary": "#77592d",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-tint": "#4f58a0",
|
||||
"tan-soft": "#f4ebdc",
|
||||
"on-primary-container": "#96a0ed",
|
||||
"surface-container": "#e6eeff",
|
||||
"error": "#b3261e",
|
||||
"surface-variant": "#d8e3f8",
|
||||
"outline-variant": "#c6c5d2"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"md": "16px",
|
||||
"xs": "4px",
|
||||
"lg": "24px",
|
||||
"sidebar-width": "256px",
|
||||
"header-height": "64px",
|
||||
"xl": "40px",
|
||||
"sm": "8px",
|
||||
"max-width": "1440px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display": [
|
||||
"Montserrat"
|
||||
],
|
||||
"h1": [
|
||||
"Montserrat"
|
||||
],
|
||||
"body-bold": [
|
||||
"Montserrat"
|
||||
],
|
||||
"h3": [
|
||||
"Montserrat"
|
||||
],
|
||||
"body": [
|
||||
"Montserrat"
|
||||
],
|
||||
"h2": [
|
||||
"Montserrat"
|
||||
],
|
||||
"subheading": [
|
||||
"Montserrat"
|
||||
],
|
||||
"overline": [
|
||||
"Questrial"
|
||||
],
|
||||
"technical": [
|
||||
"Questrial"
|
||||
],
|
||||
"display-mobile": [
|
||||
"Montserrat"
|
||||
]
|
||||
},
|
||||
"fontSize": {
|
||||
"display": [
|
||||
"36px",
|
||||
{
|
||||
"lineHeight": "1.1",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"h1": [
|
||||
"30px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"body-bold": [
|
||||
"14px",
|
||||
{
|
||||
"lineHeight": "1.25",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
],
|
||||
"h3": [
|
||||
"20px",
|
||||
{
|
||||
"lineHeight": "1.4",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"body": [
|
||||
"14px",
|
||||
{
|
||||
"lineHeight": "1.25",
|
||||
"fontWeight": "500"
|
||||
}
|
||||
],
|
||||
"h2": [
|
||||
"24px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"subheading": [
|
||||
"18px",
|
||||
{
|
||||
"lineHeight": "1.4",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"overline": [
|
||||
"11px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"letterSpacing": "0.05em",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"technical": [
|
||||
"12px",
|
||||
{
|
||||
"lineHeight": "1.4",
|
||||
"fontWeight": "400"
|
||||
}
|
||||
],
|
||||
"display-mobile": [
|
||||
"32px",
|
||||
{
|
||||
"lineHeight": "1.1",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { background-color: #eef4fc; } /* canvas */
|
||||
.shadow-card { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body text-body text-on-surface antialiased">
|
||||
<!-- TopNavBar -->
|
||||
<header class="bg-surface-container-lowest h-header-height w-full sticky top-0 z-50 border-b border-line shadow-card hidden md:block">
|
||||
<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">Ara Projects</div>
|
||||
<nav class="flex gap-md h-full items-end pb-xs"><a class="text-on-surface-variant font-body hover:text-primary transition-colors duration-200 cursor-pointer active:opacity-80" href="#">Dashboard</a><a class="text-primary border-b-2 border-primary pb-1 font-body-bold hover:text-primary transition-colors duration-200 cursor-pointer active:opacity-80" href="#">Work orders</a><a class="text-on-surface-variant font-body hover:text-primary transition-colors duration-200 cursor-pointer active:opacity-80" href="#">Documents</a></nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-md">
|
||||
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary">notifications</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary">settings</span>
|
||||
<img alt="User profile" class="w-8 h-8 rounded-full bg-surface-low border border-line object-cover" data-alt="A small circular avatar showing a professional portrait of a person against a neutral background. The lighting is studio quality, and the style fits a clean, modern digital interface." src="../assets/img/img19.png">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex max-w-max-width mx-auto">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="bg-surface w-sidebar-width h-[calc(100vh-64px)] sticky top-[64px] hidden lg:flex flex-col p-md gap-sm border-r border-line">
|
||||
<div class="mb-lg px-sm">
|
||||
<div class="font-subheading text-subheading text-on-surface">Contractor A</div>
|
||||
<div class="font-body text-body text-on-surface-variant">Workspace Switcher</div>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col gap-xs"><a class="flex items-center gap-sm px-sm py-sm text-on-surface-variant hover:bg-surface-low rounded-lg transition-all scale-95 active:scale-90 font-body text-body" href="#"><span class="material-symbols-outlined">dashboard</span>Dashboard</a><a class="flex items-center gap-sm px-sm py-sm bg-primary-container text-on-primary-container rounded-lg transition-all scale-95 active:scale-90 font-body text-body" href="#"><span class="material-symbols-outlined">handyman</span>Work orders</a><a class="flex items-center gap-sm px-sm py-sm text-on-surface-variant hover:bg-surface-low rounded-lg transition-all scale-95 active:scale-90 font-body text-body" href="#"><span class="material-symbols-outlined">description</span>Documents</a></nav>
|
||||
<div class="mt-auto flex flex-col gap-xs border-t border-line pt-md">
|
||||
<a class="flex items-center gap-sm px-sm py-sm text-on-surface-variant hover:bg-surface-low rounded-lg transition-all scale-95 active:scale-90 font-body text-body" href="#">
|
||||
<span class="material-symbols-outlined">help</span>Help
|
||||
</a>
|
||||
<a class="flex items-center gap-sm px-sm py-sm text-on-surface-variant hover:bg-surface-low rounded-lg transition-all scale-95 active:scale-90 font-body text-body" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>Settings
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 p-lg md:p-xl w-full">
|
||||
<div class="flex justify-between items-start mb-lg">
|
||||
<div>
|
||||
<div class="flex items-center gap-sm mb-xs">
|
||||
<span class="font-technical text-technical text-on-surface-variant uppercase tracking-wider">Work Order</span>
|
||||
</div>
|
||||
<h1 class="font-h1 text-h1 text-on-surface">WO-23881</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 xl:grid-cols-3 gap-lg">
|
||||
<!-- Main Canvas Area -->
|
||||
<div class="xl:col-span-2 flex flex-col gap-lg">
|
||||
<!-- Completion Status Card -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-lg">
|
||||
<div class="flex items-center justify-between mb-md pb-md border-b border-line">
|
||||
<h2 class="font-h3 text-h3 text-on-surface flex items-center gap-sm">
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
Completion Requirements
|
||||
</h2>
|
||||
<span class="font-body-bold text-body-bold text-primary">4 of 4 uploaded</span>
|
||||
</div>
|
||||
<!-- Success Banner -->
|
||||
<div class="bg-accent-soft border border-surface-tint rounded-lg p-md mb-lg flex items-start gap-md">
|
||||
<span class="material-symbols-outlined text-surface-tint" style="font-variation-settings: 'FILL' 1;">info</span>
|
||||
<div>
|
||||
<p class="font-body-bold text-body-bold text-on-surface mb-xs">All required evidence uploaded.</p>
|
||||
<p class="font-body text-body text-on-surface-variant">The handover pack has been successfully processed and verified. You can now mark this work order as completed.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Evidence List (Bento-ish) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-md">
|
||||
<div class="bg-surface-low rounded-lg p-md border border-line flex items-center justify-between"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-on-surface-variant">verified</span><span class="font-body text-body text-on-surface">Window certificate</span></div><span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span></div>
|
||||
<div class="bg-surface-low rounded-lg p-md border border-line flex items-center justify-between"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-on-surface-variant">security</span><span class="font-body text-body text-on-surface">Guarantee</span></div><span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span></div>
|
||||
<div class="bg-surface-low rounded-lg p-md border border-line flex items-center justify-between"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-on-surface-variant">gavel</span><span class="font-body text-body text-on-surface">Building control evidence</span></div><span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span></div>
|
||||
<div class="bg-surface rounded-lg p-md border-2 border-primary flex items-center justify-between">
|
||||
<div class="flex items-center gap-sm">
|
||||
<span class="material-symbols-outlined text-primary">picture_as_pdf</span>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-body-bold text-body-bold text-on-surface">Handover pack</span>
|
||||
<span class="font-technical text-technical text-on-surface-variant">100245_WO-23881_Windows_HandoverPack.pdf</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-lg pt-lg border-t border-line flex justify-end">
|
||||
<button class="bg-primary text-on-primary font-body-bold text-body-bold py-sm px-lg rounded-lg shadow-sm hover:opacity-90 transition-opacity">
|
||||
Mark completed
|
||||
</button><p class="text-technical text-on-surface-variant mt-sm text-right">Marking completed notifies Stonewater and records the completion time.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Sidebar details -->
|
||||
<div class="xl:col-span-1 flex flex-col gap-lg">
|
||||
<!-- Contractor Details Card -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,398 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>9. Marked Completed (Refined)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — 9. Marked Completed (Refined)
|
||||
Journey 2 — Contractor · screen 9 of 9
|
||||
Stitch project 8537473387290162501 · screen 4c0a6ac69ee144bcbc2fa41fa05d6b8d
|
||||
Original HTML <title>: Ara Projects - Completed Work Order
|
||||
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-primary": "#ffffff",
|
||||
"error-soft": "#fdecea",
|
||||
"surface-container-highest": "#d8e3f8",
|
||||
"tertiary-fixed-dim": "#9acbff",
|
||||
"secondary-fixed-dim": "#e7c08b",
|
||||
"outline": "#767682",
|
||||
"canvas": "#eef4fc",
|
||||
"on-tertiary-fixed-variant": "#004a79",
|
||||
"on-tertiary-container": "#50aaf9",
|
||||
"on-background": "#111c2b",
|
||||
"on-secondary-fixed-variant": "#5d4218",
|
||||
"surface-container-low": "#eff4ff",
|
||||
"tertiary": "#002743",
|
||||
"accent-soft": "#e4f1fc",
|
||||
"on-primary-fixed-variant": "#364087",
|
||||
"secondary-container": "#ffd6a0",
|
||||
"primary-dark": "#222a63",
|
||||
"on-surface-variant": "#454650",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-container": "#795c2f",
|
||||
"primary-fixed-dim": "#bcc2ff",
|
||||
"secondary-fixed": "#ffddb2",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-fixed": "#d0e4ff",
|
||||
"tertiary-container": "#003d66",
|
||||
"inverse-on-surface": "#ebf1ff",
|
||||
"primary": "#111c64",
|
||||
"on-tertiary-fixed": "#001d34",
|
||||
"on-secondary": "#ffffff",
|
||||
"inverse-primary": "#bcc2ff",
|
||||
"on-secondary-fixed": "#291800",
|
||||
"line": "#d2ddec",
|
||||
"on-primary-fixed": "#04105a",
|
||||
"surface-dim": "#cfdbef",
|
||||
"on-surface": "#111c2b",
|
||||
"primary-fixed": "#dfe0ff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#dee9fe",
|
||||
"surface-bright": "#f8f9ff",
|
||||
"surface-low": "#e3edf9",
|
||||
"surface": "#f8f9ff",
|
||||
"on-tan": "#3d2f16",
|
||||
"ink": "#111111",
|
||||
"inverse-surface": "#263141",
|
||||
"background": "#f8f9ff",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#2a347a",
|
||||
"surface-high": "#d9e5f4",
|
||||
"secondary": "#77592d",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-tint": "#4f58a0",
|
||||
"tan-soft": "#f4ebdc",
|
||||
"on-primary-container": "#96a0ed",
|
||||
"surface-container": "#e6eeff",
|
||||
"error": "#b3261e",
|
||||
"surface-variant": "#d8e3f8",
|
||||
"outline-variant": "#c6c5d2"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"md": "16px",
|
||||
"xs": "4px",
|
||||
"lg": "24px",
|
||||
"sidebar-width": "256px",
|
||||
"header-height": "64px",
|
||||
"xl": "40px",
|
||||
"sm": "8px",
|
||||
"max-width": "1440px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display": [
|
||||
"Montserrat"
|
||||
],
|
||||
"h1": [
|
||||
"Montserrat"
|
||||
],
|
||||
"body-bold": [
|
||||
"Montserrat"
|
||||
],
|
||||
"h3": [
|
||||
"Montserrat"
|
||||
],
|
||||
"body": [
|
||||
"Montserrat"
|
||||
],
|
||||
"h2": [
|
||||
"Montserrat"
|
||||
],
|
||||
"subheading": [
|
||||
"Montserrat"
|
||||
],
|
||||
"overline": [
|
||||
"Questrial"
|
||||
],
|
||||
"technical": [
|
||||
"Questrial"
|
||||
],
|
||||
"display-mobile": [
|
||||
"Montserrat"
|
||||
]
|
||||
},
|
||||
"fontSize": {
|
||||
"display": [
|
||||
"36px",
|
||||
{
|
||||
"lineHeight": "1.1",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"h1": [
|
||||
"30px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"body-bold": [
|
||||
"14px",
|
||||
{
|
||||
"lineHeight": "1.25",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
],
|
||||
"h3": [
|
||||
"20px",
|
||||
{
|
||||
"lineHeight": "1.4",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"body": [
|
||||
"14px",
|
||||
{
|
||||
"lineHeight": "1.25",
|
||||
"fontWeight": "500"
|
||||
}
|
||||
],
|
||||
"h2": [
|
||||
"24px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"subheading": [
|
||||
"18px",
|
||||
{
|
||||
"lineHeight": "1.4",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"overline": [
|
||||
"11px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"letterSpacing": "0.05em",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"technical": [
|
||||
"12px",
|
||||
{
|
||||
"lineHeight": "1.4",
|
||||
"fontWeight": "400"
|
||||
}
|
||||
],
|
||||
"display-mobile": [
|
||||
"32px",
|
||||
{
|
||||
"lineHeight": "1.1",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { background-color: #eef4fc; } /* canvas */
|
||||
.stage-ladder-line {
|
||||
width: 2px;
|
||||
background-color: #d2ddec; /* line */
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 24px;
|
||||
bottom: -8px;
|
||||
z-index: 0;
|
||||
}
|
||||
.stage-ladder-node {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
background-color: #ffffff; /* surface-container-lowest */
|
||||
border: 2px solid #d2ddec; /* line */
|
||||
}
|
||||
.stage-ladder-node.completed {
|
||||
background-color: #111c64; /* primary */
|
||||
border-color: #111c64; /* primary */
|
||||
color: #ffffff;
|
||||
}
|
||||
.stage-ladder-item:last-child .stage-ladder-line {
|
||||
display: none;
|
||||
}
|
||||
/* Sample data banner */
|
||||
.sample-data-banner {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
background-color: #111c64; /* primary */
|
||||
color: #ffffff;
|
||||
padding: 8px 16px;
|
||||
border-radius: 9999px;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body text-body text-on-surface min-h-screen flex">
|
||||
<!-- SideNavBar -->
|
||||
<nav class="hidden md:flex flex-col p-md gap-sm bg-surface dark:bg-on-background text-primary dark:text-primary-fixed-dim font-body text-body w-sidebar-width h-screen fixed left-0 top-0 border-r border-line z-40"><div class="flex items-center gap-sm mb-lg px-sm"><div class="w-8 h-8 rounded bg-primary flex items-center justify-center text-on-primary font-h2 text-h2">A</div><div><h2 class="font-subheading text-subheading text-on-surface">Contractor A</h2><p class="font-technical text-technical text-on-surface-variant">Workspace</p></div></div><div class="flex-1 flex flex-col gap-xs overflow-y-auto"><a class="flex items-center gap-md px-sm py-2 text-on-surface-variant hover:bg-surface-low rounded-lg transition-all scale-95 active:scale-90" href="#"><span class="material-symbols-outlined">dashboard</span><span>Dashboard</span></a><a class="flex items-center gap-md px-sm py-2 bg-primary-container text-on-primary-container rounded-lg transition-all scale-95 active:scale-90" href="#"><span class="material-symbols-outlined">handyman</span><span class="font-body-bold">Work orders</span></a><a class="flex items-center gap-md px-sm py-2 text-on-surface-variant hover:bg-surface-low rounded-lg transition-all scale-95 active:scale-90" href="#"><span class="material-symbols-outlined">description</span><span>Documents</span></a></div></nav>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 md:ml-[256px] min-h-screen flex flex-col">
|
||||
<!-- TopNavBar (Mobile only for navigation, desktop for actions) -->
|
||||
<header class="bg-surface-container-lowest h-header-height w-full sticky top-0 z-30 shadow-card border-b border-line flex justify-between items-center px-lg">
|
||||
<div class="flex items-center gap-md md:hidden">
|
||||
<button class="text-on-surface-variant p-sm rounded-lg hover:bg-surface-low">
|
||||
<span class="material-symbols-outlined" data-icon="menu">menu</span>
|
||||
</button>
|
||||
<span class="font-h2 text-h2 text-primary">Ara Projects</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center flex-1">
|
||||
<div class="relative w-96 ml-md">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant" data-icon="search">search</span>
|
||||
<input class="w-full pl-10 pr-4 py-2 bg-surface-low border border-line rounded-lg focus:outline-none focus:border-accent-soft font-body text-body text-on-surface" placeholder="Search..." type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-md ml-auto">
|
||||
<button class="text-on-surface-variant p-sm rounded-lg hover:bg-surface-low cursor-pointer active:opacity-80 transition-colors duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="text-on-surface-variant p-sm rounded-lg hover:bg-surface-low cursor-pointer active:opacity-80 transition-colors duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
</button>
|
||||
<div class="w-8 h-8 rounded-full bg-primary-container overflow-hidden cursor-pointer">
|
||||
<img alt="User profile" class="w-full h-full object-cover" data-alt="A professional headshot of a user in a well-lit office environment, corporate modern style, subtle background blur, sharp focus on the face." src="../assets/img/img10.png">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Page Content -->
|
||||
<div class="p-lg md:p-xl max-w-max-width mx-auto w-full flex-1 flex flex-col gap-lg">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row md:items-start justify-between gap-md mb-md">
|
||||
<div>
|
||||
<div class="flex items-center gap-sm mb-xs"><span class="font-overline text-overline text-on-surface-variant uppercase tracking-wider">Work orders</span><span class="text-line">•</span><span class="text-line">•</span><span class="font-technical text-technical text-on-surface-variant">12 High St</span></div>
|
||||
<h1 class="font-h1 text-h1 text-on-surface mb-sm">WO-23881</h1>
|
||||
<div class="flex items-center gap-sm">
|
||||
<span class="px-3 py-1 rounded-full bg-surface-container-high text-primary-dark font-body-bold text-body-bold text-xs flex items-center gap-xs">
|
||||
<span class="material-symbols-outlined text-[16px]" data-icon="check_circle" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
Completed
|
||||
</span>
|
||||
<span class="font-technical text-technical text-on-surface-variant">Priority: Routine</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Layout Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-lg">
|
||||
<!-- Left Column (Details & Info) -->
|
||||
<div class="lg:col-span-2 flex flex-col gap-lg">
|
||||
<!-- Status Confirmation Card -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-md md:p-lg flex flex-col md:flex-row gap-md items-start md:items-center relative overflow-hidden">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary"></div>
|
||||
<div class="w-12 h-12 rounded-full bg-accent-soft flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-primary text-h2" data-icon="task_alt" data-weight="fill" style="font-variation-settings: 'FILL' 1;">task_alt</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-h3 text-h3 text-on-surface mb-xs">Work order completed</h3>
|
||||
<p class="font-body text-body text-on-surface-variant">
|
||||
Work order completed, 22 Jul. Stonewater has been notified.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Details Bento -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-md">
|
||||
<!-- Property Info -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-md"><h4 class="font-subheading text-subheading text-on-surface mb-md flex items-center gap-xs"><span class="material-symbols-outlined text-on-surface-variant">location_on</span>Location details</h4><div class="flex flex-col gap-sm"><div><span class="font-overline text-overline text-on-surface-variant block mb-1">Property</span><span class="font-body text-body text-on-surface">12 High St (asset 100245)</span></div></div></div>
|
||||
<!-- Job Description -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-md"><h4 class="font-subheading text-subheading text-on-surface mb-md flex items-center gap-xs"><span class="material-symbols-outlined text-on-surface-variant">build</span>Job details</h4><div class="flex flex-col gap-sm"><div><span class="font-overline text-overline text-on-surface-variant block mb-1">Category</span><span class="font-body text-body text-on-surface">Windows</span></div></div></div>
|
||||
</div>
|
||||
<!-- Photos/Docs -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-md"><div class="flex justify-between items-center mb-md"><h4 class="font-subheading text-subheading text-on-surface flex items-center gap-xs"><span class="material-symbols-outlined text-on-surface-variant">description</span>Completion evidence</h4></div><div class="flex flex-col gap-sm"><div class="flex items-center justify-between p-sm bg-surface-low rounded border border-line"><span class="font-body text-body">Window certificate</span><span class="material-symbols-outlined text-primary">check_circle</span></div><div class="flex items-center justify-between p-sm bg-surface-low rounded border border-line"><span class="font-body text-body">Guarantee</span><span class="material-symbols-outlined text-primary">check_circle</span></div><div class="flex items-center justify-between p-sm bg-surface-low rounded border border-line"><span class="font-body text-body">Building control evidence</span><span class="material-symbols-outlined text-primary">check_circle</span></div><div class="flex items-center justify-between p-sm bg-surface-low rounded border border-line"><span class="font-body text-body">Handover pack</span><span class="material-symbols-outlined text-primary">check_circle</span></div></div></div>
|
||||
</div>
|
||||
<!-- Right Column (Tracker & Activity) -->
|
||||
<div class="flex flex-col gap-lg">
|
||||
<!-- Stage Ladder Card -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-md">
|
||||
<h4 class="font-subheading text-subheading text-on-surface mb-lg flex items-center gap-xs">
|
||||
<span class="material-symbols-outlined text-on-surface-variant" data-icon="linear_scale">linear_scale</span>
|
||||
Progress Tracker
|
||||
</h4>
|
||||
<div class="flex flex-col relative pl-2">
|
||||
<!-- Stage 1 -->
|
||||
<div class="stage-ladder-item flex gap-md pb-md relative"><div class="stage-ladder-line"></div><div class="stage-ladder-node"><span class="material-symbols-outlined text-[14px]">radio_button_unchecked</span></div><div class="flex-1 pb-2"><h5 class="font-body-bold text-body-bold text-on-surface">Ordered</h5></div></div>
|
||||
<!-- Stage 2 -->
|
||||
<div class="stage-ladder-item flex gap-md pb-md relative">
|
||||
<div class="stage-ladder-line"></div>
|
||||
<div class="stage-ladder-node completed">
|
||||
<span class="material-symbols-outlined text-[14px]" data-icon="check" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||
</div>
|
||||
<div class="flex-1 pb-2">
|
||||
<h5 class="font-body-bold text-body-bold text-on-surface">Assigned</h5>
|
||||
<p class="font-technical text-technical text-on-surface-variant">02 Jul</p>
|
||||
<div class="mt-xs bg-surface-low p-xs rounded border border-line flex items-center gap-xs w-fit">
|
||||
<span class="w-5 h-5 rounded-full bg-primary text-on-primary flex items-center justify-center text-[10px] font-bold">JD</span>
|
||||
<span class="font-technical text-technical">John Davies (Plumber)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stage 3 -->
|
||||
<div class="stage-ladder-item flex gap-md pb-md relative">
|
||||
<div class="stage-ladder-line"></div>
|
||||
<div class="stage-ladder-node completed">
|
||||
<span class="material-symbols-outlined text-[14px]" data-icon="check" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||
</div>
|
||||
<div class="flex-1 pb-2">
|
||||
<h5 class="font-body-bold text-body-bold text-on-surface">In Progress</h5>
|
||||
<p class="font-technical text-technical text-on-surface-variant">22 Jul (on site)</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stage 4 (Completed) -->
|
||||
<div class="stage-ladder-item flex gap-md relative">
|
||||
<div class="stage-ladder-line"></div>
|
||||
<div class="stage-ladder-node completed">
|
||||
<span class="material-symbols-outlined text-[14px]" data-icon="flag" data-weight="fill" style="font-variation-settings: 'FILL' 1;">flag</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h5 class="font-body-bold text-body-bold text-primary">Completed</h5>
|
||||
<p class="font-technical text-technical text-on-surface-variant">22 Jul</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity Log (Condensed) -->
|
||||
<div class="bg-surface-container-lowest rounded-lg border border-line shadow-card p-md flex-1">
|
||||
<h4 class="font-subheading text-subheading text-on-surface mb-md flex items-center gap-xs">
|
||||
<span class="material-symbols-outlined text-on-surface-variant" data-icon="history">history</span>
|
||||
Recent Activity
|
||||
</h4>
|
||||
<div class="flex flex-col gap-sm"><div class="text-sm border-b border-line pb-sm last:border-0"><p class="font-body text-body text-on-surface">Work order status changed to Completed.</p><span class="font-technical text-technical text-on-surface-variant">22 Jul</span></div><div class="text-sm border-b border-line pb-sm last:border-0"><p class="font-body text-body text-on-surface">4 required documents uploaded and verified.</p><span class="font-technical text-technical text-on-surface-variant">22 Jul</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Sample Data Banner -->
|
||||
<div class="sample-data-banner">
|
||||
<span class="material-symbols-outlined text-[16px]" data-icon="info">info</span>
|
||||
Sample Data
|
||||
</div>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,372 @@
|
|||
<!DOCTYPE html><html class="light" lang="en" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>Work orders (Admin)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — Work orders (Admin)
|
||||
Journey 3 — Contractor toggle · screen 1 of 4
|
||||
Stitch project 8537473387290162501 · screen 2b340f911ce040a99cdb8b2cd0a231b2
|
||||
Original HTML <title>: Work orders - 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"}]
|
||||
},
|
||||
"boxShadow": {
|
||||
"card": "0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02)",
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
||||
}
|
||||
.material-symbols-outlined.filled {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-canvas text-ink font-body min-h-screen flex flex-col">
|
||||
<!-- TopNavBar -->
|
||||
<header class="bg-surface-container-lowest dark:bg-inverse-surface shadow-card h-header-height w-full sticky top-0 z-50">
|
||||
<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">Ara Projects</div>
|
||||
<nav class="hidden md:flex h-full items-end gap-md">
|
||||
<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 pb-4 px-2" href="#">Dashboard</a>
|
||||
<a class="text-primary dark:text-primary-fixed-dim border-b-2 border-primary dark:border-primary-fixed-dim pb-4 px-2 font-body-bold cursor-pointer active:opacity-80" 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 pb-4 px-2" href="#">Workstreams</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 pb-4 px-2" href="#">Properties</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 pb-4 px-2" href="#">Documents</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 pb-4 px-2" href="#">Imports</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 pb-4 px-2" href="#">Reports</a>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-md"><div class="flex items-center gap-sm mr-sm">
|
||||
<span class="text-body text-on-surface-variant whitespace-nowrap">View as contractor</span>
|
||||
<button class="relative inline-flex h-6 w-11 items-center rounded-full bg-line transition-colors focus:outline-none" role="switch" aria-checked="false">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-surface-container-lowest transition-transform translate-x-1"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="p-xs text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-xs text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
</button>
|
||||
<div class="w-8 h-8 rounded-full bg-primary-fixed flex items-center justify-center overflow-hidden border border-line">
|
||||
<img alt="User profile" class="w-full h-full object-cover" data-alt="A small circular user profile picture showing a professional individual in a corporate setting. Light mode aesthetic, well-lit, sharp focus." src="../assets/img/img21.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content -->
|
||||
<main class="flex-grow flex flex-col p-lg lg:p-xl w-full max-w-max-width mx-auto gap-lg">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-md">
|
||||
<div>
|
||||
<div class="flex items-center gap-sm mb-xs">
|
||||
<h1 class="font-h1 text-h1 text-ink">Work orders</h1>
|
||||
<span class="bg-accent-soft text-on-tertiary-fixed-variant font-overline text-overline px-sm py-xs rounded-full uppercase tracking-wider">Sample data</span>
|
||||
</div>
|
||||
<p class="font-body text-body text-on-surface-variant">1,231 work orders</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toolbar -->
|
||||
<div class="bg-surface shadow-card border border-line rounded-lg p-sm flex flex-col xl:flex-row gap-md justify-between items-center">
|
||||
<div class="flex flex-wrap items-center gap-sm w-full xl:w-auto">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-sm top-1/2 -translate-y-1/2 text-outline text-[18px]">search</span>
|
||||
<input class="bg-surface-low border border-line rounded-lg pl-xl pr-sm py-sm text-body focus:border-primary focus:ring-0 w-full sm:w-48 transition-colors" placeholder="Search reference..." type="text">
|
||||
</div>
|
||||
<div class="h-6 w-px bg-line hidden sm:block mx-xs"></div>
|
||||
<button class="bg-surface border border-line hover:bg-surface-low text-ink font-body text-body px-md py-sm rounded-lg flex items-center gap-xs transition-colors">
|
||||
Workstream <span class="material-symbols-outlined text-[18px]">arrow_drop_down</span>
|
||||
</button>
|
||||
<button class="bg-surface border border-line hover:bg-surface-low text-ink font-body text-body px-md py-sm rounded-lg flex items-center gap-xs transition-colors">
|
||||
Contractor <span class="material-symbols-outlined text-[18px]">arrow_drop_down</span>
|
||||
</button>
|
||||
<button class="bg-surface border border-line hover:bg-surface-low text-ink font-body text-body px-md py-sm rounded-lg flex items-center gap-xs transition-colors">
|
||||
Stage <span class="material-symbols-outlined text-[18px]">arrow_drop_down</span>
|
||||
</button>
|
||||
<label class="flex items-center gap-xs cursor-pointer text-body text-on-surface-variant hover:text-ink transition-colors ml-xs">
|
||||
<input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox">
|
||||
Overdue only
|
||||
</label>
|
||||
<label class="flex items-center gap-xs cursor-pointer text-body text-on-surface-variant hover:text-ink transition-colors ml-xs">
|
||||
<input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox">
|
||||
Missing evidence
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-sm w-full xl:w-auto justify-end">
|
||||
<button class="text-primary hover:bg-surface-low font-body-bold text-body px-md py-sm rounded-lg transition-colors flex items-center gap-xs">
|
||||
<span class="material-symbols-outlined text-[18px]">upload</span> Import
|
||||
</button>
|
||||
<button class="text-error hover:bg-error-soft font-body-bold text-body px-md py-sm rounded-lg transition-colors flex items-center gap-xs">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span> Omit / delete
|
||||
</button>
|
||||
<button class="text-primary hover:bg-surface-low font-body-bold text-body px-md py-sm rounded-lg transition-colors flex items-center gap-xs">
|
||||
<span class="material-symbols-outlined text-[18px]">download</span> Export
|
||||
</button>
|
||||
<button class="bg-primary hover:bg-primary-dark text-on-primary font-body-bold text-body px-md py-sm rounded-lg shadow-sm transition-colors flex items-center gap-xs ml-sm">
|
||||
<span class="material-symbols-outlined text-[18px]">add</span> Add work order
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Data Table Card -->
|
||||
<div class="bg-surface shadow-card border border-line rounded-lg overflow-hidden flex flex-col">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse whitespace-nowrap">
|
||||
<thead>
|
||||
<tr class="bg-surface-low border-b border-line text-on-surface-variant font-body-bold text-body">
|
||||
<th class="p-md w-12"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></th>
|
||||
<th class="p-md">WO ref</th>
|
||||
<th class="p-md">Asset ref</th>
|
||||
<th class="p-md">Address</th>
|
||||
<th class="p-md">Workstream</th>
|
||||
<th class="p-md">Contractor</th>
|
||||
<th class="p-md">Stage</th>
|
||||
<th class="p-md">Forecast end</th>
|
||||
<th class="p-md">Docs</th>
|
||||
<th class="p-md">Priority</th>
|
||||
<th class="p-md text-right">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-technical text-body text-ink divide-y divide-line">
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||||
<td class="p-md">WO-23881</td>
|
||||
<td class="p-md">100245</td>
|
||||
<td class="p-md font-body">12 High St</td>
|
||||
<td class="p-md font-body">Windows</td>
|
||||
<td class="p-md font-body">Contractor A</td>
|
||||
<td class="p-md"><span class="bg-surface-high text-on-surface px-sm py-xs rounded-full font-overline text-overline uppercase">Awaiting authorisation</span></td>
|
||||
<td class="p-md">12 Jul</td>
|
||||
<td class="p-md">2/4</td>
|
||||
<td class="p-md"></td>
|
||||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||||
<td class="p-md">WO-23882</td>
|
||||
<td class="p-md">100245</td>
|
||||
<td class="p-md font-body">12 High St</td>
|
||||
<td class="p-md font-body">Bathrooms</td>
|
||||
<td class="p-md font-body">Contractor B</td>
|
||||
<td class="p-md"><span class="bg-accent-soft text-on-tertiary-fixed-variant px-sm py-xs rounded-full font-overline text-overline uppercase">In progress</span></td>
|
||||
<td class="p-md">18 Jul</td>
|
||||
<td class="p-md">1/4</td>
|
||||
<td class="p-md"></td>
|
||||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors bg-error-soft/10">
|
||||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||||
<td class="p-md font-body-bold">WO-23883</td>
|
||||
<td class="p-md">100309</td>
|
||||
<td class="p-md font-body">4 Vale Rd</td>
|
||||
<td class="p-md font-body">Roofs</td>
|
||||
<td class="p-md font-body">Contractor A</td>
|
||||
<td class="p-md"><span class="bg-error-soft text-error px-sm py-xs rounded-full font-overline text-overline uppercase">Overdue</span></td>
|
||||
<td class="p-md text-error font-body-bold">03 Jul</td>
|
||||
<td class="p-md">0/4</td>
|
||||
<td class="p-md"><span class="bg-tan-soft text-on-tan px-sm py-xs rounded-full font-overline text-overline uppercase">Priority</span></td>
|
||||
<td class="p-md text-right"><a class="text-error hover:underline font-body-bold text-body flex items-center justify-end gap-xs" href="#"><span class="material-symbols-outlined text-[16px]">warning</span> Review</a></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||||
<td class="p-md">WO-23884</td>
|
||||
<td class="p-md">100412</td>
|
||||
<td class="p-md font-body">8 Mill Lane</td>
|
||||
<td class="p-md font-body">Electrical heating</td>
|
||||
<td class="p-md font-body">Contractor C</td>
|
||||
<td class="p-md"><span class="bg-surface-high text-on-surface px-sm py-xs rounded-full font-overline text-overline uppercase">Ordered</span></td>
|
||||
<td class="p-md">21 Jul</td>
|
||||
<td class="p-md">0/3</td>
|
||||
<td class="p-md"></td>
|
||||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||||
<td class="p-md">WO-23885</td>
|
||||
<td class="p-md">100508</td>
|
||||
<td class="p-md font-body">16 Park View</td>
|
||||
<td class="p-md font-body">Asbestos</td>
|
||||
<td class="p-md font-body">Contractor C</td>
|
||||
<td class="p-md"><span class="bg-surface-high text-on-surface px-sm py-xs rounded-full font-overline text-overline uppercase">Completed</span></td>
|
||||
<td class="p-md">09 Jul</td>
|
||||
<td class="p-md">2/3</td>
|
||||
<td class="p-md"></td>
|
||||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||||
<td class="p-md">WO-23886</td>
|
||||
<td class="p-md">100522</td>
|
||||
<td class="p-md font-body">3 Oak Close</td>
|
||||
<td class="p-md font-body">Kitchens</td>
|
||||
<td class="p-md font-body">Contractor B</td>
|
||||
<td class="p-md"><span class="bg-accent-soft text-on-tertiary-fixed-variant px-sm py-xs rounded-full font-overline text-overline uppercase">In progress</span></td>
|
||||
<td class="p-md">24 Jul</td>
|
||||
<td class="p-md">1/4</td>
|
||||
<td class="p-md"></td>
|
||||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||||
<td class="p-md">WO-23887</td>
|
||||
<td class="p-md">100547</td>
|
||||
<td class="p-md font-body">27 Birch Way</td>
|
||||
<td class="p-md font-body">Doors</td>
|
||||
<td class="p-md font-body">Contractor A</td>
|
||||
<td class="p-md"><span class="bg-surface-high text-on-surface px-sm py-xs rounded-full font-overline text-overline uppercase">Ordered</span></td>
|
||||
<td class="p-md">28 Jul</td>
|
||||
<td class="p-md">0/4</td>
|
||||
<td class="p-md"></td>
|
||||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-low/60 transition-colors">
|
||||
<td class="p-md"><input class="rounded border-line text-primary focus:ring-primary h-4 w-4" type="checkbox"></td>
|
||||
<td class="p-md">WO-23888</td>
|
||||
<td class="p-md">100561</td>
|
||||
<td class="p-md font-body">9 Cedar Rd</td>
|
||||
<td class="p-md font-body">Cyclical decorations</td>
|
||||
<td class="p-md font-body">Contractor B</td>
|
||||
<td class="p-md"><span class="bg-surface-high text-on-surface px-sm py-xs rounded-full font-overline text-overline uppercase">Completed</span></td>
|
||||
<td class="p-md">05 Jul</td>
|
||||
<td class="p-md">2/2</td>
|
||||
<td class="p-md"></td>
|
||||
<td class="p-md text-right"><a class="text-primary hover:underline font-body-bold text-body" href="#">Open</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination Footer -->
|
||||
<div class="bg-surface border-t border-line p-md flex flex-col sm:flex-row justify-between items-center gap-sm">
|
||||
<span class="font-body text-body text-on-surface-variant">Showing 1–8 of 1,231</span>
|
||||
<div class="flex items-center gap-sm">
|
||||
<button class="p-xs text-outline-variant hover:text-ink disabled:opacity-50 transition-colors" disabled="">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-xs">
|
||||
<button class="w-8 h-8 rounded-full bg-primary text-on-primary font-body-bold text-body flex items-center justify-center">1</button>
|
||||
<button class="w-8 h-8 rounded-full text-on-surface-variant hover:bg-surface-low font-body text-body flex items-center justify-center transition-colors">2</button>
|
||||
<button class="w-8 h-8 rounded-full text-on-surface-variant hover:bg-surface-low font-body text-body flex items-center justify-center transition-colors">3</button>
|
||||
<span class="text-on-surface-variant">...</span>
|
||||
<button class="w-8 h-8 rounded-full text-on-surface-variant hover:bg-surface-low font-body text-body flex items-center justify-center transition-colors">154</button>
|
||||
</div>
|
||||
<button class="p-xs text-on-surface-variant hover:text-ink transition-colors">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,448 @@
|
|||
<!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 A View (Refined Consistency)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — Contractor A View (Refined Consistency)
|
||||
Journey 3 — Contractor toggle · screen 2 of 4
|
||||
Stitch project 8537473387290162501 · screen 4e94481b3c874d55ab1f1655724d34f8
|
||||
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 selected="">Contractor A (Windows, Roofs, Doors)</option>
|
||||
<option>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">
|
||||
<!-- 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 A</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: Windows, Roofs, Doors</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">420</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">68</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">84%</div>
|
||||
<div class="w-full bg-surface-high rounded-full h-2 mb-2">
|
||||
<div class="bg-primary h-2 rounded-full" style="width: 84%"></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">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-surface-low/60 transition-colors group">
|
||||
<td class="p-md font-technical text-technical text-primary font-medium">WO-23881</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">Windows</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">12 Jul</td>
|
||||
<td class="p-md font-technical text-technical text-on-surface-variant">2/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>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-surface-low/60 transition-colors group bg-error-soft/10">
|
||||
<td class="p-md font-technical text-technical text-primary font-medium">WO-23883</td>
|
||||
<td class="p-md font-technical text-technical text-on-surface-variant">100309</td>
|
||||
<td class="p-md font-body text-body text-on-surface">4 Vale Rd</td>
|
||||
<td class="p-md font-body text-body text-on-surface">Roofs</td>
|
||||
<td class="p-md flex flex-col gap-1 items-start">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full font-technical text-technical bg-error-soft text-error border border-error-container">
|
||||
Overdue
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full font-technical text-technical bg-tan-soft text-on-tan border border-secondary-container">
|
||||
Priority
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-md font-technical text-technical text-error font-medium">03 Jul</td>
|
||||
<td class="p-md font-technical text-technical text-error">0/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-primary rounded px-3 py-1 bg-surface-container-lowest shadow-sm hover:bg-surface-low">Upload evidence</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-surface-low/60 transition-colors group">
|
||||
<td class="p-md font-technical text-technical text-primary font-medium">WO-23887</td>
|
||||
<td class="p-md font-technical text-technical text-on-surface-variant">100547</td>
|
||||
<td class="p-md font-body text-body text-on-surface">27 Birch Way</td>
|
||||
<td class="p-md font-body text-body text-on-surface">Doors</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">28 Jul</td>
|
||||
<td class="p-md font-technical text-technical text-on-surface-variant">0/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>
|
||||
</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 420 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 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 flex items-center justify-between p-sm hover:bg-surface-high transition-colors rounded border border-line group bg-surface-container-lowest">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">help_center</span>
|
||||
<span class="font-body text-body text-on-surface">Help Center</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors">chevron_right</span>
|
||||
</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>
|
||||
|
|
@ -0,0 +1,382 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,384 @@
|
|||
<!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 C View (Reconciled Structure)</title>
|
||||
<!--
|
||||
Ara Projects wireframe — Contractor C View (Reconciled Structure)
|
||||
Journey 3 — Contractor toggle · screen 4 of 4
|
||||
Stitch project 8537473387290162501 · screen f258a24066584cd788f00c400c54b90a
|
||||
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"/>
|
||||
<link href="../assets/fonts.css" rel="stylesheet"/>
|
||||
<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>Contractor B (Kitchens, Bathrooms, Cyclical decorations)</option><option selected="">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 C</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: Electrical heating, Asbestos</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">210</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">4</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">78%</div><div class="w-full bg-surface-high rounded-full h-2 mb-2"><div class="bg-primary h-2 rounded-full" style="width: 78%"></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-23884</td><td class="p-md font-technical text-technical text-on-surface-variant">100412</td><td class="p-md font-body text-body text-on-surface">8 Mill Lane</td><td class="p-md font-body text-body text-on-surface">Electrical heating</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">21 Jul</td><td class="p-md font-technical text-technical text-on-surface-variant">0/3</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-23885</td><td class="p-md font-technical text-technical text-on-surface-variant">100508</td><td class="p-md font-body text-body text-on-surface">16 Park View</td><td class="p-md font-body text-body text-on-surface">Asbestos</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">Completed</span></td><td class="p-md font-technical text-technical text-on-surface-variant">09 Jul</td><td class="p-md font-technical text-technical text-on-surface-variant">2/3</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 210 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>
|
||||
20
docs/wireframes/ara-projects/README.md
Normal file
20
docs/wireframes/ara-projects/README.md
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
# Ara Projects — UX wireframes
|
||||
|
||||
Static HTML wireframe export for the Ara Projects feature (schema merged in PR #404). Produced by our UX designer with Google Stitch (project `8537473387290162501`) and refined with Claude. Open [`index.html`](./index.html) in a browser for the journey directory; everything is offline-viewable (fonts and the Tailwind runtime are vendored under `assets/`).
|
||||
|
||||
The GitHub issues on the [Ara Projects board](https://github.com/orgs/Hestia-Homes/projects/6) reference these screens by path.
|
||||
|
||||
## How to read them
|
||||
|
||||
- **Structure is the spec; styling and copy are not.** V1 is built with the app's existing shadcn/Tailwind design system — the Material-3 theme here is disposable. All figures are sample data (every screen carries a "Sample data" badge).
|
||||
- Known placeholder artefacts — do not treat as requirements:
|
||||
- Journey 2 mixes plumbing-job copy ("fix leaking pipe", "John Davies, Plumber") into a Windows work order; the *flow* is the spec.
|
||||
- Screen `1-admin-import/04` shows default stages "New / Active / Active / Active / Complete" — the real default ladder is Ordered / In progress / Completed / Charged / Closed.
|
||||
- Contractor names vary (Apex Construction vs "Contractor A") and some screens keep a generic legacy top nav.
|
||||
- Some screens show features deliberately deferred from v1 (import diffing/review summary, booking and no-access flow, "Awaiting auth"/"No access" tiles, activity log, SharePoint sync toggle, "Add Custom Measure"). The corresponding "Ara Projects design:" issues own those.
|
||||
|
||||
## Journeys
|
||||
|
||||
1. `1-admin-import/` — admin: project setup wizard (6 steps) + work-order import + programme dashboard.
|
||||
2. `2-contractor-journey/` — contractor: one work order through stage progression, evidence upload, completion.
|
||||
3. `3-contractor-toggle/` — admin: full work-orders table + "view as contractor" scoped views.
|
||||
279
docs/wireframes/ara-projects/assets/fonts.css
Normal file
279
docs/wireframes/ara-projects/assets/fonts.css
Normal file
|
|
@ -0,0 +1,279 @@
|
|||
/* from f_montserrat.css */
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url(fonts/montserrat_v31_JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Questrial';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(fonts/questrial_v19_QdVUSTchPBm7nuUeVf70sSFluW44JUcz.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Questrial';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(fonts/questrial_v19_QdVUSTchPBm7nuUeVf70sCFluW44JUcz.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Questrial';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(fonts/questrial_v19_QdVUSTchPBm7nuUeVf70viFluW44JQ.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* from f_symbols.css */
|
||||
/* fallback */
|
||||
@font-face {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
font-style: normal;
|
||||
font-weight: 100 700;
|
||||
font-display: swap;
|
||||
src: url(fonts/materialsymbolsoutlined_v361_kJEPBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJO1USv9ls.woff2) format('woff2');
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
docs/wireframes/ara-projects/assets/img/img1.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img10.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img11.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img12.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img13.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img14.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img15.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img16.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img17.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img17.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img18.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img18.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img19.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img19.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img2.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img20.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img20.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img21.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img21.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img22.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img22.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img23.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img23.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img3.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img4.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img5.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img6.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img7.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img8.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/wireframes/ara-projects/assets/img/img9.png
Normal file
BIN
docs/wireframes/ara-projects/assets/img/img9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
83
docs/wireframes/ara-projects/assets/tailwind-play.js
Normal file
83
docs/wireframes/ara-projects/assets/tailwind-play.js
Normal file
File diff suppressed because one or more lines are too long
67
docs/wireframes/ara-projects/index.html
Normal file
67
docs/wireframes/ara-projects/index.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!doctype html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ara Projects — User Journeys (wireframe export)</title>
|
||||
<style>
|
||||
:root { color-scheme: light dark; }
|
||||
body { font: 15px/1.5 system-ui, sans-serif; max-width: 820px; margin: 0 auto; padding: 40px 24px 80px; color: #111; background: #eef4fc; }
|
||||
@media (prefers-color-scheme: dark) { body { color: #e8eef6; background: #0f1420; } a { color: #7db9ec; } .t { color:#8a97a8; } }
|
||||
h1 { color: #2a347a; font-size: 28px; margin-bottom: 4px; }
|
||||
@media (prefers-color-scheme: dark) { h1, h2 { color: #a9b4ee; } }
|
||||
.lede { color: #4c5768; margin-top: 0; }
|
||||
section { background: #fff; border: 1px solid #d2ddec; border-radius: 12px; padding: 8px 24px 20px; margin: 20px 0; }
|
||||
@media (prefers-color-scheme: dark) { section { background:#161d2b; border-color:#28324a; } }
|
||||
h2 { color: #2a347a; font-size: 17px; }
|
||||
ol { padding-left: 22px; margin: 0; }
|
||||
li { margin: 7px 0; display:flex; justify-content:space-between; gap:16px; align-items:baseline; }
|
||||
a { color: #2372b5; text-decoration: none; font-weight: 600; }
|
||||
a:hover { text-decoration: underline; }
|
||||
.t { color: #6f7a8a; font-size: 12.5px; white-space: nowrap; }
|
||||
.note { color:#6f7a8a; font-size: 12.5px; margin-top: 28px; }
|
||||
</style></head>
|
||||
<body>
|
||||
<h1>Ara Projects — User Journeys</h1>
|
||||
<p class="lede">Self-contained wireframe export. Each screen links to its cleaned HTML; the right column is the control that advances to the next screen. Works fully offline.</p>
|
||||
<section>
|
||||
<h2>Journey 1 — Stonewater admin: set up a project and import the programme</h2>
|
||||
<ol>
|
||||
<li><a href="1-admin-import/01-getting-started-empty-state.html">Getting Started (Empty State)</a><span class="t">Create project →</span></li>
|
||||
<li><a href="1-admin-import/02-project-details.html">Project Details (Step 1)</a><span class="t">Create and continue →</span></li>
|
||||
<li><a href="1-admin-import/03-select-workstreams.html">Select Workstreams (Step 2)</a><span class="t">Save and continue →</span></li>
|
||||
<li><a href="1-admin-import/04-configure-stages.html">Configure Stages (Step 3)</a><span class="t">Save and continue →</span></li>
|
||||
<li><a href="1-admin-import/05-configure-documents.html">Configure Documents (Step 4)</a><span class="t">Save and continue →</span></li>
|
||||
<li><a href="1-admin-import/06-contractors-permissions.html">Contractors & Permissions (Step 5 - Updated)</a><span class="t">Save and continue →</span></li>
|
||||
<li><a href="1-admin-import/07-import-upload.html">Import Upload (Step 6)</a><span class="t">Continue →</span></li>
|
||||
<li><a href="1-admin-import/08-map-columns-rebuilt.html">Map Columns (Rebuilt)</a><span class="t">Validate import →</span></li>
|
||||
<li><a href="1-admin-import/09-map-columns-workstream-unlocked.html">Map Columns (Workstream Unlocked)</a><span class="t">Validate import →</span></li>
|
||||
<li><a href="1-admin-import/10-validate-import.html">Validate Import (Import Flow)</a><span class="t">Continue to Summary →</span></li>
|
||||
<li><a href="1-admin-import/11-review-import-summary.html">Review Import Summary (Import Flow)</a><span class="t">Confirm import →</span></li>
|
||||
<li><a href="1-admin-import/12-programme-dashboard.html">Programme Dashboard (Three-Band Layout)</a><span class="t">(journey end)</span></li>
|
||||
</ol>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Journey 2 — Contractor: move a work order through the stages to complete</h2>
|
||||
<ol>
|
||||
<li><a href="2-contractor-journey/01-property-view.html">1. Property View (Start)</a><span class="t">Book appointment →</span></li>
|
||||
<li><a href="2-contractor-journey/02-book-appointment.html">2. Book Appointment (Refined)</a><span class="t">Confirm booking →</span></li>
|
||||
<li><a href="2-contractor-journey/03-report-no-access.html">3. Report No Access (Contractor View)</a><span class="t">Log no access → Rebook →</span></li>
|
||||
<li><a href="2-contractor-journey/04-rebook.html">4. Rebook (Refined)</a><span class="t">Confirm booking →</span></li>
|
||||
<li><a href="2-contractor-journey/05-attend-start.html">5. Attend & Start (Contractor Sidebar)</a><span class="t">Mark on site →</span></li>
|
||||
<li><a href="2-contractor-journey/06-completion-blocked.html">6. Completion Blocked (Property View)</a><span class="t">Upload →</span></li>
|
||||
<li><a href="2-contractor-journey/07-upload-evidence.html">7. Upload Evidence (Contractor View)</a><span class="t">Mark completed (4 of 4) →</span></li>
|
||||
<li><a href="2-contractor-journey/08-completion-cleared.html">8. Completion Cleared (Refined)</a><span class="t">Mark completed →</span></li>
|
||||
<li><a href="2-contractor-journey/09-marked-completed.html">9. Marked Completed (Refined)</a><span class="t">(journey end)</span></li>
|
||||
</ol>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Journey 3 — Stonewater admin: toggle into the contractor view</h2>
|
||||
<ol>
|
||||
<li><a href="3-contractor-toggle/01-work-orders-admin.html">Work orders (Admin)</a><span class="t">View as contractor →</span></li>
|
||||
<li><a href="3-contractor-toggle/02-contractor-a-view.html">Contractor A View (Refined Consistency)</a><span class="t">switch → Contractor B</span></li>
|
||||
<li><a href="3-contractor-toggle/03-contractor-b-view.html">Contractor B View (Refined Consistency)</a><span class="t">switch → Contractor C</span></li>
|
||||
<li><a href="3-contractor-toggle/04-contractor-c-view.html">Contractor C View (Reconciled Structure)</a><span class="t">Exit contractor view →</span></li>
|
||||
</ol>
|
||||
</section>
|
||||
<p class="note">Source: Stitch project 8537473387290162501. Screens identified by Stitch name (HTML <title> tags are non-unique). Figures are sample data; contractor job descriptions are placeholder text. Tailwind, fonts and images vendored under <code>assets/</code>.</p>
|
||||
</body></html>
|
||||
Loading…
Add table
Reference in a new issue