@freighttech/terminal-tracking 0.7.0

package/src/modules/terminal_tracking/backend/terminal-configs/page.tsx

@@ -0,0 +1,728 @@
+'use client'
+
+import * as React from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import { Page, PageBody } from '@freighttech/ui/backend/Page'
+import { BooleanIcon } from '@freighttech/ui/backend/ValueIcons'
+import { DynamicTable, TableSkeleton, useDynamicTablePage } from '@freighttech/ui/backend/dynamic-table'
+import type { ColumnDef } from '@freighttech/ui/backend/dynamic-table'
+import { RowActions, type RowActionItem } from '@freighttech/ui/backend/RowActions'
+import { apiCallOrThrow } from '@freighttech/ui/backend/utils/apiCall'
+import { flash } from '@freighttech/ui/backend/FlashMessages'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@freighttech/ui/primitives/dialog'
+import { Button } from '@freighttech/ui/primitives/button'
+import { Input } from '@freighttech/ui/primitives/input'
+import { Label } from '@freighttech/ui/primitives/label'
+import { Checkbox } from '@freighttech/ui/primitives/checkbox'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@freighttech/ui/primitives/card'
+import { Loader2, CheckCircle2, XCircle } from 'lucide-react'
+
+type AuthType = 'oauth2_password' | 'oauth2_client_credentials' | 'gct_token' | 'basic'
+
+type ConfigRow = {
+  id: string
+  terminalCode: string
+  adapterType: string
+  displayName: string
+  baseUrl: string
+  authType: string
+  unlocode: string | null
+  isActive: boolean
+}
+
+function mapItem(item: Record<string, unknown>): ConfigRow | null {
+  const id = typeof item.id === 'string' ? item.id : null
+  if (!id) return null
+  return {
+    id,
+    terminalCode: (item.terminalCode as string) ?? '',
+    adapterType: (item.adapterType as string) ?? '',
+    displayName: (item.displayName as string) ?? '',
+    baseUrl: (item.baseUrl as string) ?? '',
+    authType: (item.authType as string) ?? '',
+    unlocode: (item.unlocode as string) ?? null,
+    isActive: item.isActive === true,
+  }
+}
+
+type FormState = {
+  terminalCode: string
+  adapterType: string
+  displayName: string
+  baseUrl: string
+  proxyUrl: string
+  authType: AuthType
+  tokenUrl: string
+  scope: string
+  clientId: string
+  credentials: Record<string, string>
+  unlocode: string
+  bicCodes: string
+  smdgCodes: string
+  nameAliases: string
+  rateLimitRequests: number
+  rateLimitWindowSeconds: number
+  isActive: boolean
+}
+
+// ── Adapter specs ───────────────────────────────────────────────────────────
+// Each adapter maps to one real terminal and one auth type, so selecting the
+// adapter drives the auth type, the credential fields, and the identifier
+// defaults. Values are sourced from the N4 adapter spec + terminal-tracking
+// README (see `.ai/specs/2026-06-08-n4-terminal-tracking-adapter.md` and
+// `packages/terminal-tracking/README.md`). GCT's base URL is intentionally left
+// blank — no real value is published in the repo. Likewise the OAuth account
+// identity (client ID and scope) for each terminal is integrator-specific and
+// left blank here: the operator fills it in when configuring the terminal.
+type CredField = { key: string; label: string; secret?: boolean; placeholder?: string }
+
+type AdapterSpec = {
+  value: string
+  label: string
+  authType: AuthType
+  /** Show the OAuth block (token URL / client ID / scope). */
+  showOAuth: boolean
+  defaults: Partial<FormState>
+}
+
+const ADAPTER_SPECS: Record<string, AdapterSpec> = {
+  n4: {
+    value: 'n4',
+    label: 'DCT (Gdańsk)',
+    authType: 'oauth2_password',
+    showOAuth: true,
+    defaults: {
+      terminalCode: 'dct',
+      displayName: 'DCT Gdańsk (Baltic Hub)',
+      baseUrl: 'https://api2.baltichub.com/V1/',
+      tokenUrl:
+        'https://bhctapicustomers.b2clogin.com/bhctapicustomers.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_ropc_login',
+      // Integrator-specific — configured per deployment, not published here.
+      clientId: '',
+      scope: '',
+      unlocode: 'PLGDN',
+      smdgCodes: 'PLGDNDCT',
+      bicCodes: 'PLGDNSKZB',
+      nameAliases: 'Baltic Hub, DCT Gdańsk',
+      rateLimitRequests: 200,
+      rateLimitWindowSeconds: 60,
+    },
+  },
+  bct: {
+    value: 'bct',
+    label: 'BCT / INCOS (Gdynia)',
+    authType: 'basic',
+    showOAuth: false,
+    defaults: {
+      terminalCode: 'bct',
+      displayName: 'BCT Gdynia (INCOS)',
+      baseUrl: 'https://incos.pl',
+      tokenUrl: '',
+      clientId: '',
+      scope: '',
+      unlocode: 'PLGDY',
+      smdgCodes: 'PLGDYPLBCT',
+      bicCodes: 'PLGDYBCTA',
+      nameAliases: 'BCT, Bałtycki Terminal Kontenerowy',
+      // INCOS caps at 10 000 requests/day.
+      rateLimitRequests: 10000,
+      rateLimitWindowSeconds: 86400,
+    },
+  },
+  gct: {
+    value: 'gct',
+    label: 'GCT (Gdynia)',
+    authType: 'gct_token',
+    showOAuth: false,
+    defaults: {
+      terminalCode: 'gct',
+      displayName: 'GCT Gdynia',
+      baseUrl: '',
+      tokenUrl: '',
+      clientId: '',
+      scope: '',
+      unlocode: 'PLGDY',
+      smdgCodes: 'PLGDYPLGCT',
+      bicCodes: 'PLGDYEOOJ',
+      nameAliases: 'GCT',
+      rateLimitRequests: 200,
+      rateLimitWindowSeconds: 60,
+    },
+  },
+}
+
+const ADAPTER_ORDER = ['n4', 'bct', 'gct']
+
+/** Credential inputs for a given adapter + auth type (structured, no raw JSON). */
+function credentialFieldsFor(adapterType: string, authType: AuthType): CredField[] {
+  if (adapterType === 'gct') {
+    return [
+      { key: 'companyCode', label: 'Company code', placeholder: 'ACME' },
+      { key: 'loginName', label: 'Login' },
+      { key: 'totpSecret', label: 'Twój sekret 2FA', secret: true, placeholder: 'JBSWY3DPEHPK3PXP' },
+    ]
+  }
+  if (adapterType === 'n4' && authType === 'oauth2_client_credentials') {
+    return [{ key: 'clientSecret', label: 'Client secret', secret: true }]
+  }
+  // n4 (ROPC) and bct (basic) both use username/password.
+  return [
+    { key: 'username', label: 'Username' },
+    { key: 'password', label: 'Password', secret: true },
+  ]
+}
+
+const baseForm: FormState = {
+  terminalCode: '',
+  adapterType: 'n4',
+  displayName: '',
+  baseUrl: '',
+  proxyUrl: '',
+  authType: 'oauth2_password',
+  tokenUrl: '',
+  scope: '',
+  clientId: '',
+  credentials: {},
+  unlocode: '',
+  bicCodes: '',
+  smdgCodes: '',
+  nameAliases: '',
+  rateLimitRequests: 200,
+  rateLimitWindowSeconds: 60,
+  isActive: true,
+}
+
+/** Apply an adapter's defaults onto a form (used on create + adapter switch). */
+function applyAdapterDefaults(
+  adapterType: string,
+  prev: FormState,
+  opts: { includeTerminalCode: boolean },
+): FormState {
+  const spec = ADAPTER_SPECS[adapterType] ?? ADAPTER_SPECS.n4
+  const d = spec.defaults
+  return {
+    ...prev,
+    adapterType,
+    authType: spec.authType,
+    displayName: d.displayName ?? '',
+    baseUrl: d.baseUrl ?? '',
+    tokenUrl: d.tokenUrl ?? '',
+    scope: d.scope ?? '',
+    clientId: d.clientId ?? '',
+    unlocode: d.unlocode ?? '',
+    smdgCodes: d.smdgCodes ?? '',
+    bicCodes: d.bicCodes ?? '',
+    nameAliases: d.nameAliases ?? '',
+    rateLimitRequests: d.rateLimitRequests ?? 200,
+    rateLimitWindowSeconds: d.rateLimitWindowSeconds ?? 60,
+    credentials: {},
+    ...(opts.includeTerminalCode ? { terminalCode: d.terminalCode ?? '' } : {}),
+  }
+}
+
+const emptyForm: FormState = applyAdapterDefaults('n4', baseForm, { includeTerminalCode: true })
+
+const API = '/api/terminal_tracking/terminal-configs'
+
+function csv(value: string): string[] | undefined {
+  const arr = value
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+  return arr.length ? arr : undefined
+}
+
+export default function TerminalConfigsPage() {
+  const t = useT()
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [form, setForm] = useState<FormState>(emptyForm)
+  const [submitting, setSubmitting] = useState(false)
+  const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null)
+  const isEdit = editingId !== null
+
+  const spec = ADAPTER_SPECS[form.adapterType] ?? ADAPTER_SPECS.n4
+  const credFields = credentialFieldsFor(form.adapterType, form.authType)
+
+  const setField = useCallback(
+    <K extends keyof FormState>(key: K, value: FormState[K]) => setForm((p) => ({ ...p, [key]: value })),
+    [],
+  )
+  const setCredential = useCallback(
+    (key: string, value: string) => setForm((p) => ({ ...p, credentials: { ...p.credentials, [key]: value } })),
+    [],
+  )
+  const changeAdapter = useCallback(
+    (adapterType: string) =>
+      setForm((p) => applyAdapterDefaults(adapterType, p, { includeTerminalCode: !isEdit })),
+    [isEdit],
+  )
+
+  const columns = useMemo<ColumnDef[]>(
+    () => [
+      {
+        data: 'displayName',
+        title: t('terminal_tracking.terminal_config.displayName', 'Name'),
+        width: 180,
+        readOnly: true,
+        renderer: (v: unknown) => <span className="font-medium">{String(v ?? '')}</span>,
+      },
+      {
+        data: 'terminalCode',
+        title: t('terminal_tracking.terminal_config.terminalCode', 'Terminal code'),
+        width: 120,
+        readOnly: true,
+      },
+      {
+        data: 'adapterType',
+        title: t('terminal_tracking.terminal_config.adapterType', 'Adapter'),
+        width: 130,
+        readOnly: true,
+        renderer: (v: unknown) => <span className="text-sm">{ADAPTER_SPECS[String(v)]?.label ?? String(v ?? '')}</span>,
+      },
+      {
+        data: 'unlocode',
+        title: t('terminal_tracking.terminal_config.unlocode', 'UN/LOCODE'),
+        width: 110,
+        readOnly: true,
+        renderer: (v: unknown) => <span className="text-sm">{String(v || '-')}</span>,
+      },
+      {
+        data: 'isActive',
+        title: t('terminal_tracking.terminal_config.isActive', 'Active'),
+        width: 80,
+        readOnly: true,
+        renderer: (v: unknown) => <BooleanIcon value={v === true || v === 'true'} />,
+      },
+    ],
+    [t],
+  )
+
+  const openCreate = useCallback(() => {
+    setEditingId(null)
+    setForm(emptyForm)
+    setTestResult(null)
+    setDialogOpen(true)
+  }, [])
+
+  const addButton = useMemo(
+    () => (
+      <Button size="sm" onClick={openCreate}>
+        {t('terminal_tracking.terminal_config.create', 'Add Terminal')}
+      </Button>
+    ),
+    [openCreate, t],
+  )
+
+  const table = useDynamicTablePage<ConfigRow>({
+    source: API,
+    columns,
+    tableName: t('terminal_tracking.terminal_config.title', 'Terminals'),
+    defaultPageSize: 20,
+    mapApiItem: mapItem,
+    cellEdit: false,
+    tableProps: {
+      height: '100%',
+      uiConfig: {
+        readOnlyStyle: 'normal',
+        hideAddRowButton: true,
+        topBarEnd: addButton,
+      },
+    },
+  })
+
+  const openEdit = useCallback(
+    (id: string) => {
+      const items = (table.query.data as { items?: Record<string, unknown>[] })?.items ?? []
+      const raw = items.find((r) => r.id === id)
+      if (!raw) return
+      const adapterType = (raw.adapterType as string) ?? 'n4'
+      const rowAuthType = (raw.authType as AuthType) ?? ADAPTER_SPECS[adapterType]?.authType ?? 'oauth2_password'
+      setEditingId(id)
+      setTestResult(null)
+      setForm({
+        ...emptyForm,
+        terminalCode: (raw.terminalCode as string) ?? '',
+        adapterType,
+        // Preserve the row's stored auth type (e.g. a legacy n4 client-credentials config).
+        authType: rowAuthType,
+        displayName: (raw.displayName as string) ?? '',
+        baseUrl: (raw.baseUrl as string) ?? '',
+        proxyUrl: (raw.proxyUrl as string) ?? '',
+        tokenUrl: (raw.tokenUrl as string) ?? '',
+        scope: (raw.scope as string) ?? '',
+        clientId: (raw.clientId as string) ?? '',
+        credentials: {}, // secrets are never returned; blank = keep unchanged
+        unlocode: (raw.unlocode as string) ?? '',
+        bicCodes: Array.isArray(raw.bicCodes) ? (raw.bicCodes as string[]).join(', ') : '',
+        smdgCodes: Array.isArray(raw.smdgCodes) ? (raw.smdgCodes as string[]).join(', ') : '',
+        nameAliases: Array.isArray(raw.nameAliases) ? (raw.nameAliases as string[]).join(', ') : '',
+        rateLimitRequests: typeof raw.rateLimitRequests === 'number' ? raw.rateLimitRequests : 200,
+        rateLimitWindowSeconds: typeof raw.rateLimitWindowSeconds === 'number' ? raw.rateLimitWindowSeconds : 60,
+        isActive: raw.isActive === true,
+      })
+      setDialogOpen(true)
+    },
+    [table.query.data],
+  )
+
+  const buildBody = useCallback((): Record<string, unknown> | null => {
+    // Assemble authConfig from the structured credential fields.
+    const fields = credentialFieldsFor(form.adapterType, form.authType)
+    const filled = fields.filter((f) => (form.credentials[f.key] ?? '').trim() !== '')
+    let authConfig: Record<string, string> | undefined
+    if (filled.length > 0) {
+      if (filled.length !== fields.length) {
+        flash(
+          t('terminal_tracking.terminal_config.validation.allCredentials', 'Enter all credential fields'),
+          'error',
+        )
+        return null
+      }
+      authConfig = Object.fromEntries(fields.map((f) => [f.key, form.credentials[f.key].trim()]))
+    } else if (!isEdit) {
+      flash(
+        t('terminal_tracking.terminal_config.validation.credentialsRequired', 'Credentials are required'),
+        'error',
+      )
+      return null
+    }
+    // On edit with no credentials entered, authConfig stays undefined → unchanged.
+
+    const showOAuth = ADAPTER_SPECS[form.adapterType]?.showOAuth ?? false
+    const body: Record<string, unknown> = {
+      adapterType: form.adapterType.trim() || 'n4',
+      displayName: form.displayName.trim(),
+      baseUrl: form.baseUrl.trim(),
+      proxyUrl: form.proxyUrl.trim() || null,
+      authType: form.authType,
+      tokenUrl: showOAuth ? form.tokenUrl.trim() || null : null,
+      scope: showOAuth ? form.scope.trim() || null : null,
+      clientId: showOAuth ? form.clientId.trim() || null : null,
+      unlocode: form.unlocode.trim() || null,
+      bicCodes: csv(form.bicCodes) ?? null,
+      smdgCodes: csv(form.smdgCodes) ?? null,
+      nameAliases: csv(form.nameAliases) ?? null,
+      rateLimitRequests: form.rateLimitRequests,
+      rateLimitWindowSeconds: form.rateLimitWindowSeconds,
+      isActive: form.isActive,
+    }
+    if (authConfig !== undefined) body.authConfig = authConfig
+    if (!isEdit) body.terminalCode = form.terminalCode.trim()
+    else body.id = editingId
+    return body
+  }, [form, isEdit, editingId, t])
+
+  const handleSubmit = useCallback(async () => {
+    if (submitting) return
+    if (!isEdit && !form.terminalCode.trim()) {
+      flash(t('terminal_tracking.terminal_config.validation.codeRequired', 'Terminal code is required'), 'error')
+      return
+    }
+    if (!form.displayName.trim() || !form.baseUrl.trim()) {
+      flash(t('terminal_tracking.terminal_config.validation.required', 'Name and base URL are required'), 'error')
+      return
+    }
+    const body = buildBody()
+    if (!body) return
+    setSubmitting(true)
+    try {
+      await apiCallOrThrow(API, { method: isEdit ? 'PUT' : 'POST', body: JSON.stringify(body) })
+      flash(
+        isEdit
+          ? t('terminal_tracking.terminal_config.flash.updated', 'Terminal updated')
+          : t('terminal_tracking.terminal_config.flash.created', 'Terminal created'),
+        'success',
+      )
+      setDialogOpen(false)
+      table.refresh()
+    } catch (err) {
+      flash(err instanceof Error ? err.message : 'Failed to save terminal', 'error')
+    } finally {
+      setSubmitting(false)
+    }
+  }, [submitting, isEdit, form, buildBody, table, t])
+
+  const handleDelete = useCallback(
+    async (id: string) => {
+      if (!confirm(t('terminal_tracking.terminal_config.confirmDelete', 'Delete this terminal?'))) return
+      try {
+        await apiCallOrThrow(API, { method: 'DELETE', body: JSON.stringify({ id }) })
+        flash(t('terminal_tracking.terminal_config.flash.deleted', 'Terminal deleted'), 'success')
+        table.refresh()
+      } catch (err) {
+        flash(err instanceof Error ? err.message : 'Failed to delete terminal', 'error')
+      }
+    },
+    [table, t],
+  )
+
+  const handleTest = useCallback(
+    async (id: string) => {
+      setTestResult(null)
+      try {
+        const { result } = await apiCallOrThrow<{ success: boolean; message: string }>(
+          `${API}/test`,
+          { method: 'POST', body: JSON.stringify({ id }) },
+        )
+        flash(
+          result?.success ? t('terminal_tracking.terminal_config.flash.testOk', 'Connection OK') : (result?.message ?? 'Connection failed'),
+          result?.success ? 'success' : 'error',
+        )
+      } catch (err) {
+        flash(err instanceof Error ? err.message : 'Connection test failed', 'error')
+      }
+    },
+    [t],
+  )
+
+  const handleDialogKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+        event.preventDefault()
+        handleSubmit()
+      }
+    },
+    [handleSubmit],
+  )
+
+  const actionsRenderer = useCallback(
+    (rowData: { id: string }) => {
+      if (!rowData?.id) return null
+      const items: RowActionItem[] = [
+        { label: t('terminal_tracking.terminal_config.actions.test', 'Test connection'), onSelect: () => handleTest(rowData.id) },
+        { label: t('common.edit', 'Edit'), onSelect: () => openEdit(rowData.id) },
+        { label: t('common.delete', 'Delete'), onSelect: () => handleDelete(rowData.id), destructive: true },
+      ]
+      return <RowActions items={items} />
+    },
+    [t, handleTest, openEdit, handleDelete],
+  )
+
+  if (table.isLoading) {
+    return (
+      <Page>
+        <PageBody className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>{t('terminal_tracking.terminal_config.title', 'Terminals')}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <TableSkeleton rows={5} columns={5} />
+            </CardContent>
+          </Card>
+        </PageBody>
+      </Page>
+    )
+  }
+
+  const credPlaceholder = (f: CredField) =>
+    isEdit && f.secret ? '•••• ' + t('terminal_tracking.terminal_config.unchanged', 'unchanged') : f.placeholder
+
+  return (
+    <Page>
+      <PageBody className="space-y-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('terminal_tracking.terminal_config.title', 'Terminals')}</CardTitle>
+            <CardDescription>
+              {t(
+                'terminal_tracking.terminal_config.description',
+                'Configure container terminal APIs (auth + URLs) and the identifiers used to match them.',
+              )}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div style={{ height: 420 }}>
+              <DynamicTable {...table.props} actionsRenderer={actionsRenderer} />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <DialogContent className="sm:max-w-xl max-h-[85vh] overflow-y-auto" onKeyDown={handleDialogKeyDown}>
+            <DialogHeader>
+              <DialogTitle>
+                {isEdit
+                  ? t('terminal_tracking.terminal_config.edit', 'Edit Terminal')
+                  : t('terminal_tracking.terminal_config.create', 'Add Terminal')}
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="grid gap-4 py-2">
+              {/* ── Terminal ────────────────────────────────── */}
+              <SectionLabel>{t('terminal_tracking.terminal_config.section.terminal', 'Terminal')}</SectionLabel>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="adapterType">{t('terminal_tracking.terminal_config.adapterType', 'Adapter')}</Label>
+                  <select id="adapterType" className="border rounded h-9 px-2 text-sm" value={form.adapterType}
+                    onChange={(e) => changeAdapter(e.target.value)}>
+                    {ADAPTER_ORDER.map((k) => (
+                      <option key={k} value={k}>{ADAPTER_SPECS[k].label}</option>
+                    ))}
+                  </select>
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="terminalCode">{t('terminal_tracking.terminal_config.terminalCode', 'Terminal code')}</Label>
+                  <Input id="terminalCode" value={form.terminalCode} disabled={isEdit}
+                    onChange={(e) => setField('terminalCode', e.target.value)} placeholder="dct" />
+                </div>
+              </div>
+
+              <div className="grid gap-2">
+                <Label htmlFor="displayName">{t('terminal_tracking.terminal_config.displayName', 'Name')}</Label>
+                <Input id="displayName" value={form.displayName}
+                  onChange={(e) => setField('displayName', e.target.value)} placeholder="DCT Gdańsk (Baltic Hub)" />
+              </div>
+
+              <div className="grid gap-2">
+                <Label htmlFor="baseUrl">{t('terminal_tracking.terminal_config.baseUrl', 'API base URL')}</Label>
+                <Input id="baseUrl" value={form.baseUrl}
+                  onChange={(e) => setField('baseUrl', e.target.value)} placeholder="https://…" />
+              </div>
+
+              {/* ── Authentication ──────────────────────────── */}
+              <SectionLabel>{t('terminal_tracking.terminal_config.section.auth', 'Authentication')}</SectionLabel>
+
+              {spec.showOAuth && (
+                <>
+                  <div className="grid gap-2">
+                    <Label htmlFor="tokenUrl">{t('terminal_tracking.terminal_config.tokenUrl', 'Token URL')}</Label>
+                    <Input id="tokenUrl" value={form.tokenUrl}
+                      onChange={(e) => setField('tokenUrl', e.target.value)} placeholder=".../oauth2/v2.0/token?p=b2c_1_ropc_login" />
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="grid gap-2">
+                      <Label htmlFor="clientId">{t('terminal_tracking.terminal_config.clientId', 'Client ID')}</Label>
+                      <Input id="clientId" value={form.clientId}
+                        onChange={(e) => setField('clientId', e.target.value)} placeholder="00000000-0000-0000-0000-000000000000" />
+                    </div>
+                    <div className="grid gap-2">
+                      <Label htmlFor="scope">{t('terminal_tracking.terminal_config.scope', 'Scope')}</Label>
+                      <Input id="scope" value={form.scope}
+                        onChange={(e) => setField('scope', e.target.value)} placeholder="https://<tenant>/<app-id>/<scope>" />
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {credFields.map((f) => (
+                <div className="grid gap-2" key={f.key}>
+                  <Label htmlFor={`cred-${f.key}`}>
+                    {t(`terminal_tracking.terminal_config.cred.${f.key}`, f.label)}
+                  </Label>
+                  <Input
+                    id={`cred-${f.key}`}
+                    type={f.secret ? 'password' : 'text'}
+                    autoComplete="off"
+                    value={form.credentials[f.key] ?? ''}
+                    onChange={(e) => setCredential(f.key, e.target.value)}
+                    placeholder={credPlaceholder(f)}
+                  />
+                </div>
+              ))}
+              {form.adapterType === 'gct' && (
+                <p className="text-xs text-muted-foreground">
+                  {t(
+                    'terminal_tracking.terminal_config.gctHint',
+                    'The base32 key shown in the GCT panel next to the QR code. A fresh one-time code is computed from it on each login.',
+                  )}
+                </p>
+              )}
+              {isEdit && (
+                <p className="text-xs text-muted-foreground">
+                  {t('terminal_tracking.terminal_config.credEditHint', 'Leave credentials blank to keep them unchanged.')}
+                </p>
+              )}
+
+              {/* ── Matching ────────────────────────────────── */}
+              <SectionLabel>{t('terminal_tracking.terminal_config.section.matching', 'Matching')}</SectionLabel>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="unlocode">{t('terminal_tracking.terminal_config.unlocode', 'UN/LOCODE')}</Label>
+                  <Input id="unlocode" value={form.unlocode} maxLength={5}
+                    onChange={(e) => setField('unlocode', e.target.value.toUpperCase())} placeholder="PLGDN" />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="smdgCodes">{t('terminal_tracking.terminal_config.smdgCodes', 'SMDG codes (csv)')}</Label>
+                  <Input id="smdgCodes" value={form.smdgCodes}
+                    onChange={(e) => setField('smdgCodes', e.target.value)} />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="bicCodes">{t('terminal_tracking.terminal_config.bicCodes', 'BIC codes (csv)')}</Label>
+                  <Input id="bicCodes" value={form.bicCodes}
+                    onChange={(e) => setField('bicCodes', e.target.value)} />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="nameAliases">{t('terminal_tracking.terminal_config.nameAliases', 'Name aliases (csv)')}</Label>
+                  <Input id="nameAliases" value={form.nameAliases}
+                    onChange={(e) => setField('nameAliases', e.target.value)} placeholder="Baltic Hub, DCT Gdańsk" />
+                </div>
+              </div>
+
+              {/* ── Advanced ────────────────────────────────── */}
+              <SectionLabel>{t('terminal_tracking.terminal_config.section.advanced', 'Advanced')}</SectionLabel>
+              <div className="grid gap-2">
+                <Label htmlFor="proxyUrl">{t('terminal_tracking.terminal_config.proxyUrl', 'API proxy URL (optional)')}</Label>
+                <Input id="proxyUrl" value={form.proxyUrl}
+                  onChange={(e) => setField('proxyUrl', e.target.value)} placeholder="http://proxy.example.com:8888" />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="rlReq">{t('terminal_tracking.terminal_config.rateLimitRequests', 'Rate limit (requests)')}</Label>
+                  <Input id="rlReq" type="number" min={1} value={form.rateLimitRequests}
+                    onChange={(e) => setField('rateLimitRequests', Number(e.target.value) || 200)} />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="rlWin">{t('terminal_tracking.terminal_config.rateLimitWindowSeconds', 'Window (seconds)')}</Label>
+                  <Input id="rlWin" type="number" min={1} value={form.rateLimitWindowSeconds}
+                    onChange={(e) => setField('rateLimitWindowSeconds', Number(e.target.value) || 60)} />
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <Checkbox id="isActive" checked={form.isActive}
+                  onCheckedChange={(c) => setField('isActive', c === true)} />
+                <Label htmlFor="isActive" className="cursor-pointer">{t('terminal_tracking.terminal_config.isActive', 'Active')}</Label>
+              </div>
+
+              {testResult && (
+                <div className={`flex items-center gap-2 rounded-md p-3 text-sm ${testResult.success ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'}`}>
+                  {testResult.success ? <CheckCircle2 className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
+                  <span>{testResult.message}</span>
+                </div>
+              )}
+            </div>
+
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={submitting}>
+                {t('common.cancel', 'Cancel')}
+              </Button>
+              <Button onClick={handleSubmit} disabled={submitting}>
+                {submitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+                {isEdit ? t('common.save', 'Save') : t('common.create', 'Create')}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </PageBody>
+    </Page>
+  )
+}
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground pt-1">
+      {children}
+    </div>
+  )
+}