jdescopingtool/openspec/changes/archive/2026-01-01-implement-blazor-ui/proposal.md

Implement Blazor UI

Summary

Implement the Blazor WebAssembly user interface for the JDE Scoping Tool, migrating the legacy ASP.NET MVC 5 / Kendo UI implementation to modern Radzen Blazor components. This phase creates all pages (Login, Search List, Search Create/Edit, Search Queue, Refresh Status) and integrates SignalR for real-time status updates.

Scope

In Scope

• Blazor WebAssembly project setup and configuration (already exists as JdeScoping.Client)
• Radzen Blazor component library integration (already referenced)
• Main layout with navigation header and footer
• Authentication pages:
  • Login page with LDAP authentication form
  • Not Authorized page
• Search pages:
  • Search List page (user's searches with status badges)
  • Search Create/Edit page with filter panels
  • Search Queue page (all queued searches)
• Refresh Status page (data sync dashboard)
• Filter panel components:
  • TimeSpan Filter Panel
  • Work Order Filter Panel
  • Item Number Filter Panel
  • Profit Center Filter Panel
  • Work Center Filter Panel
  • Component Lot Filter Panel
  • Operator Filter Panel
  • Part/Operation/MIS Filter Panel
• SignalR client service for real-time updates
• API client services:
  • IAuthService
  • ISearchService
  • ILookupService
  • IFileService
  • IRefreshStatusService
• ValidCombination model (search type definitions)
• State management via AuthStateProvider

Out of Scope

• Backend API implementation (Phase 8: web-api-auth)
• SignalR hub implementation (Phase 8: web-api-auth)
• Unit tests for Blazor components (bUnit testing deferred)
• Mobile-responsive design optimizations
• Offline/PWA functionality
• Dark mode theming

Motivation

The legacy ASP.NET MVC 5 / Kendo UI implementation has several limitations:

• License cost: Kendo UI requires commercial license
• Framework obsolescence: ASP.NET MVC 5 is not actively developed
• JavaScript complexity: Heavy jQuery-based scripting
• Page reload model: Full page reloads for navigation

Blazor WebAssembly with Radzen provides:

• Free tier: Radzen Blazor community edition is open source
• Modern framework: .NET 10 with full C# component model
• Type safety: C# throughout, no JavaScript required for core functionality
• SPA experience: No page reloads, smooth navigation
• SignalR integration: Native .NET SignalR client

Acceptance Criteria

1. All pages render correctly in modern browsers (Chrome, Firefox, Edge, Safari)
2. Login page authenticates via backend API (mocked initially)
3. Search List page displays user's searches with real-time status updates
4. Search Create/Edit page:
   • Search type dropdown controls filter panel visibility
   • All 8 filter panel types functional
   • Form validation prevents submission without required filters
   • Read-only mode for submitted searches with Copy button
5. Search Queue page displays all queued searches with processor status
6. Refresh Status page displays data sync history with date filtering
7. SignalR connection:
   • Connects on page load
   • Receives searchUpdate and statusUpdate events
   • Reconnects automatically on disconnect
8. All file upload/download flows functional (templates, data upload, results download)
9. Navigation is same-window (no popups or new tabs)
10. openspec validate implement-blazor-ui --strict passes

Dependencies

• Phase 8: implement-web-api-auth - Backend API endpoints for authentication, search operations, file handling
• JdeScoping.Client project: Already created with Blazor WASM and Radzen packages
• NuGet packages:
  • Radzen.Blazor Version="8.*" (already referenced)
  • Microsoft.AspNetCore.SignalR.Client Version="10.*" (already referenced)
  • Microsoft.AspNetCore.Components.WebAssembly Version="10.*" (already referenced)

Risks

Risk	Mitigation
API not ready	Mock services return static/test data until Phase 8 complete
SignalR connection issues	Implement robust reconnection with exponential backoff
File download in WASM	Use JS interop for browser download trigger
Large filter lists	Implement virtualization for autocomplete dropdowns
Component complexity	Extract reusable filter panel base component
Radzen version changes	Pin to specific minor version, test upgrades

Related Specs

• web-ui - Base specification for UI components and pages
• web-api-auth - API endpoints that UI will consume
• domain-models - ViewModels used in UI components