Update UIX Refactoring

Models/Repositories/PhSLookUpRepository.cs

@@ -59,7 +59,7 @@ namespace Models.Repositories
         }
         public async Task<IEnumerable<ELookUpItem>> PeopleListAsync(string filter, int limit = 10)
             => await _context.PhSPeople
-                .Where(c => c.Name.Contains(filter))
+                .Where(c => c.Name.Contains(filter) && c.Active)
                 .OrderBy(c => c.Name)
                 .Select(c => new ELookUpItem { Id = c.Id, Nombre = c.Name })
                 .Take(limit)

phronCare.UIBlazor/Layout/NavMenu.razor

@@ -0,0 +1,136 @@
+@inject NavMenuService navMenuService
+
+<div class="top-row ps-3 navbar navbar-dark border-bottom" style="padding: 0; border:0px solid red;">
+    <div class="container-fluid" style="padding:0; border:0px solid green;">
+        <a class="navbar-brand d-flex align-items-center" href="" style="height: 56px; border:0px solid yellow; display: block;">
+            @if (!navMenuService.Minimized)
+            {
+                <img src="images/Icono.png" alt="Logo" style="height: 50px; display: block; border:0px solid blue;" />
+            }
+        </a>
+        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </div>
+</div>
+
+<div class="@($"{NavMenuCssClass} nav-scrollable bg-dark text-white")" @onclick="ToggleNavMenu" style="padding-top:4px;">
+    <nav class="flex-column text-center">
+        <div class="nav-item px-2 py-0">
+            <NavLink class="nav-link text-white d-flex align-items-center gap-2 py-0 px-2" href="/DashboardPanel" Match="NavLinkMatch.All" activeClass="bg-secondary text-white">
+                <span class="oi oi-home" aria-hidden="true"></span>
+                @if (!navMenuService.Minimized)
+                {
+                    <label class="mb-0">Home</label>
+                }
+            </NavLink>
+        </div>
+
+        <AuthorizeView Roles="Admin">
+            <div class="nav-item px-2 py-0">
+                <NavLink class="nav-link text-white d-flex align-items-center gap-2 py-0 px-2" href="roles" activeClass="bg-secondary text-white">
+                    <span class="oi oi-shield" aria-hidden="true"></span>
+                    @if (!navMenuService.Minimized)
+                    {
+                        <label class="mb-0">Roles</label>
+                    }
+                </NavLink>
+            </div>
+            <div class="nav-item px-2 py-0">
+                <NavLink class="nav-link text-white d-flex align-items-center gap-2 py-0 px-2" href="users" activeClass="bg-secondary text-white">
+                    <span class="oi oi-people" aria-hidden="true"></span>
+                    @if (!navMenuService.Minimized)
+                    {
+                        <label class="mb-0">Usuarios</label>
+                    }
+                </NavLink>
+            </div>
+        </AuthorizeView>
+
+        <div class="nav-item px-2 py-0">
+            <NavLink class="nav-link text-white d-flex align-items-center gap-2 py-0 px-2" @onclick="() => expClientes = !expClientes">
+                <span class="oi oi-briefcase" aria-hidden="true"></span>
+                @if (!navMenuService.Minimized)
+                {
+                    <label class="mb-0">Ventas</label>
+                }
+            </NavLink>
+
+            @if (expClientes)
+            {
+                <ul class="nav flex-column">
+                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
+                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="sales/customers/" activeClass="bg-secondary text-white fw-semibold">
+                            <i class="bi bi-person-lines-fill me-2 text-primary"></i> Clientes
+                        </NavLink>
+                    </div>
+                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
+                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="quotes" activeClass="bg-secondary text-white fw-semibold">
+                            <i class="bi bi-receipt me-2 text-white"></i> Presupuesto
+                        </NavLink>
+                    </div>
+                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
+                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="sales/institutions/" activeClass="bg-secondary text-white fw-semibold">
+                            <i class="bi bi-building me-2 text-info"></i> Instituciones
+                        </NavLink>
+                    </div>
+                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
+                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="sales/patients/" activeClass="bg-secondary text-white fw-semibold">
+                            <i class="bi bi-person-heart me-2 text-danger"></i> Pacientes
+                        </NavLink>
+                    </div>
+                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
+                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="sales/products/" activeClass="bg-secondary text-white fw-semibold">
+                            <i class="bi bi-box-seam me-2 text-warning"></i> Productos
+                        </NavLink>
+                    </div>
+                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
+                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="sales/professionals/" activeClass="bg-secondary text-white fw-semibold">
+                            <i class="bi bi-person-badge me-2 text-info"></i> Profesionales
+                        </NavLink>
+                    </div>
+                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
+                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="sales/people/" activeClass="bg-secondary text-white fw-semibold">
+                            <i class="bi bi-people me-2 text-success"></i> Vendedores
+                        </NavLink>
+                    </div>
+                </ul>
+            }
+        </div>
+
+        <div class="nav-item px-2 py-0">
+            <NavLink class="nav-link text-white d-flex align-items-center gap-2 py-0 px-2" href="tickets/ticketform/" activeClass="bg-secondary text-white">
+                <span class="oi oi-list-rich" aria-hidden="true"></span>
+                @if (!navMenuService.Minimized)
+                {
+                    <label class="mb-0">Nuevo Ticket</label>
+                }
+            </NavLink>
+        </div>
+    </nav>
+</div>
+
+@code {
+    private bool collapseNavMenu = true;
+    private bool minimizeNavMenu = false;
+    private bool expClientes = false;
+
+    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    [Parameter]
+    public EventCallback<bool> MinStatus { get; set; }
+
+    [CascadingParameter]
+    public IModalService Modal { get; set; } = default!;
+
+    private void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+
+    private async void ToggleIconMenu()
+    {
+        minimizeNavMenu = !minimizeNavMenu;
+        await MinStatus.InvokeAsync(minimizeNavMenu);
+    }
+}

