Confirm?

Are you sure you want to proceed?
S
Sofia Vilosio

Responsive Veterinary System Home

Clone & Customize via AI

This MudBlazor Dashboard serves as a veterinary management system entry point, featuring a responsive top navigation bar (MudAppBar) and four distinct module access cards displayed using MudGrid. It implements a custom MudTheme for distinct branding and layout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
This component implements a core application landing page or dashboard menu using the MudBlazor component library, tailored for a management system interface. ## What's implemented A primary application dashboard layout is implemented, featuring a fixed header navigation bar (`MudAppBar`), a main content area using `MudContainer` and `MudGrid`, and four stylized, clickable informational cards linking to application modules. A system status alert section provides contextual information. ## Key components * `MudLayout`, `MudMainContent`: Structures the overall page. * `MudAppBar`, `MudButton`: Handles responsive top navigation and actions (e.g., 'Cerrar sesión'). * `MudGrid`, `MudItem`, `MudPaper`: Creates the responsive 4-column layout for the dashboard cards. * `MudIcon`, `MudText`, `MudLink`: Renders card content, utilizing bound data from `DashboardCardViewModel`. * `MudThemeProvider`: Applies a custom `GesVetTheme` for consistent color and layout properties. ## How it works The layout is managed by `MudLayout` components. The dashboard module links are dynamically rendered inside a responsive `MudGrid` by iterating over a predefined list of `DashboardCardViewModel` objects. Each card uses specific background and icon colors defined within its model instance. Navigation buttons in the header adapt visibility based on screen size (`d-none d-md-flex`). ## Styling The component relies on the MudBlazor framework and uses a custom `MudTheme` to set the primary color, app bar background, and default border radius. Custom CSS enhances the user experience by adding hover transitions (`transform`, `box-shadow`) and border styling to the `.dashboard-card` elements. ## Reuse steps 1. Install the MudBlazor NuGet package and register services in `Program.cs`. 2. Define the `DashboardCardViewModel` C# class. 3. Integrate the custom theme definition and custom CSS (`app.css` classes). 4. Replace placeholder URLs (`Href = "#"`) with actual application routes. 5. Adjust the initialization logic (`OnInitialized`) to load card data from a persistent source. ## Limitations & next steps This component provides only the UI structure and static data definition. Connecting the navigation buttons (e.g., 'Cerrar sesión') to authentication services and wiring up the card links to actual routed application pages are required next steps. While dark mode scaffolding is present via `MudThemeProvider` binding, a user toggle control is not included.