@open-mercato/core 0.7.1-develop.7178.1.ab93fbaf4e → 0.7.1-develop.7180.1.9717fbbb43

package/dist/modules/staff/lib/time-tracking-ui/CustomerPicker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/staff/lib/time-tracking-ui/CustomerPicker.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Building2, Plus, UserRound } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@open-mercato/ui/primitives/dialog'\nimport { LookupSelect, type LookupSelectItem } from '@open-mercato/ui/backend/inputs/LookupSelect'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport { createCrud } from '@open-mercato/ui/backend/utils/crud'\nimport { useOrganizationScopeDetail } from '@open-mercato/shared/lib/frontend/useOrganizationScope'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nexport type CustomerKind = 'person' | 'company'\n\n/**\n * D-9: the project points at `customers.customer_entities`, the supertype, so a\n * client may be a company or a sole trader without a second code path. The\n * customers module exposes no supertype list route \u2014 `people` and `companies`\n * both query the supertype table but hard-filter by `kind` \u2014 so the picker\n * merges the two calls and re-attaches the kind the responses strip.\n */\nexport type CustomerSelection = {\n  id: string\n  name: string\n  kind: CustomerKind\n  email?: string | null\n  taxId?: string | null\n}\n\ntype CustomerRow = {\n  id?: unknown\n  display_name?: unknown\n  displayName?: unknown\n  primary_email?: unknown\n  primaryEmail?: unknown\n  domain?: unknown\n  legal_name?: unknown\n  tax_id?: unknown\n  taxId?: unknown\n  vat_id?: unknown\n}\n\nconst PAGE_SIZE = 20\n\nfunction readString(value: unknown): string | null {\n  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : null\n}\n\nfunction readTaxId(row: CustomerRow): string | null {\n  return readString(row.taxId) ?? readString(row.tax_id) ?? readString(row.vat_id)\n}\n\nfunction toSelection(row: CustomerRow, kind: CustomerKind): CustomerSelection | null {\n  const id = readString(row.id)\n  if (!id) return null\n  const name =\n    readString(row.display_name) ??\n    readString(row.displayName) ??\n    readString(row.legal_name) ??\n    readString(row.primary_email) ??\n    id\n  return {\n    id,\n    name,\n    kind,\n    email: readString(row.primary_email) ?? readString(row.primaryEmail),\n    taxId: readTaxId(row),\n  }\n}\n\nasync function fetchCustomerPage(\n  resource: 'people' | 'companies',\n  params: Record<string, string>,\n): Promise<CustomerSelection[]> {\n  const kind: CustomerKind = resource === 'people' ? 'person' : 'company'\n  const search = new URLSearchParams({ page: '1', pageSize: String(PAGE_SIZE), ...params })\n  try {\n    const res = await apiCall<{ items?: CustomerRow[] }>(`/api/customers/${resource}?${search.toString()}`)\n    const items = Array.isArray(res.result?.items) ? res.result.items : []\n    return items\n      .map((row) => toSelection(row, kind))\n      .filter((row): row is CustomerSelection => row !== null)\n  } catch {\n    // The customers module is an optional peer: a missing or forbidden route\n    // degrades this side of the picker to \"no results\", never to a hard error.\n    return []\n  }\n}\n\nexport async function searchCustomers(query: string): Promise<CustomerSelection[]> {\n  const trimmed = query.trim()\n  const params: Record<string, string> = trimmed.length > 0 ? { search: trimmed } : {}\n  const [people, companies] = await Promise.all([\n    fetchCustomerPage('people', params),\n    fetchCustomerPage('companies', params),\n  ])\n  return [...companies, ...people]\n}\n\nexport async function resolveCustomerById(customerId: string): Promise<CustomerSelection | null> {\n  const [people, companies] = await Promise.all([\n    fetchCustomerPage('people', { id: customerId, pageSize: '1' }),\n    fetchCustomerPage('companies', { id: customerId, pageSize: '1' }),\n  ])\n  return companies[0] ?? people[0] ?? null\n}\n\ntype NewCustomerDialogProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  onCreated: (customer: CustomerSelection) => void\n}\n\nfunction NewCustomerDialog({ open, onOpenChange, onCreated }: NewCustomerDialogProps) {\n  const t = useT()\n  const { organizationId } = useOrganizationScopeDetail()\n  const [kind, setKind] = React.useState<CustomerKind>('company')\n  const [displayName, setDisplayName] = React.useState('')\n  const [firstName, setFirstName] = React.useState('')\n  const [lastName, setLastName] = React.useState('')\n  const [email, setEmail] = React.useState('')\n  const [saving, setSaving] = React.useState(false)\n  const [error, setError] = React.useState<string | null>(null)\n\n  React.useEffect(() => {\n    if (open) return\n    setKind('company')\n    setDisplayName('')\n    setFirstName('')\n    setLastName('')\n    setEmail('')\n    setError(null)\n    setSaving(false)\n  }, [open])\n\n  const submit = React.useCallback(async () => {\n    if (saving) return\n    const trimmedEmail = email.trim()\n    const resource = kind === 'company' ? 'companies' : 'people'\n    const name =\n      kind === 'company'\n        ? displayName.trim()\n        : [firstName.trim(), lastName.trim()].filter(Boolean).join(' ')\n    if (kind === 'company' && !displayName.trim()) {\n      setError(t('staff.time_tracking.projects.customer.new.nameRequired', 'A name is required.'))\n      return\n    }\n    if (kind === 'person' && (!firstName.trim() || !lastName.trim())) {\n      setError(t('staff.time_tracking.projects.customer.new.nameRequired', 'A name is required.'))\n      return\n    }\n    const payload: Record<string, unknown> = organizationId ? { organizationId } : {}\n    if (kind === 'company') {\n      payload.displayName = displayName.trim()\n    } else {\n      payload.firstName = firstName.trim()\n      payload.lastName = lastName.trim()\n      payload.displayName = name\n    }\n    if (trimmedEmail) payload.primaryEmail = trimmedEmail\n\n    setSaving(true)\n    setError(null)\n    try {\n      const { result } = await createCrud<{ id?: string; entityId?: string }>(\n        `customers/${resource}`,\n        payload,\n        { errorMessage: t('staff.time_tracking.projects.customer.new.error', 'Failed to create the customer.') },\n      )\n      const id = readString(result?.entityId) ?? readString(result?.id)\n      if (!id) {\n        setError(t('staff.time_tracking.projects.customer.new.error', 'Failed to create the customer.'))\n        return\n      }\n      onCreated({ id, name, kind, email: trimmedEmail || null, taxId: null })\n      onOpenChange(false)\n    } catch (err) {\n      setError(\n        err instanceof Error && err.message\n          ? err.message\n          : t('staff.time_tracking.projects.customer.new.error', 'Failed to create the customer.'),\n      )\n    } finally {\n      setSaving(false)\n    }\n  }, [displayName, email, firstName, kind, lastName, onCreated, onOpenChange, organizationId, saving, t])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {\n        event.preventDefault()\n        void submit()\n      }\n    },\n    [submit],\n  )\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"sm:max-w-md\" onKeyDown={handleKeyDown}>\n        <DialogHeader>\n          <DialogTitle>{t('staff.time_tracking.projects.customer.new.title', 'New customer')}</DialogTitle>\n        </DialogHeader>\n        <div className=\"flex flex-col gap-4\">\n          <SegmentedControl\n            value={kind}\n            onValueChange={(next) => setKind(next as CustomerKind)}\n            aria-label={t('staff.time_tracking.projects.customer.new.kind', 'Customer type')}\n          >\n            <SegmentedControlItem value=\"company\">\n              {t('staff.time_tracking.projects.customer.new.company', 'Company')}\n            </SegmentedControlItem>\n            <SegmentedControlItem value=\"person\">\n              {t('staff.time_tracking.projects.customer.new.person', 'Sole trader')}\n            </SegmentedControlItem>\n          </SegmentedControl>\n\n          {kind === 'company' ? (\n            <div className=\"flex flex-col gap-1.5\">\n              <Label htmlFor=\"tt-new-customer-name\">\n                {t('staff.time_tracking.projects.customer.new.name', 'Name')}\n              </Label>\n              <Input\n                id=\"tt-new-customer-name\"\n                value={displayName}\n                autoFocus\n                onChange={(event) => setDisplayName(event.target.value)}\n              />\n            </div>\n          ) : (\n            <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n              <div className=\"flex flex-col gap-1.5\">\n                <Label htmlFor=\"tt-new-customer-first\">\n                  {t('staff.time_tracking.projects.customer.new.firstName', 'First name')}\n                </Label>\n                <Input\n                  id=\"tt-new-customer-first\"\n                  value={firstName}\n                  autoFocus\n                  onChange={(event) => setFirstName(event.target.value)}\n                />\n              </div>\n              <div className=\"flex flex-col gap-1.5\">\n                <Label htmlFor=\"tt-new-customer-last\">\n                  {t('staff.time_tracking.projects.customer.new.lastName', 'Last name')}\n                </Label>\n                <Input\n                  id=\"tt-new-customer-last\"\n                  value={lastName}\n                  onChange={(event) => setLastName(event.target.value)}\n                />\n              </div>\n            </div>\n          )}\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor=\"tt-new-customer-email\">\n              {t('staff.time_tracking.projects.customer.new.email', 'Email')}\n            </Label>\n            <Input\n              id=\"tt-new-customer-email\"\n              type=\"email\"\n              value={email}\n              onChange={(event) => setEmail(event.target.value)}\n            />\n          </div>\n\n          {error ? <p className=\"text-sm text-status-error-text\">{error}</p> : null}\n        </div>\n        <DialogFooter>\n          <Button type=\"button\" variant=\"ghost\" onClick={() => onOpenChange(false)}>\n            {t('staff.time_tracking.projects.form.actions.cancel', 'Cancel')}\n          </Button>\n          <Button type=\"button\" onClick={() => void submit()} disabled={saving}>\n            {t('staff.time_tracking.projects.customer.new.submit', 'Create customer')}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport type CustomerPickerProps = {\n  value: string | null\n  snapshot?: CustomerSelection | null\n  disabled?: boolean\n  onChange: (customer: CustomerSelection | null) => void\n}\n\nexport function CustomerPicker({ value, snapshot, disabled, onChange }: CustomerPickerProps) {\n  const t = useT()\n  const [known, setKnown] = React.useState<Map<string, CustomerSelection>>(() => {\n    const initial = new Map<string, CustomerSelection>()\n    if (snapshot?.id) initial.set(snapshot.id, snapshot)\n    return initial\n  })\n  const [dialogOpen, setDialogOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    if (!value || known.has(value)) return\n    let cancelled = false\n    void resolveCustomerById(value).then((resolved) => {\n      if (cancelled || !resolved) return\n      setKnown((prev) => new Map(prev).set(resolved.id, resolved))\n    })\n    return () => { cancelled = true }\n  }, [value, known])\n\n  const fetchItems = React.useCallback(async (query: string): Promise<LookupSelectItem[]> => {\n    const results = await searchCustomers(query)\n    setKnown((prev) => {\n      const next = new Map(prev)\n      results.forEach((row) => next.set(row.id, row))\n      return next\n    })\n    return results.map((row) => ({\n      id: row.id,\n      title: row.name,\n      subtitle: row.email ?? null,\n      icon: row.kind === 'company'\n        ? <Building2 className=\"h-4 w-4\" aria-hidden />\n        : <UserRound className=\"h-4 w-4\" aria-hidden />,\n      badge: row.kind === 'company'\n        ? t('staff.time_tracking.projects.customer.kind.company', 'Company')\n        : t('staff.time_tracking.projects.customer.kind.person', 'Sole trader'),\n    }))\n  }, [t])\n\n  const handleChange = React.useCallback(\n    (next: string | null) => {\n      if (!next) {\n        onChange(null)\n        return\n      }\n      onChange(known.get(next) ?? { id: next, name: next, kind: 'company' })\n    },\n    [known, onChange],\n  )\n\n  const handleCreated = React.useCallback(\n    (customer: CustomerSelection) => {\n      setKnown((prev) => new Map(prev).set(customer.id, customer))\n      onChange(customer)\n    },\n    [onChange],\n  )\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <LookupSelect\n        value={value}\n        onChange={handleChange}\n        fetchItems={fetchItems}\n        disabled={disabled}\n        defaultOpen={false}\n        minQuery={2}\n        placeholder={t('staff.time_tracking.projects.customer.placeholder', 'Search customers\u2026')}\n        selectedHintLabel={(id) => known.get(id)?.name ?? id}\n        actionSlot={(\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => setDialogOpen(true)}>\n            <Plus className=\"h-4 w-4\" aria-hidden />\n            {t('staff.time_tracking.projects.customer.new.trigger', 'New customer')}\n          </Button>\n        )}\n      />\n      <NewCustomerDialog open={dialogOpen} onOpenChange={setDialogOpen} onCreated={handleCreated} />\n    </div>\n  )\n}\n\nexport type CustomerPickerBindingProps = {\n  value: unknown\n  values?: Record<string, unknown>\n  disabled?: boolean\n  setValue: (value: unknown) => void\n  setFormValue?: (id: string, value: unknown) => void\n}\n\n/**\n * Writes the FK plus the snapshot fields the project keeps alongside it, so the\n * projects list and the report header resolve a customer name without joining\n * the customers module (D-9, cross-module FK-id + snapshot rule).\n */\nexport function CustomerPickerBinding({\n  value,\n  values,\n  disabled,\n  setValue,\n  setFormValue,\n}: CustomerPickerBindingProps) {\n  const customerId = typeof value === 'string' && value.length > 0 ? value : null\n  const snapshot = React.useMemo<CustomerSelection | null>(() => {\n    const name = typeof values?.customerName === 'string' ? values.customerName : null\n    if (!customerId || !name) return null\n    const kind = values?.customerKind === 'person' ? 'person' : 'company'\n    const taxId = typeof values?.customerTaxId === 'string' ? values.customerTaxId : null\n    return { id: customerId, name, kind, taxId }\n  }, [customerId, values?.customerKind, values?.customerName, values?.customerTaxId])\n\n  const handleChange = React.useCallback(\n    (next: CustomerSelection | null) => {\n      setValue(next?.id ?? null)\n      setFormValue?.('customerName', next?.name ?? null)\n      setFormValue?.('customerKind', next?.kind ?? null)\n      setFormValue?.('customerTaxId', next?.taxId ?? null)\n    },\n    [setFormValue, setValue],\n  )\n\n  return (\n    <CustomerPicker\n      value={customerId}\n      snapshot={snapshot}\n      disabled={disabled}\n      onChange={handleChange}\n    />\n  )\n}\n"],
+  "mappings": ";AAkNU,cAGA,YAHA;AAhNV,YAAY,WAAW;AACvB,SAAS,WAAW,MAAM,iBAAiB;AAC3C,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,kBAAkB,4BAA4B;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAA2C;AACpD,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,kCAAkC;AAC3C,SAAS,YAAY;AAgCrB,MAAM,YAAY;AAElB,SAAS,WAAW,OAA+B;AACjD,SAAO,OAAO,UAAU,YAAY,MAAM,KAAK,EAAE,SAAS,IAAI,MAAM,KAAK,IAAI;AAC/E;AAEA,SAAS,UAAU,KAAiC;AAClD,SAAO,WAAW,IAAI,KAAK,KAAK,WAAW,IAAI,MAAM,KAAK,WAAW,IAAI,MAAM;AACjF;AAEA,SAAS,YAAY,KAAkB,MAA8C;AACnF,QAAM,KAAK,WAAW,IAAI,EAAE;AAC5B,MAAI,CAAC,GAAI,QAAO;AAChB,QAAM,OACJ,WAAW,IAAI,YAAY,KAC3B,WAAW,IAAI,WAAW,KAC1B,WAAW,IAAI,UAAU,KACzB,WAAW,IAAI,aAAa,KAC5B;AACF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,WAAW,IAAI,aAAa,KAAK,WAAW,IAAI,YAAY;AAAA,IACnE,OAAO,UAAU,GAAG;AAAA,EACtB;AACF;AAEA,eAAe,kBACb,UACA,QAC8B;AAC9B,QAAM,OAAqB,aAAa,WAAW,WAAW;AAC9D,QAAM,SAAS,IAAI,gBAAgB,EAAE,MAAM,KAAK,UAAU,OAAO,SAAS,GAAG,GAAG,OAAO,CAAC;AACxF,MAAI;AACF,UAAM,MAAM,MAAM,QAAmC,kBAAkB,QAAQ,IAAI,OAAO,SAAS,CAAC,EAAE;AACtG,UAAM,QAAQ,MAAM,QAAQ,IAAI,QAAQ,KAAK,IAAI,IAAI,OAAO,QAAQ,CAAC;AACrE,WAAO,MACJ,IAAI,CAAC,QAAQ,YAAY,KAAK,IAAI,CAAC,EACnC,OAAO,CAAC,QAAkC,QAAQ,IAAI;AAAA,EAC3D,QAAQ;AAGN,WAAO,CAAC;AAAA,EACV;AACF;AAEA,eAAsB,gBAAgB,OAA6C;AACjF,QAAM,UAAU,MAAM,KAAK;AAC3B,QAAM,SAAiC,QAAQ,SAAS,IAAI,EAAE,QAAQ,QAAQ,IAAI,CAAC;AACnF,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,QAAQ,IAAI;AAAA,IAC5C,kBAAkB,UAAU,MAAM;AAAA,IAClC,kBAAkB,aAAa,MAAM;AAAA,EACvC,CAAC;AACD,SAAO,CAAC,GAAG,WAAW,GAAG,MAAM;AACjC;AAEA,eAAsB,oBAAoB,YAAuD;AAC/F,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,QAAQ,IAAI;AAAA,IAC5C,kBAAkB,UAAU,EAAE,IAAI,YAAY,UAAU,IAAI,CAAC;AAAA,IAC7D,kBAAkB,aAAa,EAAE,IAAI,YAAY,UAAU,IAAI,CAAC;AAAA,EAClE,CAAC;AACD,SAAO,UAAU,CAAC,KAAK,OAAO,CAAC,KAAK;AACtC;AAQA,SAAS,kBAAkB,EAAE,MAAM,cAAc,UAAU,GAA2B;AACpF,QAAM,IAAI,KAAK;AACf,QAAM,EAAE,eAAe,IAAI,2BAA2B;AACtD,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAuB,SAAS;AAC9D,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,EAAE;AACvD,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,EAAE;AACnD,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,EAAE;AACjD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAwB,IAAI;AAE5D,QAAM,UAAU,MAAM;AACpB,QAAI,KAAM;AACV,YAAQ,SAAS;AACjB,mBAAe,EAAE;AACjB,iBAAa,EAAE;AACf,gBAAY,EAAE;AACd,aAAS,EAAE;AACX,aAAS,IAAI;AACb,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,SAAS,MAAM,YAAY,YAAY;AAC3C,QAAI,OAAQ;AACZ,UAAM,eAAe,MAAM,KAAK;AAChC,UAAM,WAAW,SAAS,YAAY,cAAc;AACpD,UAAM,OACJ,SAAS,YACL,YAAY,KAAK,IACjB,CAAC,UAAU,KAAK,GAAG,SAAS,KAAK,CAAC,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAClE,QAAI,SAAS,aAAa,CAAC,YAAY,KAAK,GAAG;AAC7C,eAAS,EAAE,0DAA0D,qBAAqB,CAAC;AAC3F;AAAA,IACF;AACA,QAAI,SAAS,aAAa,CAAC,UAAU,KAAK,KAAK,CAAC,SAAS,KAAK,IAAI;AAChE,eAAS,EAAE,0DAA0D,qBAAqB,CAAC;AAC3F;AAAA,IACF;AACA,UAAM,UAAmC,iBAAiB,EAAE,eAAe,IAAI,CAAC;AAChF,QAAI,SAAS,WAAW;AACtB,cAAQ,cAAc,YAAY,KAAK;AAAA,IACzC,OAAO;AACL,cAAQ,YAAY,UAAU,KAAK;AACnC,cAAQ,WAAW,SAAS,KAAK;AACjC,cAAQ,cAAc;AAAA,IACxB;AACA,QAAI,aAAc,SAAQ,eAAe;AAEzC,cAAU,IAAI;AACd,aAAS,IAAI;AACb,QAAI;AACF,YAAM,EAAE,OAAO,IAAI,MAAM;AAAA,QACvB,aAAa,QAAQ;AAAA,QACrB;AAAA,QACA,EAAE,cAAc,EAAE,mDAAmD,gCAAgC,EAAE;AAAA,MACzG;AACA,YAAM,KAAK,WAAW,QAAQ,QAAQ,KAAK,WAAW,QAAQ,EAAE;AAChE,UAAI,CAAC,IAAI;AACP,iBAAS,EAAE,mDAAmD,gCAAgC,CAAC;AAC/F;AAAA,MACF;AACA,gBAAU,EAAE,IAAI,MAAM,MAAM,OAAO,gBAAgB,MAAM,OAAO,KAAK,CAAC;AACtE,mBAAa,KAAK;AAAA,IACpB,SAAS,KAAK;AACZ;AAAA,QACE,eAAe,SAAS,IAAI,UACxB,IAAI,UACJ,EAAE,mDAAmD,gCAAgC;AAAA,MAC3F;AAAA,IACF,UAAE;AACA,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,aAAa,OAAO,WAAW,MAAM,UAAU,WAAW,cAAc,gBAAgB,QAAQ,CAAC,CAAC;AAEtG,QAAM,gBAAgB,MAAM;AAAA,IAC1B,CAAC,UAA+C;AAC9C,WAAK,MAAM,WAAW,MAAM,YAAY,MAAM,QAAQ,SAAS;AAC7D,cAAM,eAAe;AACrB,aAAK,OAAO;AAAA,MACd;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SACE,oBAAC,UAAO,MAAY,cAClB,+BAAC,iBAAc,WAAU,eAAc,WAAW,eAChD;AAAA,wBAAC,gBACC,8BAAC,eAAa,YAAE,mDAAmD,cAAc,GAAE,GACrF;AAAA,IACA,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,eAAe,CAAC,SAAS,QAAQ,IAAoB;AAAA,UACrD,cAAY,EAAE,kDAAkD,eAAe;AAAA,UAE/E;AAAA,gCAAC,wBAAqB,OAAM,WACzB,YAAE,qDAAqD,SAAS,GACnE;AAAA,YACA,oBAAC,wBAAqB,OAAM,UACzB,YAAE,oDAAoD,aAAa,GACtE;AAAA;AAAA;AAAA,MACF;AAAA,MAEC,SAAS,YACR,qBAAC,SAAI,WAAU,yBACb;AAAA,4BAAC,SAAM,SAAQ,wBACZ,YAAE,kDAAkD,MAAM,GAC7D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,OAAO;AAAA,YACP,WAAS;AAAA,YACT,UAAU,CAAC,UAAU,eAAe,MAAM,OAAO,KAAK;AAAA;AAAA,QACxD;AAAA,SACF,IAEA,qBAAC,SAAI,WAAU,yCACb;AAAA,6BAAC,SAAI,WAAU,yBACb;AAAA,8BAAC,SAAM,SAAQ,yBACZ,YAAE,uDAAuD,YAAY,GACxE;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,OAAO;AAAA,cACP,WAAS;AAAA,cACT,UAAU,CAAC,UAAU,aAAa,MAAM,OAAO,KAAK;AAAA;AAAA,UACtD;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,yBACb;AAAA,8BAAC,SAAM,SAAQ,wBACZ,YAAE,sDAAsD,WAAW,GACtE;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,OAAO;AAAA,cACP,UAAU,CAAC,UAAU,YAAY,MAAM,OAAO,KAAK;AAAA;AAAA,UACrD;AAAA,WACF;AAAA,SACF;AAAA,MAGF,qBAAC,SAAI,WAAU,yBACb;AAAA,4BAAC,SAAM,SAAQ,yBACZ,YAAE,mDAAmD,OAAO,GAC/D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,OAAO;AAAA,YACP,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA;AAAA,QAClD;AAAA,SACF;AAAA,MAEC,QAAQ,oBAAC,OAAE,WAAU,kCAAkC,iBAAM,IAAO;AAAA,OACvE;AAAA,IACA,qBAAC,gBACC;AAAA,0BAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,SAAS,MAAM,aAAa,KAAK,GACpE,YAAE,oDAAoD,QAAQ,GACjE;AAAA,MACA,oBAAC,UAAO,MAAK,UAAS,SAAS,MAAM,KAAK,OAAO,GAAG,UAAU,QAC3D,YAAE,oDAAoD,iBAAiB,GAC1E;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AASO,SAAS,eAAe,EAAE,OAAO,UAAU,UAAU,SAAS,GAAwB;AAC3F,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAyC,MAAM;AAC7E,UAAM,UAAU,oBAAI,IAA+B;AACnD,QAAI,UAAU,GAAI,SAAQ,IAAI,SAAS,IAAI,QAAQ;AACnD,WAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,KAAK;AAExD,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,SAAS,MAAM,IAAI,KAAK,EAAG;AAChC,QAAI,YAAY;AAChB,SAAK,oBAAoB,KAAK,EAAE,KAAK,CAAC,aAAa;AACjD,UAAI,aAAa,CAAC,SAAU;AAC5B,eAAS,CAAC,SAAS,IAAI,IAAI,IAAI,EAAE,IAAI,SAAS,IAAI,QAAQ,CAAC;AAAA,IAC7D,CAAC;AACD,WAAO,MAAM;AAAE,kBAAY;AAAA,IAAK;AAAA,EAClC,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,QAAM,aAAa,MAAM,YAAY,OAAO,UAA+C;AACzF,UAAM,UAAU,MAAM,gBAAgB,KAAK;AAC3C,aAAS,CAAC,SAAS;AACjB,YAAM,OAAO,IAAI,IAAI,IAAI;AACzB,cAAQ,QAAQ,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,GAAG,CAAC;AAC9C,aAAO;AAAA,IACT,CAAC;AACD,WAAO,QAAQ,IAAI,CAAC,SAAS;AAAA,MAC3B,IAAI,IAAI;AAAA,MACR,OAAO,IAAI;AAAA,MACX,UAAU,IAAI,SAAS;AAAA,MACvB,MAAM,IAAI,SAAS,YACf,oBAAC,aAAU,WAAU,WAAU,eAAW,MAAC,IAC3C,oBAAC,aAAU,WAAU,WAAU,eAAW,MAAC;AAAA,MAC/C,OAAO,IAAI,SAAS,YAChB,EAAE,sDAAsD,SAAS,IACjE,EAAE,qDAAqD,aAAa;AAAA,IAC1E,EAAE;AAAA,EACJ,GAAG,CAAC,CAAC,CAAC;AAEN,QAAM,eAAe,MAAM;AAAA,IACzB,CAAC,SAAwB;AACvB,UAAI,CAAC,MAAM;AACT,iBAAS,IAAI;AACb;AAAA,MACF;AACA,eAAS,MAAM,IAAI,IAAI,KAAK,EAAE,IAAI,MAAM,MAAM,MAAM,MAAM,UAAU,CAAC;AAAA,IACvE;AAAA,IACA,CAAC,OAAO,QAAQ;AAAA,EAClB;AAEA,QAAM,gBAAgB,MAAM;AAAA,IAC1B,CAAC,aAAgC;AAC/B,eAAS,CAAC,SAAS,IAAI,IAAI,IAAI,EAAE,IAAI,SAAS,IAAI,QAAQ,CAAC;AAC3D,eAAS,QAAQ;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,aAAa;AAAA,QACb,UAAU;AAAA,QACV,aAAa,EAAE,qDAAqD,wBAAmB;AAAA,QACvF,mBAAmB,CAAC,OAAO,MAAM,IAAI,EAAE,GAAG,QAAQ;AAAA,QAClD,YACE,qBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,MAAK,MAAK,SAAS,MAAM,cAAc,IAAI,GACjF;AAAA,8BAAC,QAAK,WAAU,WAAU,eAAW,MAAC;AAAA,UACrC,EAAE,qDAAqD,cAAc;AAAA,WACxE;AAAA;AAAA,IAEJ;AAAA,IACA,oBAAC,qBAAkB,MAAM,YAAY,cAAc,eAAe,WAAW,eAAe;AAAA,KAC9F;AAEJ;AAeO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,QAAM,aAAa,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI,QAAQ;AAC3E,QAAM,WAAW,MAAM,QAAkC,MAAM;AAC7D,UAAM,OAAO,OAAO,QAAQ,iBAAiB,WAAW,OAAO,eAAe;AAC9E,QAAI,CAAC,cAAc,CAAC,KAAM,QAAO;AACjC,UAAM,OAAO,QAAQ,iBAAiB,WAAW,WAAW;AAC5D,UAAM,QAAQ,OAAO,QAAQ,kBAAkB,WAAW,OAAO,gBAAgB;AACjF,WAAO,EAAE,IAAI,YAAY,MAAM,MAAM,MAAM;AAAA,EAC7C,GAAG,CAAC,YAAY,QAAQ,cAAc,QAAQ,cAAc,QAAQ,aAAa,CAAC;AAElF,QAAM,eAAe,MAAM;AAAA,IACzB,CAAC,SAAmC;AAClC,eAAS,MAAM,MAAM,IAAI;AACzB,qBAAe,gBAAgB,MAAM,QAAQ,IAAI;AACjD,qBAAe,gBAAgB,MAAM,QAAQ,IAAI;AACjD,qBAAe,iBAAiB,MAAM,SAAS,IAAI;AAAA,IACrD;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,UAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "names": []
+}

