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

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

@@ -0,0 +1,277 @@
+"use client"
+
+import * as React from 'react'
+import { FileJson, Upload } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { CompanySelectField, type CompanySnapshot } from './formConfig'
+import { CountrySelectField } from './CountrySelectField'
+import { readJsonFileText } from './GeometryInput'
+
+type ImportResult = {
+  created: number
+  failed: Array<{ index: number; name: string; errorKey: string }>
+}
+
+type ParsedImportInput =
+  | { ok: true; value: unknown; featureCount: number }
+  | { ok: false; errorKey: string }
+
+export type PlotImportDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onImported?: () => void
+}
+
+function parseImportInput(raw: string): ParsedImportInput {
+  const trimmed = raw.trim()
+  if (!trimmed) return { ok: false, errorKey: 'geometryInvalid' }
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(trimmed)
+  } catch {
+    return { ok: false, errorKey: 'geometryInvalid' }
+  }
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    return { ok: false, errorKey: 'geometryInvalid' }
+  }
+  const record = parsed as Record<string, unknown>
+  if (record.type !== 'FeatureCollection' || !Array.isArray(record.features)) {
+    return { ok: false, errorKey: 'geometryInvalid' }
+  }
+  return { ok: true, value: parsed, featureCount: record.features.length }
+}
+
+function translateErrorKey(translate: ReturnType<typeof useT>, errorKey: string): string {
+  return errorKey.startsWith('eudr.errors.')
+    ? translate(errorKey)
+    : translate(`eudr.errors.${errorKey}`)
+}
+
+export function PlotImportDialog({ open, onOpenChange, onImported }: PlotImportDialogProps) {
+  const translate = useT()
+  const fileInputRef = React.useRef<HTMLInputElement | null>(null)
+  const [supplierEntityId, setSupplierEntityId] = React.useState('')
+  const [, setSupplierSnapshot] = React.useState<CompanySnapshot | null>(null)
+  const [defaultCountry, setDefaultCountry] = React.useState<string | null>(null)
+  const [geoJsonText, setGeoJsonText] = React.useState('')
+  const [result, setResult] = React.useState<ImportResult | null>(null)
+  const [submitting, setSubmitting] = React.useState(false)
+  const parsedInput = React.useMemo(() => parseImportInput(geoJsonText), [geoJsonText])
+  const mutationContextId = 'eudr-plots-import'
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    resourceId: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: mutationContextId,
+    blockedMessage: translate('ui.forms.flash.saveBlocked'),
+  })
+
+  React.useEffect(() => {
+    if (!open) return
+    setSupplierEntityId('')
+    setSupplierSnapshot(null)
+    setDefaultCountry(null)
+    setGeoJsonText('')
+    setResult(null)
+    setSubmitting(false)
+  }, [open])
+
+  const handleOpenChange = React.useCallback((nextOpen: boolean) => {
+    onOpenChange(nextOpen)
+    if (!nextOpen && result) onImported?.()
+  }, [onImported, onOpenChange, result])
+
+  const handleFile = React.useCallback(async (files: FileList | null) => {
+    const file = files?.[0]
+    if (!file) return
+    setGeoJsonText(await readJsonFileText(file))
+  }, [])
+
+  const handleSubmit = React.useCallback(async () => {
+    if (submitting) return
+    if (!supplierEntityId || !parsedInput.ok) {
+      flash(translate('eudr.plots.import.invalid'), 'error')
+      return
+    }
+    setSubmitting(true)
+    try {
+      const response = await runMutation({
+        operation: async () => apiCallOrThrow<ImportResult>(
+          '/api/eudr/plots/import',
+          {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({
+              supplierEntityId,
+              ...(defaultCountry ? { defaultCountry } : {}),
+              featureCollection: parsedInput.value,
+            }),
+          },
+          { fallback: { created: 0, failed: [] }, errorMessage: translate('eudr.plots.import.error') },
+        ),
+        context: {
+          formId: mutationContextId,
+          resourceKind: 'eudr.plot',
+          resourceId: 'import',
+          retryLastMutation,
+        },
+        mutationPayload: {
+          supplierEntityId,
+          defaultCountry,
+        },
+      })
+      const result = response.result ?? { created: 0, failed: [] }
+      setResult(result)
+      if (result.failed.length === 0) {
+        flash(translate('eudr.plots.import.success'), 'success')
+      } else {
+        flash(translate('eudr.plots.import.partialResult', {
+          created: result.created,
+          failed: result.failed.length,
+        }), result.created > 0 ? 'warning' : 'error')
+      }
+    } catch {
+      flash(translate('eudr.plots.import.error'), 'error')
+    } finally {
+      setSubmitting(false)
+    }
+  }, [defaultCountry, mutationContextId, parsedInput, retryLastMutation, runMutation, submitting, supplierEntityId, translate])
+
+  const handleKeyDown = React.useCallback((event: React.KeyboardEvent) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      event.preventDefault()
+      void handleSubmit()
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      handleOpenChange(false)
+    }
+  }, [handleOpenChange, handleSubmit])
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent size="lg" onKeyDown={handleKeyDown}>
+        <DialogHeader>
+          <DialogTitle>{translate('eudr.plots.import.title')}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium" htmlFor="eudr-plot-import-supplier">
+              {translate('eudr.evidenceSubmissions.form.supplier')}
+            </label>
+            <CompanySelectField
+              id="eudr-plot-import-supplier"
+              value={supplierEntityId || null}
+              onChange={(nextValue) => setSupplierEntityId(nextValue ?? '')}
+              onSnapshot={setSupplierSnapshot}
+              placeholder={translate('eudr.evidenceSubmissions.form.supplierPlaceholder')}
+              loadError={translate('eudr.evidenceSubmissions.form.supplierLoadError')}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium" htmlFor="eudr-plot-import-country">
+              {translate('eudr.plots.import.defaultCountry')}
+            </label>
+            <CountrySelectField
+              id="eudr-plot-import-country"
+              value={defaultCountry}
+              onChange={setDefaultCountry}
+              placeholder={translate('eudr.plots.form.originCountryPlaceholder')}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex flex-wrap items-center gap-2">
+              <Button type="button" variant="outline" onClick={() => fileInputRef.current?.click()}>
+                <Upload className="size-4" aria-hidden="true" />
+                {translate('eudr.plots.geometry.upload')}
+              </Button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                className="hidden"
+                accept=".json,.geojson,application/json,application/geo+json"
+                onChange={(event) => {
+                  void handleFile(event.target.files)
+                  event.target.value = ''
+                }}
+              />
+            </div>
+            <Textarea
+              value={geoJsonText}
+              rows={8}
+              placeholder={translate('eudr.plots.import.placeholder')}
+              onChange={(event) => setGeoJsonText(event.target.value)}
+            />
+            {geoJsonText.trim().length > 0 && parsedInput.ok ? (
+              <p className="text-sm text-status-success-text">
+                {translate('eudr.plots.import.featureCount', { count: parsedInput.featureCount })}
+              </p>
+            ) : null}
+            {geoJsonText.trim().length > 0 && !parsedInput.ok ? (
+              <p className="text-sm text-status-error-text">
+                {translateErrorKey(translate, parsedInput.errorKey)}
+              </p>
+            ) : null}
+          </div>
+
+          {result ? (
+            <div className="space-y-3 rounded-md border border-border bg-muted/30 p-3">
+              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+                <FileJson className="size-4 text-muted-foreground" aria-hidden="true" />
+                {translate('eudr.plots.import.createdCount', { count: result.created })}
+              </div>
+              {result.failed.length > 0 ? (
+                <div className="space-y-2">
+                  <p className="text-sm font-medium text-status-warning-text">
+                    {translate('eudr.plots.import.failedTitle', { count: result.failed.length })}
+                  </p>
+                  <div className="max-h-48 overflow-y-auto rounded-md border border-border bg-background">
+                    {result.failed.map((failure) => (
+                      <div key={`${failure.index}:${failure.name}`} className="grid gap-2 border-b border-border px-3 py-2 text-sm last:border-b-0 md:grid-cols-[5rem_1fr_1.5fr]">
+                        <span className="text-muted-foreground">{failure.index + 1}</span>
+                        <span className="truncate text-foreground">{failure.name}</span>
+                        <span className="text-status-error-text">{translateErrorKey(translate, failure.errorKey)}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={() => handleOpenChange(false)}>
+            {translate('eudr.plots.import.close')}
+          </Button>
+          <Button
+            type="button"
+            onClick={() => void handleSubmit()}
+            disabled={submitting || !supplierEntityId || !parsedInput.ok}
+          >
+            {translate('eudr.plots.import.submit')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default PlotImportDialog

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

@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from 'react'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+
+export type PlotMapPreviewProps = {
+  features: unknown[]
+  height?: number
+}
+
+type PlotMapPreviewComponent = (props: PlotMapPreviewProps) => React.ReactElement
+
+export function PlotMapPreview(props: PlotMapPreviewProps): React.ReactElement {
+  const [Impl, setImpl] = React.useState<PlotMapPreviewComponent | null>(null)
+  const height = props.height ?? 280
+
+  React.useEffect(() => {
+    let cancelled = false
+    void import('./PlotMapPreviewImpl').then((mod) => {
+      if (!cancelled) setImpl(() => mod.default)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  if (!Impl) {
+    return (
+      <div
+        data-testid="eudr-plot-map-preview"
+        className="flex items-center justify-center rounded-md border border-border bg-muted/30"
+        style={{ minHeight: height }}
+      >
+        <Spinner className="size-6 text-muted-foreground" />
+      </div>
+    )
+  }
+
+  return (
+    <div data-testid="eudr-plot-map-preview">
+      <Impl {...props} />
+    </div>
+  )
+}
+
+export default PlotMapPreview

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

@@ -0,0 +1,111 @@
+"use client"
+
+import * as React from 'react'
+import * as L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import type { GeoJsonObject } from 'geojson'
+import type { PlotMapPreviewProps } from './PlotMapPreview'
+
+const leafletRuntime = ((L as { default?: typeof L }).default ?? L) as typeof L
+
+const TILE_URL =
+  process.env.NEXT_PUBLIC_OM_DEALS_MAP_TILE_URL ?? 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
+const TILE_ATTRIBUTION =
+  process.env.NEXT_PUBLIC_OM_DEALS_MAP_TILE_ATTRIBUTION ??
+  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+const WORLD_CENTER: L.LatLngTuple = [20, 0]
+const WORLD_ZOOM = 2
+
+function readCssVariable(name: string, fallback: string): string {
+  if (typeof document === 'undefined') return fallback
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  return value || fallback
+}
+
+function featureName(feature: unknown): string | null {
+  if (!feature || typeof feature !== 'object' || Array.isArray(feature)) return null
+  const properties = (feature as { properties?: unknown }).properties
+  if (!properties || typeof properties !== 'object' || Array.isArray(properties)) return null
+  const name = (properties as Record<string, unknown>).name
+  return typeof name === 'string' && name.trim().length > 0 ? name.trim() : null
+}
+
+export default function PlotMapPreviewImpl({
+  features,
+  height = 280,
+}: PlotMapPreviewProps): React.ReactElement {
+  const containerRef = React.useRef<HTMLDivElement | null>(null)
+  const mapRef = React.useRef<L.Map | null>(null)
+  const layerRef = React.useRef<L.GeoJSON | null>(null)
+
+  React.useEffect(() => {
+    const node = containerRef.current
+    if (!node || mapRef.current) return undefined
+    const map = L.map(node, { zoomControl: false, worldCopyJump: true })
+    L.control.zoom({ position: 'topleft' }).addTo(map)
+    L.tileLayer(TILE_URL, { attribution: TILE_ATTRIBUTION, maxZoom: 19 }).addTo(map)
+    map.setView(WORLD_CENTER, WORLD_ZOOM)
+    mapRef.current = map
+    const resizeObserver = new ResizeObserver(() => {
+      map.invalidateSize()
+    })
+    resizeObserver.observe(node)
+    return () => {
+      resizeObserver.disconnect()
+      map.stop()
+      map.remove()
+      mapRef.current = null
+      layerRef.current = null
+    }
+  }, [])
+
+  React.useEffect(() => {
+    const map = mapRef.current
+    if (!map) return
+    if (layerRef.current) {
+      layerRef.current.removeFrom(map)
+      layerRef.current = null
+    }
+    if (!features.length) {
+      map.setView(WORLD_CENTER, WORLD_ZOOM, { animate: false })
+      return
+    }
+
+    const strokeColor = readCssVariable('--status-success-icon', 'var(--status-success-icon)')
+    const fillColor = readCssVariable('--status-success-bg', 'var(--status-success-bg)')
+    const layer = leafletRuntime.geoJSON(features as GeoJsonObject[], {
+      style: () => ({
+        color: strokeColor,
+        fillColor,
+        fillOpacity: 0.25,
+        opacity: 0.95,
+        weight: 2,
+      }),
+      pointToLayer: (_feature, latlng) => leafletRuntime.circleMarker(latlng, {
+        radius: 7,
+        color: strokeColor,
+        fillColor: strokeColor,
+        fillOpacity: 0.85,
+        opacity: 1,
+        weight: 2,
+      }),
+      onEachFeature: (feature, layerInstance) => {
+        const name = featureName(feature)
+        if (name) layerInstance.bindPopup(name)
+      },
+    }).addTo(map)
+    layerRef.current = layer
+    const bounds = layer.getBounds()
+    if (bounds.isValid()) {
+      map.fitBounds(bounds.pad(0.2), { animate: false })
+    } else {
+      map.setView(WORLD_CENTER, WORLD_ZOOM, { animate: false })
+    }
+  }, [features])
+
+  return (
+    <div className="relative overflow-hidden rounded-md border border-border bg-muted/30" style={{ height }}>
+      <div ref={containerRef} className="absolute inset-0" />
+    </div>
+  )
+}

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

@@ -0,0 +1,238 @@
+"use client"
+
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { Plus, X } from 'lucide-react'
+import { resolveCountryName } from '@open-mercato/shared/lib/location/countries'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { LookupSelect, type LookupSelectItem } from '@open-mercato/ui/backend/inputs'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { PICKER_PAGE_SIZE } from './formConfig'
+import { translatePlural } from '../lib/plural'
+
+type PlotOption = {
+  id: string
+  name: string
+  originCountry: string | null
+  plotType: string | null
+  areaHa: number | string | null
+}
+
+type PlotListResponse = {
+  items?: unknown[]
+}
+
+export type PlotMultiSelectFieldProps = {
+  id: string
+  value: string[]
+  onChange: (value: string[]) => void
+  supplierEntityId?: string | null
+  disabled?: boolean
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}
+
+function readString(record: Record<string, unknown>, key: string): string | null {
+  const value = record[key]
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : null
+}
+
+function normalizePlotOption(raw: unknown): PlotOption | null {
+  if (!isRecord(raw)) return null
+  const id = readString(raw, 'id')
+  const name = readString(raw, 'name')
+  if (!id || !name) return null
+  const areaHa = raw.areaHa
+  return {
+    id,
+    name,
+    originCountry: readString(raw, 'originCountry'),
+    plotType: readString(raw, 'plotType'),
+    areaHa: typeof areaHa === 'number' || typeof areaHa === 'string' ? areaHa : null,
+  }
+}
+
+function formatArea(value: PlotOption['areaHa'], emptyLabel: string): string {
+  if (value === null || value === undefined || value === '') return emptyLabel
+  const numeric = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(numeric)) return String(value)
+  return new Intl.NumberFormat(undefined, { maximumFractionDigits: 4 }).format(numeric)
+}
+
+export function PlotMultiSelectField({
+  id,
+  value,
+  onChange,
+  supplierEntityId,
+  disabled,
+}: PlotMultiSelectFieldProps) {
+  const translate = useT()
+  const locale = useLocale()
+  const router = useRouter()
+  const [plotNames, setPlotNames] = React.useState<Record<string, string | null>>({})
+  const selectedPlotIds = React.useMemo(() => (Array.isArray(value) ? value : []), [value])
+  const selectedIds = React.useMemo(() => new Set(selectedPlotIds), [selectedPlotIds])
+  const normalizedSupplierId = typeof supplierEntityId === 'string' && supplierEntityId.trim().length > 0
+    ? supplierEntityId.trim()
+    : null
+  const previousSupplierIdRef = React.useRef(normalizedSupplierId)
+
+  React.useEffect(() => {
+    const previousSupplierId = previousSupplierIdRef.current
+    previousSupplierIdRef.current = normalizedSupplierId
+    if (previousSupplierId === normalizedSupplierId || selectedPlotIds.length === 0) return
+    onChange([])
+  }, [normalizedSupplierId, onChange, selectedPlotIds.length])
+
+  React.useEffect(() => {
+    const missing = selectedPlotIds.filter((plotId) => !(plotId in plotNames))
+    if (!missing.length) return
+    let cancelled = false
+    async function resolveNames() {
+      const params = new URLSearchParams({ ids: missing.join(','), pageSize: '100' })
+      const call = await apiCall<PlotListResponse>(
+        `/api/eudr/plots?${params.toString()}`,
+        undefined,
+        { fallback: { items: [] } },
+      )
+      if (cancelled) return
+      const items = Array.isArray(call.result?.items) ? call.result.items : []
+      const resolved: Record<string, string | null> = {}
+      for (const plotId of missing) resolved[plotId] = null
+      for (const item of items) {
+        const option = normalizePlotOption(item)
+        if (option) resolved[option.id] = option.name
+      }
+      setPlotNames((current) => ({ ...current, ...resolved }))
+    }
+    resolveNames().catch(() => {})
+    return () => {
+      cancelled = true
+    }
+  }, [plotNames, selectedPlotIds])
+
+  const plotSubtitle = React.useCallback((plot: PlotOption): string => {
+    const country = plot.originCountry
+      ? `${resolveCountryName(plot.originCountry, { locale })} (${plot.originCountry})`
+      : translate('eudr.common.empty')
+    const plotType = plot.plotType ?? 'point'
+    const area = translate('eudr.plots.list.areaHaValue', {
+      value: formatArea(plot.areaHa, translate('eudr.common.empty')),
+    })
+    return `${country} - ${translate(`eudr.plotType.${plotType}`)} - ${area}`
+  }, [locale, translate])
+
+  const fetchPlotItems = React.useCallback(async (query: string): Promise<LookupSelectItem[]> => {
+    if (!normalizedSupplierId) return []
+    const params = new URLSearchParams({
+      page: '1',
+      pageSize: String(PICKER_PAGE_SIZE),
+      supplierEntityId: normalizedSupplierId,
+      isActive: 'true',
+    })
+    if (query) params.set('search', query)
+    const call = await apiCall<PlotListResponse>(
+      `/api/eudr/plots?${params.toString()}`,
+      undefined,
+      { fallback: { items: [] } },
+    )
+    if (!call.ok) {
+      flash(translate('eudr.evidenceSubmissions.form.plotsLoadError'), 'error')
+      return []
+    }
+    const items = Array.isArray(call.result?.items) ? call.result.items : []
+    const options = items
+      .map((item) => normalizePlotOption(item))
+      .filter((option): option is PlotOption => option !== null)
+    setPlotNames((current) => {
+      const next = { ...current }
+      for (const option of options) next[option.id] = option.name
+      return next
+    })
+    return options.map((option) => ({
+      id: option.id,
+      title: option.name,
+      subtitle: plotSubtitle(option),
+      disabled: selectedIds.has(option.id),
+    }))
+  }, [normalizedSupplierId, plotSubtitle, selectedIds, translate])
+
+  const addPlot = React.useCallback((plotId: string | null) => {
+    if (!plotId || selectedIds.has(plotId)) return
+    onChange([...selectedPlotIds, plotId])
+  }, [onChange, selectedIds, selectedPlotIds])
+
+  const removePlot = React.useCallback((plotId: string) => {
+    onChange(selectedPlotIds.filter((entry) => entry !== plotId))
+  }, [onChange, selectedPlotIds])
+
+  return (
+    <div id={id} className="space-y-3">
+      {!normalizedSupplierId ? (
+        <p className="rounded-md border border-dashed border-border/70 bg-muted/30 px-3 py-2 text-sm text-muted-foreground">
+          {translate('eudr.evidenceSubmissions.form.plotsSupplierHint')}
+        </p>
+      ) : (
+        <>
+          <div className="flex items-center justify-between gap-3">
+            <p className="text-sm text-muted-foreground">
+              {translatePlural(translate, locale, 'eudr.evidenceSubmissions.form.plotsSelectedCount', selectedPlotIds.length)}
+            </p>
+            <Button
+              type="button"
+              variant="link"
+              size="sm"
+              onClick={() => router.push('/backend/eudr/plots/create')}
+            >
+              <Plus className="size-4" aria-hidden="true" />
+              {translate('eudr.plots.list.actions.create')}
+            </Button>
+          </div>
+          {selectedPlotIds.length > 0 ? (
+            <div className="flex flex-wrap gap-2">
+              {value
+                .filter((plotId) => plotId in plotNames)
+                .map((plotId) => {
+                  const name = plotNames[plotId] ?? translate('eudr.common.recordUnavailable')
+                  return (
+                    <span
+                      key={plotId}
+                      className="inline-flex items-center gap-1 rounded-full border border-border bg-muted/30 py-0.5 pl-3 pr-1 text-sm text-foreground"
+                    >
+                      <span className="max-w-56 truncate">{name}</span>
+                      <IconButton
+                        type="button"
+                        variant="ghost"
+                        size="xs"
+                        disabled={disabled}
+                        aria-label={translate('eudr.evidenceSubmissions.form.plotsRemove', { name })}
+                        onClick={() => removePlot(plotId)}
+                      >
+                        <X className="size-3" aria-hidden="true" />
+                      </IconButton>
+                    </span>
+                  )
+                })}
+            </div>
+          ) : null}
+          <LookupSelect
+            key={normalizedSupplierId}
+            value={null}
+            minQuery={0}
+            disabled={disabled}
+            searchPlaceholder={translate('eudr.plots.list.searchPlaceholder')}
+            fetchItems={fetchPlotItems}
+            onChange={addPlot}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+
+export default PlotMultiSelectField