{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "time-tracker-timesheet", "title": "Time Tracker Timesheet", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/time-tracker-timesheet/TimeTrackerTimesheet.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Briefcase,\n Calendar,\n CircleDollarSign,\n Clock,\n DollarSign,\n Download,\n Play,\n Plus,\n Square,\n Trash2,\n TrendingUp,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\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\nfunction 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\nfunction 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\nexport interface TimeTrackerTimesheetProps {\n title?: string\n subtitle?: string\n className?: string\n}\n\nexport function TimeTrackerTimesheet({\n title = 'Time Tracker & Timesheet',\n subtitle = 'Track live project hours, calculate client billing rates, and review weekly activity.',\n className,\n}: TimeTrackerTimesheetProps) {\n const [entries, setEntries] = React.useState(initialEntries)\n const [activeTask, setActiveTask] = React.useState('Refactoring OKLCH Color Engine & AST Parser')\n const [selectedProjectId, setSelectedProjectId] = React.useState('acme')\n const [isBillable, setIsBillable] = React.useState(true)\n const [isRunning, setIsRunning] = React.useState(true)\n const [timerSeconds, setTimerSeconds] = React.useState(6138) // 01:42:18\n\n React.useEffect(() => {\n let interval: ReturnType | null = null\n if (isRunning) {\n interval = setInterval(() => {\n setTimerSeconds((prev) => prev + 1)\n }, 1000)\n }\n return () => {\n if (interval) clearInterval(interval)\n }\n }, [isRunning])\n\n const toggleTimer = () => {\n setIsRunning((prev) => !prev)\n }\n\n const resumeEntry = (entry: TimeEntry) => {\n setActiveTask(entry.task)\n setSelectedProjectId(entry.projectId)\n setIsBillable(entry.isBillable)\n setIsRunning(true)\n }\n\n const deleteEntry = (id: string) => {\n setEntries((prev) => prev.filter((e) => e.id !== id))\n }\n\n const groupedEntries = React.useMemo(() => {\n const groups: Record<\n string,\n { label: string; date: string; entries: TimeEntry[]; totalSeconds: number; totalAmount: number }\n > = {}\n\n for (const entry of entries) {\n if (!groups[entry.date]) {\n groups[entry.date] = {\n label: entry.dateLabel,\n date: entry.date,\n entries: [],\n totalSeconds: 0,\n totalAmount: 0,\n }\n }\n groups[entry.date].entries.push(entry)\n groups[entry.date].totalSeconds += entry.durationSeconds\n groups[entry.date].totalAmount += entry.amount\n }\n\n return Object.values(groups)\n }, [entries])\n\n const totalWeeklySeconds = React.useMemo(() => entries.reduce((acc, e) => acc + e.durationSeconds, 0), [entries])\n const totalWeeklyAmount = React.useMemo(() => entries.reduce((acc, e) => acc + e.amount, 0), [entries])\n\n const formattedTimer = formatDuration(timerSeconds)\n\n return (\n
\n {/* Header Section */}\n
\n
\n
\n

{title}

\n \n
\n

{subtitle}

\n
\n\n
\n \n \n
\n
\n\n {/* Live Running Stopwatch Hero Bar */}\n \n \n
\n {/* Task description & Project Tag Select */}\n
\n {/* Task Description Input */}\n
\n setActiveTask(e.target.value)}\n type=\"text\"\n placeholder=\"What are you working on?\"\n className=\"h-10 text-sm font-medium focus-visible:ring-2\"\n />\n
\n\n {/* Project / Client Tag Select */}\n
\n \n
\n
\n\n {/* Controls: Billable Switch, Live Stopwatch, Primary Action Button */}\n
\n {/* Billable Switch */}\n
\n \n \n \n Billable\n \n
\n\n \n\n {/* Live Running Stopwatch Timer */}\n
\n
\n
\n {isRunning && (\n \n )}\n \n
\n \n {formattedTimer}\n \n
\n\n {/* Primary Start / Stop Button */}\n \n {isRunning ? (\n \n ) : (\n \n )}\n {isRunning ? 'Stop' : 'Start'}\n \n
\n
\n
\n \n \n\n {/* 4 Timesheet Summary Cards */}\n
\n {/* 1. Total Hours This Week */}\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 {/* 2. Billable Hours */}\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 {/* 3. Total Earnings */}\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 {/* 4. Active Clients */}\n \n \n
\n

Active Clients

\n
\n \n
\n
\n

3 active clients

\n

Acme Corp · Stripe · Linear

\n \n \n
\n\n {/* Weekly Timesheet & Daily Activity Table */}\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 Project & Client\n Task Description\n Billable\n Time Range\n Duration\n Amount\n \n Actions\n \n \n \n \n {groupedEntries.map((group) => (\n \n {/* Day Group Header Subrow */}\n \n \n
\n \n {group.label}\n
\n \n \n {formatDuration(group.totalSeconds)}\n \n \n {formatCurrency(group.totalAmount)}\n \n \n \n\n {/* Entries for this day */}\n {group.entries.map((entry) => (\n \n {/* Project Badge & Client */}\n \n
\n \n {entry.projectName}\n \n {entry.clientName}\n
\n \n\n {/* Task description */}\n \n

{entry.task}

\n \n\n {/* Billable Status */}\n \n
\n {entry.isBillable ? (\n \n \n Billable (${entry.rate}/h)\n \n ) : (\n \n Non-billable\n \n )}\n
\n \n\n {/* Time Range */}\n \n {entry.startTime} – {entry.endTime}\n \n\n {/* Duration */}\n \n {formatDuration(entry.durationSeconds)}\n \n\n {/* Billable Amount */}\n \n \n {formatCurrency(entry.amount)}\n \n \n\n {/* Actions */}\n \n
\n resumeEntry(entry)}\n >\n \n Resume timer for {entry.task}\n \n deleteEntry(entry.id)}\n >\n \n Delete entry\n \n
\n \n \n ))}\n \n ))}\n\n {/* Empty state */}\n {entries.length === 0 && (\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\n {/* Timesheet Table Footer Strip */}\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}\n", "type": "registry:block", "target": "~/components/blocks/TimeTrackerTimesheet.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/switch.json", "https://uipkge.dev/r/react/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" ] }