@open-mercato/core 0.5.1-develop.2663.2c29774b5b → 0.5.1-develop.2681.c559bb2bc3

package/src/modules/customers/components/detail/ChangelogEntryRow.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import * as React from 'react'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Settings2, SquarePen, Plus, Trash2, UserRoundPlus, ArrowRight } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { getInitials } from './utils'
+
+type ChangelogActionType = 'create' | 'edit' | 'delete' | 'assign' | 'system'
+type ChangelogSource = 'ui' | 'api' | 'system'
+
+type ChangelogEntryRowProps = {
+  entry: {
+    id: string
+    createdAt: string
+    actorUserId: string | null
+    actorUserName: string | null
+    actionType: ChangelogActionType
+    source: ChangelogSource
+    description: string | null
+    changes: Array<{
+      fieldName: string
+      oldValue: string
+      newValue: string
+    }>
+  }
+}
+
+const ACTION_ICONS: Record<ChangelogActionType, React.ComponentType<{ className?: string }>> = {
+  create: Plus,
+  edit: SquarePen,
+  delete: Trash2,
+  assign: UserRoundPlus,
+  system: Settings2,
+}
+
+function formatFieldLabel(fieldName: string): string {
+  return fieldName
+    .replace(/\./g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .replace(/^\w/, (char) => char.toUpperCase())
+}
+
+function formatRelativeTime(value: string): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  const diffMs = date.getTime() - Date.now()
+  const diffMinutes = Math.round(diffMs / 60000)
+  const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
+
+  if (Math.abs(diffMinutes) < 60) return formatter.format(diffMinutes, 'minute')
+
+  const diffHours = Math.round(diffMinutes / 60)
+  if (Math.abs(diffHours) < 24) return formatter.format(diffHours, 'hour')
+
+  const diffDays = Math.round(diffHours / 24)
+  return formatter.format(diffDays, 'day')
+}
+
+export function ChangelogEntryRow({ entry }: ChangelogEntryRowProps) {
+  const t = useT()
+  const ActionIcon = ACTION_ICONS[entry.actionType]
+  const createdAt = new Date(entry.createdAt)
+  const timeLabel = Number.isNaN(createdAt.getTime())
+    ? '00:00'
+    : createdAt.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+  const relativeLabel = formatRelativeTime(entry.createdAt)
+  const actorLabel = entry.actorUserName ?? t('customers.changelog.user.system', 'System')
+  const actionLabel = t(`customers.changelog.actions.${entry.actionType}`, formatFieldLabel(entry.actionType))
+  const sourceLabel = entry.source === 'api'
+    ? t('customers.changelog.source.api', 'API')
+    : entry.source === 'system'
+      ? t('customers.changelog.source.system', 'System')
+      : t('customers.changelog.source.ui', 'UI')
+
+  return (
+    <div className="grid grid-cols-[92px_190px_120px_1fr_80px] gap-3 px-5 py-3 text-sm">
+      <div className="space-y-0.5">
+        <div className="font-medium text-foreground">{timeLabel}</div>
+        <div className="text-xs text-muted-foreground">{relativeLabel}</div>
+      </div>
+
+      <div className="flex items-start gap-2">
+        <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground">
+          {entry.actorUserId ? getInitials(actorLabel) : <Settings2 className="size-3.5" />}
+        </div>
+        <span className="truncate pt-1 text-sm text-foreground">{actorLabel}</span>
+      </div>
+
+      <div className="flex items-start gap-2 pt-0.5 text-sm text-foreground">
+        <ActionIcon className="mt-0.5 size-4 text-muted-foreground" />
+        <span>{actionLabel}</span>
+      </div>
+
+      <div className="min-w-0 space-y-1.5">
+        {entry.changes.length > 0 ? (
+          entry.changes.map((change) => (
+            <div key={`${entry.id}-${change.fieldName}`} className="flex flex-wrap items-center gap-2 text-sm">
+              <span className="font-medium text-foreground">{formatFieldLabel(change.fieldName)}</span>
+              <Badge
+                variant="outline"
+                className="max-w-[12rem] rounded-full border-status-error-border bg-status-error-bg px-2 py-0.5 text-xs font-medium text-status-error-text"
+              >
+                <span className="truncate">{change.oldValue || '—'}</span>
+              </Badge>
+              <ArrowRight className="size-3.5 text-muted-foreground" />
+              <Badge
+                variant="outline"
+                className="max-w-[12rem] rounded-full border-status-success-border bg-status-success-bg px-2 py-0.5 text-xs font-medium text-status-success-text"
+              >
+                <span className="truncate">{change.newValue || '—'}</span>
+              </Badge>
+            </div>
+          ))
+        ) : (
+          <span className="text-sm text-muted-foreground">{entry.description ?? actionLabel}</span>
+        )}
+      </div>
+
+      <div className="flex items-start justify-end">
+        <Badge variant="secondary" className="px-1.5 py-0 text-xs">
+          {sourceLabel}
+        </Badge>
+      </div>
+    </div>
+  )
+}
+
+export default ChangelogEntryRow

