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

LMSN-212

Browse Source 
Client/User dapat melihat Claim Report di client portal
This commit is contained in:
ivan-sim
2023-10-12 14:38:16 +07:00
parent c767c676f4
commit 6b931a904d
14 changed files with 757 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/client-portal/src/pages/ClaimReport/Detail.tsx Normal file
View File

@@ -0,0 +1,69 @@
// mui
import { Container, Grid, Stack, Typography } from '@mui/material';
// components
import Page from '../../components/Page';
// utils
import useSettings from '../../hooks/useSettings';
// section
import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
// react
import { useNavigate, useParams } from 'react-router-dom';
import ButtonBack from '../../components/ButtonBack';
import { useEffect, useState, useContext } from 'react';
import axios from '../../utils/axios';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
// pages
import DetailTimeline from '../../pages/ClaimReport/DetailTimeline';
import DetailStepper from '../../pages/ClaimReport/DetailStepper';
import { format } from 'date-fns';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
// ----------------------------------------------------------------------
export default function UserProfile() {
const navigate = useNavigate();
const { themeStretch } = useSettings();
const [data, setData] = useState();
const { corporateValue } = useContext(UserCurrentCorporateContext);
const { id } = useParams();
useEffect(() => {
axios
.get(corporateValue + '/claim-report/detail/' + id)
.then((response) => {
setData(response.data);
})
.catch((error) => {
console.error(error);
});
}, []);
return (
<Page title="Detail">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
<ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
<Typography variant="h5" sx={{marginLeft:2}}>Detail</Typography>
{data ? (
<Stack direction="row" spacing={2} ml="auto">
<Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>
<Typography variant="body2" fontWeight="bold">{(data && data.data) ? format(new Date(data.data.status.submission_date), "d MMM yyyy") : ''}</Typography>
</Stack>
) : ''}
</Stack>
{data ? (
<Grid container spacing={2}>
<Grid item xs={12} md={12}>
<DetailStepper data={data}/>
</Grid>
<Grid item xs={12} md={12}>
<DetailTimeline data={data}/>
</Grid>
</Grid>
) : ''}
</Container>
</Page>
);
}

291
frontend/client-portal/src/pages/ClaimReport/DetailHistory.tsx Normal file
View File

