---
title: "Time tracking with billable invoices, built by Claude Code on Elements"
author: "@chris"
author_url: https://elements.dev/u/@chris
published: 2026-09-30T19:22:27.582Z
url: https://elements.dev/demos/time-tracking-with-billable-invoices-built-by-claude-code-uf68sey8
kind: post
format: article
---

# Time tracking with billable invoices, built by Claude Code on Elements

by [@chris](https://elements.dev/u/@chris) · 2026-09-30

## Description

Live timers, a week view of hours per project, billable reports by client and person, and invoices clients pay by card.

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.** `@rpc` functions 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.