@open-mercato/core 0.6.8-develop.6924.1.a8d208fcdc → 0.6.8-develop.6930.1.1e5976efc3

package/src/modules/eudr/components/CountrySelectField.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import * as React from 'react'
+import { useLocale } from '@open-mercato/shared/lib/i18n/context'
+import {
+  ISO_COUNTRIES,
+  buildCountryOptions,
+  resolveCountryName,
+} from '@open-mercato/shared/lib/location/countries'
+import { ComboboxInput, type ComboboxOption } from '@open-mercato/ui/backend/inputs/ComboboxInput'
+
+export type CountrySelectFieldProps = {
+  id: string
+  value: string | null
+  onChange: (value: string | null) => void
+  disabled?: boolean
+  placeholder?: string
+}
+
+function formatCountryLabel(code: string, name: string): string {
+  return `${name} (${code})`
+}
+
+function normalizeCountryCode(value: string): string {
+  return value.trim().toUpperCase()
+}
+
+export function CountrySelectField({
+  id,
+  value,
+  onChange,
+  disabled,
+  placeholder,
+}: CountrySelectFieldProps) {
+  const locale = useLocale()
+  const options = React.useMemo<ComboboxOption[]>(() => {
+    return buildCountryOptions({
+      locale,
+      transformLabel: formatCountryLabel,
+    }).map((option) => ({
+      value: option.code,
+      label: option.label,
+    }))
+  }, [locale])
+
+  const knownCodes = React.useMemo(() => new Set(ISO_COUNTRIES.map((country) => country.code)), [])
+  const selectedValue = typeof value === 'string' ? normalizeCountryCode(value) : ''
+
+  const resolveLabel = React.useCallback((code: string) => {
+    const normalized = normalizeCountryCode(code)
+    const localizedName = knownCodes.has(normalized)
+      ? resolveCountryName(normalized, { locale })
+      : normalized
+    return formatCountryLabel(normalized, localizedName)
+  }, [knownCodes, locale])
+
+  return (
+    <div id={id}>
+    <ComboboxInput
+      value={selectedValue}
+      onChange={(nextValue) => {
+        const normalized = normalizeCountryCode(nextValue)
+        onChange(normalized.length > 0 ? normalized : null)
+      }}
+      suggestions={options}
+      seedOptions={selectedValue ? [{ value: selectedValue, label: resolveLabel(selectedValue) }] : undefined}
+      resolveLabel={resolveLabel}
+      placeholder={placeholder}
+      disabled={disabled}
+      allowCustomValues={false}
+      clearable
+    />
+    </div>
+  )
+}
+
+export default CountrySelectField

package/src/modules/eudr/components/GeometryInput.tsx

