From 0c0bbd6e260745b5d04479e40a0c1d1aeac54d62 Mon Sep 17 00:00:00 2001
From: faiztyanirh <faiztyan.irham@yahoo.co.id>
Date: Tue, 10 Mar 2026 16:59:44 +0700
Subject: [PATCH] various fix:

ubah initialform ke flat, tadinya nested (untuk patidt dan custodian)
add payload builder saat save patient
fix custodian tidak jalan di edit page
fix dictionary usedictionaryform tidak jalan di page selain test
hilangkan refnumtype di refnum
fix bug di refnum saat insert data ke tempnum
---
 .../composable/use-dictionary-form.svelte.js  |   2 +-
 .../composable/use-master-detail.svelte.js    |   2 +-
 .../composable/use-patient-form.svelte.js     |   8 +-
 .../test/config/test-form-config.js           |  15 +-
 .../test/page/tabs/calculation09032026.svelte | 128 ---
 .../dictionary/test/page/tabs/ref-num.svelte  |   7 +
 .../admission/page/create-page copy.svelte    |  62 --
 .../patient/list/config/patient-config.js     |   4 +-
 .../list/config/patient-form-config.js        |  38 +-
 .../patient/list/modal/custodian-modal.svelte |  16 +-
 .../patient/list/page/create-page copy.svelte | 403 ---------
 .../patient/list/page/create-page.svelte      |   6 +-
 .../patient/list/page/edit-page copy.svelte   | 523 ------------
 .../patient/list/page/edit-page.svelte        |  39 +-
 .../reusable/patient-form-renderer.svelte     |  15 +-
 .../dictionary-form-renderer09032026.svelte   | 770 ------------------
 src/lib/components/reusable/form/test.js      | 290 -------
 src/routes/patient/list/+page.svelte          |  12 +-
 18 files changed, 81 insertions(+), 2259 deletions(-)
 delete mode 100644 src/lib/components/dictionary/test/page/tabs/calculation09032026.svelte
 delete mode 100644 src/lib/components/patient/admission/page/create-page copy.svelte
 delete mode 100644 src/lib/components/patient/list/page/create-page copy.svelte
 delete mode 100644 src/lib/components/patient/list/page/edit-page copy.svelte
 delete mode 100644 src/lib/components/reusable/form/dictionary-form-renderer09032026.svelte
 delete mode 100644 src/lib/components/reusable/form/test.js

diff --git a/src/lib/components/composable/use-dictionary-form.svelte.js b/src/lib/components/composable/use-dictionary-form.svelte.js
index 03999be..94a93ea 100644
--- a/src/lib/components/composable/use-dictionary-form.svelte.js
+++ b/src/lib/components/composable/use-dictionary-form.svelte.js
@@ -25,7 +25,7 @@
 //     }
 // }
 
