Update Request LOG

frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx

@@ -85,7 +85,67 @@ import { format } from 'date-fns';
 // ----------------------------------------------------------------------
 
 export default function Detail() {
-    //dari hospital portal
+
+
+
+    const location = useLocation();
+    const queryParams = new URLSearchParams(location.search);
+
+    const navigate = useNavigate();
+    const { themeStretch } = useSettings();
+    const [requestLog, setRequestLog] = useState<DetailFinalLogType>();
+    const [isReversal, setIsReversal] = useState(false);
+    const [submitLoading, setSubmitLoading] = useState(false);
+
+    const defaultValues: any = {nominal : 0};
+    const validationSchema = Yup.object().shape({nominal: Yup.number().typeError('Nominal harus berupa angka').required('Nominal harus diisi')})
+
+    const methods = useForm<any>({
+        resolver: yupResolver(validationSchema),
+        defaultValues
+    });
+
+    const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods;
+
+    const onSubmit = async (data: any) => {
+        setSubmitLoading(true);
+        const formData = makeFormData({
+            request_logs_id: id,
+            approval_files: fileApprovals,
+            nominal: data.nominal,
+        });
+        axios
+            .post(`/customer-service/request/${id}/approval_files`, formData)
+            .then((response) => {
+            enqueueSnackbar('Berhasil membuat data', { variant: 'success' });
+
+            window.location.reload()
+            })
+            .catch(({ response }) => {
+            enqueueSnackbar('Something Went Wrong', { variant: 'error' });
+            })
+            .then(() => {
+            setSubmitLoading(false);
+            });
+    }
+    useEffect(() => {
+        if (!requestLog?.id_member) return
+        axios.get('service-member/'+ (requestLog?.id_member ?? null))
+          .then((response) => {
+            setServiceOptions(response.data);
+        }).catch((error) => {
+          console.error('Error fetching ICD options:', error);
+        });
+
+        axios.get('specialis')
+          .then((response) => {
+            setSpecialisOptions(response.data);
+        }).catch((error) => {
+          console.error('Error fetching ICD options:', error);
+        });
+
+      }, [requestLog?.id_member]);
+      //dari hospital portal
   const [dischargeDate, setDischargeDate] = useState<string>(format(new Date(), "yyyy MMM d HH:mm:ss"));
   const [serviceOptions, setServiceOptions] = useState([
     { value: '-', label: '-' }
@@ -93,25 +153,31 @@ export default function Detail() {
 const [specialisOptions, setSpecialisOptions] = useState([
     { value: '-', label: '-' }
 ]);
-useEffect(() => {
-    axios.get('service-member/'+1)
-      .then((response) => {
-        setServiceOptions(response.data);
-    }).catch((error) => {
-      console.error('Error fetching ICD options:', error);
-    });
 
-    axios.get('specialis')
-      .then((response) => {
-        setSpecialisOptions(response.data);
-    }).catch((error) => {
-      console.error('Error fetching ICD options:', error);
-    });
+    const [serviceCode, setServiceCode] = useState<string>('')
+    const [idSpecialities, setIdSpecialities] = useState<number | null>(null)
+    const [inputDppj, setInputDppj] = useState<string>('')
+    useEffect(() => {
+        if (!requestLog) return
+        setServiceCode(requestLog.service_code ?? '')
+        setIdSpecialities(requestLog.specialitiesID ?? null)
+        setInputDppj(requestLog.dppj ?? '')
+    }, [requestLog])
+    const selectedService = useMemo(
+    () =>
+        serviceOptions.find(
+        (o) => String(o.value) === String(serviceCode)
+        ) || null,
+    [serviceOptions, serviceCode]
+    )
 
-  }, []);
-const [serviceCode, setServiceCode] = useState<string>("");
-const [idSpecialities, setIdSpecialities] = useState("");
-const [inputDppj, setInputDppj] = useState("");
+    const selectedSpecialis = useMemo(
+    () =>
+        specialisOptions.find(
+        (o) => Number(o.value) === Number(idSpecialities)
+        ) || null,
+    [specialisOptions, idSpecialities]
+    )
 function submitRequestFinalLog() {
     if(dischargeDate == '')
     {
@@ -156,49 +222,6 @@ function submitRequestFinalLog() {
       });
   }
 //end dari hospital portal
-
-
-    const location = useLocation();
-    const queryParams = new URLSearchParams(location.search);
-
-    const navigate = useNavigate();
-    const { themeStretch } = useSettings();
-    const [requestLog, setRequestLog] = useState<DetailFinalLogType>();
-    const [isReversal, setIsReversal] = useState(false);
-    const [submitLoading, setSubmitLoading] = useState(false);
-
-    const defaultValues: any = {nominal : 0};
-    const validationSchema = Yup.object().shape({nominal: Yup.number().typeError('Nominal harus berupa angka').required('Nominal harus diisi')})
-
-    const methods = useForm<any>({
-        resolver: yupResolver(validationSchema),
-        defaultValues
-    });
-
-    const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods;
-
-    const onSubmit = async (data: any) => {
-        setSubmitLoading(true);
-        const formData = makeFormData({
-            request_logs_id: id,
-            approval_files: fileApprovals,
-            nominal: data.nominal,
-        });
-        axios
-            .post(`/customer-service/request/${id}/approval_files`, formData)
-            .then((response) => {
-            enqueueSnackbar('Berhasil membuat data', { variant: 'success' });
-
-            window.location.reload()
-            })
-            .catch(({ response }) => {
-            enqueueSnackbar('Something Went Wrong', { variant: 'error' });
-            })
-            .then(() => {
-            setSubmitLoading(false);
-            });
-    }
-
     const updateApproval = async () => {
         setSubmitLoading(true);
         axios
@@ -530,17 +553,17 @@ function submitRequestFinalLog() {
                             <Stack spacing={2} sx={{ flex: 1 }}>
                             <Typography variant="subtitle1">Tipe Service </Typography>
                             <Autocomplete
-                                id="service_type"
                                 options={serviceOptions}
-                                getOptionLabel={(option) => option.label || ""}
-                                value={serviceOptions.find((opt) => opt.value == serviceCode) || null}
-                                onChange={(event, newValue) => {
-                                setServiceCode(newValue?.value || "");
-                                }}
+                                value={selectedService}
+                                getOptionLabel={(o) => o.label}
+                                isOptionEqualToValue={(o, v) => o.value === v.value}
+                                onChange={(_, v) => setServiceCode(v?.value ?? '')}
                                 renderInput={(params) => (
-                                <TextField {...params} label='Tipe Service' fullWidth />
+                                    <TextField {...params} label="Tipe Service" fullWidth />
                                 )}
-                            />
+                                />
+
+
                             <FormHelperText style={{ color: "red" }}></FormHelperText>
                             </Stack>
                         </Stack>