package/dist/modules/staff/lib/time-tracking-ui/DurationInput.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { formatDuration, parseDuration } from "../time-tracking/duration.js";
+function formatTrimmedDecimalDuration(minutes) {
+  if (!Number.isFinite(minutes) || minutes <= 0) return "";
+  const hours = minutes / 60;
+  if (hours % 1 === 0) return String(hours);
+  return hours.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
+}
+function readStatus(raw) {
+  const parsed = parseDuration(raw);
+  if (parsed.ok) return { minutes: parsed.minutes, raw, status: "valid" };
+  if (parsed.reason === "empty") return { minutes: null, raw, status: "empty" };
+  return { minutes: null, raw, status: "invalid" };
+}
+function DurationInput({
+  value,
+  onChange,
+  onStatusChange,
+  variant = "default",
+  displayStyle = "hm",
+  formatValue,
+  hint,
+  error,
+  id,
+  name,
+  placeholder,
+  disabled,
+  required,
+  autoFocus,
+  inputSize,
+  className,
+  inputClassName,
+  ariaLabel,
+  onBlur,
+  onKeyDown
+}) {
+  const t = useT();
+  const generatedId = React.useId();
+  const inputId = id ?? `duration-${generatedId}`;
+  const messageId = `${inputId}-message`;
+  const [draft, setDraft] = React.useState(null);
+  const format = React.useCallback(
+    (minutes) => formatValue ? formatValue(minutes) : formatDuration(minutes, displayStyle),
+    [displayStyle, formatValue]
+  );
+  const display = draft ?? (value === null || value === void 0 ? "" : format(value));
+  const state = React.useMemo(() => readStatus(display), [display]);
+  const invalid = state.status === "invalid";
+  const statusRef = React.useRef(null);
+  React.useEffect(() => {
+    if (statusRef.current === state.status) return;
+    statusRef.current = state.status;
+    onStatusChange?.(state);
+  }, [onStatusChange, state]);
+  const handleChange = React.useCallback(
+    (event) => {
+      const raw = event.target.value;
+      setDraft(raw);
+      const next = readStatus(raw);
+      onChange(next.minutes, next);
+    },
+    [onChange]
+  );
+  const handleBlur = React.useCallback(
+    (event) => {
+      const next = readStatus(event.target.value);
+      if (next.status !== "invalid") setDraft(null);
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+  const hintText = hint ?? t(
+    "staff.time_tracking.duration.hint",
+    "Understands 1h 40m, 1.5h, 90m, 1:40."
+  );
+  const parseErrorText = t(
+    "staff.time_tracking.duration.invalid",
+    "I don't understand that format. Try 1h 40m, 1.5h, 90m or 1:40."
+  );
+  const message = invalid ? parseErrorText : error ?? null;
+  const compact = variant === "compact";
+  const showHint = !compact && !message;
+  const describedBy = message || showHint ? messageId : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: inputId,
+        name,
+        size: inputSize ?? (compact ? "sm" : "default"),
+        type: "text",
+        inputMode: "text",
+        autoComplete: "off",
+        autoFocus,
+        disabled,
+        required,
+        value: display,
+        placeholder: placeholder ?? t("staff.time_tracking.duration.placeholder", "1h 30m"),
+        "aria-label": ariaLabel,
+        "aria-invalid": Boolean(message),
+        "aria-describedby": describedBy,
+        title: compact && message ? message : void 0,
+        inputClassName: cn("font-mono tabular-nums", inputClassName),
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onKeyDown
+      }
+    ),
+    message ? /* @__PURE__ */ jsx("p", { id: messageId, className: cn("text-xs text-status-error-text", compact && "sr-only"), role: "alert", children: message }) : showHint ? /* @__PURE__ */ jsx("p", { id: messageId, className: "text-xs text-muted-foreground", children: hintText }) : null
+  ] });
+}
+export {
+  DurationInput,
+  formatTrimmedDecimalDuration
+};
+//# sourceMappingURL=DurationInput.js.map

