[WIP] Claims

2022-12-07 17:29:48 +07:00
parent aac9fcf58b
commit 7d8a60f207
10 changed files with 984 additions and 659 deletions
--- a/frontend/dashboard/src/pages/Claims/List.tsx
+++ b/frontend/dashboard/src/pages/Claims/List.tsx
@@ -1,5 +1,22 @@
 // @mui
-import { Box, Button, Card, Collapse, IconButton, MenuItem, Table, TableBody, TableCell, TableRow, TextField, Typography, Stack, Menu, ButtonGroup, Link } from '@mui/material';
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  IconButton,
+  MenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  TextField,
+  Typography,
+  Stack,
+  Menu,
+  ButtonGroup,
+  Link,
+} from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import AddIcon from '@mui/icons-material/Add';
@@ -7,7 +24,7 @@ import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
-import {  Navigate, useNavigate, useSearchParams } from 'react-router-dom';
+import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../utils/axios';
 import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../@types/paginated-data';
@@ -19,29 +36,38 @@ export default function List() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [importResult, setImportResult] = useState(null);
  const navigate = useNavigate();
-  
+
  function SearchInput(props: any) {
-     // SEARCH
+    // SEARCH
    const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState("");
+    const [searchText, setSearchText] = useState('');

    const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? ''
+      const newSearchText = event.target.value ?? '';
      setSearchText(newSearchText);
-    }
+    };

    const handleSearchSubmit = (event: any) => {
      event.preventDefault();
-      props.onSearch({search: searchText }); // Trigger to Parent
-    }
+      props.onSearch({ search: searchText }); // Trigger to Parent
+    };

-    useEffect(() =>  { // Trigger First Search
+    useEffect(() => {
+      // Trigger First Search
      setSearchText(searchParams.get('search') ?? '');
-    }, [])
+    }, []);

    return (
      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
-        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+        <TextField
+          id="search-input"
+          ref={searchInput}
+          label="Search"
+          variant="outlined"
+          fullWidth
+          onChange={handleSearchChange}
+          value={searchText}
+        />
      </form>
    );
  }
@@ -51,8 +77,8 @@ export default function List() {
    // Create Button Menu
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const createMenu = Boolean(anchorEl);
-    const importForm = useRef<HTMLInputElement>(null) 
-    const [currentImportFileName, setCurrentImportFileName] = useState(null)
+    const importForm = useRef<HTMLInputElement>(null);
+    const [currentImportFileName, setCurrentImportFileName] = useState(null);

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
      setAnchorEl(event.currentTarget);
@@ -67,54 +93,61 @@ export default function List() {
        handleClose();
        importForm.current ? importForm.current.click() : console.log('No File selected');
      } else {
-        alert('No file selected')
+        alert('No file selected');
      }
-    }
+    };

    const handleCancelImportButton = () => {
-      importForm.current.value = "";
-      importForm.current.dispatchEvent(new Event("change", { bubbles: true }));
-    }
+      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)
+        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])
-        axios.post(`corporates/${corporate_id}/import-plan-benefit`, formData )
-          .then(response => {
+        formData.append('file', importForm.current?.files[0]);
+        axios
+          .post(`corporates/${corporate_id}/import-plan-benefit`, formData)
+          .then((response) => {
            handleCancelImportButton();
            loadDataTableData();
-            setImportResult(response.data)
+            setImportResult(response.data);
            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
          })
-          .catch(response => {
-            enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
-          })
+          .catch((response) => {
+            enqueueSnackbar(
+              'Looks like something went wrong. Please check your data and try again. ' +
+                response.message,
+              { variant: 'error' }
+            );
+          });
      } else {
-        enqueueSnackbar('No File Selected', { variant: 'warning' })
+        enqueueSnackbar('No File Selected', { variant: 'warning' });
      }
-    }
-    
+    };
+
    return (
      <div>
        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-          <SearchInput onSearch={applyFilter}/>
-          <Link href="/claims/create" style={{ textDecoration: "none" }}>
-            <Button
-              variant='outlined'
-              startIcon={<AddIcon />} sx={{ p: 1.8 }}
-            >
-              Create
-            </Button>
-          </Link>
+          <SearchInput onSearch={applyFilter} />
+          <Button
+            variant="outlined"
+            startIcon={<AddIcon />}
+            sx={{ p: 1.8 }}
+            onClick={() => {
+              navigate('/claims/create');
+            }}
+          >
+            Create
+          </Button>
        </Stack>
      </div>
    );
@@ -122,9 +155,11 @@ export default function List() {

  // Dummy Default Data
  const [dataTableIsLoading, setDataTableLoading] = useState(true);
-  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(LaravelPaginatedDataDefault);
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(
+    LaravelPaginatedDataDefault
+  );

-  const loadDataTableData = async (appliedFilter : any | null = null) => {
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
    setDataTableLoading(true);
    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
    const response = await axios.get('/claims', { params: filter });
@@ -132,35 +167,37 @@ export default function List() {
    setDataTableLoading(false);

    setDataTableData(response.data);
-  }
+  };

-  const applyFilter = async (searchFilter: {search: string}) => {
+  const applyFilter = async (searchFilter: { search: string }) => {
    await loadDataTableData(searchFilter);
    setSearchParams(searchFilter);
-  }
+  };

-  const handlePageChange = (event : ChangeEvent, value: number) : void => {
-    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+  const handlePageChange = (event: ChangeEvent, value: number): void => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
    loadDataTableData(filter);
    setSearchParams(filter);
-  }
+  };

  useEffect(() => {
    loadDataTableData();
-  }, [])
-  
+  }, []);
+
  const headStyle = {
-      fontWeight: 'bold',
+    fontWeight: 'bold',
  };

  // Called on every row to map the data to the columns
