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

Update customer service

Browse Source
This commit is contained in:
Tb Fajri
2023-12-19 08:56:18 +07:00
parent e76c480ce9
commit 40371bd53a
42 changed files with 1027 additions and 2328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
frontend/dashboard/src/pages/CustomerService/Components/CardBenefit.tsx Normal file
View File

@@ -0,0 +1,214 @@
import { Card, Grid, MenuItem, Typography } from "@mui/material";
import { Stack } from '@mui/material';
import { BenefitData, DetailFinalLogType } from "../FinalLog/Model/Types";
import { useEffect, useState, useRef, useMemo } from 'react';
import { Box } from "@mui/material";
import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import Label from '@/components/Label';
import AddIcon from '@mui/icons-material/Add';
import { Button } from "@mui/material";
import MoreMenu from "@/components/MoreMenu";
import { Delete, EditOutlined } from "@mui/icons-material";
import { fNumber } from "@/utils/formatNumber";
import palette from "@/theme/palette";
import DialogBenefit from "../FinalLog/Components/DialogBenefit";
import DialogEditBenefit from "../FinalLog/Components/DialogEditBenefit";
import DialogDelete from "../FinalLog/Components/DialogDelete";
type CardDetail = {
requestLog: DetailFinalLogType|undefined;
}
const style1 = {
color: '#919EAB',
width: '30%'
}
const style2 = {
width: '70%'
}
const marginBottom1 = {
marginBottom: 1,
}
const marginBottom2 = {
marginBottom: 2,
}
const [openDialogBenefit, setDialogBenefit] = useState(false);
// Handle Edit Detail Benefit
const [openDialogEditBenefit, setDialogEditBenefit] = useState(false)
const [BenefitConfigurationData, setBenefitConfigurationData] = useState<BenefitData>();
// Handel Delete Detail Benefit
const [idBenefitData, setIdBenefitData] = useState<number>();
const [openDialogDeleteBenefit, setDialogDeleteBenefit] = useState(false)
export default function CardBenefit({requestLog} : CardDetail ) {
return (
<Card sx={{padding:2}} >
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Benefit</Typography>
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
setDialogBenefit(true);
}} >
<Typography variant="button" display="block">Benefit</Typography>
</Button>
</Stack>
{requestLog?.benefit_data?.map((item, index) => (
<Box key={index} sx={{ border: '1px solid rgba(0,0,0,0.125)', px: '24px', py: '20px', marginBottom: '24px', borderRadius: '12px'}}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
{item.benefit?.description}
</Typography>
</Grid>
<Grid item xs={6} sx={{ display: 'flex', placeContent: 'end' }}>
<MoreMenu actions={
<>
<MenuItem onClick={() => {
setDialogEditBenefit(true)
setIdBenefitData(item.id)
setBenefitConfigurationData(item)
}}
>
<EditOutlined />
Edit
</MenuItem>
<MenuItem onClick={() => {
setIdBenefitData(item.id)
setDialogDeleteBenefit(true)
}}
>
<Delete color='error'/>
Delete
</MenuItem>
</>
} />
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Box sx={{ py: '8px', px: '12px', background: palette.light.grey[50012], borderRadius: '6px'}}>
<Grid container spacing={1}>
{/* Amount Incurred */}
<Grid item xs={2}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption">
Amount Incurred
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{fNumber(item.amount_incurred)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Amount Approved */}
<Grid item xs={2}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption">
Amount Approved
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{fNumber(item.amount_approved)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Amount Not Approved */}
<Grid item xs={3}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption">
Amount Not Approved
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{fNumber(item.amount_not_approved)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Excess Paid* */}
<Grid item xs={2}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption">
Excess Paid*
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{fNumber(item.excess_paid)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Keterangan* */}
<Grid item xs={3}>
<Grid container>
<Grid item xs={12}>
<Typography variant="caption">
Keterangan*
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{item.keterangan}
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</Grid>
</Grid>
</Box>
))}
<DialogBenefit
requestLog={requestLog}
openDialog={openDialogBenefit}
setOpenDialog={setDialogBenefit}
/>
{/* Dialog Edit */}
<DialogEditBenefit
id={idBenefitData}
data={BenefitConfigurationData}
openDialog={openDialogEditBenefit}
setOpenDialog={setDialogEditBenefit}
>
</DialogEditBenefit>
{/* Dialog Delete */}
<DialogDelete
id={idBenefitData}
openDialog={openDialogDeleteBenefit}
setOpenDialog={setDialogDeleteBenefit}
/>
</Card>
)
}