shadcn.io is not affiliated with official shadcn/ui
Freelancer Invoice Chat Block for Vue
A freelancer and client thread where typing 2h design review adds a row to a timesheet card and to an invoice pane with subtotal, 20 percent tax and total in whole cents, a Draft, Sent or Paid status, and a real text download.
Installation
Overview
Bill for your hours where you talk about the work, with this freelancer invoice chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Hoursby, a billing chat for freelancers: the top bar names your client, Torvald Penhaligon, with the invoice number and its status, and the log is Message and Bubble rows with a timesheet card in it. Type hours in the composer, "2h design review", and the line is added to the card, which lists each row's hours and subtotal at a typed rate, and to Invoice 0007 in the pane at the end, a list of lines, subtotal, tax at 20 percent and total, all worked out in whole cents. A status select moves the invoice from Draft to Sent to Paid and posts a line that says nothing was sent, and Download saves a real text copy made in the browser. Other messages get typed replies after a Typing Indicator Text, and the composer's Shine Button is the only colored control. It's the starting point for a freelancer tool, a time tracker or a client portal.
FAQ
What stays in the page, and how do I make it real?
Everything but the download. The rate, the rows, the status and the replies are typed or kept in this page's state and are gone on reload; nothing is sent, no invoice is issued and no model runs, as the line under the composer says. The download is real: the browser builds a small text file and saves it. To wire it for real, send each parsed row and each status change to your billing service where send and changeState run.
What does the composer accept as hours?
A number of hours, a lowercase or uppercase h, then the work: "2h design review", "1.5h calls". Hours can have one decimal. Anything that does not start that way is sent as an ordinary message, so you can talk and log in the same field.
How is the money worked out?
Hours are kept in tenths and the rate in cents, so a row's subtotal is an exact whole number of cents. Tax is the subtotal times 20 percent, rounded half up to the cent, and the total is the two added. Nothing is typed twice: the card, the pane, the top bar and the download all read the same rows.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so each added row and status change is read once. The timesheet is a table with a caption and row headers, the totals are a description list, and the status is a labelled native select that works with the keyboard and on touch screens.