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

package/src/modules/eudr/backend/eudr/product-mappings/[id]/page.tsx

@@ -0,0 +1,311 @@
+"use client"
+
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
+import { deleteCrud, updateCrud } from '@open-mercato/ui/backend/utils/crud'
+import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { ErrorMessage, LoadingMessage, RecordNotFoundState } from '@open-mercato/ui/backend/detail'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  ProductSelectField,
+  commodityOptions,
+  type ProductSnapshot,
+  translateEudrCrudError,
+} from '../../../../components/formConfig'
+import type { EudrCommodity } from '../../../../data/validators'
+
+type ProductMappingRecord = {
+  id: string
+  productId: string
+  productSnapshot: ProductSnapshot | null
+  commodity: EudrCommodity
+  hsCode: string | null
+  speciesScientificName: string | null
+  speciesCommonName: string | null
+  isInScope: boolean
+  notes: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+type ProductMappingDetailResponse = {
+  items?: ProductMappingRecord[]
+}
+
+type ProductMappingFormValues = {
+  id: string
+  productId: string
+  productSnapshot: ProductSnapshot | null
+  commodity: string
+  hsCode: string
+  speciesScientificName: string
+  speciesCommonName: string
+  isInScope: boolean
+  notes: string
+  updatedAt: string
+} & Record<string, unknown>
+
+function optionalText(value: unknown): string | null {
+  if (typeof value !== 'string') return null
+  const trimmed = value.trim()
+  return trimmed.length ? trimmed : null
+}
+
+function isProductSnapshot(value: unknown): value is ProductSnapshot {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}
+
+function getRouteId(params?: { id?: string }): string | null {
+  const rawId = params?.id
+  return typeof rawId === 'string' && rawId.trim().length ? rawId : null
+}
+
+export default function EditEudrProductMappingPage({ params }: { params?: { id?: string } }) {
+  const translate = useT()
+  const router = useRouter()
+  const mappingId = React.useMemo(() => getRouteId(params), [params])
+  const [record, setRecord] = React.useState<ProductMappingRecord | null>(null)
+  const [loading, setLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+  const [notFound, setNotFound] = React.useState(false)
+
+  React.useEffect(() => {
+    let cancelled = false
+    async function loadRecord() {
+      if (!mappingId) {
+        setNotFound(true)
+        setLoading(false)
+        return
+      }
+      setLoading(true)
+      setError(null)
+      setNotFound(false)
+      try {
+        const call = await apiCall<ProductMappingDetailResponse>(
+          `/api/eudr/product-mappings?id=${encodeURIComponent(mappingId)}`,
+          undefined,
+          { fallback: { items: [] } },
+        )
+        if (!call.ok) {
+          if (!cancelled) setError(translate('eudr.productMappings.form.loadError'))
+          return
+        }
+        const items = Array.isArray(call.result?.items) ? call.result.items : []
+        if (cancelled) return
+        if (items.length === 0) {
+          setNotFound(true)
+          setRecord(null)
+          return
+        }
+        setRecord(items[0])
+      } catch {
+        if (!cancelled) setError(translate('eudr.productMappings.form.loadError'))
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    loadRecord()
+    return () => {
+      cancelled = true
+    }
+  }, [mappingId, translate])
+
+  const fields = React.useMemo<CrudField[]>(() => [
+    {
+      id: 'productId',
+      layout: 'half',
+      label: translate('eudr.productMappings.form.product'),
+      type: 'custom',
+      required: true,
+      component: ({ id, value, setValue, setFormValue }) => (
+        <ProductSelectField
+          id={id}
+          value={typeof value === 'string' ? value : null}
+          onChange={(nextValue) => setValue(nextValue ?? '')}
+          onSnapshot={(snapshot) => setFormValue?.('productSnapshot', snapshot)}
+          placeholder={translate('eudr.productMappings.form.productPlaceholder')}
+          loadError={translate('eudr.productMappings.form.productLoadError')}
+        />
+      ),
+    },
+    {
+      id: 'commodity',
+      layout: 'half',
+      label: translate('eudr.productMappings.form.commodity'),
+      type: 'select',
+      required: true,
+      options: commodityOptions(translate),
+    },
+    {
+      id: 'hsCode',
+      layout: 'half',
+      label: translate('eudr.productMappings.form.hsCode'),
+      type: 'text',
+    },
+    {
+      id: 'speciesScientificName',
+      layout: 'half',
+      label: translate('eudr.productMappings.speciesScientificName'),
+      type: 'text',
+      description: translate('eudr.productMappings.speciesHint'),
+      maxLength: 256,
+      visibleWhen: { field: 'commodity', equals: 'wood' },
+    },
+    {
+      id: 'speciesCommonName',
+      layout: 'half',
+      label: translate('eudr.productMappings.speciesCommonName'),
+      type: 'text',
+      maxLength: 256,
+      visibleWhen: { field: 'commodity', equals: 'wood' },
+    },
+    {
+      id: 'isInScope',
+      label: translate('eudr.productMappings.form.isInScope'),
+      type: 'checkbox',
+    },
+    {
+      id: 'notes',
+      label: translate('eudr.productMappings.form.notes'),
+      type: 'textarea',
+    },
+  ], [translate])
+
+  const groups = React.useMemo<CrudFormGroup[]>(() => [
+    {
+      id: 'details',
+      title: translate('eudr.productMappings.form.details'),
+      column: 1,
+      fields: [
+        'productId',
+        'commodity',
+        'hsCode',
+        'speciesScientificName',
+        'speciesCommonName',
+      ],
+    },
+    {
+      id: 'classification',
+      title: translate('eudr.common.classification'),
+      column: 2,
+      fields: [
+        'isInScope',
+      ],
+    },
+    {
+      id: 'notes',
+      title: translate('eudr.common.notes'),
+      column: 2,
+      fields: [
+        'notes',
+      ],
+    },
+  ], [translate])
+
+  const initialValues = React.useMemo<ProductMappingFormValues | null>(() => {
+    if (!record) return null
+    return {
+      id: record.id,
+      productId: record.productId,
+      productSnapshot: record.productSnapshot,
+      commodity: record.commodity,
+      hsCode: record.hsCode ?? '',
+      speciesScientificName: record.speciesScientificName ?? '',
+      speciesCommonName: record.speciesCommonName ?? '',
+      isInScope: record.isInScope,
+      notes: record.notes ?? '',
+      updatedAt: record.updatedAt,
+    }
+  }, [record])
+
+  if (loading) {
+    return (
+      <Page>
+        <PageBody>
+          <LoadingMessage label={translate('eudr.productMappings.form.loading')} />
+        </PageBody>
+      </Page>
+    )
+  }
+
+  if (notFound) {
+    return (
+      <Page>
+        <PageBody>
+          <RecordNotFoundState
+            label={translate('eudr.productMappings.form.notFound')}
+            backHref="/backend/eudr/product-mappings"
+            backLabel={translate('eudr.productMappings.form.backToList')}
+          />
+        </PageBody>
+      </Page>
+    )
+  }
+
+  if (error || !record || !initialValues) {
+    return (
+      <Page>
+        <PageBody>
+          <ErrorMessage label={error ?? translate('eudr.productMappings.form.loadError')} />
+        </PageBody>
+      </Page>
+    )
+  }
+
+  return (
+    <Page>
+      <PageBody>
+        <CrudForm<ProductMappingFormValues>
+          title={translate('eudr.productMappings.edit.title')}
+          backHref="/backend/eudr/product-mappings"
+          cancelHref="/backend/eudr/product-mappings"
+          deleteRedirect="/backend/eudr/product-mappings"
+          submitLabel={translate('eudr.productMappings.form.submitUpdate')}
+          fields={fields}
+          groups={groups}
+          initialValues={initialValues}
+          onSubmit={async (values) => {
+            const productId = optionalText(values.productId)
+            if (!productId) {
+              const message = translate('eudr.productMappings.form.productRequired')
+              throw createCrudFormError(message, { productId: message })
+            }
+            const commodity = optionalText(values.commodity)
+            if (!commodity) {
+              const message = translate('eudr.productMappings.form.commodityRequired')
+              throw createCrudFormError(message, { commodity: message })
+            }
+            await updateCrud('eudr/product-mappings', {
+              id: record.id,
+              productId,
+              commodity,
+              hsCode: optionalText(values.hsCode),
+              speciesScientificName: commodity === 'wood' ? optionalText(values.speciesScientificName) : null,
+              speciesCommonName: commodity === 'wood' ? optionalText(values.speciesCommonName) : null,
+              isInScope: values.isInScope !== false,
+              notes: optionalText(values.notes),
+              productSnapshot: isProductSnapshot(values.productSnapshot) ? values.productSnapshot : null,
+            }, {
+              errorMessage: translate('eudr.productMappings.form.updateError'),
+            }).catch((err) => {
+              throw translateEudrCrudError(err, translate)
+            })
+            flash(translate('eudr.productMappings.form.updateSuccess'), 'success')
+            router.push('/backend/eudr/product-mappings')
+          }}
+          onDelete={async () => {
+            await deleteCrud('eudr/product-mappings', record.id, {
+              errorMessage: translate('eudr.productMappings.form.deleteError'),
+            }).catch((err) => {
+              throw translateEudrCrudError(err, translate)
+            })
+          }}
+        />
+      </PageBody>
+    </Page>
+  )
+}

package/src/modules/eudr/backend/eudr/product-mappings/create/page.meta.ts

@@ -0,0 +1,13 @@
+export const metadata = {
+  requireAuth: true,
+  requireFeatures: ['eudr.mappings.manage'],
+  pageTitle: 'Create product mapping',
+  pageTitleKey: 'eudr.productMappings.create.title',
+  pageGroup: 'Compliance',
+  pageGroupKey: 'eudr.nav.group',
+  navHidden: true,
+  breadcrumb: [
+    { label: 'Product mappings', labelKey: 'eudr.nav.mappings', href: '/backend/eudr/product-mappings' },
+    { label: 'Create', labelKey: 'eudr.productMappings.create.title' },
+  ],
+}

package/src/modules/eudr/backend/eudr/product-mappings/create/page.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
+import { createCrud } from '@open-mercato/ui/backend/utils/crud'
+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 {
+  ProductSelectField,
+  commodityOptions,
+  type ProductSnapshot,
+  translateEudrCrudError,
+} from '../../../../components/formConfig'
+
+type ProductMappingFormValues = {
+  productId: string
+  productSnapshot: ProductSnapshot | null
+  commodity: string
+  hsCode: string
+  speciesScientificName: string
+  speciesCommonName: string
+  isInScope: boolean
+  notes: string
+} & Record<string, unknown>
+
+function optionalText(value: unknown): string | null {
+  if (typeof value !== 'string') return null
+  const trimmed = value.trim()
+  return trimmed.length ? trimmed : null
+}
+
+function isProductSnapshot(value: unknown): value is ProductSnapshot {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}
+
+export default function CreateEudrProductMappingPage() {
+  const translate = useT()
+  const router = useRouter()
+
+  const fields = React.useMemo<CrudField[]>(() => [
+    {
+      id: 'productId',
+      layout: 'half',
+      label: translate('eudr.productMappings.form.product'),
+      type: 'custom',
+      required: true,
+      component: ({ id, value, setValue, setFormValue }) => (
+        <ProductSelectField
+          id={id}
+          value={typeof value === 'string' ? value : null}
+          onChange={(nextValue) => setValue(nextValue ?? '')}
+          onSnapshot={(snapshot) => setFormValue?.('productSnapshot', snapshot)}
+          placeholder={translate('eudr.productMappings.form.productPlaceholder')}
+          loadError={translate('eudr.productMappings.form.productLoadError')}
+        />
+      ),
+    },
+    {
+      id: 'commodity',
+      layout: 'half',
+      label: translate('eudr.productMappings.form.commodity'),
+      type: 'select',
+      required: true,
+      options: commodityOptions(translate),
+    },
+    {
+      id: 'hsCode',
+      layout: 'half',
+      label: translate('eudr.productMappings.form.hsCode'),
+      type: 'text',
+    },
+    {
+      id: 'speciesScientificName',
+      layout: 'half',
+      label: translate('eudr.productMappings.speciesScientificName'),
+      type: 'text',
+      description: translate('eudr.productMappings.speciesHint'),
+      maxLength: 256,
+      visibleWhen: { field: 'commodity', equals: 'wood' },
+    },
+    {
+      id: 'speciesCommonName',
+      layout: 'half',
+      label: translate('eudr.productMappings.speciesCommonName'),
+      type: 'text',
+      maxLength: 256,
+      visibleWhen: { field: 'commodity', equals: 'wood' },
+    },
+    {
+      id: 'isInScope',
+      label: translate('eudr.productMappings.form.isInScope'),
+      type: 'checkbox',
+      defaultValue: true,
+    },
+    {
+      id: 'notes',
+      label: translate('eudr.productMappings.form.notes'),
+      type: 'textarea',
+    },
+  ], [translate])
+
+  const groups = React.useMemo<CrudFormGroup[]>(() => [
+    {
+      id: 'details',
+      title: translate('eudr.productMappings.form.details'),
+      column: 1,
+      fields: [
+        'productId',
+        'commodity',
+        'hsCode',
+        'speciesScientificName',
+        'speciesCommonName',
+      ],
+    },
+    {
+      id: 'classification',
+      title: translate('eudr.common.classification'),
+      column: 2,
+      fields: [
+        'isInScope',
+      ],
+    },
+    {
+      id: 'notes',
+      title: translate('eudr.common.notes'),
+      column: 2,
+      fields: [
+        'notes',
+      ],
+    },
+  ], [translate])
+
+  return (
+    <Page>
+      <PageBody>
+        <CrudForm<ProductMappingFormValues>
+          title={translate('eudr.productMappings.create.title')}
+          backHref="/backend/eudr/product-mappings"
+          cancelHref="/backend/eudr/product-mappings"
+          submitLabel={translate('eudr.productMappings.form.submitCreate')}
+          fields={fields}
+          groups={groups}
+          initialValues={{
+            productId: '',
+            productSnapshot: null,
+            commodity: '',
+            hsCode: '',
+            speciesScientificName: '',
+            speciesCommonName: '',
+            isInScope: true,
+            notes: '',
+          }}
+          onSubmit={async (values) => {
+            const productId = optionalText(values.productId)
+            if (!productId) {
+              const message = translate('eudr.productMappings.form.productRequired')
+              throw createCrudFormError(message, { productId: message })
+            }
+            const commodity = optionalText(values.commodity)
+            if (!commodity) {
+              const message = translate('eudr.productMappings.form.commodityRequired')
+              throw createCrudFormError(message, { commodity: message })
+            }
+            await createCrud('eudr/product-mappings', {
+              productId,
+              commodity,
+              hsCode: optionalText(values.hsCode),
+              ...(commodity === 'wood' ? {
+                speciesScientificName: optionalText(values.speciesScientificName),
+                speciesCommonName: optionalText(values.speciesCommonName),
+              } : {}),
+              isInScope: values.isInScope !== false,
+              notes: optionalText(values.notes),
+              productSnapshot: isProductSnapshot(values.productSnapshot) ? values.productSnapshot : null,
+            }, {
+              errorMessage: translate('eudr.productMappings.form.createError'),
+            }).catch((err) => {
+              throw translateEudrCrudError(err, translate)
+            })
+            flash(translate('eudr.productMappings.form.createSuccess'), 'success')
+            router.push('/backend/eudr/product-mappings')
+          }}
+        />
+      </PageBody>
+    </Page>
+  )
+}

package/src/modules/eudr/backend/eudr/product-mappings/page.meta.ts

@@ -0,0 +1,12 @@
+export const metadata = {
+  requireAuth: true,
+  requireFeatures: ['eudr.mappings.view'],
+  pageTitle: 'Product mappings',
+  pageTitleKey: 'eudr.nav.mappings',
+  pageGroup: 'Compliance',
+  pageGroupKey: 'eudr.nav.group',
+  pagePriority: 10,
+  pageOrder: 10,
+  icon: 'package',
+  breadcrumb: [{ label: 'Product mappings', labelKey: 'eudr.nav.mappings' }],
+}