69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
// 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 Detail() {
|
|
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>
|
|
);
|
|
} |