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

package/src/modules/staff/lib/time-tracking-ui/CustomerPicker.tsx

@@ -0,0 +1,427 @@
+"use client"
+
+import * as React from 'react'
+import { Building2, Plus, UserRound } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { LookupSelect, type LookupSelectItem } from '@open-mercato/ui/backend/inputs/LookupSelect'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { createCrud } from '@open-mercato/ui/backend/utils/crud'
+import { useOrganizationScopeDetail } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type CustomerKind = 'person' | 'company'
+
+/**
+ * D-9: the project points at `customers.customer_entities`, the supertype, so a
+ * client may be a company or a sole trader without a second code path. The
+ * customers module exposes no supertype list route — `people` and `companies`
+ * both query the supertype table but hard-filter by `kind` — so the picker
+ * merges the two calls and re-attaches the kind the responses strip.
+ */
+export type CustomerSelection = {
+  id: string
+  name: string
+  kind: CustomerKind
+  email?: string | null
+  taxId?: string | null
+}
+
+type CustomerRow = {
+  id?: unknown
+  display_name?: unknown
+  displayName?: unknown
+  primary_email?: unknown
+  primaryEmail?: unknown
+  domain?: unknown
+  legal_name?: unknown
+  tax_id?: unknown
+  taxId?: unknown
+  vat_id?: unknown
+}
+
+const PAGE_SIZE = 20
+
+function readString(value: unknown): string | null {
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : null
+}
+
+function readTaxId(row: CustomerRow): string | null {
+  return readString(row.taxId) ?? readString(row.tax_id) ?? readString(row.vat_id)
+}
+
+function toSelection(row: CustomerRow, kind: CustomerKind): CustomerSelection | null {
+  const id = readString(row.id)
+  if (!id) return null
+  const name =
+    readString(row.display_name) ??
+    readString(row.displayName) ??
+    readString(row.legal_name) ??
+    readString(row.primary_email) ??
+    id
+  return {
+    id,
+    name,
+    kind,
+    email: readString(row.primary_email) ?? readString(row.primaryEmail),
+    taxId: readTaxId(row),
+  }
+}
+
+async function fetchCustomerPage(
+  resource: 'people' | 'companies',
+  params: Record<string, string>,
+): Promise<CustomerSelection[]> {
+  const kind: CustomerKind = resource === 'people' ? 'person' : 'company'
+  const search = new URLSearchParams({ page: '1', pageSize: String(PAGE_SIZE), ...params })
+  try {
+    const res = await apiCall<{ items?: CustomerRow[] }>(`/api/customers/${resource}?${search.toString()}`)
+    const items = Array.isArray(res.result?.items) ? res.result.items : []
+    return items
+      .map((row) => toSelection(row, kind))
+      .filter((row): row is CustomerSelection => row !== null)
+  } catch {
+    // The customers module is an optional peer: a missing or forbidden route
+    // degrades this side of the picker to "no results", never to a hard error.
+    return []
+  }
+}
+
+export async function searchCustomers(query: string): Promise<CustomerSelection[]> {
+  const trimmed = query.trim()
+  const params: Record<string, string> = trimmed.length > 0 ? { search: trimmed } : {}
+  const [people, companies] = await Promise.all([
+    fetchCustomerPage('people', params),
+    fetchCustomerPage('companies', params),
+  ])
+  return [...companies, ...people]
+}
+
+export async function resolveCustomerById(customerId: string): Promise<CustomerSelection | null> {
+  const [people, companies] = await Promise.all([
+    fetchCustomerPage('people', { id: customerId, pageSize: '1' }),
+    fetchCustomerPage('companies', { id: customerId, pageSize: '1' }),
+  ])
+  return companies[0] ?? people[0] ?? null
+}
+
+type NewCustomerDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onCreated: (customer: CustomerSelection) => void
+}
+
+function NewCustomerDialog({ open, onOpenChange, onCreated }: NewCustomerDialogProps) {
+  const t = useT()
+  const { organizationId } = useOrganizationScopeDetail()
+  const [kind, setKind] = React.useState<CustomerKind>('company')
+  const [displayName, setDisplayName] = React.useState('')
+  const [firstName, setFirstName] = React.useState('')
+  const [lastName, setLastName] = React.useState('')
+  const [email, setEmail] = React.useState('')
+  const [saving, setSaving] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    if (open) return
+    setKind('company')
+    setDisplayName('')
+    setFirstName('')
+    setLastName('')
+    setEmail('')
+    setError(null)
+    setSaving(false)
+  }, [open])
+
+  const submit = React.useCallback(async () => {
+    if (saving) return
+    const trimmedEmail = email.trim()
+    const resource = kind === 'company' ? 'companies' : 'people'
+    const name =
+      kind === 'company'
+        ? displayName.trim()
+        : [firstName.trim(), lastName.trim()].filter(Boolean).join(' ')
+    if (kind === 'company' && !displayName.trim()) {
+      setError(t('staff.time_tracking.projects.customer.new.nameRequired', 'A name is required.'))
+      return
+    }
+    if (kind === 'person' && (!firstName.trim() || !lastName.trim())) {
+      setError(t('staff.time_tracking.projects.customer.new.nameRequired', 'A name is required.'))
+      return
+    }
+    const payload: Record<string, unknown> = organizationId ? { organizationId } : {}
+    if (kind === 'company') {
+      payload.displayName = displayName.trim()
+    } else {
+      payload.firstName = firstName.trim()
+      payload.lastName = lastName.trim()
+      payload.displayName = name
+    }
+    if (trimmedEmail) payload.primaryEmail = trimmedEmail
+
+    setSaving(true)
+    setError(null)
+    try {
+      const { result } = await createCrud<{ id?: string; entityId?: string }>(
+        `customers/${resource}`,
+        payload,
+        { errorMessage: t('staff.time_tracking.projects.customer.new.error', 'Failed to create the customer.') },
+      )
+      const id = readString(result?.entityId) ?? readString(result?.id)
+      if (!id) {
+        setError(t('staff.time_tracking.projects.customer.new.error', 'Failed to create the customer.'))
+        return
+      }
+      onCreated({ id, name, kind, email: trimmedEmail || null, taxId: null })
+      onOpenChange(false)
+    } catch (err) {
+      setError(
+        err instanceof Error && err.message
+          ? err.message
+          : t('staff.time_tracking.projects.customer.new.error', 'Failed to create the customer.'),
+      )
+    } finally {
+      setSaving(false)
+    }
+  }, [displayName, email, firstName, kind, lastName, onCreated, onOpenChange, organizationId, saving, t])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+        event.preventDefault()
+        void submit()
+      }
+    },
+    [submit],
+  )
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md" onKeyDown={handleKeyDown}>
+        <DialogHeader>
+          <DialogTitle>{t('staff.time_tracking.projects.customer.new.title', 'New customer')}</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-4">
+          <SegmentedControl
+            value={kind}
+            onValueChange={(next) => setKind(next as CustomerKind)}
+            aria-label={t('staff.time_tracking.projects.customer.new.kind', 'Customer type')}
+          >
+            <SegmentedControlItem value="company">
+              {t('staff.time_tracking.projects.customer.new.company', 'Company')}
+            </SegmentedControlItem>
+            <SegmentedControlItem value="person">
+              {t('staff.time_tracking.projects.customer.new.person', 'Sole trader')}
+            </SegmentedControlItem>
+          </SegmentedControl>
+
+          {kind === 'company' ? (
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="tt-new-customer-name">
+                {t('staff.time_tracking.projects.customer.new.name', 'Name')}
+              </Label>
+              <Input
+                id="tt-new-customer-name"
+                value={displayName}
+                autoFocus
+                onChange={(event) => setDisplayName(event.target.value)}
+              />
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="tt-new-customer-first">
+                  {t('staff.time_tracking.projects.customer.new.firstName', 'First name')}
+                </Label>
+                <Input
+                  id="tt-new-customer-first"
+                  value={firstName}
+                  autoFocus
+                  onChange={(event) => setFirstName(event.target.value)}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="tt-new-customer-last">
+                  {t('staff.time_tracking.projects.customer.new.lastName', 'Last name')}
+                </Label>
+                <Input
+                  id="tt-new-customer-last"
+                  value={lastName}
+                  onChange={(event) => setLastName(event.target.value)}
+                />
+              </div>
+            </div>
+          )}
+
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="tt-new-customer-email">
+              {t('staff.time_tracking.projects.customer.new.email', 'Email')}
+            </Label>
+            <Input
+              id="tt-new-customer-email"
+              type="email"
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+            />
+          </div>
+
+          {error ? <p className="text-sm text-status-error-text">{error}</p> : null}
+        </div>
+        <DialogFooter>
+          <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+            {t('staff.time_tracking.projects.form.actions.cancel', 'Cancel')}
+          </Button>
+          <Button type="button" onClick={() => void submit()} disabled={saving}>
+            {t('staff.time_tracking.projects.customer.new.submit', 'Create customer')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export type CustomerPickerProps = {
+  value: string | null
+  snapshot?: CustomerSelection | null
+  disabled?: boolean
+  onChange: (customer: CustomerSelection | null) => void
+}
+
+export function CustomerPicker({ value, snapshot, disabled, onChange }: CustomerPickerProps) {
+  const t = useT()
+  const [known, setKnown] = React.useState<Map<string, CustomerSelection>>(() => {
+    const initial = new Map<string, CustomerSelection>()
+    if (snapshot?.id) initial.set(snapshot.id, snapshot)
+    return initial
+  })
+  const [dialogOpen, setDialogOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!value || known.has(value)) return
+    let cancelled = false
+    void resolveCustomerById(value).then((resolved) => {
+      if (cancelled || !resolved) return
+      setKnown((prev) => new Map(prev).set(resolved.id, resolved))
+    })
+    return () => { cancelled = true }
+  }, [value, known])
+
+  const fetchItems = React.useCallback(async (query: string): Promise<LookupSelectItem[]> => {
+    const results = await searchCustomers(query)
+    setKnown((prev) => {
+      const next = new Map(prev)
+      results.forEach((row) => next.set(row.id, row))
+      return next
+    })
+    return results.map((row) => ({
+      id: row.id,
+      title: row.name,
+      subtitle: row.email ?? null,
+      icon: row.kind === 'company'
+        ? <Building2 className="h-4 w-4" aria-hidden />
+        : <UserRound className="h-4 w-4" aria-hidden />,
+      badge: row.kind === 'company'
+        ? t('staff.time_tracking.projects.customer.kind.company', 'Company')
+        : t('staff.time_tracking.projects.customer.kind.person', 'Sole trader'),
+    }))
+  }, [t])
+
+  const handleChange = React.useCallback(
+    (next: string | null) => {
+      if (!next) {
+        onChange(null)
+        return
+      }
+      onChange(known.get(next) ?? { id: next, name: next, kind: 'company' })
+    },
+    [known, onChange],
+  )
+
+  const handleCreated = React.useCallback(
+    (customer: CustomerSelection) => {
+      setKnown((prev) => new Map(prev).set(customer.id, customer))
+      onChange(customer)
+    },
+    [onChange],
+  )
+
+  return (
+    <div className="flex flex-col gap-2">
+      <LookupSelect
+        value={value}
+        onChange={handleChange}
+        fetchItems={fetchItems}
+        disabled={disabled}
+        defaultOpen={false}
+        minQuery={2}
+        placeholder={t('staff.time_tracking.projects.customer.placeholder', 'Search customers…')}
+        selectedHintLabel={(id) => known.get(id)?.name ?? id}
+        actionSlot={(
+          <Button type="button" variant="outline" size="sm" onClick={() => setDialogOpen(true)}>
+            <Plus className="h-4 w-4" aria-hidden />
+            {t('staff.time_tracking.projects.customer.new.trigger', 'New customer')}
+          </Button>
+        )}
+      />
+      <NewCustomerDialog open={dialogOpen} onOpenChange={setDialogOpen} onCreated={handleCreated} />
+    </div>
+  )
+}
+
+export type CustomerPickerBindingProps = {
+  value: unknown
+  values?: Record<string, unknown>
+  disabled?: boolean
+  setValue: (value: unknown) => void
+  setFormValue?: (id: string, value: unknown) => void
+}
+
+/**
+ * Writes the FK plus the snapshot fields the project keeps alongside it, so the
+ * projects list and the report header resolve a customer name without joining
+ * the customers module (D-9, cross-module FK-id + snapshot rule).
+ */
+export function CustomerPickerBinding({
+  value,
+  values,
+  disabled,
+  setValue,
+  setFormValue,
+}: CustomerPickerBindingProps) {
+  const customerId = typeof value === 'string' && value.length > 0 ? value : null
+  const snapshot = React.useMemo<CustomerSelection | null>(() => {
+    const name = typeof values?.customerName === 'string' ? values.customerName : null
+    if (!customerId || !name) return null
+    const kind = values?.customerKind === 'person' ? 'person' : 'company'
+    const taxId = typeof values?.customerTaxId === 'string' ? values.customerTaxId : null
+    return { id: customerId, name, kind, taxId }
+  }, [customerId, values?.customerKind, values?.customerName, values?.customerTaxId])
+
+  const handleChange = React.useCallback(
+    (next: CustomerSelection | null) => {
+      setValue(next?.id ?? null)
+      setFormValue?.('customerName', next?.name ?? null)
+      setFormValue?.('customerKind', next?.kind ?? null)
+      setFormValue?.('customerTaxId', next?.taxId ?? null)
+    },
+    [setFormValue, setValue],
+  )
+
+  return (
+    <CustomerPicker
+      value={customerId}
+      snapshot={snapshot}
+      disabled={disabled}
+      onChange={handleChange}
+    />
+  )
+}

