Merge pull request 'feat(frontend): sidebar colapsable por secciones + fly-out en modo colapsado' (#62 ) from chore/sidebar-collapsible-sections into main

feat(frontend): sidebar secciones colapsables + fly-out en modo colapsado
Mejora UX post-refactor (PR #61): las 4 secciones del sidebar expandido son ahora colapsables individualmente, y el modo colapsado reemplaza la lista larga de iconos por un icono por grupo con fly-out panel on hover. Expandido (240px): - Click en header de sección (Seguridad/Maestros/Catálogo/Tasación) toggle collapse con chevron que rota. - Default: todas colapsadas EXCEPTO la que contiene la ruta activa (auto-expand override). - Sección activa tiene el header disabled + sin chevron (no se puede colapsar mientras estás ahí — evita esconder items de la ruta actual). - Preferencia per-sección persistida en localStorage. Colapsado (68px): - Un icono por grupo en lugar de listar TODOS los items (evitando scroll largo en usuarios con muchos permisos). - Hover sobre el grupo despliega un fly-out panel al lado derecho con el título del grupo + sus items clickeables. - Grupo que contiene la ruta activa tiene un dot indicator. - Icons de grupo: ShieldCheck (Seguridad), Building2 (Maestros), Package (Catálogo), Calculator (Tasación). Accessibility: - Headers expandidos: aria-expanded refleja estado. - Fly-out: aria-haspopup='menu' + role='menu' + keyboard focus. z-index management (pedido explícito del user): - aside wrapper en ProtectedLayout: z-10 -> z-30 (sobre contenido). - HoverCardContent del fly-out: z-[60] (sobre cualquier overlay app-level, excepto modal dialogs que siguen siendo z-50 por convención Radix). - hover-card.tsx: envuelto en HoverCardPrimitive.Portal (faltaba en el shadcn generated) — previene que el fly-out quede cortado por overflow del aside. Dependencies: - shadcn hover-card agregado via 'npx shadcn@latest add' (+ @radix-ui/react-hover-card). Tests: - 16 tests (antes 10) — agregados 6 casos: default collapsed except active, click toggle expand/collapse, aria-expanded reflection, disabled header when active, root route collapses all, localStorage persistence.
2026-04-21 17:09:07 +00:00 · 2026-04-21 14:07:12 -03:00 · 2026-04-21 16:38:17 +00:00 · 2026-04-21 13:37:53 -03:00 · 2026-04-21 16:28:29 +00:00 · 2026-04-21 13:27:54 -03:00
15 changed files with 889 additions and 157 deletions
--- a/database/README.md
+++ b/database/README.md
@@ -41,6 +41,7 @@ database/
 | V022 | `V022__seed_chargeable_char_config.sql` | PRC-001 | Seed 4 filas globales (`$`, `%`, `!`, `¡`) con PricePerUnit=1.0000 |
 | V023 | `V023__refactor_chargeable_char_config_to_product_type.sql` | PRC-001 (scope delta) | Refactor MedioId→ProductTypeId + nuevo SP `ReactivateWithGuard` + CK_Price_NonNegative (>= 0) |
 | V024 | `V024__reseed_global_with_zero_price.sql` | PRC-001 (scope delta) | Reseed 4 globales a PricePerUnit=0.0000 (opt-in billing) |
+| V025 | `V025__seed_chargeable_char_overrides_demo.sql` | PRC-001 (followup #54) | Seed demo de overrides ficticios per-ProductType (Clasificado/Notables/Fúnebres). Idempotente: no-op si los tipos no existen |

 ## Convenciones

--- a/database/migrations/V025_ROLLBACK.sql
+++ b/database/migrations/V025_ROLLBACK.sql
@@ -0,0 +1,20 @@
+-- V025_ROLLBACK.sql
+-- Reversa de V025 — elimina los overrides demo de ChargeableCharConfig.
+-- Los globales V022/V024 (ProductTypeId IS NULL) NO se tocan.
+
+SET QUOTED_IDENTIFIER ON;
+SET ANSI_NULLS ON;
+SET NOCOUNT ON;
+GO
+
+DELETE FROM dbo.ChargeableCharConfig
+ WHERE ProductTypeId IS NOT NULL
+   AND ValidTo IS NULL
+   AND Symbol IN (N'$', N'%', N'!', N'¡')
+   AND ProductTypeId IN (
+       SELECT Id FROM dbo.ProductType
+        WHERE Nombre IN ('Clasificado', 'Notables', 'Fúnebres', 'Funebres')
+   );
+
+PRINT 'V025 rolled back — demo overrides eliminated. Globales V022/V024 preservados.';
+GO
--- a/database/migrations/V025__seed_chargeable_char_overrides_demo.sql
+++ b/database/migrations/V025__seed_chargeable_char_overrides_demo.sql
@@ -0,0 +1,101 @@
+-- V025__seed_chargeable_char_overrides_demo.sql
+-- PRC-001 followup #54: seeders de demo con valores ficticios per-ProductType.
+--
+-- Estrategia:
+--   1. Los 4 globales de V022+V024 quedan en 0.0000 (opt-in billing baseline).
+--   2. Para ProductTypes conocidos del roadmap (Clasificado, Notables, Fúnebres),
+--      inserta overrides con precios ficticios coherentes con datos de demo del resto
+--      del proyecto. Si el ProductType no existe, el bloque correspondiente no hace nada.
+--   3. Cuando PRD-008 seede los 12 tipos legacy, V025 puede re-aplicarse y creará
+--      los overrides que falten (MERGE idempotente).
+--
+-- Precios ficticios (placeholders de demo — NO son tarifas reales):
+--   Clasificado:   $ = 5.0000, % = 3.0000, ! = 2.0000, ¡ = 2.0000
+--   Notables:      $ = 8.0000, % = 5.0000, ! = 4.0000, ¡ = 4.0000
+--   Fúnebres:      $ = 6.0000, % = 4.0000, ! = 3.5000, ¡ = 3.5000
+--
+-- Reversa: V025_ROLLBACK.sql (elimina los overrides demo dejando solo los globales V022/V024).
+-- Run on: SIGCM2 (dev), SIGCM2_Test_App, SIGCM2_Test_Api.
+-- Idempotente: usa MERGE por (ProductTypeId, Symbol, ValidTo IS NULL).
+
+SET QUOTED_IDENTIFIER ON;
+SET ANSI_NULLS ON;
+SET NOCOUNT ON;
+GO
+
+DECLARE @ClasificadoId INT = (SELECT TOP 1 Id FROM dbo.ProductType WHERE Nombre = 'Clasificado' AND IsActive = 1);
+DECLARE @NotablesId    INT = (SELECT TOP 1 Id FROM dbo.ProductType WHERE Nombre = 'Notables'    AND IsActive = 1);
+DECLARE @FunebresId    INT = (SELECT TOP 1 Id FROM dbo.ProductType WHERE Nombre IN ('Fúnebres','Funebres') AND IsActive = 1);
+
+DECLARE @DemoValidFrom DATE = '2026-01-01';
+
+-- Clasificado overrides
+IF @ClasificadoId IS NOT NULL
+BEGIN
+    MERGE dbo.ChargeableCharConfig AS t
+    USING (VALUES
+        (@ClasificadoId, N'$', N'Currency',    CAST(5.0000 AS DECIMAL(18,4)), @DemoValidFrom),
+        (@ClasificadoId, N'%', N'Percentage',  CAST(3.0000 AS DECIMAL(18,4)), @DemoValidFrom),
+        (@ClasificadoId, N'!', N'Exclamation', CAST(2.0000 AS DECIMAL(18,4)), @DemoValidFrom),
+        (@ClasificadoId, N'¡', N'Exclamation', CAST(2.0000 AS DECIMAL(18,4)), @DemoValidFrom)
+    ) AS s (ProductTypeId, Symbol, Category, PricePerUnit, ValidFrom)
+    ON (t.ProductTypeId = s.ProductTypeId AND t.Symbol = s.Symbol AND t.ValidTo IS NULL)
+    WHEN NOT MATCHED THEN
+        INSERT (ProductTypeId, Symbol, Category, PricePerUnit, ValidFrom, ValidTo, IsActive)
+        VALUES (s.ProductTypeId, s.Symbol, s.Category, s.PricePerUnit, s.ValidFrom, NULL, 1);
+    PRINT 'V025: Clasificado overrides seeded (ProductTypeId=' + CAST(@ClasificadoId AS NVARCHAR(10)) + ').';
+END
+ELSE
+    PRINT 'V025: ProductType "Clasificado" not found — skipping Clasificado overrides.';
+GO
+
+DECLARE @NotablesId INT = (SELECT TOP 1 Id FROM dbo.ProductType WHERE Nombre = 'Notables' AND IsActive = 1);
+DECLARE @DemoValidFrom DATE = '2026-01-01';
+
+-- Notables overrides
+IF @NotablesId IS NOT NULL
+BEGIN
+    MERGE dbo.ChargeableCharConfig AS t
+    USING (VALUES
+        (@NotablesId, N'$', N'Currency',    CAST(8.0000 AS DECIMAL(18,4)), @DemoValidFrom),
+        (@NotablesId, N'%', N'Percentage',  CAST(5.0000 AS DECIMAL(18,4)), @DemoValidFrom),
+        (@NotablesId, N'!', N'Exclamation', CAST(4.0000 AS DECIMAL(18,4)), @DemoValidFrom),
+        (@NotablesId, N'¡', N'Exclamation', CAST(4.0000 AS DECIMAL(18,4)), @DemoValidFrom)
+    ) AS s (ProductTypeId, Symbol, Category, PricePerUnit, ValidFrom)
+    ON (t.ProductTypeId = s.ProductTypeId AND t.Symbol = s.Symbol AND t.ValidTo IS NULL)
+    WHEN NOT MATCHED THEN
+        INSERT (ProductTypeId, Symbol, Category, PricePerUnit, ValidFrom, ValidTo, IsActive)
+        VALUES (s.ProductTypeId, s.Symbol, s.Category, s.PricePerUnit, s.ValidFrom, NULL, 1);
+    PRINT 'V025: Notables overrides seeded (ProductTypeId=' + CAST(@NotablesId AS NVARCHAR(10)) + ').';
+END
+ELSE
+    PRINT 'V025: ProductType "Notables" not found — skipping Notables overrides.';
+GO
+
+DECLARE @FunebresId INT = (SELECT TOP 1 Id FROM dbo.ProductType WHERE Nombre IN ('Fúnebres','Funebres') AND IsActive = 1);
+DECLARE @DemoValidFrom DATE = '2026-01-01';
+
+-- Fúnebres overrides
+IF @FunebresId IS NOT NULL
+BEGIN
+    MERGE dbo.ChargeableCharConfig AS t
+    USING (VALUES
+        (@FunebresId, N'$', N'Currency',    CAST(6.0000 AS DECIMAL(18,4)), @DemoValidFrom),
+        (@FunebresId, N'%', N'Percentage',  CAST(4.0000 AS DECIMAL(18,4)), @DemoValidFrom),
+        (@FunebresId, N'!', N'Exclamation', CAST(3.5000 AS DECIMAL(18,4)), @DemoValidFrom),
+        (@FunebresId, N'¡', N'Exclamation', CAST(3.5000 AS DECIMAL(18,4)), @DemoValidFrom)
+    ) AS s (ProductTypeId, Symbol, Category, PricePerUnit, ValidFrom)
+    ON (t.ProductTypeId = s.ProductTypeId AND t.Symbol = s.Symbol AND t.ValidTo IS NULL)
+    WHEN NOT MATCHED THEN
+        INSERT (ProductTypeId, Symbol, Category, PricePerUnit, ValidFrom, ValidTo, IsActive)
+        VALUES (s.ProductTypeId, s.Symbol, s.Category, s.PricePerUnit, s.ValidFrom, NULL, 1);
+    PRINT 'V025: Fúnebres overrides seeded (ProductTypeId=' + CAST(@FunebresId AS NVARCHAR(10)) + ').';
+END
+ELSE
+    PRINT 'V025: ProductType "Fúnebres/Funebres" not found — skipping Fúnebres overrides.';
+GO
+
+PRINT '';
+PRINT 'V025 applied — demo overrides (fictitious prices) seeded for ProductTypes: Clasificado, Notables, Fúnebres (only where they exist).';
+PRINT 'NOTE: Los 4 globales (V022/V024) quedan intactos en 0.0000. Estos overrides son PLACEHOLDERS DE DEMO — reemplazar antes de go-live.';
+GO
--- a/src/api/SIGCM2.Application/Pricing/ChargeableChars/Create/CreateChargeableCharConfigCommandValidator.cs
+++ b/src/api/SIGCM2.Application/Pricing/ChargeableChars/Create/CreateChargeableCharConfigCommandValidator.cs
@@ -1,6 +1,7 @@
 using FluentValidation;
 using SIGCM2.Application.Common;
 using SIGCM2.Domain.Pricing.ChargeableChars;
+using SIGCM2.Domain.Pricing.WordCounter;

 namespace SIGCM2.Application.Pricing.ChargeableChars.Create;

@@ -19,7 +20,9 @@ public sealed class CreateChargeableCharConfigCommandValidator
            .NotEmpty()
            .WithMessage("Symbol no puede estar vacío.")
            .MaximumLength(4)
-            .WithMessage("Symbol no puede exceder 4 caracteres.");
+            .WithMessage("Symbol no puede exceder 4 caracteres.")
+            .Must(s => !WordCounterService.ContainsEmoji(s))
+            .WithMessage("Symbol no puede contener emojis. Usá símbolos ASCII o latinos (ej: $, %, !, ¡).");

        RuleFor(x => x.Category)
            .NotEmpty()
@@ -28,8 +31,8 @@ public sealed class CreateChargeableCharConfigCommandValidator
            .WithMessage($"Category inválida. Valores válidos: {string.Join(", ", new[] { ChargeableCharCategories.Currency, ChargeableCharCategories.Percentage, ChargeableCharCategories.Exclamation, ChargeableCharCategories.Question, ChargeableCharCategories.Other })}.");

        RuleFor(x => x.PricePerUnit)
-            .GreaterThan(0m)
-            .WithMessage("PricePerUnit debe ser > 0.");
+            .GreaterThanOrEqualTo(0m)
+            .WithMessage("PricePerUnit debe ser >= 0. Usá 0 para desactivar el cobro de este símbolo (opt-in billing).");

        RuleFor(x => x.ValidFrom)
            .GreaterThanOrEqualTo(today)
--- a/src/api/SIGCM2.Domain/Pricing/WordCounter/WordCounterService.cs
+++ b/src/api/SIGCM2.Domain/Pricing/WordCounter/WordCounterService.cs
@@ -96,6 +96,22 @@ public sealed class WordCounterService
        return new WordCountResult(tokens.Length, counts);
    }

+    /// <summary>
+    /// Returns true if the given string contains any emoji codepoint.
+    /// Used by validators that must reject emojis in user-facing identifiers
+    /// (e.g. ChargeableCharConfig.Symbol) where the frontend blocker can be bypassed
+    /// by direct API calls. Shares the same IsEmojiRune Unicode ranges used by Count().
+    /// </summary>
+    public static bool ContainsEmoji(string? text)
+    {
+        if (string.IsNullOrEmpty(text)) return false;
+        foreach (var rune in text.EnumerateRunes())
+        {
+            if (IsEmojiRune(rune)) return true;
+        }
+        return false;
+    }
+
    /// <summary>
    /// Returns true if the given rune is an emoji codepoint.
    /// Covers: Extended Pictographics, Misc Symbols, Dingbats, Variation Selector-16, ZWJ.
--- a/src/web/package-lock.json
+++ b/src/web/package-lock.json
@@ -16,6 +16,7 @@
        "@radix-ui/react-collapsible": "^1.1.12",
        "@radix-ui/react-dialog": "^1.1.15",
        "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-hover-card": "^1.1.15",
        "@radix-ui/react-label": "^2.1.8",
        "@radix-ui/react-navigation-menu": "^1.2.14",
        "@radix-ui/react-popover": "^1.1.15",
@@ -2264,6 +2265,93 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
+      "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-id": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
--- a/src/web/package.json
+++ b/src/web/package.json
@@ -21,6 +21,7 @@
    "@radix-ui/react-collapsible": "^1.1.12",
    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
    "@radix-ui/react-label": "^2.1.8",
    "@radix-ui/react-navigation-menu": "^1.2.14",
    "@radix-ui/react-popover": "^1.1.15",
--- a/src/web/src/components/layout/AppSidebar.tsx
+++ b/src/web/src/components/layout/AppSidebar.tsx
@@ -1,12 +1,8 @@
 import { Link, useLocation } from 'react-router-dom'
 import {
  LayoutDashboard,
-  ShoppingCart,
-  Calculator,
-  Zap,
-  Settings,
-  UserPlus,
  Users,
+  UserPlus,
  ShieldCheck,
  KeyRound,
  FileClock,
@@ -19,31 +15,49 @@ import {
  Layers,
  Package,
  Hash,
+  Building2,
+  Calculator,
+  ChevronDown,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { Badge } from '@/components/ui/badge'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
 import { useAuthStore } from '@/stores/authStore'
 import { useSidebar } from '@/hooks/useSidebar'
+import { useSidebarSections } from '@/hooks/useSidebarSections'

 interface NavItem {
  label: string
  href: string
  icon: React.ElementType
-  disabled?: boolean
  /** Si se define, el item solo se muestra si el user tiene este permiso. */
  requiredPermission?: string
 }

-const navItems: NavItem[] = [
-  { label: 'Dashboard', href: '/', icon: LayoutDashboard },
-  { label: 'Ventas', href: '/ventas', icon: ShoppingCart, disabled: true },
-  { label: 'Tasación', href: '/tasacion', icon: Calculator, disabled: true },
-  { label: 'Integraciones', href: '/integraciones', icon: Zap, disabled: true },
-  { label: 'Administración', href: '/administracion', icon: Settings, disabled: true },
-]
+interface NavSection {
+  label: string
+  /** Icon de grupo, usado en el modo colapsado como trigger del fly-out. */
+  icon: React.ElementType
+  /** Si true, la sección solo se muestra si el user tiene rol admin. */
+  adminOnly?: boolean
+  items: NavItem[]
+}

-const adminItems: NavItem[] = [
+// Item principal — siempre visible para usuarios autenticados
+const dashboardItem: NavItem = {
+  label: 'Dashboard',
+  href: '/',
+  icon: LayoutDashboard,
+}
+
+// Secciones agrupadas por dominio (Seguridad → Maestros → Catálogo → Tasación).
+// Cada sección se oculta si todos sus items están filtrados por permisos.
+const navSections: NavSection[] = [
+  {
+    label: 'Seguridad',
+    icon: ShieldCheck,
+    adminOnly: true,
+    items: [
      { label: 'Usuarios', href: '/usuarios', icon: Users },
      { label: 'Crear Usuario', href: '/usuarios/nuevo', icon: UserPlus },
      { label: 'Roles', href: '/admin/roles', icon: ShieldCheck },
@@ -54,6 +68,13 @@ const adminItems: NavItem[] = [
        icon: FileClock,
        requiredPermission: 'administracion:auditoria:ver',
      },
+    ],
+  },
+  {
+    label: 'Maestros',
+    icon: Building2,
+    adminOnly: true,
+    items: [
      {
        label: 'Medios',
        href: '/admin/medios',
@@ -72,6 +93,13 @@ const adminItems: NavItem[] = [
        icon: Store,
        requiredPermission: 'administracion:puntos_de_venta:gestionar',
      },
+    ],
+  },
+  {
+    label: 'Catálogo',
+    icon: Package,
+    adminOnly: true,
+    items: [
      {
        label: 'Rubros',
        href: '/admin/rubros',
@@ -90,12 +118,21 @@ const adminItems: NavItem[] = [
        icon: Package,
        requiredPermission: 'catalogo:productos:gestionar',
      },
+    ],
+  },
+  {
+    label: 'Tasación',
+    icon: Calculator,
+    adminOnly: true,
+    items: [
      {
        label: 'Caracteres Tasables',
        href: '/admin/tasacion/chargeable-chars',
        icon: Hash,
        requiredPermission: 'tasacion:caracteres_especiales:gestionar',
      },
+    ],
+  },
 ]

 interface SidebarNavProps {
@@ -107,11 +144,11 @@ export function SidebarNav({ forceExpanded = false }: SidebarNavProps) {
  const { pathname } = useLocation()
  const user = useAuthStore((s) => s.user)
  const isAdmin = user?.rol === 'admin'
-  const { collapsed: persisted, toggle } = useSidebar()
+  const { collapsed: persisted, toggle: toggleSidebar } = useSidebar()
  const collapsed = forceExpanded ? false : persisted
+  const { isCollapsed: isSectionCollapsed, toggle: toggleSection } = useSidebarSections()

  function isItemActive(item: NavItem): boolean {
-    if (item.disabled) return false
    if (item.href === '/') return pathname === '/'
    if (item.href === '/usuarios') {
      return pathname.startsWith('/usuarios') && pathname !== '/usuarios/nuevo'
@@ -120,6 +157,24 @@ export function SidebarNav({ forceExpanded = false }: SidebarNavProps) {
    return pathname.startsWith(item.href)
  }

+  function hasAccess(item: NavItem): boolean {
+    return !item.requiredPermission || (user?.permisos.includes(item.requiredPermission) ?? false)
+  }
+
+  /** Returns true if any item in the section matches the active route. */
+  function sectionContainsActive(section: NavSection): boolean {
+    return section.items.some(isItemActive)
+  }
+
+  // Filter sections + items by role + permissions. Empty sections are hidden.
+  const visibleSections = navSections
+    .filter((section) => !section.adminOnly || isAdmin)
+    .map((section) => ({
+      ...section,
+      items: section.items.filter(hasAccess),
+    }))
+    .filter((section) => section.items.length > 0)
+
  return (
    <aside
      className={cn(
@@ -128,7 +183,7 @@ export function SidebarNav({ forceExpanded = false }: SidebarNavProps) {
      )}
      data-collapsed={collapsed}
    >
-      {/* Brand + Toggle (top header) */}
+      {/* Brand + Toggle */}
      <div
        className={cn(
          'flex h-14 items-center border-b border-border shrink-0',
@@ -140,7 +195,7 @@ export function SidebarNav({ forceExpanded = false }: SidebarNavProps) {
            <TooltipTrigger asChild>
              <button
                type="button"
-                onClick={toggle}
+                onClick={toggleSidebar}
                aria-label={collapsed ? 'Expandir sidebar' : 'Colapsar sidebar'}
                className="flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground shrink-0"
              >
@@ -166,34 +221,38 @@ export function SidebarNav({ forceExpanded = false }: SidebarNavProps) {

      {/* Nav */}
      <nav className="flex-1 overflow-y-auto overflow-x-hidden py-3 px-2 space-y-1">
-        {navItems.map((item) => (
        <NavRow
-            key={item.href}
-            item={item}
+          item={dashboardItem}
          collapsed={collapsed}
-            active={isItemActive(item)}
+          active={isItemActive(dashboardItem)}
        />
-        ))}

-        {isAdmin && (
-          <>
-            <SectionLabel collapsed={collapsed}>Administración</SectionLabel>
-            {adminItems
-              .filter(
-                (item) =>
-                  !item.requiredPermission ||
-                  user?.permisos.includes(item.requiredPermission),
-              )
-              .map((item) => (
-                <NavRow
-                  key={item.href}
-                  item={item}
-                  collapsed={collapsed}
-                  active={isItemActive(item)}
+        {collapsed
+          ? visibleSections.map((section) => (
+              <CollapsedSectionFlyout
+                key={section.label}
+                section={section}
+                isItemActive={isItemActive}
+                active={sectionContainsActive(section)}
              />
-              ))}
-          </>
-        )}
+            ))
+          : visibleSections.map((section) => {
+              const containsActive = sectionContainsActive(section)
+              const userPrefCollapsed = isSectionCollapsed(section.label)
+              // Auto-expand override: if the active route lives here, keep it open
+              // regardless of persisted preference.
+              const expanded = containsActive ? true : !userPrefCollapsed
+              return (
+                <ExpandedSection
+                  key={section.label}
+                  section={section}
+                  expanded={expanded}
+                  onToggle={() => toggleSection(section.label)}
+                  toggleDisabled={containsActive}
+                  isItemActive={isItemActive}
+                />
+              )
+            })}
      </nav>
    </aside>
  )
@@ -217,41 +276,6 @@ function NavRow({ item, collapsed, active }: NavRowProps) {
    collapsed ? 'justify-center h-10 w-10 mx-auto' : 'gap-3 px-3 py-2',
  )

-  // Disabled item
-  if (item.disabled) {
-    const content = (
-      <div
-        className={cn(
-          baseClasses,
-          'text-muted-foreground/70 cursor-not-allowed opacity-60',
-        )}
-        aria-disabled="true"
-      >
-        <Icon className="h-4 w-4 shrink-0" />
-        {!collapsed && (
-          <>
-            <span className="flex-1 truncate">{item.label}</span>
-            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 shrink-0">
-              Próx.
-            </Badge>
-          </>
-        )}
-      </div>
-    )
-
-    if (!collapsed) return content
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{content}</TooltipTrigger>
-        <TooltipContent side="right">
-          {item.label}{' '}
-          <span className="text-muted-foreground">· Próximamente</span>
-        </TooltipContent>
-      </Tooltip>
-    )
-  }
-
-  // Active link
  const link = (
    <Link
      to={item.href}
@@ -263,7 +287,6 @@ function NavRow({ item, collapsed, active }: NavRowProps) {
      )}
      aria-current={active ? 'page' : undefined}
    >
-      {/* Active indicator bar (left edge) when expanded */}
      {active && !collapsed && (
        <span className="absolute left-0 top-1/2 -translate-y-1/2 h-5 w-0.5 rounded-r-full bg-primary" />
      )}
@@ -281,21 +304,138 @@ function NavRow({ item, collapsed, active }: NavRowProps) {
  )
 }

-function SectionLabel({
-  collapsed,
-  children,
-}: {
-  collapsed: boolean
-  children: React.ReactNode
-}) {
-  if (collapsed) {
-    return <div className="my-2 mx-2 border-t border-border" aria-hidden="true" />
+/* ── Expanded mode — collapsible section with chevron toggle ──────── */
+
+interface ExpandedSectionProps {
+  section: NavSection
+  expanded: boolean
+  onToggle: () => void
+  /** When true, the header is not clickable (because the section contains the active route and must stay open). */
+  toggleDisabled: boolean
+  isItemActive: (item: NavItem) => boolean
 }
+
+function ExpandedSection({
+  section,
+  expanded,
+  onToggle,
+  toggleDisabled,
+  isItemActive,
+}: ExpandedSectionProps) {
  return (
-    <div className="pt-3 pb-1 px-3">
-      <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60">
-        {children}
-      </span>
+    <div className="pt-2">
+      <button
+        type="button"
+        onClick={toggleDisabled ? undefined : onToggle}
+        aria-expanded={expanded}
+        disabled={toggleDisabled}
+        className={cn(
+          'w-full flex items-center justify-between pt-1 pb-1 px-3 rounded-md',
+          'text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60',
+          toggleDisabled
+            ? 'cursor-default'
+            : 'hover:text-muted-foreground transition-colors cursor-pointer',
+        )}
+      >
+        <span>{section.label}</span>
+        {!toggleDisabled && (
+          <ChevronDown
+            className={cn(
+              'h-3 w-3 shrink-0 transition-transform duration-200',
+              expanded ? 'rotate-0' : '-rotate-90',
+            )}
+          />
+        )}
+      </button>
+      {expanded && (
+        <div className="space-y-1 mt-1">
+          {section.items.map((item) => (
+            <NavRow
+              key={item.href}
+              item={item}
+              collapsed={false}
+              active={isItemActive(item)}
+            />
+          ))}
+        </div>
+      )}
    </div>
  )
 }
+
+/* ── Collapsed mode — group icon + fly-out hover panel ──────────── */
+
+interface CollapsedSectionFlyoutProps {
+  section: NavSection
+  isItemActive: (item: NavItem) => boolean
+  /** When true, the group icon shows an active indicator (contains the active route). */
+  active: boolean
+}
+
+function CollapsedSectionFlyout({
+  section,
+  isItemActive,
+  active,
+}: CollapsedSectionFlyoutProps) {
+  const GroupIcon = section.icon
+
+  return (
+    <HoverCard openDelay={120} closeDelay={80}>
+      <HoverCardTrigger asChild>
+        <button
+          type="button"
+          aria-label={section.label}
+          aria-haspopup="menu"
+          className={cn(
+            'relative flex items-center justify-center h-10 w-10 mx-auto rounded-md transition-colors',
+            active
+              ? 'bg-accent text-accent-foreground'
+              : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+          )}
+        >
+          {active && (
+            <span
+              aria-hidden="true"
+              className="absolute right-1 top-1 h-1.5 w-1.5 rounded-full bg-primary"
+            />
+          )}
+          <GroupIcon className="h-4 w-4 shrink-0" />
+        </button>
+      </HoverCardTrigger>
+      <HoverCardContent
+        side="right"
+        align="start"
+        sideOffset={8}
+        className="w-56 p-2 z-[60]"
+        role="menu"
+      >
+        <div className="px-2 pt-1 pb-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+          {section.label}
+        </div>
+        <div className="space-y-0.5">
+          {section.items.map((item) => {
+            const Icon = item.icon
+            const isActive = isItemActive(item)
+            return (
+              <Link
+                key={item.href}
+                to={item.href}
+                role="menuitem"
+                className={cn(
+                  'flex items-center gap-3 px-2 py-1.5 rounded-md text-sm transition-colors',
+                  isActive
+                    ? 'bg-accent text-accent-foreground font-medium'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                )}
+                aria-current={isActive ? 'page' : undefined}
+              >
+                <Icon className="h-4 w-4 shrink-0" />
+                <span className="truncate">{item.label}</span>
+              </Link>
+            )
+          })}
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
--- a/src/web/src/components/layout/tests/AppSidebar.test.tsx
+++ b/src/web/src/components/layout/tests/AppSidebar.test.tsx
@@ -0,0 +1,238 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MemoryRouter } from 'react-router-dom'
+import { SidebarNav } from '../AppSidebar'
+import { useAuthStore } from '@/stores/authStore'
+
+/**
+ * Estado inicial del authStore para cada test.
+ * El rol admin + set de permisos completos activa todas las secciones.
+ */
+function setUser(overrides: Partial<{ rol: string; permisos: string[] }> = {}) {
+  useAuthStore.setState({
+    user: {
+      id: 1,
+      username: 'admin',
+      nombre: 'Admin Test',
+      rol: 'admin',
+      permisos: [
+        'administracion:auditoria:ver',
+        'administracion:medios:gestionar',
+        'administracion:secciones:gestionar',
+        'administracion:puntos_de_venta:gestionar',
+        'catalogo:rubros:gestionar',
+        'catalogo:tipos:gestionar',
+        'catalogo:productos:gestionar',
+        'tasacion:caracteres_especiales:gestionar',
+      ],
+      mustChangePassword: false,
+      ...overrides,
+    } as never,
+  })
+}
+
+function renderSidebar(initialPath = '/') {
+  return render(
+    <MemoryRouter initialEntries={[initialPath]}>
+      <SidebarNav forceExpanded />
+    </MemoryRouter>,
+  )
+}
+
+describe('AppSidebar', () => {
+  beforeEach(() => {
+    setUser()
+    // Clean per-section collapse preferences between tests
+    window.localStorage.removeItem('sidebar-sections-collapsed')
+  })
+
+  it('Dashboard visible para todo usuario autenticado', () => {
+    renderSidebar()
+    expect(screen.getByRole('link', { name: /dashboard/i })).toBeInTheDocument()
+  })
+
+  it('No muestra items disabled con badge "Próx." (limpieza)', () => {
+    renderSidebar()
+    // Los 4 items removidos del sidebar: Ventas, Tasación (nivel top), Integraciones, Administración (nivel top)
+    expect(screen.queryByText(/próx/i)).not.toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: /^ventas$/i })).not.toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: /^integraciones$/i })).not.toBeInTheDocument()
+    // "Administración" como link top-level también se elimina (queda solo como label de sección)
+    expect(screen.queryByRole('link', { name: /^administración$/i })).not.toBeInTheDocument()
+  })
+
+  it('Muestra las 4 secciones agrupadas para admin con todos los permisos', () => {
+    renderSidebar()
+    expect(screen.getByText('Seguridad')).toBeInTheDocument()
+    expect(screen.getByText('Maestros')).toBeInTheDocument()
+    expect(screen.getByText('Catálogo')).toBeInTheDocument()
+    expect(screen.getByText('Tasación')).toBeInTheDocument()
+  })
+
+  it('Cada item vive en la sección correcta (tras expandir todas las secciones)', async () => {
+    const user = userEvent.setup()
+    // Expandir manualmente las 4 secciones (arrancan colapsadas por default)
+    window.localStorage.setItem(
+      'sidebar-sections-collapsed',
+      JSON.stringify({ Seguridad: false, Maestros: false, Catálogo: false, Tasación: false }),
+    )
+    renderSidebar()
+    void user // keep setup import used
+
+    // Seguridad
+    expect(screen.getByRole('link', { name: /usuarios/i })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /crear usuario/i })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /roles/i })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /permisos/i })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /auditoría/i })).toBeInTheDocument()
+
+    // Maestros
+    expect(screen.getByRole('link', { name: /^medios$/i })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /^secciones$/i })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /puntos de venta/i })).toBeInTheDocument()
+
+    // Catálogo
+    expect(screen.getByRole('link', { name: /rubros/i })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /tipos de producto/i })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /^productos$/i })).toBeInTheDocument()
+
+    // Tasación
+    expect(screen.getByRole('link', { name: /caracteres tasables/i })).toBeInTheDocument()
+  })
+
+  it('Oculta secciones sin items permitidos (ej: user sin permisos de catálogo)', () => {
+    setUser({
+      rol: 'admin',
+      permisos: [
+        // Solo permisos de Seguridad + Maestros
+        'administracion:medios:gestionar',
+      ],
+    })
+    renderSidebar()
+
+    // Seguridad se muestra (Usuarios/Crear Usuario/Roles/Permisos no requieren permiso custom)
+    expect(screen.getByText('Seguridad')).toBeInTheDocument()
+    // Maestros se muestra (tiene Medios con su permiso)
+    expect(screen.getByText('Maestros')).toBeInTheDocument()
+    // Catálogo desaparece (ningún permiso catalogo:*)
+    expect(screen.queryByText('Catálogo')).not.toBeInTheDocument()
+    // Tasación desaparece
+    expect(screen.queryByText('Tasación')).not.toBeInTheDocument()
+
+    // Items filtrados
+    expect(screen.queryByRole('link', { name: /rubros/i })).not.toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: /caracteres tasables/i })).not.toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: /^secciones$/i })).not.toBeInTheDocument()
+  })
+
+  it('Usuario no-admin no ve ninguna sección adminOnly', () => {
+    setUser({ rol: 'cajero', permisos: [] })
+    renderSidebar()
+
+    expect(screen.getByRole('link', { name: /dashboard/i })).toBeInTheDocument()
+    expect(screen.queryByText('Seguridad')).not.toBeInTheDocument()
+    expect(screen.queryByText('Maestros')).not.toBeInTheDocument()
+    expect(screen.queryByText('Catálogo')).not.toBeInTheDocument()
+    expect(screen.queryByText('Tasación')).not.toBeInTheDocument()
+  })
+
+  it('Marca el item activo según la ruta actual (Caracteres Tasables)', () => {
+    // Ruta activa contenida en Tasación → auto-expand
+    renderSidebar('/admin/tasacion/chargeable-chars')
+    const link = screen.getByRole('link', { name: /caracteres tasables/i })
+    expect(link).toHaveAttribute('aria-current', 'page')
+  })
+
+  it('Dashboard activo solo en raíz exacta', () => {
+    const { unmount } = renderSidebar('/')
+    expect(screen.getByRole('link', { name: /dashboard/i })).toHaveAttribute('aria-current', 'page')
+    unmount()
+
+    renderSidebar('/admin/medios')
+    expect(screen.getByRole('link', { name: /dashboard/i })).not.toHaveAttribute('aria-current', 'page')
+  })
+
+  it('Header "SIG-CM 2.0" visible en modo expandido', () => {
+    renderSidebar()
+    expect(screen.getByText('SIG-CM 2.0')).toBeInTheDocument()
+  })
+
+  it('Orden de secciones: Seguridad → Maestros → Catálogo → Tasación', () => {
+    renderSidebar()
+    const nav = screen.getByRole('navigation')
+    const labels = within(nav).getAllByText(/Seguridad|Maestros|Catálogo|Tasación/)
+    expect(labels.map((n) => n.textContent)).toEqual([
+      'Seguridad',
+      'Maestros',
+      'Catálogo',
+      'Tasación',
+    ])
+  })
+
+  // ── Collapse per-section (modo expandido) ──────────────────────────────
+
+  it('Default: todas las secciones arrancan colapsadas EXCEPTO la que contiene la ruta activa', () => {
+    renderSidebar('/admin/medios')
+    // Maestros contiene la ruta activa → expandida → Medios visible
+    expect(screen.getByRole('link', { name: /^medios$/i })).toBeInTheDocument()
+    // Otras secciones colapsadas → sus items NO visibles
+    expect(screen.queryByRole('link', { name: /^usuarios$/i })).not.toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: /rubros/i })).not.toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: /caracteres tasables/i })).not.toBeInTheDocument()
+  })
+
+  it('Header de sección activa NO es toggleable (sin chevron, disabled)', () => {
+    renderSidebar('/admin/medios')
+    const maestrosBtn = screen.getByRole('button', { name: /maestros/i })
+    expect(maestrosBtn).toBeDisabled()
+    expect(maestrosBtn).toHaveAttribute('aria-expanded', 'true')
+  })
+
+  it('Click en header de sección no-activa expande/colapsa sus items', async () => {
+    const user = userEvent.setup()
+    renderSidebar('/admin/medios')
+
+    // Catálogo arranca colapsado → Rubros NO visible
+    expect(screen.queryByRole('link', { name: /rubros/i })).not.toBeInTheDocument()
+
+    // Click en "Catálogo" → expande
+    await user.click(screen.getByRole('button', { name: /catálogo/i }))
+    expect(screen.getByRole('link', { name: /rubros/i })).toBeInTheDocument()
+
+    // Click de nuevo → colapsa
+    await user.click(screen.getByRole('button', { name: /catálogo/i }))
+    expect(screen.queryByRole('link', { name: /rubros/i })).not.toBeInTheDocument()
+  })
+
+  it('aria-expanded refleja estado expandido/colapsado', async () => {
+    const user = userEvent.setup()
+    renderSidebar('/admin/medios')
+
+    const catalogoBtn = screen.getByRole('button', { name: /catálogo/i })
+    expect(catalogoBtn).toHaveAttribute('aria-expanded', 'false')
+
+    await user.click(catalogoBtn)
+    expect(catalogoBtn).toHaveAttribute('aria-expanded', 'true')
+  })
+
+  it('Ruta en Dashboard (raíz): ninguna sección contiene active → todas colapsadas', () => {
+    renderSidebar('/')
+    expect(screen.queryByRole('link', { name: /^medios$/i })).not.toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: /rubros/i })).not.toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: /caracteres tasables/i })).not.toBeInTheDocument()
+  })
+
+  it('Preferencia de collapse persiste en localStorage', async () => {
+    const user = userEvent.setup()
+    renderSidebar('/')
+
+    // Expandir Catálogo → guarda preferencia
+    await user.click(screen.getByRole('button', { name: /catálogo/i }))
+
+    const stored = window.localStorage.getItem('sidebar-sections-collapsed')
+    expect(stored).toBeTruthy()
+    const parsed = JSON.parse(stored!)
+    expect(parsed['Catálogo']).toBe(false) // false = expandido
+  })
+})
--- a/src/web/src/components/ui/hover-card.tsx
+++ b/src/web/src/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Portal>
+    <HoverCardPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </HoverCardPrimitive.Portal>
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
--- a/src/web/src/hooks/useSidebarSections.ts
+++ b/src/web/src/hooks/useSidebarSections.ts
@@ -0,0 +1,61 @@
+import { useCallback, useEffect, useState } from 'react'
+
+const STORAGE_KEY = 'sidebar-sections-collapsed'
+
+/**
+ * Map: sectionName → isCollapsed.
+ * Missing key = expanded (default).
+ */
+export type SectionState = Record<string, boolean>
+
+function readInitial(): SectionState {
+  if (typeof window === 'undefined') return {}
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    if (!raw) return {}
+    const parsed = JSON.parse(raw)
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      return parsed as SectionState
+    }
+    return {}
+  } catch {
+    return {}
+  }
+}
+
+/**
+ * Manages per-section collapse state in the sidebar with localStorage persistence.
+ *
+ * - Initially, ALL sections start collapsed EXCEPT the one containing the active route.
+ *   That behavior is enforced at render-time by the caller via `overrideExpanded`
+ *   (the section currently active is ALWAYS shown expanded regardless of stored pref).
+ * - `toggle(name)` flips the stored preference for a specific section. The override
+ *   for the active section remains unaffected — it will stay expanded while active.
+ * - `isCollapsed(name)` returns the stored preference (does NOT apply the active-route
+ *   override — that's the caller's job).
+ */
+export function useSidebarSections(defaultCollapsed = true) {
+  const [state, setState] = useState<SectionState>(readInitial)
+
+  useEffect(() => {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+  }, [state])
+
+  const isCollapsed = useCallback(
+    (name: string): boolean => {
+      // Missing key → fall back to default (collapsed = true by design).
+      if (!(name in state)) return defaultCollapsed
+      return state[name]
+    },
+    [state, defaultCollapsed],
+  )
+
+  const toggle = useCallback((name: string) => {
+    setState((prev) => {
+      const currentlyCollapsed = name in prev ? prev[name] : defaultCollapsed
+      return { ...prev, [name]: !currentlyCollapsed }
+    })
+  }, [defaultCollapsed])
+
+  return { isCollapsed, toggle }
+}
--- a/src/web/src/layouts/ProtectedLayout.tsx
+++ b/src/web/src/layouts/ProtectedLayout.tsx
@@ -16,8 +16,10 @@ export function ProtectedLayout({ children }: ProtectedLayoutProps) {
      <div className="absolute top-[-15%] right-[-8%] w-[500px] h-[500px] rounded-full bg-brand-500/10 dark:bg-brand-500/12 blur-[140px] pointer-events-none" />
      <div className="absolute bottom-[-15%] left-[20%] w-[500px] h-[500px] rounded-full bg-violet-500/8 dark:bg-violet-500/10 blur-[140px] pointer-events-none" />

-      {/* Desktop sidebar — width controlled by SidebarNav itself (collapsed/expanded) */}
-      <div className="relative z-10 hidden lg:flex lg:flex-col lg:shrink-0 border-r border-border">
+      {/* Desktop sidebar — width controlled by SidebarNav itself (collapsed/expanded).
+          z-30 keeps the sidebar above page content; fly-out HoverCard uses z-[60] to
+          guarantee it sits above any app-level overlay (except modal dialogs). */}
+      <div className="relative z-30 hidden lg:flex lg:flex-col lg:shrink-0 border-r border-border">
        <SidebarNav />
      </div>

--- a/src/web/tsconfig.json
+++ b/src/web/tsconfig.json
@@ -6,6 +6,7 @@
  ],
  "compilerOptions": {
    "baseUrl": ".",
+    "ignoreDeprecations": "6.0",
    "paths": {
      "@/*": ["./src/*"]
    }
--- a/tests/SIGCM2.Api.Tests/Pricing/ChargeableChars/ChargeableCharConfigControllerTests.cs
+++ b/tests/SIGCM2.Api.Tests/Pricing/ChargeableChars/ChargeableCharConfigControllerTests.cs
@@ -243,9 +243,11 @@ public sealed class ChargeableCharConfigControllerTests : IAsyncLifetime
    [Fact]
    public async Task Post_InvalidPrice_Returns400ValidationFailure()
    {
+        // PRC-001 followup #57: PricePerUnit >= 0 is now valid (opt-in billing).
+        // Use -1 to still exercise the negative rejection path.
        var token = GetAdminToken();
        using var req = BuildRequest(HttpMethod.Post, "/api/v1/admin/chargeable-chars",
-            body: new { productTypeId = (long?)null, symbol = "£", category = "Currency", pricePerUnit = 0m, validFrom = TomorrowStr() },
+            body: new { productTypeId = (long?)null, symbol = "£", category = "Currency", pricePerUnit = -1m, validFrom = TomorrowStr() },
            token: token);
        var resp = await _client.SendAsync(req);
        resp.StatusCode.Should().Be(HttpStatusCode.BadRequest);
@@ -276,25 +278,22 @@ public sealed class ChargeableCharConfigControllerTests : IAsyncLifetime
    }

    /// <summary>
-    /// PRC-001-R2.7 — Emoji symbols are explicitly DEFERRED per spec.
-    /// The ChargeableCharConfig Symbol field accepts any 1–4 char value including emojis.
-    /// "😀" in C# has string.Length = 2 (UTF-16 surrogate pair), so it passes MaximumLength(4).
-    /// This test documents the deferred behavior: emoji in Symbol is accepted at config level.
-    /// The EmojiDetectedException applies only to WordCounterService (ad text, not config symbols).
+    /// PRC-001 followup #55 — Business decision (2026-04-21): emoji Symbols are NOT allowed.
+    /// Validator delegates to WordCounterService.ContainsEmoji which checks every rune against
+    /// the Unicode emoji ranges (Emoticons, Pictographs, Dingbats, VS-16, ZWJ, etc.).
+    /// This provides a defensive check beyond the frontend SymbolInput blocker — direct API
+    /// calls (Postman, adversarial clients) can't bypass it.
    /// </summary>
    [Fact]
-    public async Task Post_WithEmojiSymbol_Returns201_BecauseEmojiRejectionIsDeferred()
+    public async Task Post_WithEmojiSymbol_Returns400()
    {
        var token = GetAdminToken();
-        // "😀" has C# string.Length == 2 (UTF-16 surrogate pair) — passes MaximumLength(4).
-        // Emoji rejection for config Symbols is deferred to PRC-002+ per spec R2.7.
        using var req = BuildRequest(HttpMethod.Post, "/api/v1/admin/chargeable-chars",
            body: new { productTypeId = (long?)null, symbol = "😀", category = "Currency", pricePerUnit = 1.0m, validFrom = TomorrowStr() },
            token: token);
        var resp = await _client.SendAsync(req);
-        // Accepted: emoji symbols deferred per spec. If business later rejects them, update validator + this test.
-        resp.StatusCode.Should().Be(HttpStatusCode.Created,
-            because: "emoji symbol rejection is deferred (spec R2.7). Symbol '😀' has length 2 in C# (UTF-16) → passes MaximumLength(4)");
+        resp.StatusCode.Should().Be(HttpStatusCode.BadRequest,
+            because: "emoji symbols are rejected by validator via WordCounterService.ContainsEmoji (#55)");
    }

    // ── PUT /api/v1/admin/chargeable-chars/{id}/price ────────────────────────
--- a/tests/SIGCM2.Application.Tests/Pricing/ChargeableChars/CreateChargeableCharConfigCommandValidatorTests.cs
+++ b/tests/SIGCM2.Application.Tests/Pricing/ChargeableChars/CreateChargeableCharConfigCommandValidatorTests.cs
@@ -92,10 +92,13 @@ public class CreateChargeableCharConfigCommandValidatorTests
    // ── PricePerUnit ─────────────────────────────────────────────────────────────

    [Fact]
-    public void PricePerUnit_Zero_FailsValidation()
+    public void PricePerUnit_Zero_Passes_OptInBilling()
    {
+        // PRC-001 followup #57: opt-in billing — 0 is a valid price meaning
+        // "this Symbol exists but does NOT charge extra for this ProductType".
+        // Aligned with DB check constraint CK_ChargeableCharConfig_Price_NonNegative (>= 0).
        var cmd = ValidCmd() with { PricePerUnit = 0m };
-        _validator.TestValidate(cmd).ShouldHaveValidationErrorFor(x => x.PricePerUnit);
+        _validator.TestValidate(cmd).ShouldNotHaveValidationErrorFor(x => x.PricePerUnit);
    }

    [Fact]
@@ -112,6 +115,35 @@ public class CreateChargeableCharConfigCommandValidatorTests
        _validator.TestValidate(cmd).ShouldNotHaveValidationErrorFor(x => x.PricePerUnit);
    }

