@open-mercato/core 0.6.4-develop.4217.1.c9aa050183 → 0.6.4-develop.4236.1.9fa6806b34

package/src/modules/staff/lib/timesheets-ui/CalendarPicker.tsx

@@ -0,0 +1,229 @@
+"use client"
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react'
+
+type CalendarPickerProps = {
+  selectedWeekStart: Date
+  onWeekSelect: (weekStart: Date) => void
+}
+
+function getMonday(date: Date): Date {
+  const result = new Date(date)
+  const day = result.getDay()
+  const diff = day === 0 ? -6 : 1 - day
+  result.setDate(result.getDate() + diff)
+  result.setHours(0, 0, 0, 0)
+  return result
+}
+
+function getWeekNumber(date: Date): number {
+  const target = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+  target.setUTCDate(target.getUTCDate() + 4 - (target.getUTCDay() || 7))
+  const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1))
+  return Math.ceil(((target.getTime() - yearStart.getTime()) / 86400000 + 1) / 7)
+}
+
+function isSameDay(first: Date, second: Date): boolean {
+  return first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth() && first.getDate() === second.getDate()
+}
+
+function isSameWeek(first: Date, second: Date): boolean {
+  return isSameDay(getMonday(first), getMonday(second))
+}
+
+function buildWeeks(year: number, month: number): Date[][] {
+  const firstDay = new Date(year, month, 1)
+  const start = getMonday(firstDay)
+  const weeks: Date[][] = []
+  const current = new Date(start)
+
+  for (let weekIdx = 0; weekIdx < 6; weekIdx++) {
+    const week: Date[] = []
+    for (let dayIdx = 0; dayIdx < 7; dayIdx++) {
+      week.push(new Date(current))
+      current.setDate(current.getDate() + 1)
+    }
+    weeks.push(week)
+    if (current.getMonth() !== month && weekIdx >= 3) break
+  }
+  return weeks
+}
+
+function getLocalizedDayHeaders(): string[] {
+  const baseMonday = new Date(2024, 0, 1) // Known Monday
+  return Array.from({ length: 7 }, (_, idx) => {
+    const date = new Date(baseMonday)
+    date.setDate(date.getDate() + idx)
+    return date.toLocaleDateString(undefined, { weekday: 'narrow' })
+  })
+}
+
+export function CalendarPicker({ selectedWeekStart, onWeekSelect }: CalendarPickerProps) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const [viewYear, setViewYear] = React.useState(selectedWeekStart.getFullYear())
+  const [viewMonth, setViewMonth] = React.useState(selectedWeekStart.getMonth())
+  const containerRef = React.useRef<HTMLDivElement>(null)
+
+  const dayHeaders = React.useMemo(() => getLocalizedDayHeaders(), [])
+
+  React.useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setOpen(false)
+      }
+    }
+    if (open) document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [open])
+
+  React.useEffect(() => {
+    setViewYear(selectedWeekStart.getFullYear())
+    setViewMonth(selectedWeekStart.getMonth())
+  }, [selectedWeekStart])
+
+  const weeks = React.useMemo(() => buildWeeks(viewYear, viewMonth), [viewYear, viewMonth])
+
+  const monthLabel = React.useMemo(() => {
+    return new Date(viewYear, viewMonth, 1).toLocaleString(undefined, { month: 'long', year: 'numeric' })
+  }, [viewYear, viewMonth])
+
+  const today = React.useMemo(() => new Date(), [])
+
+  const handleWeekClick = React.useCallback((monday: Date) => {
+    onWeekSelect(monday)
+    setOpen(false)
+  }, [onWeekSelect])
+
+  const goToPrevMonth = React.useCallback(() => {
+    setViewMonth((prev) => {
+      if (prev === 0) { setViewYear((yr) => yr - 1); return 11 }
+      return prev - 1
+    })
+  }, [])
+
+  const goToNextMonth = React.useCallback(() => {
+    setViewMonth((prev) => {
+      if (prev === 11) { setViewYear((yr) => yr + 1); return 0 }
+      return prev + 1
+    })
+  }, [])
+
+  return (
+    <div ref={containerRef} className="relative inline-block">
+      <IconButton
+        variant="outline"
+        size="sm"
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        aria-label={t('staff.timesheets.my.calendar.open', 'Open calendar')}
+      >
+        <CalendarDays className="size-4" />
+      </IconButton>
+
+      {open && (
+        <div className="absolute left-0 z-20 mt-1 w-[280px] rounded-lg border bg-popover p-3 shadow-lg">
+          {/* Quick links */}
+          <div className="mb-3 flex gap-2 border-b pb-2">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-auto px-2 py-1 text-xs"
+              onClick={() => handleWeekClick(getMonday(new Date()))}
+            >
+              {t('staff.timesheets.my.calendar.thisWeek', 'This week')}
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-auto px-2 py-1 text-xs"
+              onClick={() => {
+                const lastWeek = new Date()
+                lastWeek.setDate(lastWeek.getDate() - 7)
+                handleWeekClick(getMonday(lastWeek))
+              }}
+            >
+              {t('staff.timesheets.my.calendar.lastWeek', 'Last week')}
+            </Button>
+          </div>
+
+          {/* Month navigation */}
+          <div className="mb-2 flex items-center justify-between">
+            <IconButton
+              variant="ghost"
+              size="xs"
+              type="button"
+              onClick={goToPrevMonth}
+              aria-label={t('staff.timesheets.my.calendar.prevMonth', 'Previous month')}
+            >
+              <ChevronLeft className="size-3.5" />
+            </IconButton>
+            <span className="text-sm font-medium">{monthLabel}</span>
+            <IconButton
+              variant="ghost"
+              size="xs"
+              type="button"
+              onClick={goToNextMonth}
+              aria-label={t('staff.timesheets.my.calendar.nextMonth', 'Next month')}
+            >
+              <ChevronRight className="size-3.5" />
+            </IconButton>
+          </div>
+
+          {/* Day headers */}
+          <div className="grid grid-cols-[32px_repeat(7,1fr)] gap-0 mb-1">
+            <div />
+            {dayHeaders.map((day, idx) => (
+              <div key={idx} className="text-center text-[11px] font-medium text-muted-foreground py-1">
+                {day}
+              </div>
+            ))}
+          </div>
+
+          {/* Week rows */}
+          {weeks.map((week) => {
+            const monday = week[0]
+            const weekNum = getWeekNumber(monday)
+            const isSelected = isSameWeek(monday, selectedWeekStart)
+
+            return (
+              <Button
+                key={monday.toISOString()}
+                type="button"
+                variant="ghost"
+                className={`grid grid-cols-[32px_repeat(7,1fr)] gap-0 w-full h-auto rounded-md px-0 py-0 hover:bg-muted
+                  ${isSelected ? 'bg-primary text-primary-foreground hover:bg-primary/90' : ''}`}
+                onClick={() => handleWeekClick(monday)}
+              >
+                <span className={`text-[10px] font-medium py-1.5 text-center ${isSelected ? 'text-primary-foreground/70' : 'text-muted-foreground'}`}>
+                  {weekNum}
+                </span>
+                {week.map((date) => {
+                  const inMonth = date.getMonth() === viewMonth
+                  const isTodayDate = isSameDay(date, today)
+                  return (
+                    <span
+                      key={date.toISOString()}
+                      className={`text-xs py-1.5 text-center
+                        ${!inMonth && !isSelected ? 'text-muted-foreground/40' : ''}
+                        ${isTodayDate && !isSelected ? 'font-bold text-primary' : ''}
+                        ${isTodayDate && isSelected ? 'font-bold underline' : ''}`}
+                    >
+                      {date.getDate()}
+                    </span>
+                  )
+                })}
+              </Button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/modules/staff/lib/timesheets-ui/ColorPicker.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from 'react'
+import { Check } from 'lucide-react'
+import { PROJECT_COLORS } from './colors'
+
+export type ColorPickerProps = {
+  value: string | null | undefined
+  onChange: (value: string | null) => void
+  allowReset?: boolean
+  resetLabel?: string
+  id?: string
+  disabled?: boolean
+}
+
+export function ColorPicker({
+  value,
+  onChange,
+  allowReset = true,
+  resetLabel = 'Auto',
+  id,
+  disabled = false,
+}: ColorPickerProps) {
+  return (
+    <div id={id} className="flex flex-wrap items-center gap-2" role="radiogroup">
+      {PROJECT_COLORS.map((color) => {
+        const selected = value === color.key
+        return (
+          <button
+            key={color.key}
+            type="button"
+            role="radio"
+            aria-checked={selected}
+            aria-label={color.key}
+            title={color.key}
+            disabled={disabled}
+            onClick={() => onChange(color.key)}
+            className={`inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-full transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ${
+              selected ? 'ring-2 ring-offset-1 ring-ring' : ''
+            }`}
+            style={{ backgroundColor: color.hex }}
+          >
+            {selected ? <Check className="h-3.5 w-3.5 text-white" strokeWidth={3} /> : null}
+          </button>
+        )
+      })}
+      {allowReset ? (
+        <button
+          type="button"
+          role="radio"
+          aria-checked={value == null}
+          aria-label={resetLabel}
+          title={resetLabel}
+          disabled={disabled}
+          onClick={() => onChange(null)}
+          className={`inline-flex h-6 items-center cursor-pointer rounded-full border border-dashed border-muted-foreground/50 bg-transparent px-2 text-[11px] text-muted-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ${
+            value == null ? 'ring-2 ring-offset-1 ring-ring' : ''
+          }`}
+        >
+          {resetLabel}
+        </button>
+      ) : null}
+    </div>
+  )
+}

package/src/modules/staff/lib/timesheets-ui/CreateProjectDialog.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import * as React from 'react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { CrudForm } from '@open-mercato/ui/backend/CrudForm'
+import { createCrud } from '@open-mercato/ui/backend/utils/crud'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { E } from '#generated/entities.ids.generated'
+import {
+  buildProjectPayload,
+  createProjectFormFields,
+  createProjectFormGroups,
+  createProjectFormSchema,
+  type ProjectFormValues,
+} from '../../backend/staff/timesheets/projects/projectFormConfig'
+
+type CreateProjectDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onProjectCreated: (project: { id: string; name: string; code: string | null }) => void
+}
+
+export function CreateProjectDialog({ open, onOpenChange, onProjectCreated }: CreateProjectDialogProps) {
+  const t = useT()
+
+  const formSchema = React.useMemo(() => createProjectFormSchema(), [])
+  const fields = React.useMemo(() => createProjectFormFields(t), [t])
+  const groups = React.useMemo(() => createProjectFormGroups(t), [t])
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>
+            {t('staff.timesheets.projects.form.createTitle', 'Create project')}
+          </DialogTitle>
+        </DialogHeader>
+        <CrudForm<ProjectFormValues>
+          embedded
+          fields={fields}
+          groups={groups}
+          schema={formSchema}
+          initialValues={{}}
+          entityIds={[E.staff.staff_time_project]}
+          submitLabel={t('staff.timesheets.projects.form.actions.create', 'Create')}
+          extraActions={(
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              {t('staff.timesheets.projects.form.actions.cancel', 'Cancel')}
+            </Button>
+          )}
+          onSubmit={async (values) => {
+            const payload = buildProjectPayload(values)
+
+            const { result: created } = await createCrud<{ id?: string; name?: string; code?: string | null }>(
+              'staff/timesheets/time-projects',
+              payload,
+              { errorMessage: t('staff.timesheets.projects.errors.save', 'Failed to save project.') },
+            )
+
+            const newId = created?.id
+            if (!newId) {
+              throw createCrudFormError(
+                t('staff.timesheets.projects.errors.save', 'Failed to save project.'),
+              )
+            }
+
+            // Auto-assign creator to the project (best-effort)
+            try {
+              const selfRes = await apiCall<{ member?: { id?: string } | null }>('/api/staff/team-members/self')
+              const staffMemberId = selfRes.result?.member?.id
+              if (staffMemberId) {
+                await createCrud('staff/timesheets/time-projects/' + newId + '/employees', {
+                  staffMemberId,
+                  assignedStartDate: new Date().toISOString().slice(0, 10),
+                  status: 'active',
+                }, { errorMessage: '' })
+              }
+            } catch {
+              // non-critical — project created, self-assignment is best-effort
+            }
+
+            onProjectCreated({
+              id: newId,
+              name: created?.name ?? values.name.trim(),
+              code: created?.code ?? values.code?.trim() ?? null,
+            })
+
+            flash(t('staff.timesheets.projects.messages.saved', 'Project saved.'), 'success')
+            onOpenChange(false)
+          }}
+        />
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/modules/staff/lib/timesheets-ui/ListView.tsx

@@ -0,0 +1,230 @@
+'use client'
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { ProjectColorDot } from './ProjectColorDot'
+
+type TimeEntry = {
+  id: string
+  date: string
+  durationMinutes: number
+  projectId: string
+  projectName: string
+  projectCode: string | null
+  projectColor: string | null
+  notes: string | null
+  source: string
+  startedAt: string | null
+  endedAt: string | null
+}
+
+type ListViewProps = {
+  entries: TimeEntry[]
+  onEntryUpdated?: () => void
+}
+
+function getLocalDateStr(date: Date): string {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+function formatDayLabel(dateStr: string, translate: TranslateFn): string {
+  const today = new Date()
+  const todayStr = getLocalDateStr(today)
+
+  const yesterday = new Date(today)
+  yesterday.setDate(yesterday.getDate() - 1)
+  const yesterdayStr = getLocalDateStr(yesterday)
+
+  if (dateStr === todayStr) return translate('staff.timesheets.my.list.today', 'Today')
+  if (dateStr === yesterdayStr) return translate('staff.timesheets.my.list.yesterday', 'Yesterday')
+
+  const date = new Date(dateStr + 'T00:00:00')
+  const dayName = date.toLocaleDateString(undefined, { weekday: 'short' })
+  const day = date.getDate()
+  const month = date.toLocaleDateString(undefined, { month: 'short' })
+
+  return `${dayName}, ${day} ${month}`
+}
+
+function formatDuration(minutes: number): string {
+  if (minutes < 60) return `${minutes}m`
+
+  const hours = Math.floor(minutes / 60)
+  const remainingMinutes = minutes % 60
+
+  if (remainingMinutes === 0) return `${hours}h`
+  return `${hours}h ${remainingMinutes}m`
+}
+
+function formatTimeRange(startedAt: string, endedAt: string): string {
+  const start = new Date(startedAt)
+  const end = new Date(endedAt)
+
+  const format = (date: Date) =>
+    date.toLocaleTimeString(undefined, {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    })
+
+  return `${format(start)} - ${format(end)}`
+}
+
+function InlineDescription({
+  entryId,
+  initialValue,
+  placeholder,
+  onSaved,
+}: {
+  entryId: string
+  initialValue: string | null
+  placeholder: string
+  onSaved?: () => void
+}) {
+  const [editing, setEditing] = React.useState(false)
+  const [value, setValue] = React.useState(initialValue ?? '')
+  const [saving, setSaving] = React.useState(false)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  React.useEffect(() => {
+    if (editing && inputRef.current) inputRef.current.focus()
+  }, [editing])
+
+  const save = React.useCallback(async () => {
+    const trimmed = value.trim()
+    if (trimmed === (initialValue ?? '')) {
+      setEditing(false)
+      return
+    }
+    setSaving(true)
+    try {
+      await apiCall(`/api/staff/timesheets/time-entries`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: entryId, notes: trimmed || null }),
+      })
+      onSaved?.()
+    } catch {
+      // silent
+    } finally {
+      setSaving(false)
+      setEditing(false)
+    }
+  }, [entryId, value, initialValue, onSaved])
+
+  if (!editing) {
+    return (
+      <button
+        type="button"
+        onClick={() => setEditing(true)}
+        className={`text-sm text-left cursor-pointer hover:underline ${
+          initialValue ? '' : 'text-muted-foreground italic'
+        }`}
+      >
+        {initialValue || placeholder}
+      </button>
+    )
+  }
+
+  return (
+    <input
+      ref={inputRef}
+      type="text"
+      value={value}
+      disabled={saving}
+      onChange={(e) => setValue(e.target.value)}
+      onBlur={() => { void save() }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') { void save() }
+        if (e.key === 'Escape') { setValue(initialValue ?? ''); setEditing(false) }
+      }}
+      placeholder={placeholder}
+      className="text-sm w-full bg-transparent border-b border-primary/40 outline-none py-0.5 placeholder:text-muted-foreground/50"
+    />
+  )
+}
+
+export function ListView({ entries, onEntryUpdated }: ListViewProps) {
+  const t = useT()
+
+  if (entries.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-12 text-sm text-muted-foreground">
+        {t('staff.timesheets.my.list.noEntries', 'No entries for this period.')}
+      </div>
+    )
+  }
+
+  const grouped = new Map<string, TimeEntry[]>()
+  for (const entry of entries) {
+    const existing = grouped.get(entry.date)
+    if (existing) {
+      existing.push(entry)
+    } else {
+      grouped.set(entry.date, [entry])
+    }
+  }
+
+  const sortedDays = [...grouped.keys()].sort((a, b) => b.localeCompare(a))
+
+  return (
+    <div>
+      {sortedDays.map((dateStr) => {
+        const dayEntries = grouped.get(dateStr)!
+        const dailyTotal = dayEntries.reduce(
+          (sum, entry) => sum + entry.durationMinutes,
+          0,
+        )
+
+        return (
+          <div key={dateStr} className="rounded-lg border mb-4">
+            <div className="flex justify-between items-center p-4 border-b bg-muted/30 font-medium text-sm">
+              <span>{formatDayLabel(dateStr, t)}</span>
+              <span className="font-mono tabular-nums">
+                {formatDuration(dailyTotal)}
+              </span>
+            </div>
+
+            {dayEntries.map((entry) => (
+              <div
+                key={entry.id}
+                className="flex items-center justify-between p-3 border-b last:border-0 hover:bg-muted/20"
+              >
+                <div className="flex flex-col gap-1 min-w-0 flex-1 mr-4">
+                  <InlineDescription
+                    entryId={entry.id}
+                    initialValue={entry.notes}
+                    placeholder={t('staff.timesheets.my.list.addDescription', 'Add description')}
+                    onSaved={onEntryUpdated}
+                  />
+                  <span className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground">
+                    <ProjectColorDot colorKey={entry.projectColor} projectName={entry.projectName} size="xs" />
+                    {entry.projectName}
+                  </span>
+                </div>
+
+                <div className="flex flex-col items-end gap-1 shrink-0">
+                  {entry.source === 'timer' &&
+                  entry.startedAt &&
+                  entry.endedAt ? (
+                    <span className="text-xs text-muted-foreground">
+                      {formatTimeRange(entry.startedAt, entry.endedAt)}
+                    </span>
+                  ) : null}
+                  <span className="text-sm font-mono tabular-nums">
+                    {formatDuration(entry.durationMinutes)}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/modules/staff/lib/timesheets-ui/ProjectColorDot.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from 'react'
+import { resolveProjectColorHex } from './colors'
+
+export type ProjectColorDotSize = 'xs' | 'sm' | 'md'
+
+export type ProjectColorDotProps = {
+  colorKey: string | null | undefined
+  projectName: string | null | undefined
+  size?: ProjectColorDotSize
+  className?: string
+  title?: string
+}
+
+const SIZE_CLASS: Record<ProjectColorDotSize, string> = {
+  xs: 'h-2 w-2',
+  sm: 'h-2.5 w-2.5',
+  md: 'h-3 w-3',
+}
+
+export function ProjectColorDot({
+  colorKey,
+  projectName,
+  size = 'sm',
+  className,
+  title,
+}: ProjectColorDotProps) {
+  const hex = resolveProjectColorHex(colorKey, projectName)
+  const base = 'inline-block shrink-0 rounded-full'
+  const classes = [base, SIZE_CLASS[size], className].filter(Boolean).join(' ')
+  return (
+    <span
+      aria-hidden="true"
+      title={title}
+      className={classes}
+      style={{ backgroundColor: hex }}
+    />
+  )
+}