J
Josh Dietrich

Solar Project Customer Portal Design

MudBlazor Customer Portal displays project stages, referrals, review links and documents using MudStepper and MudCard layouts. Uses MudGrid and a responsive MudDrawer for layout and navigation.

LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Project progress view using a stepper filtered to last/current/next stages. - Project navigation drawer with selectable projects and a logout action. - Referral and review cards with hover elevation and click-to-open behavior. - Document list with links and submission dates. - Theme toggle and JS interop to open external links. ## Key components - MudLayout, MudAppBar, MudDrawer, MudMainContent - MudGrid, MudItem, MudContainer - MudStepper, MudStep (project progress) - MudCard, MudCardHeader, MudCardContent (referrals, reviews) - MudList, MudListItem, MudDivider (documents) - MudButton, MudIconButton, MudAvatar, MudText - IJSRuntime for OpenInNewTab ## How it works - Data is initialized in OnInitialized with mock lists for projects, project stages, documents, referrals and review sites. - MudStepper binds to _activeStepIndex via @bind-ActiveIndex to indicate the current stage. - Project selection sets selectedProject; cards use local hover state (IsHovered) to change elevation and OnClick to invoke OpenInNewTab via JS interop. - The theme toggle flips a local isDarkMode flag; full theme switching requires a MudThemeProvider registration in app startup. - Documents render as MudList items with MudLink targets opening in a new tab. ## Styling - Uses MudBlazor components and theming (no Tailwind or Bootstrap classes detected). - Layout relies on MudGrid breakpoints and DrawerVariant.Responsive for responsiveness. - Cards use elevation and small avatar badges for visual hierarchy; stepper displays secondary text dates per step. ## Reuse steps 1. Add the MudBlazor NuGet package to the project. 2. Register MudBlazor services and provider in Program.cs (AddMudServices, use MudThemeProvider/MudDialogProvider as needed). 3. Import MudBlazor namespace in _Imports.razor or the component (using MudBlazor). 4. Copy the page markup and view models; adjust models to match backend DTOs. 5. Replace mock data in OnInitialized with injected services (HTTP/GraphQL) and wire authentication for Logout. 6. Ensure IJSRuntime is available for external link opening or replace with NavigationManager where appropriate. ## Limitations & next steps - This is a single-page demo with mock data in OnInitialized; backend integration (API clients, repositories) is required for real data. - Authentication, authorization and logout flow are not implemented; wire into existing auth services or ASP.NET Core Identity. - Theme toggle only flips a local flag; integrate MudThemeProvider and persist user preference for full theming. - Add error handling, loading states, and unit tests when connecting to services. - Consider adding EditForm/DataAnnotations validation if editable forms are required for documents or project updates.