Update User Management CRUD UI to Match Purchase Order Pattern

Summary

Update the User Management CRUD pages to follow the modern UI patterns established in the CMMS Purchase Order module.

Current State

The User Management UI uses a legacy pattern with:

• Simple container layout (not fluid)
• No card-based form grouping
• Basic bordered tables (no hover/striped)
• Text-only buttons
• No status badges
• No dashboard statistics
• Single-column centered form layout
• No modals for destructive actions

Target State

Match the Purchase Order CRUD UI patterns:

• Container-fluid layout with dashboard statistics cards
• Card-based form grouping (Personal Info, Role & Access, Sites/LLCs)
• Responsive tables with hover/striped effects and client-side search
• Icon + text buttons for better UX
• Status badges for Active/Inactive users
• Two-column layout: main form (col-lg-8) + sidebar (col-lg-4)
• Modals for Deactivate/Reactivate confirmations
• Quick Actions sidebar card

Files to Update

Views

• src/ProAlert.Web/Views/User/Index.cshtml - Complete redesign
• src/ProAlert.Web/Views/User/Edit.cshtml - Complete redesign
• Consider adding: Create.cshtml, Details.cshtml

Controller

• src/ProAlert.Web/Controllers/UserController.cs - Add Details action, enhance Edit

ViewModels

• src/ProAlert.Web/ViewModels/ForUser/ - Add/enhance view models

Acceptance Criteria

• [ ] Index page has dashboard cards showing user statistics (Active, Inactive, By Role breakdown)
• [ ] Index page has card-wrapped responsive table with hover/striped styling
• [ ] Index page has client-side search/filter functionality
• [ ] Index page uses icon + text buttons (bi-pencil for Edit, bi-eye for Details)
• [ ] Index page shows status badges (Active=green, Inactive=red)
• [ ] Edit page uses two-column layout with card grouping
• [ ] Edit page has Quick Actions sidebar with Deactivate/Reactivate buttons
• [ ] Deactivate/Reactivate actions use confirmation modals
• [ ] All pages use container-fluid for consistent full-width layout
• [ ] Profile picture display integrated into card layout

Reference

See Purchase Order views for pattern reference:

• src/ProAlert.Web/Views/PurchaseOrder/Index.cshtml
• src/ProAlert.Web/Views/PurchaseOrder/Edit.cshtml
• src/ProAlert.Web/Views/PurchaseOrder/Details.cshtml