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

@@ -0,0 +1,126 @@
+"use client"
+
+import * as React from 'react'
+import { Lock } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { DurationInput, type DurationInputStatus } from './DurationInput'
+import { formatDuration } from '../time-tracking/duration'
+
+/**
+ * Screen 10 note 1: the `Czas` cell edits in place — `Enter` or losing focus
+ * saves, `esc` puts the previous value back (US-D5).
+ *
+ * Three decisions:
+ *
+ *  1. **The field is `DurationInput`'s compact variant, not a bespoke input.**
+ *     `1h 40m`, `1.5h`, `90m` and `1:40` must mean the same thing in this cell
+ *     as they do in the entry dialog and the timesheet grid, and unparseable
+ *     text must behave the same way too. A second parser would drift.
+ *  2. **`esc` remounts the field rather than assigning to it.** `DurationInput`
+ *     owns the typed text so that garbage is never rewritten mid-keystroke; the
+ *     only honest way to discard that text from the outside is to give it a new
+ *     `key`. The same remount runs after a save so the cell settles on the
+ *     canonical `2:30` rather than on whatever spelling was typed.
+ *  3. **Text that does not parse is reverted on blur, never saved.** The parent
+ *     is only ever handed minutes it can send, so a half-typed duration cannot
+ *     leave the row in a state the server has to reject.
+ */
+export type TimeEntryDurationCellProps = {
+  value: number
+  /** Locked rows (US-G3) render the duration as text with a lock affordance. */
+  readOnly?: boolean
+  saving?: boolean
+  ariaLabel: string
+  lockedTitle?: string
+  onCommit: (minutes: number) => void | Promise<void>
+}
+
+export function TimeEntryDurationCell({
+  value,
+  readOnly = false,
+  saving = false,
+  ariaLabel,
+  lockedTitle,
+  onCommit,
+}: TimeEntryDurationCellProps) {
+  const [draft, setDraft] = React.useState<number | null | undefined>(undefined)
+  const [status, setStatus] = React.useState<DurationInputStatus>('valid')
+  const [fieldKey, setFieldKey] = React.useState(0)
+  const revertingRef = React.useRef(false)
+
+  const reset = React.useCallback(() => {
+    setDraft(undefined)
+    setStatus('valid')
+    setFieldKey((key) => key + 1)
+  }, [])
+
+  const commit = React.useCallback(async () => {
+    const next = draft
+    if (next === undefined) return
+    if (status !== 'valid' || next === null || next === value) {
+      reset()
+      return
+    }
+    reset()
+    await onCommit(next)
+  }, [draft, onCommit, reset, status, value])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        void commit()
+        return
+      }
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        event.stopPropagation()
+        revertingRef.current = true
+        reset()
+      }
+    },
+    [commit, reset],
+  )
+
+  const handleBlur = React.useCallback(() => {
+    if (revertingRef.current) {
+      revertingRef.current = false
+      return
+    }
+    void commit()
+  }, [commit])
+
+  if (readOnly) {
+    return (
+      <span
+        className="flex items-center justify-end gap-1.5 font-mono text-sm font-semibold tabular-nums text-muted-foreground"
+        title={lockedTitle}
+        data-testid="entry-duration-locked"
+      >
+        <Lock className="h-3 w-3" aria-hidden="true" />
+        {formatDuration(value, 'clock')}
+      </span>
+    )
+  }
+
+  return (
+    <div className={cn('flex justify-end', saving && 'opacity-60')} onClick={(event) => event.stopPropagation()}>
+      <DurationInput
+        key={fieldKey}
+        variant="compact"
+        displayStyle="clock"
+        className="w-20"
+        inputClassName="text-right"
+        ariaLabel={ariaLabel}
+        disabled={saving}
+        value={draft === undefined ? value : draft}
+        onChange={(minutes, state) => {
+          setDraft(minutes)
+          setStatus(state.status)
+        }}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,265 @@
+"use client"
+
+import * as React from 'react'
+import { z } from 'zod'
+import { Plus } from 'lucide-react'
+import { Progress } from '@open-mercato/ui/primitives/progress'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  InjectionSpot,
+  useInjectionWidgets,
+  type LoadedInjectionSpotWidget,
+} 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 { callbackProp, opaqueProp } from '../time-tracking/componentContracts'
+import { formatDuration } from '../time-tracking/duration'
+import {
+  buildCalendarWeeks,
+  formatPeriodLabel,
+  parseIsoDay,
+  type TimesheetCalendarCell,
+} from './timesheetPeriod'
+import { entryChipLabel, loadPercent, type TimesheetDayIndex, type TimesheetEntry } from './timesheetData'
+
+/**
+ * Screen 11 — the month calendar (T5.2).
+ *
+ * The mockup's four notes are the four things this component exists to do:
+ *
+ *  1. **A load bar under the date** so light and heavy days read without reading
+ *     numbers (note 1, US-E3). Its scale comes from the caller, which is what
+ *     lets note 6 work: with `targets.dailyHours` set the bar is "% of target",
+ *     without it the bars are ranked against the longest day of the period.
+ *  2. **`+ dodaj` on hover** opens the shared entry dialog pre-dated to that day
+ *     (note 2, US-E4). It is rendered for every in-period day and revealed on
+ *     hover *or keyboard focus* — a hover-only affordance would put adding time
+ *     out of reach of anybody not using a mouse.
+ *  3. **A non-billable chip is dashed, not coloured** (note 3), so the
+ *     distinction survives greyscale and colour blindness. The chip also carries
+ *     a `title`, so the meaning is available to a screen reader rather than
+ *     living in a border style.
+ *  4. Periods longer than a month render one grid per month rather than a
+ *     disabled switch. A quarter and a year are the same question as a month,
+ *     asked over more days.
+ */
+
+export type TimesheetCalendarProps = {
+  /** One anchor day per month to render, in order. */
+  monthAnchors: readonly string[]
+  days: TimesheetDayIndex
+  scaleMinutes: number | null
+  todayDate: string
+  onAddEntry: (date: string) => void
+  onSelectEntry: (entry: TimesheetEntry) => void
+  locale?: string
+  /** Multi-month periods get a heading per grid; a single month does not need one. */
+  showMonthHeadings?: boolean
+}
+
+function weekdayLabels(locale: string | undefined): string[] {
+  // 2024-01-01 was a Monday, so the seven days from it are Mon…Sun in order.
+  const base = new Date(2024, 0, 1)
+  return Array.from({ length: 7 }, (_, index) => {
+    const day = new Date(base.getFullYear(), base.getMonth(), base.getDate() + index)
+    try {
+      return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(day)
+    } catch {
+      return String(index)
+    }
+  })
+}
+
+function DefaultTimesheetCalendar({
+  monthAnchors,
+  days,
+  scaleMinutes,
+  todayDate,
+  onAddEntry,
+  onSelectEntry,
+  locale,
+  showMonthHeadings = false,
+}: TimesheetCalendarProps) {
+  const t = useT()
+  const weekdays = React.useMemo(() => weekdayLabels(locale), [locale])
+  const addLabel = t('staff.time_tracking.timesheet.calendar.add', '+ add')
+  const nonBillableLabel = t('staff.time_tracking.timesheet.calendar.nonBillable', 'Non-billable')
+  /**
+   * Loaded once for the whole grid and handed to every cell as an override: a
+   * month renders ~35 cells, and letting each one resolve the spot on its own
+   * would mean 35 registry reads and 35 state updates for a spot that is empty
+   * on every stock install.
+   */
+  const { widgets: dayCellActionWidgets } = useInjectionWidgets(
+    extensionPoints.hosts.timesheetDayCellActions.spotId,
+  )
+
+  return (
+    <div className="flex flex-col gap-6">
+      {monthAnchors.map((anchor) => (
+        <section key={anchor} className="flex flex-col gap-2">
+          {showMonthHeadings ? (
+            <h3 className="text-sm font-semibold text-foreground">{formatPeriodLabel('month', anchor, locale)}</h3>
+          ) : null}
+          <div className="grid grid-cols-7 gap-1">
+            {weekdays.map((label) => (
+              <div key={label} className="px-1 pb-1 text-xs font-medium uppercase text-muted-foreground">
+                {label}
+              </div>
+            ))}
+            {buildCalendarWeeks(anchor, todayDate)
+              .flat()
+              .map((cell) => (
+                <CalendarDayCell
+                  key={cell.date}
+                  cell={cell}
+                  day={days.get(cell.date) ?? null}
+                  scaleMinutes={scaleMinutes}
+                  addLabel={addLabel}
+                  nonBillableLabel={nonBillableLabel}
+                  onAddEntry={onAddEntry}
+                  onSelectEntry={onSelectEntry}
+                  locale={locale}
+                  dayCellActionWidgets={dayCellActionWidgets}
+                />
+              ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  )
+}
+
+function CalendarDayCell({
+  cell,
+  day,
+  scaleMinutes,
+  addLabel,
+  nonBillableLabel,
+  onAddEntry,
+  onSelectEntry,
+  locale,
+  dayCellActionWidgets,
+}: {
+  cell: TimesheetCalendarCell
+  day: { totalMinutes: number; entries: TimesheetEntry[] } | null
+  scaleMinutes: number | null
+  addLabel: string
+  nonBillableLabel: string
+  onAddEntry: (date: string) => void
+  onSelectEntry: (entry: TimesheetEntry) => void
+  locale?: string
+  dayCellActionWidgets: LoadedInjectionSpotWidget[]
+}) {
+  const totalMinutes = day?.totalMinutes ?? 0
+  const entries = day?.entries ?? []
+  const percent = loadPercent(totalMinutes, scaleMinutes)
+  const parsed = parseIsoDay(cell.date)
+  const fullDate = parsed
+    ? (() => {
+        try {
+          return new Intl.DateTimeFormat(locale, { dateStyle: 'full' }).format(parsed)
+        } catch {
+          return cell.date
+        }
+      })()
+    : cell.date
+
+  return (
+    <div
+      className={cn(
+        'group flex min-h-24 flex-col gap-1 rounded-md border p-1.5 transition-colors',
+        cell.inPeriod ? 'bg-card' : 'bg-muted/40 text-muted-foreground',
+        cell.isWeekend && cell.inPeriod ? 'bg-muted/30' : null,
+        cell.isToday ? 'border-primary' : 'border-border',
+      )}
+    >
+      <div className="flex items-baseline justify-between gap-1">
+        <span className={cn('text-xs', cell.isToday ? 'font-semibold text-foreground' : 'text-muted-foreground')}>
+          {cell.dayOfMonth}
+        </span>
+        {totalMinutes > 0 ? (
+          <span className="font-mono text-xs tabular-nums text-foreground">
+            {formatDuration(totalMinutes, 'clock')}
+          </span>
+        ) : null}
+      </div>
+
+      {cell.inPeriod && totalMinutes > 0 ? <Progress value={percent} size="sm" /> : null}
+
+      {entries.map((entry) => (
+        <button
+          key={entry.id}
+          type="button"
+          onClick={() => onSelectEntry(entry)}
+          title={entry.isBillable ? undefined : nonBillableLabel}
+          className={cn(
+            'flex w-full items-center justify-between gap-1 rounded px-1 py-0.5 text-left text-xs',
+            'hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+            entry.isBillable ? 'border border-transparent bg-muted/60' : 'border border-dashed border-border',
+          )}
+        >
+          <span className="min-w-0 truncate">{entryChipLabel(entry, '—')}</span>
+          <span className="shrink-0 font-mono tabular-nums text-muted-foreground">
+            {formatDuration(entry.durationMinutes, 'clock')}
+          </span>
+        </button>
+      ))}
+
+      {cell.inPeriod ? (
+        <button
+          type="button"
+          onClick={() => onAddEntry(cell.date)}
+          aria-label={`${addLabel} — ${fullDate}`}
+          className={cn(
+            'mt-auto inline-flex items-center gap-1 rounded px-1 py-0.5 text-left text-xs text-muted-foreground',
+            'opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100',
+            'hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+          )}
+        >
+          <Plus className="size-3" aria-hidden="true" />
+          {addLabel}
+        </button>
+      ) : null}
+      {cell.inPeriod ? (
+        <InjectionSpot
+          spotId={extensionPoints.hosts.timesheetDayCellActions.spotId}
+          context={{ date: cell.date, isToday: cell.isToday, isWeekend: cell.isWeekend, totalMinutes }}
+          data={entries}
+          widgetsOverride={dayCellActionWidgets}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+const timesheetCalendarPropsSchema: z.ZodType<TimesheetCalendarProps> = z.object({
+  monthAnchors: z.array(z.string()),
+  days: opaqueProp<TimesheetDayIndex>(),
+  scaleMinutes: z.number().nullable(),
+  todayDate: z.string(),
+  onAddEntry: callbackProp<(date: string) => void>(),
+  onSelectEntry: callbackProp<(entry: TimesheetEntry) => void>(),
+  locale: z.string().optional(),
+  showMonthHeadings: z.boolean().optional(),
+})
+
+registerComponent<TimesheetCalendarProps>({
+  id: extensionPoints.hosts.timesheetCalendarComponent.componentId,
+  component: DefaultTimesheetCalendar,
+  metadata: {
+    module: 'staff',
+    description: 'Timesheet month calendar with per-day load bars and entry chips.',
+    propsSchema: timesheetCalendarPropsSchema,
+  },
+})
+
+export function TimesheetCalendar(props: TimesheetCalendarProps) {
+  const Resolved = useRegisteredComponent<TimesheetCalendarProps>(
+    extensionPoints.hosts.timesheetCalendarComponent.componentId,
+    DefaultTimesheetCalendar,
+  )
+  return <Resolved {...props} />
+}

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

@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from 'react'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+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 { formatDuration } from '../time-tracking/duration'
+import type { TimesheetSummary } from './timesheetData'
+
+/**
+ * The footer both timesheet views share — `Okres · Rozliczalne · Cel · delta`
+ * (screens 11 and 12).
+ *
+ * The target and the delta disappear together when the tenant has no
+ * `targets.dailyHours` (screen 11 note 6): a delta against nothing is not a
+ * smaller number, it is a meaningless one. Time is the only quantity here; cost
+ * belongs to the entries list and the report, which subtotal per currency.
+ */
+export function TimesheetPeriodFooter({
+  summary,
+  dailyHours,
+}: {
+  summary: TimesheetSummary
+  dailyHours: number | null
+}) {
+  const t = useT()
+  const footerInjectionContext = React.useMemo(
+    () => ({ workingDays: summary.workingDays, dailyHours }),
+    [dailyHours, summary.workingDays],
+  )
+  const targetLabel =
+    dailyHours !== null
+      ? t('staff.time_tracking.timesheet.footer.targetWithDays', 'Target ({days} d × {hours} h)', {
+          days: String(summary.workingDays),
+          hours: String(dailyHours),
+        })
+      : t('staff.time_tracking.timesheet.footer.target', 'Target')
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-6 gap-y-2 border-t px-4 py-3 text-sm">
+      <span>
+        <span className="text-muted-foreground">{t('staff.time_tracking.timesheet.footer.period', 'Period:')}</span>{' '}
+        <b className="font-mono tabular-nums">{formatDuration(summary.totalMinutes, 'clock')}</b>
+      </span>
+      <span>
+        <span className="text-muted-foreground">
+          {t('staff.time_tracking.timesheet.footer.billable', 'Billable:')}
+        </span>{' '}
+        <b className="font-mono tabular-nums">{formatDuration(summary.billableMinutes, 'clock')}</b>
+      </span>
+      {summary.targetMinutes !== null ? (
+        <>
+          <span>
+            <span className="text-muted-foreground">{targetLabel}:</span>{' '}
+            <b className="font-mono tabular-nums">{formatDuration(summary.targetMinutes, 'clock')}</b>
+          </span>
+          {summary.deltaMinutes !== null && summary.deltaMinutes !== 0 ? (
+            <StatusBadge variant={summary.deltaMinutes > 0 ? 'success' : 'warning'}>
+              {summary.deltaMinutes > 0
+                ? t('staff.time_tracking.timesheet.footer.overTarget', '+{duration} over target', {
+                    duration: formatDuration(summary.deltaMinutes, 'clock'),
+                  })
+                : t('staff.time_tracking.timesheet.footer.underTarget', '−{duration} to target', {
+                    duration: formatDuration(Math.abs(summary.deltaMinutes), 'clock'),
+                  })}
+            </StatusBadge>
+          ) : null}
+        </>
+      ) : null}
+      <InjectionSpot
+        spotId={extensionPoints.hosts.timesheetPeriodFooter.spotId}
+        context={footerInjectionContext}
+        data={summary}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from 'react'
+import { CalendarDays, LayoutGrid, List } from 'lucide-react'
+import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { TimesheetView } from './useTimesheetPreferences'
+
+/**
+ * The three-way switch of T5.5 — `Kalendarz · Lista · Siatka`.
+ *
+ * The mockups draw two views; the third is the editable project × day grid the
+ * module already had, which the spec keeps because it is the fastest way to fill
+ * a week. All three are peers here rather than the grid being a mode of the
+ * list: they answer three different questions ("where are my gaps this month",
+ * "close out this week day by day", "type a week of hours in one pass").
+ */
+
+const VIEW_ICONS: Record<TimesheetView, React.ComponentType<{ className?: string }>> = {
+  calendar: CalendarDays,
+  list: List,
+  grid: LayoutGrid,
+}
+
+const ALL_VIEWS: readonly TimesheetView[] = ['calendar', 'list', 'grid']
+
+export function TimesheetViewSwitch({
+  view,
+  onViewChange,
+  views = ALL_VIEWS,
+}: {
+  view: TimesheetView
+  onViewChange: (next: TimesheetView) => void
+  /**
+   * Which views this period supports. A quarter or a year has no editable grid —
+   * ninety day columns is not a bulk-entry surface — so the option is **absent**
+   * rather than rendered disabled, the same rule the module applies to actions a
+   * caller may not take.
+   */
+  views?: readonly TimesheetView[]
+}) {
+  const t = useT()
+  const labels: Record<TimesheetView, string> = {
+    calendar: t('staff.time_tracking.timesheet.view.calendar', 'Calendar'),
+    list: t('staff.time_tracking.timesheet.view.list', 'List'),
+    grid: t('staff.time_tracking.timesheet.view.grid', 'Grid'),
+  }
+  return (
+    <SegmentedControl
+      value={view}
+      onValueChange={(value) => {
+        if (value !== view) onViewChange(value as TimesheetView)
+      }}
+      aria-label={t('staff.time_tracking.timesheet.view.label', 'Timesheet view')}
+      className="shrink-0"
+    >
+      {views.map((id) => {
+        const Icon = VIEW_ICONS[id]
+        return (
+          <SegmentedControlItem key={id} value={id}>
+            <span className="flex items-center gap-1.5">
+              <Icon className="size-3.5" aria-hidden="true" />
+              {labels[id]}
+            </span>
+          </SegmentedControlItem>
+        )
+      })}
+    </SegmentedControl>
+  )
+}