[Improvement] add fitur delete request log

2024-01-26 11:07:13 +07:00
parent 908a8aff0a
commit 74f87e150a
8 changed files with 351 additions and 109 deletions
--- a/frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/List.tsx
+++ b/frontend/dashboard/src/pages/CaseManagement/InpatientMonitoring/List.tsx
@@ -50,6 +50,8 @@ import TableMoreMenu from '@/components/table/TableMoreMenu';
 import { Import } from '@/@types/claims';

 import { FinalLogType } from '../../CustomerService/FinalLog/Model/Types';
+import DialogDeleteFinalLOG from '@/pages/CustomerService/FinalLog/Components/DialogDeleteFinalLOG';
+import { Delete } from '@mui/icons-material';
 // import LoadingButton from '@/theme/overrides/LoadingButton';

 export default function List() {
@@ -301,17 +303,9 @@ export default function List() {
    setSearchParams(filter);
  };

-  const handleApprove = (claimRequest) => {
-    axios
-      .post(`claim-requests/${claimRequest.id}/approve`)
-      .then((response) => {
-        enqueueSnackbar('Success Approve', { variant: 'success' });
-        loadDataTableData();
-      })
-      .catch(({ response }) => {
-        enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
-      });
-  };
+  // Handel Delete Final LOG
+  const [idFinalLog, setidFinalLog] = useState<number>();
+  const [openDialogDeleteFinalLog, setDialogDeleteFinalLog] = useState(false)

  useEffect(() => {
    loadDataTableData();
@@ -379,6 +373,14 @@ export default function List() {
                  <FindInPageOutlinedIcon />
                  Detail
                </MenuItem>
+                <MenuItem onClick={() => {
+                    setidFinalLog(row.id)
+                    setDialogDeleteFinalLog(true)
+                }}
+                >
+                    <Delete color='error'/>
+                    Delete
+                </MenuItem>
              </>
            } />
          </TableCell>
@@ -534,30 +536,6 @@ export default function List() {
      </Table>
    );
  }
-
-  // ---------------------------------------------------------
-  // Dialog Detail Claim Request
-  const [openDialogDetailClaim, setOpenDialogDetailClaim] = useState(false);
-  const [loadingClaimDetail, setLoadingClaimDetail] = useState(true);
-  const [currentClaim, setCurrentClaim] = useState(null);
-
-  function handleShowClaim(claimRequest) {
-    setLoadingClaimDetail(true);
-    setOpenDialogDetailClaim(true);
-
-    axios
-      .get(`/claim-requests/${claimRequest.id}`)
-      .then(({ data }) => {
-        setCurrentClaim(data.data);
-        setLoadingClaimDetail(false);
-      })
-      .catch((err) => {
-        enqueueSnackbar(err.message, { variant: 'error' });
-      });
-  }
-
-  function handleDownloadLog() {}
-
  return (
    <Grid container>
      <Grid item sm={12}>
@@ -574,12 +552,12 @@ export default function List() {
        />
      </Grid>
      <Grid item sm={12}>
-        <DialogDetailClaim
-          openDialog={openDialogDetailClaim}
-          setOpenDialog={setOpenDialogDetailClaim}
-          title={{ name: 'Claim Request Detail' }}
-          data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
-        ></DialogDetailClaim>
+        {/* Dialog Delete */}
+        <DialogDeleteFinalLOG 
+              id={idFinalLog}
+              openDialog={openDialogDeleteFinalLog}
+              setOpenDialog={setDialogDeleteFinalLog}
+          />
      </Grid>
    </Grid>
  );
--- a/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogDeleteFinalLOG.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogDeleteFinalLOG.tsx
@@ -0,0 +1,132 @@
+import MuiDialog from "@/components/MuiDialog";
+import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
+import { Paper } from "@mui/material";
+import { Stack } from '@mui/material';
+import React, { useState } from 'react';
+import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router";
+import { TextField } from "@mui/material";
+
+
+type DialogDeleteType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    id: number|undefined; 
+}
+
+export default function DialogDeleteFinalLOG({id, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom2 = {
+        marginBottom: 2,
+    }
+
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+        resetForm();
+    }
+
+    const [isReasonSelected, setIsReasonSelected] = useState(false);
+   
+    const reasons = [
+        { value: 'agreement', label: 'Agreement changed' },
+        { value: 'endorsement', label: 'Endorsement' },
+        { value: 'renewal', label: 'Renewal' },
+        { value: 'wrong_setting', label: 'Wrong Setting' },
+        // Add more options as needed
+    ];
+    const [formData, setFormData] = useState({
+        reason: null
+    });
+
+    const resetForm = () => {
+        setFormData({
+            reason: null 
+        });
+    };
+
+    const handleChange = (field, value) => {
+        setFormData((prevData) => ({
+            ...prevData,
+            [field]: value,
+        }));
+        if (field === 'reason') {
+            setIsReasonSelected(!!value);
+        }
+
+    };
+
+    const handleSubmit = () => {
+        if (isReasonSelected && formData.reason !== '') {
+            axios
+            .put(`customer-service/request/final_log/${id}`, formData)
+            .then((response) => {
+                enqueueSnackbar('Request LOG has Deleted', { variant: 'success' });
+                setOpenDialog(false);
+                window.location.reload()
+            })
+            .catch(({ response }) => {
+                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+            });
+        } else {
+            setIsReasonSelected(false);
+            alert('Silakan pilih alasan sebelum menghapus data.');
+        }
+        
+    }
+
+
+    const getContent = () => (
+        <Stack spacing={1} marginTop={2}>
+            <Typography variant="subtitle2">Are you sure to delete this detail LOG ?</Typography>
+            <Grid item xs={12} md={12} marginTop={4}>
+                <Card sx={{padding:2, marginTop:2}}  >
+                    <Stack direction='row' spacing={2} sx={marginBottom2}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
+                        <Autocomplete
+                            options={reasons}
+                            getOptionLabel={(option) => option.label}
+                            fullWidth
+                            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
+                                    {...params}
+                                    label="Reason"
+                                    variant="outlined"
+                                    required
+                                    error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
+                                    helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
+
+                                />
+                            )}
+                        />
+                    </Stack>
+                </Card>
+            </Grid>
+            <DialogActions>
+                <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+                <Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
+            </DialogActions>
+        </Stack>
+    );
+
+
+    return (
+        <MuiDialog
+          title={{name: "Delete Final LOG"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          content={getContent()}
+          maxWidth="xs"
+        />
+      );
+}
--- a/frontend/dashboard/src/pages/CustomerService/FinalLog/List.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/FinalLog/List.tsx
@@ -50,6 +50,8 @@ import TableMoreMenu from '@/components/table/TableMoreMenu';
 import { Import } from '@/@types/claims';

 import { FinalLogType } from '../FinalLog/Model/Types';
+import DialogDeleteFinalLOG from './Components/DialogDeleteFinalLOG';
+import { Delete } from '@mui/icons-material';
 // import LoadingButton from '@/theme/overrides/LoadingButton';

 export default function List() {
@@ -301,17 +303,9 @@ export default function List() {
    setSearchParams(filter);
  };

-  const handleApprove = (claimRequest) => {
-    axios
-      .post(`claim-requests/${claimRequest.id}/approve`)
-      .then((response) => {
-        enqueueSnackbar('Success Approve', { variant: 'success' });
-        loadDataTableData();
-      })
-      .catch(({ response }) => {
-        enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
-      });
-  };
+  // Handel Delete Final LOG
+  const [idFinalLog, setidFinalLog] = useState<number>();
+  const [openDialogDeleteFinalLog, setDialogDeleteFinalLog] = useState(false)

  useEffect(() => {
    loadDataTableData();
@@ -379,6 +373,14 @@ export default function List() {
                  <FindInPageOutlinedIcon />
                  Detail
                </MenuItem>
+                <MenuItem onClick={() => {
+                    setidFinalLog(row.id)
+                    setDialogDeleteFinalLog(true)
+                }}
+                >
+                    <Delete color='error'/>
+                    Delete
+                </MenuItem>
              </>
            } />
          </TableCell>
@@ -574,12 +576,12 @@ export default function List() {
        />
      </Grid>
      <Grid item sm={12}>
-        <DialogDetailClaim
-          openDialog={openDialogDetailClaim}
-          setOpenDialog={setOpenDialogDetailClaim}
-          title={{ name: 'Claim Request Detail' }}
-          data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
-        ></DialogDetailClaim>
+        {/* Dialog Delete */}
+        <DialogDeleteFinalLOG 
+              id={idFinalLog}
+              openDialog={openDialogDeleteFinalLog}
+              setOpenDialog={setDialogDeleteFinalLog}
+          />
      </Grid>
    </Grid>
  );
--- a/frontend/dashboard/src/pages/CustomerService/Request/Components/DialogDeleteRequestLOG.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/Request/Components/DialogDeleteRequestLOG.tsx
@@ -0,0 +1,132 @@
+import MuiDialog from "@/components/MuiDialog";
+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 { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router";
+import { Autocomplete } from "@mui/material";
+
+
+type DialogDeleteType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    id: number|undefined; 
+}
+
+export default function DialogDeleteRequestLOG({id, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom2 = {
+        marginBottom: 2,
+    }
+
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+        resetForm();
+    }
+    const [isReasonSelected, setIsReasonSelected] = useState(false);
+
+    const reasons = [
+        { value: 'agreement', label: 'Agreement changed' },
+        { value: 'endorsement', label: 'Endorsement' },
+        { value: 'renewal', label: 'Renewal' },
+        { value: 'wrong_setting', label: 'Wrong Setting' },
+        // Add more options as needed
+    ];
+    const [formData, setFormData] = useState({
+        reason: null
+    });
+
+    const resetForm = () => {
+        setFormData({
+            reason: null 
+        });
+    };
+
+    const handleChange = (field, value) => {
+        setFormData((prevData) => ({
+            ...prevData,
+            [field]: value,
+        }));
+        if (field === 'reason') {
+            setIsReasonSelected(!!value);
+        }
+
+    };
+
+    const handleSubmit = () => {
+        if (isReasonSelected && formData.reason !== '') {
+            axios
+            .put(`customer-service/request/${id}`, formData)
+            .then((response) => {
+                enqueueSnackbar('Request LOG has Deleted', { variant: 'success' });
+                setOpenDialog(false);
+                window.location.reload()
+            })
+            .catch(({ response }) => {
+                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+            });
+        } else {
+            setIsReasonSelected(false);
+            alert('Silakan pilih alasan sebelum menghapus data.');
+        }
+        
+    }
+
+
+    const getContent = () => (
+        <Stack spacing={1} marginTop={2}>
+            <Typography variant="subtitle2">Are you sure to delete this detail LOG ?</Typography>
+            <Grid item xs={12} md={12} marginTop={4}>
+                <Card sx={{padding:2, marginTop:2}}  >
+                    <Stack direction='row' spacing={2} sx={marginBottom2}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
+                        <Autocomplete
+                            options={reasons}
+                            getOptionLabel={(option) => option.label}
+                            fullWidth
+                            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
+                                    {...params}
+                                    label="Reason"
+                                    variant="outlined"
+                                    required
+                                    error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
+                                    helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
+
+                                />
+                            )}
+                        />
+                    </Stack>
+                </Card>
+            </Grid>
+            
+            <DialogActions>
+                <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+                <Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
+            </DialogActions>
+        </Stack>
+    );
+
+
+    return (
+        <MuiDialog
+          title={{name: "Delete Request LOG"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          content={getContent()}
+          maxWidth="xs"
+        />
+      );
+}
--- a/frontend/dashboard/src/pages/CustomerService/Request/List.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/Request/List.tsx
@@ -55,6 +55,8 @@ import { Import } from '@/@types/claims';
 import { RequestLogType } from '../Request/Model/Types';
 // import SvgIconStyle from '@/components/SvgIconStyle';
 import SvgIconStyle from '../../../components/SvgIconStyle';
+import { Delete } from '@mui/icons-material';
+import DialogDeleteRequestLOG from '../Request/Components/DialogDeleteRequestLOG';
 // import LoadingButton from '@/theme/overrides/LoadingButton';

 export default function List() {
@@ -313,17 +315,9 @@ export default function List() {
    setSearchParams(filter);
  };

-  const handleApprove = (claimRequest) => {
-    axios
-      .post(`claim-requests/${claimRequest.id}/approve`)
-      .then((response) => {
-        enqueueSnackbar('Success Approve', { variant: 'success' });
-        loadDataTableData();
-      })
-      .catch(({ response }) => {
-        enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
-      });
-  };
+  // Handel Delete Request LOG
+  const [idRequestLog, setidRequestLog] = useState<number>();
+  const [openDialogDeleteRequestLog, setDialogDeleteRequestLog] = useState(false)

  useEffect(() => {
    loadDataTableData();
@@ -347,7 +341,7 @@ export default function List() {
    const { row } = props;
    const [open, setOpen] = React.useState(false);
    const [loadingApprove, setLoadingApprove] = React.useState(false);
-
+   
    return (
      <React.Fragment>
        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
@@ -390,6 +384,14 @@ export default function List() {
                  <FindInPageOutlinedIcon />
                  Detail
                </MenuItem>
+                <MenuItem onClick={() => {
+                    setidRequestLog(row.id)
+                    setDialogDeleteRequestLog(true)
+                }}
+                >
+                    <Delete color='error'/>
+                    Delete
+                </MenuItem>

              </>
            } />
@@ -548,28 +550,6 @@ export default function List() {
  }

  // ---------------------------------------------------------
-  // Dialog Detail Claim Request
-  const [openDialogDetailClaim, setOpenDialogDetailClaim] = useState(false);
-  const [loadingClaimDetail, setLoadingClaimDetail] = useState(true);
-  const [currentClaim, setCurrentClaim] = useState(null);
-
-  function handleShowClaim(claimRequest) {
-    setLoadingClaimDetail(true);
-    setOpenDialogDetailClaim(true);
-
-    axios
-      .get(`/claim-requests/${claimRequest.id}`)
-      .then(({ data }) => {
-        setCurrentClaim(data.data);
-        setLoadingClaimDetail(false);
-      })
-      .catch((err) => {
-        enqueueSnackbar(err.message, { variant: 'error' });
-      });
-  }
-
-  function handleDownloadLog() {}
-
  return (
    <Grid container>
      <Grid item sm={12}>
@@ -586,12 +566,12 @@ export default function List() {
        />
      </Grid>
      <Grid item sm={12}>
-        <DialogDetailClaim
-          openDialog={openDialogDetailClaim}
-          setOpenDialog={setOpenDialogDetailClaim}
-          title={{ name: 'Claim Request Detail' }}
-          data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
-        ></DialogDetailClaim>
+         {/* Dialog Delete */}
+         <DialogDeleteRequestLOG 
+              id={idRequestLog}
+              openDialog={openDialogDeleteRequestLog}
+              setOpenDialog={setDialogDeleteRequestLog}
+          />
      </Grid>
    </Grid>
  );