LMSN-217

Update slicing hospital portal

frontend/hospital-portal/src/sections/dashboard/Detail.tsx

@@ -0,0 +1,67 @@
+// 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';
+// pages
+import DetailTimeline from '../../sections/dashboard/DetailTimeline';
+import DetailStepper from '../../sections/dashboard/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 { id } = useParams();
+
+  useEffect(() => {
+    axios
+      .get('/detail-claim-requests/' + 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>
+  );
+}