aso/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx

// mui
import {
  Box,
  Tabs,
  Tab,
  IconButton,
  Container,
  Grid,
  Card,
  Stack,
  Typography,
} from '@mui/material';
import { styled } from '@mui/material/styles';
import { Favorite } from '@mui/icons-material';
// components
import Page from '../../components/Page';
import Iconify from '../../components/Iconify';
// utils
import useSettings from '../../hooks/useSettings';
import { useState, SyntheticEvent, useContext, useEffect } from 'react';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { useNavigate, useParams } from 'react-router-dom';
import axios from '../../utils/axios';



// sections
// import ListTable from '../../sections/claimreports/ListTable';
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      style={{ backgroundColor: '#F9FAFB' }}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

function a11yProps(index: number) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

interface StyledTabsProps {
  children?: React.ReactNode;
  value: number;
  onChange: (event: React.SyntheticEvent, newValue: number) => void;
}

const StyledTabs = styled((props: StyledTabsProps) => <Tabs {...props} />)({
  '& .MuiTabs-indicator': {
    display: 'flex',
    justifyContent: 'center',
    backgroundColor: 'transparent',
  },
  '& .MuiTabs-indicatorSpan': {
    maxWidth: 40,
    width: '100%',
    backgroundColor: '#635ee7',
  },
});

interface StyledTabProps {
  label: string;
  icon?: string | React.ReactElement;
}

const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(
  ({ theme }) => ({
    textTransform: 'none',
    fontWeight: 500,
    fontSize: theme.typography.pxToRem(20),
    color: theme.palette.primary.main,
    maxWidth: '100%',
    flex: 1,
    margin: '0 !important',
    '&.Mui-selected': {
      color: '#FFF',
      backgroundColor: theme.palette.primary.main,
    },
    '&:hover': {
      backgroundColor: theme.palette.primary.dark,
      color: '#FFF',
      opacity: 1,
    },
  })
);