package/dist/modules/staff/lib/time-tracking-ui/DurationInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/staff/lib/time-tracking-ui/DurationInput.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { formatDuration, parseDuration, type DurationFormatStyle } from '../time-tracking/duration'\n\nexport type DurationInputStatus = 'valid' | 'empty' | 'invalid'\n\nexport type DurationInputState = {\n  minutes: number | null\n  raw: string\n  status: DurationInputStatus\n}\n\nexport type DurationInputProps = {\n  /** Parsed value in minutes. `null` means the field is empty. */\n  value: number | null\n  /**\n   * Fired on every keystroke with the parsed minutes (`null` while the text is\n   * empty or unparseable) and the validity signal, so a parent can disable Save\n   * without parsing the text again.\n   */\n  onChange: (minutes: number | null, state: DurationInputState) => void\n  /** Fired whenever the validity signal changes (mount included). */\n  onStatusChange?: (state: DurationInputState) => void\n  /**\n   * `compact` drops the format hint and moves the error into the input's\n   * `title` (plus a screen-reader-only message) \u2014 for the timesheet grid cells,\n   * where no hint fits.\n   */\n  variant?: 'default' | 'compact'\n  /** Canonical display style used once the text parses. Defaults to `hm`. */\n  displayStyle?: DurationFormatStyle\n  /** Overrides `displayStyle` entirely \u2014 lets a surface keep its own look. */\n  formatValue?: (minutes: number) => string\n  /** Replaces the default \"Understands 1h 40m, \u2026\" hint. */\n  hint?: string\n  /** External error (server/form level) shown when the text itself parses. */\n  error?: string\n  id?: string\n  name?: string\n  placeholder?: string\n  disabled?: boolean\n  required?: boolean\n  autoFocus?: boolean\n  inputSize?: 'sm' | 'default' | 'lg'\n  className?: string\n  inputClassName?: string\n  ariaLabel?: string\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void\n}\n\n/**\n * The timesheet grid renders `120` minutes as `2`, not as `2.00` \u2014 trailing\n * zeros stripped and an empty cell for zero. `formatDuration(\u2026, 'decimal')` is\n * fixed 2dp, so the grid keeps its look by passing this formatter.\n */\nexport function formatTrimmedDecimalDuration(minutes: number): string {\n  if (!Number.isFinite(minutes) || minutes <= 0) return ''\n  const hours = minutes / 60\n  if (hours % 1 === 0) return String(hours)\n  return hours.toFixed(2).replace(/0+$/, '').replace(/\\.$/, '')\n}\n\nfunction readStatus(raw: string): DurationInputState {\n  const parsed = parseDuration(raw)\n  if (parsed.ok) return { minutes: parsed.minutes, raw, status: 'valid' }\n  if (parsed.reason === 'empty') return { minutes: null, raw, status: 'empty' }\n  return { minutes: null, raw, status: 'invalid' }\n}\n\nexport function DurationInput({\n  value,\n  onChange,\n  onStatusChange,\n  variant = 'default',\n  displayStyle = 'hm',\n  formatValue,\n  hint,\n  error,\n  id,\n  name,\n  placeholder,\n  disabled,\n  required,\n  autoFocus,\n  inputSize,\n  className,\n  inputClassName,\n  ariaLabel,\n  onBlur,\n  onKeyDown,\n}: DurationInputProps) {\n  const t = useT()\n  const generatedId = React.useId()\n  const inputId = id ?? `duration-${generatedId}`\n  const messageId = `${inputId}-message`\n\n  /**\n   * `draft` holds exactly what the user typed and is the authority while it is\n   * a string; `null` hands the display back to the parsed `value`. Unparseable\n   * text therefore survives every re-render \u2014 it is never rewritten or dropped.\n   */\n  const [draft, setDraft] = React.useState<string | null>(null)\n\n  const format = React.useCallback(\n    (minutes: number) => (formatValue ? formatValue(minutes) : formatDuration(minutes, displayStyle)),\n    [displayStyle, formatValue],\n  )\n\n  const display = draft ?? (value === null || value === undefined ? '' : format(value))\n  const state = React.useMemo(() => readStatus(display), [display])\n  const invalid = state.status === 'invalid'\n\n  const statusRef = React.useRef<DurationInputStatus | null>(null)\n  React.useEffect(() => {\n    if (statusRef.current === state.status) return\n    statusRef.current = state.status\n    onStatusChange?.(state)\n  }, [onStatusChange, state])\n\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const raw = event.target.value\n      setDraft(raw)\n      const next = readStatus(raw)\n      onChange(next.minutes, next)\n    },\n    [onChange],\n  )\n\n  const handleBlur = React.useCallback(\n    (event: React.FocusEvent<HTMLInputElement>) => {\n      const next = readStatus(event.target.value)\n      // Only text that parsed may be rewritten; unparseable text stays put.\n      if (next.status !== 'invalid') setDraft(null)\n      onBlur?.(event)\n    },\n    [onBlur],\n  )\n\n  const hintText = hint ?? t(\n    'staff.time_tracking.duration.hint',\n    'Understands 1h 40m, 1.5h, 90m, 1:40.',\n  )\n  const parseErrorText = t(\n    'staff.time_tracking.duration.invalid',\n    \"I don't understand that format. Try 1h 40m, 1.5h, 90m or 1:40.\",\n  )\n  const message = invalid ? parseErrorText : error ?? null\n  const compact = variant === 'compact'\n  const showHint = !compact && !message\n  const describedBy = message || showHint ? messageId : undefined\n\n  return (\n    <div className={cn('flex w-full flex-col gap-1', className)}>\n      <Input\n        id={inputId}\n        name={name}\n        size={inputSize ?? (compact ? 'sm' : 'default')}\n        type=\"text\"\n        inputMode=\"text\"\n        autoComplete=\"off\"\n        autoFocus={autoFocus}\n        disabled={disabled}\n        required={required}\n        value={display}\n        placeholder={placeholder ?? t('staff.time_tracking.duration.placeholder', '1h 30m')}\n        aria-label={ariaLabel}\n        aria-invalid={Boolean(message)}\n        aria-describedby={describedBy}\n        title={compact && message ? message : undefined}\n        inputClassName={cn('font-mono tabular-nums', inputClassName)}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onKeyDown={onKeyDown}\n      />\n      {message ? (\n        <p id={messageId} className={cn('text-xs text-status-error-text', compact && 'sr-only')} role=\"alert\">\n          {message}\n        </p>\n      ) : showHint ? (\n        <p id={messageId} className=\"text-xs text-muted-foreground\">\n          {hintText}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n"],
+  "mappings": ";AA8JI,SACE,KADF;AA5JJ,YAAY,WAAW;AACvB,SAAS,aAAa;AACtB,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,gBAAgB,qBAA+C;AAsDjE,SAAS,6BAA6B,SAAyB;AACpE,MAAI,CAAC,OAAO,SAAS,OAAO,KAAK,WAAW,EAAG,QAAO;AACtD,QAAM,QAAQ,UAAU;AACxB,MAAI,QAAQ,MAAM,EAAG,QAAO,OAAO,KAAK;AACxC,SAAO,MAAM,QAAQ,CAAC,EAAE,QAAQ,OAAO,EAAE,EAAE,QAAQ,OAAO,EAAE;AAC9D;AAEA,SAAS,WAAW,KAAiC;AACnD,QAAM,SAAS,cAAc,GAAG;AAChC,MAAI,OAAO,GAAI,QAAO,EAAE,SAAS,OAAO,SAAS,KAAK,QAAQ,QAAQ;AACtE,MAAI,OAAO,WAAW,QAAS,QAAO,EAAE,SAAS,MAAM,KAAK,QAAQ,QAAQ;AAC5E,SAAO,EAAE,SAAS,MAAM,KAAK,QAAQ,UAAU;AACjD;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,IAAI,KAAK;AACf,QAAM,cAAc,MAAM,MAAM;AAChC,QAAM,UAAU,MAAM,YAAY,WAAW;AAC7C,QAAM,YAAY,GAAG,OAAO;AAO5B,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAwB,IAAI;AAE5D,QAAM,SAAS,MAAM;AAAA,IACnB,CAAC,YAAqB,cAAc,YAAY,OAAO,IAAI,eAAe,SAAS,YAAY;AAAA,IAC/F,CAAC,cAAc,WAAW;AAAA,EAC5B;AAEA,QAAM,UAAU,UAAU,UAAU,QAAQ,UAAU,SAAY,KAAK,OAAO,KAAK;AACnF,QAAM,QAAQ,MAAM,QAAQ,MAAM,WAAW,OAAO,GAAG,CAAC,OAAO,CAAC;AAChE,QAAM,UAAU,MAAM,WAAW;AAEjC,QAAM,YAAY,MAAM,OAAmC,IAAI;AAC/D,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,YAAY,MAAM,OAAQ;AACxC,cAAU,UAAU,MAAM;AAC1B,qBAAiB,KAAK;AAAA,EACxB,GAAG,CAAC,gBAAgB,KAAK,CAAC;AAE1B,QAAM,eAAe,MAAM;AAAA,IACzB,CAAC,UAA+C;AAC9C,YAAM,MAAM,MAAM,OAAO;AACzB,eAAS,GAAG;AACZ,YAAM,OAAO,WAAW,GAAG;AAC3B,eAAS,KAAK,SAAS,IAAI;AAAA,IAC7B;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,aAAa,MAAM;AAAA,IACvB,CAAC,UAA8C;AAC7C,YAAM,OAAO,WAAW,MAAM,OAAO,KAAK;AAE1C,UAAI,KAAK,WAAW,UAAW,UAAS,IAAI;AAC5C,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,WAAW,QAAQ;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,EACF;AACA,QAAM,UAAU,UAAU,iBAAiB,SAAS;AACpD,QAAM,UAAU,YAAY;AAC5B,QAAM,WAAW,CAAC,WAAW,CAAC;AAC9B,QAAM,cAAc,WAAW,WAAW,YAAY;AAEtD,SACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACxD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ;AAAA,QACA,MAAM,cAAc,UAAU,OAAO;AAAA,QACrC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,cAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,aAAa,eAAe,EAAE,4CAA4C,QAAQ;AAAA,QAClF,cAAY;AAAA,QACZ,gBAAc,QAAQ,OAAO;AAAA,QAC7B,oBAAkB;AAAA,QAClB,OAAO,WAAW,UAAU,UAAU;AAAA,QACtC,gBAAgB,GAAG,0BAA0B,cAAc;AAAA,QAC3D,UAAU;AAAA,QACV,QAAQ;AAAA,QACR;AAAA;AAAA,IACF;AAAA,IACC,UACC,oBAAC,OAAE,IAAI,WAAW,WAAW,GAAG,kCAAkC,WAAW,SAAS,GAAG,MAAK,SAC3F,mBACH,IACE,WACF,oBAAC,OAAE,IAAI,WAAW,WAAU,iCACzB,oBACH,IACE;AAAA,KACN;AAEJ;",
+  "names": []
+}

package/dist/modules/staff/lib/time-tracking-ui/EntryDetailsFields.js

@@ -0,0 +1,188 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Switch } from "@open-mercato/ui/primitives/switch";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { X } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { TagPicker, tagChipStyle } from "./TagPicker.js";
+function EntryDetailsFields({
+  value,
+  onChange,
+  tagOptions,
+  onCreateTag,
+  disabled,
+  idPrefix,
+  defaultExpanded
+}) {
+  const t = useT();
+  const [expanded, setExpanded] = React.useState(defaultExpanded === true);
+  const patch = React.useCallback(
+    (next) => onChange({ ...value, ...next }),
+    [onChange, value]
+  );
+  const assigned = React.useMemo(() => {
+    const byId = new Map(tagOptions.map((tag) => [tag.id, tag]));
+    return value.tagIds.map((id) => byId.get(id) ?? { id, label: id, color: null });
+  }, [tagOptions, value.tagIds]);
+  const available = React.useMemo(
+    () => tagOptions.filter((tag) => !value.tagIds.includes(tag.id)),
+    [tagOptions, value.tagIds]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        disabled,
+        "aria-expanded": expanded,
+        onClick: () => setExpanded((current) => !current),
+        "data-testid": `${idPrefix}-details-toggle`,
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: `size-3.5 transition-transform ${expanded ? "rotate-180" : ""}`,
+              "aria-hidden": "true"
+            }
+          ),
+          t("staff.time_tracking.taskDrawer.quickLog.details", "Details")
+        ]
+      }
+    ),
+    expanded ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-md border border-border bg-muted/40 p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", htmlFor: `${idPrefix}-description`, children: t("staff.time_tracking.entryDialog.description", "Description") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: `${idPrefix}-description`,
+            value: value.description,
+            disabled,
+            size: "sm",
+            maxLength: 2e3,
+            onChange: (event) => patch({ description: event.target.value }),
+            placeholder: t(
+              "staff.time_tracking.taskDrawer.quickLog.descriptionPlaceholder",
+              "What did the time go on?"
+            ),
+            "data-testid": `${idPrefix}-description`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", htmlFor: `${idPrefix}-date`, children: t("staff.time_tracking.entryDialog.date", "Date") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: `${idPrefix}-date`,
+              type: "date",
+              value: value.date,
+              disabled,
+              size: "sm",
+              className: "w-40",
+              onChange: (event) => patch({ date: event.target.value }),
+              "data-testid": `${idPrefix}-date`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", htmlFor: `${idPrefix}-start`, children: t("staff.time_tracking.entryDialog.start", "Start") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: `${idPrefix}-start`,
+              type: "time",
+              value: value.startClock,
+              disabled,
+              size: "sm",
+              className: "w-28",
+              inputClassName: "font-mono tabular-nums",
+              onChange: (event) => patch({ startClock: event.target.value }),
+              "data-testid": `${idPrefix}-start`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", htmlFor: `${idPrefix}-end`, children: t("staff.time_tracking.entryDialog.end", "End") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: `${idPrefix}-end`,
+              type: "time",
+              value: value.endClock,
+              disabled,
+              size: "sm",
+              className: "w-28",
+              inputClassName: "font-mono tabular-nums",
+              onChange: (event) => patch({ endClock: event.target.value }),
+              "data-testid": `${idPrefix}-end`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-1", children: [
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: value.isBillable,
+              disabled,
+              onCheckedChange: (next) => patch({ isBillable: next }),
+              "aria-label": t("staff.time_tracking.entryDialog.billable", "Billable"),
+              "data-testid": `${idPrefix}-billable`
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground", children: t("staff.time_tracking.entryDialog.billable", "Billable") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: t("staff.time_tracking.entryDialog.tags", "Tags") }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          assigned.map((tag) => /* @__PURE__ */ jsxs(Badge, { variant: "neutral", className: "gap-1", style: tagChipStyle(tag), children: [
+            tag.label,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": t("staff.time_tracking.entryDialog.removeTag", "Remove tag {label}", {
+                  label: tag.label
+                }),
+                onClick: () => patch({ tagIds: value.tagIds.filter((id) => id !== tag.id) }),
+                children: /* @__PURE__ */ jsx(X, { className: "size-3", "aria-hidden": "true" })
+              }
+            )
+          ] }, tag.id)),
+          /* @__PURE__ */ jsx(
+            TagPicker,
+            {
+              available,
+              disabled,
+              onAssign: (id) => patch({ tagIds: value.tagIds.includes(id) ? value.tagIds : [...value.tagIds, id] }),
+              onCreate: onCreateTag,
+              labels: {
+                add: t("staff.time_tracking.entryDialog.addTag", "Add tag"),
+                create: (name) => t("staff.time_tracking.entryDialog.createTag", 'Create "{name}"', { name }),
+                empty: t("staff.time_tracking.entryDialog.noTags", "No matching tag")
+              }
+            }
+          )
+        ] })
+      ] })
+    ] }) : null
+  ] });
+}
+function emptyEntryDetails(date, isBillable = true) {
+  return { description: "", date, startClock: "", endClock: "", isBillable, tagIds: [] };
+}
+var EntryDetailsFields_default = EntryDetailsFields;
+export {
+  EntryDetailsFields,
+  EntryDetailsFields_default as default,
+  emptyEntryDetails
+};
+//# sourceMappingURL=EntryDetailsFields.js.map

