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

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

@@ -0,0 +1,417 @@
+"use client"
+
+import * as React from 'react'
+import { Plus } from 'lucide-react'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { DataTable } from '@open-mercato/ui/backend/DataTable'
+import { RowActions } from '@open-mercato/ui/backend/RowActions'
+import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { apiCall, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
+import { createCrud, deleteCrud, updateCrud } from '@open-mercato/ui/backend/utils/crud'
+import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimisticLock'
+import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { surfaceRecordConflict } from '@open-mercato/ui/backend/conflicts'
+import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
+import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
+import {
+  EUDR_MITIGATION_STATUSES,
+  EUDR_MITIGATION_TYPES,
+  type EudrMitigationStatus,
+  type EudrMitigationType,
+} from '../data/validators'
+
+type MitigationActionRow = {
+  id: string
+  riskAssessmentId: string
+  actionType: EudrMitigationType | null
+  title: string
+  description: string | null
+  status: EudrMitigationStatus | null
+  dueDate: string | null
+  completedAt: string | null
+  notes: string | null
+  updatedAt: string
+}
+
+type MitigationActionsResponse = {
+  items?: MitigationActionRow[]
+}
+
+type MitigationActionFormValues = {
+  actionType: string
+  title: string
+  description: string
+  status: string
+  dueDate: string
+  notes: string
+} & Record<string, unknown>
+
+type MutationContext = {
+  formId: string
+  resourceKind: string
+  resourceId: string
+  retryLastMutation: () => Promise<boolean>
+}
+
+export type MitigationActionsSectionProps = {
+  riskAssessmentId: string
+}
+
+function optionalText(value: unknown): string | null {
+  if (typeof value !== 'string') return null
+  const trimmed = value.trim()
+  return trimmed.length ? trimmed : null
+}
+
+function formatDate(value: string | null | undefined, emptyLabel: string, locale: string): string {
+  if (!value) return emptyLabel
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return emptyLabel
+  return date.toLocaleDateString(locale || undefined)
+}
+
+function formatDateInput(value: string | null | undefined): string {
+  if (!value) return ''
+  return value.slice(0, 10)
+}
+
+function isOverdue(row: MitigationActionRow): boolean {
+  if (!row.dueDate || row.status === 'completed') return false
+  const date = new Date(row.dueDate)
+  return !Number.isNaN(date.getTime()) && date.getTime() < Date.now()
+}
+
+function statusVariant(status: string | null | undefined): 'neutral' | 'info' | 'success' {
+  if (status === 'in_progress') return 'info'
+  if (status === 'completed') return 'success'
+  return 'neutral'
+}
+
+function actionTypeOptions(translate: ReturnType<typeof useT>) {
+  return EUDR_MITIGATION_TYPES.map((type) => ({
+    value: type,
+    label: translate(`eudr.mitigationType.${type}`),
+  }))
+}
+
+function actionStatusOptions(translate: ReturnType<typeof useT>) {
+  return EUDR_MITIGATION_STATUSES.map((status) => ({
+    value: status,
+    label: translate(`eudr.mitigationStatus.${status}`),
+  }))
+}
+
+export function MitigationActionsSection({
+  riskAssessmentId,
+}: MitigationActionsSectionProps) {
+  const translate = useT()
+  const locale = useLocale()
+  const { confirm, ConfirmDialogElement } = useConfirmDialog()
+  const [rows, setRows] = React.useState<MitigationActionRow[]>([])
+  const [loading, setLoading] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+  const [dialogMode, setDialogMode] = React.useState<'create' | 'edit' | null>(null)
+  const [editingRow, setEditingRow] = React.useState<MitigationActionRow | null>(null)
+  const [reloadToken, setReloadToken] = React.useState(0)
+  const mutationContextId = `eudr-mitigation-actions:${riskAssessmentId}`
+  const { runMutation, retryLastMutation } = useGuardedMutation<MutationContext>({
+    contextId: mutationContextId,
+    blockedMessage: translate('ui.forms.flash.saveBlocked'),
+  })
+
+  React.useEffect(() => {
+    let cancelled = false
+    async function loadRows() {
+      setLoading(true)
+      setError(null)
+      try {
+        const call = await apiCall<MitigationActionsResponse>(
+          `/api/eudr/mitigation-actions?riskAssessmentId=${encodeURIComponent(riskAssessmentId)}&pageSize=100&sortField=dueDate&sortDir=asc`,
+          undefined,
+          { fallback: { items: [] } },
+        )
+        if (!call.ok) {
+          if (!cancelled) setError(translate('eudr.mitigationActions.loadError'))
+          return
+        }
+        if (!cancelled) setRows(Array.isArray(call.result?.items) ? call.result.items : [])
+      } catch {
+        if (!cancelled) setError(translate('eudr.mitigationActions.loadError'))
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    loadRows()
+    return () => {
+      cancelled = true
+    }
+  }, [reloadToken, riskAssessmentId, translate])
+
+  const refreshRows = React.useCallback(() => {
+    setReloadToken((currentToken) => currentToken + 1)
+  }, [])
+
+  const openCreateDialog = React.useCallback(() => {
+    setEditingRow(null)
+    setDialogMode('create')
+  }, [])
+
+  const openEditDialog = React.useCallback((row: MitigationActionRow) => {
+    setEditingRow(row)
+    setDialogMode('edit')
+  }, [])
+
+  const closeDialog = React.useCallback(() => {
+    setDialogMode(null)
+    setEditingRow(null)
+  }, [])
+
+  const handleDelete = React.useCallback(async (row: MitigationActionRow) => {
+    const confirmed = await confirm({
+      title: translate('eudr.mitigationActions.confirmDelete', { title: row.title }),
+      variant: 'destructive',
+    })
+    if (!confirmed) return
+
+    try {
+      await runMutation({
+        operation: () => withScopedApiRequestHeaders(
+          buildOptimisticLockHeader(row.updatedAt),
+          () => deleteCrud('eudr/mitigation-actions', row.id, {
+            errorMessage: translate('eudr.mitigationActions.deleteError'),
+          }),
+        ),
+        context: {
+          formId: mutationContextId,
+          resourceKind: 'eudr.mitigation_action',
+          resourceId: row.id,
+          retryLastMutation,
+        },
+        mutationPayload: { id: row.id },
+      })
+      flash(translate('eudr.mitigationActions.deleteSuccess'), 'success')
+      refreshRows()
+    } catch (deleteError) {
+      if (surfaceRecordConflict(deleteError, translate, { onRefresh: refreshRows })) return
+      flash(translate('eudr.mitigationActions.deleteError'), 'error')
+    }
+  }, [confirm, mutationContextId, refreshRows, retryLastMutation, runMutation, translate])
+
+  const fields = React.useMemo<CrudField[]>(() => [
+    {
+      id: 'actionType',
+      label: translate('eudr.mitigationActions.form.actionType'),
+      type: 'select',
+      options: actionTypeOptions(translate),
+    },
+    {
+      id: 'title',
+      label: translate('eudr.mitigationActions.form.title'),
+      type: 'text',
+      required: true,
+    },
+    {
+      id: 'description',
+      label: translate('eudr.mitigationActions.form.description'),
+      type: 'textarea',
+    },
+    {
+      id: 'status',
+      label: translate('eudr.mitigationActions.form.status'),
+      type: 'select',
+      options: actionStatusOptions(translate),
+    },
+    {
+      id: 'dueDate',
+      label: translate('eudr.mitigationActions.form.dueDate'),
+      type: 'date',
+    },
+    {
+      id: 'notes',
+      label: translate('eudr.mitigationActions.form.notes'),
+      type: 'textarea',
+    },
+  ], [translate])
+
+  const groups = React.useMemo<CrudFormGroup[]>(() => [
+    {
+      id: 'details',
+      title: translate('eudr.mitigationActions.form.details'),
+      column: 1,
+      fields: ['actionType', 'title', 'description', 'status', 'dueDate', 'notes'],
+    },
+  ], [translate])
+
+  const initialValues = React.useMemo<MitigationActionFormValues>(() => ({
+    actionType: editingRow?.actionType ?? 'request_documents',
+    title: editingRow?.title ?? '',
+    description: editingRow?.description ?? '',
+    status: editingRow?.status ?? 'planned',
+    dueDate: formatDateInput(editingRow?.dueDate),
+    notes: editingRow?.notes ?? '',
+  }), [editingRow])
+
+  const columns = React.useMemo<ColumnDef<MitigationActionRow>[]>(() => [
+    {
+      accessorKey: 'title',
+      header: translate('eudr.mitigationActions.columns.title'),
+      cell: ({ row }) => row.original.title,
+      meta: { maxWidth: '260px', truncate: true },
+    },
+    {
+      accessorKey: 'actionType',
+      header: translate('eudr.mitigationActions.columns.type'),
+      cell: ({ row }) => row.original.actionType
+        ? translate(`eudr.mitigationType.${row.original.actionType}`)
+        : translate('eudr.common.empty'),
+    },
+    {
+      accessorKey: 'status',
+      header: translate('eudr.mitigationActions.columns.status'),
+      cell: ({ row }) => (
+        <StatusBadge variant={statusVariant(row.original.status)} dot>
+          {row.original.status ? translate(`eudr.mitigationStatus.${row.original.status}`) : translate('eudr.common.empty')}
+        </StatusBadge>
+      ),
+    },
+    {
+      accessorKey: 'dueDate',
+      header: translate('eudr.mitigationActions.columns.dueDate'),
+      cell: ({ row }) => (
+        <span className={isOverdue(row.original) ? 'text-status-warning-text' : undefined}>
+          {formatDate(row.original.dueDate, translate('eudr.common.empty'), locale)}
+        </span>
+      ),
+    },
+    {
+      accessorKey: 'completedAt',
+      header: translate('eudr.mitigationActions.columns.completedAt'),
+      cell: ({ row }) => formatDate(row.original.completedAt, translate('eudr.common.empty'), locale),
+    },
+  ], [locale, translate])
+
+  return (
+    <section className="space-y-4 rounded-lg border border-border bg-card p-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <h2 className="text-lg font-semibold">{translate('eudr.mitigationActions.title')}</h2>
+          <p className="text-sm text-muted-foreground">{translate('eudr.mitigationActions.description')}</p>
+        </div>
+        <Button type="button" onClick={openCreateDialog}>
+          <Plus className="size-4" aria-hidden="true" />
+          {translate('eudr.mitigationActions.actions.add')}
+        </Button>
+      </div>
+
+      <DataTable<MitigationActionRow>
+        title={translate('eudr.mitigationActions.tableTitle')}
+        columns={columns}
+        data={rows}
+        isLoading={loading}
+        error={error}
+        rowActions={(row) => (
+          <RowActions
+            items={[
+              {
+                id: 'edit',
+                label: translate('eudr.mitigationActions.actions.edit'),
+                onSelect: () => openEditDialog(row),
+              },
+              {
+                id: 'delete',
+                label: translate('eudr.mitigationActions.actions.delete'),
+                destructive: true,
+                onSelect: () => {
+                  void handleDelete(row)
+                },
+              },
+            ]}
+          />
+        )}
+        emptyState={(
+          <EmptyState
+            size="sm"
+            variant="subtle"
+            title={translate('eudr.mitigationActions.empty')}
+          />
+        )}
+        perspective={{ tableId: 'eudr.risk_assessments.detail.mitigation_actions' }}
+        disableRowClick
+        stickyActionsColumn
+      />
+
+      <Dialog open={dialogMode !== null} onOpenChange={(open) => {
+        if (!open) closeDialog()
+      }}>
+        <DialogContent size="lg">
+          <DialogHeader>
+            <DialogTitle>
+              {dialogMode === 'edit'
+                ? translate('eudr.mitigationActions.editTitle')
+                : translate('eudr.mitigationActions.createTitle')}
+            </DialogTitle>
+          </DialogHeader>
+          <CrudForm<MitigationActionFormValues>
+            embedded
+            title={dialogMode === 'edit'
+              ? translate('eudr.mitigationActions.editTitle')
+              : translate('eudr.mitigationActions.createTitle')}
+            submitLabel={translate('eudr.mitigationActions.form.submit')}
+            fields={fields}
+            groups={groups}
+            initialValues={initialValues}
+            onSubmit={async (values) => {
+              const title = optionalText(values.title)
+              if (!title) {
+                const message = translate('eudr.mitigationActions.form.titleRequired')
+                throw createCrudFormError(message, { title: message })
+              }
+              const payload = {
+                riskAssessmentId,
+                actionType: optionalText(values.actionType) ?? 'request_documents',
+                title,
+                description: optionalText(values.description),
+                status: optionalText(values.status) ?? 'planned',
+                dueDate: optionalText(values.dueDate),
+                notes: optionalText(values.notes),
+              }
+              if (dialogMode === 'edit' && editingRow) {
+                await withScopedApiRequestHeaders(
+                  buildOptimisticLockHeader(editingRow.updatedAt),
+                  () => updateCrud('eudr/mitigation-actions', {
+                    id: editingRow.id,
+                    ...payload,
+                  }, {
+                    errorMessage: translate('eudr.mitigationActions.updateError'),
+                  }),
+                )
+                flash(translate('eudr.mitigationActions.updateSuccess'), 'success')
+              } else {
+                await createCrud('eudr/mitigation-actions', payload, {
+                  errorMessage: translate('eudr.mitigationActions.createError'),
+                })
+                flash(translate('eudr.mitigationActions.createSuccess'), 'success')
+              }
+              closeDialog()
+              refreshRows()
+            }}
+          />
+        </DialogContent>
+      </Dialog>
+      {ConfirmDialogElement}
+    </section>
+  )
+}
+
+export default MitigationActionsSection

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

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import {
+  LookupSelectField,
+  PICKER_PAGE_SIZE,
+  type OrderSnapshot,
+  type PickerOption,
+  type Translator,
+} from './formConfig'
+
+type PickerPayload = {
+  items?: unknown[]
+}
+
+type OrderSelectFieldProps = {
+  id: string
+  value?: string | null
+  onChange: (value: string | undefined) => void
+  onSnapshot?: (snapshot: OrderSnapshot | null) => void
+  placeholder: string
+  emptyLabel?: string
+  loadError: string
+  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>, keys: string[]): string | null {
+  for (const key of keys) {
+    const value = record[key]
+    if (typeof value !== 'string') continue
+    const trimmed = value.trim()
+    if (trimmed.length > 0) return trimmed
+  }
+  return null
+}
+
+function normalizeOrderOption(raw: unknown, translate: Translator): PickerOption<OrderSnapshot> | null {
+  if (!isRecord(raw)) return null
+  const id = readString(raw, ['id'])
+  if (!id) return null
+  const orderNumber = readString(raw, ['orderNumber', 'order_number'])
+  const customerSnapshot = isRecord(raw.customerSnapshot)
+    ? raw.customerSnapshot
+    : (isRecord(raw.customer_snapshot) ? raw.customer_snapshot : null)
+  const customer = customerSnapshot
+    ? readString(customerSnapshot, ['displayName', 'display_name', 'name'])
+    : null
+  return {
+    value: id,
+    label: orderNumber ?? translate('eudr.common.recordUnavailable'),
+    subtitle: customer,
+    snapshot: { orderNumber: orderNumber ?? null },
+  }
+}
+
+async function loadOrderPayload(url: string): Promise<PickerPayload> {
+  const call = await apiCall<PickerPayload>(url, undefined, { fallback: { items: [] } })
+  if (!call.ok) return { items: [] }
+  return call.result ?? { items: [] }
+}
+
+export function OrderSelectField({
+  id,
+  value,
+  onChange,
+  onSnapshot,
+  placeholder,
+  loadError,
+  disabled,
+}: OrderSelectFieldProps) {
+  const translate = useT()
+  const loadOrderOptions = React.useCallback(async (search: string) => {
+    const params = new URLSearchParams({
+      page: '1',
+      pageSize: String(PICKER_PAGE_SIZE),
+      sortField: 'number',
+      sortDir: 'desc',
+    })
+    if (search) params.set('search', search)
+    const payload = await loadOrderPayload(`/api/sales/orders?${params.toString()}`)
+    const items = Array.isArray(payload.items) ? payload.items : []
+    return items
+      .map((item) => normalizeOrderOption(item, translate))
+      .filter((option): option is PickerOption<OrderSnapshot> => option !== null)
+  }, [translate])
+
+  const loadSelectedOrder = React.useCallback(async (orderId: string) => {
+    const payload = await loadOrderPayload(`/api/sales/orders?ids=${encodeURIComponent(orderId)}&pageSize=1`)
+    const items = Array.isArray(payload.items) ? payload.items : []
+    return items
+      .map((item) => normalizeOrderOption(item, translate))
+      .find((option): option is PickerOption<OrderSnapshot> => option?.value === orderId) ?? null
+  }, [translate])
+
+  return (
+    <LookupSelectField
+      id={id}
+      value={value}
+      onChange={onChange}
+      onSnapshot={onSnapshot}
+      placeholder={placeholder}
+      loadError={loadError}
+      disabled={disabled}
+      loadOptions={loadOrderOptions}
+      loadSelectedOption={loadSelectedOrder}
+    />
+  )
+}
+
+export default OrderSelectField