improvement add/edit dialog

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditFinalLOG.tsx

@@ -26,9 +26,7 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
         discharge_date: requestLog?.discharge_date,
         id: requestLog?.id,
         catatan: requestLog?.catatan,
-        icdCodes:  requestLog?.diagnosis
-        ? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
-        : [],
+        icdCodes:  requestLog?.diagnosis,
         reason: requestLog?.reason
     });
     
@@ -36,8 +34,10 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
         { value: '-', label: '-' }
     ]);
 
+    const [searchIcd, setSearchIcd] = useState('');
+
     useEffect(() => {
-        // Ambil data dari API dan atur opsi ICD
+       // Ambil data dari API dan atur opsi ICD
         axios.get('diagnosis')
             .then((response) => {
                 setIcdOptions(response.data.data);
@@ -45,23 +45,23 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
             .catch((error) => {
                 console.error('Error fetching ICD options:', error);
             });
+        
     }, []); // useEffect dijalankan hanya sekali saat komponen dimount
     
     useEffect(() => {
-    if (requestLog) {
-      setFormData({
-        discharge_date: requestLog.discharge_date,
-        billing_no: requestLog.billing_no,
-        invoice_no: requestLog.invoice_no,
-        id: requestLog.id,
-        catatan: requestLog.catatan,
-        icdCodes: requestLog.diagnosis
-          ? requestLog.diagnosis.map(diagnosis => diagnosis.code)
-          : [],
-        reason: requestLog.reason
-      });
-    }
-  }, [requestLog]);
+        if (requestLog) {
+        setFormData({
+            discharge_date: requestLog.discharge_date,
+            billing_no: requestLog.billing_no,
+            invoice_no: requestLog.invoice_no,
+            id: requestLog.id,
+            catatan: requestLog.catatan,
+            icdCodes: requestLog.diagnosis,
+            reason: requestLog.reason
+        });
+        }
+    }, [requestLog]);
+
 
     const handleChange = (field, value) => {
         setFormData((prevData) => ({
@@ -80,6 +80,17 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
         }));
         handleSubmit();
     };
+
+    const handleSearch = (search) => {
+        setSearchIcd(search);
+        axios.get('diagnosis?search=' + search)
+            .then((response) => {
+                setIcdOptions(response.data.data);
+            })
+            .catch((error) => {
+                console.error('Error fetching ICD options:', error);
+            });
+    }
     
 
     const handleSubmit = () => {
@@ -100,8 +111,7 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
             alert('Silakan pilih alasan sebelum mengirimkan data.');
         }
     }
-
-
+    
     const style1 = {
         color: '#919EAB',
         width: '30%'
@@ -123,13 +133,10 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
             billing_no: requestLog?.billing_no,
             invoice_no: requestLog?.invoice_no,
             catatan: requestLog?.catatan,
-            icdCodes: requestLog?.diagnosis
-            ? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
-            : [],
+            icdCodes: requestLog?.diagnosis,
             reason: requestLog?.reason 
         });
     };
-
     const [isReasonSelected, setIsReasonSelected] = useState(true);
     
     const handleCloseDialog = () => {
@@ -227,11 +234,10 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
                                 options={icdOptions}
                                 getOptionLabel={(option) => option.label}
                                 fullWidth
-                                value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
-                                onChange={(e, newValues) => {
-                                    const selectedCodes = newValues.map((value) => value.value);
-                                    setFormData({ ...formData, icdCodes: selectedCodes });
-                                }}                 
+                                value={formData.icdCodes}
+                                onChange={(e, newValues) => handleChange('icdCodes', newValues)}
+                                inputValue={searchIcd}
+                                onInputChange={(e, newInputValue) => handleSearch(newInputValue)}
                                 renderInput={(params) => (
                                     <TextField
                                         {...params}
@@ -247,7 +253,7 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
                                 options={reasons}
                                 getOptionLabel={(option) => option.label}
                                 fullWidth
-                                value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
+                                value={reasons.find((r) => r.value == formData.reason) || null} // Use find to match the default value
                                 onChange={(e, newValue) => handleChange('reason', newValue?.value)}
                                 renderInput={(params) => (
                                     <TextField