# Armon TERRA v1.6 — Wireframes

## Overview

Interactive HTML wireframes for **Armon TERRA** — a vendor-owned tote inventory and compliance platform. These wireframes cover all 24 screens defined in the v1.6 Production & Wireframe Ready Specification (§18) and are designed for board approval review.

## Design System

Built on IRIS UX Principles with Microsoft Fluent Design:

| Token | Value | Usage |
|-------|-------|-------|
| Primary Blue | `#0078D4` | Azure-standard primary actions |
| TERRA Accent | `#5B4FC4` | Branding, vendor header, accent elements |
| Success Green | `#107C10` | Compliant items, successful operations |
| Warning Orange | `#F7630C` | SLA aging, attention needed |
| Critical Red | `#D13438` | Recall exposure, SLA breach, critical alerts |
| Info Teal | `#008272` | Informational, tote/location context |
| Font | Segoe UI | Microsoft Fluent standard |

## How to Use

1. Open `index.html` in a modern web browser
2. Click any screen card to navigate to that wireframe
3. All screens are interactive — buttons show notifications, forms respond to input
4. Vendor screens display in mobile viewport (430px max-width)
5. Hospital/Admin screens use full desktop layout with sidebar navigation

## Screen Inventory (24 Screens)

### Vendor Screens (12) — Mobile-First
| # | Screen | File | Spec |
|---|--------|------|------|
| 1 | Login (OTP) | `vendor-login.html` | §6.1, §6.2 |
| 2 | Enable Offline Mode | `vendor-offline-setup.html` | §7.1, §7.2 |
| 3 | Vendor Home | `vendor-home.html` | §4.4, §9 |
| 4 | Scan Location | `vendor-scan-location.html` | §4.2 |
| 5 | Scan In | `vendor-scan-in.html` | §9.1, §8.2 |
| 6 | Use | `vendor-use.html` | §9.2, §8.3 |
| 7 | Keep | `vendor-keep.html` | §9.3 |
| 8 | Check Out | `vendor-checkout.html` | §9.4 |
| 9 | Reconcile Tote | `vendor-reconcile.html` | §9.5 |
| 10 | Offline Status + Queue | `vendor-offline-status.html` | §7.2–§7.4 |
| 11 | Offline Expired | `vendor-offline-expired.html` | §7.2 |
| 12 | Conflict Resolution | `vendor-conflict-resolution.html` | §7.4, §17 |

### Hospital Screens (9) — Desktop Layout
| # | Screen | File | Spec |
|---|--------|------|------|
| 13 | Hospital Dashboard | `hospital-dashboard.html` | §15, §10, §11, §12 |
| 14 | Recall Exposure View | `hospital-recall-exposure.html` | §12, §8.3 |
| 15 | Facilities Management | `hospital-facilities.html` | §4.2 |
| 16 | Tote Location Mgmt + QR | `hospital-tote-locations.html` | §4.2 |
| 17 | SLA Configuration | `hospital-sla-config.html` | §10.1, §10.2 |
| 18 | Items Master Upload | `hospital-contract-upload.html` | §11.1, §11.2 |
| 19 | Contract Dataset Mgmt | `hospital-contract-management.html` | §11, §11.3 |
| 20 | Audit Mode | `hospital-audit-mode.html` | §13 |
| 21 | Reports | `hospital-reports.html` | §16 |

### Admin Screens (3) — Admin Desktop Layout
| # | Screen | File | Spec |
|---|--------|------|------|
| 22 | Tenant Provisioning Wizard | `admin-tenant-wizard.html` | §3.2, §3.3 |
| 23 | Tenant List & Status | `admin-tenant-list.html` | §3.2, §3.4 |
| 24 | Tenant Configuration | `admin-tenant-config.html` | §3.2, §2.1 |

## Key UX Decisions

### Vendor UX (§17)
- **Large primary actions**: 120px min-height touch targets for scanning operations
- **Camera-first**: Every scan workflow opens with camera viewfinder
- **Offline banner**: Fixed banner with live countdown timer and queue count
- **Single-screen conflict resolution**: No wizard — local vs server comparison on one screen

### Hospital UX (§17)
- **Card-based metrics**: KPI cards with trend indicators
- **Strong recall/compliance indicators**: Red recall items, compliance meters with color coding
- **Contract value visibility**: Coverage %, out-of-contract counts/value prominently displayed
- **Clear filters**: Filter bars on every list view

### Admin UX
- **Dark admin theme**: Distinguished from operational interfaces
- **Wizard-based provisioning**: 4-step process for tenant creation
- **Audit trail visibility**: All admin actions logged and displayed

## Shared Assets

| File | Purpose |
|------|---------|
| `styles.css` | Complete design system (1000+ lines) |
| `app.js` | Navigation, notifications, offline countdown, wizard interactions |
| `index.html` | Wireframe index with navigation to all 24 screens |
| `TRACEABILITY.md` | Requirement-to-wireframe traceability matrix |
| `README.md` | This documentation |

## Board Approval Checklist

- [x] All 24 screens from §18 implemented
- [x] IRIS UX principles followed
- [x] Microsoft Fluent design adherence
- [x] Vendor mobile-first UX (§17 constraints)
- [x] Hospital card-based metrics (§17 constraints)
- [x] Full requirement traceability (see TRACEABILITY.md)
- [x] Role-permission alignment verified (§4)
- [x] Offline mode flows complete (§7)
- [x] Compliance engine UX (§10)
- [x] FDA integration UX (§12)
- [x] Contract value visibility (§11)
- [x] v1 scope boundaries respected (no EMR/ERP, no PHI, no invoices)

## Technical Notes

- Wireframes are static HTML/CSS/JS — no build tools required
- All functionality is simulated for demonstration
- Production implementation target: Blazor / React (per tenant tier)
- No external dependencies — runs offline from filesystem

---

**Project:** Armon TERRA  
**Spec Version:** v1.6  
**Wireframe Date:** March 2026  
**Status:** Board Approval Ready