Fitur edit di final LOG

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

@@ -1,10 +1,10 @@
 import MuiDialog from "@/components/MuiDialog";
-import { Button, Card, Checkbox, DialogActions, Grid, TextField, Typography } from "@mui/material";
+import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, Typography } from "@mui/material";
 import { Paper } from "@mui/material";
 import { Stack } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { DetailFinalLogType } from "../Model/Types";
-import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import { fDateOnly, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
 import axios from "@/utils/axios";
 import { enqueueSnackbar } from "notistack";
 import { useNavigate } from "react-router";
@@ -22,11 +22,29 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
 
     const navigate = useNavigate();
     const [formData, setFormData] = useState({
+        discharge_date: requestLog?.discharge_date,
         id: requestLog?.id,
         status: approve || '',
         catatan: '',
+        icdCodes: requestLog?.diagnosis.length ? requestLog.diagnosis.map(diagnosis => ({ value: diagnosis.id, label: diagnosis.name })) : []
     });
+    
+    const [icdOptions, setIcdOptions] = useState([
+        { value: '-', label: '-' }
+    ]);
 
+    useEffect(() => {
+        // Ambil data dari API dan atur opsi ICD
+        axios.get('diagnosis')
+            .then((response) => {
+                setIcdOptions(response.data.data);
+            })
+            .catch((error) => {
+                console.error('Error fetching ICD options:', error);
+            });
+    }, []); // useEffect dijalankan hanya sekali saat komponen dimount
+    
+   
     useEffect(() => {
         // Update formData setiap kali approve berubah
         setFormData(prevData => ({
@@ -87,6 +105,8 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
         setOpenDialog(false);
     }
 
+   
+
     const getContent = () => (
         <Stack spacing={1} marginTop={2}>
             <Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this final log ?</Typography>
@@ -119,6 +139,17 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
                     </Card>
 
                     <Card sx={{padding:2, marginTop:2}}  >
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
+                            <TextField
+                                label="Discharge Date"
+                                variant="outlined"
+                                fullWidth
+                                type="date"
+                                value={formData.discharge_date ? fDateOnly(formData.discharge_date) : ''}
+                                onChange={(e) => handleChange('discharge_date', e.target.value)}
+                            />
+                        </Stack>
                         <Stack direction='row' spacing={2} sx={marginBottom2}>
                             <Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
                             <TextField
@@ -129,6 +160,24 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
                                 onChange={(e) => handleChange('catatan', e.target.value)}
                             />
                         </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
+                            <Autocomplete
+                                multiple
+                                options={icdOptions}
+                                getOptionLabel={(option) => option.label}
+                                fullWidth
+                                value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
+                                onChange={(e, newValues) => handleChange('icdCodes', newValues.map((value) => value.value))}                    
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        label="Diagnosis ICD - X"
+                                        variant="outlined"
+                                    />
+                                )}
+                            />
+                        </Stack>
                     </Card>
                 </Grid>
                 <DialogActions>