aso/frontend/dashboard/src/pages/CustomerService/Components/CardBenefit.tsx

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 DialogDeleteBenefit from "../FinalLog/Components/DialogDeleteBenefit";



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 */}
                    <DialogDeleteBenefit 
                        id={idBenefitData}
                        openDialog={openDialogDeleteBenefit}
                        setOpenDialog={setDialogDeleteBenefit}
                    />
        
    </Card>
    )
   
}