Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Eleazarguitar18/kantuta_pos_front/llms.txt

Use this file to discover all available pages before exploring further.

The Kantuta POS Reports Center provides five distinct PDF report types, each rendered entirely in the browser using @react-pdf/renderer. No server-side PDF generation is involved: data is fetched from the API, passed into a React PDF component, converted to a Blob, and immediately triggered as a browser download. All report routes sit under /reportes and are protected by ProtectedRoute allowedRoles={['Administrador']}.
All report routes — including the /reportes index — are accessible to the Administrador role only. Cajero users who attempt to navigate to any /reportes path will be silently redirected to the dashboard home (/).

​
Available Reports

Movimientos de Caja

Session-level cash movement audit. Shows every ingreso and egreso logged against a specific caja session, plus the opening balance and theoretical closing balance.Route: /reportes/caja

Reporte de Ventas

Consolidated sales audit for a custom or quick-select date range. Includes all sale transactions and their line-item detail processed by any cashier.Route: /reportes/ventas

Reporte de Compras

Purchase history and merchandise intake by date range. Covers all supplier orders registered through the purchases module.Route: /reportes/compras

Inventario de Productos

Snapshot of current stock levels across all products, with semaphore color coding and projected investment and profit calculations. No date selection required.Route: /reportes/inventario

Productividad por Operador

Individual operator performance evaluation for a selected date range. Optionally scoped to a single operator by choosing from the registered user list.Route: /reportes/productividad

​
Report 1 — Movimientos de Caja

This two-step wizard walks the administrator from selecting a physical cash drawer to picking a specific session before downloading the PDF.
1

Select a caja

The component loads all registered cajas via CajasService.getCajas() and displays them in a paginated data table. Each row shows the caja name, specialty type, and current active/inactive status. Click Ver Sesiones to advance.
2

Select a session

The selected caja’s full record is fetched with CajasService.getCajaById(id). Its sesiones array is displayed in a second table with apertura/cierre timestamps, initial balance (monto_inicial), and session state (ABIERTA / CERRADA). Sessions still in progress display an EN CURSO badge.
3

Download the PDF

Clicking the 📄 PDF button on any session row calls GET /reportes/data/movimientos-caja/:sesionId. The response is passed to <MovimientosCajaPdf data={response.data} /> and rendered to a Blob. The file is saved as movimientos-caja-sesion-{id}.pdf.
The generated PDF uses the MovimientosCajaPdf component — an A4 document with a totals summary box that breaks down ingresos, egresos, and net cash flow. The CajaHistorialPdf component shares the same data shape and is used for standalone historical extracts: 
// src/components/pdf/CajaHistorialPdf.tsx (data shape)

// data.totales: { ingresos: number; egresos: number; neto: number }
// data.movimientos: Array<{ id; fecha; id_sesion; tipo: "INGRESO"|"EGRESO"; motivo; monto }>
// data.caja: { id: number; nombre: string }

​
Report 2 — Reporte de Ventas

A date-range selector with built-in quick-pick presets generates a consolidated sales PDF. The auditor name is automatically populated from the authenticated user’s name field and embedded in the document.
The component ships five one-click presets that auto-fill both date inputs:
LabelRange
HoyToday’s date only
Esta SemanaMonday of the current week → today
Este MesFirst day of the current month → today
Mes PasadoFull previous calendar month
Últimos 3 MesesFirst day, three months ago → today
Once a valid date range is set, clicking 📄 Descargar Reporte de Ventas (PDF) calls: 
GET /reportes/data/ventas-rango?fechaInicio=YYYY-MM-DD&fechaFin=YYYY-MM-DD&auditor=<name>
The response data is passed to <ReporteVentasPDF datos={datosReporte} rango={rangoTexto} /> and saved as ventas-rango-{fechaInicio}-a-{fechaFin}.pdf.
If fechaInicio is later than fechaFin, the download is blocked and an inline error alert is shown. The button is also disabled while the PDF is being generated to prevent duplicate requests.

​
Report 3 — Reporte de Compras

Identical UX pattern to the sales report — quick-range presets (Hoy, Esta Semana, Este Mes, Mes Pasado) plus manual date pickers. The endpoint and PDF component differ: 
GET /reportes/data/compras-rango?fechaInicio=YYYY-MM-DD&fechaFin=YYYY-MM-DD&auditor=<name>
The response is rendered by <ComprasRangoPdf data={response.data} /> and saved as compras-rango-{fechaInicio}-a-{fechaFin}.pdf.

