shadcn.io is not affiliated with official shadcn/ui
Time Tracking Settings Block for Solid
A time tracking panel with a rounding ruler that lands a sample of tracked time on the billed minute, an overtime bar for a 46 hour week and switches for manager approval and locking approved weeks.
Installation
Overview
Show what a rounding rule does to a minute before anyone turns it on, with this time tracking panel for Solid with Ark UI. Inside a hairline frame with a plus mark on each corner, the first band is a ruler. Two Segment Group controls choose the rounding step (none, 5, 15 or 30 minutes) and its direction (up, nearest or down); a Slider moves a sample of tracked time along a 0 to 90 minute ruler, where a hollow pin marks the tracked minute and a solid pin the minute that is billed, and a sentence says the result: "Tracked 1 h 07 min, billed as 1 h 15 min: 8 min more." The second band sets the overtime threshold in a Number Input and the multiplier in a Native Select and draws a sample 46 hour week as a bar split into normal time and overtime, with the sum in words ("46 h is 40 plus 6 overtime at 1.5 times, so 49 h are paid"). Beside it two Switch controls turn manager approval on and, once it is on, locking approved weeks. The last band counts unsaved changes in a status line beside a Shine Button to save them and an outline Button to discard them. On a phone the bands stack and the save bar stays pinned to the bottom of the screen. It's built from Segment Group, Slider, Number Input, Native Select, Switch, Button, Shine Button and Guides, with a CSS entrance only. For a timesheet, payroll or agency billing product, or any rule that is easier to see than to read.
FAQ
How do I change the choices or the sample week?
Edit the constants at the top. INTERVALS, DIRECTIONS and MULTIPLIERS list the options of the three menus, SAVED is what the account has stored when the page opens, SAMPLE is the tracked time the slider starts on, SPAN is the length of the ruler in minutes, and WEEK is the length of the sample week the overtime bar draws. The sample time and week are examples: in your app the real rules come from your settings, and the sample can come from a real entry.
How is the billed minute worked out?
With plain arithmetic on whole minutes. Rounding up takes the next multiple of the step at or after the tracked minute, rounding down the one at or before it, and nearest the closest one, with exactly half a step going up. With no rounding the billed minute is the tracked one. The ruler marks every step, so you can see the billed pin land on a mark; the pale bar between the two pins is the gap, and the sentence names it in minutes.
How is overtime worked out?
The hours past the threshold are overtime; the paid hours are the normal hours plus the overtime hours times the multiplier. In the default week that is 40 plus 6 times 1.5, which is 49 paid hours. A threshold at or above the sample week shows no overtime. The threshold field settles when you leave it: zero becomes one and the highest allowed is 80 hours. Real overtime law differs by place (daily thresholds, double time), so check your own rules.
What happens when I press Save, and what stays local?
Nothing leaves the page and nothing is billed. The block keeps the saved rules and the ones being edited, and counts how many settings differ, so the status line can say "2 changes not saved yet." The sample slider is not a setting and is not counted. Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copy back. To make it real, send the edited rules to your server in the save handler. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus.