import { Form, Head } from '@inertiajs/react'; import { useState } from 'react'; import HeadingSmall from '@/components/heading-small'; import { SortableHeader, useSort } from '@/components/sortable-header'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; import AppLayout from '@/layouts/app-layout'; import { destroy, index, upsert, } from '@/routes/admin/supplier-enrollment-field-mappings'; type Supplier = { id: number; name: string; slug: string; }; type FormFieldOption = { id: number; name: string; label: string; }; type Mapping = { id: number; supplier_id: number; form_field_id: number | null; supplier_field_name: string; is_required: boolean; is_active: boolean; form_field: FormFieldOption | null; }; type Props = { suppliers: Supplier[]; formFields: FormFieldOption[]; activeSupplierId: number | null; mappings: Mapping[]; }; export default function SupplierEnrollmentFieldMappings({ suppliers, formFields, activeSupplierId, mappings, }: Props) { const [createOpen, setCreateOpen] = useState(false); const [editingId, setEditingId] = useState(null); const { sorted, sortColumn, sortDirection, toggleSort } = useSort( mappings, 'supplier_field_name', ); const breadcrumbs = [ { title: 'Supplier Enrollment Field Mappings', href: activeSupplierId === null ? index.url() : index.url() + `?supplier_id=${activeSupplierId}`, }, ]; const editingMapping = mappings.find((m) => m.id === editingId) ?? null; return (

Supplier Enrollment Field Mappings

{/* Supplier selector */}
{activeSupplierId === null ? (
Pick a supplier to view and edit enrollment field mappings.
) : (
{/* Add mapping button + dialog */}
Add mapping Map a supplier field to a canonical enrollment form field.
setCreateOpen(false)} transform={(data) => ({ ...data, supplier_id: activeSupplierId, })} > {({ processing, errors }) => (
{errors.supplier_field_name && (
{errors.supplier_field_name}
)}
{errors.form_field_id && (
{errors.form_field_id}
)}
)}
{/* Mappings table */}
{sorted.map((m) => ( ))}
{m.supplier_field_name} {m.form_field ? ( {m.form_field.name} {' '} — {m.form_field.label} ) : ( Backend only )} {m.is_required ? 'Yes' : 'No'} {m.is_active ? 'Yes' : 'No'}
setEditingId(open ? m.id : null) } > Edit mapping Update the mapping for{' '} {m.supplier_field_name}. {editingMapping && editingMapping.id === m.id && (
setEditingId(null)} transform={(data) => ({ ...data, supplier_id: activeSupplierId, })} > {({ processing, errors }) => (
{errors.supplier_field_name && (
{errors.supplier_field_name}
)}
{errors.form_field_id && (
{errors.form_field_id}
)}
)}
)}
{({ processing }) => ( )}
{mappings.length === 0 && (
No enrollment field mappings yet.
)}
)}
); }