Update customer service
This commit is contained in:
@@ -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>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Card, Typography } from "@mui/material";
|
||||
import { Stack } from '@mui/material';
|
||||
import { DetailFinalLogType } from "../FinalLog/Model/Types";
|
||||
import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
|
||||
|
||||
|
||||
type CardDetail = {
|
||||
requestLog: DetailFinalLogType|undefined;
|
||||
}
|
||||
|
||||
const style1 = {
|
||||
color: '#919EAB',
|
||||
width: '30%'
|
||||
}
|
||||
const style2 = {
|
||||
width: '70%'
|
||||
}
|
||||
const marginBottom1 = {
|
||||
marginBottom: 1,
|
||||
}
|
||||
const marginBottom2 = {
|
||||
marginBottom: 2,
|
||||
}
|
||||
|
||||
|
||||
export default function CardFile({requestLog} : CardDetail ) {
|
||||
return (
|
||||
<Card sx={{padding:2}} >
|
||||
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
||||
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
|
||||
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Files History</Typography>
|
||||
{requestLog?.files?.map((documentType, index) => (
|
||||
<Stack direction="column" spacing={2} key={index}>
|
||||
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
|
||||
<a
|
||||
href={documentType.url}
|
||||
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
|
||||
target="_blank"
|
||||
>
|
||||
<Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
|
||||
</a>
|
||||
</Stack>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { Card, Grid, Typography } from "@mui/material";
|
||||
import { Stack } from '@mui/material';
|
||||
import { DetailFinalLogType } from "../FinalLog/Model/Types";
|
||||
import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
|
||||
import DialogMedicine from "../FinalLog/Components/DialogMedicine";
|
||||
import { fNumber } from "@/utils/formatNumber";
|
||||
import { Button } from '@mui/material';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import { useState } from "react";
|
||||
|
||||
type CardDetail = {
|
||||
requestLog: DetailFinalLogType|undefined;
|
||||
}
|
||||
|
||||
const style1 = {
|
||||
color: '#919EAB',
|
||||
width: '30%'
|
||||
}
|
||||
const style2 = {
|
||||
width: '70%'
|
||||
}
|
||||
const marginBottom1 = {
|
||||
marginBottom: 1,
|
||||
}
|
||||
const marginBottom2 = {
|
||||
marginBottom: 2,
|
||||
}
|
||||
|
||||
const [openDialogMedicine, setDialogMedicine] = useState(false);
|
||||
|
||||
|
||||
export default function CardMedicine({requestLog} : CardDetail ) {
|
||||
return (
|
||||
<Card sx={{padding:2}} >
|
||||
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
||||
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Medicine</Typography>
|
||||
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
|
||||
setDialogMedicine(true)
|
||||
}} >
|
||||
<Typography variant="button" display="block">Medicine</Typography>
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
{requestLog?.medicine.map((item, index) => (
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between" // Menempatkan item ke sebelah kiri dan kanan
|
||||
sx={{ marginBottom: 2 }}
|
||||
>
|
||||
<Typography variant='subtitle1'>{item.medicine}</Typography>
|
||||
<Typography variant="subtitle1">Rp. {fNumber(item.price)}</Typography>
|
||||
</Grid>
|
||||
))}
|
||||
|
||||
{/* <DialogMedicine
|
||||
requestLog={requestLog}
|
||||
openDialog={openDialogMedicine}
|
||||
setOpenDialog={setDialogMedicine}
|
||||
/> */}
|
||||
</Card>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
import { Card, Grid, Typography } from "@mui/material";
|
||||
import { Stack } from '@mui/material';
|
||||
import { 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";
|
||||
|
||||
|
||||
|
||||
type CardDetail = {
|
||||
requestLog: DetailFinalLogType|undefined;
|
||||
}
|
||||
|
||||
const style1 = {
|
||||
color: '#919EAB',
|
||||
width: '30%'
|
||||
}
|
||||
const style2 = {
|
||||
width: '70%'
|
||||
}
|
||||
const marginBottom1 = {
|
||||
marginBottom: 1,
|
||||
}
|
||||
const marginBottom2 = {
|
||||
marginBottom: 2,
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default function DetailBenefit({requestLog} : CardDetail ) {
|
||||
return (
|
||||
{requestLog.benefitData?.map((item, index) => (
|
||||
<Box sx={{ marginTop:'10px', marginBottom:'10px', py: '8px', px: '12px', border:'1px solid #919EAB52', borderRadius: '6px'}}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 'bold'}}>
|
||||
{item.description}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={2.5}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="subtitle1" component="div">
|
||||
Amount Incurred*
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={2.5}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="subtitle1" component="div">
|
||||
Amount Approved*
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={2.5}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="subtitle1" component="div">
|
||||
Amount Not Approved*
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={2.5}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="subtitle1" component="div">
|
||||
Excess Paid*
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={2}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="subtitle1" component="div">
|
||||
Keterangan*
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
)
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user