junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-07-27 22:45:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
assessment-model/docs/wireframes/ara-projects/1-admin-import/08-map-columns-rebuilt.html
Daniel Roth a0f865ad85 Add Ara Projects UX wireframes under docs/wireframes 
Static Stitch export previously only available locally; referenced by the
Ara Projects issues (#405-#429). README explains which parts are spec vs
placeholder.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-20 15:15:21 +00:00

676 lines
No EOL
32 KiB
HTML
Raw Blame History

<!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>
Reference in a new issue View git blame Copy permalink