@@ -0,0 +1,170 @@
+"use client"
+
+import * as React from 'react'
+import { FileJson, Upload } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { validatePlotGeometry, type GeometryValidationResult } from '../lib/geometry'
+import { pointAreaExceedsLimit } from './plotForm'
+import { PlotMapPreview } from './PlotMapPreview'
+
+export type GeometryInputProps = {
+  id: string
+  value: string
+  onChange: (value: string) => void
+  disabled?: boolean
+  areaHa?: string
+}
+
+type ParsedGeometryState =
+  | { state: 'empty' }
+  | { state: 'invalid'; errorKey: string }
+  | { state: 'valid'; result: Extract<GeometryValidationResult, { ok: true }> }
+
+export async function readJsonFileText(file: File): Promise<string> {
+  return file.text()
+}
+
+export function parseGeometryText(raw: string): unknown | null {
+  const trimmed = raw.trim()
+  if (!trimmed) return null
+  return JSON.parse(trimmed)
+}
+
+function validateGeometryText(raw: string): ParsedGeometryState {
+  const trimmed = raw.trim()
+  if (!trimmed) return { state: 'empty' }
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(trimmed)
+  } catch {
+    return { state: 'invalid', errorKey: 'geometryInvalid' }
+  }
+  const result = validatePlotGeometry(parsed)
+  if (!result.ok) return { state: 'invalid', errorKey: result.errorKey }
+  return { state: 'valid', result }
+}
+
+function formatArea(value: number | null): string {
+  if (value === null) return ''
+  return new Intl.NumberFormat(undefined, { maximumFractionDigits: 4 }).format(value)
+}
+
+export function GeometryInput({
+  id,
+  value,
+  onChange,
+  disabled,
+  areaHa,
+}: GeometryInputProps) {
+  const translate = useT()
+  const fileInputRef = React.useRef<HTMLInputElement | null>(null)
+  const [showTextarea, setShowTextarea] = React.useState(() => value.trim().length > 0)
+  const validation = React.useMemo(() => validateGeometryText(value), [value])
+  const pointAreaTooLarge =
+    validation.state === 'valid' &&
+    pointAreaExceedsLimit(validation.result.plotType, areaHa)
+
+  React.useEffect(() => {
+    if (value.trim().length > 0) setShowTextarea(true)
+  }, [value])
+
+  const handleFile = React.useCallback(async (files: FileList | null) => {
+    const file = files?.[0]
+    if (!file) return
+    const text = await readJsonFileText(file)
+    onChange(text)
+  }, [onChange])
+
+  return (
+    <div id={id} className="space-y-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => fileInputRef.current?.click()}
+          disabled={disabled}
+        >
+          <Upload className="size-4" aria-hidden="true" />
+          {translate('eudr.plots.geometry.upload')}
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => setShowTextarea((current) => !current)}
+          disabled={disabled}
+        >
+          <FileJson className="size-4" aria-hidden="true" />
+          {translate('eudr.plots.geometry.togglePaste')}
+        </Button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="hidden"
+          accept=".json,.geojson,application/json,application/geo+json"
+          disabled={disabled}
+          onChange={(event) => {
+            void handleFile(event.target.files)
+            event.target.value = ''
+          }}
+        />
+      </div>
+
+      {showTextarea ? (
+        <Textarea
+          value={value}
+          disabled={disabled}
+          rows={10}
+          placeholder={translate('eudr.plots.geometry.placeholder')}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      ) : null}
+
+      {validation.state === 'empty' ? (
+        <div className="rounded-md border border-dashed border-border/70 bg-muted/30 px-3 py-2 text-sm text-muted-foreground">
+          {translate('eudr.plots.geometry.empty')}
+        </div>
+      ) : null}
+
+      {validation.state === 'invalid' ? (
+        <div className="rounded-md border border-status-error-border bg-status-error-bg px-3 py-2 text-sm text-status-error-text">
+          {translate(`eudr.errors.${validation.errorKey}`)}
+        </div>
+      ) : null}
+
+      {validation.state === 'valid' ? (
+        <div className="space-y-3">
+          {pointAreaTooLarge ? (
+            <div className="rounded-md border border-status-error-border bg-status-error-bg px-3 py-2 text-sm text-status-error-text">
+              {translate('eudr.errors.polygonRequired')}
+            </div>
+          ) : (
+            <div className="rounded-md border border-status-success-border bg-status-success-bg px-3 py-2 text-sm text-status-success-text">
+              <div className="font-medium">
+                {translate('eudr.plots.geometry.valid', {
+                  type: translate(`eudr.plotType.${validation.result.plotType}`),
+                })}
+              </div>
+              {validation.result.computedAreaHa !== null ? (
+                <div>
+                  {translate('eudr.plots.geometry.computedArea', {
+                    area: formatArea(validation.result.computedAreaHa),
+                  })}
+                </div>
+              ) : null}
+              {validation.result.warnings.includes('low_precision') ? (
+                <div className="mt-1 text-status-warning-text">
+                  {translate('eudr.errors.low_precision')}
+                </div>
+              ) : null}
+            </div>
+          )}
+          <PlotMapPreview features={[validation.result.feature]} />
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default GeometryInput

package/src/modules/eudr/components/MappingSuggestionsDialog.tsx

@@ -0,0 +1,385 @@
+"use client"
+
+import * as React from 'react'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { DataTable } from '@open-mercato/ui/backend/DataTable'
+import { EmptyState } from '@open-mercato/ui/backend/EmptyState'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { ErrorMessage, LoadingMessage } from '@open-mercato/ui/backend/detail'
+import { apiCall, apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import {
+  EUDR_COMMODITIES,
+  type EudrCommodity,
+} from '../data/validators'
+
+type MappingSuggestion = {
+  productId: string
+  name: string
+  sku: string | null
+  hsCode: string
+  suggestedCommodity: EudrCommodity
+}
+
+type SuggestionsResponse = {
+  items: MappingSuggestion[]
+}
+
+type ApplyResponse = {
+  created: number
+  failed: Array<{ productId: string; errorKey: string }>
+}
+
+type ApplyItem = {
+  productId: string
+  commodity: EudrCommodity
+  hsCode: string
+}
+
+type MappingSuggestionsDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onApplied?: () => void
+}
+
+const commoditySet = new Set<string>(EUDR_COMMODITIES)
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}
+
+function isEudrCommodity(value: unknown): value is EudrCommodity {
+  return typeof value === 'string' && commoditySet.has(value)
+}
+
+function normalizeSuggestion(value: unknown): MappingSuggestion | null {
+  if (!isRecord(value)) return null
+  const { productId, name, sku, hsCode, suggestedCommodity } = value
+  if (
+    typeof productId !== 'string'
+    || typeof name !== 'string'
+    || typeof hsCode !== 'string'
+    || !isEudrCommodity(suggestedCommodity)
+  ) {
+    return null
+  }
+  return {
+    productId,
+    name,
+    sku: typeof sku === 'string' ? sku : null,
+    hsCode,
+    suggestedCommodity,
+  }
+}
+
+function normalizeSuggestionsResponse(value: SuggestionsResponse | null): MappingSuggestion[] {
+  const rawItems = Array.isArray((value as { items?: unknown[] } | null)?.items)
+    ? (value as { items: unknown[] }).items
+    : []
+  return rawItems
+    .map(normalizeSuggestion)
+    .filter((item): item is MappingSuggestion => item !== null)
+}
+
+function formatProductLabel(item: MappingSuggestion): string {
+  return item.sku ? `${item.name} (${item.sku})` : item.name
+}
+
+export function MappingSuggestionsDialog({
+  open,
+  onOpenChange,
+  onApplied,
+}: MappingSuggestionsDialogProps) {
+  const t = useT()
+  const [items, setItems] = React.useState<MappingSuggestion[]>([])
+  const [selectedIds, setSelectedIds] = React.useState<Set<string>>(() => new Set())
+  const [loading, setLoading] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+  const [applying, setApplying] = React.useState(false)
+  const [failures, setFailures] = React.useState<ApplyResponse['failed']>([])
+  const appliedDuringSessionRef = React.useRef(false)
+  const mutationContextId = 'eudr-product-mapping-suggestions:apply'
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    resourceId: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: mutationContextId,
+    blockedMessage: t('ui.forms.flash.saveBlocked'),
+  })
+
+  const closeDialog = React.useCallback((nextOpen: boolean) => {
+    if (!nextOpen && appliedDuringSessionRef.current) {
+      onApplied?.()
+      appliedDuringSessionRef.current = false
+    }
+    onOpenChange(nextOpen)
+  }, [onApplied, onOpenChange])
+
+  React.useEffect(() => {
+    if (!open) return
+    appliedDuringSessionRef.current = false
+    setFailures([])
+    setSelectedIds(new Set<string>())
+
+    let cancelled = false
+    async function loadSuggestions() {
+      setLoading(true)
+      setError(null)
+      try {
+        const fallback: SuggestionsResponse = { items: [] }
+        const call = await apiCall<SuggestionsResponse>(
+          '/api/eudr/product-mappings/suggestions',
+          undefined,
+          { fallback },
+        )
+        if (!call.ok) {
+          setError(t('eudr.suggestions.loadError'))
+          return
+        }
+        const nextItems = normalizeSuggestionsResponse(call.result ?? fallback)
+        if (cancelled) return
+        setItems(nextItems)
+        setSelectedIds(new Set(nextItems.map((item) => item.productId)))
+      } catch {
+        if (!cancelled) setError(t('eudr.suggestions.loadError'))
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+
+    void loadSuggestions()
+    return () => {
+      cancelled = true
+    }
+  }, [open, t])
+
+  const selectedItems = React.useMemo(() => {
+    return items.filter((item) => selectedIds.has(item.productId))
+  }, [items, selectedIds])
+
+  const selectedCount = selectedItems.length
+  const allSelected = items.length > 0 && selectedCount === items.length
+  const partiallySelected = selectedCount > 0 && selectedCount < items.length
+  const canApply = selectedCount > 0 && !applying && !loading
+
+  const toggleAll = React.useCallback((checked: boolean | 'indeterminate') => {
+    if (checked) {
+      setSelectedIds(new Set(items.map((item) => item.productId)))
+    } else {
+      setSelectedIds(new Set<string>())
+    }
+  }, [items])
+
+  const toggleOne = React.useCallback((productId: string, checked: boolean | 'indeterminate') => {
+    setSelectedIds((current) => {
+      const next = new Set(current)
+      if (checked) next.add(productId)
+      else next.delete(productId)
+      return next
+    })
+  }, [])
+
+  const columns = React.useMemo<ColumnDef<MappingSuggestion>[]>(() => [
+    {
+      id: 'select',
+      header: () => (
+        <Checkbox
+          aria-label={t('eudr.suggestions.selectAll')}
+          checked={allSelected ? true : partiallySelected ? 'indeterminate' : false}
+          onCheckedChange={toggleAll}
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          aria-label={t('eudr.suggestions.selectRow', { product: formatProductLabel(row.original) })}
+          checked={selectedIds.has(row.original.productId)}
+          onCheckedChange={(checked) => toggleOne(row.original.productId, checked)}
+        />
+      ),
+      enableSorting: false,
+      size: 48,
+    },
+    {
+      accessorKey: 'name',
+      header: t('eudr.suggestions.columns.product'),
+      cell: ({ row }) => (
+        <div className="min-w-0">
+          <p className="truncate font-medium">{row.original.name}</p>
+          {row.original.sku ? (
+            <p className="truncate text-xs text-muted-foreground">{row.original.sku}</p>
+          ) : null}
+        </div>
+      ),
+      meta: { maxWidth: '260px', truncate: true },
+    },
+    {
+      accessorKey: 'hsCode',
+      header: t('eudr.suggestions.columns.hsCode'),
+      cell: ({ row }) => <span className="font-mono text-xs">{row.original.hsCode}</span>,
+    },
+    {
+      accessorKey: 'suggestedCommodity',
+      header: t('eudr.suggestions.columns.suggestedCommodity'),
+      cell: ({ row }) => (
+        <Tag variant="success">
+          {t(`eudr.commodity.${row.original.suggestedCommodity}`)}
+        </Tag>
+      ),
+    },
+  ], [allSelected, partiallySelected, selectedIds, t, toggleAll, toggleOne])
+
+  const handleApply = React.useCallback(async () => {
+    if (!canApply) return
+    setApplying(true)
+    setFailures([])
+    try {
+      const payloadItems: ApplyItem[] = selectedItems.map((item) => ({
+        productId: item.productId,
+        commodity: item.suggestedCommodity,
+        hsCode: item.hsCode,
+      }))
+      const call = await runMutation({
+        operation: () => apiCallOrThrow<ApplyResponse>(
+          '/api/eudr/product-mappings/suggestions/apply',
+          {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ items: payloadItems }),
+          },
+          { errorMessage: t('eudr.suggestions.applyError') },
+        ),
+        context: {
+          formId: mutationContextId,
+          resourceKind: 'eudr.product_mapping',
+          resourceId: 'bulk-suggestions',
+          retryLastMutation,
+        },
+        mutationPayload: { items: payloadItems },
+      })
+      const result = call.result ?? { created: 0, failed: [] }
+      appliedDuringSessionRef.current = true
+      flash(t('eudr.suggestions.applySuccess', { count: result.created }), result.created > 0 ? 'success' : 'warning')
+      const failures = Array.isArray(result.failed) ? result.failed : []
+      setFailures(failures)
+      if (!failures.length) {
+        closeDialog(false)
+      } else {
+        setSelectedIds(new Set(failures.map((failure) => failure.productId)))
+      }
+    } catch {
+      flash(t('eudr.suggestions.applyError'), 'error')
+    } finally {
+      setApplying(false)
+    }
+  }, [canApply, closeDialog, mutationContextId, retryLastMutation, runMutation, selectedItems, t])
+
+  return (
+    <Dialog open={open} onOpenChange={closeDialog}>
+      <DialogContent
+        size="xl"
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            event.preventDefault()
+            closeDialog(false)
+            return
+          }
+          if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+            event.preventDefault()
+            void handleApply()
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>{t('eudr.suggestions.title')}</DialogTitle>
+        </DialogHeader>
+
+        <div className="min-h-64">
+          {error ? (
+            <ErrorMessage label={error} />
+          ) : loading ? (
+            <LoadingMessage label={t('eudr.suggestions.loading')} />
+          ) : items.length === 0 ? (
+            <EmptyState
+              size="sm"
+              variant="subtle"
+              title={t('eudr.suggestions.empty')}
+              description={t('eudr.suggestions.emptyHint')}
+            />
+          ) : (
+            <div className="space-y-3">
+              <DataTable<MappingSuggestion>
+                title={t('eudr.suggestions.tableTitle')}
+                columns={columns}
+                data={items}
+                emptyState={(
+                  <EmptyState
+                    size="sm"
+                    variant="subtle"
+                    title={t('eudr.suggestions.empty')}
+                    description={t('eudr.suggestions.emptyHint')}
+                  />
+                )}
+                perspective={{ tableId: 'eudr.product_mapping_suggestions.dialog' }}
+                disableRowClick
+              />
+              {failures.length > 0 ? (
+                <div className="rounded-md border border-status-error-border bg-status-error-bg p-3 text-sm text-status-error-text">
+                  <p className="font-medium">{t('eudr.suggestions.failuresTitle')}</p>
+                  <ul className="mt-2 space-y-1">
+                    {failures.map((failure) => {
+                      const item = items.find((candidate) => candidate.productId === failure.productId)
+                      return (
+                        <li key={failure.productId}>
+                          <span className="font-medium">
+                            {item ? formatProductLabel(item) : t('eudr.common.recordUnavailable')}
+                          </span>
+                          {': '}
+                          <span>{t(failure.errorKey)}</span>
+                        </li>
+                      )
+                    })}
+                  </ul>
+                </div>
+              ) : null}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <span className="mr-auto text-sm text-muted-foreground">
+            {t('eudr.suggestions.selectedCount', { count: selectedCount })}
+          </span>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => closeDialog(false)}
+          >
+            {t('eudr.suggestions.cancel')}
+          </Button>
+          <Button
+            type="button"
+            onClick={() => void handleApply()}
+            disabled={!canApply}
+          >
+            {applying ? t('eudr.suggestions.applying') : t('eudr.suggestions.apply')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default MappingSuggestionsDialog