-  function createData( data: any ): any {
+  function createData(data: any): any {
    return {
      ...data,
-    }
+    };
  }

-  {/* ------------------ TABLE ROW ------------------ */}
+  {
+    /* ------------------ TABLE ROW ------------------ */
+  }
  function Row(props: { row: ReturnType<typeof createData> }) {
    const { row } = props;
    const [open, setOpen] = React.useState(false);
@@ -169,11 +206,7 @@ export default function List() {
      <React.Fragment>
        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
          <TableCell>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
+            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
            </IconButton>
          </TableCell>
@@ -181,10 +214,18 @@ export default function List() {
          <TableCell align="left">{row.member?.full_name}</TableCell>
          <TableCell align="left">{row.plan?.code}</TableCell>
          <TableCell align="left">{row.benefit?.code}</TableCell>
-          <TableCell align="left">({row.diagnosis?.code}) {row.diagnosis?.name}</TableCell>
+          <TableCell align="left">
+            ({row.diagnosis?.code}) {row.diagnosis?.name}
+          </TableCell>
          <TableCell align="left">{fCurrency(row.total_claim)}</TableCell>

-          <TableCell align="right"><EditRoundedIcon onClick={(e) => {navigate('/claims/'+row.id)}}/></TableCell>
+          <TableCell align="right">
+            <EditRoundedIcon
+              onClick={(e) => {
+                navigate('/claims/' + row.id);
+              }}
+            />
+          </TableCell>
        </TableRow>
        {/* COLLAPSIBLE ROW */}
        <TableRow>
@@ -201,7 +242,9 @@ export default function List() {
      </React.Fragment>
    );
  }
-  {/* ------------------ END TABLE ROW ------------------ */}
+  {
+    /* ------------------ END TABLE ROW ------------------ */
+  }

  function TableContent() {
    return (
@@ -210,57 +253,69 @@ export default function List() {
        <TableBody>
          <TableRow>
            <TableCell style={headStyle} align="left" />
-            <TableCell style={headStyle} align="left">Code</TableCell>
-            <TableCell style={headStyle} align="left">Member Name</TableCell>
-            <TableCell style={headStyle} align="left">Plan</TableCell>
-            <TableCell style={headStyle} align="left">Benefit</TableCell>
-            <TableCell style={headStyle} align="left">Diagnosis</TableCell>
-            <TableCell style={headStyle} align="left">Total Claim</TableCell>
-            <TableCell style={headStyle} align="right">Action</TableCell>
+            <TableCell style={headStyle} align="left">
+              Code
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Member Name
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Plan
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Benefit
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Diagnosis
+            </TableCell>
+            <TableCell style={headStyle} align="left">
+              Total Claim
+            </TableCell>
+            <TableCell style={headStyle} align="right">
+              Action
+            </TableCell>
          </TableRow>
        </TableBody>
        {/* ------------------ END TABLE HEADER ------------------ */}

-        
        {/* ------------------ TABLE ROW ------------------ */}
-        {dataTableIsLoading ?
-          (
-            <TableBody>
-              <TableRow>
-                <TableCell colSpan={8} align="center">Loading</TableCell>
-              </TableRow>
-            </TableBody>
-          ) : (
-            dataTableData.data.length === 0 ? 
-            (
-              <TableBody>
-                <TableRow>
-                  <TableCell colSpan={8} align="center">No Data</TableCell>
-                </TableRow>
-              </TableBody>
-            ) : (
-              <TableBody>
-                {dataTableData.data.map(row => (
-                  <Row key={row.id} row={row} />
-                ))}
-              </TableBody>
-            )
+        {dataTableIsLoading ? (
+          <TableBody>
+            <TableRow>
+              <TableCell colSpan={8} align="center">
+                Loading
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        ) : dataTableData.data.length === 0 ? (
+          <TableBody>
+            <TableRow>
+              <TableCell colSpan={8} align="center">
+                No Data
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        ) : (
+          <TableBody>
+            {dataTableData.data.map((row) => (
+              <Row key={row.id} row={row} />
+            ))}
+          </TableBody>
        )}
        {/* ------------------ END TABLE ROW ------------------ */}
      </Table>
-    )
+    );
  }
-  
+
  return (
    <Card>
      <ImportForm />

-      <DataTable 
+      <DataTable
        isLoading={dataTableIsLoading}
        lastRequest={0}
        data={dataTableData}
        handlePageChange={handlePageChange}
-
        TableContent={<TableContent />}
      />
    </Card>