[WIP] Claims

frontend/dashboard/src/pages/Claims/CreateUpdate.tsx

@@ -16,11 +16,14 @@ import { LoadingButton } from '@mui/lab';
 import { fCurrency } from '../../utils/formatNumber';
 import Iconify from '../../components/Iconify';
 
-export default function ClaimsCreate() {
+export default function ClaimsCreateUpdate() {
   const navigate = useNavigate();
 
   const [member, setMember] = useState();
   const selectedMemberDisplay = useRef<HTMLInputElement>(null);
+  const { id } = useParams();
+  
+  const isEdit = !!id;
 
   const NewClaimSchema = Yup.object().shape({
     member_id: Yup.string().required('Please select Member'),
@@ -104,12 +107,24 @@ export default function ClaimsCreate() {
   }
 
   useEffect(() =>  { // Trigger First Search
-    axios.get('master/diagnosis/search')
-      .then(function(res) {
-        setDiagnosis(res.data);
-      })
 
   }, [])
+  
+  useEffect(() => {
+    if (isEdit) {
+      axios.get(`/claims/${id}`)
+        .then((res) => {
+          // console.log('fuck', res.data)
+          // setCurrentCorporatePlan(res.data);
+          set
+        })
+        .catch((err) => {
+          // if (err.response.status === 404) {
+          //   navigate('/404');
+          // }
+        })
+    }
+  }, [id]);
 
   const [isEligible, setIsEligible] = useState<boolean|null>(null)
 

frontend/dashboard/src/pages/Claims/List.tsx

@@ -7,16 +7,18 @@ import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
-import {  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';
 import DataTable from '../../components/LaravelTable';
 import { fCurrency } from '../../utils/formatNumber';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
 
 export default function List() {
   const [searchParams, setSearchParams] = useSearchParams();
   const [importResult, setImportResult] = useState(null);
+  const navigate = useNavigate();
   
   function SearchInput(props: any) {
      // SEARCH
@@ -182,7 +184,7 @@ export default function List() {
           <TableCell align="left">({row.diagnosis?.code}) {row.diagnosis?.name}</TableCell>
           <TableCell align="left">{fCurrency(row.total_claim)}</TableCell>
 
-          {/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}
+          <TableCell align="right"><EditRoundedIcon onClick={(e) => {navigate('/claims/'+row.id)}}/></TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         <TableRow>
@@ -214,7 +216,7 @@ export default function List() {
             <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="right">Action</TableCell>
           </TableRow>
         </TableBody>
         {/* ------------------ END TABLE HEADER ------------------ */}

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

@@ -1,5 +1,5 @@
 // @mui
-import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup } from '@mui/material';
+import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, 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';
@@ -43,7 +43,11 @@ export default function CorporatePlanList() {
   const loadDataTableData = async (appliedFilter = null) => {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/corporates/'+corporate_id+'/members', { params: filter });
+    const response = await axios
+      .get('/corporates/'+corporate_id+'/members', { params: filter })
+      .catch((response) => {
+        enqueueSnackbar('Failed getting data. ' + response.message, { variant: 'error' })
+      });
     // console.log(response.data);
     setDataTableLoading(false);
 
@@ -278,14 +282,70 @@ export default function CorporatePlanList() {
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         <TableRow>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
+          <TableCell></TableCell>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={30}>
             <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ borderBottom: 1 }}>
-                <Typography variant="body2" gutterBottom component="div">
-                  No Extra Data
-                </Typography>
+              <Box sx={{ margin: 1, borderBottom: 1, pb: 2 }}>
+                <Typography sx={{ fontWeight: '600', mb: 1 }}>Claim History</Typography>
+                <Grid container>
+                  <Grid item xs={6}>
+                    <Grid container>
+                      <Grid item xs={6}>
+                       Requested
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.total_claims.requested}
+                      </Grid>
+
+                      
+                      <Grid item xs={6}>
+                       Pending
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.total_claims.received}
+                      </Grid>
+
+                      
+                      <Grid item xs={6}>
+                       Approved
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.total_claims.approved}
+                      </Grid>
+
+                      
+                      <Grid item xs={6}>
+                       Declined
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.total_claims.declined}
+                      </Grid>
+                      
+                      <Grid item xs={6}>
+                       Paid
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.total_claims.paid}
+                      </Grid>
+
+                    </Grid>
+                  </Grid>
+                </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> */}
               </Box>
-            {false && <Box sx={{ margin: 1 }} />}
             </Collapse>
           </TableCell>
         </TableRow>

frontend/dashboard/src/pages/Corporates/Show.tsx

@@ -11,188 +11,30 @@ import Page from '../../components/Page';
 import axios from '../../utils/axios';
 import useAuth from '../../hooks/useAuth';
 import { Link , NavLink as RouterLink, useParams } from 'react-router-dom';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Theme, useTheme } from '@mui/material/styles';
 import { Corporate } from '../../@types/corporates';
-import { LaravelPaginatedData } from '../../@types/paginated-data';
+import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../@types/paginated-data';
 import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
 import CorporateTabNavigations from './CorporateTabNavigations';
+import { fCurrency } from '../../utils/formatNumber';
 
 export default function Corporates() {
   const { themeStretch } = useSettings();
-
-  // Called on every row to map the data to the columns
-  function createData( corporate: Corporate ): Corporate {
-    return {
-      ...corporate,
-    }
-  }
-
-  // Generate the every row of the table
-  function Row(props: { row: ReturnType<typeof createData> }) {
-    const { row } = props;
-    const [open, setOpen] = React.useState(false);
-
-    return (
-      <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-            </IconButton>
-          </TableCell>
-          <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
-        </TableRow>
-        {/* COLLAPSIBLE ROW */}
-        <TableRow>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
-            <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ margin: 1 }}>
-                <Typography variant="h6" gutterBottom component="div">
-                  History
-                </Typography>
-                <Table size="small" aria-label="purchases">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell>Date</TableCell>
-                      <TableCell>Customer</TableCell>
-                      <TableCell align="right">Amount</TableCell>
-                      <TableCell align="right">Total price ($)</TableCell>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {row.history ? row.history.map((historyRow) => (
-                      <TableRow key={historyRow?.date}>
-                        <TableCell component="th" scope="row">
-                          {historyRow?.date}
-                        </TableCell>
-                        <TableCell>{historyRow?.customerId}</TableCell>
-                        <TableCell align="right">{historyRow?.amount}</TableCell>
-                        <TableCell align="right">
-                          {Math.round(historyRow?.amount * 1000 * 100) / 100}
-                        </TableCell>
-                      </TableRow>
-                    ))
-                    : (
-                      <TableRow>
-                        <TableCell colSpan={8}>No Data</TableCell>
-                      </TableRow>
-                      )
-                    }
-                  </TableBody>
-                </Table>
-              </Box>
-            </Collapse>
-          </TableCell>
-        </TableRow>
-      </React.Fragment>
-    );
-  }
-
-  // Dummy Default Data
-  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
-  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
-    current_page: 1,
-    data: [],
-    path: "",
-    first_page_url: "",
-    last_page: 1,
-    last_page_url: "",
-    next_page_url: "",
-    prev_page_url: "",
-    per_page: 10,
-    from: 0,
-    to: 0,
-    total: 0
-  });
-
-  const loadDataTableData = async () => {
-    setDataTableLoading(true);
-    const response = await axios.get('/corporates');
-    // console.log(response.data);
-    setDataTableLoading(false);
-
-    setDataTableData(response.data);
-  }
+  const { corporate_id } = useParams();
+  const [corporate, setCorporate] = useState<Corporate>();
 
   useEffect(() => {
-    loadDataTableData();
+    // TODO Use Hooks
+    axios.get(`corporates/${corporate_id}`)
+    .then((res) => {
+      setCorporate(res.data)
+    })
   }, [])
 
   const headStyle = {
     fontWeight: 'bold',
-  };
-
-  // FILTER SELECT 
-  const ITEM_HEIGHT = 48;
-  const ITEM_PADDING_TOP = 8;
-  const MenuProps = {
-    PaperProps: {
-      style: {
-        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-        width: 250,
-      },
-    },
-  };
-
-  const names = [
-    'PLAN001',
-    'PLAN002',
-    'PLAN003',
-    'PLAN004',
-    'PLAN005',
-  ];
-  function getStyles(name: string, personName: string[], theme: Theme) {
-    return {
-      fontWeight:
-        personName.indexOf(name) === -1
-          ? theme.typography.fontWeightRegular
-          : theme.typography.fontWeightMedium,
-    };
-  }
-  
-  const theme = useTheme();
-  const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
-
-  const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
-    const {
-      target: { value },
-    } = event;
-    setPlanIdFilter(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
-    );
-  };
-
-  const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
-  const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
-    const {
-      target: { value },
-    } = event;
-    setStatusFilter(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
-    );
-  };
-  // END FILTER SELECT
-  
-  // IMPORT
-  const importMember = React.useRef(null);
-  const handleImportButton = (event: any) => {
-    if (importMember?.current)
-      importMember.current ? importMember.current.click() : console.log('fuck');
-    else
-      alert('No file selected')
-  }
-
-  const { id } = useParams();
-  
+  };  
   return (
     <Page title="Dashboard">
 
@@ -204,8 +46,8 @@ export default function Corporates() {
             href: '/corporates',
           },
           {
-            name: 'Corporate Name',
-            href: '/corporates/'+id,
+            name: corporate?.name ?? '-',
+            href: '/corporates/'+corporate_id,
           },
         ]}
       />
