Skip to main content

​
Overview

Pagosapp displays three months at a time, allowing you to view past, current, and upcoming payments simultaneously. The navigation system makes it easy to move through the year while maintaining context of your payment timeline.

​
Three-Month View

The application displays three consecutive months side-by-side, providing a rolling view of your payment obligations: 
const showedMonths = meses.slice(indiceInicio, indiceInicio + 3)
By default, the application starts one month before the current month (or at January if current month is January), giving you visibility into recent past payments and upcoming obligations.

​
Initial Month Position

The starting month is calculated in src/App.jsx:28-30: 
const [indiceInicio, setIndiceInicio] = useState(
  new Date().getMonth() - 1 < 0 ? 0 : new Date().getMonth() - 1
)

​
Logic Breakdown

  • Gets current month index (0-11)
  • Subtracts 1 to show previous month
  • If result is negative (January case), defaults to 0
  • Shows three months starting from this position
// Current month: March (index 2)
// indiceInicio = 2 - 1 = 1
// Displays: Febrero, Marzo, Abril (February, March, April)
Two buttons control month navigation:

​
Next Button (Siguiente)

Moves the view forward by one month: 
const handleNextClick = () => {
  if (indiceInicio + 1 < meses.length - 2) {
    setIndiceInicio(indiceInicio + 1)
  }
}

Next Button Behavior

  • Increments the starting index by 1
  • Disabled when showing the last three months (October, November, December)
  • Updates the view immediately

​
Previous Button (Anterior)

Moves the view backward by one month: 
const handlePreviousClick = () => {
  if (indiceInicio - 1 >= 0) {
    setIndiceInicio(indiceInicio - 1)
  }
}

Previous Button Behavior

  • Decrements the starting index by 1
  • Disabled when showing the first three months (January, February, March)
  • Updates the view immediately
The navigation system has built-in boundaries to prevent invalid month ranges:
Maximum starting index is meses.length - 2 (index 10):
if (indiceInicio + 1 < meses.length - 2)
This ensures the last possible view shows:
  • Octubre (October)
  • Noviembre (November)
  • Diciembre (December)

​
Month Display Component

Each month is rendered using the Mes component from src/components/Mes.jsx:6-17: 
export function Mes ({ mes, pagos }) {
  return (
    <div className='mes'>
      <h2>{mes}</h2>
      <ul>
        {pagos.map((pago) => (
          (pago.mensual || pago.meses?.includes(mes)) && (
            <Pago key={pago.nombre} pago={pago} mes={mes} />
          )
        ))}
      </ul>
    </div>
  )
}

​
Rendering Logic

The application renders months in src/App.jsx:64-68: 
<section className='mesesYPagos'>
  {showedMonths.map((mes) => (
    <Mes key={mes} mes={mes} pagos={items} />
  ))}
</section>
Each month independently filters and displays only the payments relevant to that specific month, based on the payment’s mensual property or meses array.
The navigation buttons are positioned above the month display: 
<div className='buttonContainer'>
  <button className='myButton' onClick={handlePreviousClick}>
    Anterior
  </button>
  <button className='myButton' onClick={handleNextClick}>
    Siguiente
  </button>
</div>

​
Practical Navigation Scenarios

Use the Next button to look ahead at upcoming months and prepare for future payment obligations. This is especially useful at the end of a month to see what’s coming.
Use the Previous button to review past months and verify which payments were completed. Useful for reconciliation or record-keeping.
The default view keeps the current month in the center or right position, providing context from the previous month and visibility into the next month.
Navigate to the end of the year (October-December view) to plan for year-end payments and prepare for the next year.

​
Understanding the Month Array

The complete month array in src/App.jsx:12-25: 
const meses = [
  'Enero',       // Index 0
  'Febrero',     // Index 1
  'Marzo',       // Index 2
  'Abril',       // Index 3
  'Mayo',        // Index 4
  'Junio',       // Index 5
  'Julio',       // Index 6
  'Agosto',      // Index 7
  'Septiembre',  // Index 8
  'Octubre',     // Index 9
  'Noviembre',   // Index 10
  'Diciembre'    // Index 11
]

Start of Year

Months: Enero, Febrero, MarzoIndex: 0Previous: DisabledNext: Enabled

Mid Year

Example: Mayo, Junio, JulioIndex: 4Previous: EnabledNext: Enabled

End of Year

Months: Octubre, Noviembre, DiciembreIndex: 9Previous: EnabledNext: Disabled

​
Payment Filtering Per Month

As you navigate, each month automatically filters payments: 
(pago.mensual || pago.meses?.includes(mes)) && (
  <Pago key={pago.nombre} pago={pago} mes={mes} />
)
  • Monthly payments (mensual: true): Appear in all months
  • Specific month payments: Only appear in designated months
Payment statuses are stored per month. A payment marked as complete in March will show as incomplete in April, even if it’s the same recurring payment.

​
Best Practices

Regular Navigation

Navigate through months regularly to stay aware of upcoming and past payment obligations across the year.

Start of Month Review

At the beginning of each month, navigate to view the current and next two months to plan ahead.

End of Month Check

Before month-end, review the current month to ensure all payments are marked as complete.

Quarterly Overview

Use navigation to review three-month periods for quarterly financial planning and tracking.

​
Keyboard Accessibility

The navigation buttons are fully accessible:
  • Click with mouse
  • Tab to focus, Enter/Space to activate
  • Clear visual feedback on button state

​
Performance Considerations

The three-month view is optimized for performance:
  • Only three months of data are rendered at once
  • Navigation updates are instant
  • Payment filtering happens per month automatically
  • No unnecessary re-renders when navigating

Payment Tracking

Track payments across different months

Due Dates

Manage due dates for payments in different months

Build docs developers (and LLMs) love

Get started for freeTalk to us