alarm service

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

@@ -1,19 +1,105 @@
-// mui
-import { Container, Grid, Card } from '@mui/material';
-// components
+/* ---------------------------------- react --------------------------------- */
+import { useState, SyntheticEvent } from 'react';
+/* ---------------------------------- @mui ---------------------------------- */
+import { Box, Tabs, Tab, Container, Grid, Card, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+/* ------------------------------- components ------------------------------- */
 import Page from '../../components/Page';
-// utils
+/* ---------------------------------- hooks --------------------------------- */
 import useSettings from '../../hooks/useSettings';
-// sections
-// import ListTable from '../../sections/claimreports/ListTable';
-// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
-
 import List from './List';
 
+/* ------------------------------ tabs setting ------------------------------ */
+
+/* ---------------------------------- types --------------------------------- */
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+interface StyledTabsProps {
+  children?: React.ReactNode;
+  value: number;
+  onChange: (event: React.SyntheticEvent, newValue: number) => void;
+}
+
+interface StyledTabProps {
+  label: string;
+  icon?: string | React.ReactElement;
+}
+
+/* -------------------------------- tab style ------------------------------- */
+
+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}`}
+      {...other}
+    >
+      {value === index && (
+        <Box>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+const StyledTabs = styled((props: StyledTabsProps) => <Tabs {...props} />)({
+  backgroundColor: '#F4F6F8',
+  padding: '0 24px',
+  '& .MuiTabs-indicator': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    backgroundColor: 'transparent',
+  },
+  '& .MuiTabs-indicatorSpan': {
+    maxWidth: 40,
+    backgroundColor: '#635ee7',
+  },
+});
+
+const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(
+  ({ theme }) => ({
+    textTransform: 'none',
+    fontWeight: 600,
+    color: theme.palette.grey[600],
+    marginRight: '5rem',
+    '&.Mui-selected': {
+      color: '#212B36',
+      borderBottom: '2px solid ' + theme.palette.primary.main,
+    },
+    '&:hover': {
+      color: '#212B36',
+      opacity: 1,
+      borderBottom: '2px solid ' + theme.palette.primary.main,
+    },
+  })
+);
+
+/* -------------------------------------------------------------------------- */
+
 export default function Drugs() {
   const { themeStretch } = useSettings();
 
-  // const { corporate_id } = useParams();
+  const [value, setValue] = useState(0);
+  const handleChange = (event: SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
 
   return (
     <Page title="Alarm Center">
@@ -21,7 +107,22 @@ export default function Drugs() {
         <Grid container>
           <Grid item xs={12} lg={12} md={12}>
             <Card>
-              <List />
+              <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                <StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                  <StyledTab label="All Data (20)" {...a11yProps(0)} />
+                  <StyledTab label="Ongoing (5)" {...a11yProps(1)} />
+                  <StyledTab label="Done (15)" {...a11yProps(2)} />
+                </StyledTabs>
+              </Box>
+              <TabPanel value={value} index={0}>
+                <List />
+              </TabPanel>
+              <TabPanel value={value} index={1}>
+                Item Two
+              </TabPanel>
+              <TabPanel value={value} index={2}>
+                Item Two
+              </TabPanel>
             </Card>
           </Grid>
         </Grid>