{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "time-tracker-timesheet", "title": "Time Tracker Timesheet", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/time-tracker-timesheet/time-tracker-timesheet.component.ts", "content": "// Toggl/Harvest-style live time tracker: running stopwatch hero bar with project rate\n// select, billable switch, 4 weekly summary cards, and a daily grouped timesheet ledger\n// with resume/delete actions. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n Briefcase,\n Calendar,\n CircleDollarSign,\n Clock,\n DollarSign,\n Download,\n LucideAngularModule,\n Play,\n Plus,\n Square,\n Trash2,\n TrendingUp,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport interface ProjectOption {\n id: string\n name: string\n client: string\n rate: number\n rateLabel: string\n color: string\n badgeClass: string\n dotClass: string\n}\n\nexport interface TimeEntry {\n id: string\n task: string\n projectId: string\n projectName: string\n clientName: string\n projectBadgeClass: string\n date: string\n dateLabel: string\n startTime: string\n endTime: string\n durationSeconds: number\n isBillable: boolean\n rate: number\n amount: number\n}\n\nconst projects: ProjectOption[] = [\n {\n id: 'acme',\n name: 'Acme Corp',\n client: 'Acme Enterprises',\n rate: 150,\n rateLabel: '$150/hr',\n color: 'blue',\n badgeClass: 'bg-info/10 text-info border-info/20',\n dotClass: 'bg-info',\n },\n {\n id: 'stripe',\n name: 'Stripe Retainer',\n client: 'Stripe, Inc.',\n rate: 175,\n rateLabel: '$175/hr',\n color: 'chart-2',\n badgeClass: 'bg-chart-2/10 text-chart-2 border-chart-2/20',\n dotClass: 'bg-chart-2',\n },\n {\n id: 'linear',\n name: 'Linear Sync',\n client: 'Linear Orbit',\n rate: 160,\n rateLabel: '$160/hr',\n color: 'chart-3',\n badgeClass: 'bg-chart-3/10 text-chart-3 border-chart-3/20',\n dotClass: 'bg-chart-3',\n },\n {\n id: 'uipkge',\n name: 'UIPKGE Core',\n client: 'Internal OSS',\n rate: 0,\n rateLabel: 'Internal · $0/hr',\n color: 'emerald',\n badgeClass: 'bg-success/10 text-success border-success/20',\n dotClass: 'bg-success',\n },\n]\n\nconst initialEntries: TimeEntry[] = [\n {\n id: 'entry-1',\n task: 'Refactoring OKLCH Color Engine & AST Parser',\n projectId: 'acme',\n projectName: 'Acme Corp',\n clientName: 'Acme Enterprises',\n projectBadgeClass: 'bg-info/10 text-info border-info/20',\n date: '2026-08-21',\n dateLabel: 'Today · Friday, Aug 21',\n startTime: '09:00',\n endTime: '11:30',\n durationSeconds: 9000,\n isBillable: true,\n rate: 150,\n amount: 375,\n },\n {\n id: 'entry-2',\n task: 'Webhook idempotency retry queue architecture',\n projectId: 'stripe',\n projectName: 'Stripe Retainer',\n clientName: 'Stripe, Inc.',\n projectBadgeClass: 'bg-chart-2/10 text-chart-2 border-chart-2/20',\n date: '2026-08-21',\n dateLabel: 'Today · Friday, Aug 21',\n startTime: '13:00',\n endTime: '15:45',\n durationSeconds: 9900,\n isBillable: true,\n rate: 175,\n amount: 481.25,\n },\n {\n id: 'entry-3',\n task: 'Weekly sprint retrospective & design token review',\n projectId: 'uipkge',\n projectName: 'UIPKGE Core',\n clientName: 'Internal OSS',\n projectBadgeClass: 'bg-success/10 text-success border-success/20',\n date: '2026-08-21',\n dateLabel: 'Today · Friday, Aug 21',\n startTime: '16:00',\n endTime: '17:30',\n durationSeconds: 5400,\n isBillable: false,\n rate: 0,\n amount: 0,\n },\n {\n id: 'entry-4',\n task: 'Bidirectional GraphQL sync engine & schema migrations',\n projectId: 'linear',\n projectName: 'Linear Sync',\n clientName: 'Linear Orbit',\n projectBadgeClass: 'bg-chart-3/10 text-chart-3 border-chart-3/20',\n date: '2026-08-20',\n dateLabel: 'Yesterday · Thursday, Aug 20',\n startTime: '09:30',\n endTime: '14:00',\n durationSeconds: 16200,\n isBillable: true,\n rate: 160,\n amount: 720,\n },\n {\n id: 'entry-5',\n task: 'Design system Figma token export automation',\n projectId: 'acme',\n projectName: 'Acme Corp',\n clientName: 'Acme Enterprises',\n projectBadgeClass: 'bg-info/10 text-info border-info/20',\n date: '2026-08-20',\n dateLabel: 'Yesterday · Thursday, Aug 20',\n startTime: '14:45',\n endTime: '17:30',\n durationSeconds: 9900,\n isBillable: true,\n rate: 150,\n amount: 412.5,\n },\n]\n\nexport function formatDuration(totalSeconds: number): string {\n const hours = Math.floor(totalSeconds / 3600)\n const minutes = Math.floor((totalSeconds % 3600) / 60)\n const seconds = totalSeconds % 60\n return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`\n}\n\nexport function formatCurrency(val: number): string {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n }).format(val)\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-time-tracker-timesheet, [ui-time-tracker-timesheet]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiSwitchComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n

{{ title() }}

\n \n
\n

{{ subtitle() }}

\n
\n\n
\n \n \n
\n
\n\n \n
\n
\n
\n \n
\n
\n \n
\n\n
\n \n \n \n @for (proj of projectOptions; track proj.id) {\n \n
\n \n {{ proj.name }}\n · {{ proj.rateLabel }}\n
\n \n }\n \n \n
\n
\n\n \n \n
\n \n \n \n Billable\n \n
\n\n \n\n \n
\n \n
\n @if (isRunning()) {\n \n }\n \n
\n \n {{ formattedTimer() }}\n \n
\n\n \n @if (isRunning()) {\n \n } @else {\n \n }\n {{ isRunning() ? 'Stop' : 'Start' }}\n \n
\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n

Total Hours This Week

\n
\n \n
\n
\n
\n

38.5 hrs

\n / 40.0 target\n
\n
\n \n \n 96%\n \n of weekly target logged\n
\n
\n
\n\n
\n
\n
\n

Billable Hours

\n
\n \n
\n
\n

32.0 hrs

\n
\n 83% billable ratio\n 6.5 hrs internal\n
\n
\n
\n\n
\n
\n
\n

Total Earnings

\n
\n \n
\n
\n

$4,800.00

\n

Avg $150.00/hr effective rate

\n
\n
\n\n
\n
\n
\n

Active Clients

\n
\n \n
\n
\n

3 active clients

\n

Acme Corp · Stripe · Linear

\n
\n
\n
\n\n \n
\n
\n
\n
\n

Weekly Timesheet & Daily Activity

\n

\n Detailed time entries for the current billing cycle (Aug 17 – Aug 23, 2026).\n

\n
\n
\n \n Week 34 · 38h 30m · $4,800.00\n \n
\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (group of groupedEntries(); track group.date) {\n \n \n \n {{ formatDuration(group.totalSeconds) }}\n \n \n {{ formatCurrency(group.totalAmount) }}\n \n \n \n\n @for (entry of group.entries; track entry.id) {\n \n \n \n \n \n \n {{ formatDuration(entry.durationSeconds) }}\n \n \n \n {{ formatCurrency(entry.amount) }}\n \n \n \n \n }\n }\n\n @if (entries().length === 0) {\n \n \n \n }\n \n
Project & ClientTask DescriptionBillableTime RangeDurationAmount\n Actions\n
\n
\n \n {{ group.label }}\n
\n
\n
\n \n {{ entry.projectName }}\n \n {{ entry.clientName }}\n
\n 		\n

{{ entry.task }}

\n 		\n
\n @if (entry.isBillable) {\n \n \n Billable ({{ '$' + entry.rate }}/h)\n \n } @else {\n \n Non-billable\n \n }\n
\n 		\n {{ entry.startTime }} – {{ entry.endTime }}\n \n
\n \n \n \n \n \n \n
\n
\n
\n \n

No time entries recorded for this week

\n

Start the live timer above to log your hours.

\n
\n
\n
\n\n \n \n

\n Showing {{ entries().length }} time entries across\n {{ groupedEntries().length }} days\n

\n
\n \n Total: {{ formatDuration(totalWeeklySeconds()) }} ({{ formatCurrency(totalWeeklyAmount()) }})\n \n
\n
\n
\n \n \n `,\n})\nexport class UiTimeTrackerTimesheetComponent {\n protected readonly Briefcase = Briefcase\n protected readonly Calendar = Calendar\n protected readonly CircleDollarSign = CircleDollarSign\n protected readonly Clock = Clock\n protected readonly DollarSign = DollarSign\n protected readonly Download = Download\n protected readonly Play = Play\n protected readonly Plus = Plus\n protected readonly Square = Square\n protected readonly Trash2 = Trash2\n protected readonly TrendingUp = TrendingUp\n\n protected readonly projectOptions = projects\n protected readonly cn = cn\n\n readonly title = signal('Time Tracker & Timesheet')\n readonly subtitle = signal('Track live project hours, calculate client billing rates, and review weekly activity.')\n\n @Input('title') set heading(v: string | undefined) {\n if (v !== undefined) this.title.set(v)\n }\n @Input('subtitle') set subheading(v: string | undefined) {\n if (v !== undefined) this.subtitle.set(v)\n }\n @Input() set initialEntries(v: TimeEntry[] | undefined) {\n if (v !== undefined) this.entries.set([...v])\n }\n @Input() set initialRunning(v: boolean) {\n this.isRunning.set(!!v)\n }\n @Input('class') set classNameInput(v: string | undefined) {\n this.className.set(v ?? '')\n }\n\n readonly className = signal('')\n\n readonly entries = signal([...initialEntries])\n readonly activeTask = signal('Refactoring OKLCH Color Engine & AST Parser')\n readonly selectedProjectId = signal('acme')\n readonly isBillable = signal(true)\n readonly isRunning = signal(true)\n readonly timerSeconds = signal(6138) // 01:42:18\n\n constructor() {\n const timer = setInterval(() => {\n if (this.isRunning()) this.timerSeconds.update((v) => v + 1)\n }, 1000)\n // Keep the suite hermetic under fake timers: unref when available (node/jsdom).\n if (typeof (timer as unknown as { unref?: () => void }).unref === 'function') {\n ;(timer as unknown as { unref: () => void }).unref()\n }\n inject(DestroyRef).onDestroy(() => clearInterval(timer))\n }\n\n readonly formattedTimer = computed(() => formatDuration(this.timerSeconds()))\n\n readonly groupedEntries = computed(() => {\n const groups: Record<\n string,\n { label: string; date: string; entries: TimeEntry[]; totalSeconds: number; totalAmount: number }\n > = {}\n for (const entry of this.entries()) {\n if (!groups[entry.date]) {\n groups[entry.date] = { label: entry.dateLabel, date: entry.date, entries: [], totalSeconds: 0, totalAmount: 0 }\n }\n groups[entry.date].entries.push(entry)\n groups[entry.date].totalSeconds += entry.durationSeconds\n groups[entry.date].totalAmount += entry.amount\n }\n return Object.values(groups)\n })\n\n readonly totalWeeklySeconds = computed(() => this.entries().reduce((acc, e) => acc + e.durationSeconds, 0))\n readonly totalWeeklyAmount = computed(() => this.entries().reduce((acc, e) => acc + e.amount, 0))\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className())\n }\n\n formatDuration(totalSeconds: number): string {\n return formatDuration(totalSeconds)\n }\n\n formatCurrency(val: number): string {\n return formatCurrency(val)\n }\n\n toggleTimer(): void {\n this.isRunning.update((v) => !v)\n }\n\n resumeEntry(entry: TimeEntry): void {\n this.activeTask.set(entry.task)\n this.selectedProjectId.set(entry.projectId)\n this.isBillable.set(entry.isBillable)\n this.isRunning.set(true)\n }\n\n deleteEntry(id: string): void {\n this.entries.update((prev) => prev.filter((e) => e.id !== id))\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/time-tracker-timesheet/time-tracker-timesheet.component.ts" }, { "path": "packages/registry-angular/blocks/time-tracker-timesheet/index.ts", "content": "export {\n UiTimeTrackerTimesheetComponent,\n formatCurrency,\n formatDuration,\n type ProjectOption,\n type TimeEntry,\n} from './time-tracker-timesheet.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/time-tracker-timesheet/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Toggl/Harvest-style live time tracker with active running stopwatch, project rate selection, billable status toggle, 4 weekly summary metric cards, and daily grouped timesheet activity ledger with resume actions.", "categories": [ "productivity", "app", "billing" ] }