Documentación del Sistema

Appearance

Comprobantes Pendientes - Documentacion Tecnica Frontend ​

Modulo: ventas Feature: Comprobantes Pendientes (Vista de Tipos) Fecha: 2026-02-09

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

Referencia de Negocio ​

Requisitos de Negocio - Comprobantes Pendientes

Estado de la Implementacion Frontend ​

La interfaz de "Comprobantes Pendientes" esta implementada como una vista legacy en PHP + vanilla JavaScript. No utiliza React ni TypeScript. No existe migracion a la arquitectura moderna.

Stack utilizado:

  • PHP template (SSR) para estructura HTML
  • jQuery + DataTables para tabla interactiva
  • Bootstrap 4 modals para formulario de edicion
  • Legacy ApiRequest (FormData + fetch) para comunicacion con backend
  • Vanilla JS para logica de interaccion

Componentes Implementados ​

Vista Principal: comprobantes-pendientes.php ​

Ubicacion: public/view/mod-ventas/comprobantes-pendientes.php

Proposito: Pagina de listado y administracion de tipos de comprobantes pendientes (tabla preformul). Es una vista de configuracion, no de gestion operativa de pedidos.

Estructura:

  • Sidebar del modulo Ventas (main-sidebar-venta.php)
  • Content header con breadcrumb: Home > Ventas > Comp. Pendientes
  • Card con tabla DataTables
  • Carga de JS module: js/view/mod-ventas/comprobantes-pendientes.js

Navegacion:

  • URL: ?loc=mvcp
  • Menu: Ventas > Bases > Comp. pendientes
  • Item sidebar ID: idMainSideBarCompPendientes
  • Permiso requerido: VENTAS_BASES_COMPROBANTES-PENDIENTES

Script Principal: comprobantes-pendientes.js ​

Ubicacion: public/js/view/mod-ventas/comprobantes-pendientes.js

Proposito: Inicializa la tabla de tipos de comprobantes y maneja la edicion.

Dependencias importadas:

  • createFormComprobantePendiente desde ../../components/forms/ventas/comprobante-pendiente.js
  • ApiRequest desde ../../middleware/API.js
  • reemplazarFila desde ../../util/datatable-methods.js
  • LANG_TABLE desde ../../util/constantes.js

DataTable configuracion:

  • ID: #tablaVendedores (nombre legacy, no refleja contenido real)
  • Columnas: Codigo (id), Nombre (nombre), Acciones (boton editar)
  • Responsive: si
  • Botones de exportacion: Excel, PDF
  • Idioma: Espanol via LANG_TABLE

Flujo de datos:

  1. Al cargar la pagina, hace GET mod-ventas/tipo-comprobante-pendiente
  2. Agrega los resultados a la tabla DataTables
  3. Al hacer click en boton editar, extrae los datos de la fila (data-row attribute)
  4. Abre el modal de edicion via createFormComprobantePendiente
  5. Al confirmar, reemplaza la fila en la tabla local

Formulario Modal: comprobante-pendiente.js ​

Ubicacion: public/js/components/forms/ventas/comprobante-pendiente.js

Proposito: Componente reutilizable que muestra un modal para editar un tipo de comprobante pendiente.

Parametros de entrada:

  • updateData: Objeto con datos del tipo a editar ({id, nombre, maneja_stock})
  • onSubmitCallback: Funcion callback al guardar exitosamente

Campos del formulario:

CampoElementoTipoEditableID
Codigoinput textreadonlyNoidInputCodigo
Nombreinput textreadonlyNoidInputNombre
Maneja StockcheckboxinteractivoSiidCheckManejaStock

Comportamiento:

  • Si onSubmitCallback es null: modo solo lectura (botones deshabilitados)
  • Si onSubmitCallback presente: modo edicion (solo maneja_stock editable)
  • Al submit: envia PATCH mod-ventas/tipo-comprobante-pendiente con {id, maneja_stock}
  • Muestra toast de exito "Comprobante modificada exitosamente"
  • Ejecuta callback con datos actualizados

