shadcn.io is not affiliated with official shadcn/ui
Invoice Dates Calendar Block for React Aria
Open invoices aged against a fixed date into four buckets, a bar of the amounts, a filter by bucket, sorting by due date or amount, Mark paid with Undo and a month of due dates.
Installation
Overview
Show a freelancer which invoices to chase first with this invoice dates calendar for React with React Aria. A hairline frame with a plus mark on each corner opens on the total still owed and how much of it is late, with a bar of four weights and four buttons under it: not yet due, 1 to 30 days late, 31 to 60 and over 60. Each button shows its amount and count and filters the list below it; pressing it again shows every open invoice. The list is a held scroll region of rows with the title, client, due date and a lateness word such as "13 days late", and an outline Button marks one paid, which takes it out of the list, the totals and the bar. Undo brings the last one back. A NativeSelect sorts by due date or amount, and a month at the end of the frame marks every due date with the shape of its bucket. Lateness is never a color, only a word and a weight. The bands are ruled by Guides, and an Empty state holds the list's height when a bucket has nothing left. It's built from Button, NativeSelect, Field, Empty and Guides, with a CSS entrance only. For invoicing tools, freelancer dashboards and any app that chases late payments.
FAQ
How do I use my own invoices?
Edit INVOICES: each has an id, a title, a client, an ISO due date and an amount in integer cents. The buckets come from BUCKETS and the days late from the due date against AS_OF, so none of the totals, counts or bar widths are typed.
Why is today always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and every day count, bucket and ring comes from it, so the block looks the same on any day and in a screenshot. To follow the real date, set AS_OF from your own clock or server and keep the rest as it is.
How are the buckets decided?
By whole days between the due date and AS_OF. Zero or fewer is not yet due, 1 to 30 is the first late bucket, 31 to 60 the second and 61 or more the last. An invoice due today counts as not yet due, and its row says "Due today".
Why are amounts in cents?
Whole cents avoid rounding drift when invoices are added up. Only the display divides by 100, through Intl.NumberFormat, and every amount sits in its own left-to-right span so it reads correctly in right-to-left languages.
What does the month beside the list do?
It is a drawn month, not a picker. Each date in the list is marked on it with a shape from the legend, and the marks move when the list changes. Previous and next step through the months the data covers. It is hidden from screen readers; a sentence under it says how many dates are marked, and the list holds every fact.