-export function useDictionaryForm(formState, getActiveFormStates) {
+export function useDictionaryForm(formState, getActiveFormStates = () => ({})) {
     let hasErrors = $derived.by(() => {
         const mainHasError = Object.values(formState.errors).some(v => v !== null);
         const activeHasError = Object.values(getActiveFormStates()).some(fs => 
diff --git a/src/lib/components/composable/use-master-detail.svelte.js b/src/lib/components/composable/use-master-detail.svelte.js
index a063547..d043226 100644
--- a/src/lib/components/composable/use-master-detail.svelte.js
+++ b/src/lib/components/composable/use-master-detail.svelte.js
@@ -29,7 +29,7 @@ export function useMasterDetail(options = {}) {
   const isDirty = $derived(
     JSON.stringify(formState.form) !== JSON.stringify(formSnapshot)
   );
-// $inspect(formSnapshot)
+// $inspect(formState.form)
   async function select(item) {
     mode = "view";
     
diff --git a/src/lib/components/composable/use-patient-form.svelte.js b/src/lib/components/composable/use-patient-form.svelte.js
index 152ab20..5c16b5a 100644
--- a/src/lib/components/composable/use-patient-form.svelte.js
+++ b/src/lib/components/composable/use-patient-form.svelte.js
@@ -40,17 +40,17 @@ export function usePatientForm(formState, patientSchema) {
     }
 
     function validateIdentifier() {
-        const identifierType = formState.form.PatIdt?.IdentifierType;
-        const identifierValue = formState.form.PatIdt?.Identifier;
+        const identifierType = formState.form.PatIdt_IdentifierType;
+        const identifierValue = formState.form.PatIdt_Identifier;
         if (!identifierType || !identifierValue) {
-            formState.errors['PatIdt.Identifier'] = null;
+            formState.errors.PatIdt_Identifier = null;
             return;
         }
         
         const schema = getIdentifierValidation(identifierType);
         const result = schema.safeParse(identifierValue);
         
-        formState.errors['PatIdt.Identifier'] = result.success ? null : result.error.issues[0].message;
+        formState.errors.PatIdt_Identifier = result.success ? null : result.error.issues[0].message;
     }
 
     function getIdentifierValidation(identifierType) {
diff --git a/src/lib/components/dictionary/test/config/test-form-config.js b/src/lib/components/dictionary/test/config/test-form-config.js
index eb7359e..19a9f25 100644
--- a/src/lib/components/dictionary/test/config/test-form-config.js
+++ b/src/lib/components/dictionary/test/config/test-form-config.js
@@ -726,18 +726,19 @@ export const refNumFormFields = [
 			{
 				type: 'row',
 				columns: [
-					{
-						key: 'NumRefType',
-						label: 'Reference Type',
-						required: false,
-						type: 'text'
-					},
+					// {
+					// 	key: 'NumRefType',
+					// 	label: 'Reference Type',
+					// 	required: false,
+					// 	type: 'text'
+					// },
 					{
 						key: 'RangeType',
 						label: 'Range Type',
 						required: false,
 						type: 'select',
-						optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/range_type`
+						optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/range_type`,
+						fullWidth: false
 					}
 				]
 			},
diff --git a/src/lib/components/dictionary/test/page/tabs/calculation09032026.svelte b/src/lib/components/dictionary/test/page/tabs/calculation09032026.svelte
deleted file mode 100644
index a64e426..0000000
--- a/src/lib/components/dictionary/test/page/tabs/calculation09032026.svelte
+++ /dev/null
@@ -1,128 +0,0 @@
-<script>
-	import * as Select from '$lib/components/ui/select/index.js';
-	import { Input } from '$lib/components/ui/input/index.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { testCalSchema } from '$lib/components/dictionary/test/config/test-form-config';
-    import { API } from '$lib/config/api';
-    import { Textarea } from "$lib/components/ui/textarea/index.js";
-    import { Label } from "$lib/components/ui/label/index.js";
-    import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte';
-
-	let props = $props();
-
-    const operators = ['+', '-', '*', '/', '^', '(', ')'];
-	const logicalop = ['IF', 'THEN', 'ELSE', 'END', 'AND', 'OR', 'NOT', 'MIN', 'MAX'];
-	const comparisonop = ['=', '!=', '<', '>', '<=', '>='];
-	const customval = ['abc', '123'];
-
-    let expression = $state('');
-	let cursorPosition = $state(0);
-
-    function unselectAll(key) {
-		props.calFormState.form[key] = [];
-		props.calFormState.validateField?.(key, [], false);
-	}
-
-    function getErrorStatus(formulaCode = '') {
-		const selected = props.calFormState.form.FormulaInput;
-		if (!Array.isArray(selected)) return [];
-
-		return selected.map((item) => ({
-			value: item.value,
-			done: new RegExp(`\\b${item.value}\\b`, 'i').test(formulaCode)
-		}));
-	}
-
-    function addToExpression(text) {
-		const before = expression.slice(0, cursorPosition);
-		const after = expression.slice(cursorPosition);
-		expression = before + text + after;
-		cursorPosition += text.length;
-	}
-
-    function addOperator(op) {
-		addToExpression(op);
-		props.calFormState.form.FormulaCode = expression;
-		props.calFormState.validateField?.('FormulaCode', expression, false);
-	}
-
-    function addValue(val) {
-		addToExpression(val);
-		props.calFormState.form.FormulaCode = expression;
-		props.calFormState.validateField?.('FormulaCode', expression, false);
-	}
-
-    // function handleInput(e) {
-	// 	expression = e.target.value;
-	// 	cursorPosition = e.target.selectionStart;
-	// 	formState.form.FormulaCode = expression;
-	// 	formState.validateField?.('FormulaCode', expression, false);
-	// }
-
-    // function handleClick(e) {
-	// 	cursorPosition = e.target.selectionStart;
-	// }
-
-    function handleContainerClick(e) {
-		const rect = e.currentTarget.getBoundingClientRect();
-		const text = expression;
-		const charWidth = 8.5;
-		const padding = 12;
-		const clickX = e.clientX - rect.left - padding;
-		let newPos = Math.floor(clickX / charWidth);
-		newPos = Math.max(0, Math.min(newPos, text.length));
-		cursorPosition = newPos;
-	}
-
-    function moveCursorLeft() {
-		if (cursorPosition > 0) {
-			cursorPosition -= 1;
-		}
-	}
-
-    function moveCursorRight() {
-		if (cursorPosition < expression.length) {
-			cursorPosition += 1;
-		}
-	}
-
-    function deleteChar() {
-		if (cursorPosition > 0) {
-			const before = expression.slice(0, cursorPosition - 1);
-			const after = expression.slice(cursorPosition);
-			expression = before + after;
-			cursorPosition -= 1;
-			props.calFormState.form.FormulaCode = expression;
-			props.calFormState.validateField?.('FormulaCode', expression, false);
-		}
-	}
-
-    function clearExpression() {
-		expression = '';
-		cursorPosition = 0;
-		props.calFormState.form.FormulaCode = expression;
-		props.calFormState.validateField?.('FormulaCode', expression, false);
-	}
-</script>
-
-<div class="flex flex-col gap-4 w-full">
-    <DictionaryFormRenderer 
-        formState={props.calFormState} 
-        formFields={props.testCalFormFields}
-        customval={customval}
-        operators={operators}
-        logicalop={logicalop}
-        comparisonop={comparisonop}
-        expression={expression}
-        cursorPosition={cursorPosition}
-        onUnselectAll={unselectAll}
-        onGetErrorStatus={getErrorStatus}
-        onAddOperator={addOperator}
-        onAddValue={addValue}
-        onHandleContainerClick={handleContainerClick}
-        onMoveCursorLeft={moveCursorLeft}
-        onMoveCursorRight={moveCursorRight}
-        onDeleteChar={deleteChar}
-        onClearExpression={clearExpression}
-    />
-</div>
\ No newline at end of file
diff --git a/src/lib/components/dictionary/test/page/tabs/ref-num.svelte b/src/lib/components/dictionary/test/page/tabs/ref-num.svelte
index ada7670..7654e46 100644
--- a/src/lib/components/dictionary/test/page/tabs/ref-num.svelte
+++ b/src/lib/components/dictionary/test/page/tabs/ref-num.svelte
@@ -54,7 +54,14 @@
 	}
 
 	function resetForm() {
+		const currentRefType = props.refNumState.form.NumRefType;
+
 		props.refNumState.reset?.();
+
+		if (currentRefType) {
+			props.refNumState.form.NumRefType = currentRefType;
+		}
+		
 		joinFields = {
 			AgeStart: { DD: '', MM: '', YY: '' },
 			AgeEnd: { DD: '', MM: '', YY: '' }
diff --git a/src/lib/components/patient/admission/page/create-page copy.svelte b/src/lib/components/patient/admission/page/create-page copy.svelte
deleted file mode 100644
index e2d3153..0000000
--- a/src/lib/components/patient/admission/page/create-page copy.svelte	
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-    import { useForm } from "$lib/components/composable/use-form.svelte";
-    import { admissionSchema, admissionInitialForm, admissionDefaultErrors, admissionFormFields, getAdmissionFormActions, buildPayload } from "$lib/components/patient/admission/config/admission-form-config";
-    import { createAdmission } from "$lib/components/patient/admission/api/patient-admission-api";
-    import { usePatientForm } from "$lib/components/composable/use-patient-form.svelte";
-    import FormPageContainer from "$lib/components/patient/reusable/form-page-container.svelte";
-    import PatientFormRenderer from "$lib/components/patient/reusable/patient-form-renderer.svelte";
-
-    let props = $props();
-
-    let formState = useForm({
-        schema: admissionSchema,
-        initialForm: admissionInitialForm,
-        defaultErrors: admissionDefaultErrors,
-        mode: 'create',
-        modeOpt: 'default',
-        saveEndpoint: createAdmission,
-        editEndpoint: null,
-    });
-
-    const helpers = usePatientForm(formState, admissionSchema);
-
-    const handlers = {
-        clearForm: () => {
-            formState.reset();
-        }
-    };
-
-    const actions = getAdmissionFormActions(handlers);
-
-    async function handleSave() {
-        const payload = buildPayload(formState.form);
-    
-        console.log(payload);
-    }
-
-    const primaryAction = $derived({
-        label: 'Save',
-        onClick: handleSave,
-        disabled: helpers.hasErrors || formState.isSaving.current,
-        loading: formState.isSaving.current
-    });
-
-    const secondaryActions = [];
-
-    $effect(() => {
-        if (props.masterDetail.form?.PatientID) {
-            formState.setForm({
-                ...formState.form,
-                ...props.masterDetail.form
-            });
-        }
-    });
-</script>
-
-<FormPageContainer title="Create Admission" {primaryAction} {secondaryActions} {actions}>
-    <PatientFormRenderer 
-        {formState}
-        formFields={admissionFormFields}
-        mode="create"
-    />
-</FormPageContainer>
\ No newline at end of file
diff --git a/src/lib/components/patient/list/config/patient-config.js b/src/lib/components/patient/list/config/patient-config.js
index f02ec6c..2c2dcea 100644
--- a/src/lib/components/patient/list/config/patient-config.js
+++ b/src/lib/components/patient/list/config/patient-config.js
@@ -52,7 +52,7 @@ export const detailSections = [
                 isGroup: true,
                 class: "grid grid-cols-2",
                 fields: [
-                    { key: "City", label: "City" },
+                    { key: "CityLabel", label: "City" },
                     { key: "ZIP", label: "ZIP" },
                 ],
             },
@@ -62,7 +62,7 @@ export const detailSections = [
                 isGroup: true,
                 class: "grid grid-cols-2",
                 fields: [
-                    { key: "Province", label: "Province" },
+                    { key: "ProvinceLabel", label: "Province" },
                     { key: "CountryLabel", label: "Country" },
                 ],
             },
diff --git a/src/lib/components/patient/list/config/patient-form-config.js b/src/lib/components/patient/list/config/patient-form-config.js
index 9b9862a..de396d8 100644
--- a/src/lib/components/patient/list/config/patient-form-config.js
+++ b/src/lib/components/patient/list/config/patient-form-config.js
@@ -20,10 +20,8 @@ export const patientSchema = z.object({
 export const patientInitialForm = {
     PatientID: "",
     AlternatePID: "",
-    PatIdt: {
-      IdentifierType: "",
-      Identifier: ""
-    },
+    PatIdt_IdentifierType: "",
+    PatIdt_Identifier: "",
     NameFirst: "",
     Prefix: "",
     Sex: "",
@@ -32,10 +30,8 @@ export const patientInitialForm = {
     NameMaiden: "",
     MaritalStatus: "",
     NameLast: "",
-    Custodian: {
-      InternalPID: "",
-      PatientID: ""
-    },
+    Custodian_InternalPID: "",
+    Custodian_PatientID: "",
     Ethnic: "",
     Suffix: "",
     PlaceOfBirth: "",
@@ -69,7 +65,7 @@ export const patientDefaultErrors = {
     Birthdate: "Required",
     EmailAddress1: null,
     EmailAddress2: null,
-    'PatIdt.Identifier': null,
+    PatIdt_Identifier: null,
     Phone: null,
     MobilePhone: null,
 };
@@ -95,7 +91,7 @@ export const patientFormFields = [
                         type: "text"
                     },
                     { 
-                        key: "PatIdt.Identifier", 
+                        key: "PatIdt_Identifier", 
                         label: "Identifier", 
                         required: false, 
                         type: "identity", 
@@ -310,4 +306,26 @@ export function getPatientFormActions(handlers) {
             onClick: handlers.clearForm,
         },
     ];
+}
+
+export function buildPatientPayload(form) {
+    const {
+        PatIdt_IdentifierType,
+        PatIdt_Identifier,
+        Custodian_InternalPID,
+        Custodian_PatientID,
+        ...rest
+    } = form;
+
+    return {
+        ...rest,
+        PatIdt: {
+            IdentifierType: PatIdt_IdentifierType,
+            Identifier: PatIdt_Identifier
+        },
+        Custodian: {
+            InternalPID: Custodian_InternalPID,
+            PatientID: Custodian_PatientID
+        }
+    };
 }
\ No newline at end of file
diff --git a/src/lib/components/patient/list/modal/custodian-modal.svelte b/src/lib/components/patient/list/modal/custodian-modal.svelte
index 75a17a4..e607152 100644
--- a/src/lib/components/patient/list/modal/custodian-modal.svelte
+++ b/src/lib/components/patient/list/modal/custodian-modal.svelte
@@ -28,17 +28,18 @@
         isOpen = open;
         
         if (open) {
-            if (props.formState.form.Custodian) {
+            if (props.formState.form.Custodian_PatientID) {
                 selectedPatient = {
-                    InternalPID: props.formState.form.Custodian.InternalPID || null,
-                    PatientID: props.formState.form.Custodian.PatientID || null,
+                    InternalPID: props.formState.form.Custodian_InternalPID || null,
+                    PatientID: props.formState.form.Custodian_PatientID || null,
                 };
             }
         }
     }
 
     function confirmCustodian() {
-        props.formState.form.Custodian = { ...selectedPatient };
+        props.formState.form.Custodian_InternalPID = selectedPatient.InternalPID
+        props.formState.form.Custodian_PatientID = selectedPatient.PatientID
         
         selectedPatient = { InternalPID: null, PatientID: null };
         isOpen = false;
@@ -46,7 +47,12 @@
 
     function populateCustodian() {
         custodianModalMode.mode = mode;
-        setSelectedPatient(editPatientForm.Custodian);
+        if (props.formState.form.Custodian_PatientID) {
+            selectedPatient = {
+                InternalPID: props.formState.form.Custodian_InternalPID,
+                PatientID: props.formState.form.Custodian_PatientID,
+            }
+        }
     }
 
     function togglePatientSelection(patient) {
diff --git a/src/lib/components/patient/list/page/create-page copy.svelte b/src/lib/components/patient/list/page/create-page copy.svelte
deleted file mode 100644
index a758f72..0000000
--- a/src/lib/components/patient/list/page/create-page copy.svelte	
+++ /dev/null
@@ -1,403 +0,0 @@
-<script>
-    import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
-    import { Button } from "$lib/components/ui/button/index.js";
-    import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-    import { Input } from "$lib/components/ui/input/index.js";
-    import { Label } from "$lib/components/ui/label/index.js";
-    import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
-    import { Spinner } from "$lib/components/ui/spinner/index.js";
-    import { useForm } from "$lib/components/composable/use-form.svelte";
-    import { patientSchema, patientInitialForm, patientDefaultErrors, patientFormFields, getPatientFormActions } from "../config/patient-form-config";
-    import { createPatient } from "../api/patient-list-api";
-    import * as Select from "$lib/components/ui/select/index.js";
-    import ReusableCalendar from "$lib/components/reusable/reusable-calendar.svelte";
-    import ReusableCalendarTimepicker from "$lib/components/reusable/reusable-calendar-timepicker.svelte";
-    import CustodianModal from "../modal/custodian-modal.svelte";
-    import LinktoModal from "../modal/linkto-modal.svelte";
-    import ReusableUpload from "$lib/components/reusable/reusable-upload.svelte";
-    import { API } from "$lib/config/api";
-    import { z } from "zod";
-    import FormPageContainer from "../reusable/form-page-container.svelte";
-    import { usePatientForm } from "$lib/components/composable/use-patient-form.svelte";
-    import PatientFormRenderer from "../reusable/patient-form-renderer.svelte";
-
-    let props = $props();
-    // let searchQuery = $state({});
-    // let uploadErrors = $state({});
-    // let isChecking = $state({});
-
-    const formState = useForm({
-        schema: patientSchema,
-        initialForm: patientInitialForm,
-        defaultErrors: patientDefaultErrors,
-        mode: 'create',
-        modeOpt: 'cascade',
-        saveEndpoint: createPatient,
-        editEndpoint: null,
-    });
-
-    const helpers = usePatientForm(formState, patientSchema);
-
-    const handlers = {
-        clearForm: () => {
-            formState.reset();
-        }
-    };
-
-    const actions = getPatientFormActions(handlers);
-
-    let linkToDisplay = $derived(
-        Array.isArray(formState.form.LinkTo) 
-            ? formState.form.LinkTo
-                .map(p => p.PatientID)
-                .filter(Boolean)
-                .join(', ')
-            : ''
-    );
-
-    async function handleSave() {
-        const result = await formState.save();
-        
-        if (result.status === 'success') {
-            console.log('Patient saved successfully');
-            props.masterDetail?.exitForm();
-        } else {
-            console.error('Failed to save patient');
-        }
-    }
-
-    // function getFilteredOptions(key) {
-    //     const query = searchQuery[key] || "";
-    //     if (!query) return formState.selectOptions[key] ?? [];
-        
-    //     return (formState.selectOptions[key] ?? []).filter(opt => 
-    //         opt.label.toLowerCase().includes(query.toLowerCase())
-    //     );
-    // }
-
-    // async function validateFieldAsync(field) {
-    //     isChecking[field] = true;
-        
-    //     try {
-    //         const asyncSchema = patientSchema.extend({
-    //             PatientID: patientSchema.shape.PatientID.refine(
-    //                 async (value) => {
-    //                     if (!value) return false;
-    //                     const res = await fetch(`${API.BASE_URL}${API.CHECK}?PatientID=${value}`);
-    //                     const { status, data } = await res.json();
-    //                     return status === "success" && data === false ? false : true;
-    //                 },
-    //                 { message: "Patient ID already used" }
-    //             )
-    //         });
-            
-    //         const partial = asyncSchema.pick({ [field]: true });
-    //         const result = await partial.safeParseAsync({ [field]: formState.form[field] });
-            
-    //         formState.errors[field] = result.success ? null : result.error.issues[0].message;
-    //     } catch (err) {
-    //         console.error('Async validation error:', err);
-    //     } finally {
-    //         isChecking[field] = false;
-    //     }
-    // }
-
-    // function validateIdentifier() {
-    //     const identifierType = formState.form.PatIdt.IdentifierType;
-    //     const identifierValue = formState.form.PatIdt.Identifier;
-    //     if (!identifierType || !identifierValue) {
-    //         formState.errors['PatIdt.Identifier'] = null;
-    //         return;
-    //     }
-        
-    //     const schema = getIdentifierValidation(identifierType);
-    //     const result = schema.safeParse(identifierValue);
-        
-    //     formState.errors['PatIdt.Identifier'] = result.success ? null : result.error.issues[0].message;
-    // }
-    
-    // function getIdentifierValidation(identifierType) {
-    //     switch (identifierType) {
-    //         case 'KTP':
-    //             return z.string()
-    //                 .length(16, "Must be 16 characters")
-    //                 .regex(/^$|^[0-9]+$/, "Can only contain numbers");
-            
-    //         case 'PASS':
-    //             return z.string()
-    //                 .max(9, "Max 9 chars")
-    //                 .regex(/^[A-Z0-9]+$/, "Must be uppercase letters and numbers");
-            
-    //         case 'SSN':
-    //             return z.string()
-    //                 .max(9, "Max 9 chars")
-    //                 .regex(/^$|^[0-9]+$/, "Can only contain numbers");
-            
-    //         case 'SIM':
-    //             return z.string()
-    //                 .max(20, "Max 20 chars")
-    //                 .regex(/^$|^[0-9]+$/, "Can only contain numbers");
-            
-    //         case 'KTAS':
-    //             return z.string()
-    //                 .max(11, "Max 11 chars")
-    //                 .regex(/^[A-Z0-9]+$/, "Must be uppercase letters and numbers");
-            
-    //         default:
-    //             return z.string().min(1, "Identifier required");
-    //     }
-    // }
-
-    // let hasErrors = $derived(
-    //     Object.values(formState.errors).some(value => value !== null)
-    // );
-
-    function handleSaveAndOrder() {
-        console.log('save and order');
-    }
-
-    const primaryAction = $derived({
-        label: 'Save',
-        onClick: handleSave,
-        disabled: hasErrors || formState.isSaving.current,
-        loading: formState.isSaving.current
-    });
-
-    const secondaryActions = [
-        {
-            label: 'Save and Order',
-            onClick: handleSaveAndOrder
-        }
-    ];
-</script>
-
-<!-- {#snippet Fieldset({ key, label, required, type, optionsEndpoint, options, validateOn, dependsOn, endpointParamKey })}
-    <div class="flex w-full flex-col gap-1.5">
-        <div class="flex justify-between items-center w-full">
-            <Label>{label}</Label>
-            {#if required}
-                <span class="text-destructive text-xl leading-none h-3.5">*</span>
-            {/if}
-        </div>
-
-        <div class="relative flex flex-col items-center w-full">
-            {#if type === "input" || type === "email" || type === "number"}
-                <Input 
-                    type={type === "number" ? "number" : "text"} 
-                    bind:value={formState.form[key]}
-                    oninput={() => {
-                        if (validateOn?.includes("input")) {
-                            formState.validateField(key);
-                        }
-                    }}
-                    onblur={() => {
-                        if (validateOn?.includes("blur")) {
-                            validateFieldAsync(key);
-                        }
-                    }}
-                />
-            {:else if type === "date"}
-                <ReusableCalendar 
-                    bind:value={formState.form[key]}
-                    parentFunction={(dateStr) => {
-                        formState.form[key] = dateStr;
-                        if (validateOn?.includes("input")) {
-                            formState.validateField(key, dateStr, false);
-                        }
-                    }}
-                />
-            {:else if type === "datetime"}
-                <ReusableCalendarTimepicker 
-                    bind:value={formState.form.TimeOfDeath}
-                />
-            {:else if type === "textarea"}
-                <textarea 
-                    class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                    bind:value={formState.form[key]}
-                ></textarea>
-            {:else if type === "select"}
-                {@const selectedLabel = formState.selectOptions[key]?.find(opt => opt.value === formState.form[key])?.label || "Choose"}
-                {@const filteredOptions = getFilteredOptions(key)}
-                <Select.Root type="single" bind:value={formState.form[key]} 
-                    onValueChange={(val) => {
-                        formState.form[key] = val;
-                        if (validateOn?.includes("input")) {
-                            formState.validateField(key, formState.form[key], false);
-                        }
-                        if (key === "Province") {
-                            formState.form.City = "";
-                            formState.selectOptions.City = [];
-                            formState.lastFetched.City = null;
-                        }
-                    }}
-                    onOpenChange={(open) => {
-                        if (open && optionsEndpoint) {
-                            formState.fetchOptions(
-                                { key, optionsEndpoint, dependsOn, endpointParamKey }, 
-                                formState.form
-                            );
-                        }
-                    }}
-                >
-                    <Select.Trigger class="w-full truncate">
-                        {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>
-            {:else if type === "identity"}
-                {@const selectedLabel = formState.selectOptions[key]?.find(opt => opt.value === formState.form.PatIdt.IdentifierType)?.label || "Choose"}
-                <div class="flex items-center w-full">
-                    <Select.Root type="single" bind:value={formState.form.PatIdt.IdentifierType} 
-                        onOpenChange={(open) => {
-                            if (open && optionsEndpoint) {
-                                formState.fetchOptions({ key, optionsEndpoint});
-                            }
-                        }} 
-                        onValueChange={(val) => {
-                            formState.form.PatIdt = {
-                            IdentifierType: val,
-                            Identifier:''
-                            };
-                        }}
-                    >
-                        <Select.Trigger class="w-full truncate text-muted-foreground rounded-r-none">
-                            {selectedLabel}
-                        </Select.Trigger>
-                        <Select.Content>
-                            {#if formState.loadingOptions[key]}
-                                <Select.Item disabled value="loading">Loading...</Select.Item>
-                            {:else}
-                                {#if !required}
-                                    <Select.Item value="">- None -</Select.Item>
-                                {/if}
-                                {#each formState.selectOptions[key] ?? [] as option}
-                                    <Select.Item value={option.value}>
-                                        {option.label}
-                                    </Select.Item>
-                                {/each}
-                            {/if}
-                        </Select.Content>
-                    </Select.Root>
-                    <Input type="text" class="rounded-l-none" disabled={!formState.form.PatIdt.IdentifierType} bind:value={formState.form.PatIdt.Identifier} oninput={validateIdentifier} />
-                </div>
-            {:else if type === "custodian"}
-                <div class="flex items-center w-full">
-                    <Input type="text" class="rounded-r-none" readonly bind:value={formState.form[key].PatientID} />
-                    <CustodianModal {formState} mode="new"/>
-                </div>
-            {:else if type === "linkto"}
-                <div class="flex items-center w-full">
-                    <Input 
-                        type="text" 
-                        class="rounded-r-none" 
-                        readonly 
-                        value={linkToDisplay}
-                        placeholder="No linked patients"
-                    />
-                    <LinktoModal {formState} />
-                </div>
-            {:else if type === "fileupload"}
-                <div class="flex flex-col w-full">
-                    <ReusableUpload bind:attachments={formState.form[key]} bind:errors={uploadErrors}/>
-                    {#if Object.keys(uploadErrors).length > 0}
-                        <div class="flex flex-col justify-start text-destructive">
-                            {#each Object.entries(uploadErrors) as [file, msg]}
-                                <span>{msg}</span>
-                            {/each}
-                        </div>
-                    {/if}
-                </div>
-            {:else}
-                <Input 
-                    type="text" 
-                    bind:value={formState.form[key]}
-                    placeholder="Custom field type: {type}"
-                />
-            {/if}
-
-            <div class="absolute top-8 min-h-[1rem] w-full">
-                {#if isChecking[key]}
-                    <div class="flex items-center gap-1 mt-1">
-                        <Spinner />
-                        <span class="text-sm text-muted-foreground">Checking...</span>
-                    </div>
-                {:else if formState.errors[key]}
-                    <span class="text-destructive text-sm leading-none">
-                        {formState.errors[key]}
-                    </span>
-                {/if}
-            </div>
-        </div>
-    </div>
-{/snippet} -->
-
-<FormPageContainer title="Create Patient" {primaryAction} {secondaryActions}>
-    <PatientFormRenderer
-        bind:formState
-        formFields={patientFormFields}
-        bind:searchQuery={helpers.searchQuery}
-        bind:uploadErrors={helpers.uploadErrors}
-        bind:isChecking={helpers.isChecking}
-        linkToDisplay={helpers.linkToDisplay}
-        validateIdentifier={helpers.validateIdentifier}
-        mode="create"
-    />
-    <!-- <div class="flex-1 min-h-0 overflow-y-auto p-2 space-y-6">
-        {#each patientFormFields as group}
-            <div class="space-y-6">
-                {#if group.title}
-                    <div class="text-md 2xl:text-lg font-semibold italic">
-                        <span class="border-b-2 border-primary">{group.title}</span>
-                    </div>
-                {/if}
-
-                {#each group.rows as row}
-                    <div
-                        class="grid grid-cols-1 space-y-2 gap-6 md:gap-4"
-                        class:md:grid-cols-1={row.columns.length === 1}
-                        class:md:grid-cols-2={row.columns.length === 2}
-                        class:md:grid-cols-3={row.columns.length === 3}
-                    >
-                        {#each row.columns as col}
-                            {#if col.type === "group"}
-                                <div
-                                    class="grid grid-cols-1 gap-6 md:gap-2"
-                                    class:md:grid-cols-1={col.columns.length === 1}
-                                    class:md:grid-cols-2={col.columns.length === 2}
-                                    class:md:grid-cols-3={col.columns.length === 3}
-                                >
-                                    {#each col.columns as child}
-                                        {@render Fieldset(child)}
-                                    {/each}
-                                </div>
-                            {:else}
-                                {@render Fieldset(col)}
-                            {/if}
-                        {/each}
-                    </div>
-                {/each}
-            </div>
-        {/each}
-    </div> -->
-</FormPageContainer>
\ No newline at end of file
diff --git a/src/lib/components/patient/list/page/create-page.svelte b/src/lib/components/patient/list/page/create-page.svelte
index 79c7934..a9ee608 100644
--- a/src/lib/components/patient/list/page/create-page.svelte
+++ b/src/lib/components/patient/list/page/create-page.svelte
@@ -4,6 +4,7 @@
     import PatientFormRenderer from "$lib/components/patient/reusable/patient-form-renderer.svelte";
     import { toast } from "svelte-sonner";
     import ReusableAlertDialog from "$lib/components/reusable/reusable-alert-dialog.svelte";
+    import { buildPatientPayload } from "$lib/components/patient/list/config/patient-form-config";
 
     let props = $props();
     
@@ -29,13 +30,14 @@
         showConfirm = true;
         }
     }
-
+// $inspect(formState.form)
     function confirmDiscard() {
         masterDetail.exitForm(true);
     }
 
     async function handleSave() {
-        const result = await formState.save(masterDetail.mode);
+        const payload = buildPatientPayload(formState.form);
+        const result = await formState.save(masterDetail.mode, payload);
         
         if (result.status === 'success') {
             toast('Patient Created!');
diff --git a/src/lib/components/patient/list/page/edit-page copy.svelte b/src/lib/components/patient/list/page/edit-page copy.svelte
deleted file mode 100644
index 9b945a1..0000000
--- a/src/lib/components/patient/list/page/edit-page copy.svelte	
+++ /dev/null
@@ -1,523 +0,0 @@
-<script>
-    import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
-    import { Button } from "$lib/components/ui/button/index.js";
-    import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-    // import { API } from "$lib/config/api";
-    import { Input } from "$lib/components/ui/input/index.js";
-    import { Label } from "$lib/components/ui/label/index.js";
-    import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
-    // import EraserIcon from "@lucide/svelte/icons/eraser";
-    import { Spinner } from "$lib/components/ui/spinner/index.js";
-    import { useForm } from "$lib/components/composable/use-form.svelte";
-    import { patientSchema, patientInitialForm, patientDefaultErrors, patientFormFields, getPatientFormActions } from "../config/patient-form-config";
-    import { editPatient } from "../api/patient-list-api";
-    import * as Select from "$lib/components/ui/select/index.js";
-    import ReusableCalendar from "$lib/components/reusable/reusable-calendar.svelte";
-    import ReusableCalendarTimepicker from "$lib/components/reusable/reusable-calendar-timepicker.svelte";
-    import CustodianModal from "../modal/custodian-modal.svelte";
-    import LinktoModal from "../modal/linkto-modal.svelte";
-    import ReusableUpload from "$lib/components/reusable/reusable-upload.svelte";
-    import { API } from "$lib/config/api";
-    import { z } from "zod";
-    import { untrack } from "svelte";
-    import FormPageContainer from "../reusable/form-page-container.svelte";
-
-    let props = $props();
-    let searchQuery = $state({});
-    let uploadErrors = $state({});
-    let isChecking = $state({});
-
-    const actions = [];
-
-    const formState = useForm({
-        schema: patientSchema,
-        initialForm: patientInitialForm,
-        defaultErrors: {},
-        mode: 'edit',
-        modeOpt: 'cascade',
-        saveEndpoint: null,
-        editEndpoint: editPatient,
-    });
-
-    $effect(() => {
-        // if (props.masterDetail?.selectedItem?.patient) {
-        //     formState.setForm(props.masterDetail.selectedItem.patient);
-        // }
-        const backendData = props.masterDetail?.selectedItem?.patient;
-        
-        if (!backendData) return;
-
-        untrack(() => {
-            const formData = {
-                ...backendData,
-
-                PatIdt: backendData.PatIdt ?? patientInitialForm.PatIdt,
-                LinkTo: backendData.LinkTo ?? [],
-                Custodian: backendData.Custodian ?? patientInitialForm.Custodian,
-
-                Sex: backendData.SexKey || backendData.Sex,
-                Religion: backendData.ReligionKey || backendData.Religion,
-                MaritalStatus: backendData.MaritalStatusKey || backendData.MaritalStatus,
-                Ethnic: backendData.EthnicKey || backendData.Ethnic,
-                Race: backendData.RaceKey || backendData.Race,
-                Country: backendData.CountryKey || backendData.Country,
-                DeathIndicator: backendData.DeathIndicatorKey || backendData.DeathIndicator,
-                Province: backendData.ProvinceID || backendData.Province,
-                City: backendData.CityID || backendData.City,
-            };
-            
-            formState.setForm(formData);
-
-            // Jalankan fetch options hanya sekali saat inisialisasi data
-            patientFormFields.forEach(group => {
-                group.rows.forEach(row => {
-                    row.columns.forEach(col => {
-                        if (col.type === "group") {
-                            col.columns.forEach(child => {
-                                if (child.type === "select" && child.optionsEndpoint) {
-                                    formState.fetchOptions(child, formData);
-                                }
-                            });
-                        } else if ((col.type === "select" || col.type === "identity") && col.optionsEndpoint) {
-                            formState.fetchOptions(col, formData);
-                        }
-                    });
-                });
-            });
-
-            if (formData.Province && formData.City) {
-                formState.fetchOptions(
-                    { 
-                        key: "City", 
-                        optionsEndpoint: `${API.BASE_URL}${API.CITY}`,
-                        dependsOn: "Province",
-                        endpointParamKey: "Parent"
-                    }, 
-                    formData
-                );
-            }
-        });
-    });
-
-// $inspect(formState.selectOptions)
-    let linkToDisplay = $derived(
-        Array.isArray(formState.form.LinkTo) 
-            ? formState.form.LinkTo
-                .map(p => p.PatientID)
-                .filter(Boolean)
-                .join(', ')
-            : ''
-    );
-
-    async function handleEdit() {
-        const result = await formState.save();
-        
-        if (result.status === 'success') {
-            console.log('Patient updated successfully');
-            props.masterDetail?.exitForm();
-        } else {
-            console.error('Failed to update patient:', result.message);
-        }
-    }
-
-    function getFilteredOptions(key) {
-        const query = searchQuery[key] || "";
-        if (!query) return formState.selectOptions[key] ?? [];
-        
-        return (formState.selectOptions[key] ?? []).filter(opt => 
-            opt.label.toLowerCase().includes(query.toLowerCase())
-        );
-    }
-
-    async function validateFieldAsync(field) {
-        isChecking[field] = true;
-        
-        try {
-            const asyncSchema = patientSchema.extend({
-                PatientID: patientSchema.shape.PatientID.refine(
-                    async (value) => {
-                        if (!value) return false;
-                        const res = await fetch(`${API.BASE_URL}${API.CHECK}?PatientID=${value}`);
-                        const { status, data } = await res.json();
-                        return status === "success" && data === false ? false : true;
-                    },
-                    { message: "Patient ID already used" }
-                )
-            });
-            
-            const partial = asyncSchema.pick({ [field]: true });
-            const result = await partial.safeParseAsync({ [field]: formState.form[field] });
-            
-            formState.errors[field] = result.success ? null : result.error.issues[0].message;
-        } catch (err) {
-            console.error('Async validation error:', err);
-        } finally {
-            isChecking[field] = false;
-        }
-    }
-
-    function validateIdentifier() {
-        const identifierType = formState.form.PatIdt.IdentifierType;
-        const identifierValue = formState.form.PatIdt.Identifier;
-        if (!identifierType || !identifierValue) {
-            formState.errors['PatIdt.Identifier'] = null;
-            return;
-        }
-        
-        const schema = getIdentifierValidation(identifierType);
-        const result = schema.safeParse(identifierValue);
-        
-        formState.errors['PatIdt.Identifier'] = result.success ? null : result.error.issues[0].message;
-    }
-    
-    function getIdentifierValidation(identifierType) {
-        switch (identifierType) {
-            case 'KTP':
-                return z.string()
-                    .max(16, "Max 16 chars")
-                    .regex(/^$|^[0-9]+$/, "Can only contain numbers");
-            
-            case 'PASS':
-                return z.string()
-                    .max(9, "Max 9 chars")
-                    .regex(/^[A-Z0-9]+$/, "Must be uppercase letters and numbers");
-            
-            case 'SSN':
-                return z.string()
-                    .max(9, "Max 9 chars")
-                    .regex(/^$|^[0-9]+$/, "Can only contain numbers");
-            
-            case 'SIM':
-                return z.string()
-                    .max(20, "Max 20 chars")
-                    .regex(/^$|^[0-9]+$/, "Can only contain numbers");
-            
-            case 'KTAS':
-                return z.string()
-                    .max(11, "Max 11 chars")
-                    .regex(/^[A-Z0-9]+$/, "Must be uppercase letters and numbers");
-            
-            default:
-                return z.string().min(1, "Identifier required");
-        }
-    }
-
-    let hasErrors = $derived(
-        Object.values(formState.errors).some(value => value !== null)
-    );
-
-    const primaryAction = $derived({
-        label: 'Edit',
-        onClick: handleEdit,
-        disabled: hasErrors || formState.isSaving.current,
-        loading: formState.isSaving.current
-    });
-
-    const secondaryActions = [];
-</script>
-
-{#snippet Fieldset({ key, label, required, type, optionsEndpoint, options, validateOn, dependsOn, endpointParamKey })}
-    <div class="flex w-full flex-col gap-1.5">
-        <div class="flex justify-between items-center w-full">
-            <Label>{label}</Label>
-            {#if required}
-                <span class="text-destructive text-xl leading-none h-3.5">*</span>
-            {/if}
-        </div>
-
-        <div class="relative flex flex-col items-center w-full">
-            {#if type === "input" || type === "email" || type === "number"}
-                <Input 
-                    type={type === "number" ? "number" : "text"} 
-                    bind:value={formState.form[key]}
-                    oninput={() => {
-                        if (validateOn?.includes("input")) {
-                            formState.validateField(key);
-                        }
-                    }}
-                    onblur={() => {
-                        if (validateOn?.includes("blur")) {
-                            validateFieldAsync(key);
-                        }
-                    }}
-                />
-            {:else if type === "date"}
-                <ReusableCalendar 
-                    bind:value={formState.form[key]}
-                    parentFunction={(dateStr) => {
-                        formState.form[key] = dateStr;
-                        if (validateOn?.includes("input")) {
-                            formState.validateField(key, dateStr, false);
-                        }
-                    }}
-                />
-            {:else if type === "datetime"}
-                <!-- <ReusableCalendarTimepicker 
-                    bind:value={formState.form.TimeOfDeath}
-                    parentFunction={(val) => {
-                        formState.validateField('TimeOfDeath');
-                    }}
-                /> -->
-                <ReusableCalendarTimepicker 
-                    bind:value={formState.form.TimeOfDeath}
-                />
-            {:else if type === "textarea"}
-                <textarea 
-                    class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                    bind:value={formState.form[key]}
-                ></textarea>
-            {:else if type === "select"}
-                {@const selectedLabel = formState.selectOptions[key]?.find(opt => opt.value === formState.form[key])?.label || "Choose"}
-                {@const filteredOptions = getFilteredOptions(key)}
-                <Select.Root type="single" bind:value={formState.form[key]} 
-                    onValueChange={(val) => {
-                        formState.form[key] = val;
-                        if (validateOn?.includes("input")) {
-                            formState.validateField(key, formState.form[key], false);
-                        }
-                        if (key === "Province") {
-                            formState.form.City = "";
-                            formState.selectOptions.City = [];
-                            formState.lastFetched.City = null;
-                        }
-                    }}
-                    onOpenChange={(open) => {
-                        if (open && optionsEndpoint) {
-                            formState.fetchOptions({ key, optionsEndpoint, dependsOn, endpointParamKey}, formState.form );
-                        }
-                    }}
-                >
-                    <Select.Trigger class="w-full truncate">
-                        {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>
-            {:else if type === "identity"}
-                {@const selectedLabel = formState.selectOptions[key]?.find(opt => opt.value === formState.form.PatIdt.IdentifierType)?.label || "Choose"}
-                <div class="flex items-center w-full">
-                    <Select.Root type="single" bind:value={formState.form.PatIdt.IdentifierType} 
-                        onOpenChange={(open) => {
-                            if (open && optionsEndpoint) {
-                                formState.fetchOptions({ key, optionsEndpoint});
-                            }
-                        }} 
-                        onValueChange={(val) => {
-                            formState.form.PatIdt = {
-                            IdentifierType: val,
-                            Identifier:''
-                            };
-                        }}
-                    >
-                        <Select.Trigger class="w-full truncate text-muted-foreground rounded-r-none">
-                            {selectedLabel}
-                        </Select.Trigger>
-                        <Select.Content>
-                            {#if formState.loadingOptions[key]}
-                                <Select.Item disabled value="loading">Loading...</Select.Item>
-                            {:else}
-                                {#if !required}
-                                    <Select.Item value="">- None -</Select.Item>
-                                {/if}
-                                {#each formState.selectOptions[key] ?? [] as option}
-                                    <Select.Item value={option.value}>
-                                        {option.label}
-                                    </Select.Item>
-                                {/each}
-                            {/if}
-                        </Select.Content>
-                    </Select.Root>
-                    <Input type="text" class="rounded-l-none" disabled={!formState.form.PatIdt.IdentifierType} bind:value={formState.form.PatIdt.Identifier} oninput={validateIdentifier} />
-                </div>
-            {:else if type === "custodian"}
-                <div class="flex items-center w-full">
-                    <Input type="text" class="rounded-r-none" readonly bind:value={formState.form[key].PatientID} />
-                    <CustodianModal {formState} mode="new"/>
-                </div>
-            {:else if type === "linkto"}
-                <div class="flex items-center w-full">
-                    <Input 
-                        type="text" 
-                        class="rounded-r-none" 
-                        readonly 
-                        value={linkToDisplay}
-                        placeholder="No linked patients"
-                    />
-                    <LinktoModal {formState} />
-                </div>
-            {:else if type === "fileupload"}
-                <div class="flex flex-col w-full">
-                    <ReusableUpload bind:attachments={formState.form[key]} bind:errors={uploadErrors}/>
-                    {#if Object.keys(uploadErrors).length > 0}
-                        <div class="flex flex-col justify-start text-destructive">
-                            {#each Object.entries(uploadErrors) as [file, msg]}
-                                <span>{msg}</span>
-                            {/each}
-                        </div>
-                    {/if}
-                </div>
-            {:else}
-                <Input 
-                    type="text" 
-                    bind:value={formState.form[key]}
-                    placeholder="Custom field type: {type}"
-                />
-            {/if}
-
-            <div class="absolute top-8 min-h-[1rem] w-full">
-                <!-- {#if formState.errors[key]}
-                    <span class="text-destructive text-sm leading-none">
-                        {formState.errors[key]}
-                    </span>
-                {/if} -->
-                {#if isChecking[key]}
-                    <div class="flex items-center gap-1 mt-1">
-                        <Spinner />
-                        <span class="text-sm text-muted-foreground">Checking...</span>
-                    </div>
-                {:else if formState.errors[key]}
-                    <span class="text-destructive text-sm leading-none">
-                        {formState.errors[key]}
-                    </span>
-                {/if}
-            </div>
-        </div>
-    </div>
-{/snippet}
-
-<FormPageContainer title="Edit Patient" {primaryAction} {secondaryActions}>
-    <div class="flex-1 min-h-0 overflow-y-auto p-2 space-y-6">
-        {#each patientFormFields as group}
-            <div class="space-y-6">
-                {#if group.title}
-                    <div class="text-md 2xl:text-lg font-semibold italic">
-                        <span class="border-b-2 border-primary">{group.title}</span>
-                    </div>
-                {/if}
-
-                {#each group.rows as row}
-                    <div
-                        class="grid grid-cols-1 space-y-2 gap-6 md:gap-4"
-                        class:md:grid-cols-1={row.columns.length === 1}
-                        class:md:grid-cols-2={row.columns.length === 2}
-                        class:md:grid-cols-3={row.columns.length === 3}
-                    >
-                        {#each row.columns as col}
-                            {#if col.type === "group"}
-                                <div
-                                    class="grid grid-cols-1 gap-6 md:gap-2"
-                                    class:md:grid-cols-1={col.columns.length === 1}
-                                    class:md:grid-cols-2={col.columns.length === 2}
-                                    class:md:grid-cols-3={col.columns.length === 3}
-                                >
-                                    {#each col.columns as child}
-                                        {@render Fieldset(child)}
-                                    {/each}
-                                </div>
-                            {:else}
-                                {@render Fieldset(col)}
-                            {/if}
-                        {/each}
-                    </div>
-                {/each}
-            </div>
-        {/each}
-    </div>
-</FormPageContainer>
-
-<!-- <div class="flex flex-col p-2 gap-4 h-full w-full">
-    <TopbarWrapper {actions} title="Edit Patient"/>
-    <div class="flex-1 min-h-0 overflow-y-auto p-2 space-y-6">
-        {#each patientFormFields as group}
-            <div class="space-y-6">
-                {#if group.title}
-                    <div class="text-md 2xl:text-lg font-semibold italic">
-                        <span class="border-b-2 border-primary">{group.title}</span>
-                    </div>
-                {/if}
-
-                {#each group.rows as row}
-                    <div
-                        class="grid grid-cols-1 space-y-2 gap-6 md:gap-4"
-                        class:md:grid-cols-1={row.columns.length === 1}
-                        class:md:grid-cols-2={row.columns.length === 2}
-                        class:md:grid-cols-3={row.columns.length === 3}
-                    >
-                        {#each row.columns as col}
-                            {#if col.type === "group"}
-                                <div
-                                    class="grid grid-cols-1 gap-6 md:gap-2"
-                                    class:md:grid-cols-1={col.columns.length === 1}
-                                    class:md:grid-cols-2={col.columns.length === 2}
-                                    class:md:grid-cols-3={col.columns.length === 3}
-                                >
-                                    {#each col.columns as child}
-                                        {@render Fieldset(child)}
-                                    {/each}
-                                </div>
-                            {:else}
-                                {@render Fieldset(col)}
-                            {/if}
-                        {/each}
-                    </div>
-                {/each}
-            </div>
-        {/each}
-    </div>
-    
-    <div class="mt-auto flex justify-end items-center pt-2">
-        <Button 
-            size="sm" 
-            class="rounded-r-none cursor-pointer" 
-            disabled={hasErrors || formState.isSaving.current}
-            onclick={handleSave}
-        >
-            {#if formState.isSaving.current}
-                <Spinner />
-            {:else}
-                Save
-            {/if}
-        </Button>
-        <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-                <Button 
-                    size="icon" 
-                    class="size-8 rounded-l-none"
-                    disabled={hasErrors || formState.isSaving.current}
-                >
-                    <ChevronUpIcon />
-                </Button>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content collisionPadding={8}>
-                <DropdownMenu.Group>
-                    <DropdownMenu.Item onclick={handleSaveAndOrder}>
-                        Save and Order
-                    </DropdownMenu.Item>
-                    <DropdownMenu.Item onclick={handleSave}>
-                        Save
-                    </DropdownMenu.Item>
-                </DropdownMenu.Group>
-            </DropdownMenu.Content>
-        </DropdownMenu.Root>
-    </div>
-</div> -->
\ No newline at end of file
diff --git a/src/lib/components/patient/list/page/edit-page.svelte b/src/lib/components/patient/list/page/edit-page.svelte
index b2f97b2..0ec37e9 100644
--- a/src/lib/components/patient/list/page/edit-page.svelte
+++ b/src/lib/components/patient/list/page/edit-page.svelte
@@ -6,10 +6,10 @@
     import { untrack } from "svelte";
     import { API } from "$lib/config/api";
     import ReusableAlertDialog from "$lib/components/reusable/reusable-alert-dialog.svelte";
+    import { buildPatientPayload } from "$lib/components/patient/list/config/patient-form-config";
 
     let props = $props();
 
-    // const { masterDetail, formFields, formActions, schema, initialForm, defaultError } = props.context;
     const { masterDetail, formFields, formActions, schema, initialForm } = props.context;
 
     const { formState } = masterDetail;
@@ -30,38 +30,7 @@
     }
 
     $effect(() => {
-        // const backendData = masterDetail?.selectedItem?.patient;
-        // if (!backendData) return;
-
         untrack(() => {
-        //     const formData = {
-        //         ...backendData,
-
-                // PatIdt: backendData.PatIdt ?? initialForm.PatIdt,
-                // LinkTo: backendData.LinkTo ?? [],
-                // Custodian: backendData.Custodian ?? initialForm.Custodian,
-
-                // Sex: backendData.SexKey || backendData.Sex,
-                // Religion: backendData.ReligionKey || backendData.Religion,
-                // MaritalStatus: backendData.MaritalStatusKey || backendData.MaritalStatus,
-                // Ethnic: backendData.EthnicKey || backendData.Ethnic,
-                // Race: backendData.RaceKey || backendData.Race,
-                // Country: backendData.CountryKey || backendData.Country,
-                // DeathIndicator: backendData.DeathIndicatorKey || backendData.DeathIndicator,
-                // Province: backendData.ProvinceID || backendData.Province,
-                // City: backendData.CityID || backendData.City,
-            // };
-            
-            // formState.setForm(formData);
-
-            // Ensure PatIdt is always an object to prevent binding errors
-            // if (!formState.form.PatIdt) {
-            //     formState.form.PatIdt = {
-            //         IdentifierType: "",
-            //         Identifier: ""
-            //     };
-            // }
-
             formFields.forEach(group => {
                 group.rows.forEach(row => {
                     row.columns.forEach(col => {
@@ -93,11 +62,11 @@
         });
     });
     
-// $inspect(masterDetail?.selectedItem?.patient)
+$inspect(masterDetail?.selectedItem?.patient)
 // $inspect(formState.form)
     async function handleEdit() {
-        // console.log(formState.form);
-        const result = await formState.save(masterDetail.mode);
+        const payload = buildPatientPayload(formState.form);
+        const result = await formState.save(masterDetail.mode, payload);
         
         if (result.status === 'success') {
             console.log('Patient updated successfully');
diff --git a/src/lib/components/patient/reusable/patient-form-renderer.svelte b/src/lib/components/patient/reusable/patient-form-renderer.svelte
index 24318e1..2be932a 100644
--- a/src/lib/components/patient/reusable/patient-form-renderer.svelte
+++ b/src/lib/components/patient/reusable/patient-form-renderer.svelte
@@ -220,19 +220,18 @@
                     </Select.Content>
                 </Select.Root>
             {:else if type === "identity"}
-                {@const selectedLabel = formState.selectOptions[key]?.find(opt => opt.value === formState.form.PatIdt?.IdentifierType)?.label || "Choose"}
+                {@const selectedLabel = formState.selectOptions[key]?.find(opt => opt.value === formState.form.PatIdt_IdentifierType)?.label || "Choose"}
                 <div class="flex items-center w-full">
-                    <Select.Root type="single" bind:value={formState.form.PatIdt.IdentifierType} 
+                    <Select.Root type="single" bind:value={formState.form.PatIdt_IdentifierType} 
                         onOpenChange={(open) => {
                             if (open && optionsEndpoint) {
                                 formState.fetchOptions({ key, optionsEndpoint});
                             }
                         }} 
                         onValueChange={(val) => {
-                            formState.form.PatIdt = {
-                                IdentifierType: val,
-                                Identifier:''
-                            };
+                            formState.form.PatIdt_IdentifierType = val;
+                            formState.form.PatIdt_Identifier = ''
+                            formState.errors.PatIdt_Identifier = null
                         }}
                     >
                         <Select.Trigger class="w-full truncate text-muted-foreground rounded-r-none">
@@ -253,11 +252,11 @@
                             {/if}
                         </Select.Content>
                     </Select.Root>
-                    <Input type="text" class="rounded-l-none" disabled={!formState.form.PatIdt?.IdentifierType} bind:value={formState.form.PatIdt.Identifier} oninput={validateIdentifier} />
+                    <Input type="text" class="rounded-l-none" disabled={!formState.form.PatIdt_IdentifierType} bind:value={formState.form.PatIdt_Identifier} oninput={validateIdentifier} />
                 </div>
             {:else if type === "custodian"}
                 <div class="flex items-center w-full">
-                    <Input type="text" class="rounded-r-none" readonly bind:value={formState.form[key].PatientID} />
+                    <Input type="text" class="rounded-r-none" readonly bind:value={formState.form.Custodian_PatientID} />
                     <CustodianModal {formState} mode="new"/>
                 </div>
             {:else if type === "linkto"}
diff --git a/src/lib/components/reusable/form/dictionary-form-renderer09032026.svelte b/src/lib/components/reusable/form/dictionary-form-renderer09032026.svelte
deleted file mode 100644
index e7689d9..0000000
--- a/src/lib/components/reusable/form/dictionary-form-renderer09032026.svelte
+++ /dev/null
@@ -1,770 +0,0 @@
-<script>
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
-	import * as Select from '$lib/components/ui/select/index.js';
-	import { Toggle } from '$lib/components/ui/toggle/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import { Input } from '$lib/components/ui/input/index.js';
-	import { Label } from '$lib/components/ui/label/index.js';
-	import { Spinner } from '$lib/components/ui/spinner/index.js';
-	import ReusableCalendar from '$lib/components/reusable/reusable-calendar.svelte';
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import * as InputGroup from '$lib/components/ui/input-group/index.js';
-	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
-	import { Textarea } from '$lib/components/ui/textarea/index.js';
-	import MoveLeftIcon from '@lucide/svelte/icons/move-left';
-	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';
-	import CornerDownLeftIcon from '@lucide/svelte/icons/corner-down-left';
-
-	let {
-		formState,
-		formFields,
-		mode = 'create',
-		disabledResultTypes = [],
-		disabledReferenceTypes = [],
-		disabledSign = false,
-		joinFields = $bindable(),
-		hiddenFields,
-		handleTestTypeChange,
-		handleResultTypeChange,
-		handleRefTypeChange,
-		onAddMember,
-		onRemoveMember,
-		customval,
-		operators,
-		logicalop,
-		comparisonop,
-		expression,
-		cursorPosition,
-		onUnselectAll,
-		onGetErrorStatus,
-		onAddOperator,
-		onAddValue,
-		onHandleContainerClick,
-		onMoveCursorLeft,
-		onMoveCursorRight,
-		onDeleteChar,
-		onClearExpression,
-	} = $props();
-
-
-	let searchQuery = $state({});
-	let dropdownOpen = $state({});
-	
-	function getFilteredOptions(key) {
-		const query = searchQuery[key] || '';
-		if (!query) return formState.selectOptions?.[key] ?? [];
-
-		return (formState.selectOptions?.[key] ?? []).filter((opt) =>
-			opt.label.toLowerCase().includes(query.toLowerCase())
-		);
-	}
-
-	async function initializeDefaultValues() {
-		for (const group of formFields) {
-			for (const row of group.rows) {
-				for (const col of row.columns) {
-					if (col.type === 'group') {
-						for (const child of col.columns) {
-							await handleDefaultValue(child);
-						}
-					} else {
-						await handleDefaultValue(col);
-					}
-				}
-			}
-		}
-	}
-
-	async function handleDefaultValue(field) {
-		if (!field.defaultValue || !field.optionsEndpoint) return;
-
-		await formState.fetchOptions(field, formState.form);
-
-		if (!formState.form[field.key]) {
-			formState.form[field.key] = field.defaultValue;
-		}
-	}
-
-	$effect(() => {
-		initializeDefaultValues();
-	});
-</script>
-
-{#snippet Fieldset({
-	key,
-	label,
-	required,
-	type,
-	optionsEndpoint,
-	options,
-	validateOn,
-	dependsOn,
-	endpointParamKey,
-	valueKey,
-	labelKey,
-	txtKey
-})}
-	<div class="flex w-full flex-col gap-1.5">
-		<div class="flex justify-between items-center w-full">
-			<Label>{label}</Label>
-			{#if required}
-				<span class="text-destructive text-xl leading-none h-3.5">*</span>
-			{/if}
-		</div>
-
-		<div class="relative flex flex-col items-center w-full">
-			{#if type === 'text'}
-				<Input
-					type="text"
-					bind:value={formState.form[key]}
-					oninput={() => {
-						if (validateOn?.includes('input')) {
-							formState.validateField(key, formState.form[key], false);
-						}
-					}}
-					onblur={() => {
-						if (validateOn?.includes('blur')) {
-							validateFieldAsync(key, mode, originalData?.[key]);
-						}
-					}}
-					readonly={key === 'NumRefType' || key === 'TxtRefType' || key === 'Level'}
-				/>
-			{:else if type === 'email'}
-				<Input
-					type="email"
-					bind:value={formState.form[key]}
-					oninput={() => {
-						if (validateOn?.includes('input')) {
-							formState.validateField(key, formState.form[key], false);
-						}
-					}}
-					onblur={() => {
-						if (validateOn?.includes('blur')) {
-							formState.validateField(key, formState.form[key], false);
-						}
-					}}
-				/>
-			{:else if type === 'number'}
-				<Input
-					type="number"
-					bind:value={formState.form[key]}
-					oninput={() => {
-						if (validateOn?.includes('input')) {
-							formState.validateField(key, formState.form[key], false);
-						}
-					}}
-					onblur={() => {
-						if (validateOn?.includes('blur')) {
-							formState.validateField(key, formState.form[key], false);
-						}
-					}}
-					onkeydown={(e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault()}
-				/>
-			{:else if type === 'textarea'}
-				<Textarea
-					class="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-					oninput={() => {
-						if (validateOn?.includes('input')) {
-							formState.validateField(key, formState.form[key], false);
-						}
-					}}
-					onblur={() => {
-						if (validateOn?.includes('blur')) {
-							formState.validateField(key, formState.form[key], false);
-						}
-					}}
-					bind:value={formState.form[key]}
-				/>
-			{:else if type === 'select'}
-				{@const selectedLabel =
-					formState.selectOptions?.[key]?.find((opt) => opt.value === formState.form[key])?.label ||
-					'Choose'}
-				{@const filteredOptions = getFilteredOptions(key)}
-				<Select.Root
-					type="single"
-					bind:value={formState.form[key]}
-					onValueChange={(val) => {
-						formState.form[key] = val;
-						if (validateOn?.includes('input')) {
-							formState.validateField?.(key, formState.form[key], false);
-						}
-						if (key === 'TestType') {
-							handleTestTypeChange(val);
-						}
-						if (key === 'Province') {
-							formState.form.City = '';
-							if (formState.selectOptions) {
-								formState.selectOptions.City = [];
-							}
-							if (formState.lastFetched) {
-								formState.lastFetched.City = null;
-							}
-						}
-						if (key === 'ResultType') {
-							handleResultTypeChange(val);
-						}
-						if (key === 'RefType') {
-							handleRefTypeChange(val);
-						}
-						if (key === 'HostType') {
-							formState.form.HostID = '';
-							formState.form.HostTestCode = '';
-							formState.form.HostTestName = '';
-							formState.selectOptions.HostTestCode = [];
-							formState.selectOptions.HostTestName = [];
-						}
-						if (key === 'HostID') {
-							formState.form.HostTestCode = '';
-							formState.form.HostTestName = '';
-							formState.selectOptions.HostTestCode = [];
-							formState.selectOptions.HostTestName = [];
-						}
-						if (key === 'ClientType') {
-							formState.form.ClientID = '';
-							formState.form.ClientTestCode = '';
-							formState.form.ClientTestName = '';
-							formState.selectOptions.ClientTestCode = [];
-							formState.selectOptions.ClientTestName = [];
-						}
-						if (key === 'ClientID') {
-							formState.form.ClientTestCode = '';
-							formState.form.ClientTestName = '';
-							formState.selectOptions.ClientTestCode = [];
-							formState.selectOptions.ClientTestName = [];
-						}
-					}}
-					onOpenChange={(open) => {
-						if (open && optionsEndpoint) {
-							formState.fetchOptions?.(
-								{ key, optionsEndpoint, dependsOn, endpointParamKey, valueKey, labelKey },
-								formState.form
-							);
-						}
-					}}
-				>
-					<Select.Trigger class="w-full truncate">
-						{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}
-									disabled={(key === 'ResultType' && disabledResultTypes.includes(option.value)) ||
-										(key === 'RefType' && disabledReferenceTypes.includes(option.value))}
-								>
-									{option.label}
-								</Select.Item>
-							{/each}
-						{/if}
-					</Select.Content>
-				</Select.Root>
-			{:else if type === 'selectmultiple'}
-				{@const filteredOptions = getFilteredOptions(key)}
-				{@const currentValues = Array.isArray(formState.form[key]) ? formState.form[key] : []}
-				<Select.Root
-					type="multiple"
-					value={currentValues.map((item) => item.value)}
-					onValueChange={(val) => {
-						const selectedObjects = (formState.selectOptions?.[key] ?? []).filter((opt) =>
-							val.includes(opt.value)
-						);
-						formState.form[key] = selectedObjects;
-						if (validateOn?.includes('input')) {
-							formState.validateField?.(key, selectedObjects, false);
-							formState.validateField?.('FormulaCode', expression, false);
-						}
-					}}
-					onOpenChange={(open) => {
-						if (open && optionsEndpoint) {
-							formState.fetchOptions?.(
-								{ key, optionsEndpoint, dependsOn, endpointParamKey, valueKey, labelKey },
-								formState.form
-							);
-						}
-					}}
-				>
-					<Select.Trigger class="w-full">
-						{currentValues.length
-							? (formState.selectOptions?.[key] ?? [])
-									.filter((o) => currentValues.some((f) => f.value === o.value))
-									.map((o) => o.label)
-									.join(', ')
-							: 'Choose'}
-					</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>
-						<Select.Group>
-							{#if formState.loadingOptions?.[key]}
-								<div class="p-2 text-sm text-muted-foreground">Loading...</div>
-							{:else}
-								{#if currentValues.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={() => onUnselectAll?.(key)}
-									>
-										Unselect All
-									</button>
-								{/if}
-								{#each filteredOptions as opt (opt.value)}
-									<Select.Item value={opt.value} label={opt.label}>
-										{opt.label}
-									</Select.Item>
-								{/each}
-							{/if}
-						</Select.Group>
-					</Select.Content>
-				</Select.Root>
-			{:else if type === 'date'}
-				<ReusableCalendar
-					bind:value={formState.form[key]}
-					parentFunction={(dateStr) => {
-						formState.form[key] = dateStr;
-						if (validateOn?.includes('input')) {
-							formState.validateField(key, dateStr, false);
-						}
-					}}
-				/>
-			{:else if type === 'signvalue'}
-				<InputGroup.Root>
-					<InputGroup.Input
-						placeholder="Type here"
-						bind:value={formState.form[txtKey]}
-						oninput={() => {
-							if (validateOn?.includes('input')) {
-								formState.validateField('Low', formState.form[txtKey]);
-								formState.validateField('LowSign');
-								formState.validateField('High', formState.form[txtKey]);
-								formState.validateField('HighSign');
-							}
-						}}
-					/>
-					<InputGroup.Addon align="inline-start">
-						<DropdownMenu.Root
-							onOpenChange={(open) => {
-								dropdownOpen[key] = open;
-								if (open && optionsEndpoint) {
-									formState.fetchOptions?.(
-										{ key, optionsEndpoint, valueKey, labelKey },
-										formState.form
-									);
-								}
-							}}
-						>
-							<DropdownMenu.Trigger>
-								{#snippet child({ props })}
-									<InputGroup.Button {...props} variant="ghost" disabled={disabledSign}>
-										{formState.selectOptions?.[key]?.find(
-											(opt) => opt.value === formState.form[key]
-										)?.label || 'Choose'}
-										<ChevronDownIcon />
-									</InputGroup.Button>
-								{/snippet}
-							</DropdownMenu.Trigger>
-							<DropdownMenu.Content align="start">
-								{#if formState.loadingOptions?.[key]}
-									<DropdownMenu.Item disabled>Loading...</DropdownMenu.Item>
-								{:else}
-									<DropdownMenu.Item
-										onSelect={() => {
-											formState.form[key] = '';
-											dropdownOpen[key] = false;
-											formState.validateField('LowSign');
-											formState.validateField('HighSign');
-										}}
-									>
-										- None -
-									</DropdownMenu.Item>
-									{#each formState.selectOptions?.[key] || [] as option}
-										<DropdownMenu.Item
-											onclick={() => {
-												formState.form[key] = option.value;
-												dropdownOpen[key] = false;
-											}}
-											onSelect={() => {
-												formState.form[key] = option.value;
-												formState.validateField('LowSign');
-												formState.validateField('HighSign');
-											}}
-										>
-											{option.label}
-										</DropdownMenu.Item>
-									{/each}
-								{/if}
-							</DropdownMenu.Content>
-						</DropdownMenu.Root>
-					</InputGroup.Addon>
-				</InputGroup.Root>
-			{:else if type === 'agejoin'}
-				<div class="flex items-center gap-2 w-full">
-					<InputGroup.Root>
-						<InputGroup.Input
-							type="number"
-							bind:value={joinFields[key].YY}
-							oninput={() => {
-								if (validateOn?.includes('input')) {
-									formState.validateField('AgeStart');
-									formState.validateField('AgeEnd');
-								}
-							}}
-						/>
-						<InputGroup.Addon align="inline-end">
-							<InputGroup.Text>Year</InputGroup.Text>
-						</InputGroup.Addon>
-					</InputGroup.Root>
-					<InputGroup.Root>
-						<InputGroup.Input
-							type="number"
-							bind:value={joinFields[key].MM}
-							oninput={() => {
-								if (validateOn?.includes('input')) {
-									formState.validateField('AgeStart');
-									formState.validateField('AgeEnd');
-								}
-							}}
-						/>
-						<InputGroup.Addon align="inline-end">
-							<InputGroup.Text>Month</InputGroup.Text>
-						</InputGroup.Addon>
-					</InputGroup.Root>
-					<InputGroup.Root>
-						<InputGroup.Input
-							type="number"
-							bind:value={joinFields[key].DD}
-							oninput={() => {
-								if (validateOn?.includes('input')) {
-									formState.validateField('AgeStart');
-									formState.validateField('AgeEnd');
-								}
-							}}
-						/>
-						<InputGroup.Addon align="inline-end">
-							<InputGroup.Text>Day</InputGroup.Text>
-						</InputGroup.Addon>
-					</InputGroup.Root>
-				</div>
-			{:else if type === 'formulabuilder'}
-				<div class="flex flex-col gap-8 w-full">
-					<div class="flex gap-1 w-full">
-						<Button type="button" variant="outline" size="icon" onclick={onMoveCursorLeft}>
-							<MoveLeftIcon class="w-4 h-4" />
-						</Button>
-						<div class="relative flex-1">
-							<button
-								class="flex flex-1 h-27 w-full min-w-0 items-center rounded-md border bg-background px-3 py-2 font-mono text-sm whitespace-nowrap"
-								role="textbox"
-								tabindex="0"
-								onclick={onHandleContainerClick}
-							>
-								{#each expression.split('') as char, i}
-									{#if i === cursorPosition}
-										<span class="animate-cursor inline-block h-6 w-0.5 bg-primary"></span>
-									{/if}
-									<span class="">{char}</span>
-								{/each}
-								{#if cursorPosition === expression.length}
-									<span class="animate-cursor inline-block h-6 w-0.5 bg-primary"></span>
-								{/if}
-							</button>
-						</div>
-						<Button type="button" variant="outline" size="icon" onclick={onMoveCursorRight}>
-							<MoveRightIcon class="w-4 h-4" />
-						</Button>
-						<Button type="button" variant="outline" size="icon" onclick={onDeleteChar}>
-							<DeleteIcon class="w-4 h-4" />
-						</Button>
-						<Button type="button" variant="outline" size="icon" onclick={onClearExpression}>
-							<BrushCleaningIcon class="w-4 h-4" />
-						</Button>
-						<Button type="button" variant="outline" size="icon">
-							<CornerDownLeftIcon class="w-4 h-4" />
-						</Button>
-					</div>
-					{#if formState.form.FormulaInput.length > 0}
-						<div>
-							<div class="flex flex-col gap-2">
-								<div>
-									<span class="text-sm font-medium">Selected Tests</span>
-									<div class="flex flex-wrap gap-2">
-										{#each formState.form.FormulaInput as item (item)}
-											<Button
-												type="button"
-												variant="outline"
-												class="h-auto w-auto p-2"
-												onclick={() => onAddValue?.(item.value)}
-											>
-												{item.value}
-											</Button>
-										{/each}
-									</div>
-								</div>
-								<div>
-									<span class="text-sm font-medium">Possible Values (from selected tests)</span>
-									<div class="flex flex-wrap gap-2">
-										
-									</div>
-								</div>
-								<div>
-									<span class="text-sm font-medium">Custom Values</span>
-									<div class="flex flex-wrap gap-2">
-										{#each customval as op}
-											<Button
-												type="button"
-												variant="outline"
-												class="h-auto w-auto p-2"
-												onclick={() => onAddOperator?.(op)}
-											>
-												{op}
-											</Button>
-										{/each}
-									</div>
-								</div>
-								<div>
-									<span class="text-sm font-medium">Logical Operators</span>
-									<div class="flex flex-wrap gap-2">
-										{#each logicalop as op}
-											<Button
-												type="button"
-												variant="outline"
-												class="h-auto w-auto p-2"
-												onclick={() => onAddOperator?.(op)}
-											>
-												{op}
-											</Button>
-										{/each}
-									</div>
-								</div>
-								<div>
-									<span class="text-sm font-medium">Comparison Operators</span>
-									<div class="flex flex-wrap gap-2">
-										{#each comparisonop as op}
-											<Button
-												type="button"
-												variant="outline"
-												size="icon"
-												onclick={() => onAddOperator?.(op)}
-											>
-												{op}
-											</Button>
-										{/each}
-									</div>
-								</div>
-								<div>
-									<span class="text-sm font-medium">Math Operators</span>
-									<div class="flex flex-wrap gap-2">
-										{#each operators as op}
-											<Button
-												type="button"
-												variant="outline"
-												size="icon"
-												onclick={() => onAddOperator?.(op)}
-											>
-												{op}
-											</Button>
-										{/each}
-									</div>
-								</div>
-							</div>
-						</div>
-					{/if}
-				</div>
-			{:else if type === 'members'}
-				{@const filteredOptions = getFilteredOptions(key)}
-				<div class="flex flex-col gap-2 w-full">
-					{#each formState.form.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
-											);
-										}
-									}}
-									onValueChange={() => {
-										if (validateOn?.includes('input')) {
-											formState.validateField?.(key, formState.form[key], false);
-										}
-									}}
-								>
-									<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"
-					bind:value={formState.form[key]}
-					placeholder="Custom field type: {type}"
-				/>
-			{/if}
-			<div class={`absolute min-h-[1rem] w-full ${key === 'Members' ? 'right-0 -top-5 text-right' : 'top-10'}`}>
-				{#if key !== 'FormulaCode' && (formState.errors[key] || formState.errors[txtKey])}
-					{@const errorMessage = formState.errors[key] ?? formState.errors[txtKey]}
-
-					<div class="text-sm text-destructive">
-						{errorMessage}
-					</div>
-				{/if}
-				{#if key === 'FormulaCode' && formState.form.FormulaInput?.length}
-					{@const inputStatus = onGetErrorStatus?.(expression)}
-
-					<div class="flex items-center gap-2 text-sm text-destructive">
-						<span>Must included :</span>
-
-						<div class="flex gap-1 flex-wrap">
-							{#each inputStatus as item (item.value)}
-								<Badge variant={item.done ? 'default' : 'destructive'}>
-									{item.value}
-								</Badge>
-							{/each}
-						</div>
-					</div>
-				{/if}
-			</div>
-		</div>
-	</div>
-{/snippet}
-
-<div class="p-2 space-y-6">
-	{#each formFields as group}
-		<div class="space-y-6">
-			{#if group.title}
-				<div class="text-md 2xl:text-lg font-semibold italic">
-					<span class="border-b-2 border-primary">{group.title}</span>
-				</div>
-			{/if}
-
-			{#each group.rows as row}
-				{@const visibleColumns = row.columns.filter((col) => !hiddenFields?.includes(col.key))}
-
-				{#if visibleColumns.length > 0}
-					<div
-						class="grid grid-cols-1 space-y-2 gap-6 md:gap-4"
-						class:md:grid-cols-1={visibleColumns.length === 1 &&
-							visibleColumns[0].fullWidth !== false}
-						class:md:grid-cols-2={visibleColumns.length === 2 ||
-							(visibleColumns.length === 1 && visibleColumns[0].fullWidth === false)}
-						class:md:grid-cols-3={visibleColumns.length === 3}
-					>
-						{#each visibleColumns as col}
-							{#if col.type === 'group'}
-								{@const visibleChildColumns = col.columns.filter(
-									(child) => !hiddenFields?.includes(child.key)
-								)}
-
-								{#if visibleChildColumns.length > 0}
-									<div
-										class="grid grid-cols-1 gap-6 md:gap-2"
-										class:md:grid-cols-1={visibleChildColumns.length === 1 &&
-											visibleChildColumns[0].fullWidth !== false}
-										class:md:grid-cols-2={visibleChildColumns.length === 2 ||
-											(visibleChildColumns.length === 1 &&
-												visibleChildColumns[0].fullWidth === false)}
-										class:md:grid-cols-3={visibleChildColumns.length === 3}
-									>
-										{#each visibleChildColumns as child}
-											{@render Fieldset(child)}
-										{/each}
-									</div>
-								{/if}
-							{:else}
-								{@render Fieldset(col)}
-							{/if}
-						{/each}
-					</div>
-				{/if}
-			{/each}
-		</div>
-	{/each}
-</div>
-
-<style>
-	@keyframes cursor-blink {
-		0%,
-		50% {
-			opacity: 1;
-		}
-		51%,
-		100% {
-			opacity: 0;
-		}
-	}
-	.animate-cursor {
-		animation: cursor-blink 1s infinite;
-	}
-</style>
diff --git a/src/lib/components/reusable/form/test.js b/src/lib/components/reusable/form/test.js
deleted file mode 100644
index cb4afaf..0000000
--- a/src/lib/components/reusable/form/test.js
+++ /dev/null
@@ -1,290 +0,0 @@
-<script>
-	import * as Select from '$lib/components/ui/select/index.js';
-	import { fruits } from '$lib/components/multiselect/multiselect-form-config';
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { z } from 'zod';
-
-	let selectedValues = $state([]);
-	let expression = $state('');
-	let cursorPosition = $state(0);
-
-	const operators = ['+', '-', '*', '/', '^', '(', ')'];
-
-	function hasExactKeyword(input, keyword) {
-		const regex = new RegExp(`\\b${keyword}\\b`, 'i');
-		return regex.test(input);
-	}
-
-	const schema = z
-		.object({
-			selected: z.array(z.string()),
-			input: z.string()
-		})
-		.refine(
-			(data) => {
-				return data.selected.every((v) => hasExactKeyword(data.input, v));
-			},
-			{
-				message: 'Input must contain all selected values',
-				path: ['input']
-			}
-		);
-
-	let errors = $state({});
-
-	$effect(() => {
-		const result = schema.safeParse({ selected: selectedValues, input: expression });
-		if (!result.success) {
-			const fieldErrors = {};
-			for (const issue of result.error.issues) {
-				fieldErrors[issue.path[0]] = issue.message;
-			}
-			errors = fieldErrors;
-		} else {
-			errors = {};
-		}
-	});
-
-	const selectedLabel = $derived(
-		selectedValues.length === 0
-			? 'Select a fruit'
-			: selectedValues.map((v) => fruits.find((f) => f.value === v)?.value).join(', ')
-	);
-
-	const hasErrors = $derived(Object.keys(errors).length > 0);
-
-	const inputStatus = $derived(
-		selectedValues
-			.filter((v) => v)
-			.map((v) => ({
-				value: v,
-				label: fruits.find((f) => f.value === v)?.label,
-				done: hasExactKeyword(expression, v)
-			}))
-	);
-
-	function unselectAll() {
-		selectedValues = [];
-	}
-
-	function removeSelectedItem(item) {
-		selectedValues = selectedValues.filter((v) => v !== item);
-	}
-
-	function addToExpression(text) {
-		const before = expression.slice(0, cursorPosition);
-		const after = expression.slice(cursorPosition);
-		expression = before + text + after;
-		cursorPosition += text.length;
-		setCursorPosition();
-	}
-
-	function addOperator(op) {
-		addToExpression(op);
-	}
-
-	function addValue(val) {
-		addToExpression(val);
-	}
-
-	function handleInput(e) {
-		expression = e.target.value;
-		cursorPosition = e.target.selectionStart;
-	}
-
-	function handleKeydown(e) {
-		if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-			setTimeout(setCursorPosition, 0);
-		}
-	}
-
-	function setCursorPosition() {}
-
-	function handleClick(e) {
-		cursorPosition = e.target.selectionStart;
-	}
-
-	function handleContainerClick(e) {
-		const rect = e.currentTarget.getBoundingClientRect();
-		const text = expression;
-		const charWidth = 8.5;
-		const padding = 12;
-		const clickX = e.clientX - rect.left - padding;
-		let newPos = Math.floor(clickX / charWidth);
-		newPos = Math.max(0, Math.min(newPos, text.length));
-		cursorPosition = newPos;
-	}
-
-	function moveCursorLeft() {
-		if (cursorPosition > 0) {
-			cursorPosition -= 1;
-			setCursorPosition();
-		}
-	}
-
-	function moveCursorRight() {
-		if (cursorPosition < expression.length) {
-			cursorPosition += 1;
-			setCursorPosition();
-		}
-	}
-
-	function deleteChar() {
-		if (cursorPosition > 0) {
-			const before = expression.slice(0, cursorPosition - 1);
-			const after = expression.slice(cursorPosition);
-			expression = before + after;
-			cursorPosition -= 1;
-			setCursorPosition();
-		}
-	}
-
-	function clearExpression() {
-		expression = '';
-		cursorPosition = 0;
-	}
-</script>
-
-<div class="flex flex-col gap-4">
-	<Select.Root type="multiple" name="favoriteFruit" bind:value={selectedValues}>
-		<Select.Trigger class="w-full">
-			{selectedLabel}
-		</Select.Trigger>
-		<Select.Content>
-			<Select.Group>
-				<Select.Label>Fruits</Select.Label>
-				{#each fruits as fruit (fruit.value)}
-					<Select.Item value={fruit.value} label={fruit.label}>
-						{fruit.label}
-					</Select.Item>
-				{/each}
-			</Select.Group>
-			{#if selectedValues.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}
-		</Select.Content>
-	</Select.Root>
-
-	{#if selectedValues.length > 0}
-		<div class="flex flex-col gap-2">
-			<label class="text-sm font-medium">Selected Values</label>
-			<div class="flex flex-wrap gap-2">
-				{#each selectedValues as item (item)}
-					<button
-						type="button"
-						class="flex items-center gap-1 rounded-md bg-blue-100 px-3 py-1.5 text-sm font-medium text-blue-800 hover:bg-blue-200"
-						onclick={() => addValue(item)}
-					>
-						{item}
-					</button>
-				{/each}
-			</div>
-		</div>
-	{/if}
-
-	<div class="flex flex-col gap-2">
-		<label class="text-sm font-medium">Expression</label>
-		<div class="flex gap-1">
-			<button
-				type="button"
-				onclick={moveCursorLeft}
-				class="rounded-md border border-input bg-background px-3 py-2 text-sm hover:bg-accent"
-			>
-				←
-			</button>
-			<div class="relative flex-1">
-				<div
-					class="flex h-10 items-center overflow-x-auto rounded-md border border-input bg-background px-3 py-2 font-mono text-sm whitespace-nowrap"
-					onclick={handleContainerClick}
-					role="textbox"
-					tabindex="0"
-				>
-					{#each expression.split('') as char, i}
-						{#if i === cursorPosition}
-							<span class="animate-cursor inline-block h-6 w-0.5 bg-primary"></span>
-						{/if}
-						<span class="">{char}</span>
-					{/each}
-					{#if cursorPosition === expression.length}
-						<span class="animate-cursor inline-block h-6 w-0.5 bg-primary"></span>
-					{/if}
-				</div>
-			</div>
-			<button
-				type="button"
-				onclick={moveCursorRight}
-				class="rounded-md border border-input bg-background px-3 py-2 text-sm hover:bg-accent"
-			>
-				→
-			</button>
-			<button
-				type="button"
-				onclick={deleteChar}
-				class="rounded-md border border-input bg-background px-3 py-2 text-sm hover:bg-accent"
-			>
-				Del
-			</button>
-			<button
-				type="button"
-				onclick={clearExpression}
-				class="rounded-md border border-input bg-background px-3 py-2 text-sm hover:bg-accent"
-			>
-				Clear
-			</button>
-		</div>
-	</div>
-
-	<div class="flex flex-col gap-2">
-		<label class="text-sm font-medium">Operators</label>
-		<div class="flex flex-wrap gap-2">
-			{#each operators as op}
-				<button
-					type="button"
-					class="rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground hover:bg-secondary/80"
-					onclick={() => addOperator(op)}
-				>
-					{op}
-				</button>
-			{/each}
-		</div>
-	</div>
-
-	{#if errors.input}
-		<div class="flex items-center gap-2 text-sm text-red-500">
-			<span>{errors.input}:</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}
-
-	<button disabled={hasErrors} class="rounded bg-blue-500 px-4 py-2 text-white disabled:opacity-50">
-		Save
-	</button>
-</div>
-
-<style>
-	@keyframes cursor-blink {
-		0%,
-		50% {
-			opacity: 1;
-		}
-		51%,
-		100% {
-			opacity: 0;
-		}
-	}
-	.animate-cursor {
-		animation: cursor-blink 1s infinite;
-	}
-</style>
\ No newline at end of file
diff --git a/src/routes/patient/list/+page.svelte b/src/routes/patient/list/+page.svelte
index 63b2474..62c0046 100644
--- a/src/routes/patient/list/+page.svelte
+++ b/src/routes/patient/list/+page.svelte
@@ -22,15 +22,11 @@
 			editEndpoint: editPatient,
 			mapToForm: (data) => ({
 				...data,
-				PatIdt: {
-					IdentifierType: data.PatIdt?.IdentifierType ?? "",
-					Identifier: data.PatIdt?.Identifier ?? ""
-				},
+				PatIdt_IdentifierType: data.PatIdt?.IdentifierType ?? "",
+				PatIdt_Identifier: data.PatIdt?.Identifier ?? "",
+				Custodian_InternalPID: data.Custodian?.InternalPID ?? "",
+				Custodian_PatientID: data.Custodian?.PatientID ?? "",
 				LinkTo: Array.isArray(data.LinkTo) ? data.LinkTo : [],
-				Custodian: data.Custodian ?? {
-					InternalPID: "",
-					PatientID: ""
-				},
 			})
 		}
 	});