V
Vikas Pandey

Convert C Sharp Desktop to

Blazor Admin Dashboard showing module overview pages with a Bootstrap card grid and top NavLink navigation. Layout.MainLayout provides header, horizontal nav and a main content region.

LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Top application header with user info and icon. - Horizontal module navigation bar using NavLink items. - Module overview pages (CRM, Catalog, Purchasing, Inventory, Equipment, Accounting, Service, Reports, Configuration) composed of Bootstrap cards arranged in a row/col grid. - Action buttons on cards (View / Manage / Create) and simple hover effects. ## Key components - LayoutComponentBase (MainLayout.razor) and @Body placeholder. - NavLink and NavLinkMatch for navigation state. - Bootstrap grid classes (row, col-md-6, col-lg-4) and card/button markup. - Static CSS files (Layout/MainLayout.razor.css and wwwroot/css/app.css) and FontAwesome icon usage. ## How it works - MainLayout renders a header, a horizontally scrollable navigation (.nav-items) and the main content area where each page injects its module cards via @Body. - NavLink items use href and Match to set active state; `.nav-item.active` style is applied via class selectors. - Pages are static markup with buttons that currently do not bind to click handlers or services. - No @bind-* or EditForm elements are present; interaction is via client-side anchors/buttons that require wiring to event handlers or navigation. ## Styling - Uses Bootstrap utility and structural classes (row, col-*, btn, card) for layout and responsive behavior. - Layout/MainLayout.razor.css provides custom layout rules for header, nav, and responsive nav collapsing behavior (hides nav text at ≤768px). - app.css contains card styling, shadows and module container visuals. - FontAwesome icons are referenced in markup but require the FontAwesome stylesheet to be included in the host (_Host.cshtml / index.html). ## Reuse steps 1. Add Bootstrap and FontAwesome to the project (CDN links or local files) and include wwwroot/css/app.css. 2. Add MainLayout.razor and MainLayout.razor.css to a Layout folder and reference it with @layout in pages. 3. Copy pages (e.g., Pages/CRM.razor) into the Pages folder and ensure routing (@page) is preserved. 4. Wire navigation actions: replace static buttons with Blazor EventCallback methods or NavigationManager.NavigateTo calls. 5. Register any backend services (API clients, authentication) in Program.cs and inject into pages/components as needed. ## Limitations & next steps - Pages contain static markup only; data loading, event handlers and API service wiring are not implemented. - No authentication/authorization integration for the navigation or content access. - Accessibility attributes (aria-*), focus management and keyboard navigation for the nav are not present and should be added. - Consider replacing static cards with reusable components or a data-driven grid, and add state management for active module and user session handling.