@@ -0,0 +1,291 @@
// mui
import {
Container,
Grid,
Stack,
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Button,
Box,
TableSortLabel,
Avatar } from '@mui/material';
// components
import Page from '../../components/Page';
// utils
import useSettings from '../../hooks/useSettings';
// section
import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
// react
import { useNavigate, useParams } from 'react-router-dom';
import ButtonBack from '../../components/ButtonBack';
import { useEffect, useState, useContext } from 'react';
import axios from '../../utils/axios';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { format } from 'date-fns';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import { fCurrency } from '../../utils/formatNumber';
// ----------------------------------------------------------------------
export default function DetailHistory() {
const navigate = useNavigate();
const { themeStretch } = useSettings();
const [data, setData] = useState();
const { corporateValue } = useContext(UserCurrentCorporateContext);
const { id } = useParams();
useEffect(() => {
axios
.get(corporateValue + '/claim-report/detail-history/' + id)
.then((response) => {
setData(response.data);
})
.catch((error) => {
console.error(error);
});
}, []);
console.log(data?.data?.claim_item.length);
return (
<Page title="Detail">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
<ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
<Typography variant="h5" sx={{marginLeft:2}}>History</Typography>
</Stack>
{data ? (
<Grid container spacing={3}>
<Grid item xs={12} md={12}>
<Stack direction="row" sx={{marginBottom:2}}>
<Typography variant="body2" sx={{color:'#637381', marginRight:1, flexBasis: '10%'}}>Name</Typography>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.member.name}</Typography>
</Stack>
<Stack direction="row" sx={{marginBottom:2}}>
<Typography variant="body2" sx={{color:'#637381', marginRight:1, flexBasis: '10%'}}>Member ID</Typography>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.member.member_id}</Typography>
</Stack>
<Stack direction="row" sx={{marginBottom:2}}>
<Typography variant="body2" sx={{color:'#637381', marginRight:1, flexBasis: '10%'}}>Claim Code</Typography>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.member.code}</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={12}>
<TableContainer>
<Table aria-label="collapsible table" size="small">
{/* Table Header */}
<TableHead>
<TableRow>
<TableCell
align= 'left'
sx={{ padding: 2 }}
width= '5%'
>
<Typography variant="body2" sx={{color:'#637381'}}>No</Typography>
</TableCell>
<TableCell
align= 'left'
sx={{ padding: 2 }}
width= '15%'
>
<Typography variant="body2" sx={{color:'#637381'}}>Date</Typography>
</TableCell>
<TableCell
align= 'left'
sx={{ padding: 2 }}
width= '20%'
>
<Typography variant="body2" sx={{color:'#637381'}}>Requirment</Typography>
</TableCell>
<TableCell
align= 'left'
sx={{ padding: 2 }}
width= '20%'
>
<Typography variant="body2" sx={{color:'#637381'}}>Request Claim</Typography>
</TableCell>
<TableCell
align= 'left'
sx={{ padding: 2 }}
width= '20%'
>
<Typography variant="body2" sx={{color:'#637381'}}>Approval Claim</Typography>
</TableCell>
</TableRow>
</TableHead>
{/* End Table Header */}
{/* Table Body */}
<TableBody>
{data?.data?.claim_item?.length === 0 ? (
<TableRow>
<TableCell colSpan={5} align="center">
<Typography variant="body2">No data available</Typography>
</TableCell>
</TableRow>
) : (
data.data.claim_item?.map((dataItem, index) => (
<TableRow key={index}>
<TableCell align="left">
<Typography variant="body2">{dataItem.claim_item_number}</Typography>
</TableCell>
<TableCell align="center">
<Typography
sx={{
backgroundColor: '#919EAB29',
color: '#637381',
borderRadius: '4px',
width: '70%',
}}
variant="body2"
>
{format(new Date(dataItem.submission_date), "d MMM yyyy")}
</Typography>
</TableCell>
<TableCell align="left">
{dataItem.description}
</TableCell>
<TableCell align="left">
{fCurrency(dataItem.nominal_ditagihkan)}
</TableCell>
<TableCell align="left">
{fCurrency(dataItem.nominal_dicover)}
</TableCell>
</TableRow>
))
)}
</TableBody>
{/* End Table Body */}
</Table>
</TableContainer>
</Grid>
<Grid item xs={12} md={12}>
<TableContainer>
<Table aria-label="collapsible table" size="small">
{/* Table Body */}
<TableBody>
<TableRow sx={{ borderBottom: 0 }}>
<TableCell
align= 'left'
width= '5%'
>
</TableCell>
<TableCell
align= 'left'
width= '15%'
>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
<Typography variant="body2" sx={{color:'#637381'}}>Request Claim</Typography>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.tot_claim_item.nominal_ditagihkan ? fCurrency(data.data.tot_claim_item.nominal_ditagihkan) : '-'}</Typography>
</TableCell>
</TableRow>
<TableRow sx={{ borderBottom: 0 }}>
<TableCell
align= 'left'
width= '5%'
>
</TableCell>
<TableCell
align= 'left'
width= '15%'
>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
<Typography variant="body2" sx={{color:'#637381'}}>Approval Claim</Typography>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
<Typography variant="body2" sx={{fontWeight: 'bold', color: '#FF4842'}}>{data.data.tot_claim_item.nominal_dicover ? fCurrency(data.data.tot_claim_item.nominal_dicover) : '-'}</Typography>
</TableCell>
</TableRow>
<TableRow sx={{ borderBottom: 0 }}>
<TableCell
align= 'left'
width= '5%'
>
</TableCell>
<TableCell
align= 'left'
width= '15%'
>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>Difference</Typography>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.tot_claim_item.difference ? fCurrency(data.data.tot_claim_item.difference) : '-'}</Typography>
</TableCell>
</TableRow>
</TableBody>
{/* End Table Body */}
</Table>
</TableContainer>
<Stack
direction="row"
justifyContent="flex-end"
alignItems="flex-end"
sx={{ marginTop: 15, padding: 2 }}
spacing={1}
>
<Typography variant="body2" sx={{ fontStyle: 'italic', color: '#637381' }}>Note : Apabila terdapat perbedaan nominal silahkan hubungi kami </Typography>
<img alt="Gmail Icon" sx={{ height: 32, width: 30 }} src="/icons/ic_gmail.svg" />
</Stack>
</Grid>
</Grid>
) : ''}
</Container>
</Page>
);
}

58
frontend/client-portal/src/pages/ClaimReport/DetailStepper.tsx Normal file
View File

