Merge branch 'feature/generate-log' into staging

frontend/dashboard/src/pages/Corporates/Member/List.tsx

@@ -46,6 +46,7 @@ import { Member } from '../../../@types/member';
 import BasePagination from '../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
 import { LoadingButton } from '@mui/lab';
+import DialogLog from './sections/DialogLog';
 
 export default function CorporatePlanList() {
   const { themeStretch } = useSettings();
@@ -198,19 +199,17 @@ export default function CorporatePlanList() {
         enqueueSnackbar('No File Selected', { variant: 'warning' });
       }
     };
-    
 
-    const handleGetTemplate = (type :string) => {
-      axios.get('corporates/import-document-example/' + type)
-        .then((response) => {
-          const link = document.createElement('a');
-          link.href = response.data.data.file_url;
-          link.setAttribute('download', response.data.data.file_name);
-          document.body.appendChild(link);
-          link.click();
-          handleClose();
-        })
-    }
+    const handleGetTemplate = (type: string) => {
+      axios.get('corporates/import-document-example/' + type).then((response) => {
+        const link = document.createElement('a');
+        link.href = response.data.data.file_url;
+        link.setAttribute('download', response.data.data.file_name);
+        document.body.appendChild(link);
+        link.click();
+        handleClose();
+      });
+    };
 
     return (
       <div>
@@ -248,7 +247,13 @@ export default function CorporatePlanList() {
               }}
             >
               <MenuItem onClick={handleImportButton}>Import</MenuItem>
-              <MenuItem onClick={() => {handleGetTemplate('member')}}>Download Template</MenuItem>
+              <MenuItem
+                onClick={() => {
+                  handleGetTemplate('member');
+                }}
+              >
+                Download Template
+              </MenuItem>
             </Menu>
           </Stack>
         )}
