KQ-598 · CASH/CLOCK

Cash Clock

A ring that fills toward payday one tick per day, its spent arc growing on glide because a cycle is a quantity settling rather than a switch flipping. Inside sits the balance you will actually reach: switching a scheduled outgoing on or off counts the projection to its new figure on snap through a motion value and lands or lifts that outgoing's marker on the day it falls, and a projection under the floor turns the unspent arc danger. The outgoings are real checkboxes, so Tab reaches each one and Space toggles it.

KQ-598 · CASH/CLOCK

Waylight Pay cycle$2,480.15 today

At payday12 days leftshort $0.00

Rent, Fernworks Loftsd3$1,150.00
Fieldline broadbandd6$42.00
Coldbrook loand9$214.55
Gaugeworks storaged11$18.00

Projected 1055.60 at payday · 12 days · 4 of 4 scheduled

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/cash-clock

Props

balance: number; default —; Balance today, before the scheduled outgoings.
daysToPayday: number; default —; Days left in the cycle; clamped into cycleDays. Never read from the clock.
cycleDays: number; default 30; Ticks on the ring — the length of the pay cycle.
outgoings: CashOutgoing[]; default []; Scheduled debits: id, label, amount and the day each lands.
included / defaultIncluded: string[]; default every outgoing; Controlled or initial ids counted in the projection.
onIncludedChange: (ids: string[]) => void; default —; Fires from the checkbox that changed.
onProjectionChange: (projected: number) => void; default —; Fires with the new projection after a toggle.
floor: number; default 0; A projection below this reads danger and shows what you are short by.
format: (amount: number) => string; default en-US currency; Renders the projection and every row; the locale is pinned for hydration.
label: string; default —; Names the cycle and labels the ring.

Prop	Type	Default	Description
balance	number	—	Balance today, before the scheduled outgoings.
daysToPayday	number	—	Days left in the cycle; clamped into cycleDays. Never read from the clock.
cycleDays	number	30	Ticks on the ring — the length of the pay cycle.
outgoings	CashOutgoing[]	[]	Scheduled debits: id, label, amount and the day each lands.
included / defaultIncluded	string[]	every outgoing	Controlled or initial ids counted in the projection.
onIncludedChange	(ids: string[]) => void	—	Fires from the checkbox that changed.
onProjectionChange	(projected: number) => void	—	Fires with the new projection after a toggle.
floor	number	0	A projection below this reads danger and shows what you are short by.
format	(amount: number) => string	en-US currency	Renders the projection and every row; the locale is pinned for hydration.
label	string	—	Names the cycle and labels the ring.