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

@@ -0,0 +1,162 @@
+"use client"
+
+import * as React from 'react'
+import Link from 'next/link'
+import { ArrowLeft, FolderOpen, MessageSquare, ShieldAlert } from 'lucide-react'
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export const MY_WORK_HREF = '/backend/staff/time-tracking'
+export const ACCESS_REQUEST_ENDPOINT = '/api/staff/timesheets/access-requests'
+const ACCESS_REQUEST_CONTEXT_ID = 'staff.time_tracking.access_request'
+
+export type AccessRequestButtonProps = {
+  /**
+   * Sent with the request so a Team Leader lands on the right project team
+   * drawer. It is never rendered — screen 17 note 1 forbids confirming that the
+   * project exists to a user who has no right to it.
+   */
+  timeProjectId?: string | null
+  label: string
+  sentLabel: string
+  variant?: 'default' | 'outline'
+}
+
+export function AccessRequestButton({
+  timeProjectId,
+  label,
+  sentLabel,
+  variant = 'outline',
+}: AccessRequestButtonProps) {
+  const t = useT()
+  const [submitting, setSubmitting] = React.useState(false)
+  const [sent, setSent] = React.useState(false)
+  const { runMutation, retryLastMutation } = useGuardedMutation<Record<string, unknown>>({
+    contextId: ACCESS_REQUEST_CONTEXT_ID,
+    blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
+
+  const requestAccess = React.useCallback(async () => {
+    const payload = timeProjectId ? { timeProjectId } : {}
+    setSubmitting(true)
+    try {
+      await runMutation({
+        operation: () =>
+          apiCallOrThrow(ACCESS_REQUEST_ENDPOINT, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(payload),
+          }),
+        context: {
+          formId: ACCESS_REQUEST_CONTEXT_ID,
+          resourceKind: 'staff.timesheets.access_request',
+          retryLastMutation,
+        },
+        mutationPayload: payload,
+      })
+      setSent(true)
+      flash(
+        t(
+          'staff.time_tracking.access.request.success',
+          'Your request has been sent to the Team Leaders.',
+        ),
+        'success',
+      )
+    } catch {
+      flash(
+        t('staff.time_tracking.access.request.error', 'Could not send the access request.'),
+        'error',
+      )
+    } finally {
+      setSubmitting(false)
+    }
+  }, [retryLastMutation, runMutation, t, timeProjectId])
+
+  return (
+    <Button type="button" variant={variant} onClick={requestAccess} disabled={submitting || sent}>
+      <MessageSquare className="size-4" aria-hidden="true" />
+      {sent ? sentLabel : label}
+    </Button>
+  )
+}
+
+export type NoProjectAccessProps = {
+  timeProjectId?: string | null
+  /** Where the "Back to My work" action returns to. */
+  myWorkHref?: string
+}
+
+/**
+ * Screen 17 — a project-scoped route the caller may not open. The copy names
+ * neither the customer nor the project (note 1) and covers both "never had
+ * access" and "access was revoked" (note 2); navigation stays untouched because
+ * the caller still has other projects (note 3).
+ */
+export function NoProjectAccess({ timeProjectId, myWorkHref = MY_WORK_HREF }: NoProjectAccessProps) {
+  const t = useT()
+  return (
+    <Page>
+      <PageBody>
+        <EmptyState
+          variant="subtle"
+          size="lg"
+          icon={<ShieldAlert className="size-6" aria-hidden="true" />}
+          title={t('staff.time_tracking.access.denied.title', 'You do not have access to this project')}
+          description={t(
+            'staff.time_tracking.access.denied.description',
+            'Project access is granted one project at a time by a Team Leader. If you had access before, it may have been revoked — your earlier time entries stay saved.',
+          )}
+          actions={
+            <div className="flex flex-wrap items-center justify-center gap-2">
+              <Button type="button" variant="default" asChild>
+                <a href={myWorkHref}>
+                  <ArrowLeft className="size-4" aria-hidden="true" />
+                  {t('staff.time_tracking.access.denied.back', 'Back to My work')}
+                </a>
+              </Button>
+              <AccessRequestButton
+                timeProjectId={timeProjectId}
+                label={t('staff.time_tracking.access.denied.request', 'Request access')}
+                sentLabel={t('staff.time_tracking.access.request.sent', 'Request sent')}
+              />
+            </div>
+          }
+        />
+      </PageBody>
+    </Page>
+  )
+}
+
+/**
+ * Screen 2 — the caller has no project assignments at all. Rendered inside the
+ * host page (which keeps its own header), so it stays a bare empty state.
+ */
+export function NoTimeProjectAssignments() {
+  const t = useT()
+  return (
+    <EmptyState
+      variant="subtle"
+      size="lg"
+      icon={<FolderOpen className="size-6" aria-hidden="true" />}
+      title={t('staff.time_tracking.access.empty.title', 'You have no projects assigned yet')}
+      description={t(
+        'staff.time_tracking.access.empty.description',
+        'A Team Leader grants project access. Once you are added to a project it shows up here right away — no need to log in again.',
+      )}
+      actions={
+        <AccessRequestButton
+          variant="default"
+          label={t('staff.time_tracking.access.empty.request', 'Ask a Team Leader for access')}
+          sentLabel={t('staff.time_tracking.access.request.sent', 'Request sent')}
+        />
+      }
+    />
+  )
+}
+
+export default NoProjectAccess

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

@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  TIMESHEET_PERIOD_KINDS,
+  formatPeriodLabel,
+  shiftPeriodAnchor,
+  todayIso,
+  type TimesheetPeriodKind,
+} from './timesheetPeriod'
+
+/**
+ * Screens 11 and 12, top-left: `Rok · Kwartał · Miesiąc · Tydzień` plus the
+ * prev / label / next / today cluster (T5.1).
+ *
+ * The component is fully controlled and owns no date maths — it hands the anchor
+ * to `shiftPeriodAnchor` and renders whatever comes back. That is what makes
+ * US-E1 ("switching week↔month stays around now") a property of
+ * `timesheetPeriod.ts` rather than of a React callback nobody can test.
+ */
+
+export type PeriodSelectorProps = {
+  periodKind: TimesheetPeriodKind
+  anchorDate: string
+  onPeriodKindChange: (kind: TimesheetPeriodKind) => void
+  onAnchorDateChange: (anchor: string) => void
+  locale?: string
+}
+
+export function PeriodSelector({
+  periodKind,
+  anchorDate,
+  onPeriodKindChange,
+  onAnchorDateChange,
+  locale,
+}: PeriodSelectorProps) {
+  const t = useT()
+
+  const kindLabels: Record<TimesheetPeriodKind, string> = {
+    year: t('staff.time_tracking.timesheet.period.year', 'Year'),
+    quarter: t('staff.time_tracking.timesheet.period.quarter', 'Quarter'),
+    month: t('staff.time_tracking.timesheet.period.month', 'Month'),
+    week: t('staff.time_tracking.timesheet.period.week', 'Week'),
+  }
+
+  const label = React.useMemo(
+    () => formatPeriodLabel(periodKind, anchorDate, locale),
+    [anchorDate, locale, periodKind],
+  )
+
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <SegmentedControl
+        value={periodKind}
+        onValueChange={(value) => {
+          // The anchor is untouched on purpose — US-E1.
+          if (value !== periodKind) onPeriodKindChange(value as TimesheetPeriodKind)
+        }}
+        aria-label={t('staff.time_tracking.timesheet.period.label', 'Period')}
+        className="shrink-0"
+      >
+        {TIMESHEET_PERIOD_KINDS.map((kind) => (
+          <SegmentedControlItem key={kind} value={kind}>
+            {kindLabels[kind]}
+          </SegmentedControlItem>
+        ))}
+      </SegmentedControl>
+
+      <div className="flex items-center gap-1">
+        <IconButton
+          type="button"
+          variant="outline"
+          size="sm"
+          aria-label={t('staff.time_tracking.timesheet.period.previous', 'Previous period')}
+          onClick={() => onAnchorDateChange(shiftPeriodAnchor(periodKind, anchorDate, -1))}
+        >
+          <ChevronLeft className="size-4" aria-hidden="true" />
+        </IconButton>
+        <span className="min-w-48 whitespace-nowrap px-1 text-center text-sm font-semibold">{label}</span>
+        <IconButton
+          type="button"
+          variant="outline"
+          size="sm"
+          aria-label={t('staff.time_tracking.timesheet.period.next', 'Next period')}
+          onClick={() => onAnchorDateChange(shiftPeriodAnchor(periodKind, anchorDate, 1))}
+        >
+          <ChevronRight className="size-4" aria-hidden="true" />
+        </IconButton>
+        <Button type="button" variant="ghost" size="sm" onClick={() => onAnchorDateChange(todayIso())}>
+          {t('staff.time_tracking.timesheet.period.today', 'Today')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export type TimesheetSelectOption = {
+  value: string
+  label: string
+}
+
+/**
+ * The project and person pickers of screens 11/12 (US-E2). A Team Member is
+ * handed a single-option person list naming themselves (screen 11 note 5); a
+ * Team Leader is handed everyone they may see. The component itself makes no
+ * access decision — the page passes only options the caller is allowed.
+ */
+export function TimesheetFilterSelect({
+  value,
+  options,
+  onChange,
+  ariaLabel,
+  className,
+  disabled,
+}: {
+  value: string
+  options: readonly TimesheetSelectOption[]
+  onChange: (next: string) => void
+  ariaLabel: string
+  className?: string
+  disabled?: boolean
+}) {
+  return (
+    <Select value={value} onValueChange={onChange} disabled={disabled}>
+      <SelectTrigger className={className ?? 'w-auto min-w-44'} aria-label={ariaLabel}>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

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

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from 'react'
+import { Page, PageBody, PageHeader } from '@open-mercato/ui/backend/Page'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type PhasePlaceholderProps = {
+  titleKey: string
+  titleFallback: string
+}
+
+export function PhasePlaceholder({ titleKey, titleFallback }: PhasePlaceholderProps) {
+  const t = useT()
+  return (
+    <Page>
+      <PageHeader title={t(titleKey, titleFallback)} />
+      <PageBody>
+        <EmptyState
+          title={t('staff.time_tracking.placeholder.title', 'Coming in a later phase')}
+          description={t(
+            'staff.time_tracking.placeholder.description',
+            'This screen is part of the time tracking rollout and is not available yet.'
+          )}
+        />
+      </PageBody>
+    </Page>
+  )
+}
+
+export default PhasePlaceholder

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

@@ -0,0 +1,230 @@
+"use client"
+
+import * as React from 'react'
+import { Check, Loader2, Pencil } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { deriveProjectCode, slugifyProjectName, PROJECT_CODE_MAX_LENGTH } from '../time-tracking/projectCode'
+
+const PAGE_SIZE = 100
+const MAX_PAGES = 5
+
+type ProjectCodeRow = { id?: unknown; code?: unknown }
+
+/**
+ * D-10: screen 4 has no code field, but the column is required and unique, so
+ * the code is derived from the name and shown read-only underneath it behind an
+ * explicit edit affordance. Uniqueness is checked live against the codes already
+ * in scope; the server-side partial unique index (surfaced as a `409` with a
+ * `code` field error) stays the authority.
+ */
+export function useTakenProjectCodes(excludeId?: string | null): {
+  taken: Set<string>
+  loading: boolean
+} {
+  const [taken, setTaken] = React.useState<Set<string>>(() => new Set())
+  const [loading, setLoading] = React.useState(true)
+
+  React.useEffect(() => {
+    let cancelled = false
+    async function load() {
+      setLoading(true)
+      const collected = new Set<string>()
+      try {
+        for (let page = 1; page <= MAX_PAGES; page += 1) {
+          const res = await apiCall<{ items?: ProjectCodeRow[]; totalPages?: number }>(
+            `/api/staff/timesheets/time-projects?page=${page}&pageSize=${PAGE_SIZE}&sortField=code&sortDir=asc`,
+          )
+          const items = Array.isArray(res.result?.items) ? res.result.items : []
+          items.forEach((row) => {
+            const id = typeof row.id === 'string' ? row.id : null
+            const code = typeof row.code === 'string' ? row.code.trim().toUpperCase() : ''
+            if (!code) return
+            if (excludeId && id === excludeId) return
+            collected.add(code)
+          })
+          const totalPages = typeof res.result?.totalPages === 'number' ? res.result.totalPages : 1
+          if (items.length < PAGE_SIZE || page >= totalPages) break
+        }
+      } catch {
+        // A failed probe only weakens the client-side hint — the unique index
+        // still rejects a duplicate on save.
+      }
+      if (cancelled) return
+      setTaken(collected)
+      setLoading(false)
+    }
+    void load()
+    return () => { cancelled = true }
+  }, [excludeId])
+
+  return { taken, loading }
+}
+
+export type ProjectCodeFieldProps = {
+  value: string
+  name: string
+  taken: Set<string>
+  manual: boolean
+  disabled?: boolean
+  error?: string
+  onChange: (code: string) => void
+  onManualChange: (manual: boolean) => void
+}
+
+export function ProjectCodeField({
+  value,
+  name,
+  taken,
+  manual,
+  disabled,
+  error,
+  onChange,
+  onManualChange,
+}: ProjectCodeFieldProps) {
+  const t = useT()
+  const [editing, setEditing] = React.useState(false)
+
+  const duplicate = React.useMemo(() => {
+    const normalized = value.trim().toUpperCase()
+    return normalized.length > 0 && taken.has(normalized)
+  }, [taken, value])
+
+  const startEditing = React.useCallback(() => {
+    onManualChange(true)
+    setEditing(true)
+  }, [onManualChange])
+
+  const resetToDerived = React.useCallback(() => {
+    onManualChange(false)
+    onChange(deriveProjectCode(name, taken))
+    setEditing(false)
+  }, [name, onChange, onManualChange, taken])
+
+  if (!editing) {
+    return (
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <code className="rounded-md border border-border bg-muted px-2 py-1 font-mono text-xs text-muted-foreground">
+            {value || t('staff.time_tracking.projects.code.empty', '—')}
+          </code>
+          <Button type="button" variant="ghost" size="sm" onClick={startEditing} disabled={disabled}>
+            <Pencil className="h-3.5 w-3.5" aria-hidden />
+            {t('staff.time_tracking.projects.code.edit', 'Edit code')}
+          </Button>
+        </div>
+        {duplicate ? (
+          <p className="text-xs text-status-error-text">
+            {t('staff.time_tracking.projects.code.duplicate', 'This code is already used by another project.')}
+          </p>
+        ) : (
+          <p className="text-xs text-muted-foreground">
+            {manual
+              ? t('staff.time_tracking.projects.code.manualHint', 'Set manually — it no longer follows the name.')
+              : t('staff.time_tracking.projects.code.autoHint', 'Derived from the project name; it prefixes every task reference.')}
+          </p>
+        )}
+        {error ? <p className="text-xs text-status-error-text">{error}</p> : null}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex items-center gap-2">
+        <Input
+          value={value}
+          disabled={disabled}
+          maxLength={PROJECT_CODE_MAX_LENGTH}
+          autoFocus
+          aria-invalid={duplicate || Boolean(error)}
+          onChange={(event) => onChange(slugifyProjectName(event.target.value).slice(0, PROJECT_CODE_MAX_LENGTH))}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault()
+              setEditing(false)
+            }
+          }}
+        />
+        <Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>
+          <Check className="h-3.5 w-3.5" aria-hidden />
+          {t('staff.time_tracking.projects.code.done', 'Done')}
+        </Button>
+        <Button type="button" variant="ghost" size="sm" onClick={resetToDerived}>
+          {t('staff.time_tracking.projects.code.reset', 'Use the derived code')}
+        </Button>
+      </div>
+      {duplicate ? (
+        <p className="text-xs text-status-error-text">
+          {t('staff.time_tracking.projects.code.duplicate', 'This code is already used by another project.')}
+        </p>
+      ) : null}
+      {error ? <p className="text-xs text-status-error-text">{error}</p> : null}
+    </div>
+  )
+}
+
+export type ProjectCodeFieldBindingProps = {
+  value: unknown
+  values?: Record<string, unknown>
+  error?: string
+  disabled?: boolean
+  setValue: (value: unknown) => void
+  setFormValue?: (id: string, value: unknown) => void
+}
+
+/**
+ * Binds the code field to the name: on create the code follows the name until
+ * the user edits it; on edit the stored code is authoritative and is never
+ * silently re-derived.
+ */
+export function ProjectCodeFieldBinding({
+  value,
+  values,
+  error,
+  disabled,
+  setValue,
+  setFormValue,
+}: ProjectCodeFieldBindingProps) {
+  const recordId = typeof values?.id === 'string' ? values.id : null
+  const name = typeof values?.name === 'string' ? values.name : ''
+  const manual = values?.codeManual === true
+  const code = typeof value === 'string' ? value : ''
+  const { taken, loading } = useTakenProjectCodes(recordId)
+
+  const setManual = React.useCallback(
+    (next: boolean) => setFormValue?.('codeManual', next),
+    [setFormValue],
+  )
+
+  React.useEffect(() => {
+    if (manual || loading) return
+    const derived = deriveProjectCode(name, taken)
+    if (!name.trim()) {
+      if (code) setValue('')
+      return
+    }
+    if (derived !== code) setValue(derived)
+  }, [code, loading, manual, name, setValue, taken])
+
+  if (loading && !code) return <ProjectCodeLoading />
+
+  return (
+    <ProjectCodeField
+      value={code}
+      name={name}
+      taken={taken}
+      manual={manual}
+      disabled={disabled}
+      error={error}
+      onChange={setValue}
+      onManualChange={setManual}
+    />
+  )
+}
+
+export function ProjectCodeLoading() {
+  return <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" aria-hidden />
+}