@@ -0,0 +1,58 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import { useEffect, useState } from 'react';
import ClearIcon from '@mui/icons-material/Clear';
const steps = [
'Request',
'Review',
'Approval',
'Decline',
];
export default function HorizontalLinearAlternativeLabelStepper({data}) {
const [active, setActive] = useState(0);
const [status, SetStatus] = useState(null);
let updatedSteps = [...steps];
useEffect(() => {
if (data && data.data) {
if (data.data.status.status === 'requested') {
setActive(1);
updatedSteps = updatedSteps.filter(step => step !== 'Decline');
}
else if (data.data.status.status === 'reviewed') {
setActive(2);
updatedSteps = updatedSteps.filter(step => step !== 'Decline');
}
else if (data.data.status.status === 'approved')
{
setActive(3);
updatedSteps = updatedSteps.filter(step => step !== 'Decline');
}
else if(data.data.status.status === 'declined')
{
setActive(4)
updatedSteps = updatedSteps.filter(step => step !== 'Approval');
}
}
SetStatus(updatedSteps);
}, [data]);
return (
<Box sx={{ width: '100%', marginBottom: 2 }}>
<Stepper activeStep={active} alternativeLabel>
{status?.map((label) => (
<Step key={label}>
<StepLabel icon={label==='Decline' ? <ClearIcon sx={{ color: 'white', backgroundColor: 'red', borderRadius: '50%' }} /> : ''}>{label}</StepLabel>
</Step>
))}
</Stepper>
</Box>
);
}

108
frontend/client-portal/src/pages/ClaimReport/DetailTimeline.tsx Normal file
View File

@@ -0,0 +1,108 @@
import * as React from 'react';
import Timeline from '@mui/lab/Timeline';
import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
import TimelineSeparator from '@mui/lab/TimelineSeparator';
import TimelineConnector from '@mui/lab/TimelineConnector';
import TimelineContent from '@mui/lab/TimelineContent';
import TimelineDot from '@mui/lab/TimelineDot';
import {Typography, Card, Stack} from '@mui/material';
import { styled } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import Button from '@mui/material/Button';
import AddIcon from '@mui/icons-material/Add';
import Iconify from '../../components/Iconify';
import { useEffect, useState } from 'react';
import { format } from 'date-fns';
const Item1 = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
backgroundColor: '#919EAB29',
color: '#637381',
width: 'fit-content',
marginRight: 'auto',
}));
const Item2 = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
width: 'fit-content',
marginLeft: 'auto',
}));
export default function NoOppositeContent({data}) {
const [timeline, setTimeline] = useState(null);
const [requestFile, setRequestFile] = useState(null);
useEffect(() => {
if (data && data.data) {
setTimeline(data.data.timeline);
setRequestFile(data.data.request_files);
}
}, [data]);
console.log(timeline);
console.log(requestFile);
return (
<>
{timeline?.map((dataTimeline, index) => (
<Timeline
sx={{
[`& .${timelineItemClasses.root}:before`]: {
flex: 0,
padding: 0,
},
}}
key={index}
>
<Typography variant="body2" gutterBottom fontWeight="bold">{dataTimeline.date ? format(new Date(dataTimeline.date), "d MMM yyyy") : ''}</Typography>
<TimelineItem>
<TimelineSeparator>
<TimelineDot />
<TimelineConnector />
</TimelineSeparator>
<TimelineContent spacing={3}>
<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
<Stack sx={{marginLeft: 2, marginRight: 2, marginTop: 2 }}>
<Stack direction="row" spacing={2} sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }}>
<Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : ii") : ''}</Item1>
<Item2 sx={{backgroundColor: dataTimeline.txt_status_backgroundColor, color: dataTimeline.txt_status_color}}>{dataTimeline.txt_status}</Item2>
</Stack>
<Stack direction="row" spacing={2} sx={{marginBottom: 2}}>
<Typography variant="body2" gutterBottom>Detail:</Typography>
<Typography variant="body2" gutterBottom>{dataTimeline.description}</Typography>
</Stack>
{dataTimeline.status === 'reviewed' && requestFile ? (
<>
{requestFile?.map((dataRequestFile, index) => (
<Stack spacing={2} sx={{marginBottom: 2}} key={index}>
<Typography variant="body2" gutterBottom fontWeight="bold">{dataRequestFile.description}</Typography>
<Button variant="outlined" color="primary" startIcon={< AddIcon/>}>
<Typography variant="button" display="block">
{dataRequestFile.type === 'claim-diagnosis' ?
'Dokumen Diagnosa'
: dataRequestFile.type === 'claim-kondisi' ?
'Dokumen Kondisi'
: dataRequestFile.type === 'claim-result' ?
'Dokumen Hasil Penunjang'
: ''}
</Typography>
</Button>
</Stack>
))}
</>
) : ''}
</Stack>
</Card>
</TimelineContent>
</TimelineItem>
</Timeline>
))}
</>
);
}