package/dist/modules/staff/lib/time-tracking-ui/EntryDetailsFields.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/staff/lib/time-tracking-ui/EntryDetailsFields.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Switch } from '@open-mercato/ui/primitives/switch'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { X } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { TagPicker, tagChipStyle } from './TagPicker'\nimport type { TagOption } from './timeEntryDialogState'\n\n/**\n * The optional half of logging time: description, date, clocks, billable, tags.\n *\n * Shared rather than duplicated, because three surfaces log time \u2014 the task\n * drawer, \"My work\" and the full dialog \u2014 and the first two had already drifted\n * into offering different subsets of the same fields. A person who learns that\n * the drawer can back-date an entry should not discover that the identical row on\n * \"My work\" cannot.\n *\n * Collapsed by default everywhere. The fast path is a duration and a task, and\n * that path stays one keystroke.\n */\n\nexport type EntryDetailsValue = {\n  description: string\n  date: string\n  startClock: string\n  endClock: string\n  isBillable: boolean\n  tagIds: string[]\n}\n\nexport type EntryDetailsFieldsProps = {\n  value: EntryDetailsValue\n  onChange: (next: EntryDetailsValue) => void\n  tagOptions: TagOption[]\n  onCreateTag: (label: string) => Promise<TagOption | null>\n  disabled?: boolean\n  idPrefix: string\n  /** Rendered open, for hosts where the details are the point rather than the exception. */\n  defaultExpanded?: boolean\n}\n\nexport function EntryDetailsFields({\n  value,\n  onChange,\n  tagOptions,\n  onCreateTag,\n  disabled,\n  idPrefix,\n  defaultExpanded,\n}: EntryDetailsFieldsProps) {\n  const t = useT()\n  const [expanded, setExpanded] = React.useState(defaultExpanded === true)\n\n  const patch = React.useCallback(\n    (next: Partial<EntryDetailsValue>) => onChange({ ...value, ...next }),\n    [onChange, value],\n  )\n\n  const assigned = React.useMemo(() => {\n    const byId = new Map(tagOptions.map((tag) => [tag.id, tag]))\n    return value.tagIds.map((id) => byId.get(id) ?? { id, label: id, color: null })\n  }, [tagOptions, value.tagIds])\n\n  const available = React.useMemo(\n    () => tagOptions.filter((tag) => !value.tagIds.includes(tag.id)),\n    [tagOptions, value.tagIds],\n  )\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        disabled={disabled}\n        aria-expanded={expanded}\n        onClick={() => setExpanded((current) => !current)}\n        data-testid={`${idPrefix}-details-toggle`}\n      >\n        <ChevronDown\n          className={`size-3.5 transition-transform ${expanded ? 'rotate-180' : ''}`}\n          aria-hidden=\"true\"\n        />\n        {t('staff.time_tracking.taskDrawer.quickLog.details', 'Details')}\n      </Button>\n\n      {expanded ? (\n        <div className=\"flex flex-col gap-3 rounded-md border border-border bg-muted/40 p-3\">\n          <div className=\"flex flex-col gap-1\">\n            <label className=\"text-xs font-medium text-muted-foreground\" htmlFor={`${idPrefix}-description`}>\n              {t('staff.time_tracking.entryDialog.description', 'Description')}\n            </label>\n            <Input\n              id={`${idPrefix}-description`}\n              value={value.description}\n              disabled={disabled}\n              size=\"sm\"\n              maxLength={2000}\n              onChange={(event) => patch({ description: event.target.value })}\n              placeholder={t(\n                'staff.time_tracking.taskDrawer.quickLog.descriptionPlaceholder',\n                'What did the time go on?',\n              )}\n              data-testid={`${idPrefix}-description`}\n            />\n          </div>\n\n          <div className=\"flex flex-wrap items-end gap-3\">\n            <div className=\"flex flex-col gap-1\">\n              <label className=\"text-xs font-medium text-muted-foreground\" htmlFor={`${idPrefix}-date`}>\n                {t('staff.time_tracking.entryDialog.date', 'Date')}\n              </label>\n              <Input\n                id={`${idPrefix}-date`}\n                type=\"date\"\n                value={value.date}\n                disabled={disabled}\n                size=\"sm\"\n                className=\"w-40\"\n                onChange={(event) => patch({ date: event.target.value })}\n                data-testid={`${idPrefix}-date`}\n              />\n            </div>\n            {/*\n              * Optional and paired. A start with no end is not a partial record \u2014\n              * it is how the entries list identifies a *running timer* \u2014 so the\n              * caller derives the missing half from the duration before saving.\n              */}\n            <div className=\"flex flex-col gap-1\">\n              <label className=\"text-xs font-medium text-muted-foreground\" htmlFor={`${idPrefix}-start`}>\n                {t('staff.time_tracking.entryDialog.start', 'Start')}\n              </label>\n              <Input\n                id={`${idPrefix}-start`}\n                type=\"time\"\n                value={value.startClock}\n                disabled={disabled}\n                size=\"sm\"\n                className=\"w-28\"\n                inputClassName=\"font-mono tabular-nums\"\n                onChange={(event) => patch({ startClock: event.target.value })}\n                data-testid={`${idPrefix}-start`}\n              />\n            </div>\n            <div className=\"flex flex-col gap-1\">\n              <label className=\"text-xs font-medium text-muted-foreground\" htmlFor={`${idPrefix}-end`}>\n                {t('staff.time_tracking.entryDialog.end', 'End')}\n              </label>\n              <Input\n                id={`${idPrefix}-end`}\n                type=\"time\"\n                value={value.endClock}\n                disabled={disabled}\n                size=\"sm\"\n                className=\"w-28\"\n                inputClassName=\"font-mono tabular-nums\"\n                onChange={(event) => patch({ endClock: event.target.value })}\n                data-testid={`${idPrefix}-end`}\n              />\n            </div>\n            <div className=\"flex items-center gap-2 pb-1\">\n              <Switch\n                checked={value.isBillable}\n                disabled={disabled}\n                onCheckedChange={(next) => patch({ isBillable: next })}\n                aria-label={t('staff.time_tracking.entryDialog.billable', 'Billable')}\n                data-testid={`${idPrefix}-billable`}\n              />\n              <span className=\"text-xs text-foreground\">\n                {t('staff.time_tracking.entryDialog.billable', 'Billable')}\n              </span>\n            </div>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <span className=\"text-xs font-medium text-muted-foreground\">\n              {t('staff.time_tracking.entryDialog.tags', 'Tags')}\n            </span>\n            <div className=\"flex flex-wrap items-center gap-2\">\n              {assigned.map((tag) => (\n                <Badge key={tag.id} variant=\"neutral\" className=\"gap-1\" style={tagChipStyle(tag)}>\n                  {tag.label}\n                  <button\n                    type=\"button\"\n                    aria-label={t('staff.time_tracking.entryDialog.removeTag', 'Remove tag {label}', {\n                      label: tag.label,\n                    })}\n                    onClick={() => patch({ tagIds: value.tagIds.filter((id) => id !== tag.id) })}\n                  >\n                    <X className=\"size-3\" aria-hidden=\"true\" />\n                  </button>\n                </Badge>\n              ))}\n              <TagPicker\n                available={available}\n                disabled={disabled}\n                onAssign={(id) =>\n                  patch({ tagIds: value.tagIds.includes(id) ? value.tagIds : [...value.tagIds, id] })\n                }\n                onCreate={onCreateTag}\n                labels={{\n                  add: t('staff.time_tracking.entryDialog.addTag', 'Add tag'),\n                  create: (name) => t('staff.time_tracking.entryDialog.createTag', 'Create \"{name}\"', { name }),\n                  empty: t('staff.time_tracking.entryDialog.noTags', 'No matching tag'),\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport function emptyEntryDetails(date: string, isBillable = true): EntryDetailsValue {\n  return { description: '', date, startClock: '', endClock: '', isBillable, tagIds: [] }\n}\n\nexport default EntryDetailsFields\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/staff/lib/time-tracking-ui/EntryFilterBar.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { Button } from "@open-mercato/ui/primitives/button";
+function EntryFilterPresets({
+  presets,
+  activePresetId,
+  onApplyPreset,
+  disabled
+}) {
+  if (presets.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", "data-testid": "entry-filter-presets", children: presets.map((preset) => {
+    const active = preset.id === activePresetId;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        variant: active ? "default" : "outline",
+        disabled,
+        className: "h-7 rounded-full px-3 text-xs",
+        "aria-pressed": active,
+        onClick: () => onApplyPreset(preset),
+        "data-testid": `entry-filter-preset-${preset.id}`,
+        children: preset.label
+      },
+      preset.id
+    );
+  }) });
+}
+function EntryFilterChips({
+  chips,
+  onRemove,
+  onClearAll,
+  clearAllLabel,
+  removeLabel
+}) {
+  if (chips.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", "data-testid": "entry-filter-chips", children: [
+    chips.map((chip) => /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "inline-flex h-6 items-center gap-1.5 rounded-sm border border-status-info-border bg-status-info-bg py-0 pl-2 pr-1 text-xs text-status-info-text",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-status-info-text/80", children: chip.label }),
+          /* @__PURE__ */ jsx("b", { className: "font-semibold", children: chip.value }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": removeLabel(chip.label),
+              className: "inline-flex size-4 items-center justify-center rounded-sm opacity-70 hover:opacity-100",
+              onClick: () => onRemove(chip.id),
+              "data-testid": `entry-filter-chip-remove-${chip.id}`,
+              children: /* @__PURE__ */ jsx(X, { className: "size-3", "aria-hidden": "true" })
+            }
+          )
+        ]
+      },
+      chip.id
+    )),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "text-xs text-muted-foreground underline underline-offset-2",
+        onClick: onClearAll,
+        "data-testid": "entry-filter-chips-clear",
+        children: clearAllLabel
+      }
+    )
+  ] });
+}
+function matchActivePreset(values, presets, ctx) {
+  for (const preset of presets) {
+    const built = preset.build(ctx);
+    const keys = Object.keys(built);
+    if (keys.length === 0) continue;
+    const matches = keys.every((key) => JSON.stringify(values[key]) === JSON.stringify(built[key]));
+    if (matches) return preset.id;
+  }
+  return null;
+}
+export {
+  EntryFilterChips,
+  EntryFilterPresets,
+  matchActivePreset
+};
+//# sourceMappingURL=EntryFilterBar.js.map

