tambah kolom provider di final log dan request log

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

@@ -1,8 +1,8 @@
 import MuiDialog from "@/components/MuiDialog";
-import { Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
+import { Button, Card, Checkbox, DialogActions, Grid, TextField, Typography } from "@mui/material";
 import { Paper } from "@mui/material";
 import { Stack } from '@mui/material';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { DetailFinalLogType } from "../Model/Types";
 import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
 import axios from "@/utils/axios";
@@ -21,23 +21,51 @@ type DialogConfirmationType = {
 export default function DialogConfirmation({requestLog, setOpenDialog, openDialog, approve, onSubmit} : DialogConfirmationType ) {
 
     const navigate = useNavigate();
+    const [formData, setFormData] = useState({
+        id: requestLog?.id,
+        status: approve || '',
+        catatan: '',
+    });
+
+    useEffect(() => {
+        // Update formData setiap kali approve berubah
+        setFormData(prevData => ({
+          ...prevData,
+          status: approve || '',
+        }));
+    }, [approve]);
+
+    const handleChange = (field, value) => {
+        setFormData((prevData) => ({
+            ...prevData,
+            [field]: value,
+        }));
+
+    };
+
+    const handleApprove = () => {
+        setFormData((prevData) => ({
+            ...prevData,
+            status: approve,
+        }));
+        handleSubmit();
+    };
+    
+
     const handleSubmit = () => {
-        const formData = {
-            status : approve,
-            id: requestLog?.id
-        }
         axios
             .post(`customer-service/request/final-log`, formData)
             .then((response) => {
-                enqueueSnackbar('Verification Final LOG Success', { variant: 'success' });
+                enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
                 setOpenDialog(false);
-                navigate('/custormer-service/final-log')
+                navigate('/case_management/inpatient_monitoring')
             })
             .catch(({ response }) => {
                 enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
             });
     }
 
+
     const style1 = {
         color: '#919EAB',
         width: '30%'
@@ -48,7 +76,9 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
     const marginBottom1 = {
         marginBottom: 1,
     }
-
+    const marginBottom2 = {
+        marginBottom: 2,
+    }
     const handleCloseDialog = () => {
         setOpenDialog(false);
     }
@@ -83,14 +113,27 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
                             <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
                         </Stack>
                     </Card>
+
+                    <Card sx={{padding:2, marginTop:2}}  >
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
+                            <TextField
+                                label="Catatan"
+                                variant="outlined"
+                                fullWidth
+                                value={formData.catatan}
+                                onChange={(e) => handleChange('catatan', e.target.value)}
+                            />
+                        </Stack>
+                    </Card>
                 </Grid>
                 <DialogActions>
                     <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
 
                     {approve == 'approved' ? (
-                        <Button color="primary"  variant="contained" onClick={handleSubmit}>Approve</Button>
+                        <Button color="primary"  variant="contained" onClick={() => handleApprove()}>Approve</Button>
                     ) : (
-                        <Button color="error" variant="contained" onClick={handleSubmit}>Decline</Button>
+                        <Button color="error" variant="contained" onClick={() => handleApprove()}>Decline</Button>
                     ) }
                     
                 </DialogActions>