From 6062b68617cfd8dfc29d98a8ed3d23447ea60801 Mon Sep 17 00:00:00 2001 From: Daniel Covington Date: Tue, 12 May 2026 09:46:58 -0400 Subject: [PATCH] Gui and UI rules and updates --- AGENTS.md | 91 +++++++ docker-publish.ps1 | 53 ++++ docs/ux-color-themes.html | 99 ++++++++ docs/ux-design-directions.html | 452 +++++++++++++++++++++++++++++++++ 4 files changed, 695 insertions(+) create mode 100644 docker-publish.ps1 create mode 100644 docs/ux-color-themes.html create mode 100644 docs/ux-design-directions.html diff --git a/AGENTS.md b/AGENTS.md index 323a47e..6a2d1a2 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -908,3 +908,94 @@ Browser → public/index.php → Request → Dispatcher → Router → Route → ## Creating Table When you create tables and code for a table you will need a corrisponding _audit table with audit_id , id that refrences the object id , an action R I U D , the fields in json , username and created at + +### Color System + +Visual direction: calm operational clarity with high-signal status semantics. + +Core palette: +- Primary: `#1F4E79` (municipal navy; trust and structure) +- Secondary: `#0F766E` (teal support/action) +- Accent: `#2563EB` (interactive focus/action emphasis) + +Semantic status palette: +- Success / On Track: `#2E7D32` +- Warning / At Risk: `#B45309` +- Error / Blocked: `#B91C1C` +- Info / Neutral Progress: `#2563EB` +- Overdue / Critical Flag: `#7F1D1D` + +Neutral foundation: +- Background: `#F7F9FC` +- Surface: `#FFFFFF` +- Border: `#D0D7E2` +- Primary Text: `#111827` +- Secondary Text: `#4B5563` + +Ant Design token strategy: +- Configure global tokens first (`colorPrimary`, `colorSuccess`, `colorWarning`, `colorError`, `colorInfo`, `colorBgBase`, `colorText`, `borderRadius`, density-related sizing). +- Keep status meaning consistent across tables, tags, timelines, and alerts. + +### Typography System + +Tone: professional, clear, non-decorative, optimized for dense operational reading. + +Type stack: +- Primary UI text: `Public Sans`, `Segoe UI`, `Arial`, sans-serif +- Data-heavy/labels fallback: `IBM Plex Sans`, `Segoe UI`, sans-serif +- Monospace for IDs/reference codes: `IBM Plex Mono`, `Consolas`, monospace + +Type hierarchy (desktop-first): +- H1: 28px / 36px / 600 +- H2: 22px / 30px / 600 +- H3: 18px / 26px / 600 +- Body default: 14px / 22px / 400 +- Dense table/body compact: 13px / 20px / 400 +- Caption/meta: 12px / 18px / 400 + +Typography principles: +- Prioritize legibility over brand flourish. +- Keep numeric/date fields highly scannable. +- Use consistent casing and label patterns for form-heavy workflows. + +### Spacing & Layout Foundation + +Layout direction: compact, structured, desktop-optimized operational workspace. + +Spacing system: +- Base unit: 8px +- Micro spacing for dense table controls: 4px +- Section spacing rhythm: 16px / 24px / 32px + +Grid and containers: +- Desktop-first 12-column grid +- Content max-width bands for readability in wide monitors +- Persistent side regions for risk queue/filter panels when useful + +Component density rules: +- Default to compact controls for grid and forms +- Keep touch-target inflation out of scope (PC-only product) +- Reserve larger spacing only for high-risk confirmations/modals + +Visual rhythm: +- Clear row grouping and section boundaries +- Strong alignment around key operational identifiers (municipality, cycle, status, due date) + +### Accessibility Considerations + +- WCAG 2.2 AA minimum contrast targets: + - 4.5:1 for normal text + - 3:1 for large text and UI components +- Keyboard-first operation: + - Visible 2px focus indicators on interactive elements + - Logical tab order in grids, forms, drawers, and modals +- Do not rely on color alone: + - Pair status colors with labels/icons/patterns +- Motion and feedback: + - Subtle motion only for orientation, not decoration + - Respect reduced-motion preferences +- Dense-data readability: + - Preserve minimum font sizes and row heights that remain readable during long operational sessions + +# UI desgin +- Refer to template info in the files docs\ux-color-themes.html and docs\ux-design-directions.html \ No newline at end of file diff --git a/docker-publish.ps1 b/docker-publish.ps1 new file mode 100644 index 0000000..6b307c3 --- /dev/null +++ b/docker-publish.ps1 @@ -0,0 +1,53 @@ +#Requires -Version 5.1 +<# +.SYNOPSIS + Builds the Campaign Tracker Docker image and pushes it to the private registry. +.EXAMPLE + .\docker-publish.ps1 + .\docker-publish.ps1 -SkipBuild # push a previously built image +#> + +param( + [switch]$SkipBuild +) + +Set-StrictMode -Version Latest +$ErrorActionPreference = "Stop" + +# --------------------------------------------------------------------------- +# Configuration +# --------------------------------------------------------------------------- +$REGISTRY_HOST = "192.168.1.200" # change port if needed, e.g. "192.168.1.200:5000" +$IMAGE_NAME = "campaign-tracker" +$FULL_TAG = "$REGISTRY_HOST/$IMAGE_NAME`:latest" + +# --------------------------------------------------------------------------- +# Helpers +# --------------------------------------------------------------------------- +function Write-Step([string]$msg) { + Write-Host "`n==> $msg" -ForegroundColor Cyan +} + +function Assert-DockerRunning { + docker info > $null 2>&1 + if ($LASTEXITCODE -ne 0) { + Write-Error "Docker is not running or not reachable. Start Docker Desktop and retry." + } +} + +# --------------------------------------------------------------------------- +# Main +# --------------------------------------------------------------------------- +Assert-DockerRunning + +if (-not $SkipBuild) { + Write-Step "Building image: $FULL_TAG" + docker build --tag $FULL_TAG . + if ($LASTEXITCODE -ne 0) { Write-Error "docker build failed (exit $LASTEXITCODE)." } +} + +Write-Step "Pushing image: $FULL_TAG" +docker push $FULL_TAG +if ($LASTEXITCODE -ne 0) { Write-Error "docker push failed (exit $LASTEXITCODE)." } + +Write-Host "`nDone. Image available at $FULL_TAG" -ForegroundColor Green diff --git a/docs/ux-color-themes.html b/docs/ux-color-themes.html new file mode 100644 index 0000000..d03d9bb --- /dev/null +++ b/docs/ux-color-themes.html @@ -0,0 +1,99 @@ + + + + + + UX Color Themes - Campaign_Tracker App + + + +
+