export default function ServiceMonitoring() {
  const { themeStretch } = useSettings();
  const navigate = useNavigate();


  const [value, setValue] = useState(0);
  const handleChange = (event: SyntheticEvent, newValue: number) => {
    setValue(newValue);

  };

  const [data, setData] = useState({});
  const [data1, setData1] = useState();
  
  

  const {corporateValue} = useContext(UserCurrentCorporateContext);
  const {id} = useParams();
  const claimId = '2'
  console.log('id',id);

  useEffect (() => {

    console.log('fetching data...')
    axios.get('/data/'+id )
      .then(response => {
        console.log('data fetched...', response.data)
        setData(response.data);
        
      })
      .catch(error => {
        console.error('error fetching data...', error);
      });
  }, []);

  console.log('Data:' , data);

  const [encounterData, setEncounterData] = useState({});

  useEffect(() => {
    console.log('fetching encounter data...');
    axios.get('/claims/${claim_id}/encounters')
      .then(response => {
        console.log('encounter data fetched...', response.data);
        setEncounterData(response.data);
      })
      .catch(error => {
        console.error('error fetching encounter data...', error);
      });
  }, []);
 


  return (
    <Page title="Service Monitoring 123456">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
          <IconButton onClick={() => 
          navigate('/alarm-center')
        }
             sx={{ marginRight: '10px', color: '#424242' }}>
            <Iconify icon="heroicons-outline:arrow-narrow-left" />
          </IconButton>
          <Typography variant="h5">Service Monitoring</Typography>
          <Stack
            direction="row"
            alignItems="center"
            sx={{
              backgroundColor: '#DFE3E8',
              color: '#212B36',
              paddingX: 2,
              paddingY: 1,
              marginLeft: 3,
              borderRadius: 1,
            }}
          >
            <Iconify icon="akar-icons:check" sx={{ marginRight: 1 }} />
            <Typography variant="caption">Done</Typography>
          </Stack>
        </Stack>
        <Grid container spacing={3} sx={{ marginBottom: 5 }}>
          {/* Item 1 */}
          <Grid item xs={4} lg={4} md={6}>
            <Card sx={{ borderRadius: '6px' }}>
              <Stack>
                <Stack
                  direction="row"
                  alignItems="center"
                  sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
                >
                  <Iconify icon="bxs:user" width={22} height={18} sx={{ marginRight: '10px' }} />
                  <Typography>Employee Profiles</Typography>
                </Stack>
                <Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
                  <Stack spacing={2}>
                    <Stack>
                      <Typography variant="caption">Nama perusahaan</Typography>
                      <Typography variant="body2">{corporateValue}</Typography>
                    </Stack>
                    <Stack>
                <Typography variant="caption">Nama Lengkap</Typography>
                <Typography variant="body2">{data.name || 'Loading...'}</Typography>
              </Stack>
                    <Stack>
                      <Typography variant="caption">Tanggal lahir</Typography>
                      <Typography variant="body2">{data.birth_date}</Typography>
                    </Stack>
                    <Stack>
                      <Typography variant="caption">Email</Typography>
                      <Typography variant="body2">{data.email}</Typography>
                    </Stack>
                    <Stack>
                      <Typography variant="caption">No telepon</Typography>
                      <Typography variant="body2">{data.phone}</Typography>
                    </Stack>
                  </Stack>
                  <Stack>
                    <Typography variant="caption">ID Karyawan</Typography>
                    <Typography variant="body2">12345678</Typography>
                  </Stack>
                </Stack>
              </Stack>
            </Card>
          </Grid>
          {/* Item 2 */}
          <Grid item xs={4} lg={4} md={6}>
            <Card sx={{ borderRadius: '6px', height: '100%' }}>
              <Stack>
                <Stack
                  direction="row"
                  alignItems="center"
                  sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
                >
                  <Iconify
                    icon="heroicons-solid:clipboard-list"
                    width={22}
                    height={18}
                    sx={{ marginRight: '10px' }}
                  />
                  <Typography>Diagnose Summary</Typography>
                </Stack>
                <Stack spacing={2} sx={{ paddingY: 1, paddingX: 2 }}>
                  <Stack>
                    <Typography variant="caption">Gejala</Typography>
                    <Typography variant="body2">Nyeri dada</Typography>
                  </Stack>
                  <Stack>
                    <Typography variant="caption">Tanda</Typography>
                    <Typography variant="body2">Sesak Napas</Typography>
                  </Stack>
                  <Stack>
                    <Typography variant="caption">Main Diagnose</Typography>
                    <Typography variant="body2">
                      J46 Status asthmaticus, Acute severe asthma
                    </Typography>
                  </Stack>
                  <Stack>
                    <Typography variant="caption">Diagnosis pembanding</Typography>
                    <Typography variant="body2">K21 Gastro-oesophageal reflux disease</Typography>
                  </Stack>
                </Stack>
              </Stack>
            </Card>
          </Grid>
          {/* Item 3 */}
          <Grid item xs={4} lg={4} md={6}>
            <Card sx={{ borderRadius: '6px', height: '100%' }}>
              <Stack>
                <Stack
                  direction="row"
                  alignItems="center"
                  sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
                >
                  <Iconify
                    icon="iconoir:healthcare"
                    width={22}
                    height={18}
                    sx={{ marginRight: '10px' }}
                  />
                  <Typography>Services</Typography>
                </Stack>
                <Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
                  <Stack spacing={2}>
                    <Stack>
                      <Typography variant="caption">Evakuasi medis</Typography>
                      <Typography variant="body2">Land Transportation</Typography>
                    </Stack>
                    <Stack>
                      <Typography variant="caption">Rumah sakit</Typography>
                      <Typography variant="body2">Primaya Hospital</Typography>
                    </Stack>
                    <Stack direction="row" spacing={16}>
                      <Stack>
                        <Typography variant="caption">Tanggal mulai</Typography>
                        <Typography variant="body2">17 Aug 2022</Typography>
                      </Stack>
                      <Stack>
                        <Typography variant="caption">Selesai</Typography>
                        <Typography variant="body2">18 Aug 2022</Typography>
                      </Stack>
                    </Stack>
                    <Stack>
                      <Typography variant="caption">Daftar layanan</Typography>
                      <Typography variant="body2">
                        Inpatient, Medivac (Medical Evacuation)
                      </Typography>
                    </Stack>
                  </Stack>
                </Stack>
              </Stack>
            </Card>
          </Grid>
          <Grid item sm>
            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
              <StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
                <StyledTab icon={<Favorite />} label="Daily Monitoring" {...a11yProps(0)} />
                <StyledTab
                  icon={<Iconify icon="heroicons-solid:beaker" />}
                  label="Laboratorium Result"
                  {...a11yProps(1)}
                />
              </StyledTabs>
            </Box>
            <TabPanel value={value} index={0}>
              Item One
            </TabPanel>
            <TabPanel value={value} index={1}>
              Item Two
            </TabPanel>
          </Grid>
        </Grid>
      </Container>
    </Page>
  );
}