Cotizacion Dolar - Documentacion Tecnica Frontend

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

Modulo: Ventas Feature: Cotizacion Dolar Fecha: 2026-02-09 Documento de negocio: Cotizacion Dolar - Resource

Estado de Arquitectura

ARQUITECTURA LEGACY - Este recurso NO sigue la arquitectura moderna React/TypeScript del sistema. Esta implementado con PHP server-side rendering (SSR) + vanilla JavaScript. No utiliza React, TypeScript, TanStack Query, Zod ni ninguno de los patrones modernos del frontend.

Capa	Estado	Ubicacion
Vista PHP (SSR)	Implementada	`public/view/mod-ventas/cot-dolar.php`
JavaScript (vanilla)	Implementado	`public/js/view/mod-ventas/cot-dolar.js`
Proxy Backend PHP	Implementado	`public/php/backend/dolar.php`
React Component	No existe	N/A
TypeScript Types	No existe	N/A
Zod Schema	No existe	N/A
Service (axios)	No existe	N/A
TanStack Query Hook	No existe	N/A

Componentes Implementados

Vista PHP: cot-dolar.php

Ubicacion: /var/www/Bautista/public/view/mod-ventas/cot-dolar.php

Proposito: Renderiza la pagina completa de Cotizacion Dolar con layout AdminLTE.

Estructura de la pagina:

