Skip to main content

​
Overview

Pagosapp provides an intuitive payment tracking system that allows you to monitor the status of all your payments at a glance. Each payment is displayed with color-coded visual indicators that reflect its current state.

​
Visual Status Indicators

Payments are automatically color-coded based on their status and due date:
The payment has been marked as paid for the current month. This indicates that the payment obligation has been fulfilled.
The payment is due within the next 3 days. This serves as a warning to complete the payment soon to avoid being overdue.
The payment due date has passed and the payment has not been marked as completed. Immediate action is required.
No due date has been set for this payment, or the due date is more than 3 days away. Set a due date to enable tracking.

​
Status Calculation Logic

The status indicator is determined by the following logic in src/components/Pago.jsx:16-25: 
let itemStyle = ''
if (checked) {
  itemStyle = 'item-green'
} else if (!startDate || dateDifference > 3) {
  itemStyle = 'item-gray'
} else if (dateDifference < 0) {
  itemStyle = 'item-red'
} else if (dateDifference <= 3) {
  itemStyle = 'item-orange'
}
The dateDifference is calculated in days between the current date and the due date using the calculateDateDifference function from src/utils/dateUtils.js.

​
Marking Payments as Paid

To mark a payment as complete:
  1. Locate the payment in the current month view
  2. Toggle the switch element next to the payment name
  3. The payment will immediately turn green to indicate completion
  4. The paid status is stored in localStorage for persistence

​
Switch Component

The switch component is implemented in src/components/SwitchElement.jsx:5-12: 
export function SwitchElement ({ checked, handleChange }) {
  return (
    <div className='switch-wrapper'>
      <label htmlFor='switchElement' className='visually-hidden'>Switch:</label>
      <Switch id='switchElement' onChange={handleChange} checked={checked} />
    </div>
  )
}

​
Payment State Management

The payment tracking state is managed through the usePago hook in src/logic/usePago.js:7-21: 
const [checked, setChecked] = useState(
  localStorage.getItem(`checked-${mes}-${pago.nombre}`) === 'true'
)

const handleChange = (checked) => {
  setChecked(checked)
  localStorage.setItem(`checked-${mes}-${pago.nombre}`, checked)
}
Each payment’s status is stored per month, allowing you to track the same recurring payment independently across different months.

​
Payment Details Modal

Click on any payment to open a detailed modal that displays:
  • Payment name
  • Due date (fecha de vencimiento)
  • Payment date (fecha de pago) - only shown when payment is marked as complete
The modal is implemented in src/components/modals/PaymentModal.jsx and provides additional context about each payment.

​
Storage and Persistence

All payment statuses are automatically saved to the browser’s localStorage:
  • Key format: checked-{month}-{paymentName}
  • Value: Boolean string (‘true’ or ‘false’)
  • Persistence: Data persists across browser sessions until explicitly cleared
Using the Reset button in the application will clear all localStorage data, including payment statuses and due dates.

​
Best Practices

Set Due Dates First

Always set due dates for your payments to enable proper status tracking and visual indicators.

Check Daily

Review your payment dashboard daily to stay on top of upcoming due dates.

Mark Promptly

Mark payments as complete immediately after paying to maintain accurate records.

Use Payment Date

Record the actual payment date when marking payments complete for better tracking.

Due Dates

Learn how to set and manage payment due dates

Custom Payments

Add your own custom payments to track

Build docs developers (and LLMs) love

Get started for freeTalk to us