dialog component, dash & service-monitoring slice

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

@@ -0,0 +1,291 @@
+// mui
+import {
+  Button,
+  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 { useRef, useState, SyntheticEvent } from 'react';
+// 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 Drugs() {
+  const { themeStretch } = useSettings();
+
+  const [value, setValue] = useState(0);
+  const handleChange = (event: SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Page title="Service Monitoring 123456">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
+          <IconButton 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">PT. Amman Mineral</Typography>
+                    </Stack>
+                    <Stack>
+                      <Typography variant="caption">Nama Lengkap</Typography>
+                      <Typography variant="body2">Stephen kuow</Typography>
+                    </Stack>
+                    <Stack>
+                      <Typography variant="caption">Tanggal lahir</Typography>
+                      <Typography variant="body2">09 Aug 1980</Typography>
+                    </Stack>
+                    <Stack>
+                      <Typography variant="caption">Email</Typography>
+                      <Typography variant="body2">Stephen.uow@gmal.com</Typography>
+                    </Stack>
+                    <Stack>
+                      <Typography variant="caption">No telepon</Typography>
+                      <Typography variant="body2">+62 821-8123-2323</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="Item Two"
+                  {...a11yProps(1)}
+                />
+              </StyledTabs>
+            </Box>
+            <TabPanel value={value} index={0}>
+              Item One
+            </TabPanel>
+            <TabPanel value={value} index={1}>
+              Item Two
+            </TabPanel>
+          </Grid>
+        </Grid>
+      </Container>
+    </Page>
+  );
+}

frontend/client-portal/src/pages/Dashboard/Dashboard.tsx

@@ -1,74 +1,17 @@
 // @mui
-import { styled } from '@mui/material/styles';
-import {
-  Button,
-  Card,
-  Typography,
-  Link,
-  Divider,
-  Stack,
-  LinearProgress,
-  linearProgressClasses,
-  Container,
-  Grid,
-} from '@mui/material';
-import { ChevronRight } from '@mui/icons-material';
+import { Typography, Container, Grid } from '@mui/material';
 // hooks
 import useSettings from '../../hooks/useSettings';
-// utils
-import { fCurrency } from '../../utils/formatNumber';
 // components
 import Page from '../../components/Page';
-import Iconify from '../../components/Iconify';
-// import Popup from '../components/Popup';
-// import axios from '../utils/axios';
-// DashboardComponent
-// import BalanceCard from '../sections/dashboard/BalanceCard';
-// import NotificationCard from '../sections/dashboard/NotificationCard';
-// import DashboardTable from '../sections/dashboard/DashboardTable';
-// React
-import { useState } from 'react';
 // Table
 import List from './List';
+// theme
+import CardNotification from '../../sections/dashboard/CardNotification';
+import CardBalance from '../../sections/dashboard/CardBalance';
 
 // ----------------------------------------------------------------------
 
