Categoria IVA - Documentacion Tecnica Frontend

DOCUMENTACION RETROSPECTIVA - Generada a partir de codigo implementado el 2026-02-09

Modulo: Ventas Feature: Categoria IVA (Alicuotas de IVA ARCA) Fecha: 2026-02-09

Link a Requisitos de Negocio

Arquitectura Implementada

Patron actual: Legacy (vanilla JavaScript + jQuery + DataTables)

NO utiliza React/TypeScript. Este recurso esta implementado completamente en el patron legacy del frontend.

Componente	Archivo	Tecnologia
Vista PHP	`public/view/mod-ventas/cat-iva.php`	PHP template (SSR)
Logica JS	`public/js/view/mod-ventas/cat-iva.js`	Vanilla JS (ES modules)
Proxy API	`public/php/backend/categoria-iva.php`	PHP proxy
API Client	`public/js/middleware/API.js`	Legacy ApiRequest class

Componentes Implementados

Vista: cat-iva.php

Ubicacion: public/view/mod-ventas/cat-iva.php

Proposito: Vista completa PHP que renderiza la pagina del listado de Categorias de IVA.

Estructura de la pagina:

Header con titulo "Listado de cat. de IVA"
Breadcrumb: Home > Ventas > Cat. IVA
Card con tabla DataTables
Footer estandar
Sidebar de modulo Ventas

Templates incluidos:

php/components/preloader.php
php/components/navbar.php
php/components/mod-venta/main-sidebar-venta.php
php/components/footer.php

Sidebar selection: setElementsSelectedMainSideBar('idNavMainSideBarBases', 'idMainSideBarBases', 'idMainSideBarCatIva')

URL de acceso: ?loc=mvcia

Logica: cat-iva.js

Ubicacion: public/js/view/mod-ventas/cat-iva.js

Proposito: Inicializa la tabla DataTables y carga los datos de categorias de IVA.

Dependencias importadas:

ApiRequest desde ../../middleware/API.js
LANG_TABLE desde ../../util/constantes.js

Funcionalidad implementada:

Inicializacion DataTable: Configura tabla #tablaCatIva con las opciones:
- language: Idioma espanol (via LANG_TABLE)
- responsive: true
- lengthChange: false (no permite cambiar items por pagina)
- autoWidth: false
- Botones de exportacion: Excel, PDF
Columnas definidas:
Titulo Data Visible
Codigo codigo Si
Nombre nombre Si
NOTA: El campo porcentaje disponible en la respuesta API no se muestra en la tabla.
Columna de Acciones (COMENTADA):
- Existe codigo comentado (lineas 19-29) para una columna "Acciones" con boton de modificar
- Sugiere que se considero la edicion pero fue descartada o pospuesta
Carga de datos: IIFE asincrona que ejecuta request.get('categoria-iva') y agrega las filas a la tabla con tablaCat.rows.add(data).draw()

Titulo	Data	Visible
Codigo	`codigo`	Si
Nombre	`nombre`	Si

Flujo de Datos

cat-iva.js
  |
  | ApiRequest.get('categoria-iva')
  |   -> FormData con funcion
  |   -> fetch() POST al proxy
  v
public/php/backend/categoria-iva.php (Proxy)
  |
  | Request class (Guzzle HTTP)
  | GET al backend con json body
  v
server/backend/categoria-iva.php (Backend)
  |
  v
CategoriaIvaController -> CategoriaIva Model -> DB
  |
  v
JSON Response: { status: 200, data: [...] }
  |
  v (proxy extrae 'data')
JSON a frontend: [{ codigo, nombre, porcentaje }, ...]
  |
  v
DataTable.rows.add(data).draw()

NOTA sobre el proxy: El proxy en public/php/backend/categoria-iva.php valida sesion ($_SESSION['SD_USER']), hace la peticion al backend real mediante la clase Request, extrae el campo data de la respuesta y lo reenvio al frontend.

Integracion con Backend

Endpoint Consumido

Metodo	Endpoint Proxy	Endpoint Backend Real
GET	`php/backend/categoria-iva.php`	`backend/categoria-iva.php`

Datos Recibidos

typescript

// Tipo inferido de la respuesta
interface CategoriaIva {
  codigo: number;   // Codigo ARCA
  nombre: string;   // Nombre descriptivo
  porcentaje: number; // Porcentaje de alicuota (no mostrado en tabla)
}

Patron de Comunicacion

API Client: ApiRequest class (legacy, usa fetch con FormData)
Metodo: request.get('categoria-iva') que internamente hace POST al proxy
Autenticacion: Session-based (via $_SESSION['SD_USER'] en proxy)
Schema: Automaticamente inyectado por API.js desde localStorage

State Management

Tipo	Tecnologia	Uso
Datos servidor	DataTables interno	Almacena filas en memoria de DataTables
No hay estado local	-	No se usa useState ni variables de estado
Sesion	localStorage/sessionStorage	Schema, token (manejado por API.js)

No hay gestion de estado compleja dado que la vista es de solo lectura sin interacciones de usuario mas alla de la visualizacion y exportacion.

Exportacion de Datos

DataTables proporciona botones de exportacion:

Excel: Exporta tabla a formato .xlsx
PDF: Exporta tabla a formato .pdf

Ambas funcionalidades son proporcionadas por los plugins de DataTables (buttons.html5.min.js, pdfmake).

Routing

