Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Davidmallega/Gastos-App/llms.txt

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

El módulo src/utils/compromisos.js encapsula toda la lógica de negocio asociada a los compromisos recurrentes de GastosApp. Exporta las constantes de configuración y tres funciones puras que determinan el estado de un compromiso, su representación visual y la etiqueta de su próximo vencimiento. Al ser funciones sin efectos secundarios, pueden ejecutarse en cada renderizado sin riesgo y son completamente verificables en tests.

​
Constantes exportadas

​
FRECUENCIAS

Array de opciones de frecuencia disponibles para los compromisos recurrentes. Se usa para poblar el <Select> del formulario de creación y para mostrar la etiqueta de frecuencia en las tarjetas. 
export const FRECUENCIAS = [
  { value: 'mensual',    label: 'Mensual' },
  { value: 'quincenal',  label: 'Quincenal' },
  { value: 'semanal',    label: 'Semanal' },
  { value: 'bimestral',  label: 'Bimestral' },
  { value: 'trimestral', label: 'Trimestral' },
  { value: 'anual',      label: 'Anual' },
]
Cada elemento tiene la forma { value: string, label: string }, donde value es la clave almacenada en el modelo de datos y label es el texto visible al usuario.

​
DIAS_SEMANA

Array de los días de la semana, indexado desde 0 (domingo) hasta 6 (sábado), equivalente a Date.getDay(). Se usa exclusivamente para compromisos con frecuencia 'semanal'. 
export const DIAS_SEMANA = [
  { value: 0, label: 'Domingo' },
  { value: 1, label: 'Lunes' },
  { value: 2, label: 'Martes' },
  { value: 3, label: 'Miércoles' },
  { value: 4, label: 'Jueves' },
  { value: 5, label: 'Viernes' },
  { value: 6, label: 'Sábado' },
]

​
getCompromisoStatus

Calcula el estado actual de un compromiso para una fecha dada. Es la función central del módulo: se llama en cada renderizado del componente Compromisos.jsx y del widget del Dashboard para mostrar el badge de estado actualizado.
​
comp
Compromiso
required
Objeto compromiso del store. Debe tener al menos: activo, frecuencia, ultimoRegistro, diaMes (para frecuencias no semanales) o diaSemana (para frecuencia semanal).
​
today
Date
Fecha de referencia. Por defecto es new Date(). Se acepta un valor inyectado para facilitar los tests sin depender del reloj del sistema.
Retorna: 'registrado' | 'vencido' | 'proximo' | 'pendiente' | 'inactivo'

​
Algoritmo paso a paso

1

Verificar si está inactivo

Si comp.activo === false, retorna inmediatamente 'inactivo' sin ningún cálculo adicional.
2

Verificar si ya fue registrado en el período actual

Si comp.ultimoRegistro existe, calcula daysDiff = floor((today - last) / 86400000). Si daysDiff < PERIOD_DAYS[frecuencia], retorna 'registrado'. Los días mínimos por frecuencia se detallan en la tabla más abajo.
3

Calcular días hasta el próximo vencimiento

  • Frecuencia semanal: calcula daysForward = (diaSemana - today.getDay() + 7) % 7 (0–6 días hasta la próxima ocurrencia). Si daysForward ≤ 2 se usa directamente; si no, se interpreta como que el día ya pasó esta semana y se aplica -(7 - daysForward) (valor negativo → vencido).
  • Otras frecuencias: daysUntilDue = diaMes - today.getDate().
4

Determinar estado final

  • Si daysUntilDue < 0 → 'vencido'
  • Si daysUntilDue <= proximoThreshold → 'proximo'
    (threshold: 5 días para frecuencias no semanales; 2 días para semanal)
  • En otro caso → 'pendiente'

​
Tabla PERIOD_DAYS