Header: Titulo "Nueva Cotizacion" con breadcrumb (Home > Ventas > Cotizacion Dolar)
Card principal: Formulario de cotizacion con titulo "Cotizacion Dolar"
Formulario (#idFormCotDolar):
- Campo Fecha (#idInputFecha) - Input text con badge de fecha anterior
- Campo Valor (#idInputValor) - Input text con formato numerico
- Boton "Cancelar" - Vuelve al menu de ventas
- Boton "Aceptar" - Submit del formulario
Tabla de cotizaciones externas: Muestra Dolar Oficial y Blue (compra/venta) de dolarapi.com

Template PHP inclusions:

php/constants.php - Constantes del sistema
php/util/methods.php - Utilidades
php/components/preloader.php - Preloader
php/components/navbar.php - Barra de navegacion
php/components/mod-venta/main-sidebar-venta.php - Sidebar del modulo ventas
php/components/footer.php - Footer

Validacion de acceso: Verifica $_SESSION['SD_USER'], redirige a login si no existe.

Menu activo: Activa idNavMainSideBarBases y idMainSideBarCotDolar en el sidebar.

CSS: AdminLTE + Font Awesome + SweetAlert.

JS: jQuery + Bootstrap 4 + AdminLTE + modulo ES6 (cot-dolar.js).

JavaScript: cot-dolar.js

Ubicacion: /var/www/Bautista/public/js/view/mod-ventas/cot-dolar.js

Proposito: Logica de inicializacion, carga de datos y envio del formulario.

Imports:

javascript

import { ApiRequest } from "../../middleware/API.js";
import { setInputBadge, setInputFecha } from "../../util/inputs.js";

Elementos DOM referenciados:

ID	Tipo	Proposito
`idFormCotDolar`	form	Formulario principal
`idInputFecha`	input	Campo de fecha
`idInputValor`	input	Campo de valor
`idFechaAnterior`	span	Badge con fecha de ultima cotizacion
`oficial_compra`	span	Dolar oficial compra
`oficial_venta`	span	Dolar oficial venta
`blue_compra`	span	Dolar blue compra
`blue_venta`	span	Dolar blue venta

Flujo de inicializacion (IIFE async):

setInputBadge(inputValor) - Configura formato de input numerico (badge tipo "F" = formato financiero)
setInputFecha(inputFecha) - Configura formato de input fecha
Establece fecha actual como valor por defecto: inputFecha.value = getFechaActual()
Pone foco en el campo fecha y selecciona todo el texto
GET /api/dolar: Obtiene ultima cotizacion
- Muestra fecha anterior en badge: Fecha Anterior: {fecha formateada}
- Pre-carga el valor en el campo inputValor
fetch dolarapi.com/v1/ambito/dolares/oficial: Carga cotizacion oficial
fetch dolarapi.com/v1/ambito/dolares/blue: Carga cotizacion blue

Handler de submit del formulario:

e.preventDefault() - Previene envio HTML nativo
Valida que valor >= 0 (si no, muestra modal de error)
Muestra popup de loading: "Registrando cambios"
POST /api/dolar con body: { valor, fecha } (fecha convertida a formato ISO)
En exito: muestra modal "Cotizacion registrada" y redirige a ?loc=mv

Proxy PHP: public/php/backend/dolar.php

Ubicacion: /var/www/Bautista/public/php/backend/dolar.php

Proposito: Proxy que re-envia requests al backend real (server/backend/dolar.php) con validacion adicional.

Flujo GET:

Valida sesion ($_SESSION['SD_USER'])
Crea instancia de Request (Guzzle wrapper)
Envia GET dolar al backend
Retorna el campo data del response JSON

Flujo POST:

Valida sesion
Lee body JSON del request
Valida input:
- valor: required|numeric
- fecha: required|date
Si la validacion falla, lanza ValidatorException
Crea instancia de Request
Envia POST dolar con body JSON al backend
Retorna el status code del response

Integracion con Backend

Endpoints consumidos

Metodo	Endpoint	Proposito	Clase/Patron
GET	`/api/dolar`	Obtener ultima cotizacion	`ApiRequest.get('dolar')`
POST	`/api/dolar`	Registrar/actualizar cotizacion	`ApiRequest.post('dolar', { valor, fecha })`

Patron de comunicacion: ApiRequest (clase legacy en js/middleware/API.js) con path base /api/.

Usa fetch nativo (no axios)
Envio de body como JSON (Content-Type: application/json)
Propagacion automatica de X-Schema desde localStorage (bautista_selected_sucursal)
Manejo de token refresh automatico para 401
Response 204 retorna null (sin body)

APIs Externas consumidas directamente desde frontend

API	URL	Metodo	Proposito
dolarapi.com	`https://dolarapi.com/v1/ambito/dolares/oficial`	GET	Cotizacion oficial
dolarapi.com	`https://dolarapi.com/v1/ambito/dolares/blue`	GET	Cotizacion blue

Response esperado de dolarapi.com:

json

{
  "compra": 1020.50,
  "venta": 1055.00,
  "casa": "oficial",
  "nombre": "Oficial",
  "moneda": "USD",
  "fechaActualizacion": "2026-02-09T..."
}

State Management

No hay state management moderno. Todo el estado se maneja con variables locales del scope del modulo JS y manipulacion directa del DOM.

Estado	Mecanismo	Persistencia
Valor de cotizacion	`inputValor.value` (DOM)	No persiste (se re-carga del backend)
Fecha	`inputFecha.value` (DOM)	No persiste
Ultima cotizacion	Badge `#idFechaAnterior` (DOM)	No persiste
Cotizaciones externas	Spans en tabla (DOM)	No persiste

Validaciones del Formulario

No hay Zod schema. Las validaciones se implementan de forma imperativa:

Campo	Validacion Frontend (JS)	Validacion Proxy (PHP)
`fecha`	Formato via `setInputFecha` (helper de UI)	`required\|date`
`valor`	`valor < 0` muestra error	`required\|numeric`

Helpers de utilidad:

Funcion	Origen	Proposito
`setInputBadge(input)`	`js/util/inputs.js`	Configura badge visual para inputs con formato
`setInputFecha(input)`	`js/util/inputs.js`	Configura input de tipo fecha
`getFechaActual()`	Global (inline)	Retorna fecha actual formateada
`setDateFormat(fecha)`	Global (inline)	Formatea fecha para visualizacion
`setFormatoMoneda(valor)`	Global (inline)	Formatea numero como moneda
`setDateFormatIso(fecha)`	Global (inline)	Convierte fecha a formato ISO (YYYY-MM-DD)
`showModal(tipo, mensaje)`	Global (inline)	Muestra modal SweetAlert
`showPopupLoading(tipo, titulo)`	Global (inline)	Muestra popup de carga
`back(loc)`	Global (inline)	Navega hacia atras (redireccion)

Routing

No hay React Router. La navegacion se maneja con el sistema legacy de parametro ?loc=:

Ruta	Componente	Proposito
`?loc=mvcd`	`view/mod-ventas/cot-dolar.php`	Pantalla de Cotizacion Dolar
`?loc=mv`	Menu de Ventas	Redireccion post-guardado y cancelacion

Acceso desde sidebar: El item "Cotizacion Dolar" se muestra en el sidebar bajo Ventas > Bases, condicionado al permiso VENTAS_BASES_COT-DOLAR.

Diagrama de Flujo de la Vista

mermaid

flowchart TD
    A([Usuario accede a ?loc=mvcd]) --> B[Carga pagina PHP SSR]
    B --> C[Inicializa inputs fecha/valor]
    B --> D[GET /api/dolar - Ultima cotizacion]
    B --> E[fetch dolarapi.com - Oficial]
    B --> F[fetch dolarapi.com - Blue]
    D --> G[Muestra fecha anterior + pre-carga valor]
    E --> H[Muestra compra/venta oficial]
    F --> I[Muestra compra/venta blue]
    G --> J{Usuario interactua}
    J -->|Modifica valor/fecha| K[Presiona Aceptar]
    J -->|Presiona Cancelar| L[Redirige a ?loc=mv]
    K --> M{valor >= 0?}
    M -->|No| N[Modal error: valor negativo]
    N --> J
    M -->|Si| O[POST /api/dolar]
    O --> P{Exito?}
    P -->|Si| Q[Modal: Cotizacion registrada]
    Q --> R[Redirige a ?loc=mv]
    P -->|No| S[Modal error]
    S --> J

Accesibilidad

Inputs tienen label asociados via for / id
Botones tienen iconos Font Awesome + texto descriptivo
No se detectan atributos ARIA adicionales
Layout responsive basado en Bootstrap 4 grid (col-md-4)

Preguntas Tecnicas Pendientes

Hay aspectos tecnicos que requieren validacion. Ver: Preguntas sobre Cotizacion Dolar

Referencias

NOTA IMPORTANTE: Esta documentacion fue generada automaticamente analizando el codigo implementado. Este recurso se encuentra en arquitectura legacy (PHP SSR + vanilla JS) y no sigue los patrones modernos del sistema (React/TypeScript). Validar cambios futuros contra este baseline.

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

Cotizacion Dolar - Documentacion Tecnica Frontend ​

Estado de Arquitectura ​

Componentes Implementados ​

Vista PHP: cot-dolar.php ​

JavaScript: cot-dolar.js ​

Proxy PHP: public/php/backend/dolar.php ​

Integracion con Backend ​

Endpoints consumidos ​

APIs Externas consumidas directamente desde frontend ​

State Management ​

Validaciones del Formulario ​

Routing ​

Diagrama de Flujo de la Vista ​

Accesibilidad ​

Preguntas Tecnicas Pendientes ​

Referencias ​