bcb0c94fc5858877b900499a1eb1d88ee149af0e
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.
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-XXXdesdemain. - Commits:
tipo(módulo): descripción—feat,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
Languages
C#
63.9%
TypeScript
29.4%
TSQL
6.1%
CSS
0.5%