Add initial version of fields to ReferenceTab: Works, but all are textfield

frontend/src/components/Reference/Tabs/ReferenceTab.tsx

@@ -5,21 +5,36 @@ import { useGetReferenceTypesQuery } from '@/redux/referenceReducer'
 import { CircularProgress } from '@mui/material'
 
 export const ReferenceTab = () => {
-  const { dropdown } = useDetailContext<ReferenceDetailsType>()
+  const { dropdown, data, editData, mode, textField } = useDetailContext<ReferenceDetailsType>()
   const { data: referenceTypes } = useGetReferenceTypesQuery()
 
   if (!referenceTypes) return <CircularProgress />
 
-  const referenceTypeOptions = referenceTypes.map(refType => ({
-    display: refType.ref_type ?? 'Unknown',
-    value: refType.ref_type_id + '',
-  }))
-  console.log({ referenceTypeOptions })
+  const referenceTypeOptions = referenceTypes
+    .map(refType => ({
+      display: refType.ref_type ?? 'Unknown',
+      value: refType.ref_type_id + '',
+    }))
+    .sort((a, b) => a.display.localeCompare(b.display))
+
   const refTypeSelection = [['Reference type', dropdown('ref_type_id', referenceTypeOptions, 'Reference type')]]
+  const selectedRefType = referenceTypes.find(refType => {
+    if (mode.read) {
+      return data.ref_type_id === refType.ref_type_id
+    }
+    return parseInt(editData.ref_type_id!) === refType.ref_type_id
+  })
+  const fields = selectedRefType?.ref_field_name.filter(field => field.display)
+
+  const fieldsArray = fields!.map(field => [
+    field.ref_field_name,
+    textField(field.field_name! as keyof ReferenceDetailsType),
+  ])
 
   return (
     <>
       <ArrayFrame array={refTypeSelection} title="Reference type" />
+      <ArrayFrame array={fieldsArray} title={`${selectedRefType!.ref_type} information`} />
     </>
   )
 }