Update

frontend/hospital-portal/src/sections/dashboard/DialogFinalLog.tsx

@@ -2,13 +2,13 @@ import { styled } from '@mui/material/styles';
 import Iconify from '@/components/Iconify';
 import { fCurrency } from '@/utils/formatNumber';
 import { LoadingButton } from '@mui/lab';
-import { Avatar, Button, Divider, LinearProgress, linearProgressClasses, ButtonBase, Box } from '@mui/material';
+import { Avatar, Button, Divider, LinearProgress, linearProgressClasses, ButtonBase, Box, Autocomplete, FormHelperText } from '@mui/material';
 import { Card } from '@mui/material';
 import { Stack, Typography } from '@mui/material';
 import { fPostFormat } from '@/utils/formatTime';
 import axios from '@/utils/axios';
 import { enqueueSnackbar } from 'notistack';
-import { useRef, useState, useContext } from 'react';
+import { useRef, useState, useContext, useEffect } from 'react';
 import { makeFormData } from '@/utils/jsonToFormData';
 import { format } from 'date-fns';
 import { LanguageContext } from '@/contexts/LanguageContext';
@@ -17,10 +17,10 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import TextField from '@mui/material/TextField';
 
 export default function DialogFinalLog({ member, getData, onClose, handleSubmitSuccess }: any) {
-    const { localeData }: any =  useContext(LanguageContext);
-    //Submission date
-    const [dischargeDate, setDischargeDate] = useState<string>(format(new Date(), "yyyy MMM d HH:mm:ss"));
-
+  const { localeData }: any =  useContext(LanguageContext);
+  //Submission date
+  const [dischargeDate, setDischargeDate] = useState<string>(format(new Date(), "yyyy MMM d HH:mm:ss"));
+  const [serviceCode, setServiceCode] = useState<string>('');
   // ----------------------------------------------------------------------
   // Files Diagnosa
 
@@ -101,6 +101,7 @@ export default function DialogFinalLog({ member, getData, onClose, handleSubmitS
       diagnosa_files: fileDiagnosas,
       kondisi_files: fileKondisis,
       discharge_date: fPostFormat(dischargeDate, 'yyyy-MM-dd HH:mm:ss'),
+      service_code: serviceCode,
     });
     axios
       .post('/request-final-log', formData)
@@ -117,6 +118,22 @@ export default function DialogFinalLog({ member, getData, onClose, handleSubmitS
       });
   }
 
+    const [serviceOptions, setServiceOptions] = useState([
+        { value: '-', label: '-' }
+    ]);
+
+    useEffect(() => {
+      axios.get('service-member/'+member.member_id)
+        .then((response) => {
+          setServiceOptions(response.data);
+      }).catch((error) => {
+        console.error('Error fetching ICD options:', error);
+      });
+      
+    }, []);
+
+    console.log(serviceOptions, member, 'test')
+
   return (
     <Stack>
       <Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2, marginTop: 2 }} spacing={2}>
@@ -324,23 +341,44 @@ export default function DialogFinalLog({ member, getData, onClose, handleSubmitS
         </Stack>
       </Stack>
 
-      <Stack direction="row" spacing={2}>
-            <Stack spacing={2} sx={{ width: '100%' }}>
-                <Typography variant='subtitle1'>{localeData.txtDischargeDate} *</Typography>
-                <LocalizationProvider dateAdapter={AdapterDateFns}>
-                    <DatePicker
-                        label={localeData.txtDischargeDate}
-                        value={dischargeDate}
-                        onChange={(newValue:any) => {
-                          setDischargeDate(  (newValue));
-                        }}
-                        inputFormat="dd-MM-yyyy HH:mm"
-                        renderInput={(params) => <TextField sx={{width:'40%'}} {...params} required/>}
-                    />
-                </LocalizationProvider>
-            </Stack>
+      <Stack direction="row" spacing={2} sx={{ width: '100%' }}>
+        {/* Kolom Tanggal Discharge */}
+        <Stack spacing={2} sx={{ flex: 1 }}>
+          <Typography variant="subtitle1">{localeData.txtDischargeDate} *</Typography>
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <DatePicker
+              label={localeData.txtDischargeDate}
+              value={dischargeDate}
+              onChange={(newValue: any) => {
+                setDischargeDate(newValue);
+              }}
+              inputFormat="dd-MM-yyyy HH:mm"
+              renderInput={(params) => <TextField {...params} fullWidth required />}
+            />
+          </LocalizationProvider>
         </Stack>
 
+        {/* Kolom Service Type */}
+        <Stack spacing={2} sx={{ flex: 1 }}>
+          <Typography variant="subtitle1">{localeData.txtDialogMember1} *</Typography>
+          <Autocomplete
+            id="service_type"
+            options={serviceOptions}
+            getOptionLabel={(option) => option.label || ""}
+            value={serviceOptions.find((opt) => opt.value == member.service_code) || null}
+            onChange={(event, newValue) => {
+              setServiceCode(newValue?.value || "");
+            }}
+            renderInput={(params) => (
+              <TextField {...params} label={localeData.txtDialogMember1} fullWidth />
+            )}
+          />
+          <FormHelperText style={{ color: "red" }}></FormHelperText>
+        </Stack>
+      </Stack>
+
+      
+
       <LoadingButton
         variant="contained"
         sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}