Merge branch 'staging' of https://dev.sismedika.online/febio/aso into staging

2024-03-05 11:37:48 +07:00
parent e358623716 e3f08a44f3
commit 339eec9727
9 changed files with 399 additions and 29 deletions
--- a/frontend/dashboard/src/pages/Claims/List.tsx
+++ b/frontend/dashboard/src/pages/Claims/List.tsx
@@ -291,9 +291,9 @@ const dummyServices = [
      },
    ];

-    const handleClick = () => {
+    // const handleClick = () => {

-    }
+    // }

  

@@ -393,6 +393,105 @@ const dummyServices = [
  function send_bulk(id) {
    return axios.post(`claims/${id}/${approve}`, { reasonDecline: reasonDecline });
  }
+
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const createMenu = Boolean(anchorEl);
+  const importHospital = useRef<HTMLInputElement>(null);
+  const [currentImportFileName, setCurrentImportFileName] = useState(null);
+  const [importLoading, setImportLoading] = useState(false);
+  const [importResult, setImportResult] = useState(null);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+      setAnchorEl(null);
+  };
+  const handleImportButton = () => {
+      if (importHospital?.current) {
+        handleClose();
+      importHospital.current ? importHospital.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected');
+      }
+  };
+  const handleCancelImportButton = () => {
+    if(importHospital.current)
+    {
+        importHospital.current.value = '';
+        importHospital.current.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+};
+  const handleImportChange = (event: any) => {
+      if (event.target.files[0]) {
+      setCurrentImportFileName(event.target.files[0].name);
+      } else {
+      setCurrentImportFileName(null);
+      }
+  };
+  const handleUpload = () => {
+    if(importHospital.current && importHospital.current.files)
+    {
+        if (importHospital.current?.files.length) {
+            const formData = new FormData();
+            formData.append('file', importHospital.current?.files[0]);
+            setImportLoading(true);
+            axios
+                .post('claims/import', formData)
+                .then((response) => {
+                handleCancelImportButton();
+                loadDataTableData();
+                setImportResult(response.data);
+                setImportLoading(false);
+                enqueueSnackbar('Success Import Hospitals', { variant: 'success' });
+                })
+                .catch((response) => {
+                enqueueSnackbar(
+                    'Looks like something went wrong. Please check your data and try again. ' +
+                    response.message,
+                    { variant: 'error' }
+                );
+                setImportLoading(false);
+                });
+        } else {
+            enqueueSnackbar('No File Selected', { variant: 'warning' });
+        }
+    }
+};
+  const handleGetTemplate = () => {
+    axios.get('claims/download-template').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 handleExportReportFiled = async () => {
+    
+  await axios
+    .post('claims/exportFiled', { params: importResult?.data.failed_rows })
+    .then((res) => {
+      enqueueSnackbar('Data berhasil di Export', {
+        variant: 'success',
+        anchorOrigin: { horizontal: 'right', vertical: 'top' },
+      });
+      setIsLoading(false)
+
+      document.location.href = res.data.data.file_url;
+    })
+    .catch((err) =>
+      enqueueSnackbar('Data Gagal di Export', {
+        variant: 'error',
+        anchorOrigin: { horizontal: 'right', vertical: 'top' },
+      })
+      
+    );
+};
  

  // useEffect(() => {
@@ -690,6 +789,16 @@ const dummyServices = [
        <Grid item xs={12} md={12} lg={12}>
        <form style={{ width: '100%' }}>
        <Grid container spacing={1} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <input
+            type="file"
+            id="file"
+            ref={importHospital}
+            style={{ display: 'none' }}
+            onChange={handleImportChange}
+            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+        />
+        {!currentImportFileName && (
+          <>
          <Grid item xs={12} md={3}>
            <TextField
              id="search-input"
@@ -780,13 +889,33 @@ const dummyServices = [
                  variant="outlined"
                  startIcon={<UploadIcon />}
                  sx={{ p: 1.8 }}
-                  // onClick={handleExportReport}
                  loading={isLoadingImport}
+                  onClick={handleClick}
                >
                  <Typography variant="inherit" sx={{ marginLeft: 1 }}>
                    Import
                  </Typography>
                </LoadingButton>
+                <Menu
+                    id="import-button"
+                    anchorEl={anchorEl}
+                    open={createMenu}
+                    onClose={handleClose}
+                    MenuListProps={{
+                    'aria-labelledby': 'basic-button',
+                    }}
+                >
+                    <MenuItem onClick={handleImportButton}>
+                        <Typography variant='body2'>Import</Typography>
+                    </MenuItem>
+                    <MenuItem
+                        onClick={() => {
+                            handleGetTemplate();
+                        }}
+                    >
+                    <Typography variant='body2'> Download Template</Typography>
+                    </MenuItem>
+                </Menu>
              </FormControl>
              <FormControl >
                <LoadingButton
@@ -803,8 +932,59 @@ const dummyServices = [
                </LoadingButton>
              </FormControl>
            </Grid>
+            </>
+          )}
+          {currentImportFileName && (
+            <Grid item xs={12} md={12}>
+            <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+            <ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
+                <Button onClick={handleImportButton} fullWidth>
+                {currentImportFileName ?? 'No File Selected'}
+                </Button>
+                <Button
+                onClick={handleCancelImportButton}
+                size="small"
+                fullWidth={false}
+                sx={{ p: 1.8 }}
+                >
+                  <CancelIcon color="error" />
+                </Button>
+            </ButtonGroup>
+
+            <LoadingButton
+                id="upload-button"
+                variant="outlined"
+                startIcon={<UploadIcon />}
+                sx={{ p: 1.8 }}
+                onClick={handleUpload}
+                loading={importLoading}
+            >
+                Upload
+            </LoadingButton>
+            </Stack>
+            </Grid>
+        )}
+          {importResult && (
+            <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
+            <Box sx={{ color: 'text.secondary' }}>
+                Last Import Result :{' '}
+                <Box sx={{ color: 'success.main', display: 'inline' }}>
+                {importResult.data.total_success_row ?? 0}
+                </Box>{' '}
+                Row Processed,{' '}
+                <Box sx={{ color: 'error.main', display: 'inline' }}>
+                {importResult.data.total_failed_row}
+                </Box>{' '}
+                Failed
+                {/* {importResult.data.failed_rows.map((row, index) => (
+                    <Typography variant='body' key={index} color="error"> [Code={row.code ? row.code : 'Required'}]</Typography>
+                ))} */}
+                &nbsp;<u onClick={handleExportReportFiled} style={{cursor:'pointer'}}>Download Data Filed</u>
+            </Box>
+            </Stack>
+        )}
        </Grid>
-      </form>
+        </form>
        </Grid>
      </Grid>

--- a/frontend/hospital-portal/public/lang/en-US.json
+++ b/frontend/hospital-portal/public/lang/en-US.json
@@ -57,5 +57,7 @@
  "txtCancel": "Cancel",
  "txtDecline": "Decline",
  "txtApprove": "Approve",
-  "txtDialogConfirmation": "Are you sure you want to proceed with this action?"
+  "txtDialogConfirmation": "Are you sure you want to proceed with this action?",
+  "txtStartDate": "Start Date",
+  "txtEndDate": "End Date"
 }
--- a/frontend/hospital-portal/public/lang/id-ID.json
+++ b/frontend/hospital-portal/public/lang/id-ID.json
@@ -57,5 +57,7 @@
  "txtCancel": "Batal",
  "txtDecline": "Tolak",
  "txtApprove": "Terima",
-  "txtDialogConfirmation": "Apakah Anda yakin ingin melanjutkan tindakan ini?"
+  "txtDialogConfirmation": "Apakah Anda yakin ingin melanjutkan tindakan ini?",
+  "txtStartDate": "Tanggal Mulai",
+  "txtEndDate": "Tanggal Akhir"
 }
--- a/frontend/hospital-portal/src/components/Table.tsx
+++ b/frontend/hospital-portal/src/components/Table.tsx
@@ -26,6 +26,10 @@ import {
  linearProgressClasses,
 } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
+
+import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
+
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 /* ---------------------------------- axios --------------------------------- */
 import axios from '../utils/axios';
 /* ---------------------------------- react --------------------------------- */
@@ -297,7 +301,7 @@ export default function Table<T>({
            {/* Start date */}
            {filterStartDate && filterStartDate.useFilter ? (
              <Grid item xs={12} lg={2} xl={2}>
-              <form onChange={(event) => filterStartDate.handleStartDateChange(event)}>
+              {/* <form onChange={(event) => filterStartDate.handleStartDateChange(event)}>
                <TextField
                  id="date-input"
                  type="date"
@@ -309,7 +313,18 @@ export default function Table<T>({
                    shrink: true,
                  }}
                />
-              </form>
+              </form> */}
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DatePicker
+                  label={localeData.txtStartDate}
+                  value={filterStartDate.startDate}
+                  onChange={(newValue:any) => {
+                    filterStartDate.setStartDate(  (newValue));
+                  }}
+                  inputFormat="dd-MM-yyyy"
+                  renderInput={(params) => <TextField sx={{width:'40%'}} {...params} required/>}
+                />
+              </LocalizationProvider>
            </Grid>
            ) : null }

@@ -317,7 +332,7 @@ export default function Table<T>({

            {filterEndDate && filterEndDate.useFilter ? (
              <Grid item xs={12} lg={2} xl={2}>
-              <form onChange={(event) => filterEndDate.handleEndDateChange(event)}>
+              {/* <form onChange={(event) => filterEndDate.handleEndDateChange(event)}>
                <TextField
                  id="date-input"
                  type="date"
@@ -329,7 +344,18 @@ export default function Table<T>({
                    shrink: true,
                  }}
                />
-              </form>
+              </form> */}
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DatePicker
+                  label={localeData.txtEndDate}
+                  value={filterEndDate.endDate}
+                  onChange={(newValue:any) => {
+                    filterEndDate.setEndDate(  (newValue));
+                  }}
+                  inputFormat="dd-MM-yyyy"
+                  renderInput={(params) => <TextField sx={{width:'40%'}} {...params} required/>}
+                />
+              </LocalizationProvider>
            </Grid>
            ) : null }

--- a/frontend/hospital-portal/src/sections/claim/TableList.tsx
+++ b/frontend/hospital-portal/src/sections/claim/TableList.tsx
@@ -304,12 +304,12 @@ export default function TableList() {
      label: localeData.txtStatus,
      isSort: true,
    },
-    {
-      id: 'action',
-      align: 'right',
-      label: '',
-      isSort: false,
-    },
+    // {
+    //   id: 'action',
+    //   align: 'right',
+    //   label: '',
+    //   isSort: false,
+    // },
  ];
  

@@ -363,15 +363,15 @@ export default function TableList() {
                {obj.submission_date ? fDateSuffix(obj.submission_date) : ''}
              </Label>
            ,
-            action:
-                <TableMoreMenu actions={
-                  <>
-                    <MenuItem onClick={() => navigate ('/claim/detail/'+obj.claim_request_id)}>
-                      <Iconify icon="eva:eye-fill" />
-                      View
-                    </MenuItem>
-                  </>
-                 } />
+            // action:
+            //     <TableMoreMenu actions={
+            //       <>
+            //         <MenuItem onClick={() => navigate ('/claim/detail/'+obj.claim_request_id)}>
+            //           <Iconify icon="eva:eye-fill" />
+            //           View
+            //         </MenuItem>
+            //       </>
+            //      } />
        }))
      );

--- a/frontend/hospital-portal/src/sections/dashboard/TableListReqLog.tsx
+++ b/frontend/hospital-portal/src/sections/dashboard/TableListReqLog.tsx
@@ -239,7 +239,7 @@ export default function TableList() {
  };

  // handle start date
-  const [startDateValue, setStartDateValue] = useState('');
+  const [startDateValue, setStartDateValue] = useState(null);

  const handleStartDateChanges = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
@@ -263,7 +263,7 @@ export default function TableList() {
  };

  // handle end date
-  const [endDateValue, setEndDateValue] = useState('');
+  const [endDateValue, setEndDateValue] = useState(null);

  const handleEndDateChanges = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
@@ -494,8 +494,8 @@ export default function TableList() {
          searchs={searchs}
          filterStatus={filterStatus}
          selected={selected}
-          // filterStartDate={filterStartDate}
-          // filterEndDate={filterEndDate}
+          //filterStartDate={filterStartDate}
+          //filterEndDate={filterEndDate}
        />
      <MuiDialog
        title={{name: nameMember}}