fix dynamic payload refnum & reftxt

src/lib/components/dictionary/test/config/test-form-config.js

@@ -73,6 +73,10 @@ export const testCalSchema = z
 		}
 	});
 
+export const testGroupSchema = z.object({
+		Member: z.string().optional()
+	});
+
 export const refNumSchema = z
 	.object({
 		AgeStart: z.string().optional(),
@@ -212,6 +216,12 @@ export const testCalInitialForm = {
 	FormulaCode: ''
 };
 
+export const testGroupInitialForm = {
+	TestGrpID: '',
+	TestSiteID: '',
+	Member: '',
+}
+
 export const refNumInitialForm = {
 	RefNumID: '',
 	SiteID: '',
@@ -270,9 +280,13 @@ export const testDefaultErrors = {
 
 export const testCalDefaultErrors = {
 	FormulaInput: 'Required',
-	FormulaCode: null
+	FormulaCode: null,
 };
 
+export const testGroupDefaultErrors = {
+	Member: null,
+}
+
 export const refNumDefaultErrors = {
 	AgeStart: null,
 	AgeEnd: null,
@@ -597,6 +611,28 @@ export const testCalFormFields = [
 	}
 ];
 
+export const testGroupFormFields = [
+	{
+		rows: [
+			{
+				type: 'row',
+				columns: [
+					{
+						key: 'Member',
+						label: 'Member Test',
+						required: false,
+						type: 'members',
+						optionsEndpoint: `${API.BASE_URL}${API.TEST}`,
+						valueKey: 'TestSiteCode',
+						labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`,
+						validateOn: ['input']
+					}
+				]
+			},
+		]
+	}
+];
+
 export const refNumFormFields = [
 	{
 		rows: [
@@ -1013,7 +1049,7 @@ export function getTestFormActions(handlers) {
 // 	return cleanEmptyStrings(payload);
 // }
 
-export function buildTestPayload({ mainForm, activeFormStates, testType }) {
+export function buildTestPayload({ mainForm, activeFormStates, testType, refNumData, refTxtData }) {
 	let payload = {
 		...mainForm
 	};
@@ -1021,13 +1057,17 @@ export function buildTestPayload({ mainForm, activeFormStates, testType }) {
 	for (const key in activeFormStates) {
 		const state = activeFormStates[key];
 
-		if (state?.form) {
+		if (key === 'refNum' && refNumData?.length > 0) {
+			payload[key] = refNumData;
+		} else if (key === 'refTxt' && refTxtData?.length > 0) {
+			payload[key] = refTxtData;
+
+		} else if (state?.form) {
 			payload[key] = {
 				...state.form
 			};
 		}
 	}
 
-
 	return cleanEmptyStrings(payload);
 }

src/lib/components/dictionary/test/page/create-page.svelte

@@ -1,30 +1,50 @@
 <script>
-    import { useDictionaryForm } from "$lib/components/composable/use-dictionary-form.svelte";
+	import { useDictionaryForm } from '$lib/components/composable/use-dictionary-form.svelte';
-    import FormPageContainer from "$lib/components/reusable/form/form-page-container.svelte";
+	import FormPageContainer from '$lib/components/reusable/form/form-page-container.svelte';
-    import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
+	import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte';
-    import { toast } from "svelte-sonner";
+	import { toast } from 'svelte-sonner';
-    import ReusableAlertDialog from "$lib/components/reusable/reusable-alert-dialog.svelte";
+	import ReusableAlertDialog from '$lib/components/reusable/reusable-alert-dialog.svelte';
-    import * as Tabs from "$lib/components/ui/tabs/index.js";
+	import * as Tabs from '$lib/components/ui/tabs/index.js';
-    import { useForm } from "$lib/components/composable/use-form.svelte";
+	import { useForm } from '$lib/components/composable/use-form.svelte';
-    import { buildTestPayload, 
+	import {
-            testCalSchema, testCalInitialForm, testCalDefaultErrors, testCalFormFields, 
+		buildTestPayload,
-            refNumSchema, refNumDefaultErrors, refNumInitialForm, refNumFormFields, 
+		testCalSchema,
-            refTxtSchema, refTxtDefaultErrors, refTxtInitialForm, refTxtFormFields,
+		testCalInitialForm,
-            testMapSchema, testMapInitialForm, testMapDefaultErrors, testMapFormFields
+		testCalDefaultErrors,
-        } from "$lib/components/dictionary/test/config/test-form-config";
+		testCalFormFields,
-    import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
+		refNumSchema,
-    import RefNum from "./tabs/ref-num.svelte";
+		refNumDefaultErrors,
-    import RefTxt from "./tabs/ref-txt.svelte";
+		refNumInitialForm,
-    import Calculation from "./tabs/calculation.svelte";
+		refNumFormFields,
-    import Map from "./tabs/map.svelte";
+		refTxtSchema,
-    import { API } from "$lib/config/api";
+		refTxtDefaultErrors,
-    import { untrack } from "svelte";
+		refTxtInitialForm,
+		refTxtFormFields,
+		testMapSchema,
+		testMapInitialForm,
+		testMapDefaultErrors,
+		testMapFormFields,
+		testGroupSchema,
+		testGroupInitialForm,
+		testGroupDefaultErrors,
+        testGroupFormFields
+	} from '$lib/components/dictionary/test/config/test-form-config';
+	import ReusableEmpty from '$lib/components/reusable/reusable-empty.svelte';
+	import RefNum from './tabs/ref-num.svelte';
+	import RefTxt from './tabs/ref-txt.svelte';
+	import Calculation from './tabs/calculation.svelte';
+	import Map from './tabs/map.svelte';
+    import Group from './tabs/group.svelte';
+	import { API } from '$lib/config/api';
+	import { untrack } from 'svelte';
 
 	let props = $props();
 
 	let resetRefNum = $state();
 	let resetRefTxt = $state();
 	let resetMap = $state();
+	let refNumData = $state([]);
+	let refTxtData = $state([]);
 
 	const { masterDetail, formFields, formActions, schema, initialForm } = props.context;
 
@@ -33,19 +53,25 @@
 	const calFormState = useForm({
 		schema: testCalSchema,
 		initialForm: testCalInitialForm,
-        defaultErrors: testCalDefaultErrors,
+		defaultErrors: testCalDefaultErrors
+	});
+
+    const groupFormState = useForm({
+        schema: testGroupSchema,
+        initialForm: testGroupInitialForm,
+        defaultErrors: testGroupDefaultErrors,
     });
 
 	const refNumState = useForm({
 		schema: refNumSchema,
 		initialForm: refNumInitialForm,
-        defaultErrors: refNumDefaultErrors,
+		defaultErrors: refNumDefaultErrors
 	});
 
 	const refTxtState = useForm({
 		schema: refTxtSchema,
 		initialForm: refTxtInitialForm,
-        defaultErrors: refTxtDefaultErrors,
+		defaultErrors: refTxtDefaultErrors
 	});
 
 	const mapFormState = useForm({
@@ -53,7 +79,7 @@
 		initialForm: testMapInitialForm,
 		defaultErrors: testMapDefaultErrors,
 		modeOpt: 'cascade'
-    })
+	});
 
 	// const activeFormStates = $derived.by(() => {
 	//     switch (formState.form.TestType) {
@@ -72,32 +98,32 @@
 	// });
 
 	const activeFormStates = $derived.by(() => {
-        const testType = formState.form.TestType ?? "";
+		const testType = formState.form.TestType ?? '';
-        const refType = formState.form.RefType ?? "";
+		const refType = formState.form.RefType ?? '';
 
 		let refState = {};
 
-        if (refType === "RANGE" || refType === "THOLD") {
+		if (refType === 'RANGE' || refType === 'THOLD') {
 			refState = { refNum: refNumState };
-        } else if (refType === "TEXT" || refType === "VSET") {
+		} else if (refType === 'TEXT' || refType === 'VSET') {
 			refState = { refTxt: refTxtState };
 		}
 
 		switch (testType) {
-            case "TEST":
+			case 'TEST':
-            case "PARAM":
+			case 'PARAM':
 				return {
 					...refState,
 					map: mapFormState
 				};
-            case "CALC":
+			case 'CALC':
 				return {
 					cal: calFormState,
 					...refState,
 					map: mapFormState
 				};
-            case "GROUP":
+			case 'GROUP':
-            case "TITLE":
+			case 'TITLE':
 			default:
 				return {};
 		}
@@ -114,10 +140,8 @@
 
 	const actions = formActions(handlers);
 
-    const allColumns = formFields.flatMap(
+	const allColumns = formFields.flatMap((section) =>
-        (section) => section.rows.flatMap(
+		section.rows.flatMap((row) => row.columns ?? [])
-            (row) => row.columns ?? []
-        )
 	);
 
 	let showConfirm = $state(false);
@@ -129,7 +153,9 @@
 		const payload = buildTestPayload({
 			mainForm,
 			activeFormStates,
-            testType: testType
+			testType: testType,
+			refNumData: refNumData,
+			refTxtData: refTxtData
 		});
 		console.log(payload);
 		// const result = await formState.save(masterDetail.mode);
@@ -204,7 +230,7 @@
 
 	let hiddenFields = $derived.by(() => {
 		const resultType = formState?.form?.ResultType;
-        return resultType !== "VSET" ? ["VSet"] : [];
+		return resultType !== 'VSET' ? ['VSet'] : [];
 	});
 
 	let refComponent = $derived.by(() => {
@@ -215,24 +241,24 @@
 	});
 
 	const refTxtFormFieldsTransformed = $derived.by(() => {
-        return refTxtFormFields.map(group => ({
+		return refTxtFormFields.map((group) => ({
 			...group,
-            rows: group.rows.map(row => ({
+			rows: group.rows.map((row) => ({
 				...row,
-                columns: row.columns.map(col => {
+				columns: row.columns.map((col) => {
-                    if (col.key !== "RefTxt") return col;
+					if (col.key !== 'RefTxt') return col;
 
-                    if (formState.form.ResultType !== "VSET" || !formState.form.VSet) {
+					if (formState.form.ResultType !== 'VSET' || !formState.form.VSet) {
 						return {
 							...col,
-                            type: "textarea",
+							type: 'textarea',
 							optionsEndpoint: undefined
 						};
 					}
 
 					return {
 						...col,
-                        type: "select",
+						type: 'select',
 						optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/${formState.form.VSet}`,
 						fullWidth: false
 					};
@@ -242,70 +268,69 @@
 	});
 
 	const testMapFormFieldsTransformed = $derived.by(() => {
-        return testMapFormFields.map(group => ({
+		return testMapFormFields.map((group) => ({
 			...group,
-            rows: group.rows.map(row => ({
+			rows: group.rows.map((row) => ({
 				...row,
-                columns: row.columns.map(col => {
+				columns: row.columns.map((col) => {
-                    
+					if (col.key === 'HostID') {
-                    if (col.key === "HostID") {
+						if (mapFormState.form.HostType === 'SITE') {
-                        if (mapFormState.form.HostType === "SITE") {
 							return {
 								...col,
-                                type: "select",
+								type: 'select',
 								optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
-                                valueKey: "SiteID",
+								valueKey: 'SiteID',
-                                labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`,
+								labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`
 							};
 						}
 						return col;
 					}
 
-                    if (col.key === "ClientID") {
+					if (col.key === 'ClientID') {
-                        if (mapFormState.form.ClientType === "SITE") {
+						if (mapFormState.form.ClientType === 'SITE') {
 							return {
 								...col,
-                                type: "select",
+								type: 'select',
 								optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
-                                valueKey: "SiteID",
+								valueKey: 'SiteID',
-                                labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`,
+								labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`
 							};
 						}
 						return col;
 					}
 
-                    if (col.key === "HostTestCode" || col.key === "HostTestName") {
+					if (col.key === 'HostTestCode' || col.key === 'HostTestName') {
-                        if (mapFormState.form.HostType === "SITE" && mapFormState.form.HostID) {
+						if (mapFormState.form.HostType === 'SITE' && mapFormState.form.HostID) {
 							return {
 								...col,
-                                type: "select",
+								type: 'select',
 								optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.form.HostID}`,
-                                valueKey: "TestSiteID",
+								valueKey: 'TestSiteID',
-                                labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`,
+								labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`
 							};
 						}
 						// kalau belum pilih HostID, kembalikan default (misal input biasa)
 						return {
 							...col,
-                            type: "text",
+							type: 'text',
 							optionsEndpoint: undefined
 						};
 					}
 
-                    if (col.key === "ClientTestCode" || col.key === "ClientTestName") {
+					if (col.key === 'ClientTestCode' || col.key === 'ClientTestName') {
-                        if (mapFormState.form.ClientType === "SITE" && mapFormState.form.ClientID) {
+						if (mapFormState.form.ClientType === 'SITE' && mapFormState.form.ClientID) {
 							return {
 								...col,
-                                type: "select",
+								type: 'select',
 								optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.form.ClientID}`,
-                                valueKey: "TestSiteID",
+								valueKey: 'TestSiteID',
-                                labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`,
+								labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`
 							};
 						}
 						// kalau belum pilih HostID, kembalikan default (misal input biasa)
 						return {
 							...col,
-                            type: "text",
+							type: 'text',
 							optionsEndpoint: undefined
 						};
 					}
@@ -327,23 +352,21 @@
 
 	$effect(() => {
 		for (const key of hiddenFields) {
-            formState.form[key] = "";
+			formState.form[key] = '';
 		}
 	});
 
 	$effect(() => {
 		if (formState.form.Factor && !formState.form.Unit2) {
-            formState.errors.Unit2 = "Required";
+			formState.errors.Unit2 = 'Required';
 		} else {
 			formState.errors.Unit2 = null;
 		}
 	});
 
 	$effect(() => {
-        const allColumns = formFields.flatMap(
+		const allColumns = formFields.flatMap((section) =>
-            (section) => section.rows.flatMap(
+			section.rows.flatMap((row) => row.columns ?? [])
-                (row) => row.columns ?? []
-            )
 		);
 
 		untrack(() => {
@@ -356,20 +379,20 @@
 						key: col.key,
 						optionsEndpoint: col.optionsEndpoint,
 						valueKey: col.valueKey,
-                        labelKey: col.labelKey,
+						labelKey: col.labelKey
 					},
 					formState.form
 				);
 			}
-        })
+		});
 	});
 
 	function handleTestTypeChange(value) {
 		formState.form.TestType = value;
 
-        formState.form.ResultType = "";
+		formState.form.ResultType = '';
 		formState.errors.ResultType = null;
-        formState.form.RefType = "";
+		formState.form.RefType = '';
 		formState.errors.RefType = null;
 
 		calFormState.reset();
@@ -383,7 +406,7 @@
 	function handleResultTypeChange(value) {
 		formState.form.ResultType = value;
 
-        formState.form.RefType = "";
+		formState.form.RefType = '';
 		formState.errors.RefType = null;
 
 		calFormState.reset();
@@ -393,7 +416,7 @@
 		resetRefNum?.();
 		resetRefTxt?.();
 
-        let newRefType = "";
+		let newRefType = '';
 		if (value === 'TEXT') {
 			newRefType = 'TEXT';
 		}
@@ -460,7 +483,7 @@
 		<Tabs.Content value="definition">
 			<DictionaryFormRenderer
 				{formState}
-                formFields={formFields}
+				{formFields}
 				mode="create"
 				{disabledResultTypes}
 				{disabledReferenceTypes}
@@ -474,17 +497,17 @@
 			<Calculation {calFormState} {testCalFormFields} />
 		</Tabs.Content>
 		<Tabs.Content value="group">
-            group
+            <Group {groupFormState} {testGroupFormFields} />
         </Tabs.Content>
 		<Tabs.Content value="map">
-            <Map {mapFormState} testMapFormFields={testMapFormFieldsTransformed} bind:resetMap={resetMap}/>
+			<Map {mapFormState} testMapFormFields={testMapFormFieldsTransformed} bind:resetMap />
 		</Tabs.Content>
 		<Tabs.Content value="reference">
 			<div class="w-full h-full flex items-start">
 				{#if refComponent === 'numeric'}
-                    <RefNum {refNumState} {refNumFormFields} bind:resetRefNum={resetRefNum}/>
+					<RefNum {refNumState} {refNumFormFields} bind:tempNumeric={refNumData} bind:resetRefNum />
 				{:else if refComponent === 'text'}
-                    <RefTxt {refTxtState} refTxtFormFields={refTxtFormFieldsTransformed} bind:resetRefTxt={resetRefTxt} />
+					<RefTxt {refTxtState} refTxtFormFields={refTxtFormFieldsTransformed} bind:tempTxt={refTxtData} bind:resetRefTxt />
 				{:else}
 					<div class="h-full w-full flex items-center">
 						<ReusableEmpty desc="Select a Reference Type" />
@@ -493,7 +516,6 @@
 			</div>
 		</Tabs.Content>
 	</Tabs.Root>
-    
 </FormPageContainer>
 
 <ReusableAlertDialog

src/lib/components/dictionary/test/page/tabs/calculation.svelte

@@ -9,154 +9,11 @@
     import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte';
 
 	let props = $props();
-
-	// const formState = props.calFormState;
-
-	// let options = $state([]);
-	// let isLoading = $state(false);
-    // let errors = $state({});
-
-	// function hasExactKeyword(input, keyword) {
-	// 	const regex = new RegExp(`\\b${keyword}\\b`, 'i');
-	// 	return regex.test(input);
-	// }
-
-	// // 🔹 FETCH OPTIONS
-	// async function fetchTests() {
-	// 	isLoading = true;
-	// 	try {
-	// 		const res = await fetch(`${API.BASE_URL}${API.TEST}`);
-	// 		const data = await res.json();
-    //         console.log(data);
-
-	// 		options = data.data.map((item) => ({
-	// 			value: item.TestSiteCode,
-	// 			label: `${item.TestSiteCode} - ${item.TestSiteName}`
-	// 		}));
-	// 	} catch (err) {
-	// 		console.error('Failed to fetch tests', err);
-	// 	} finally {
-	// 		isLoading = false;
-	// 	}
-	// }
-
-	// $effect(() => {
-	// 	fetchTests();
-	// });
-
-	// // 🔹 VALIDATION
-	// $effect(() => {
-	// 	const result = testCalSchema.safeParse(formState.form);
-
-	// 	if (!result.success) {
-	// 		const fieldErrors = {};
-	// 		for (const issue of result.error.issues) {
-	// 			fieldErrors[issue.path[0]] = issue.message;
-	// 		}
-	// 		errors = fieldErrors;
-	// 	} else {
-	// 		errors = {};
-	// 	}
-	// });
-
-	// // 🔹 Badge status
-	// const inputStatus = $derived.by(() => {
-	// 	const inputs = formState.form.FormulaInput || [];
-	// 	const code = formState.form.FormulaCode || '';
-
-	// 	return inputs.map((v) => ({
-	// 		value: v,
-	// 		done: hasExactKeyword(code, v)
-	// 	}));
-	// });
-
-    // function unselectAll() {
-    //     formState.form.FormulaInput = [];
-    //     errors = {};
-    // }
 </script>
 
 <div class="flex flex-col gap-4 w-full">
     <DictionaryFormRenderer formState={props.calFormState} formFields={props.testCalFormFields}/>
 </div>
 
-<!-- <div class="p-2 space-y-6">
-    <div class="grid grid-cols-1 space-y-2 gap-6 md:gap-4">
-        <div class="flex w-full flex-col gap-1.5">
-            <div class="flex justify-between items-center w-full">
-                <Label>Formula Input</Label>
-            </div>
-            <div class="relative flex flex-col items-center w-full">
-                <Select.Root
-                    type="multiple"
-                    bind:value={formState.form.FormulaInput}
-                >
-                    <Select.Trigger class="w-full">
-                        {formState.form.FormulaInput?.length
-                            ? options
-                                    .filter(o => formState.form.FormulaInput.includes(o.value))
-                                    .map(o => o.label)
-                                    .join(', ')
-                            : 'Select parameters'}
-                    </Select.Trigger>
-            
-                    <Select.Content>
-                        <Select.Group>
-                            {#if isLoading}
-                                <div class="p-2 text-sm text-muted-foreground">
-                                    Loading...
-                                </div>
-                            {:else}
-                                {#if formState.form.FormulaInput.length > 0}
-                                    <Select.Separator />
-                                    <button
-                                        class="w-full px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground"
-                                        onclick={unselectAll}
-                                    >
-                                        Unselect All
-                                    </button>
-                                {/if}
-                                {#each options as opt (opt.value)}
-                                    <Select.Item value={opt.value} label={opt.label}>
-                                        {opt.label}
-                                    </Select.Item>
-                                {/each}
-                            {/if}
-                        </Select.Group>
-                        
-                    </Select.Content>
-                </Select.Root>
-            </div>
-        </div>
-        
-        <div class="flex w-full flex-col gap-1.5">
-            <div class="flex justify-between items-center w-full">
-                <Label>Formula Code</Label>
-            </div>
-            <div class="relative flex flex-col items-center w-full">
-                <Textarea
-                    class="border rounded p-2"
-                    bind:value={formState.form.FormulaCode}
-                />
-            </div>
-        </div>
-    </div>
-
-    {#if errors.FormulaCode}
-        <div class="flex flex-col gap-2 text-sm text-destructive">
-            <span>{errors.FormulaCode}</span>
-    
-            <div class="flex gap-1">
-                {#each inputStatus as item (item.value)}
-                    <Badge variant={item.done ? 'default' : 'destructive'}>
-                        {item.value}
-                    </Badge>
-                {/each}
-            </div>
-        </div>
-    {/if}
-</div> -->
- 
-
 
 

src/lib/components/dictionary/test/page/tabs/group.svelte

@@ -0,0 +1,25 @@
+<script>
+    import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
+
+    let props = $props();
+
+    let members = $state([{ id: 1, value: "" }]);
+
+    function addMember() {
+        members = [...members, { id: Date.now(), value: "" }];
+    }
+
+    function removeMember(id) {
+        members = members.filter(m => m.id !== id);
+    }
+</script>
+
+<div class="flex flex-col gap-4 w-full">
+    <DictionaryFormRenderer 
+        formState={props.groupFormState} 
+        formFields={props.testGroupFormFields} 
+        {members}
+        onAddMember={addMember}
+        onRemoveMember={removeMember}
+    />
+</div>

src/lib/components/dictionary/test/page/tabs/ref-num.svelte

@@ -1,18 +1,17 @@
 <script>
-    import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
+	import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte';
-    import { Separator } from "$lib/components/ui/separator/index.js";
+	import { Separator } from '$lib/components/ui/separator/index.js';
-    import * as Table from "$lib/components/ui/table/index.js";
+	import * as Table from '$lib/components/ui/table/index.js';
-    import { Button } from "$lib/components/ui/button/index.js";
+	import { Button } from '$lib/components/ui/button/index.js';
-    import { Badge } from "$lib/components/ui/badge/index.js";
+	import { Badge } from '$lib/components/ui/badge/index.js';
-    import { buildAgeText } from "$lib/utils/ageUtils";
+	import { buildAgeText } from '$lib/utils/ageUtils';
-    import PencilIcon from "@lucide/svelte/icons/pencil";
+	import PencilIcon from '@lucide/svelte/icons/pencil';
-    import Trash2Icon from "@lucide/svelte/icons/trash-2";
+	import Trash2Icon from '@lucide/svelte/icons/trash-2';
-    import { untrack } from "svelte";
+	import { untrack } from 'svelte';
-    import { toDays } from "$lib/utils/ageUtils";
+	import { toDays } from '$lib/utils/ageUtils';
 
-    let { resetRefNum = $bindable(), ...props } = $props()
+	let { tempNumeric = $bindable([]), resetRefNum = $bindable(), ...props } = $props();
 
-    let tempNumeric = $state([]);
 	let editingId = $state(null);
 	let idCounter = $state(0);
 
@@ -21,15 +20,15 @@
 	};
 
 	let joinFields = $state({
-        AgeStart: { DD: "", MM: "", YY: "" },
+		AgeStart: { DD: '', MM: '', YY: '' },
-        AgeEnd: { DD: "", MM: "", YY: "" },
+		AgeEnd: { DD: '', MM: '', YY: '' }
 	});
 
 	let disabledSign = $derived.by(() => {
 		const refType = props.refNumState.form.NumRefType;
 
-        if (refType === "RANGE") return true;
+		if (refType === 'RANGE') return true;
-        if (refType === "THOLD") return false;
+		if (refType === 'THOLD') return false;
 
 		return false;
 	});
@@ -37,28 +36,28 @@
 	function snapshotForm() {
 		const f = props.refNumState.form;
 		return {
-            SpcType: f.SpcType ?? "",
+			SpcType: f.SpcType ?? '',
-            Sex: f.Sex ?? "",
+			Sex: f.Sex ?? '',
-            AgeStart: f.AgeStart ?? "",
+			AgeStart: f.AgeStart ?? '',
-            AgeEnd: f.AgeEnd ?? "",
+			AgeEnd: f.AgeEnd ?? '',
-            NumRefType: f.NumRefType ?? "",
+			NumRefType: f.NumRefType ?? '',
-            RangeType: f.RangeType ?? "",
+			RangeType: f.RangeType ?? '',
-            LowSign: f.LowSign ?? "",
+			LowSign: f.LowSign ?? '',
-            Low: f.Low ?? "",
+			Low: f.Low ?? '',
-            HighSign: f.HighSign ?? "",
+			HighSign: f.HighSign ?? '',
-            High: f.High ?? "",
+			High: f.High ?? '',
-            Display: f.Display ?? "",
+			Display: f.Display ?? '',
-            Flag: f.Flag ?? "",
+			Flag: f.Flag ?? '',
-            Interpretation: f.Interpretation ?? "",
+			Interpretation: f.Interpretation ?? '',
-            Notes: f.Notes ?? "",
+			Notes: f.Notes ?? ''
 		};
 	}
 
 	function resetForm() {
 		props.refNumState.reset?.();
 		joinFields = {
-            AgeStart: { DD: "", MM: "", YY: "" },
+			AgeStart: { DD: '', MM: '', YY: '' },
-            AgeEnd: { DD: "", MM: "", YY: "" },
+			AgeEnd: { DD: '', MM: '', YY: '' }
 		};
 		editingId = null;
 	}
@@ -73,7 +72,7 @@
 		// tempNumeric = [...tempNumeric, row];
 		// resetForm();
 
-        const isOverlap = tempNumeric.some(row => {
+		const isOverlap = tempNumeric.some((row) => {
 			const existingStart = toDays(row.AgeStart);
 			const existingEnd = toDays(row.AgeEnd);
 
@@ -83,8 +82,7 @@
 		});
 
 		if (isOverlap) {
-            props.refNumState.errors.AgeEnd =
+			props.refNumState.errors.AgeEnd = 'Age range overlaps with existing data';
-                "Age range overlaps with existing data";
 			return;
 		}
 
@@ -117,12 +115,12 @@
 		f.Interpretation = row.Interpretation;
 		f.Notes = row.Notes;
 
-        for (const key of ["AgeStart", "AgeEnd"]) {
+		for (const key of ['AgeStart', 'AgeEnd']) {
-            const val = row[key] ?? "";
+			const val = row[key] ?? '';
 			const match = val.match(/(\d+)Y\s*(\d+)M\s*(\d+)D/);
 			joinFields[key] = match
 				? { YY: match[1], MM: match[2], DD: match[3] }
-                : { DD: "", MM: "", YY: "" };
+				: { DD: '', MM: '', YY: '' };
 		}
 	}
 
@@ -154,27 +152,24 @@
 		return found ? found.code : value;
 	}
 
-    const rangeTypeBadge = (type) => ({ REF: "REF", CRTC: "CRTC" }[type] ?? null);
+	const rangeTypeBadge = (type) => ({ REF: 'REF', CRTC: 'CRTC' })[type] ?? null;
-    const numRefTypeBadge = (type) => ({ RANGE: "R", THOLD: "T" }[type] ?? null);;
+	const numRefTypeBadge = (type) => ({ RANGE: 'R', THOLD: 'T' })[type] ?? null;
 
 	const rangeDisplay = (row) => {
-        if (row.NumRefType === "RANGE") return `${row.LowValue} - ${row.HighValue}`;
+		if (row.NumRefType === 'RANGE') return `${row.LowValue} - ${row.HighValue}`;
-        if (row.NumRefType === "THOLD") return row.TholdValue;
+		if (row.NumRefType === 'THOLD') return row.TholdValue;
-        return "-";
+		return '-';
 	};
 
 	$effect(() => {
-        for (const key of ["AgeStart", "AgeEnd"]) {
+		for (const key of ['AgeStart', 'AgeEnd']) {
-            props.refNumState.form[key] =
+			props.refNumState.form[key] = buildAgeText(joinFields[key]);
-                buildAgeText(joinFields[key]);
 		}
 	});
 
 	$effect(() => {
-        const allColumns = props.refNumFormFields.flatMap(
+		const allColumns = props.refNumFormFields.flatMap((section) =>
-            (section) => section.rows.flatMap(
+			section.rows.flatMap((row) => row.columns ?? [])
-                (row) => row.columns ?? []
-            )
 		);
 
 		untrack(() => {
@@ -186,21 +181,21 @@
 						key: col.key,
 						optionsEndpoint: col.optionsEndpoint,
 						valueKey: col.valueKey,
-                        labelKey: col.labelKey,
+						labelKey: col.labelKey
 					},
 					props.refNumState.form
 				);
 			}
-        })
+		});
 	});
 
 	$effect(() => {
-        if (!props.refNumState.form.Low || props.refNumState.form.Low === "") {
+		if (!props.refNumState.form.Low || props.refNumState.form.Low === '') {
-            props.refNumState.form.LowSign = "";
+			props.refNumState.form.LowSign = '';
 		}
 
-        if (!props.refNumState.form.High || props.refNumState.form.High === "") {
+		if (!props.refNumState.form.High || props.refNumState.form.High === '') {
-            props.refNumState.form.HighSign = "";
+			props.refNumState.form.HighSign = '';
 		}
 	});
 </script>
@@ -215,16 +210,12 @@
 		/>
 		<div class="flex gap-2 mt-1 ms-2">
 			{#if editingId !== null}
-                <Button size="sm" class="cursor-pointer" onclick={handleUpdate}>
+				<Button size="sm" class="cursor-pointer" onclick={handleUpdate}>Update</Button>
-                    Update
-                </Button>
 				<Button size="sm" variant="outline" class="cursor-pointer" onclick={handleCancelEdit}>
 					Cancel
 				</Button>
 			{:else}
-                <Button size="sm" class="cursor-pointer" onclick={handleInsert}>
+				<Button size="sm" class="cursor-pointer" onclick={handleInsert}>Insert</Button>
-                    Insert
-                </Button>
 			{/if}
 		</div>
 	</div>
@@ -255,11 +246,10 @@
 					</Table.Row>
 				{:else}
 					{#each tempNumeric as row (row.id)}
-                        <Table.Row 
+						<Table.Row class="cursor-pointer hover:bg-muted/50">
-                            class="cursor-pointer hover:bg-muted/50"
+							<Table.Cell>{row.SpcType ? getLabel('SpcType', row.SpcType) : '-'}</Table.Cell>
+							<Table.Cell class="font-medium">{row.Sex ? getLabel('Sex', row.Sex) : '-'}</Table.Cell
 							>
-                            <Table.Cell>{row.SpcType ? getLabel("SpcType", row.SpcType) : "-"}</Table.Cell>
-                            <Table.Cell class="font-medium">{row.Sex ? getLabel("Sex", row.Sex) : "-"}</Table.Cell>
 							<Table.Cell>{row.AgeStart} &ndash; {row.AgeEnd}</Table.Cell>
 							<Table.Cell>
 								{#if rangeTypeBadge(row.RangeType)}
@@ -270,10 +260,14 @@
 							</Table.Cell>
 							<Table.Cell class="font-medium flex justify-between">
 								<div>
-                                    {row.LowSign ? row.LowSign : ""} {row.Low || "null"} &ndash; 
+									{row.LowSign ? row.LowSign : ''}
-                                    {row.HighSign ? row.HighSign : ""} {row.High || "null"}
+									{row.Low || 'null'} &ndash;
+									{row.HighSign ? row.HighSign : ''}
+									{row.High || 'null'}
 								</div>
-                                <Badge variant="outline" class="border-dashed border-primary border-2">{numRefTypeBadge(row.NumRefType)}</Badge>
+								<Badge variant="outline" class="border-dashed border-primary border-2"
+									>{numRefTypeBadge(row.NumRefType)}</Badge
+								>
 							</Table.Cell>
 							<Table.Cell class="font-medium">{row.Flag}</Table.Cell>
 							<Table.Cell class="font-medium">{row.Interpretation}</Table.Cell>

src/lib/components/dictionary/test/page/tabs/ref-txt.svelte

@@ -10,9 +10,8 @@
     import { untrack } from "svelte";
     import { toDays } from "$lib/utils/ageUtils";
 
-    let { resetRefTxt = $bindable(), ...props } = $props()
+    let { tempTxt = $bindable([]), resetRefTxt = $bindable(), ...props } = $props()
 
-    let tempTxt = $state([]);
     let editingId = $state(null);
     let idCounter = $state(0);
 

src/lib/components/reusable/form/dictionary-form-renderer.svelte

@@ -15,6 +15,8 @@
 	import MoveRightIcon from '@lucide/svelte/icons/move-right';
 	import BrushCleaningIcon from '@lucide/svelte/icons/brush-cleaning';
 	import DeleteIcon from '@lucide/svelte/icons/delete';
+	import Trash2Icon from '@lucide/svelte/icons/trash-2';
+	import PlusIcon from '@lucide/svelte/icons/plus';
 
 	let {
 		formState,
@@ -27,7 +29,10 @@
 		hiddenFields,
 		handleTestTypeChange,
 		handleResultTypeChange,
-		handleRefTypeChange
+		handleRefTypeChange,
+		members = [],
+		onAddMember,
+		onRemoveMember,
 	} = $props();
 
 	const operators = ['+', '-', '*', '/', '^', '(', ')'];
@@ -610,6 +615,69 @@
 						</div>
 					{/if}
 				</div>
+			{:else if type === "members"}
+				{@const filteredOptions = getFilteredOptions(key)}
+				<div class="flex flex-col gap-2 w-full">
+					{#each members as member, index (member.id)}
+					{@const selectedLabel =
+                formState.selectOptions?.[key]?.find(
+                    (opt) => opt.value === member.value
+                )?.label || 'Choose'}
+						<div class="flex gap-1 w-full">
+							<Button type="button" variant="outline" size="icon" disabled>
+								{index + 1}
+							</Button>
+		
+							<div class="flex-1">
+								<Select.Root 
+									type="single"
+									bind:value={member.value}
+									onOpenChange={(open) => {
+										if (open && optionsEndpoint) {
+											formState.fetchOptions?.(
+												{ key, optionsEndpoint, dependsOn, endpointParamKey, valueKey, labelKey },
+												formState.form
+											);
+										}
+									}}
+								>
+									<Select.Trigger class="w-full">
+										{selectedLabel}
+									</Select.Trigger>
+									<Select.Content>
+										<div class="p-2">
+											<input
+												type="text"
+												placeholder="Search..."
+												class="w-full border rounded px-2 py-1 text-sm"
+												bind:value={searchQuery[key]}
+											/>
+										</div>
+										{#if formState.loadingOptions?.[key]}
+											<Select.Item disabled value="loading">Loading...</Select.Item>
+										{:else}
+											{#if !required}
+												<Select.Item value="">- None -</Select.Item>
+											{/if}
+											{#each filteredOptions as option}
+												<Select.Item value={option.value}>
+													{option.label}
+												</Select.Item>
+											{/each}
+										{/if}
+									</Select.Content>
+								</Select.Root>
+							</div>
+							<Button type="button" variant="outline" size="icon" onclick={() => onRemoveMember(member.id)}>
+								<Trash2Icon class="size-4" />
+							</Button>
+						</div>
+					{/each}
+					<Button variant="outline" onclick={onAddMember}>
+						<PlusIcon class="size-4" />
+						Add Test
+					</Button>
+				</div>
 			{:else}
 				<Input
 					type="text"