@@ -217,10 +59,58 @@ export default function Corporates() {
             <CorporateTabNavigations position=""/>
             <Grid container spacing={3}>
 
-              <Grid item xs={12} sx={{ p:2 }}>
-                  Corporate Dashboard / Report Goes Here
-                  &nbsp;
+              <Grid item md={6} sx={{ p:2 }}>
+                <Typography sx={{...headStyle, px:3, fontSize:'24px'}}>Current Policy </Typography>
+                
+                <Table>
+                  <TableBody>
+
+                    <TableRow>
+                      <TableCell sx={headStyle}>Policy Name</TableCell>
+                      <TableCell>{corporate?.current_policy?.code}</TableCell>
+                    </TableRow>
+
+                    <TableRow>
+                      <TableCell sx={headStyle}>Total Premi</TableCell>
+                      <TableCell>{fCurrency(corporate?.current_policy?.total_premi)}</TableCell>
+                    </TableRow>
+
+                    <TableRow>
+                      <TableCell sx={headStyle}>Stop Service</TableCell>
+                      <TableCell>{fCurrency(corporate?.current_policy?.minimal_stop_service_net)}</TableCell>
+                    </TableRow>
+
+                    <TableRow>
+                      <TableCell sx={headStyle}>Balance</TableCell>
+                      <TableCell>{fCurrency(corporate?.current_policy?.limit_balance)}</TableCell>
+                    </TableRow>
+
+                  </TableBody>
+                </Table>
+
               </Grid>
+
+              <Grid item md={6} sx={{ p:2 }}>
+                <Typography sx={{...headStyle, px:3, fontSize:'24px'}}>Claims</Typography>
+                
+                <Table>
+                  <TableBody>
+
+                    <TableRow>
+                      <TableCell sx={headStyle}>Number Of Claim</TableCell>
+                      <TableCell>{corporate?.current_policy?.code}</TableCell>
+                    </TableRow>
+
+                    <TableRow>
+                      <TableCell sx={headStyle}>Total Usage This Year</TableCell>
+                      <TableCell>{fCurrency((corporate?.current_policy?.total_premi ?? 0) - (corporate?.current_policy?.limit_balance ?? 0))}</TableCell>
+                    </TableRow>
+
+                  </TableBody>
+                </Table>
+
+              </Grid>
+
             </Grid>
           </Stack>
         </Card>

frontend/dashboard/src/routes/index.tsx

@@ -303,4 +303,4 @@ const CorporateHospitals = Loadable(lazy(() => import('../pages/Corporates/Hospi
 const CorporateClaimHistories = Loadable(lazy(() => import('../pages/Corporates/ClaimHistory/Index')));
 
 const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
-const ClaimsCreate = Loadable(lazy(() => import('../pages/Claims/Create')));
+const ClaimsCreate = Loadable(lazy(() => import('../pages/Claims/CreateUpdate')));