-const RootBalanceStyle = styled(Card)(({ theme }) => ({
-  boxShadow: 'none',
-  padding: theme.spacing(3),
-  color: 'black',
-  backgroundColor: theme.palette.grey[200],
-  maxHeight: '240px',
-}));
-
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
-  height: 10,
-  borderRadius: 6,
-  [`&.${linearProgressClasses.colorPrimary}`]: {
-    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
-  },
-  [`& .${linearProgressClasses.bar}`]: {
-    borderRadius: 6,
-    backgroundColor: theme.palette.primary.main,
-  },
-}));
-
-const RootNotificationStyle = styled(Card)(({ theme }) => ({
-  boxShadow: 'none',
-  padding: '1rem 0.5rem',
-  color: 'black',
-  backgroundColor: theme.palette.grey[200],
-  maxHeight: '240px',
-}));
-
-const ItemNotificationStyle = styled(Card)(({ theme }) => ({
-  boxShadow: 'none',
-  padding: theme.spacing(1),
-  borderRadius: 0.5,
-  color: 'black',
-  maxHeight: '170px',
-}));
-
 const itemList = [
   { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' },
   { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' },
@@ -76,17 +19,11 @@ const itemList = [
   { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
 ];
 
-const INITIAL = '500.000.000';
-const TOTAL = 375000000;
-const PERCENT = 75;
-
 // ----------------------------------------------------------------------
 
 export default function Dashboard() {
   const { themeStretch } = useSettings();
-  const [openPopup, setOpenPopup] = useState(false);
 
-  // const { logout } = useAuth();
   // const [corporate, setCorporate] = useState({});
 
   // const loadSomething = () => {
@@ -113,139 +50,18 @@ export default function Dashboard() {
 
         <Grid container spacing={2}>
           <Grid item xs={6} lg={6} md={12}>
-            <RootNotificationStyle>
-              <Stack direction="row" justifyContent="space-between" alignItems="center">
-                <Typography>
-                  <Typography
-                    variant="body2"
-                    component="span"
-                    sx={{ display: 'flex', alignItems: 'center' }}
-                  >
-                    <Iconify icon="eva:bell-fill" marginRight={0.75} />
-                    Notification
-                    <div
-                      style={{
-                        width: '12px',
-                        height: '12px',
-                        backgroundColor: '#19BBBB',
-                        marginLeft: '0.5rem',
-                        borderRadius: '50%',
-                      }}
-                    />
-                  </Typography>
-                </Typography>
-                <Button sx={{ typography: 'body2' }} endIcon={<ChevronRight />}>
-                  View All
-                </Button>
-              </Stack>
-
-              <Stack sx={{ marginTop: 2 }}>
-                <ItemNotificationStyle>
-                  {itemList.map(({ info, date, time }, key) => (
-                    <div key={key}>
-                      {key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
-                      <Stack direction="row" justifyContent="space-between" alignItems="center">
-                        <Stack
-                          direction="column"
-                          justifyContent="flex-start"
-                          alignItems="flex-start"
-                        >
-                          <Typography sx={{ typography: 'caption' }}>{info}</Typography>
-                          <Link
-                            component="button"
-                            variant="caption"
-                            underline="always"
-                            onClick={() => {
-                              alert('Info Detail');
-                            }}
-                          >
-                            Info Detail
-                          </Link>
-                        </Stack>
-                        <Stack
-                          direction="column"
-                          justifyContent="flex-start"
-                          alignItems="flex-start"
-                        >
-                          <Typography sx={{ typography: 'caption', color: '#656565' }}>
-                            {date}
-                          </Typography>
-                          <Typography sx={{ typography: 'caption', color: '#656565' }}>
-                            {time}
-                          </Typography>
-                        </Stack>
-                      </Stack>
-                    </div>
-                  ))}
-                </ItemNotificationStyle>
-              </Stack>
-            </RootNotificationStyle>
+            <CardNotification data={itemList} />
           </Grid>
           <Grid item xs={6} lg={6} md={12}>
-            <RootBalanceStyle>
-              <Stack direction="row" justifyContent="space-between" sx={{ mb: 1 }}>
-                <div>
-                  <Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
-                    Total Limit
-                  </Typography>
-                  <Typography sx={{ typography: 'body2' }}>{fCurrency(TOTAL)}</Typography>
-                  <Typography sx={{ typography: 'caption', color: '#919EAB' }}>
-                    / {INITIAL}
-                  </Typography>
-                </div>
-
-                <Stack direction="row" alignItems="center" justifyContent="center">
-                  <Typography variant="h5" sx={{ ml: 0.5 }}>
-                    {PERCENT}%
-                  </Typography>
-                </Stack>
-              </Stack>
-
-              <BorderLinearProgress variant="determinate" value={PERCENT} sx={{ mb: 1 }} />
-
-              <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
-                <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
-                  <Iconify
-                    icon="bxs:lock-alt"
-                    width={12}
-                    height={13}
-                    sx={{ color: '#424242', marginRight: '6px' }}
-                  />
-                  <Typography variant="caption" component="span">
-                    Lock Fund ( 25% )
-                  </Typography>
-                </Typography>
-                <Typography sx={{ typography: 'caption', color: '#637381' }}>
-                  125.000.000 / 125.000.000
-                </Typography>
-              </Stack>
-
-              <Stack direction="row" spacing={2}>
-                <Button
-                  variant="outlined"
-                  startIcon={<Iconify icon="bi:clipboard-check-fill" />}
-                  fullWidth={true}
-                  onClick={() => setOpenPopup(true)}
-                >
-                  Submit Claim
-                </Button>
-                <Button
-                  variant="contained"
-                  startIcon={<Iconify icon="heroicons-solid:cash" />}
-                  fullWidth={true}
-                >
-                  Top Up
-                </Button>
-              </Stack>
-            </RootBalanceStyle>
+            <CardBalance />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
-            <List />
+            {/* <List /> */}
           </Grid>
         </Grid>
       </Container>
 
-      {/* <Popup openPopup={openPopup} setOpenPopup={setOpenPopup} /> */}
+      {/* <DialogDetailClaim /> */}
     </Page>
   );
 }