@@ -329,6 +334,15 @@ export default function CorporatePlanList() {
     const { row } = props;
     const [open, setOpen] = React.useState(false);
     const [loadingLog, setLoadingLog] = React.useState(false);
+    const [dialogLogOpen, setDialogLogOpen] = React.useState(false);
+
+    // useEffect(function () {
+    //   if (row.full_name == 'Pajri') {
+    //     setDialogLogOpen(true);
+    //     console.log('fuck');
+    //   }
+    // }, []);
+
     const handleActivate = (model: any, status: string) => {
       axios
         .put(`/members/${row.id}/activation`, {
@@ -355,33 +369,7 @@ export default function CorporatePlanList() {
           );
         });
     };
-
-    const handleDownloadLog = (row: ReturnType<typeof createData>) => {
-      setLoadingLog(true);
-      axios.get(`generate-log/${row.id}`, {
-        responseType: 'blob'
-      })
-        .then((response) => {
-          window.open(URL.createObjectURL(response.data));
-          // const content = response.headers['content-type'];
-          // download(response.data, file.file_name, content);
-          // const link = document.createElement('a');
-          // console.log(response.data);
-          // link.href = response.data.data.file_url;
-          // link.setAttribute('download', response.data.data.file_name);
-          // document.body.appendChild(link);
-          // link.click();
-          setLoadingLog(false);
-        })
-        // .then((blobFile) => {
-        //   new File([blobFile], 'asdads.pdf', { type: blobFile.type })
-        //   setLoadingLog(false);
-        // })
-        .catch((response) => {
-          enqueueSnackbar(response.message, {variant: 'error'})
-          setLoadingLog(false);
-        })
-    }
+    
     return (
       <React.Fragment>
         <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
@@ -546,31 +534,29 @@ export default function CorporatePlanList() {
                 </Grid>
 
                 <Grid>
-                <LoadingButton
-                  id="upload-button"
-                  variant="outlined"
-                  startIcon={<InsertDriveFileIcon />}
-                  // sx={{ p: 1.8 }}
-                  onClick={() => {handleDownloadLog(row)}}
-                  loading={loadingLog}
-                >
-                  Download LOG
-                </LoadingButton>
+                  <LoadingButton
+                    id="upload-button"
+                    variant="outlined"
+                    startIcon={<InsertDriveFileIcon />}
+                    // sx={{ p: 1.8 }}
+                    // onClick={() => {handleDownloadLog(row)}}
+                    onClick={() => {
+                      setDialogLogOpen(true);
+                    }}
+                    loading={loadingLog}
+                  >
+                    Download LOG
+                  </LoadingButton>
                 </Grid>
 
-                {/* <Typography sx={{ fontWeight: '600', mb: 1, mt: 2 }}>Sub Corporate</Typography>
-                <Grid container>
-                  <Grid item xs={12}>
-                    <Grid container>
-                      <Grid item xs={6}>
-                        Sub Corporates (asdasdasdasd)
-                      </Grid>
-                      <Grid item xs={6}>
-                        : qweqweqweqwe
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                </Grid> */}
+                <DialogLog
+                  title={{
+                    name: `Generate LOG - ${row.full_name}`,
+                  }}
+                  openDialog={dialogLogOpen}
+                  setOpenDialog={setDialogLogOpen}
+                  data={{ member: row }}
+                ></DialogLog>
               </Box>
             </Collapse>
           </TableCell>

frontend/dashboard/src/pages/Corporates/Member/sections/DialogLog.tsx

@@ -0,0 +1,203 @@
+// react
+import { ReactElement, useEffect, useState } from 'react';
+// mui
+import {
+  Card,
+  Checkbox,
+  Divider,
+  Grid,
+  Input,
+  Link,
+  Stack,
+  Table,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Typography,
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+// Component
+import MuiDialog from '@/components/MuiDialog';
+import { Box } from '@mui/material';
+import { TextField } from '@mui/material';
+import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { fPostFormat } from '@/utils/formatTime';
+import { LoadingButton } from '@mui/lab';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import axios from '@/utils/axios';
+import { enqueueSnackbar } from 'notistack';
+
+type DataContent = {
+  info: string;
+  date: string;
+  time: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent[];
+};
+
+const ItemNotificationStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(1),
+  borderRadius: 0.5,
+  color: 'black',
+}));
+
+const DialogLog = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  const [openDialogClaim, setOpenDialogClaim] = useState(false);
+  const [dialogTitleClaim, setDialogTitleClaim] = useState('');
+  const [dateOfAdmission, setDateOfAdmission] = useState(new Date());
+  const [checkedBenefitIds, setCheckedBenefitIds] = useState([]);
+  const [benefitIds, setBenefitIds] = useState([]);
+  const [loadingLog, setLoadingLog] = useState(false);
+
+  useEffect(() => {
+    setBenefitIds(data.member.current_plan?.benefits.map((benefit) => benefit.id))
+    setCheckedBenefitIds(benefitIds)
+    console.log('Check All', benefitIds, 'X', data.member.current_plan?.benefits.map((benefit) => benefit.id))
+  }, [])
+
+  const clickHandler = () => {
+    setDialogTitleClaim('Claim Details');
+    setOpenDialogClaim(true);
+  };
+
+  const handleCheckAll = (event) => {
+    if (event.target.checked) {
+      setCheckedBenefitIds(benefitIds)
+    } else {
+      setCheckedBenefitIds([])
+    }
+  }
+
+  const handleCheckChange = (event, benefit) => {
+    if ( event.target.checked ) {
+      setCheckedBenefitIds([...checkedBenefitIds, benefit.id])
+    } else {
+      // setCheckedBenefitIds([])
+      setCheckedBenefitIds(checkedBenefitIds.filter((benefitId) => benefitId !== benefit.id))
+    }
+  }
+
+  const handleDownloadLog = (row) => {
+    setLoadingLog(true);
+      axios
+        .post(`generate-log/${row.id}`, {
+          date_of_admission : dateOfAdmission,
+          benefit_ids : checkedBenefitIds
+        }, {
+          responseType: 'blob',
+        })
+        .then((response) => {
+          window.open(URL.createObjectURL(response.data));
+          setLoadingLog(false);
+          setOpenDialog(false);
+        })
+        .catch((response) => {
+          enqueueSnackbar(response.message, { variant: 'error' });
+          setLoadingLog(false);
+        });
+  }
+
+  const getContent = () => (
+    <Stack sx={{ marginTop: 2 }}>
+      <ItemNotificationStyle>
+        <Stack>
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DesktopDatePicker
+                  inputFormat="dd/MM/Y"
+                  value={dateOfAdmission}
+                  onChange={(value) => {
+                    setDateOfAdmission(new Date(fPostFormat(value)));
+                    // console.log('value')
+                  }}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      fullWidth
+                      label="Date of Admission"
+                      placeholder="dd/mm/yyyy"
+                    />
+                  )}
+                />
+              </LocalizationProvider>
+            </Grid>
+            <Grid item xs={12} sx={{marginTop: 2}}>
+              <Stack direction="row" alignItems="center" justifyContent={'space-between'}>
+                <Typography variant="body1" fontWeight={800}>List Of Benefit</Typography>
+                
+                <Stack direction="row" alignItems="center">
+                  <Typography>All</Typography>
+                <Checkbox onChange={handleCheckAll} checked={benefitIds.length == checkedBenefitIds.length}/>
+                </Stack>
+              </Stack>
+            </Grid>
+            <Grid item xs={12}>              
+              <Stack divider={<Divider flexItem />}>
+                { data.member.current_plan?.benefits && (
+                  data.member.current_plan?.benefits.map((benefit, index) => (
+                    <Stack direction="row" alignItems="center" key={index}>
+                      <Box sx={{ width: '100%' }}>
+                        <Typography>{benefit.code} {benefit.description ? ` - ${benefit.description} ` : ''}</Typography>
+                      </Box>
+                      <Checkbox checked={checkedBenefitIds.includes(benefit.id)} onClick={(event) => {handleCheckChange(event, benefit)} } />
+                    </Stack>
+                  ))
+                )}
+              </Stack>
+              {/* <TableContainer>
+              <Table>
+              <TableRow>
+                <TableCell>
+                  ASD
+                </TableCell>
+                <TableCell>
+                  ASD
+                </TableCell>
+              </TableRow>
+              </Table>
+            </TableContainer> */}
+            </Grid>
+            <Grid item xs={12}>
+              
+            <LoadingButton
+                    id="upload-button"
+                    variant="outlined"
+                    fullWidth
+                    startIcon={<InsertDriveFileIcon />}
+                    onClick={() => {handleDownloadLog(data.member)}}
+                    loading={loadingLog}
+                  >
+                    Download LOG
+                  </LoadingButton>
+            </Grid>
+          </Grid>
+        </Stack>
+      </ItemNotificationStyle>
+    </Stack>
+  );
+
+  return (
+    <>
+      <MuiDialog
+        title={title}
+        openDialog={openDialog}
+        setOpenDialog={setOpenDialog}
+        content={getContent()}
+      />
+    </>
+  );
+};
+
+export default DialogLog;