A floating time-tracking panel component that renders a real-time timer, ticket/customer assignment fields, notes input, and a recent-entries list for MSP technicians to log billable time. ## Key Components ### `TimeTrackerPanel` (main export) The primary panel component consuming all `TimeTrackerData` props plus `onClose` and optional `className`. Handles: - **Timer controls** – start, pause, resume, and finish/save actions driven by `status` (`ready | tracking | paused`) - **Live clock** – formatted elapsed time via the `useTrackerClock` hook - **Ticket & customer selection** – searchable `Autocomplete` fields with server-side filtering support - **Notes textarea** – optional when a ticket is selected; required otherwise - **Validation** – inline field errors shown only after a submit attempt, reset when status returns to `ready` - **Last entries list** – up to 3 recent `TimeTrackerEntry` rows; empty state shown when none exist - **Footer actions** – Manual Entry button and a `SplitButton` to open "My Time" ### `StatusTag` (internal) Renders a styled `Tag` reflecting current tracker status: `tracking` (success + animated loader), `paused` (warning + pause icon), or `ready` (grey). ### `LastEntryRow` (internal) Displays a single time entry row with duration, date, title, and optional description. ## Usage Example ```typescript import { TimeTrackerPanel } from '@openframe/ui' setTicket(id)} onTicketSearch={(q) => fetchTickets(q)} ticketsLoading={false} customerOptions={[{ id: 'C-1', label: 'Acme Corp', imageUrl: '/acme.png' }]} selectedCustomerId={null} onSelectedCustomerChange={(id) => setCustomer(id)} onCustomerSearch={(q) => fetchCustomers(q)} customersLoading={false} customerLocked={false} notes="" onNotesChange={setNotes} lastEntries={[]} onStart={startTimer} onPause={pauseTimer} onResume={resumeTimer} onCancel={cancelTimer} onSubmit={submitEntry} isStarting={false} isSubmitting={false} onClose={() => setOpen(false)} /> ``` ## Source [`time-tracker-panel.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/time-tracker-panel.tsx)