Confirm?

Are you sure you want to proceed?
?

Pharmacovigilance Project Interfaces

Clone & Customize via AI

Blazor Role Interfaces renders a Bootstrap card grid that lists modules filtered by selected role. The page uses InputSelect binding and role gating to toggle Manage buttons and navigation links.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Role selector (InputSelect) to change current role. - Bootstrap card grid listing interface modules with title, description, tags and icons. - Role-based gating that enables or disables a "Gérer" (Manage) action. - NavLink buttons to navigate to module routes. - Basic demo manage handler that logs an action server-side (Console.WriteLine). - Advice list for authentication, workflow, exports and audit. ## Key components - InputSelect (with @bind-Value) - NavLink and button elements with @onclick - InterfaceModel and in-memory DataStore (List<InterfaceModel>) - LINQ-based VisibleInterfaces (Where / OrderBy) - Bootstrap markup: .container, .row, .col-*, .card, .badge - FontAwesome icon classes used in <i> elements ## How it works - The page binds selectedRole via @bind-Value on InputSelect and computes VisibleInterfaces by filtering DataStore.AllInterfaces where AllowedRoles contains the selected role. - Conditional UI uses CanManage(role) to show an enabled primary Manage button when the role is Admin or Responsable; otherwise the button is disabled. - Clicking Manage calls OnManage which currently writes a timestamped message to the server console (mock behavior). Navigation uses NavLink hrefs on each card. - Tags are rendered with Bootstrap badges and the grid is responsive via column breakpoints (col-sm-6, col-lg-4). ## Styling - Uses Bootstrap utility and layout classes (container, row, col-*, card, btn, badge, text-muted). - FontAwesome provides icons via interface Icon property (e.g., "fa fa-tachometer-alt"). - Cards are arranged in a responsive grid; Bootstrap breakpoints handle stacking on small screens. ## Reuse steps 1. Copy the Razor page and the InterfaceModel/DataStore or replace DataStore with a domain service. 2. Ensure Bootstrap CSS and FontAwesome are referenced (Blazor templates include Bootstrap by default; add FA CSS). 3. If converting DataStore to a service, register it in Program.cs (services.AddSingleton<ISomeService,Impl>();) and inject it into the component. 4. Wire authentication/authorization (AddAuthentication/AddAuthorization, role claims, and AuthorizeView/Authorize attributes) to enforce role checks instead of the local CanManage helper. 5. Implement backend endpoints for module metadata and Manage actions; replace Console.WriteLine with API calls and navigation to admin pages. ## Limitations & next steps - This is a single in-memory page generated by Instruct UI; DataStore is static and not persisted. - No real authentication/authorization enforcement; role checks are local string comparisons. - OnManage is a mock that logs to the server console; implement real navigation or admin APIs. - Consider adding localization, server-side paging for large catalogs, unit tests, and telemetry for audits.