TimeTracker

Code

import { TimeTracker, type TimeProject } from "@fadymondy/nasaq/web";const projects: TimeProject[] = [{ id: "web", name: "Website", tasks: [{ id: "ui", name: "UI polish" }] }];export function Timer() {  return <TimeTracker projects={projects} onStart={async (s) => api.start(s)} onStop={async (s) => api.stop(s)} />;}

Productivity · beta

Live examples and controls: TimeTracker in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/time-tracker.json

Three pieces for logging work time. TimeTracker is the running timer: pick a project and task, add a note, start and stop. TimeEntryList lists entries by day with a manual entry dialog. Timesheet shows hours per project and task across a day or a week with row and column totals. Durations are whole seconds; the components are presentational and your callbacks save the data.

When to useCopy Anchor Link

• Freelancers, agencies and teams that log hours against projects and tasks.

When not to useCopy Anchor Link

• Scheduling events on a calendar: use Scheduler.
• Showing a generic table: use DataTable.

ImportCopy Anchor Link

import { TimeTracker, TimeEntryList, Timesheet } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { TimeTracker, type TimeProject } from "@fadymondy/nasaq/web";

const projects: TimeProject[] = [{ id: "web", name: "Website", tasks: [{ id: "ui", name: "UI polish" }] }];

export function Timer() {
  return <TimeTracker projects={projects} onStart={async (s) => api.start(s)} onStop={async (s) => api.stop(s)} />;
}

AnatomyCopy Anchor Link

TimeTracker                     data-slot="time-tracker"
├─ timer readout                role="timer", h:mm:ss, project / task
├─ Start / Stop button
└─ project, task, note fields
TimeEntryList                   data-slot="time-entry-list"
├─ day cards                    total per day, entry rows with edit and delete
└─ TimeEntryDialog              date, project, task, duration, note
Timesheet                       data-slot="timesheet"
├─ view toggle and period navigation
└─ table                        rows by project and task, columns by day, totals

APICopy Anchor Link

TimeTrackerCopy Anchor Link

The clock is derived from startedAt, so it stays right after a remount or a page reload.

TimeEntryListCopy Anchor Link

TimeEntryDialogCopy Anchor Link

Props: open, onOpenChange, projects, entry?, defaultDate?, onSubmit(input, entry?), labels?. Duration accepts 1:30, 1.5h, 90m, 2h 15m and Arabic-Indic digits, up to 24 hours.

TimesheetCopy Anchor Link

ExamplesCopy Anchor Link

Restore a running timerCopy Anchor Link

<TimeTracker projects={projects} defaultRunning={{ projectId: "web", startedAt: Date.now() - 40 * 60 * 1000 }} />

Entries with manual addCopy Anchor Link

<TimeEntryList entries={entries} projects={projects} onAdd={async (input) => api.create(input)} onDelete={async (e) => api.remove(e.id)} />

Weekly timesheet in ArabicCopy Anchor Link

<NasaqProvider locale="ar">
  <Timesheet entries={entries} projects={projects} />
</NasaqProvider>

AccessibilityCopy Anchor Link

• The clock has role="timer" and does not announce each second; starting and stopping are announced through a status region.
• The timesheet is a real table inside a labelled, focusable scroll region.
• Localise labels for any custom copy.

RTL & i18nCopy Anchor Link

Built-in English and Arabic. Clock and hour figures are isolated left to right. Dates use Intl. The week starts on Saturday by default in Arabic and previous and next arrows mirror.

Styling & tokensCopy Anchor Link

Uses card, border, text and danger tokens. Target [data-slot="time-tracker"], [data-slot="time-entry-list"] and [data-slot="timesheet"]; extend with className. No raw hex.

Do / Don'tCopy Anchor Link

• Do persist startedAt so the timer survives reloads.
• Do keep entries in whole seconds.
• Don't rely on colour alone for the running state; the button changes to Stop.

RelatedCopy Anchor Link

• stat-card
• data-table
• date-picker

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-productivity-timetracker--docs