---
title: "Timesheaf: time tracking and invoicing for a small design agency"
author: "@chris"
author_url: https://elements.dev/users/chris
published: 2026-09-30T19:22:27.582Z
url: https://elements.dev/demos/uf68sey8/timesheaf-time-tracking-and-invoicing-for-a-small-design
kind: post
format: article
---

# Timesheaf: time tracking and invoicing for a small design agency

by [@chris](https://elements.dev/users/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.

**What Elements gave the app**

- **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.

**What the project server gave the agent**

The project server runs alongside the agent and answers as soon as a file is saved: it type-checks the templates, TypeScript and SQL, applies migrations and reruns the tests, so every question came back right away and the agent kept building.

**What shipped**

The app type-checks with zero errors and all 21 tests pass. Every page works on desktop and phone, and live updates arrive across tabs, such as a teammate's timer starting or stopping. A real sandbox payment went through Stripe end to end.