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

SIG-CM 2.0

Sistema de gestión comercial — migración del sistema legacy (VB6) a una plataforma web moderna.

Stack

  • Backend: .NET 10 · C# 13 · ASP.NET Core · Clean Architecture · Dapper 2.x · SQL Server 2022 · JWT RS256 · Serilog · FluentValidation · xUnit + NSubstitute
  • Frontend: React 19 · TypeScript 5 strict · Vite 6 · Tailwind 4 · Zustand · React Router 7 · TanStack Query · Axios · Vitest + RTL
  • Infra: Docker · Gitea Actions · Obsidian (documentación interna) · SQL Server

Estructura

src/api/             # Backend .NET (Clean Architecture)
  SIGCM2.Api/          controllers, filters, Program.cs
  SIGCM2.Application/  commands, handlers, validators, abstractions
  SIGCM2.Domain/       entities, exceptions, domain security
  SIGCM2.Infrastructure/ persistence (Dapper), security, DI

src/web/             # Frontend React 19 (Vite + TS strict)
  src/features/        feature modules (auth, users, …)
  src/components/      shared UI + layout
  src/tests/           Vitest suites

database/
  migrations/          .sql con orden Vxxx
  seeds/               datos iniciales
  schemas/             definiciones auxiliares

tests/
  SIGCM2.Api.Tests/            integration (TestWebAppFactory + SQL Server)
  SIGCM2.Application.Tests/    unit (handlers, validators)
  SIGCM2.TestSupport/          fixtures compartidas

Obsidian/            # Source of truth funcional (IGNORADO por git)
  STATUS.md            roadmap y estado de UDTs
  INSTRUCCIONES_IA.md  SOP del agente de IA
  02-ARQUITECTURA.../  specs por módulo

Cómo correr

Requisitos

  • .NET 10 SDK
  • Node 20+
  • SQL Server 2019+ (local o remoto)

Backend

cd src/api/SIGCM2.Api
dotnet run

Config en appsettings.json (DB: SIGCM2, usuario desarrollo, server TECNICA3). Para tests de integración se usa SIGCM2_Test.

Frontend

cd src/web
npm install
npm run dev

Tests

# Backend
dotnet test tests/SIGCM2.Application.Tests       # unit
dotnet test tests/SIGCM2.Api.Tests               # integration (requiere SIGCM2_Test)

# Frontend
cd src/web && npx vitest run

Coverage (backend)

# Generar reporte de coverage en formato Cobertura
dotnet test --collect:"XPlat Code Coverage" --settings coverlet.runsettings --results-directory ./TestResults

El comando genera un coverage.cobertura.xml por cada proyecto de test en ./TestResults/.

Para convertirlo a HTML:

# Instalar ReportGenerator (solo la primera vez)
dotnet tool install -g dotnet-reportgenerator-globaltool

# Generar reporte HTML
reportgenerator -reports:"./TestResults/**/coverage.cobertura.xml" -targetdir:"./coverage-report" -reporttypes:Html

Abrí ./coverage-report/index.html en el browser para ver el detalle por archivo.

Convenciones

  • Ramas: feature/UDT-XXX desde main.
  • Commits: tipo(módulo): descripciónfeat, fix, docs, refactor, test, chore, security.
  • Orden de trabajo por UDT: BD → Backend → Frontend.
  • Desarrollo guiado por Spec-Driven Development (SDD) + Strict TDD.
  • Follow-ups / deuda técnica se registran como issues de Gitea con label followup.
Description
SIG-CM 2.0 - Sistema de gestión comercial - El Día.
Readme 3.4 MiB
Languages
C# 63.9%
TypeScript 29.4%
TSQL 6.1%
CSS 0.5%