Web Visual System Upgrade Report

UI Audit Summary

Current product strength is breadth: auctions, tenders, dashboard, KES, map, onboarding, identity, accommodations, and governance surfaces already exist and share a serious operational intent.

Main visual problems found in the existing web surface:

• Too many hard borders and nested card-inside-card treatments.
• Page shells did not clearly separate title, context, summary, and work area.
• Status language was inconsistent across auctions, tenders, dashboard, and governance surfaces.
• Auctions grid leaned too far toward consumer marketplace presentation.
• Tender detail lacked workspace density and decision hierarchy.
• Dashboard customization affordances were always present, which diluted cockpit mode.
• Right-side rails and utility chrome were visually noisy.
• KES concept was strong, but most refinement opportunity sits in shared shell/surface primitives because the page is still heavily inline-styled.

Design-System Upgrade Plan

Foundation

• Rebuild the token layer around tonal surfaces instead of border-heavy boxes.
• Strengthen type scale, spacing rhythm, and shadow hierarchy.
• Standardize status tones for governance, workflow, execution, and risk states.
• Quiet global chrome so page content becomes primary.

Surface Model

• primary panel: main working surface.
• secondary panel: supporting surface with lighter contrast.
• inspector panel: denser contextual panel, especially for right rails.
• summary panel: KPI, status, or overview block.
• empty state panel: subdued but still institutional.

Interaction Model

• Clear primary/secondary/subtle/destructive action hierarchy.
• Explicit mode distinction where customize vs normal runtime matters.
• Tables and cards tuned for operational density first, decorative density second.

Reusable Component and Style Changes

Tokens and Global Canvas

• Updated globals.css
  • richer dark-first palette
  • quieter background treatment
  • stronger shadows and tonal surfaces
  • more disciplined text hierarchy

Shared Status Language

• Expanded status.ts
  • governance/workflow/settlement/risk states now map into a more consistent tone family

Shared UI Primitives

• Updated panel/card family:
  • Card.module.css
  • Panel.module.css
• Updated action/status/input primitives:
  • Badge.module.css
  • Button.module.css
  • Input.module.css
  • Select.module.css
  • Table.module.css
• Updated shell/navigation/utility rails:
  • Shell.module.css
  • Sidebar.module.css
  • TopBar.module.css
  • ActionRail.module.css

Shared Page Shell

• Upgraded PortalListLayout.module.css
  • stronger title/summary/KPI/content hierarchy
  • cleaner filter rail separation

Actual Implementation Changes

Auctions

• auctions/page.tsx
  • added KPI overview strip
• AuctionsPortalClient.tsx
  • list view is now the default operational view
• AuctionsPortalClient.module.css
• AuctionCard.module.css
• AuctionTable.module.css
  • auctions surface now reads closer to exchange/contract infrastructure than ecommerce discovery

Auction Detail

• AuctionDetailClient.tsx
• AuctionDetailClient.module.css
• DetailPageLayout.module.css
  • stronger workspace intro, metrics, and action hierarchy

Tenders

• TendersPortalPage.tsx
  • added KPI strip and kept wrapper contract reusable for both tender route trees
• TendersTable.module.css
• TenderFilterPanel.module.css
• TenderDetailTabsClient.tsx
• TenderDetailTabsClient.module.css
  • tender detail now behaves more like a procurement workspace than a placeholder detail view

Dashboard

• DashboardWorkspace.tsx
  • separated normal cockpit mode from explicit customize mode
• DashboardWorkspace.module.css
• DashboardOverview.module.css
  • calmer default dashboard, clearer executive block hierarchy

Map

• MapShell.module.css
• MapSidebar.module.css
  • quieter geospatial chrome and better integrated side surface

Identity / Profile

• ProfilePage.module.css
  • shifted tone toward identity vault / trust center

Stakeholder Onboarding

• StakeholderOnboardingClient.module.css
  • stronger card selection state and CTA hierarchy

Affected Shared Components

• Card
• Panel
• Badge
• Button
• Input
• Select
• Table
• Shell
• Sidebar
• TopBar
• ActionRail

Screens Improved

• Auctions list
• Auction detail
• Tenders list
• Tender detail
• Dashboard
• Map
• Stakeholder onboarding
• Profile
• Shared shell/navigation/utility rails

Unseen Blocks Inheritance

This pass was intentionally routed through shared tokens, shared shells, and shared primitives instead of page-local one-offs. That means blocks not explicitly restyled still inherit:

• quieter chrome
• improved surface hierarchy
• unified badge/status treatment
• better button hierarchy
• stronger navigation and rail behavior
• improved table/card density rules

That inheritance is the main mechanism for lifting KES, accommodations, governance, and other module surfaces without rewriting business logic or route structure.

Validation Notes

• CSS class coverage was checked for the most heavily edited TSX/CSS pairs.
• A repo-wide apps/web TypeScript pass still reports many pre-existing project issues unrelated to this design pass.
• One design-pass-introduced type mismatch in tender shared layout props was corrected by relaxing the CSS module style prop contract to Record<string, string>.
• KES was improved primarily through shared primitives and token changes in this pass; a deeper KES polish pass should extract the inline style-heavy screen into reusable studio primitives rather than continue layering one-off inline tweaks.