LMSN-218
Improve Slicing bagian detail dashboard di Corporate Prime Center
This commit is contained in:
ivan-sim
@@ -116,7 +116,12 @@ export default function Corporates() {
|
||||
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 (
|
||||
<Page title="Dashboard">
|
||||
|
||||
@@ -136,170 +141,137 @@ export default function Corporates() {
|
||||
|
||||
{/* <Container maxWidth={themeStretch ? false : 'xl'}> */}
|
||||
<Card>
|
||||
<Stack spacing="3">
|
||||
<Stack spacing="2">
|
||||
<CorporateTabNavigations position=""/>
|
||||
<Grid container spacing={3}>
|
||||
|
||||
<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 sx={{ p:2 }}>
|
||||
<Typography variant='subtitle1' sx={{...headStyle, px:4, marginTop: 2}}>Current Policy </Typography>
|
||||
<Stack spacing={2} direction='row' sx={{...style1}}>
|
||||
<Typography variant='body2' sx={{...style2}}>Policy Name</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 Premi</Typography>
|
||||
<Typography variant='body2' sx={{...style3}}>{fCurrency(corporate?.current_policy?.total_premi)}</Typography>
|
||||
</Stack>
|
||||
<Stack spacing={2} direction='row' sx={{...style1}}>
|
||||
<Typography variant='body2' sx={{...style2}}>Stop Service</Typography>
|
||||
<Typography variant='body2' sx={{...style3}}>{fCurrency(corporate?.current_policy?.minimal_stop_service_net)}</Typography>
|
||||
</Stack>
|
||||
<Stack spacing={2} direction='row' sx={{...style1}}>
|
||||
<Typography variant='body2' sx={{...style2}}>Balance</Typography>
|
||||
<Typography variant='body2' sx={{...style3}}>{fCurrency(corporate?.current_policy?.limit_balance)}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
|
||||
<Grid item md={6} sx={{ p:2 }}>
|
||||
<Typography sx={{...headStyle, px:3, fontSize:'24px'}}>Claims</Typography>
|
||||
|
||||
<Table>
|
||||
<TableBody>
|
||||
<Grid sx={{ p:2 }}>
|
||||
<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>
|
||||
|
||||
<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 && (
|
||||
<TableRow>
|
||||
<TableCell sx={headStyle}>ASO members can download or not?</TableCell>
|
||||
<TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
|
||||
</Grid>
|
||||
<Grid sx={{ p:2 }}>
|
||||
<Typography variant='subtitle1' sx={{...headStyle, px:4, marginTop: 2}}>Docs (Terms & Conditions)</Typography>
|
||||
{fileDocs.length > 0 && (
|
||||
<Stack spacing={2} direction='row' sx={{...style1}} alignItems="center">
|
||||
<Stack direction='row' sx={{width: '50%'}} alignItems="center">
|
||||
<Typography variant='body2' sx={{color: '#919EAB', marginRight: 2}}>ASO members can download or not?</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color={isActive ? "success" : "error"}
|
||||
size="small"
|
||||
onClick={toggleButton}
|
||||
>
|
||||
<Typography variant='body3' sx={{fontWeight: 'bold'}}>{isActive ? 'Active' : 'Inactive'}</Typography>
|
||||
</Button>
|
||||
</Stack>
|
||||
{!showAll && (
|
||||
<Stack direction='row' sx={{width: '50%'}} alignItems="center">
|
||||
<input
|
||||
type="file"
|
||||
id={`fileDocsID`}
|
||||
ref={fileDocsInput}
|
||||
style={{ display: 'none' }}
|
||||
onChange={(event) => {
|
||||
handleDocsInputChange(corporate_id)(event);
|
||||
}}
|
||||
accept="application/pdf"
|
||||
multiple
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color={isActive ? "success" : "error"}
|
||||
size="small"
|
||||
onClick={toggleButton}
|
||||
onClick={() => {
|
||||
fileDocsInput.current.click();
|
||||
}}
|
||||
sx={{ width: 'fit-content', color: '#19BBBB' }}
|
||||
>
|
||||
{isActive ? 'Active' : 'Inactive'}
|
||||
</Button>
|
||||
</TableCell>
|
||||
</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 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'}}>Update File</Typography>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
))}
|
||||
{!showAll && fileDocs.length > 1 && (
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<span onClick={() => setShowAll(true)} style={{ color: 'blue', cursor: 'pointer' }}>Lihat Semua Data</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</Button>
|
||||
</Stack>
|
||||
)}
|
||||
{showAll && (
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<span onClick={() => setShowAll(false)} style={{ color: 'blue', cursor: 'pointer' }}>Sembunyikan Data</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
{fileDocs.length <= 0 && (
|
||||
<TableRow>
|
||||
<TableCell sx={headStyle}>Please add a Terms & Conditions document</TableCell>
|
||||
<TableCell>
|
||||
<Stack>
|
||||
<input
|
||||
type="file"
|
||||
id={`fileDocsID`}
|
||||
ref={fileDocsInput}
|
||||
style={{ display: 'none' }}
|
||||
onChange={(event) => {
|
||||
handleDocsInputChange(corporate_id)(event);
|
||||
}}
|
||||
accept="application/pdf"
|
||||
// multiple
|
||||
/>
|
||||
<LoadingButton
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
fileDocsInput.current.click();
|
||||
}}
|
||||
>
|
||||
<Iconify icon="eva:plus-fill" />
|
||||
<span>Add Docs</span>
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
|
||||
|
||||
</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 && (
|
||||
<Stack spacing={2} direction='row' sx={{...style1}}>
|
||||
<Typography variant='body2' onClick={() => setShowAll(true)} style={{ color: '#19BBBB', cursor: 'pointer' }}>Lihat Semua Data</Typography>
|
||||
</Stack>
|
||||
)}
|
||||
{showAll && (
|
||||
<Stack spacing={2} direction='row' sx={{...style1}}>
|
||||
<Typography variant='body2' onClick={() => setShowAll(false)} style={{ color: '#19BBBB', cursor: 'pointer' }}>Sembunyikan Data</Typography>
|
||||
</Stack>
|
||||
)}
|
||||
{fileDocs.length <= 0 && (
|
||||
<Stack spacing={2} direction='row' sx={{...style1}} alignItems="center">
|
||||
<Typography variant='body2' sx={{...style2}}>Please add a Terms & Conditions document</Typography>
|
||||
<Stack direction='row' sx={{width: '50%'}} alignItems="center">
|
||||
<input
|
||||
type="file"
|
||||
id={`fileDocsID`}
|
||||
ref={fileDocsInput}
|
||||
style={{ display: 'none' }}
|
||||
onChange={(event) => {
|
||||
handleDocsInputChange(corporate_id)(event);
|
||||
}}
|
||||
accept="application/pdf"
|
||||
// multiple
|
||||
/>
|
||||
<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>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user