phronCare.UIBlazor/Pages/Sales/Quotes/QuoteCreate.razor

@@ -26,8 +26,8 @@
                 <!-- FILA 1: Cliente, Vendedor -->
                 <div class="row mb-3">
                     <div class="col-md-6 add-wrapper">
-                        <label class="form-label">Cliente *</label>
+                        <label for="clientes">Cliente *</label>
-                        <BlazoredTypeahead TItem="ELookUpItem" TValue="ELookUpItem"
+                        <BlazoredTypeahead id="clientes" TItem="ELookUpItem" TValue="ELookUpItem"
                         SearchMethod="SalesLookupService.SearchCustomersAsync"
                         Value="_selectedCustomer"
                         ValueChanged="OnCustomerSelected"
@@ -40,8 +40,8 @@
                         <button type="button" class="add-btn" title="Agregar nuevo">+</button>
                     </div>
                     <div class="col-md-6 add-wrapper">
-                        <label class="form-label">Vendedor *</label>
+                        <label for="vendedores">Vendedor *</label>
-                        <BlazoredTypeahead TItem="ELookUpItem" TValue="ELookUpItem"
+                        <BlazoredTypeahead id="vendedores" TItem="ELookUpItem" TValue="ELookUpItem"
                         SearchMethod="SalesLookupService.SearchPeopleAsync"
                         Value="_selectedPerson"
                         ValueChanged="OnPersonSelected"
@@ -57,8 +57,8 @@
                 <!-- FILA 2: Profesional, Paciente -->
                 <div class="row mb-3">
                     <div class="col-md-6 add-wrapper">
-                        <label class="form-label">Profesional *</label>
+                        <label for="profesionales">Profesional *</label>
-                        <BlazoredTypeahead TItem="ELookUpItem" TValue="ELookUpItem"
+                        <BlazoredTypeahead id="profesionales" TItem="ELookUpItem" TValue="ELookUpItem"
                         SearchMethod="SalesLookupService.SearchProfessionalsAsync"
                         Value="_selectedProfessional"
                         ValueChanged="OnProfessionalSelected"
@@ -73,8 +73,8 @@
 
                     </div>
                     <div class="col-md-6 add-wrapper">
-                        <label class="form-label">Paciente *</label>
+                        <label for="pacientes">Paciente *</label>
-                        <BlazoredTypeahead TItem="ELookUpItem" TValue="ELookUpItem"
+                        <BlazoredTypeahead id="pacientes" TItem="ELookUpItem" TValue="ELookUpItem"
                         SearchMethod="SalesLookupService.SearchPatientsAsync"
                         Value="_selectedPatient"
                         ValueChanged="OnPatientSelected"
@@ -90,8 +90,8 @@
                 <!-- FILA 3: Institución, Unidad de negocio -->
                 <div class="row mb-3">
                     <div class="col-md-6 add-wrapper">
