@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/ReportSheet.tsx

@@ -0,0 +1,357 @@
+"use client"
+
+/**
+ * Screen 14 — the sheet the client sees.
+ *
+ * It is deliberately a dumb renderer: every number arrives already computed by
+ * `POST .../reports/preview` or `GET .../reports/[id]/sheet`, which own D-7. The
+ * component adds nothing up, because a client-facing total computed in two
+ * places is a client-facing total that will eventually disagree with itself.
+ *
+ * The four mockup notes it implements:
+ *
+ *  1. **Non-billable time gets its own group at zero** rather than being
+ *     omitted. The client sees the full effort and the total stays unambiguous
+ *     (US-G2). A dash, never `0,00`, in the rate and amount cells — a zero there
+ *     would read as free work rather than as work outside the invoice.
+ *  2. **A line carrying a rate override is marked** and prints the rate actually
+ *     applied, not the project default (US-F2). Two lines with the same hours
+ *     and different amounts look like a bug otherwise.
+ *  3. **Child tasks roll up into their parent line and expand underneath**
+ *     (D-2), so the sheet reads at the level the client contracted for while the
+ *     detail stays one click away.
+ *  4. **The grand total spells out the rounding rule** it was produced under, so
+ *     an amount with an odd grosz ending is explained on the page rather than in
+ *     an email.
+ */
+
+import * as React from 'react'
+import { z } from 'zod'
+import { ChevronDown, ChevronRight } from 'lucide-react'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { formatCurrency } from '@open-mercato/ui/utils/format'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { InjectionSpot } from '@open-mercato/ui/backend/injection/InjectionSpot'
+import { extensionPoints } from '@open-mercato/core/modules/staff/extension-points'
+import { registerComponent } from '@open-mercato/shared/modules/widgets/component-registry'
+import { useRegisteredComponent } from '@open-mercato/ui/backend/injection/useRegisteredComponent'
+import { opaqueProp } from '../time-tracking/componentContracts'
+import { formatReportMinutes } from '../timesheets-reports/reportTotals'
+import type { PreviewGroup, PreviewLine } from '../timesheets-reports/reportConfigData'
+
+export type ReportSheetProps = {
+  /**
+   * Identifies the rendered report to the sheet's injection spots. Optional so
+   * the preview host, which renders a sheet no report row exists for yet, keeps
+   * working unchanged.
+   */
+  reportId?: string | null
+  reference: string
+  customerName: string
+  periodLabel: string
+  issuedByLabel: string | null
+  issuedAtLabel: string | null
+  currencyCode: string | null
+  showRates: boolean
+  groups: readonly PreviewGroup[]
+  totals: {
+    billableMinutes: number
+    nonbillableMinutes: number
+    totalAmount: number | null
+  }
+  roundingLabel: string
+}
+
+const EM_DASH = '—'
+
+const REPORT_ENTITY_ID = 'staff:staff_time_report'
+
+function useMoney(currencyCode: string | null) {
+  return React.useCallback(
+    (amount: number | null | undefined) => {
+      if (amount === null || amount === undefined) return EM_DASH
+      return formatCurrency(amount, currencyCode ?? undefined) ?? EM_DASH
+    },
+    [currencyCode],
+  )
+}
+
+function DefaultReportSheet({
+  reportId = null,
+  reference,
+  customerName,
+  periodLabel,
+  issuedByLabel,
+  issuedAtLabel,
+  currencyCode,
+  showRates,
+  groups,
+  totals,
+  roundingLabel,
+}: ReportSheetProps) {
+  const t = useT()
+  const money = useMoney(currencyCode)
+  const sheetInjectionContext = React.useMemo(
+    () => ({ entityId: REPORT_ENTITY_ID, recordId: reportId, reportId, reference, periodLabel, currencyCode }),
+    [currencyCode, periodLabel, reference, reportId],
+  )
+
+  return (
+    <section className="rounded-lg border border-border bg-card">
+      <header className="flex flex-wrap items-start justify-between gap-4 border-b border-border p-6">
+        <div className="flex flex-col gap-1">
+          <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            {t('staff.time_tracking.reports.sheet.overline', 'Time and cost statement')}
+          </span>
+          <h2 className="text-lg font-semibold">{customerName}</h2>
+          <span className="text-sm text-muted-foreground">{periodLabel}</span>
+        </div>
+        <div className="flex flex-col items-end gap-1 text-right">
+          {issuedByLabel ? (
+            <>
+              <span className="text-xs text-muted-foreground">
+                {t('staff.time_tracking.reports.sheet.issuedBy', 'Issued by')}
+              </span>
+              <span className="text-sm font-medium">{issuedByLabel}</span>
+            </>
+          ) : null}
+          {issuedAtLabel ? <span className="text-xs text-muted-foreground">{issuedAtLabel}</span> : null}
+          <span className="font-mono text-xs text-muted-foreground">{reference}</span>
+        </div>
+      </header>
+
+      <InjectionSpot
+        spotId={extensionPoints.hosts.reportSheetBeforeLines.spotId}
+        context={sheetInjectionContext}
+        data={groups}
+      />
+
+      {groups.length === 0 ? (
+        <p className="p-6 text-sm text-muted-foreground">
+          {t('staff.time_tracking.reports.sheet.empty', 'No time was logged in this period for the selected projects.')}
+        </p>
+      ) : (
+        groups.map((group) => (
+          <ReportSheetGroup
+            key={group.key}
+            group={group}
+            showRates={showRates}
+            money={money}
+          />
+        ))
+      )}
+
+      <footer className="flex flex-wrap items-center justify-between gap-4 border-t border-border p-6">
+        <div className="flex flex-col gap-1">
+          <span className="text-sm font-semibold">
+            {t('staff.time_tracking.reports.sheet.total', 'Total to invoice')}
+          </span>
+          <span className="text-xs text-muted-foreground">
+            {t(
+              'staff.time_tracking.reports.sheet.totalHint',
+              '{billable} billable · {nonbillable} non-billable · {rounding}',
+            )
+              .replace('{billable}', formatReportMinutes(totals.billableMinutes))
+              .replace('{nonbillable}', formatReportMinutes(totals.nonbillableMinutes))
+              .replace('{rounding}', roundingLabel)}
+          </span>
+        </div>
+        <span className="font-mono text-xl font-semibold tabular-nums">{money(totals.totalAmount)}</span>
+      </footer>
+
+      <InjectionSpot
+        spotId={extensionPoints.hosts.reportSheetAfterTotals.spotId}
+        context={sheetInjectionContext}
+        data={totals}
+      />
+    </section>
+  )
+}
+
+type GroupProps = {
+  group: PreviewGroup
+  showRates: boolean
+  money: (amount: number | null | undefined) => string
+}
+
+function ReportSheetGroup({ group, showRates, money }: GroupProps) {
+  const t = useT()
+  const isNonBillable = group.kind === 'nonbillable'
+
+  return (
+    <div className="border-b border-border last:border-b-0">
+      <div className="flex flex-wrap items-center justify-between gap-3 bg-muted/40 px-6 py-3">
+        <div className="flex flex-col">
+          <span className="text-sm font-semibold">{group.label}</span>
+          <span className="text-xs text-muted-foreground">
+            {isNonBillable
+              ? t('staff.time_tracking.reports.sheet.nonbillableHint', 'Shown for information, outside the invoice')
+              : showRates && group.rate !== null
+                ? `${money(group.rate)}/h`
+                : ''}
+          </span>
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="font-mono text-sm tabular-nums">{formatReportMinutes(group.minutes)}</span>
+          <span
+            className={`font-mono text-sm tabular-nums ${isNonBillable ? 'text-muted-foreground' : 'font-semibold'}`}
+          >
+            {isNonBillable ? money(0) : money(group.amount)}
+          </span>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border text-xs uppercase tracking-wide text-muted-foreground">
+              <th className="px-6 py-2 text-left font-medium">
+                {t('staff.time_tracking.reports.sheet.lineLabel', 'Line')}
+              </th>
+              <th className="px-3 py-2 text-right font-medium">
+                {t('staff.time_tracking.reports.sheet.time', 'Time')}
+              </th>
+              {showRates ? (
+                <th className="px-3 py-2 text-right font-medium">
+                  {t('staff.time_tracking.reports.sheet.rate', 'Rate')}
+                </th>
+              ) : null}
+              <th className="px-6 py-2 text-right font-medium">
+                {t('staff.time_tracking.reports.sheet.amount', 'Amount')}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {group.lines.map((line) => (
+              <ReportSheetLine
+                key={line.key}
+                line={line}
+                depth={0}
+                isNonBillable={isNonBillable}
+                showRates={showRates}
+                money={money}
+              />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+type LineProps = {
+  line: PreviewLine
+  depth: number
+  isNonBillable: boolean
+  showRates: boolean
+  money: (amount: number | null | undefined) => string
+}
+
+function ReportSheetLine({ line, depth, isNonBillable, showRates, money }: LineProps) {
+  const t = useT()
+  const [expanded, setExpanded] = React.useState(false)
+  const hasChildren = line.children.length > 0
+  const columns = showRates ? 4 : 3
+
+  return (
+    <>
+      <tr className="border-b border-border/60 last:border-b-0">
+        <td className="px-6 py-2" style={{ paddingLeft: `${1.5 + depth * 1.25}rem` }}>
+          <div className="flex items-center gap-2">
+            {hasChildren ? (
+              <button
+                type="button"
+                className="inline-flex items-center text-muted-foreground hover:text-foreground"
+                onClick={() => setExpanded((current) => !current)}
+                aria-expanded={expanded}
+                aria-label={
+                  expanded
+                    ? t('staff.time_tracking.reports.sheet.collapse', 'Hide subtasks')
+                    : t('staff.time_tracking.reports.sheet.expand', 'Show subtasks')
+                }
+              >
+                {expanded ? (
+                  <ChevronDown className="size-4" aria-hidden="true" />
+                ) : (
+                  <ChevronRight className="size-4" aria-hidden="true" />
+                )}
+              </button>
+            ) : null}
+            <span>{line.label}</span>
+            {line.hasOverride ? (
+              <Badge variant="secondary">
+                {t('staff.time_tracking.reports.sheet.overrideBadge', 'agreed rate')}
+              </Badge>
+            ) : null}
+          </div>
+        </td>
+        <td className="px-3 py-2 text-right font-mono tabular-nums">{formatReportMinutes(line.minutes)}</td>
+        {showRates ? (
+          <td className="px-3 py-2 text-right font-mono tabular-nums">
+            {isNonBillable ? EM_DASH : money(line.rate)}
+          </td>
+        ) : null}
+        <td className="px-6 py-2 text-right font-mono tabular-nums">
+          {isNonBillable ? EM_DASH : money(line.amount)}
+        </td>
+      </tr>
+      {expanded
+        ? line.children.map((child) => (
+            <ReportSheetLine
+              key={child.key}
+              line={child}
+              depth={depth + 1}
+              isNonBillable={isNonBillable}
+              showRates={showRates}
+              money={money}
+            />
+          ))
+        : null}
+      {expanded && line.children.length === 0 ? (
+        <tr>
+          <td colSpan={columns} className="px-6 py-2 text-xs text-muted-foreground">
+            {t('staff.time_tracking.reports.sheet.noSubtasks', 'No subtasks')}
+          </td>
+        </tr>
+      ) : null}
+    </>
+  )
+}
+
+const reportSheetPropsSchema: z.ZodType<ReportSheetProps> = z.object({
+  reportId: z.string().nullable().optional(),
+  reference: z.string(),
+  customerName: z.string(),
+  periodLabel: z.string(),
+  issuedByLabel: z.string().nullable(),
+  issuedAtLabel: z.string().nullable(),
+  currencyCode: z.string().nullable(),
+  showRates: z.boolean(),
+  groups: z.array(opaqueProp<PreviewGroup>()),
+  totals: z.object({
+    billableMinutes: z.number(),
+    nonbillableMinutes: z.number(),
+    totalAmount: z.number().nullable(),
+  }),
+  roundingLabel: z.string(),
+})
+
+registerComponent<ReportSheetProps>({
+  id: extensionPoints.hosts.reportSheetComponent.componentId,
+  component: DefaultReportSheet,
+  metadata: {
+    module: 'staff',
+    description: 'Client-facing time and cost statement for one report.',
+    propsSchema: reportSheetPropsSchema,
+  },
+})
+
+export function ReportSheet(props: ReportSheetProps) {
+  const Resolved = useRegisteredComponent<ReportSheetProps>(
+    extensionPoints.hosts.reportSheetComponent.componentId,
+    DefaultReportSheet,
+  )
+  return <Resolved {...props} />
+}
+
+export default ReportSheet

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

@@ -0,0 +1,195 @@
+"use client"
+
+import * as React from 'react'
+import { Plus, Tag as TagIcon } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { resolveProjectColorHex } from '../timesheets-ui/colors'
+import type { TagOption } from './timeEntryDialogState'
+
+/**
+ * Renders a stored tag colour as a readable chip.
+ *
+ * `staff_time_tags.color` holds a DS palette key and has been written since the
+ * table existed; nothing ever read it, so every chip was grey. The hue tints the
+ * background and paints the border while the text stays on the foreground token,
+ * which keeps contrast legible in both themes rather than trusting a palette
+ * colour to be readable as text.
+ */
+export function tagChipStyle(tag: { color?: string | null; label: string }): React.CSSProperties | undefined {
+  if (!tag.color) return undefined
+  const hex = resolveProjectColorHex(tag.color, tag.label)
+  return { backgroundColor: `${hex}1f`, borderColor: `${hex}66` }
+}
+
+export type TagPickerProps = {
+  available: TagOption[]
+  onAssign: (tagId: string) => void
+  /** Resolves with the new tag, or null when the write failed. */
+  onCreate: (label: string) => Promise<TagOption | null>
+  labels: { add: string; create: (name: string) => string; empty: string }
+  disabled?: boolean
+  /**
+   * Namespaces the control's test ids so both hosts stay addressable. Defaults to
+   * the entry dialog's prefix, which was the only host when the ids were minted.
+   */
+  testIdPrefix?: string
+}
+
+/**
+ * Assign an existing tag or make one on the spot.
+ *
+ * Creation is open to anyone who can log time, deliberately: a consultant blocked
+ * mid-entry because the tag they need does not exist yet will either abandon the
+ * tag or invent a worse one in the description. The cost is a vocabulary that
+ * grows organically and will want tidying — a curation surface, not a gate here.
+ */
+export function TagPicker({
+  available,
+  onAssign,
+  onCreate,
+  labels,
+  disabled,
+  testIdPrefix = 'entry-dialog',
+}: TagPickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState('')
+  const [creating, setCreating] = React.useState(false)
+  const containerRef = React.useRef<HTMLDivElement | null>(null)
+
+  React.useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) setOpen(false)
+    }
+    /**
+     * Escape closes this popover and nothing else.
+     *
+     * Radix's `DismissableLayer` — the dialog or drawer this picker is dropped
+     * into — listens for Escape on the *document in the capture phase*, so it
+     * would otherwise dismiss the whole form before the popover ever saw the
+     * key, discarding a half-entered entry to dismiss a tag list. The window is
+     * one step earlier in the same propagation path, so the innermost layer gets
+     * the first and only say.
+     */
+    const onEscapeCapture = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return
+      event.preventDefault()
+      event.stopPropagation()
+      setOpen(false)
+    }
+    document.addEventListener('mousedown', onPointerDown)
+    window.addEventListener('keydown', onEscapeCapture, true)
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      window.removeEventListener('keydown', onEscapeCapture, true)
+    }
+  }, [open])
+
+  const term = query.trim()
+  const matches = React.useMemo(
+    () => available.filter((tag) => tag.label.toLowerCase().includes(term.toLowerCase())),
+    [available, term],
+  )
+  // Only offered when nothing already carries that exact name, so the control
+  // never invites a duplicate of a tag sitting one row above it.
+  const canCreate =
+    term.length > 0 && !available.some((tag) => tag.label.toLowerCase() === term.toLowerCase())
+
+  const create = React.useCallback(async () => {
+    if (!canCreate || creating) return
+    setCreating(true)
+    try {
+      const created = await onCreate(term)
+      if (created) {
+        onAssign(created.id)
+        setQuery('')
+        setOpen(false)
+      }
+    } finally {
+      setCreating(false)
+    }
+  }, [canCreate, creating, onAssign, onCreate, term])
+
+  return (
+    <div className="relative" ref={containerRef}>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        disabled={disabled}
+        onClick={() => setOpen((value) => !value)}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        data-testid={`${testIdPrefix}-tag-select`}
+      >
+        <TagIcon className="size-3.5" aria-hidden="true" />
+        {labels.add}
+      </Button>
+
+      {open ? (
+        <div className="absolute z-popover mt-1 w-64 rounded-md border border-border bg-popover p-2 shadow-md">
+          <Input
+            autoFocus
+            value={query}
+            size="sm"
+            placeholder={labels.add}
+            onChange={(event) => setQuery(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key !== 'Enter') return
+              event.preventDefault()
+              if (matches.length > 0 && !canCreate) {
+                onAssign(matches[0].id)
+                setQuery('')
+                setOpen(false)
+                return
+              }
+              void create()
+            }}
+            data-testid={`${testIdPrefix}-tag-search`}
+          />
+          <div className="mt-1 max-h-48 overflow-y-auto" role="listbox">
+            {matches.map((tag) => (
+              <button
+                key={tag.id}
+                type="button"
+                role="option"
+                aria-selected="false"
+                className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent"
+                onClick={() => {
+                  onAssign(tag.id)
+                  setQuery('')
+                  setOpen(false)
+                }}
+              >
+                <span
+                  className="size-2.5 shrink-0 rounded-full border border-border"
+                  style={{ backgroundColor: resolveProjectColorHex(tag.color, tag.label) }}
+                  aria-hidden
+                />
+                <span className="truncate">{tag.label}</span>
+              </button>
+            ))}
+            {matches.length === 0 && !canCreate ? (
+              <p className="px-2 py-1.5 text-xs text-muted-foreground">{labels.empty}</p>
+            ) : null}
+          </div>
+          {canCreate ? (
+            <button
+              type="button"
+              className="mt-1 flex w-full items-center gap-2 rounded-sm border-t border-border px-2 py-1.5 text-left text-sm hover:bg-accent"
+              disabled={creating}
+              onClick={() => { void create() }}
+              data-testid={`${testIdPrefix}-tag-create`}
+            >
+              <Plus className="size-3.5 shrink-0" aria-hidden="true" />
+              <span className="truncate">{labels.create(term)}</span>
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default TagPicker