ValwispDocs
DesarrolladoresApps del monorepo

valwisp-dashboard

React 18 + Vite + Tailwind + shadcn/ui + Zustand — la UI web del ISP.

Dashboard web en React 18 (Vite + Tailwind + shadcn/ui + Zustand). Puerto dev 5174.

Data fetching

No usa react-query — useState + useEffect + un cliente fetch tipado (src/api/valwisp/client.ts) con refresh automático de JWT y evento valwisp:logout en expiración. Funciones de API en src/api/valwisp/endpoints.ts. Formularios: useState simple o React Hook Form + Zod según la complejidad.

Estructura

  • src/components/layout/AppSidebar.tsx — fuente de verdad del menú lateral, filtrado dinámicamente por permisos CASL (canAccessModule). El orden de secciones es reordenable por el usuario y persiste en localStorage.
  • src/routes/index.tsx — árbol de rutas. Cuatro familias de layout: AuthenticatedLayout (sidebar ISP estándar), y shells propios para ValChatLayout, AccountingLayout, ValStaffLayout. Rutas públicas sin sidebar: /sign-in, /aceptar-invitacion, /tomoval, /pagar/:token* (portal de pago del cliente final, sin login).
  • src/features/ — cada subcarpeta es un módulo de negocio (isp/clientes, accounting/, valstaff/, valchat/, tomoval/, ...) — mapeo completo en Módulos.
  • src/lib/ability.ts — lógica CASL de visibilidad de UI.

Comandos

pnpm dev      # :5174
pnpm build    # tsc -b && vite build
pnpm lint

On this page