package/src/modules/customers/components/detail/ChangelogFilters.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { Check, ChevronDown, Download, Search } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+type FilterOption = {
+  value: string
+  label: string
+}
+
+type ChangelogFiltersProps = {
+  dateRange: '7d' | '30d' | '90d'
+  fieldNames: string[]
+  actorUserIds: string[]
+  actionTypes: string[]
+  fieldOptions: FilterOption[]
+  userOptions: FilterOption[]
+  actionOptions: FilterOption[]
+  exportDisabled?: boolean
+  onDateRangeChange: (value: '7d' | '30d' | '90d') => void
+  onFieldNamesChange: (value: string[]) => void
+  onActorUserIdsChange: (value: string[]) => void
+  onActionTypesChange: (value: string[]) => void
+  onExport: () => void
+}
+
+type FilterPopoverProps = {
+  allLabel: string
+  options: FilterOption[]
+  values: string[]
+  triggerLabel: string
+  onChange: (value: string[]) => void
+}
+
+function FilterPopover({ allLabel, options, values, triggerLabel, onChange }: FilterPopoverProps) {
+  const t = useT()
+  const [search, setSearch] = React.useState('')
+  const filteredOptions = React.useMemo(() => {
+    const normalizedSearch = search.trim().toLowerCase()
+    if (!normalizedSearch) return options
+    return options.filter((option) => option.label.toLowerCase().includes(normalizedSearch))
+  }, [options, search])
+  const valuesSet = React.useMemo(() => new Set(values), [values])
+
+  const toggleValue = React.useCallback((value: string) => {
+    if (valuesSet.has(value)) {
+      onChange(values.filter((entry) => entry !== value))
+      return
+    }
+    onChange([...values, value])
+  }, [onChange, values, valuesSet])
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button type="button" variant="outline" size="sm" className="h-8 justify-between gap-2 rounded-lg px-3 text-xs">
+          <span className="truncate">{triggerLabel}</span>
+          <ChevronDown className="size-3.5 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-72 space-y-3 p-3">
+        <div className="relative">
+          <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={t('customers.changelog.filters.search', 'Search')}
+            className="h-8 pl-8 text-xs"
+          />
+        </div>
+
+        <div className="max-h-64 space-y-1 overflow-y-auto">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => onChange([])}
+            className="h-auto w-full justify-start px-2 py-1.5 text-xs"
+          >
+            {values.length === 0 ? <Check className="mr-2 size-3.5 text-foreground" /> : <span className="mr-5" />}
+            {allLabel}
+          </Button>
+          {filteredOptions.map((option) => (
+            <Button
+              key={option.value}
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => toggleValue(option.value)}
+              className="h-auto w-full justify-start px-2 py-1.5 text-xs"
+            >
+              {valuesSet.has(option.value) ? <Check className="mr-2 size-3.5 text-foreground" /> : <span className="mr-5" />}
+              <span className="truncate">{option.label}</span>
+            </Button>
+          ))}
+          {filteredOptions.length === 0 ? (
+            <div className="px-2 py-3 text-xs text-muted-foreground">
+              {t('customers.changelog.filters.empty', 'No matching options')}
+            </div>
+          ) : null}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export function ChangelogFilters({
+  dateRange,
+  fieldNames,
+  actorUserIds,
+  actionTypes,
+  fieldOptions,
+  userOptions,
+  actionOptions,
+  exportDisabled = false,
+  onDateRangeChange,
+  onFieldNamesChange,
+  onActorUserIdsChange,
+  onActionTypesChange,
+  onExport,
+}: ChangelogFiltersProps) {
+  const t = useT()
+
+  const describeSelection = React.useCallback((allLabel: string, options: FilterOption[], values: string[]) => {
+    if (values.length === 0) return allLabel
+    if (values.length === 1) return options.find((option) => option.value === values[0])?.label ?? allLabel
+    return t('customers.changelog.filters.selectedCount', '{{count}} selected', { count: values.length })
+  }, [t])
+
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border bg-card px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-overline font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+          {t('customers.changelog.filter', 'Filter')}:
+        </span>
+        <FilterPopover
+          allLabel={t('customers.changelog.allFields', 'All fields')}
+          options={fieldOptions}
+          values={fieldNames}
+          triggerLabel={describeSelection(t('customers.changelog.allFields', 'All fields'), fieldOptions, fieldNames)}
+          onChange={onFieldNamesChange}
+        />
+        <FilterPopover
+          allLabel={t('customers.changelog.allUsers', 'All users')}
+          options={userOptions}
+          values={actorUserIds}
+          triggerLabel={describeSelection(t('customers.changelog.allUsers', 'All users'), userOptions, actorUserIds)}
+          onChange={onActorUserIdsChange}
+        />
+        <FilterPopover
+          allLabel={t('customers.changelog.allActions', 'All actions')}
+          options={actionOptions}
+          values={actionTypes}
+          triggerLabel={describeSelection(t('customers.changelog.allActions', 'All actions'), actionOptions, actionTypes)}
+          onChange={onActionTypesChange}
+        />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="relative">
+          <select
+            value={dateRange}
+            onChange={(event) => onDateRangeChange(event.target.value as '7d' | '30d' | '90d')}
+            className="h-8 min-w-32 appearance-none rounded-lg border bg-background pl-3 pr-8 text-xs text-foreground outline-none ring-offset-background focus:ring-2 focus:ring-ring"
+          >
+            <option value="7d">{t('customers.changelog.last7days', 'Last 7 days')}</option>
+            <option value="30d">{t('customers.changelog.last30days', 'Last 30 days')}</option>
+            <option value="90d">{t('customers.changelog.last90days', 'Last 90 days')}</option>
+          </select>
+          <ChevronDown className="pointer-events-none absolute right-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+        </div>
+
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onExport}
+          disabled={exportDisabled}
+          className="h-8 rounded-lg px-3 text-xs"
+        >
+          <Download className="mr-1.5 size-3.5" />
+          {t('customers.changelog.exportCsv', 'Export CSV')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default ChangelogFilters

package/src/modules/customers/components/detail/ChangelogKpiCards.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import { ArrowDownRight, ArrowUpRight, Minus } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+type ChangelogKpiCardsProps = {
+  loading?: boolean
+  totalCount: number
+  todayCount: number
+  yesterdayCount: number
+  uniqueUsers: number
+  criticalFieldCount: number
+  criticalFieldLabel: string
+  dateRangeDays: number
+}
+
+type MetricCardProps = {
+  title: string
+  value: number
+  subtitle: string
+  trend?: {
+    value: number
+    direction: 'up' | 'down' | 'unchanged'
+  }
+  loading?: boolean
+}
+
+function MetricCard({ title, value, subtitle, trend, loading }: MetricCardProps) {
+  return (
+    <div className="rounded-xl border bg-card px-5 py-4">
+      <div className="text-overline font-semibold uppercase tracking-[0.12em] text-muted-foreground">{title}</div>
+      <div className="mt-3 text-3xl font-semibold tracking-tight text-foreground">
+        {loading ? '...' : value.toLocaleString()}
+      </div>
+      {trend ? (
+        <div className="mt-2 flex flex-wrap items-center gap-2">
+          <span
+            className={[
+              'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',
+              trend.direction === 'up'
+                ? 'bg-status-success-bg text-status-success-text'
+                : trend.direction === 'down'
+                  ? 'bg-destructive/10 text-destructive'
+                  : 'bg-muted text-muted-foreground',
+            ].join(' ')}
+          >
+            {trend.direction === 'up' ? <ArrowUpRight className="size-3" /> : null}
+            {trend.direction === 'down' ? <ArrowDownRight className="size-3" /> : null}
+            {trend.direction === 'unchanged' ? <Minus className="size-3" /> : null}
+            {trend.value > 0 ? '+' : ''}
+            {trend.value}
+          </span>
+          <span className="text-xs text-muted-foreground">{subtitle}</span>
+        </div>
+      ) : (
+        <div className="mt-2 text-xs text-muted-foreground">{subtitle}</div>
+      )}
+    </div>
+  )
+}
+
+export function ChangelogKpiCards({
+  loading = false,
+  totalCount,
+  todayCount,
+  yesterdayCount,
+  uniqueUsers,
+  criticalFieldCount,
+  criticalFieldLabel,
+  dateRangeDays,
+}: ChangelogKpiCardsProps) {
+  const t = useT()
+  const trendValue = todayCount - yesterdayCount
+  const trendDirection = trendValue > 0 ? 'up' : trendValue < 0 ? 'down' : 'unchanged'
+
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+      <MetricCard
+        loading={loading}
+        title={t('customers.changelog.kpi.totalChanges', 'All changes')}
+        value={totalCount}
+        subtitle={t('customers.changelog.kpi.period', 'last {{days}} days', { days: dateRangeDays })}
+      />
+      <MetricCard
+        loading={loading}
+        title={t('customers.changelog.kpi.today', 'Today')}
+        value={todayCount}
+        subtitle={t('customers.changelog.kpi.vsYesterday', 'vs yesterday')}
+        trend={{ value: trendValue, direction: trendDirection }}
+      />
+      <MetricCard
+        loading={loading}
+        title={t('customers.changelog.kpi.users', 'Users')}
+        value={uniqueUsers}
+        subtitle={t('customers.changelog.kpi.active', 'active')}
+      />
+      <MetricCard
+        loading={loading}
+        title={t('customers.changelog.kpi.criticalFields', 'Critical fields')}
+        value={criticalFieldCount}
+        subtitle={criticalFieldLabel}
+      />
+    </div>
+  )
+}
+
+export default ChangelogKpiCards