+    // ── Symbol emoji rejection (PRC-001 followup #55) ───────────────────────────
+
+    [Theory]
+    [InlineData("😀")]          // smiley face (U+1F600, Emoticons block)
+    [InlineData("🚗")]          // car (U+1F697, Transport block)
+    [InlineData("🔥")]          // fire (U+1F525, Misc Symbols & Pictographs)
+    [InlineData("❤️")]          // red heart + VS-16 (U+2764 U+FE0F)
+    [InlineData("☀️")]          // sun (U+2600 in Misc Symbols block)
+    public void Symbol_WithEmoji_FailsValidation(string emojiSymbol)
+    {
+        var cmd = ValidCmd() with { Symbol = emojiSymbol };
+        _validator.TestValidate(cmd).ShouldHaveValidationErrorFor(x => x.Symbol);
+    }
+
+    [Theory]
+    [InlineData("$")]
+    [InlineData("%")]
+    [InlineData("!")]
+    [InlineData("¡")]
+    [InlineData("@")]
+    [InlineData("€")]
+    [InlineData("##")]
+    [InlineData("ABCD")]
+    public void Symbol_WithoutEmoji_Passes(string plainSymbol)
+    {
+        var cmd = ValidCmd() with { Symbol = plainSymbol };
+        _validator.TestValidate(cmd).ShouldNotHaveValidationErrorFor(x => x.Symbol);
+    }
+
    // ── ValidFrom ────────────────────────────────────────────────────────────────

    [Fact]