Color Theme Visualizer

+

Primary candidate is Theme A (Municipal Calm). Status semantics remain consistent across all options.

+
+
+
Theme A - Municipal Calm (Selected)
+
+
Primary #1F4E79
+
Secondary #0F766E
+
Success #2E7D32
+
Warning #B45309
+
+
+
+
Theme B - Slate Ops
+
+
Primary #334155
+
Secondary #0369A1
+
Success #15803D
+
Warning #D97706
+
+
+
+
Theme C - Civic Teal
+
+
Primary #0F766E
+
Secondary #1D4ED8
+
Success #2E7D32
+
Warning #B45309
+
+
+
+
+ + + diff --git a/docs/ux-design-directions.html b/docs/ux-design-directions.html new file mode 100644 index 0000000..ba7001a --- /dev/null +++ b/docs/ux-design-directions.html @@ -0,0 +1,452 @@ + + + + + + UX Design Directions - Campaign_Tracker App + + + +
+

Design Direction Showcase • Campaign_Tracker App

+
+ PC-first + Ant Design Foundation + Dense Operations UX + Status + Provenance Visible +
+
+ +
+
+

How to Evaluate

+ Compare directions by layout intuitiveness, risk visibility, editing clarity, and workflow speed under deadline pressure. +
+ +
+
+
+

Direction 1: Operations Command Desk

+ Tri-pane control +
+
+
+
Command Desk / Election Cycle Workspace
+
+ +
+ + + + + + + +
TownCycleMilestoneStatus
Northfield2026-Q3AddressingAt Risk
Oak Hills2026-Q3Sort CompleteOn Track
Lakeview2026-Q3DispatchBlocked
+
+ +
+
+
+
Best for: Maximum situational awareness and real-time risk triage.
+
+ +
+
+

Direction 2: Queue + Inspector

+ Speed edits +
+
+
+
Priority Queue / Detail Inspector
+
+
+
At-Risk: Millbrook sorting due in 18h
+
Blocked: Easton transport window conflict
+
On Track: Pinecrest office copies
+
Ready: Blue envelope print
+
+ +
+
+
+
Best for: Fast operator throughput with minimal navigation friction.
+
+ +
+
+

Direction 3: Spreadsheet Plus

+ Excel-inspired +
+
+
+
Grid Operations / Trusted Commit
+
+ +
+ + + + + + + +
MunicipalityCycleEnvelopeDispatchOwner
RiversidePrimaryPurple04/07D. Hall
BrightonGeneralBlue04/09M. Cole
AuburnGeneralPurple04/08J. Lee
+
+
+
Validation Console
+
Ready to commit 6 updates
+
+
+
+
+
Best for: Teams migrating from Access/Excel habits with low retraining cost.
+
+ +
+
+

Direction 4: Timeline Operations

+ Deadline-first +
+
+
+
+
Election Timeline Ribbon • D-10 to D+2
+
+
+
D-3: Address finalization (2 blockers)
+
D-2: Transportation route unresolved
+
D-1: Office copies complete
+
D-Day: Dispatch verification checklist
+
+
+
+
Best for: Production-led teams where timing risk is the primary management lens.
+
+ +
+
+

Direction 5: Workbench + Modal Deep Work

+ Focus workflows +
+
+
+
Operations Workbench / Task Focus
+
+ +
+
Primary Work Area
+
Contextual Drawer Opens on Select
+
Commit + Reason Code Modal
+
Success Feedback With Next Action
+
+
+
+
+
Best for: Reduced cognitive load when users process one high-impact task at a time.
+
+ +
+
+

Direction 6: Executive Snapshot + Drilldown

+ Overview to action +
+
+
+
+
+
On Track: 124
+
At Risk: 19
+
Blocked: 7
+
Needs Review: 11
+
+ + + + + + + +
RegionUpcoming CutoffPrimary RiskAction
North04/07Addressing LagOpen Queue
South04/08Route CapacityOpen Queue
West04/08No blockersReview
+
+
+
+
Best for: Leadership and admins who need rapid oversight before acting at detail level.
+
+
+ +
+ Recommended base candidate: Direction 1 (Operations Command Desk), with selective adoption of Direction 3 grid affordances and Direction 2 quick inspector behavior. +
+
+ + +