10
frontend/client-portal/src/pages/ClaimReport/List.tsx
View File

@@ -53,7 +53,7 @@ export default function List() {
/* ------------------------------ handle order ------------------------------ */
const [order, setOrder] = useState<Order>('desc');
const [orderBy, setOrderBy] = useState('code');
const [orderBy, setOrderBy] = useState('member_id');
const orders = {
order: order,
@@ -174,8 +174,6 @@ export default function List() {
params: { ...parameters, type: 'claim-report' },
});
console.log(response.data.data);
setData(
response.data.data.map((obj: any) => ({
...obj,
@@ -244,7 +242,7 @@ export default function List() {
>
Pending
</Typography>
) : obj.status === 'review' ? (
) : obj.status === 'reviewed' ? (
<Typography
variant="body2"
sx={{
@@ -292,11 +290,11 @@ export default function List() {
action:
<TableMoreMenu actions={
<>
<MenuItem onClick={() => navigate ('/employee-data/user-profile/'+obj.personId)}>
<MenuItem onClick={() => navigate ('/claim-report/detail/'+obj.claimRequestId)}>
<SearchIcon />
Detail
</MenuItem>
<MenuItem onClick={() => navigate ('/employee-data/user-profile/'+obj.personId)}>
<MenuItem onClick={() => navigate ('/claim-report/detail-history/'+obj.claimRequestId)}>
<HistoryIcon />
History
</MenuItem>

11
frontend/client-portal/src/pages/EmployeeData/UserProfile.tsx
View File

@@ -17,12 +17,13 @@ import ButtonBack from '../../components/ButtonBack';
import { useEffect, useState, useContext } from 'react';
import axios from '../../utils/axios';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
// ----------------------------------------------------------------------
export default function UserProfile() {
const { themeStretch } = useSettings();
// const navigate = useNavigate();
const navigate = useNavigate();
const [data, setData] = useState();
const { corporateValue } = useContext(UserCurrentCorporateContext);
@@ -44,13 +45,14 @@ export default function UserProfile() {
return (
<Page title="Profile">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
{/* <IconButton sx={{ marginRight: '10px', color: '#424242' }} onClick={() => navigate()}>
<Iconify icon="heroicons-outline:arrow-narrow-left" />
</IconButton> */}
<ButtonBack />
<Typography variant="h5">Profile</Typography>
<ArrowBackIosIcon sx={{cursor:'pointer'}} onClick={() => navigate(-1)}/>
<Typography variant="h5" sx={{marginLeft:2}}>Profile</Typography>
</Stack>
{data ? (
<Grid container spacing={2}>
{/* Row 1 */}
<Grid item xs={12} md={12}>
@@ -60,6 +62,7 @@ export default function UserProfile() {
<CardFamilyInformation data={data} />
</Grid>
</Grid>
) : ''}
</Container>
</Page>
);

10
frontend/client-portal/src/routes/index.tsx
View File

@@ -168,9 +168,13 @@ export default function Router() {
index: true,
},
{
path: 'dialog-detail/:id',
element: <DialogDetailClaim />,
path: '/claim-report/detail/:id',
element: <DetailClaimReport />,
},
{
path: '/claim-report/detail-history/:id',
element: <DetailHitoryClaimReport />,
}
],
},
{
@@ -252,6 +256,8 @@ const ClaimReport = Loadable(lazy(() => import('../pages/ClaimReport/Index')));
const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
const ClaimShow = Loadable(lazy(() => import('../pages/Claims/Show')));
const DialogDetailClaim = Loadable(lazy(()=> import('../pages/ClaimReport/DialogDetailClaim')));
const DetailClaimReport = Loadable(lazy(()=> import('../pages/ClaimReport/Detail')));
const DetailHitoryClaimReport = Loadable(lazy(()=> import('../pages/ClaimReport/DetailHistory')));
// Claim submit
const ClaimSubmit = Loadable(lazy(() => import('../pages/ClaimSubmit/Index')));