Reactive
Build your app
Catalog ›Companies & SMBs ›Administration

Payment tracker — who owes what, and when

A running list of who you need to pay and who owes you money, with amount and due date: this is not invoicing software, it's the reminder that tells you what's due and when, instead of a spreadsheet buried in a folder. Every entry stays on this device and is still here next time you open the app.

▶ Use this app

paymentsdue datessuppliersclientstracker

What it records

  • Description (e.g. invoice #12, supplier deposit)
  • Client or supplier
  • Amount
  • Status...

How it works

This is a Reactive app: a plain text document that your browser turns into a working app — forms, live data, tables, statistics and even charts, with nothing to install or configure.

  1. Use it right away. Hit “Use this app”: it opens right in your browser, ready to go, with data saved only on your device.
  2. Your data stays yours. Everything is stored locally on your device, kept separate for each app: no account, no server, nothing to set up.
  3. Make it your own. The text below is the entire app: copy it, tweak fields, views and words, and your changes become interactive instantly.
  4. Share it as a file. An app is a simple file: save it, export it or share it with a link; and with encrypted collaboration several people edit the same data in real time.
The app’s source
# 📅 Payment tracker

A running list of who you need to pay and who owes you money, with amount
and due date: this is not invoicing software, it's the reminder that tells
you what's due and when, instead of a spreadsheet buried in a folder. Every
entry stays on this device and is still here next time you open the app.

::::form{path="payments" id="fpay"}
::input{form="fpay" field="description" placeholder="Description (e.g. invoice #12, supplier deposit)" required="true"}
::input{form="fpay" field="party" placeholder="Client or supplier" required="true"}
::input{form="fpay" field="amount" type="number" placeholder="Amount" required="true"}
::input{form="fpay" field="dueDate" type="date" required="true" legend="Due date"}
:::select{form="fpay" field="status" placeholder="Status..."}
- To pay
- To collect
- Settled
:::
::add-form{form="fpay" path="payments" label="Add due date"}
::::

## Upcoming due dates

The table is sorted by due date, soonest first: click the header to
reverse the order. Search, pagination and CSV export are already built in.

:::sort{path="payments" field="dueDate" order="asc" as="table" headers="Due date,Description,Party,Amount,Status" deletable="true" editform="fpay"}
{dueDate} | {description} | {party} | {amount} | {status}
:::

**Total outstanding: :sum[tot]{path="payments" field="amount"}**

Useful for an accounting practice juggling several clients' deadlines, a
shop keeping an eye on supplier payments, or anyone who's tired of
discovering a due date the day after it passed.