shadcn.io is not affiliated with official shadcn/ui
Time Tracking Task List Block for Vue
A task list with a Start and Stop timer on every row, one running at a time, a pulsing dot and the word Running on the active row, and a day total that adds what is running to what was logged.
Installation
Overview
Log hours against the task you are on, with this time tracking to-do list block for Vue with Ark UI. Six tasks each show the time already logged today and a Start button; pressing it starts that task's timer, and starting another stops the first and says where it stopped ("Paused 'Invoice run' at 0:41:12"). The running row shows a pulsing dot and the word Running, and the band above the list adds what is running to what was logged ("Tracked today 1h 09m"). Each task is a Checkbox, and ticking one stops its timer. Nothing starts by itself and nothing reads the clock: a running timer counts its own seconds while the page is open, and stops when it is left. Guides rule the bands. For freelancers, agencies and anyone billing by the hour.
FAQ
Why can only one timer run?
Time is one thing you spend once. Starting a second timer stops the first, adds the seconds it counted to that task's log, and the status line says which task paused and at what time.
Does it use the real clock?
No. A running timer adds one second a second to its own counter while the page is open, so the block renders the same on every visit and adds no time until you press Start. It does not catch up for a hidden tab or a closed page.
What does a screen reader hear?
The ticking digits are hidden from assistive technology so they don't chatter. The row says "Running", the polite status line announces each start, stop and pause, and each row has the minutes logged in text.
What happens with reduced motion?
The dot beside Running stops pulsing and stays as a still dot. The timer still counts, because you started it.