[WIP] Add Claim Request

2023-02-14 12:39:51 +07:00
parent a7e688a52c
commit 13542cd3c0
102 changed files with 2625 additions and 391 deletions
--- a/frontend/hospital-portal/src/sections/dashboard/DialogMember.tsx
+++ b/frontend/hospital-portal/src/sections/dashboard/DialogMember.tsx
@@ -0,0 +1,100 @@
+// mui
+import { styled } from '@mui/material/styles';
+import { LoadingButton, TabPanel } from "@mui/lab";
+import { Card, Divider, Grid, LinearProgress, linearProgressClasses, Typography } from "@mui/material";
+import { Tab, Tabs } from "@mui/material";
+import { Box, Stack } from "@mui/material";
+import { useEffect, useState } from "react";
+import { fCurrency } from '@/utils/formatNumber';
+import { fPostFormat } from '@/utils/formatTime';
+import { Avatar } from '@mui/material';
+import Iconify from '@/components/Iconify';
+import FormRequestClaim from './FormRequestClaim';
+
+export default function DialogMember(member, closeDialog) {
+    const [currentTab, setCurrentTab] = useState('request')
+        
+    // ----------------------------------------------------------------------
+
+    useEffect(() => {
+        setCurrentTab('benefit')
+    }, [member])
+
+    function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
+        setCurrentTab(newValue)
+    }
+
+    // ----------------------------------------------------------------------
+
+    const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+        height: 10,
+        borderRadius: 6,
+        [`&.${linearProgressClasses.colorPrimary}`]: {
+        backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
+        },
+        [`& .${linearProgressClasses.bar}`]: {
+        borderRadius: 6,
+        background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
+        },
+    }));
+
+    function TabPanel(props) {
+        const { children, value, index, ...other } = props;
+      
+        console.log('current', value)
+        return (
+          <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+          >
+            {value === index && (
+              <Box sx={{ p: 3 }}>
+                <div>{children}</div>
+              </Box>
+            )}
+          </div>
+        );
+    }
+
+    return (
+        <div>
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                <Tabs
+                    value={currentTab}
+                    onChange={handleChangeTab}
+                    aria-label="wrapped label tabs example"
+                >
+                    <Tab
+                    value="benefit"
+                    label="Benefit Summary"
+                    />
+                    <Tab value="request" label="Request Penjaminan" />
+                </Tabs>
+
+                <TabPanel value={currentTab} index={'benefit'}>
+                    <Grid container spacing={2}>
+                        { member && member?.current_plan?.corporate_benefits?.map((corporateBenefit, index) => {return (
+                            <Grid item sm={6} key={index}>
+                                <Card sx={{p: 2}}>
+                                    <Typography variant="body1" sx={{fontWeight: 500}}>{corporateBenefit.benefit.code}</Typography>
+                                    <Typography variant="body2">{corporateBenefit.benefit.description}</Typography>
+                                    <Typography variant="body2" sx={{ marginTop: 2 }}>Yearly Limits</Typography>
+                                    <BorderLinearProgress variant="determinate" value={100 - (corporateBenefit.limit_amount ? ((corporateBenefit.usage ?? 0) / corporateBenefit.limit_amount) : 0)} sx={{ mb: 1 }} />
+                                    <Typography sx={{ textAlign: 'right'}}>{corporateBenefit.usage ?? 0} / {fCurrency(corporateBenefit.limit_amount ?? 0)}</Typography>
+                                </Card>
+                            </Grid>
+                        )})}
+                    </Grid>
+                </TabPanel>
+
+                
+                <TabPanel value={currentTab} index={'request'}>
+                    <FormRequestClaim member={member} handleSubmitSuccess={closeDialog} />
+                </TabPanel>
+            </Box>
+        </div>
+    )
+}