Template HTML: public/php/components/mod-venta/forms/comprobante-pendiente.html

  • Se carga dinamicamente via getContentFile()
  • Modal Bootstrap 4 (modal-xl)
  • Formulario con 3 campos + botones Cancelar/Aceptar
  • Tooltip informativo en checkbox: "Indica si al cargar un comprobante se registra en movimientos de stock"

Integracion con Backend ​

Endpoints Consumidos ​

MetodoEndpointPropositoDesde
GETmod-ventas/tipo-comprobante-pendienteObtener todos los tiposcomprobantes-pendientes.js
PATCHmod-ventas/tipo-comprobante-pendienteActualizar tipocomprobante-pendiente.js (form)

Nota: El PATCH se envia como request.patch('mod-ventas/tipo-comprobante-pendiente', {id, maneja_stock}). El legacy ApiRequest envia los datos por body, y el backend usa el id del body para construir la URL /{id}.

Patron de Comunicacion ​

Se utiliza la clase legacy ApiRequest que:

  • Construye requests con FormData o JSON body
  • Inyecta automaticamente el header X-Schema desde localStorage
  • Maneja autenticacion JWT via interceptor
  • Base URL configurada en URL_APP

State Management ​

Estado local: No hay state management formal. Se usa:

  • DataTables como "store" de la tabla (los datos viven en el plugin jQuery)
  • Objeto literal comprobantePendiente en el formulario modal como buffer temporal
  • DOM manipulation directa para interacciones

Estado del servidor: No usa cache. Cada recarga de pagina hace un nuevo GET.

Routing ​

Ruta: ?loc=mvcp (query parameter routing del sistema legacy) Resolucion: En public/index.php, case mvcp incluye view/mod-ventas/comprobantes-pendientes.php

Permisos ​

La visibilidad del item de menu se controla en main-sidebar-venta.php:

  • Condicion de empresa: $empres['pedido'] debe ser true
  • Condicion de permiso: VENTAS_BASES_COMPROBANTES-PENDIENTES debe estar en $permiso_usuario

Observaciones sobre la Implementacion ​

  1. Vista legacy completa: No hay componentes React ni TypeScript involucrados. Todo es vanilla JS + jQuery + Bootstrap.

  2. Nombre de tabla incorrecto: La tabla HTML usa id="tablaVendedores" y el script referencia $('#tablaVendedores'), pero el contenido son tipos de comprobantes pendientes, no vendedores. Esto es un residuo de copy-paste de otra vista.

  3. Solo ABM de tipos: Esta vista no gestiona los pedidos individuales (comprobantes pendientes operativos). Solo administra los tipos configurables desde la tabla preformul.

  4. PATCH parcial: Solo se puede modificar maneja_stock. Los campos codigo y nombre son readonly en el formulario, pero el endpoint PATCH soporta actualizar cualquier campo.

  5. No hay formulario de alta: No existe funcionalidad para crear nuevos tipos de comprobantes desde la UI. Los tipos se crean via seed/migracion.

  6. No hay operacion de eliminacion: No se pueden eliminar tipos de comprobantes desde la UI.

Preguntas Tecnicas Pendientes ​

Hay aspectos tecnicos que requieren validacion. Ver: Preguntas sobre Comprobantes Pendientes

Aspecto relevante para frontend:

  • La vista de Comprobantes Pendientes vs la vista de Pedidos (pregunta 6): Es necesario clarificar la relacion entre ambas vistas.

Potencial Migracion a React ​

Si se decidiera migrar esta vista a React/TypeScript:

Alcance minimo:

  • Componente TipoComprobantePendienteList con tabla
  • Modal de edicion con campo checkbox
  • Service con getTipos() y patchTipo(id, data)
  • Hook con TanStack Query para cache

Estructura sugerida:

ts/ventas/ComprobantePendiente/
  components/
    TipoComprobantePendienteTable/index.tsx
    TipoComprobantePendienteEditModal/index.tsx
  views/
    ComprobantePendienteView.tsx
  services/
    tipoComprobantePendiente.service.ts
  hooks/
    useTipoComprobantePendiente.ts
  types/
    tipoComprobantePendiente.types.ts
  schemas/
    tipoComprobantePendiente.schema.ts

Referencias ​

NOTA IMPORTANTE: Esta documentacion fue generada automaticamente analizando el codigo implementado. Validar cambios futuros contra este baseline.