URL	Parametro	Vista	Archivo
`?loc=mvcia`	`mvcia`	Listado Cat. IVA	`view/mod-ventas/cat-iva.php`

No usa React Router. El routing se maneja mediante parametro loc en la URL procesado por public/index.php.

Librerias/Plugins Utilizados

Libreria	Version	Proposito
jQuery	(incluido)	Manipulacion DOM
DataTables	(incluido)	Tabla interactiva
DataTables Bootstrap 4	(incluido)	Estilo Bootstrap
DataTables Responsive	(incluido)	Tabla responsive
DataTables Buttons	(incluido)	Botones exportar
pdfmake	(incluido)	Generacion PDF
jszip	(incluido)	Generacion Excel
AdminLTE	(incluido)	Template de UI
Bootstrap 4	(incluido)	Framework CSS
Font Awesome	(incluido)	Iconos
SweetAlert	(referenciado CSS)	Alertas

Comparacion con Recurso Relacionado: Condicion IVA

La "Condicion IVA" (?loc=mvci) es un recurso similar pero con mas funcionalidades:

Aspecto	Categoria IVA (aliva)	Condicion IVA (ordiva)
Vista	Solo lectura	Lectura + Edicion
Columnas tabla	Codigo, Nombre	Codigo, Nombre, Defecto, Acciones
Formulario	No	Si (modal con Descripcion, CUIT obl., Discrimina)
Operaciones API	GET	GET, PUT, PATCH
Boton alta	No	Si (deshabilitado con alerta)
Checkbox defecto	No	Si (marca condicion por defecto)
Boton editar	No (comentado en codigo)	Si (abre modal de edicion)

Uso como Componente en React (Membresias)

Aunque la vista principal es legacy, la entidad "Condicion IVA" (ordiva) se consume desde React en el modulo Membresias:

Archivo: public/ts/mod-membresias/Miembro/components/MiembroForm/DatosComerciales.tsx

Patron: ControlledSelect component con endpoint ordiva

<ControlledSelect
  name="condicionIva"
  endpoint="ordiva"
  label="Condicion IVA"
  defaultSelection="defecto"
  required
/>

NOTA: Este es uso de "Condicion IVA" (ordiva), NO de "Categoria IVA" (aliva). No se encontro consumo React directo de la tabla aliva.

Schemas de Validacion

No existen schemas Zod para este recurso. No hay componentes React ni formularios que requieran validacion frontend moderna.

Patrones Identificados

Conformidad con Arquitectura Frontend del Sistema

Patron	Estado	Nota
React/TypeScript	NO	Usa vanilla JS
TanStack Query	NO	Usa ApiRequest legacy
Zod schemas	NO	No hay validacion
React Hook Form	NO	No hay formulario
ControlledSelect	NO	No hay selects React
Vite compilation	NO	JS cargado directamente
TypeScript types	NO	Sin tipado

Deuda Tecnica Identificada

Sin migracion a React: Toda la vista es legacy PHP + vanilla JS
Sin TypeScript: No hay tipos definidos para la entidad
API legacy (ApiRequest): Usa patron FormData + fetch en lugar de axios + interceptors
Sin Zod schemas: No hay validacion de datos recibidos
Sin TanStack Query: No hay cache ni gestion de estado servidor
Columna de Acciones comentada: Codigo muerto en el archivo JS
Porcentaje no visible: Campo disponible pero no mostrado en tabla

Preguntas Tecnicas Pendientes

Hay aspectos tecnicos que requieren validacion. Ver: Preguntas sobre Categoria IVA

Preguntas tecnicas relacionadas al frontend:

Boton de acciones comentado - eliminar o implementar? (Q8)
Porcentaje no visible en tabla - intencional? (Q4)

Referencias

NOTA IMPORTANTE: Esta documentacion fue generada automaticamente analizando el codigo implementado. Este recurso esta completamente en patron legacy (PHP + vanilla JS + jQuery + DataTables). Si se planea modernizar, deberia migrarse a React/TypeScript siguiendo el patron del sistema documentado en docs/frontend/estructura-modulos-react.md.

Fase 1 Mvp

Fase 2 Sse

Fase 3 Production

Joins

Retenciones

Ganancias

Catalogos

Extensiones

Presupuestos

Recursos Principales

Relaciones

Catalogos Base

Cupon Pago

Facturacion

Gestion Miembros

Grupos Familiares

Soporte Tecnico

Architecture

Backend

Api

Database

Migrations

Middleware

Security

Services

Deployment

Development

Testing

Frontend

Integrations

Payment Gateways

Retenciones

Categoria IVA - Documentacion Tecnica Frontend ​

Link a Requisitos de Negocio ​

Arquitectura Implementada ​

Componentes Implementados ​

Vista: cat-iva.php ​

Logica: cat-iva.js ​

Flujo de Datos ​

Integracion con Backend ​

Endpoint Consumido ​

Datos Recibidos ​

Patron de Comunicacion ​

State Management ​

Exportacion de Datos ​

Routing ​

Librerias/Plugins Utilizados ​

Comparacion con Recurso Relacionado: Condicion IVA ​

Uso como Componente en React (Membresias) ​

Schemas de Validacion ​

Patrones Identificados ​

Conformidad con Arquitectura Frontend del Sistema ​

Deuda Tecnica Identificada ​

Preguntas Tecnicas Pendientes ​

Referencias ​