Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ProyectoFerretek/FerreMarket/llms.txt

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

src/utils/formatters.ts provides pure functions used across every module for consistent display of prices, dates, client names, sale states, and inventory values. None of these functions perform any I/O — they take plain values and return formatted strings or numbers, making them safe to call anywhere in the render tree without side effects.

​
formatPrecio

export const formatPrecio = (valor: number): string
Formats a number as Chilean Peso (CLP) using the browser-native Intl.NumberFormat API with the es-CL locale. The formatter is configured with style: 'currency', currency: 'CLP', and maximumFractionDigits: 0, so decimal cents are never displayed. The result matches the currency notation used on Chilean receipts and price tags (e.g. $15.000).
​
valor
number
required
The raw numeric price or amount to format. Must be a finite number. Negative values are formatted with a leading minus sign: formatPrecio(-5000) → '-$5.000'.
Returns string — the value rendered as a CLP currency string. 
import { formatPrecio } from '@/utils/formatters';

formatPrecio(15000);   // '$15.000'
formatPrecio(1299990); // '$1.299.990'
formatPrecio(0);       // '$0'

​
formatFecha

export const formatFecha = (fechaIso: string, incluirHora: boolean = false): string
Converts an ISO 8601 date string to a human-readable Chilean Spanish locale string. When incluirHora is false (the default) the output uses a DD/MM/YYYY pattern. When incluirHora is true the output includes hours and minutes as DD/MM/YYYY HH:mm. Any falsy, empty, or unparseable input returns the sentinel string 'Sin fecha registrada' instead of throwing.
​
fechaIso
string
required
An ISO 8601 date string such as '2025-06-15' or '2025-06-15T10:30:00'. Passing an empty string or a string that cannot be parsed by new Date() causes the function to return 'Sin fecha registrada'.
​
incluirHora
boolean
When true, the formatted output appends the time component (HH:mm). Defaults to false.
Returns string — a locale-formatted date string, or 'Sin fecha registrada' for invalid inputs. 
import { formatFecha } from '@/utils/formatters';

// Date only (default)
formatFecha('2025-06-15T10:30:00');        // '15/06/2025'

// Date and time
formatFecha('2025-06-15T10:30:00', true);  // '15/06/2025 10:30'

// Empty or invalid input
formatFecha('');                            // 'Sin fecha registrada'
formatFecha('not-a-date');                  // 'Sin fecha registrada'
Always pass the full ISO timestamp (including T and time part) when incluirHora is true; a date-only string like '2025-06-15' will parse to midnight UTC and may display as the previous day depending on the user’s timezone offset.

​
getNombreCliente

export const getNombreCliente = (clienteId: string, clientes: any[]): string
Looks up a client by ID in an in-memory array and returns the client’s display name. The comparison is performed with Number(c.id) === Number(clienteId) so that string/number type mismatches between the stored ID and the passed argument are handled gracefully. If no matching client is found the function returns 'Cliente no encontrado'. This function is used throughout the Sales module to resolve a raw clienteId foreign-key value into a readable name without making additional network requests.
​
clienteId
string
required
The ID of the client to look up. Can be a numeric string (e.g. '42'); the function coerces it to a number for the comparison.
​
clientes
any[]
required
The full array of client objects already loaded into component state. Each element is expected to have at least id and nombre properties.
Returns string — cliente.nombre when a match is found, or 'Cliente no encontrado' otherwise. 
import { getNombreCliente } from '@/utils/formatters';

const clientes = [
  { id: 1, nombre: 'Ana Torres' },
  { id: 2, nombre: 'Luis Muñoz' },
];

getNombreCliente('1', clientes);  // 'Ana Torres'
getNombreCliente('2', clientes);  // 'Luis Muñoz'
getNombreCliente('99', clientes); // 'Cliente no encontrado'

​
getEstadoVenta

export const getEstadoVenta = (estado: string): { label: string; color: string }
Maps a raw sale-state string stored in the database to a localised display label and a pair of Tailwind CSS utility classes suitable for rendering a status badge. This keeps badge styling centralised so every component shows identical colours for the same state.
​
estado
string
required
The raw state value as stored in the database. Recognised values are 'completada', 'pendiente', and 'cancelada' (lowercase). Any unrecognised value falls through to the default case and is rendered with neutral grey classes.
Returns { label: string; color: string } — an object whose label is the Spanish display string and color is a space-separated pair of Tailwind background and text colour classes.
estadolabelcolor
completadaCompletadabg-green-100 text-green-800
pendientePendientebg-yellow-100 text-yellow-800
canceladaCanceladabg-red-100 text-red-800
(any other)(as-is)bg-gray-100 text-gray-800
import { getEstadoVenta } from '@/utils/formatters';

const { label, color } = getEstadoVenta('completada');
// label → 'Completada'
// color → 'bg-green-100 text-green-800'

// Usage inside a React component:
<span className={`px-2 py-1 rounded-full text-xs font-medium ${color}`}>
  {label}
</span>

​
calcularValorInventario

export const calcularValorInventario = (productos: any[]): number
Reduces a products array to the total monetary value of all stock on hand by summing producto.precio * producto.stock for every element. This is a synchronous, pure computation used on the Reportes page to display the current inventory valuation without any additional network calls.
​
productos
any[]
required
An array of product objects already loaded into memory. Each element must have precio (unit price as a number) and stock (quantity on hand as a number). Elements where either field is undefined or NaN will contribute NaN to the total; ensure the input is clean before calling this function.
Returns number — the total inventory value. Returns 0 for an empty array. 
import { calcularValorInventario } from '@/utils/formatters';

const productos = [
  { nombre: 'Martillo',   precio: 5000,  stock: 10 },
  { nombre: 'Tornillos',  precio: 150,   stock: 200 },
  { nombre: 'Taladro',    precio: 45000, stock: 3  },
];

calcularValorInventario(productos);
// (5000 × 10) + (150 × 200) + (45000 × 3)
// = 50000 + 30000 + 135000
// = 215000
There are two functions named calcularValorInventario in this codebase with different signatures and execution models:
  • src/utils/formatters.ts — the synchronous version documented here. It receives a pre-loaded productos array and returns a plain number. Use this when the products are already in component state (e.g. in the Reportes page).
  • src/data/mockData.ts — an async version that queries the Supabase productos table directly and returns Promise<number>. Use this when you need a fresh inventory value from the database without loading the full products list into state first.
Importing from the wrong module will either give you a stale local value or an unexpected Promise — always check your import path.

Build docs developers (and LLMs) love

Get started for freeTalk to us