tuning import. listing, edit

2023-10-25 08:46:42 +07:00
parent f53945e4a0
commit 5265aecd05
20 changed files with 1023 additions and 566 deletions
--- a/frontend/dashboard/src/pages/ClaimRequests/List.tsx
+++ b/frontend/dashboard/src/pages/ClaimRequests/List.tsx
@@ -17,12 +17,17 @@ import {
  ButtonGroup,
  Link,
  Chip,
+  TableHead,
+  Grid,
 } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import AddIcon from '@mui/icons-material/Add';
 import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
+
+import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 // hooks
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
@@ -38,6 +43,10 @@ import { enqueueSnackbar } from 'notistack';
 import { Divider } from '@mui/material';
 import Iconify from '@/components/Iconify';
 import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
+import { fDateTimesecond } from '@/utils/formatTime';
+import { capitalizeFirstLetter } from '@/utils/formatString';
+import Label from '@/components/Label';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
 // import LoadingButton from '@/theme/overrides/LoadingButton';

 export default function List() {
@@ -45,6 +54,8 @@ export default function List() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [importResult, setImportResult] = useState(null);

+  const navigate = useNavigate()
+
  function SearchInput(props: any) {
    // SEARCH
    const searchInput = useRef<HTMLInputElement>(null);
@@ -75,6 +86,7 @@ export default function List() {
          fullWidth
          onChange={handleSearchChange}
          value={searchText}
+          placeholder='Search Code or Name...'
        />
      </form>
    );
@@ -87,26 +99,164 @@ export default function List() {
    const createMenu = Boolean(anchorEl);
    const importForm = useRef<HTMLInputElement>(null);
    const [currentImportFileName, setCurrentImportFileName] = useState(null);
+     const [importLoading, setImportLoading] = useState(false);

+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
    const handleClose = () => {
      setAnchorEl(null);
    };

+    const handleImportButton = () => {
+      if (importForm?.current) {
+        handleClose();
+        importForm.current ? importForm.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected');
+      }
+    };
+
+    const handleCancelImportButton = () => {
+      importForm.current.value = '';
+      importForm.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 (importForm.current?.files.length) {
+        const formData = new FormData();
+        formData.append('file', importForm.current?.files[0]);
+        
+        setImportLoading(true);
+        axios
+          .post(`claim-requests/import`, formData)
+          .then((response) => {
+            handleCancelImportButton();
+            loadDataTableData();
+            setImportResult(response.data);
+            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+            setImportLoading(false);
+          })
+          .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 = (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 handleGetData = (type :string) => {
+      axios.get(`corporates/${corporate_id}/data-plan-benefit`)
+        .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>
-        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-          <SearchInput onSearch={applyFilter} />
-          {/* <Button
-            variant="outlined"
-            startIcon={<AddIcon />}
-            sx={{ p: 1.8 }}
-            onClick={() => {
-              navigate('/claims/create');
-            }}
-          >
-            Create
-          </Button> */}
-        </Stack>
+         <input
+          type="file"
+          id="file"
+          ref={importForm}
+          style={{ display: 'none' }}
+          onChange={handleImportChange}
+          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+        />
+        {!currentImportFileName && (
+          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+            <SearchInput onSearch={applyFilter} />
+            <Button
+              variant="outlined"
+              startIcon={<UploadIcon />}
+              sx={{ p: 1.8 }}
+              onClick={handleClick}
+            >
+              Import
+            </Button>
+            <Menu
+                id="import-button"
+                anchorEl={anchorEl}
+                open={createMenu}
+                onClose={handleClose}
+                MenuListProps={{
+                  'aria-labelledby': 'basic-button',
+                }}
+              >
+                <MenuItem onClick={handleImportButton}>Import</MenuItem>
+                <MenuItem onClick={() => {handleGetTemplate('claim-request')}}>Download Template test</MenuItem>
+                <MenuItem onClick={() => {handleGetData('data-plan-benefit')}}>Download Claim Request</MenuItem>
+              </Menu>
+            <Button
+              variant="contained"
+              startIcon={<AddIcon />}
+              sx={{ p: 1.8 }}
+              onClick={() => {
+                navigate('/claims/create');
+              }}
+            >
+              Create
+            </Button>
+          </Stack>
+        )}
+
+        {currentImportFileName && (
+          <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>
+        )}
      </div>
    );
  }
@@ -176,43 +326,43 @@ export default function List() {
    return (
      <React.Fragment>
        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
+          {/* <TableCell>
            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
            </IconButton>
-          </TableCell>
+            </TableCell> */ }
          <TableCell align="left">
            <Typography
-              onClick={() => {
-                handleShowClaim(row);
-              }}
-              color={themeColorPresets}
+              // onClick={() => {
+              //   handleShowClaim(row);
+              // }}
            >
              {row.code}
            </Typography>
          </TableCell>
          <TableCell align="left">{row.member?.full_name}</TableCell>
-          <TableCell align="left">{row.member?.current_policy?.code}</TableCell>
-          <TableCell align="left">{row.submission_date}</TableCell>
+          <TableCell align="left"><Label>{fDateTimesecond(row.submission_date)}</Label></TableCell>
          <TableCell align="left">{row.service_name}</TableCell>
-          {/* <TableCell align="left">{row.payment_type_name}</TableCell> */}
-          <TableCell align="left">{'-'}</TableCell>
-          <TableCell align="right">
-            <Chip label={row.status} />
+          <TableCell align="left">{row.payment_type_name}</TableCell>
+          <TableCell align="left">
+           { row.status == "requested" ? 
+              (<Label variant='ghost' color='primary'>{capitalizeFirstLetter(row.status)}</Label>) : 
+              (<Label color='success'> {capitalizeFirstLetter(row.status)}</Label>)
+          }
          </TableCell>
          <TableCell align="right">
-            {row.status == 'requested' && (
-              <LoadingButton
-                loading={loadingApprove}
-                variant="outlined"
-                size="small"
-                onClick={() => {
-                  handleApprove(row);
-                }}
-              >
-                Ajukan Claim <Iconify icon="eva:arrow-forward-outline"></Iconify>
-              </LoadingButton>
-            )}
+            <TableMoreMenu actions={
+              <>
+                <MenuItem onClick={() => navigate(`/claim-requests/edit/${row.id}`)}>
+                  <EditOutlinedIcon />
+                  Edit
+                </MenuItem>
+                <MenuItem onClick={() => ''}>
+                  <FindInPageOutlinedIcon />
+                  Detail
+                </MenuItem>
+              </>
+            } />
          </TableCell>
          {/* <TableCell>
            
@@ -306,9 +456,9 @@ export default function List() {
    return (
      <Table aria-label="collapsible table">
        {/* ------------------ TABLE HEADER ------------------ */}
-        <TableBody>
+        <TableHead>
          <TableRow>
-            <TableCell style={headStyle} align="left" />
+            {/* <TableCell style={headStyle} align="left" /> */}
            <TableCell style={headStyle} align="left">
              Code
            </TableCell>
@@ -316,23 +466,20 @@ export default function List() {
              Name
            </TableCell>
            <TableCell style={headStyle} align="left">
-              Nomor Polis
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Tanggal Pengajuan
+              Date of Submission
            </TableCell>
            <TableCell style={headStyle} align="left">
              Service Type
            </TableCell>
            <TableCell style={headStyle} align="left">
-              Claim Type
+              Claim Method
            </TableCell>
            <TableCell style={headStyle} align="left">
              Status
            </TableCell>
            <TableCell style={headStyle} align="right"></TableCell>
          </TableRow>
-        </TableBody>
+        </TableHead>
        {/* ------------------ END TABLE HEADER ------------------ */}

        {/* ------------------ TABLE ROW ------------------ */}
@@ -388,23 +535,28 @@ export default function List() {
  function handleDownloadLog() {}

  return (
-    <Card>
-      <ImportForm />
+    <Grid container>
+      <Grid item sm={12}>
+        <ImportForm />
+      </Grid>

-      <DataTable
-        isLoading={dataTableIsLoading}
-        lastRequest={0}
-        data={dataTableData}
-        handlePageChange={handlePageChange}
-        TableContent={<TableContent />}
-      />
-
-      <DialogDetailClaim
-        openDialog={openDialogDetailClaim}
-        setOpenDialog={setOpenDialogDetailClaim}
-        title={{ name: 'Claim Request Detail' }}
-        data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
-      ></DialogDetailClaim>
-    </Card>
+      <Grid item sm={12}>
+        <DataTable
+          isLoading={dataTableIsLoading}
+          lastRequest={0}
+          data={dataTableData}
+          handlePageChange={handlePageChange}
+          TableContent={<TableContent />}
+        />
+      </Grid>
+      <Grid item sm={12}>
+        <DialogDetailClaim
+          openDialog={openDialogDetailClaim}
+          setOpenDialog={setOpenDialogDetailClaim}
+          title={{ name: 'Claim Request Detail' }}
+          data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
+        ></DialogDetailClaim>
+      </Grid>
+    </Grid>
  );
 }