Time tracking with billable invoices, built by Claude Code on Elements
Live timers, a week view of hours per project, billable reports by client and person, and invoices clients pay by card.
How it's built
Timesheaf needed timers the team can see running, a week of hours per person, invoices built from tracked time, and a way for clients to pay those invoices by card. Each of those is a part of Elements, so the agent spent its 25 minutes on the agency's workflow itself.
- Live timers. Time entries are a LiveTable opened per person for the week view and as one team-wide view of running timers. Stopping a timer folds the elapsed time in on the server's clock, and every teammate's screen shows it stop.
- Invoices from time.
@rpcfunctions gather a client's unbilled entries into a draft and email the client a link to view and pay it. Invoices are a LiveTable, so the invoices list shows a payment the moment it lands. - Card payments. Checkout is priced from the invoice's own stored lines. The return page and the webhook share one fulfillment function, so each payment is recorded once, whichever arrives first. Without a Stripe key, the pay button opens a test checkout inside the app that records the payment through that same function, and in production the app registers its own webhook the first time a client starts a checkout.
- Reports from SQL. The reports page totals billable hours by client and by person straight from the entries table.
- Data from SQL files. Three migrations define the schema and the invoice builder, and seed four teammates, four clients, a month of tracked weekdays, two timers running right now, and invoices in every status.
- Sessions and roles. Invoicing is for admins, and each time entry checks that it belongs to the signed-in person.
Why Elements
Elements is an integrated full-stack app framework and a project server. The project server checks the agent's work as it builds: it type-checks the server and browser code, analyzes the program, applies migrations and runs the tests, then reports the results to the agent. A security mistake, such as calling a server-only function from the browser, is a compile error. The agent reads the report and fixes its own mistakes before it tells you a feature is done. The same checks run on every feature you ask for next.
Run it yourself
- 1 Sign up
Already have an account? Sign in
- 2 Install and run the demo One prompt to paste into your agent.
The prompt
What Claude was given to build this app.
Build a time tracking and invoicing app named timesheaf for a small design agency. Two kinds of accounts: admin and team member. - Clients, and projects under them with an hourly rate. - A running timer: pick a project, start, stop. Or add an entry by hand. - Week view of a person's hours per project per day. - Reports: hours and billable amount per client, per project and per person, for a date range. - Invoices: an admin picks a client and a date range, the app gathers the unbilled entries into line items, and the admin sends it. The client gets an email with a link to view and pay the invoice by card. Invoice status: draft, sent, paid. Payments by Stripe. Seed one admin, three team members, four clients, six projects, a month of time entries, and invoices in each status. Show the seeded logins on the sign-in page. Running timers, new entries and invoice payments update in real time.