shadcn.io is not affiliated with official shadcn/ui
Studio Session Music Block for React Aria
A recording day log: five tracks with a status select, takes and minutes steppers, an hourly rate field, an invoice worked out in cents from the minutes with 10% off after 8 hours, session notes, and Export timesheet, which saves a real CSV.
Installation
Overview
Turn a day in the studio into a bill and a timesheet, with this session log for React with React Aria. It holds one recording day of Takebook, a studio session log, in a hairline frame with a plus mark on each corner: a strip with the studio, the date, the engineer and an hourly rate Number Input; five track rows, each with a Select for its status (Recording, Mixing, Mastered, in words with a glyph) and steppers for takes and for minutes in steps of five; a notes Textarea; and an invoice band that works out the hours billed, the subtotal, the discount and the total from the minutes, with the typed rule "10% off after 8 hours". The foot holds the status line and Export timesheet, a Shine Button that saves a CSV of the tracks. It's built from Number Input, Select, Button, Textarea, Shine Button and Guides, with a CSS entrance only. For studios, rehearsal rooms and freelance engineers.
FAQ
How do I use my own tracks and rules?
Edit SEED for the tracks and SESSION for the studio, date and engineer. The rule is two constants, DISCOUNT_AFTER (in minutes) and DISCOUNT_PERCENT; the discount applies to the minutes past the threshold only. The rate is whole dollars between 0 and 500: change MOST_RATE and moneyOf for another currency.
How are the amounts worked out?
In whole cents, rounded once per amount: the subtotal is the rate times the minutes over 60, and the discount is a tenth of the rate times the minutes past eight hours, so the total never carries a stray fraction of a cent. Hours are shown as hours and minutes rather than a decimal, which is easier to check against a clock.
What does Export timesheet save?
A real CSV built in the browser: a header row, one row per track with its title, status, takes and minutes, and a total row, with fields that hold a comma or a quote written inside quotes. Nothing is sent anywhere. The button is the block's one primary and says why when there is nothing to export.
How do I use the steppers from the keyboard?
Each stepper is a minus button, its value with the unit ("95 min") and a plus button, all named with the track ("Five more minutes on Kettle Hill (vocals)"), so the control describes itself. A button at its limit stays in the order and explains itself rather than disappearing. A polite status line gives the running total after each change. On React Aria a typed rate is applied when you leave the field, press Enter or use an arrow key.