●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- RTL leadership/admin dashboard layout with a top action toolbar and navigation buttons.
- Donut/SVG pulse indicator for overall DeanshipPulse with dynamic stroke-dashoffset.
- Weekly performance summary with delta indicator and top achievements list.
- Priorities panel with badges and quick links to requests.
- KPI tiles grid with optional progress bars and icons.
- Departments grid rendering a reusable DepartmentCard component with progress bar, stats and action links.
- Client-side refresh logic that mutates mock data and calls StateHasChanged.
## Key components
- Razor components: LeadershipDashboard.razor, DepartmentCard.razor
- Models: DashboardModel, KpiModel, DepartmentModel, WeeklyPerf, PrioritiesModel
- Blazor primitives: @page, @code, [Inject] NavigationManager, [Parameter]
- UI elements: Bootstrap cards, buttons, progress bars, list-group, badges, SVG circle for KPI ring
- Icons: Font Awesome classes (e.g., fas fa-*)
## How it works
- Data is provided from MockData.GetDashboard() in OnInitialized and stored in a DashboardModel instance.
- The SVG donut uses computed PulseCircumference and GetPulseOffset(value) to set stroke-dashoffset for the visual fill.
- Buttons use @onclick to navigate (NavigationManager.NavigateTo) or call RefreshData which mutates model values and calls StateHasChanged.
- DepartmentCard is a child component receiving DepartmentModel via a [Parameter] and uses injected NavigationManager for per-department navigation.
- KPIs optionally show a progress bar when ProgressPercent >= 0 and use conditional classes and inline widths for progress visualization.
## Styling
- Uses Bootstrap CSS classes (container, row, col-*, card, btn, progress, badge, d-flex, text-muted) for layout and responsiveness.
- RTL layout is enabled by dir="rtl" on the root container; attention is required for flip of margins and alignment.
- Font Awesome is assumed for icons via class names like `fas fa-chart-bar`.
- No custom Tailwind or MudBlazor theming detected; responsiveness relies on Bootstrap grid breakpoints.
## Reuse steps
1. Add files LeadershipDashboard.razor, DepartmentCard.razor and LeadershipModels.cs to a Blazor project.
2. Ensure Bootstrap CSS and Font Awesome are included (wwwroot index/_Host or layout). No NuGet required for Bootstrap itself.
3. Import any namespaces as needed and register localization or RTL settings if using resource-based text.
4. Replace MockData with real data services: add an IDataDashboardService, register in Program.cs, and call it from OnInitializedAsync.
5. Wire navigation targets (/leadership/requests, /leadership/department/{id}) and implement corresponding pages or routes.
## Limitations & next steps
- This is a single demo page using MockData; server APIs, authentication and real services are not implemented.
- Navigation targets referenced by buttons are placeholders and require actual pages/routes.
- Accessibility checks are minimal: add aria-labels, proper contrast, and keyboard focus order for production.
- Consider extracting SVG donut into a small reusable component and adding unit tests for model mutations.
- Add localization resources for Arabic text and validate RTL spacing across breakpoints.