package/dist/modules/staff/lib/time-tracking-ui/EntryFilterBar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/staff/lib/time-tracking-ui/EntryFilterBar.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { X } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport type { FilterValues } from '@open-mercato/ui/backend/FilterOverlay'\n\n/**\n * Presets and applied-filter chips for the time-entry list.\n *\n * `QuickFilters` and `ActiveFilterChips` in `packages/ui/src/backend/filters/`\n * do exactly this job, but both are typed against `AdvancedFilterTree`, and this\n * list is driven by flat `FilterValues` that map straight onto query parameters.\n * Adopting them wholesale would mean migrating the entries route to a serialised\n * filter tree \u2014 a much larger change than the one this is, and one that touches\n * the API contract rather than the page.\n *\n * So this is deliberately the small local version, shaped to slot into\n * `DataTable`'s own `activeFilterChips` prop, which takes any node precisely so a\n * page can bring its own. The empty state is the shared `FilteredEmptyResults`,\n * wired through `filterAwareEmptyState` \u2014 no local copy of that.\n */\n\nexport type EntryFilterPreset = {\n  id: string\n  label: string\n  /** Returns the values this preset applies, merged over the current period. */\n  build: (ctx: { staffMemberId: string | null; today: string }) => FilterValues\n}\n\nexport type AppliedFilterChip = {\n  id: string\n  label: string\n  value: string\n}\n\nexport type EntryFilterBarProps = {\n  presets: EntryFilterPreset[]\n  activePresetId: string | null\n  onApplyPreset: (preset: EntryFilterPreset) => void\n  disabled?: boolean\n}\n\nexport function EntryFilterPresets({\n  presets,\n  activePresetId,\n  onApplyPreset,\n  disabled,\n}: EntryFilterBarProps) {\n  if (presets.length === 0) return null\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\" data-testid=\"entry-filter-presets\">\n      {presets.map((preset) => {\n        const active = preset.id === activePresetId\n        return (\n          <Button\n            key={preset.id}\n            type=\"button\"\n            size=\"sm\"\n            variant={active ? 'default' : 'outline'}\n            disabled={disabled}\n            className=\"h-7 rounded-full px-3 text-xs\"\n            aria-pressed={active}\n            onClick={() => onApplyPreset(preset)}\n            data-testid={`entry-filter-preset-${preset.id}`}\n          >\n            {preset.label}\n          </Button>\n        )\n      })}\n    </div>\n  )\n}\n\nexport type EntryFilterChipsProps = {\n  chips: AppliedFilterChip[]\n  onRemove: (id: string) => void\n  onClearAll: () => void\n  clearAllLabel: string\n  removeLabel: (label: string) => string\n}\n\nexport function EntryFilterChips({\n  chips,\n  onRemove,\n  onClearAll,\n  clearAllLabel,\n  removeLabel,\n}: EntryFilterChipsProps) {\n  if (chips.length === 0) return null\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\" data-testid=\"entry-filter-chips\">\n      {chips.map((chip) => (\n        <span\n          key={chip.id}\n          className=\"inline-flex h-6 items-center gap-1.5 rounded-sm border border-status-info-border bg-status-info-bg py-0 pl-2 pr-1 text-xs text-status-info-text\"\n        >\n          <span className=\"text-status-info-text/80\">{chip.label}</span>\n          <b className=\"font-semibold\">{chip.value}</b>\n          <button\n            type=\"button\"\n            aria-label={removeLabel(chip.label)}\n            className=\"inline-flex size-4 items-center justify-center rounded-sm opacity-70 hover:opacity-100\"\n            onClick={() => onRemove(chip.id)}\n            data-testid={`entry-filter-chip-remove-${chip.id}`}\n          >\n            <X className=\"size-3\" aria-hidden=\"true\" />\n          </button>\n        </span>\n      ))}\n      <button\n        type=\"button\"\n        className=\"text-xs text-muted-foreground underline underline-offset-2\"\n        onClick={onClearAll}\n        data-testid=\"entry-filter-chips-clear\"\n      >\n        {clearAllLabel}\n      </button>\n    </div>\n  )\n}\n\n/**\n * Which preset, if any, the current values correspond to.\n *\n * Compared on the keys the preset sets rather than on the whole object, so a\n * preset stays lit when the reader narrows further \u2014 \"Mine, this week\" plus a\n * project is still \"Mine, this week\", and un-lighting it there would suggest the\n * preset had been turned off.\n */\nexport function matchActivePreset(\n  values: FilterValues,\n  presets: EntryFilterPreset[],\n  ctx: { staffMemberId: string | null; today: string },\n): string | null {\n  for (const preset of presets) {\n    const built = preset.build(ctx)\n    const keys = Object.keys(built)\n    if (keys.length === 0) continue\n    const matches = keys.every((key) => JSON.stringify(values[key]) === JSON.stringify(built[key]))\n    if (matches) return preset.id\n  }\n  return null\n}\n"],
+  "mappings": ";AAuDU,cAsCF,YAtCE;AApDV,SAAS,SAAS;AAClB,SAAS,cAAc;AAuChB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,oBAAC,SAAI,WAAU,qCAAoC,eAAY,wBAC5D,kBAAQ,IAAI,CAAC,WAAW;AACvB,UAAM,SAAS,OAAO,OAAO;AAC7B,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAS,SAAS,YAAY;AAAA,QAC9B;AAAA,QACA,WAAU;AAAA,QACV,gBAAc;AAAA,QACd,SAAS,MAAM,cAAc,MAAM;AAAA,QACnC,eAAa,uBAAuB,OAAO,EAAE;AAAA,QAE5C,iBAAO;AAAA;AAAA,MAVH,OAAO;AAAA,IAWd;AAAA,EAEJ,CAAC,GACH;AAEJ;AAUO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACE,qBAAC,SAAI,WAAU,qCAAoC,eAAY,sBAC5D;AAAA,UAAM,IAAI,CAAC,SACV;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QAEV;AAAA,8BAAC,UAAK,WAAU,4BAA4B,eAAK,OAAM;AAAA,UACvD,oBAAC,OAAE,WAAU,iBAAiB,eAAK,OAAM;AAAA,UACzC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,YAAY,KAAK,KAAK;AAAA,cAClC,WAAU;AAAA,cACV,SAAS,MAAM,SAAS,KAAK,EAAE;AAAA,cAC/B,eAAa,4BAA4B,KAAK,EAAE;AAAA,cAEhD,8BAAC,KAAE,WAAU,UAAS,eAAY,QAAO;AAAA;AAAA,UAC3C;AAAA;AAAA;AAAA,MAbK,KAAK;AAAA,IAcZ,CACD;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS;AAAA,QACT,eAAY;AAAA,QAEX;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAUO,SAAS,kBACd,QACA,SACA,KACe;AACf,aAAW,UAAU,SAAS;AAC5B,UAAM,QAAQ,OAAO,MAAM,GAAG;AAC9B,UAAM,OAAO,OAAO,KAAK,KAAK;AAC9B,QAAI,KAAK,WAAW,EAAG;AACvB,UAAM,UAAU,KAAK,MAAM,CAAC,QAAQ,KAAK,UAAU,OAAO,GAAG,CAAC,MAAM,KAAK,UAAU,MAAM,GAAG,CAAC,CAAC;AAC9F,QAAI,QAAS,QAAO,OAAO;AAAA,EAC7B;AACA,SAAO;AACT;",
+  "names": []
+}