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

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

@@ -116,7 +116,12 @@ export default function Corporates() {
enqueueSnackbar(error.response.data.errors[0], { variant: 'error' }); enqueueSnackbar(error.response.data.errors[0], { variant: 'error' });
}); });
}; };
// 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,170 +141,137 @@ 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}}>
<Table> <Typography variant='body2' sx={{...style2}}>Number Of Claim</Typography>
<TableBody> <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>
<TableRow> </Grid>
<TableCell sx={headStyle}>Number Of Claim</TableCell> <Grid sx={{ p:2 }}>
<TableCell>{corporate?.current_policy?.code}</TableCell> <Typography variant='subtitle1' sx={{...headStyle, px:4, marginTop: 2}}>Docs (Terms & Conditions)</Typography>
</TableRow> {fileDocs.length > 0 && (
<Stack spacing={2} direction='row' sx={{...style1}} alignItems="center">
<TableRow> <Stack direction='row' sx={{width: '50%'}} alignItems="center">
<TableCell sx={headStyle}>Total Usage This Year</TableCell> <Typography variant='body2' sx={{color: '#919EAB', marginRight: 2}}>ASO members can download or not?</Typography>
<TableCell>{fCurrency((corporate?.current_policy?.total_premi ?? 0) - (corporate?.current_policy?.limit_balance ?? 0))}</TableCell> <Button
</TableRow> variant="outlined"
color={isActive ? "success" : "error"}
</TableBody> size="small"
</Table> onClick={toggleButton}
>
<Typography sx={{...headStyle, px:3, fontSize:'24px'}}>Docs (Terms & Conditions)</Typography> <Typography variant='body3' sx={{fontWeight: 'bold'}}>{isActive ? 'Active' : 'Inactive'}</Typography>
</Button>
<Table> </Stack>
<TableBody> {!showAll && (
{fileDocs.length > 0 && ( <Stack direction='row' sx={{width: '50%'}} alignItems="center">
<TableRow> <input
<TableCell sx={headStyle}>ASO members can download or not?</TableCell> type="file"
<TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}> id={`fileDocsID`}
ref={fileDocsInput}
style={{ display: 'none' }}
onChange={(event) => {
handleDocsInputChange(corporate_id)(event);
}}
accept="application/pdf"
multiple
/>
<Button <Button
variant="outlined" variant="outlined"
color={isActive ? "success" : "error"} onClick={() => {
size="small" fileDocsInput.current.click();
onClick={toggleButton} }}
sx={{ width: 'fit-content', color: '#19BBBB' }}
> >
{isActive ? 'Active' : 'Inactive'} <Stack alignItems="center" direction="row" spacing={1}>
</Button> <Iconify icon="icon-park-outline:upload-one" fontSize="2em" sx={{color: '#19BBBB'}} />
</TableCell> <Typography variant='body3' sx={{fontWeight: 'bold', color: '#19BBBB'}}>Update File</Typography>
</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 && (
<TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Stack>
<input
type="file"
id={`fileDocsID`}
ref={fileDocsInput}
style={{ display: 'none' }}
onChange={(event) => {
handleDocsInputChange(corporate_id)(event);
}}
accept="application/pdf"
multiple
/>
<Button
variant="outlined"
onClick={() => {
fileDocsInput.current.click();
}}
sx={{ width: 'fit-content' }}
>
<Iconify icon="eva:plus-fill" />
<span>Update Docs</span>
</Button>
</Stack> </Stack>
</TableCell> </Button>
)} </Stack>
</TableRow>
))}
{!showAll && fileDocs.length > 1 && (
<TableRow>
<TableCell>
<span onClick={() => setShowAll(true)} style={{ color: 'blue', cursor: 'pointer' }}>Lihat Semua Data</span>
</TableCell>
</TableRow>
)} )}
{showAll && ( </Stack>
<TableRow> )}
<TableCell> {fileDocs.slice(0, showAll ? fileDocs.length : 1).map((file, index) => (
<span onClick={() => setShowAll(false)} style={{ color: 'blue', cursor: 'pointer' }}>Sembunyikan Data</span> <Stack spacing={2} direction='row' sx={{...style1}}>
</TableCell> <a
</TableRow> href={file.path}
)} style={{ cursor: 'pointer', textDecoration: 'underline', color: '#19BBBB' }}
{fileDocs.length <= 0 && ( target="_blank"
<TableRow> >
<TableCell sx={headStyle}>Please add a Terms & Conditions document</TableCell> <Typography variant='body2' sx={{color: '#19BBBB'}}>{file.original_name}</Typography>
<TableCell> </a>
<Stack> </Stack>
<input ))}
type="file" {!showAll && fileDocs.length > 1 && (
id={`fileDocsID`} <Stack spacing={2} direction='row' sx={{...style1}}>
ref={fileDocsInput} <Typography variant='body2' onClick={() => setShowAll(true)} style={{ color: '#19BBBB', cursor: 'pointer' }}>Lihat Semua Data</Typography>
style={{ display: 'none' }} </Stack>
onChange={(event) => { )}
handleDocsInputChange(corporate_id)(event); {showAll && (
}} <Stack spacing={2} direction='row' sx={{...style1}}>
accept="application/pdf" <Typography variant='body2' onClick={() => setShowAll(false)} style={{ color: '#19BBBB', cursor: 'pointer' }}>Sembunyikan Data</Typography>
// multiple </Stack>
/> )}
<LoadingButton {fileDocs.length <= 0 && (
variant="outlined" <Stack spacing={2} direction='row' sx={{...style1}} alignItems="center">
onClick={() => { <Typography variant='body2' sx={{...style2}}>Please add a Terms & Conditions document</Typography>
fileDocsInput.current.click(); <Stack direction='row' sx={{width: '50%'}} alignItems="center">
}} <input
> type="file"
<Iconify icon="eva:plus-fill" /> id={`fileDocsID`}
<span>Add Docs</span> ref={fileDocsInput}
</LoadingButton> style={{ display: 'none' }}
</Stack> onChange={(event) => {
</TableCell> handleDocsInputChange(corporate_id)(event);
</TableRow> }}
)} accept="application/pdf"
</TableBody> // multiple
</Table> />
<LoadingButton
variant="outlined"
onClick={() => {
fileDocsInput.current.click();
}}
>
<Stack alignItems="center" direction="row" spacing={1}>
<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>
</Stack>
</Stack>
)}
</Grid> </Grid>
</Grid> </Grid>
</Stack> </Stack>
</Card> </Card>