​
Report 4 — Inventario de Productos

The inventory report is an instant snapshot — no date range is required. A single button initiates the download. 
GET /reportes/data/inventario?auditor=<name>
The response feeds <ReporteInventarioPDF datos={datosReporte} /> and is saved as inventario-actual-{YYYY-MM-DD}.pdf.

​
Semaphore Color Coding

The inventory PDF uses a three-color stock-level indicator:
ColorMeaning
🔴 RedStock is below the product’s defined minimum threshold
🟡 YellowStock is near the minimum (approaching the threshold)
🟢 GreenStock level is healthy — above the near-minimum band
This allows managers to triage restocking priorities at a glance without having to scan individual figures.

​
Report 5 — Productividad por Operador

The productivity report adds an operator filter on top of the standard date-range picker. By default the report covers all operators; selecting a specific user from the dropdown scopes the data to that individual.
1

Select a date range

Use the quick-range buttons (Hoy, Esta Semana, Este Mes, Mes Pasado) or fill in custom Fecha Inicio / Fecha Fin values.
2

Optionally filter by operator

The dropdown is populated via GET /usuario and lists every registered user as {nombres} {p_apellido} ({email}). Leave the selection on Todos los operadores to include all staff.
3

Download

The API call appends an optional operadorId query parameter when a specific operator is selected:
GET /reportes/data/productividad-operador
  ?fechaInicio=YYYY-MM-DD
  &fechaFin=YYYY-MM-DD
  [&operadorId=<id>]
The result is rendered by <ProductividadOperadorPdf data={response.data} /> and saved as productividad-{fechaInicio}-a-{fechaFin}.pdf.

​
Point-of-Sale Sale Ticket (TicketVentaPdf)

In addition to the five admin reports, Kantuta POS generates a sale ticket PDF immediately after each successful POS transaction. This PDF is rendered client-side using the TicketVentaPdf component and sized for A5 paper: 
// src/components/pdf/TicketVentaPdf.tsx

interface VentaData {
  id: number;
  fecha: string;
  cajero: string;
  metodo_pago: string;
  estado_venta: string;
  detalles: Array<{
    nombre: string;
    cantidad: number;
    precio_unitario: number;
    subtotal: number;
  }>;
  total: number;
}

export const TicketVentaPdf: React.FC<{ data: VentaData }> = ({ data }) => (
  <Document>
    <Page size="A5" style={styles.page}>
      <View style={styles.header}>
        <Text style={styles.title}>TICKET DE VENTA</Text>
        <Text style={styles.subtitle}>Kantuta POS</Text>
      </View>
      <View style={styles.info}>
        <Text>Nro. Ticket: {data.id}</Text>
        <Text>Fecha: {new Date(data.fecha).toLocaleString()}</Text>
        <Text>Cajero: {data.cajero}</Text>
        <Text>Método Pago: {data.metodo_pago}</Text>
        <Text>Estado: {data.estado_venta}</Text>
      </View>
      {/* Line items: Producto / Cant. / P. Unit / Subtotal */}
      <View style={styles.totalBox}>
        <Text>TOTAL: Bs. {data.total.toFixed(2)}</Text>
      </View>
    </Page>
  </Document>
);
The ticket is generated for both Administrador and Cajero roles since any operator can process a sale. It is not accessible through the Reports Center UI — it is triggered automatically by the POS module.

​
PDF Technology Reference

All PDF documents in Kantuta POS are built with @react-pdf/renderer. The library compiles React component trees into a PDF byte stream entirely in the browser: 
import { pdf } from "@react-pdf/renderer";

// Generic pattern used by every report component:
const blob = await pdf(<SomePdfComponent data={responseData} />).toBlob();
const downloadUrl = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = downloadUrl;
link.setAttribute("download", "filename.pdf");
document.body.appendChild(link);
link.click();
link.remove();
window.URL.revokeObjectURL(downloadUrl);
Because all rendering happens on the client, no additional server infrastructure is required to produce PDF output. The only network calls made are the data-fetch requests to the /reportes/data/* endpoints.

Build docs developers (and LLMs) love

Get started for freeTalk to us