Web Layer (Blazor Server)

Project: KeDevO.YardPro.Web Type: Blazor Server (.NET 10.0) Render Mode: Interactive Server

The Web project is the Blazor Server front-end for YardPro — 18 pages, 7 admin tabs, 4 vehicle detail tabs.

Architecture

Browser ↔ SignalR ↔ Blazor Server (Web) → HTTP → API → Database

Server-rendered SPA — Blazor components execute on the server, DOM diffs streamed via SignalR.

Authentication Flow

1. Login form sends credentials to API
2. JWT token stored in ProtectedSessionStorage (encrypted, tab-scoped)
3. AuthMessageHandler attaches Bearer token to all API requests
4. 401 response → redirect to /login

Services

Service	Purpose
ApiClient	Typed HTTP client wrapping all API calls
AuthState	Session-scoped JWT management + claims parsing
AuthMessageHandler	Attaches JWT to outgoing HTTP + handles 401
CustomAuthStateProvider	Blazor AuthenticationStateProvider
ToastService	Toast notifications (success/error/warning)

Pages

Route	Page	Description
/	Home	Dashboard + VIN/registration lookup
/login	LoginPage	Animated login (EmptyLayout)
/vehicles	Vehicles	Search, filter by make/model/status
/vehicles/{Id}	VehicleDetails	Tabbed: Overview, Parts, Media, Facebook
/parts	Parts	Inventory with stats cards, batch labels
/parts/{Id}	PartDetails	Detail with media, interchange info
/customers	Customers	Customer management with type filtering
/invoices/{Id}	InvoiceDetail	Printable invoice with branding
/ebay	EbayListings	eBay integration hub
/interchange	Interchange	Part interchange database
/logs	Logs	System logs (God/SuperAdmin only)
/admin	AdminPage	Dynamic admin tabs (role-gated)

Admin Tabs

CompaniesTab, WorkersTab, YardLocationsTab, EbaySettingsTab, FacebookSettingsTab, LabelTemplatesTab, CatalogImportTab

Each implements IAdminTab and is auto-discovered. Set MinRole appropriately.

Vehicle Detail Tabs

• OverviewTab — Edit form + image carousel
• PartsTab — Parts table for vehicle
• MediaTab — Carousel + upload zone + video cards
• FacebookTab — Post composer + timeline + engagement

Layout

• MainLayout — Sidebar + content, auth guard, version badge
• NavMenu — Role-gated sidebar navigation
• EmptyLayout — Bare body for login page
• ReconnectModal — Custom SignalR reconnection UI
• ToastContainer — Fixed overlay, auto-dismiss after 5s

Styling

Technology	Usage
Bootstrap 5	Grid, utilities, forms
Bootstrap Icons	UI icons
Blazor CSS Isolation	Per-component .razor.css
Dark Mode	Full dark theme