-                        <label class="form-label">Institución *</label>
+                        <label for="instituciones">Institución *</label>
-                        <BlazoredTypeahead TItem="ELookUpItem" TValue="ELookUpItem"
+                        <BlazoredTypeahead id="instituciones" TItem="ELookUpItem" TValue="ELookUpItem"
                         SearchMethod="SalesLookupService.SearchInstitutionsAsync"
                         Value="_selectedInstitution"
                         ValueChanged="OnInstitutionSelected"
@@ -104,8 +104,8 @@
                         <button type="button" class="add-btn" title="Agregar institución">+</button>
                     </div>
                     <div class="col-md-6">
-                        <label class="form-label">Unidad de negocio *</label>
+                        <label for="unidad">Unidad de negocio *</label>
-                        <InputSelect class="form-select" @bind-Value="_quoteModel.BusinessunitId">
+                        <InputSelect id="unidad" class="form-select" @bind-Value="_quoteModel.BusinessunitId">
                             <option disabled selected value="">Seleccione...</option>
                             @foreach (var unidad in _businessUnits)
                             {
@@ -117,8 +117,8 @@
                 <!-- FILA 4: Moneda, Cambio, OutOfTown -->
                 <div class="row mb-3">
                     <div class="col-md-4">
-                        <label class="form-label">Moneda</label>
+                        <label id="moneda">Moneda</label>
-                        <InputSelect class="form-select" @bind-Value="_quoteModel.Currency">
+                        <InputSelect id="moneda" class="form-select" @bind-Value="_quoteModel.Currency">
                             <option value="">-- Seleccionar moneda --</option>
                             <option value="ARS">ARS</option>
                             <option value="USD">USD</option>
@@ -126,8 +126,8 @@
 
                     </div>
                     <div class="col-md-4">
-                        <label class="form-label">Tipo de cambio</label>
+                        <label id="cambio">Tipo de cambio</label>
-                        <InputNumber class="form-control" @bind-Value="_quoteModel.Exchangerate"/>
+                        <InputNumber id="cambio" class="form-control" @bind-Value="_quoteModel.Exchangerate"/>
                     </div>
                     <div class="col-md-4 d-flex align-items-end">
                         <div class="form-check form-switch">
@@ -139,12 +139,12 @@
                 <!-- FILA 5: Instrucciones y Observaciones -->
                 <div class="row mb-3">
                     <div class="col-md-6">
-                        <label class="form-label">Instrucciones de despacho</label>
+                        <label id="despacho">Instrucciones de despacho</label>
-                        <InputText class="form-control" @bind-Value="_quoteModel.DispatchInstruction" />
+                        <InputText id="despacho" class="form-control" @bind-Value="_quoteModel.DispatchInstruction" />
                     </div>
                     <div class="col-md-6">
-                        <label class="form-label">Observaciones</label>
+                        <label id="observaciones">Observaciones</label>
-                        <InputText class="form-control" @bind-Value="_quoteModel.Observations" />
+                        <InputText id="observaciones" class="form-control" @bind-Value="_quoteModel.Observations" />
                     </div>
                 </div>
                 <!-- TABLA DETALLE: Productos Cotizados -->

phronCare.UIBlazor/Shared/NavMenu.razor

@@ -1,137 +0,0 @@
-@inject NavMenuService navMenuService
-
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-
-        <a class="navbar-brand" href="">
-            @if (!navMenuService.Minimized)
-            {
-                <img src="images/Icono.png" alt="Logo" style="width: 120px; height: auto; align-items:center;vertical-align:central;" @ondblclick="ToggleIconMenu" />
-                <label @ondblclick="ToggleIconMenu"></label>
-            }
-        </a>
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        @if (navMenuService.Minimized)
-        {
-            <span class="d-none d-lg-block oi oi-arrow-circle-right icon-white" style="font-size: 18px;" aria-hidden="true" @onclick="ToggleIconMenu"> </span>
-        }
-        else
-        {
-            <span class="d-none d-lg-block oi oi-arrow-circle-left icon-white" style="font-size: 18px;" aria-hidden="true" @onclick="ToggleIconMenu"> </span>
-        }
-    </div>
-</div>
-
-<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
-    <nav class="flex-column" style="zoom:90%">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="/DashboardPanel" Match="NavLinkMatch.All">
-                <span class="oi oi-home" aria-hidden="true"></span> 
-                @if (!navMenuService.Minimized)
-                {
-                    <label>Home</label>
-                }
-            </NavLink>
-        </div>
-        <AuthorizeView Roles="Admin">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="roles">
-                <span class="oi oi-shield" aria-hidden="true"></span> 
-                @if (!navMenuService.Minimized)
-                {
-                    <label>Roles</label>
-                }
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="users">
-                <span class="oi oi-people" aria-hidden="true"></span>
-                @if (!navMenuService.Minimized)
-                {
-                    <label>Usuarios</label>
-                }
-            </NavLink>
-        </div>
-        </AuthorizeView>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" @onclick="()=>expClientes=!expClientes">
-                <span class="oi oi-briefcase" aria-hidden="true"></span>
-                @if (!navMenuService.Minimized)
-                {
-                    <label>Ventas</label>
-                }
-            </NavLink>
-            @if (expClientes)
-            {
-                <ul class="nav-flex-column">
-                    <div class="nav-item px-1">
-                        <NavLink class="nav-link" href="sales/customers/">
-                            <li aria-hidden="true"></li> Clientes
-                        </NavLink>
-                    </div>
-                    <div class="nav-item px-1">
-                        <NavLink class="nav-link" href="sales/patients/">
-                            <li aria-hidden="true"></li> Pacientes
-                        </NavLink>
-                    </div>
-                    <div class="nav-item px-1">
-                        <NavLink class="nav-link" href="sales/products/">
-                            <li aria-hidden="true"></li> Productos
-                        </NavLink>
-                    </div>
-                    <div class="nav-item px-1">
-                        <NavLink class="nav-link" href="sales/professionals/">
-                            <li aria-hidden="true"></li> Profesionales
-                        </NavLink>
-                    </div>
-                    <div class="nav-item px-1">
-                        <NavLink class="nav-link" href="sales/people/">
-                            <li aria-hidden="true"></li> Vendedores
-                        </NavLink>
-                    </div>
-                    <div class="nav-item px-1">
-                        <NavLink class="nav-link" href="sales/institutions/">
-                            <li aria-hidden="true"></li> Instituciones
-                        </NavLink>
-                    </div>
-                    <div class="nav-item px-1">
-                        <NavLink class="nav-link" href="quotes">
-                            <li aria-hidden="true"></li> Presupuesto
-                        </NavLink>
-                    </div>
-                   
-                </ul>
-            }
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="tickets/ticketform/">
-                <span class="oi oi-list-rich" aria-hidden="true"></span>
-                @if (!navMenuService.Minimized)
-                {
-                    <label>Nuevo Ticket</label>
-                }
-            </NavLink>
-        </div>
-    </nav>
-</div>
-
-@code {
-    private bool collapseNavMenu = true;
-    private bool minimizeNavMenu = false;
-    private bool expClientes = false;
-    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
-    [Parameter]
-    public EventCallback<bool> MinStatus { get; set; }
-    [CascadingParameter] public IModalService Modal { get; set; } = default!;
-    private void ToggleNavMenu()
-    {
-        collapseNavMenu = !collapseNavMenu;
-    }
-    private async void ToggleIconMenu()
-    {
-        minimizeNavMenu = !minimizeNavMenu;
-        await MinStatus.InvokeAsync(minimizeNavMenu);
-    }
-}

phronCare.UIBlazor/_Imports.razor

@@ -8,7 +8,9 @@
 @using Microsoft.AspNetCore.Components.Authorization
 @using Microsoft.JSInterop
 @using phronCare.UIBlazor
+@using phronCare.UIBlazor.Layout
 @using phronCare.UIBlazor.Models.Login
+
 @using phronCare.UIBlazor.Shared
 @using phronCare.UIBlazor.Shared.Components
 @using phronCare.UIBlazor.Services.Tickets

phronCare.UIBlazor/wwwroot/css/app.css

@@ -18,9 +18,16 @@
     list-style-type: square;
     padding-left: 20px; /* Alineación adecuada para submenús */
 }
+
 .nav-item {
-    padding: 5px 0;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
 }
+
+.nav-link label {
+    font-size: 0.875rem;
+}
+
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
@@ -29,6 +36,15 @@ h1:focus {
     outline: none;
 }
 
+.nav-link:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #fff;
+    transition: background-color 0.2s;
+}
+
+.nav-item {
+    margin-bottom: 0.25rem;
+}
 a, .btn-link {
     /*color: #0071c1;*/
     color: var(--link-color);

phronCare.UIBlazor/wwwroot/index.html

@@ -18,6 +18,8 @@
           integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
           crossorigin="" />
     <link href="_content/Blazored.Typeahead/blazored-typeahead.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+
     <!-- Leaflet JS -->
     <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
             integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="