package/src/modules/staff/lib/time-tracking-ui/DurationInput.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+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, type DurationFormatStyle } from '../time-tracking/duration'
+
+export type DurationInputStatus = 'valid' | 'empty' | 'invalid'
+
+export type DurationInputState = {
+  minutes: number | null
+  raw: string
+  status: DurationInputStatus
+}
+
+export type DurationInputProps = {
+  /** Parsed value in minutes. `null` means the field is empty. */
+  value: number | null
+  /**
+   * Fired on every keystroke with the parsed minutes (`null` while the text is
+   * empty or unparseable) and the validity signal, so a parent can disable Save
+   * without parsing the text again.
+   */
+  onChange: (minutes: number | null, state: DurationInputState) => void
+  /** Fired whenever the validity signal changes (mount included). */
+  onStatusChange?: (state: DurationInputState) => void
+  /**
+   * `compact` drops the format hint and moves the error into the input's
+   * `title` (plus a screen-reader-only message) — for the timesheet grid cells,
+   * where no hint fits.
+   */
+  variant?: 'default' | 'compact'
+  /** Canonical display style used once the text parses. Defaults to `hm`. */
+  displayStyle?: DurationFormatStyle
+  /** Overrides `displayStyle` entirely — lets a surface keep its own look. */
+  formatValue?: (minutes: number) => string
+  /** Replaces the default "Understands 1h 40m, …" hint. */
+  hint?: string
+  /** External error (server/form level) shown when the text itself parses. */
+  error?: string
+  id?: string
+  name?: string
+  placeholder?: string
+  disabled?: boolean
+  required?: boolean
+  autoFocus?: boolean
+  inputSize?: 'sm' | 'default' | 'lg'
+  className?: string
+  inputClassName?: string
+  ariaLabel?: string
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+}
+
+/**
+ * The timesheet grid renders `120` minutes as `2`, not as `2.00` — trailing
+ * zeros stripped and an empty cell for zero. `formatDuration(…, 'decimal')` is
+ * fixed 2dp, so the grid keeps its look by passing this formatter.
+ */
+export function formatTrimmedDecimalDuration(minutes: number): string {
+  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: string): DurationInputState {
+  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' }
+}
+
+export function DurationInput({
+  value,
+  onChange,
+  onStatusChange,
+  variant = 'default',
+  displayStyle = 'hm',
+  formatValue,
+  hint,
+  error,
+  id,
+  name,
+  placeholder,
+  disabled,
+  required,
+  autoFocus,
+  inputSize,
+  className,
+  inputClassName,
+  ariaLabel,
+  onBlur,
+  onKeyDown,
+}: DurationInputProps) {
+  const t = useT()
+  const generatedId = React.useId()
+  const inputId = id ?? `duration-${generatedId}`
+  const messageId = `${inputId}-message`
+
+  /**
+   * `draft` holds exactly what the user typed and is the authority while it is
+   * a string; `null` hands the display back to the parsed `value`. Unparseable
+   * text therefore survives every re-render — it is never rewritten or dropped.
+   */
+  const [draft, setDraft] = React.useState<string | null>(null)
+
+  const format = React.useCallback(
+    (minutes: number) => (formatValue ? formatValue(minutes) : formatDuration(minutes, displayStyle)),
+    [displayStyle, formatValue],
+  )
+
+  const display = draft ?? (value === null || value === undefined ? '' : format(value))
+  const state = React.useMemo(() => readStatus(display), [display])
+  const invalid = state.status === 'invalid'
+
+  const statusRef = React.useRef<DurationInputStatus | null>(null)
+  React.useEffect(() => {
+    if (statusRef.current === state.status) return
+    statusRef.current = state.status
+    onStatusChange?.(state)
+  }, [onStatusChange, state])
+
+  const handleChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const raw = event.target.value
+      setDraft(raw)
+      const next = readStatus(raw)
+      onChange(next.minutes, next)
+    },
+    [onChange],
+  )
+
+  const handleBlur = React.useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      const next = readStatus(event.target.value)
+      // Only text that parsed may be rewritten; unparseable text stays put.
+      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 : undefined
+
+  return (
+    <div className={cn('flex w-full flex-col gap-1', className)}>
+      <Input
+        id={inputId}
+        name={name}
+        size={inputSize ?? (compact ? 'sm' : 'default')}
+        type="text"
+        inputMode="text"
+        autoComplete="off"
+        autoFocus={autoFocus}
+        disabled={disabled}
+        required={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 : undefined}
+        inputClassName={cn('font-mono tabular-nums', inputClassName)}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onKeyDown={onKeyDown}
+      />
+      {message ? (
+        <p id={messageId} className={cn('text-xs text-status-error-text', compact && 'sr-only')} role="alert">
+          {message}
+        </p>
+      ) : showHint ? (
+        <p id={messageId} className="text-xs text-muted-foreground">
+          {hintText}
+        </p>
+      ) : null}
+    </div>
+  )
+}