FrecuenciaDías mínimos entre registros
semanal7
quincenal15
mensual28
bimestral55
trimestral85
anual355
Para frecuencia mensual el umbral son 28 días (no 30) para dar holgura en meses cortos como febrero. Si la frecuencia no está en la tabla, se usa 28 como valor por defecto.
import { getCompromisoStatus } from './utils/compromisos'

// Compromiso mensual activo, sin registro previo, día 15 del mes
const comp = {
  activo: true,
  frecuencia: 'mensual',
  diaMes: 15,
  ultimoRegistro: null,
}

const status = getCompromisoStatus(comp)
// Ejemplo si hoy es día 12: 'proximo' (faltan 3 días ≤ 5)
// Ejemplo si hoy es día 9:  'pendiente' (faltan 6 días > 5)
// Ejemplo si hoy es día 20: 'vencido' (el día 15 ya pasó)

​
getStatusMeta

Devuelve los metadatos visuales (etiqueta, colores y borde) para un estado dado, usando variables CSS del sistema de diseño de GastosApp. Se usa en los componentes Badge y en las tarjetas de compromisos para aplicar el estilo correcto.
​
status
string
required
Estado del compromiso. Debe ser uno de los seis estados válidos; para cualquier otro valor retorna el estilo de pendiente como fallback.
Retorna: { label: string, color: string, bgColor: string, border: string } con referencias a variables CSS.

​
Tabla de mapeo completo

EstadolabelcolorbgColorborder
registrado'Registrado'var(--green)var(--green-glow)rgba(5,150,105,0.2)
impago'Ingresado/Impago'var(--yellow)rgba(217,119,6,0.08)rgba(217,119,6,0.25)
vencido'Vencido'var(--red)var(--red-glow)rgba(220,38,38,0.2)
proximo'Próximo'var(--yellow)rgba(217,119,6,0.08)rgba(217,119,6,0.25)
pendiente'Pendiente'var(--text-muted)var(--bg-secondary)var(--border)
inactivo'Inactivo'var(--text-muted)var(--bg-secondary)var(--border)
import { getCompromisoStatus, getStatusMeta } from './utils/compromisos'

const status = getCompromisoStatus(comp)
const meta   = getStatusMeta(status)

// Uso en un componente:
<span style={{ color: meta.color, background: meta.bgColor, border: `1px solid ${meta.border}` }}>
  {meta.label}
</span>

​
getDueDateLabel

Genera una etiqueta legible que describe cuándo vence el compromiso, combinando el día de vencimiento con la frecuencia. Se muestra en las tarjetas del listado de compromisos y en el widget del Dashboard.
​
comp
Compromiso
required
Objeto compromiso. Se usan los campos frecuencia, diaSemana (si es semanal) y diaMes (si no es semanal).
Retorna: string con la etiqueta de vencimiento.

​
Lógica de formato

  • Frecuencia semanal: busca en DIAS_SEMANA el elemento cuyo value coincida con comp.diaSemana (por defecto 1 = lunes) y retorna 'Cada {label}', por ejemplo 'Cada Lunes' o 'Cada Viernes'.
  • Otras frecuencias: busca en FRECUENCIAS la etiqueta de comp.frecuencia y retorna 'Día {diaMes} — {label}', por ejemplo 'Día 15 — Mensual' o 'Día 1 — Trimestral'.
import { getDueDateLabel } from './utils/compromisos'

// Compromiso semanal (lunes):
getDueDateLabel({ frecuencia: 'semanal', diaSemana: 1 })
// 'Cada Lunes'

// Compromiso semanal (viernes):
getDueDateLabel({ frecuencia: 'semanal', diaSemana: 5 })
// 'Cada Viernes'

// Compromiso mensual día 15:
getDueDateLabel({ frecuencia: 'mensual', diaMes: 15 })
// 'Día 15 — Mensual'

// Compromiso trimestral día 1:
getDueDateLabel({ frecuencia: 'trimestral', diaMes: 1 })
// 'Día 1 — Trimestral'

Build docs developers (and LLMs) love

Get started for freeTalk to us