Author	SHA1	Message	Date
dmolinari	5a231c206e	Merge pull request 'feat(frontend): sidebar colapsable por secciones + fly-out en modo colapsado' (#62 ) from chore/sidebar-collapsible-sections into main	2026-04-21 17:09:07 +00:00
dmolinari	bcb0c94fc5	feat(frontend): sidebar secciones colapsables + fly-out en modo colapsado Mejora UX post-refactor (PR #61): las 4 secciones del sidebar expandido son ahora colapsables individualmente, y el modo colapsado reemplaza la lista larga de iconos por un icono por grupo con fly-out panel on hover. Expandido (240px): - Click en header de sección (Seguridad/Maestros/Catálogo/Tasación) toggle collapse con chevron que rota. - Default: todas colapsadas EXCEPTO la que contiene la ruta activa (auto-expand override). - Sección activa tiene el header disabled + sin chevron (no se puede colapsar mientras estás ahí — evita esconder items de la ruta actual). - Preferencia per-sección persistida en localStorage. Colapsado (68px): - Un icono por grupo en lugar de listar TODOS los items (evitando scroll largo en usuarios con muchos permisos). - Hover sobre el grupo despliega un fly-out panel al lado derecho con el título del grupo + sus items clickeables. - Grupo que contiene la ruta activa tiene un dot indicator. - Icons de grupo: ShieldCheck (Seguridad), Building2 (Maestros), Package (Catálogo), Calculator (Tasación). Accessibility: - Headers expandidos: aria-expanded refleja estado. - Fly-out: aria-haspopup='menu' + role='menu' + keyboard focus. z-index management (pedido explícito del user): - aside wrapper en ProtectedLayout: z-10 -> z-30 (sobre contenido). - HoverCardContent del fly-out: z-[60] (sobre cualquier overlay app-level, excepto modal dialogs que siguen siendo z-50 por convención Radix). - hover-card.tsx: envuelto en HoverCardPrimitive.Portal (faltaba en el shadcn generated) — previene que el fly-out quede cortado por overflow del aside. Dependencies: - shadcn hover-card agregado via 'npx shadcn@latest add' (+ @radix-ui/react-hover-card). Tests: - 16 tests (antes 10) — agregados 6 casos: default collapsed except active, click toggle expand/collapse, aria-expanded reflection, disabled header when active, root route collapses all, localStorage persistence.	2026-04-21 14:07:12 -03:00
dmolinari	2aae873a4b	Merge pull request 'chore(frontend): reorganizar sidebar en secciones + quitar items disabled' (#61 ) from chore/sidebar-categorization into main	2026-04-21 16:38:17 +00:00
dmolinari	3a534f7ad3	chore(frontend): reorganize sidebar into grouped sections + remove disabled items Problem: sidebar was growing unwieldy — 4 top-level disabled items marked 'Próx.' acted as visual noise, and 12 admin items sat in a flat list with no grouping (hard to scan). Changes: - Remove the 4 disabled top-level items (Ventas, Tasación, Integraciones, Administración-as-link). Those features will surface via the admin subsections when actually implemented, not as placeholder ghosts. - Group the 12 admin items into 4 domain-aligned sections: - Seguridad: Usuarios, Crear Usuario, Roles, Permisos, Auditoría - Maestros: Medios, Secciones, Puntos de Venta - Catálogo: Rubros, Tipos de Producto, Productos - Tasación: Caracteres Tasables - Sections auto-hide when no item passes the permission filter, preventing empty headers for users with limited roles. - Dashboard remains as the single top-level nav item (always visible). TDD: new AppSidebar.test.tsx covers 10 scenarios — section rendering, permission filtering, section auto-hide, role gating, active-route marking, and section ordering.	2026-04-21 13:37:53 -03:00
dmolinari	dfeb5fb7e1	Merge pull request 'chore(prc-001): followups #54 #55 #57 #58 + cierre #52 #53 ' (#60 ) from chore/prc-001-followups into main	2026-04-21 16:28:29 +00:00
dmolinari	3e7c4bfde9	chore(prc-001): followups #54 #55 #57 #58 — emoji validator + opt-in pricing + demo seed + tsconfig Resuelve 4 de los followups creados post-archive de PRC-001: #55 — Decisión de negocio (2026-04-21): emojis NO se permiten en Symbol config. - WordCounterService.ContainsEmoji(string): helper publico que reutiliza los rangos Unicode de IsEmojiRune (Emoticons, Pictographs, Dingbats, VS-16, ZWJ). - CreateChargeableCharConfigCommandValidator: regla .Must que rechaza emoji en Symbol con mensaje claro. Defensiva: cubre clientes directos al API (Postman, adversariales) mas alla del SymbolInput blocker del frontend. - Tests: 5 emojis positivos (smile/car/fire/heart VS-16/sun) + 8 plain symbols ($, %, !, ¡, @, €, ##, ABCD) + actualizacion del Api test E2E (Post_WithEmojiSymbol). #57 — Alineacion FluentValidation con opt-in billing (CK_Price_NonNegative >= 0). - CreateChargeableCharConfigCommandValidator.PricePerUnit: GreaterThan(0) -> GreaterThanOrEqualTo(0). Mensaje explica el significado: 0 = no cobra. - Tests actualizados: PricePerUnit_Zero ahora Passes (era Fails). Negative sigue fallando. Api e2e usa -1 para el caso de rechazo. #58 — tsconfig ignoreDeprecations + MSW handler (parte a). - src/web/tsconfig.json: agrega "ignoreDeprecations": "6.0" para silenciar el warning TS5101 del baseUrl deprecated en TS 6.x. - (El MSW handler de /api/v1/admin/product-types no aplica — los tests ya mockean ProductTypeSelect directamente; warning residual no existe.) #54 — Seeder demo de overrides ficticios per-ProductType (V025). - database/migrations/V025__seed_chargeable_char_overrides_demo.sql: MERGE idempotente que crea overrides de ChargeableCharConfig para ProductTypes Clasificado/Notables/Fúnebres si existen en la DB. Precios ficticios ($ 5-8, % 3-5, ! 2-4, ¡ 2-4). No-op si los tipos no estan seedados (sera cuando PRD-008 haga seed de los 12 legacy). - V025_ROLLBACK.sql: elimina overrides demo preservando globales. - Aplicado en SIGCM2, SIGCM2_Test_App, SIGCM2_Test_Api. - database/README.md: V025 agregada al indice. Tests: 1659 .NET (1310 Application + 349 Api) + 510 vitest — todos GREEN. Closes #54, #55, #57, #58.	2026-04-21 13:27:54 -03:00