tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

LMSN-218

Browse Source 
Improve Slicing bagian detail dashboard di Corporate Prime Center
This commit is contained in:
ivan-sim
2023-10-17 10:49:51 +07:00
parent f2e5a22c64
commit 7bd574db7d
1 changed files with 127 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
frontend/dashboard/src/pages/Corporates/Show.tsx
View File

@@ -117,6 +117,11 @@ export default function Corporates() {
}); });
}; };
// End Upload Docs // End Upload Docs
const style1 = {px:4, marginTop: 2};
const style2 = {color: '#919EAB', width: '50%'};
const style3 = {color: '#212B36', width: '50%'};
return ( return (
<Page title="Dashboard"> <Page title="Dashboard">
@@ -136,93 +141,58 @@ export default function Corporates() {
{/* <Container maxWidth={themeStretch ? false : 'xl'}> */} {/* <Container maxWidth={themeStretch ? false : 'xl'}> */}
<Card> <Card>
<Stack spacing="3"> <Stack spacing="2">
<CorporateTabNavigations position=""/> <CorporateTabNavigations position=""/>
<Grid container spacing={3}> <Grid>
<Grid sx={{ p:2 }}>
<Grid item md={6} sx={{ p:2 }}> <Typography variant='subtitle1' sx={{...headStyle, px:4, marginTop: 2}}>Current Policy </Typography>
<Typography sx={{...headStyle, px:3, fontSize:'24px'}}>Current Policy </Typography> <Stack spacing={2} direction='row' sx={{...style1}}>
<Typography variant='body2' sx={{...style2}}>Policy Name</Typography>
<Table> <Typography variant='body2' sx={{...style3}}>{corporate?.current_policy?.code}</Typography>
<TableBody> </Stack>
<Stack spacing={2} direction='row' sx={{...style1}}>
<TableRow> <Typography variant='body2' sx={{...style2}}>Total Premi</Typography>
<TableCell sx={headStyle}>Policy Name</TableCell> <Typography variant='body2' sx={{...style3}}>{fCurrency(corporate?.current_policy?.total_premi)}</Typography>
<TableCell>{corporate?.current_policy?.code}</TableCell> </Stack>
</TableRow> <Stack spacing={2} direction='row' sx={{...style1}}>
<Typography variant='body2' sx={{...style2}}>Stop Service</Typography>
<TableRow> <Typography variant='body2' sx={{...style3}}>{fCurrency(corporate?.current_policy?.minimal_stop_service_net)}</Typography>
<TableCell sx={headStyle}>Total Premi</TableCell> </Stack>
<TableCell>{fCurrency(corporate?.current_policy?.total_premi)}</TableCell> <Stack spacing={2} direction='row' sx={{...style1}}>
</TableRow> <Typography variant='body2' sx={{...style2}}>Balance</Typography>
<Typography variant='body2' sx={{...style3}}>{fCurrency(corporate?.current_policy?.limit_balance)}</Typography>
<TableRow> </Stack>
<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>
<Grid item md={6} sx={{ p:2 }}> <Grid sx={{ p:2 }}>
<Typography sx={{...headStyle, px:3, fontSize:'24px'}}>Claims</Typography> <Typography variant='subtitle1' sx={{...headStyle, px:4, marginTop: 2}}>Claims</Typography>
<Stack spacing={2} direction='row' sx={{...style1}}>
<Typography variant='body2' sx={{...style2}}>Number Of Claim</Typography>
<Typography variant='body2' sx={{...style3}}>{corporate?.current_policy?.code}</Typography>
</Stack>
<Stack spacing={2} direction='row' sx={{...style1}}>
<Typography variant='body2' sx={{...style2}}>Total Usage This Year</Typography>
<Typography variant='body2' sx={{...style3}}>{fCurrency((corporate?.current_policy?.total_premi ?? 0) - (corporate?.current_policy?.limit_balance ?? 0))}</Typography>
</Stack>
<Table> </Grid>
<TableBody> <Grid sx={{ p:2 }}>
<Typography variant='subtitle1' sx={{...headStyle, px:4, marginTop: 2}}>Docs (Terms & Conditions)</Typography>
<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>
<Typography sx={{...headStyle, px:3, fontSize:'24px'}}>Docs (Terms & Conditions)</Typography>
<Table>
<TableBody>
{fileDocs.length > 0 && ( {fileDocs.length > 0 && (
<TableRow> <Stack spacing={2} direction='row' sx={{...style1}} alignItems="center">
<TableCell sx={headStyle}>ASO members can download or not?</TableCell> <Stack direction='row' sx={{width: '50%'}} alignItems="center">
<TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}> <Typography variant='body2' sx={{color: '#919EAB', marginRight: 2}}>ASO members can download or not?</Typography>
<Button <Button
variant="outlined" variant="outlined"
color={isActive ? "success" : "error"} color={isActive ? "success" : "error"}
size="small" size="small"
onClick={toggleButton} onClick={toggleButton}
> >
{isActive ? 'Active' : 'Inactive'} <Typography variant='body3' sx={{fontWeight: 'bold'}}>{isActive ? 'Active' : 'Inactive'}</Typography>
</Button> </Button>
</TableCell> </Stack>
</TableRow>
)}
{fileDocs.slice(0, showAll ? fileDocs.length : 1).map((file, index) => (
<TableRow key={index}>
<TableCell sx={headStyle}>
<a
href={file.path} // Ganti URL sesuai kebutuhan Anda
style={{ cursor: 'pointer', textDecoration: 'underline' }}
target="_blank" // Untuk membuka tautan dalam tab baru
>
{file.original_name}
</a>
</TableCell>
{!showAll && ( {!showAll && (
<TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}> <Stack direction='row' sx={{width: '50%'}} alignItems="center">
<Stack>
<input <input
type="file" type="file"
id={`fileDocsID`} id={`fileDocsID`}
@@ -240,35 +210,42 @@ export default function Corporates() {
onClick={() => { onClick={() => {
fileDocsInput.current.click(); fileDocsInput.current.click();
}} }}
sx={{ width: 'fit-content' }} sx={{ width: 'fit-content', color: '#19BBBB' }}
> >
<Iconify icon="eva:plus-fill" /> <Stack alignItems="center" direction="row" spacing={1}>
<span>Update Docs</span> <Iconify icon="icon-park-outline:upload-one" fontSize="2em" sx={{color: '#19BBBB'}} />
<Typography variant='body3' sx={{fontWeight: 'bold', color: '#19BBBB'}}>Update File</Typography>
</Stack>
</Button> </Button>
</Stack> </Stack>
</TableCell>
)} )}
</TableRow> </Stack>
)}
{fileDocs.slice(0, showAll ? fileDocs.length : 1).map((file, index) => (
<Stack spacing={2} direction='row' sx={{...style1}}>
<a
href={file.path}
style={{ cursor: 'pointer', textDecoration: 'underline', color: '#19BBBB' }}
target="_blank"
>
<Typography variant='body2' sx={{color: '#19BBBB'}}>{file.original_name}</Typography>
</a>
</Stack>
))} ))}
{!showAll && fileDocs.length > 1 && ( {!showAll && fileDocs.length > 1 && (
<TableRow> <Stack spacing={2} direction='row' sx={{...style1}}>
<TableCell> <Typography variant='body2' onClick={() => setShowAll(true)} style={{ color: '#19BBBB', cursor: 'pointer' }}>Lihat Semua Data</Typography>
<span onClick={() => setShowAll(true)} style={{ color: 'blue', cursor: 'pointer' }}>Lihat Semua Data</span> </Stack>
</TableCell>
</TableRow>
)} )}
{showAll && ( {showAll && (
<TableRow> <Stack spacing={2} direction='row' sx={{...style1}}>
<TableCell> <Typography variant='body2' onClick={() => setShowAll(false)} style={{ color: '#19BBBB', cursor: 'pointer' }}>Sembunyikan Data</Typography>
<span onClick={() => setShowAll(false)} style={{ color: 'blue', cursor: 'pointer' }}>Sembunyikan Data</span> </Stack>
</TableCell>
</TableRow>
)} )}
{fileDocs.length <= 0 && ( {fileDocs.length <= 0 && (
<TableRow> <Stack spacing={2} direction='row' sx={{...style1}} alignItems="center">
<TableCell sx={headStyle}>Please add a Terms & Conditions document</TableCell> <Typography variant='body2' sx={{...style2}}>Please add a Terms & Conditions document</Typography>
<TableCell> <Stack direction='row' sx={{width: '50%'}} alignItems="center">
<Stack>
<input <input
type="file" type="file"
id={`fileDocsID`} id={`fileDocsID`}
@@ -286,20 +263,15 @@ export default function Corporates() {
fileDocsInput.current.click(); fileDocsInput.current.click();
}} }}
> >
<Iconify icon="eva:plus-fill" /> <Stack alignItems="center" direction="row" spacing={1}>
<span>Add Docs</span> <Iconify icon="icon-park-outline:upload-one" fontSize="2em" sx={{color: '#19BBBB'}} />
<Typography variant='body3' sx={{fontWeight: 'bold', color: '#19BBBB'}}>Upload File</Typography>
</Stack>
</LoadingButton> </LoadingButton>
</Stack> </Stack>
</TableCell> </Stack>
</TableRow>
)} )}
</TableBody>
</Table>
</Grid> </Grid>
</Grid> </Grid>
</Stack> </Stack>
</Card> </Card>