alarm center

frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx

@@ -43,6 +43,29 @@ const navConfig = [
       // },
     ],
   },
+
+  // Membership
+  // ----------------------------------------------------------------------
+  {
+    subheader: 'Case Management',
+    items: [
+      {
+        title: 'Alarm Center',
+        path: '/alarm-center',
+        icon: ICONS.ecommerce,
+      },
+      // {
+      //   title: 'Member Movement',
+      //   // path: '/',
+      //   icon: ICONS.user,
+      //   children: [
+      //     { title: '', path: '/medicines' },
+      //     { title: 'Obat', path: '/medicines' },
+      //     { title: 'Obat', path: '/medicines' },
+      //   ],
+      // },
+    ],
+  },
 ];
 
 export default navConfig;

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

@@ -8,7 +8,7 @@ import useSettings from '../../hooks/useSettings';
 // import ListTable from '../../sections/claimreports/ListTable';
 // import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
 
-import List from '../Members/List';
+import List from './List';
 
 export default function Drugs() {
   const { themeStretch } = useSettings();
@@ -16,12 +16,9 @@ export default function Drugs() {
   // const { corporate_id } = useParams();
 
   return (
-    <Page title="Claim Reports">
+    <Page title="Alarm Center">
       <Container maxWidth={themeStretch ? false : 'xl'}>
-        <Grid container spacing={2}>
+        <Grid container>
-          <Grid item xs={12} lg={12} md={12}>
-            {/* <ClaimStatusCard /> */}
-          </Grid>
           <Grid item xs={12} lg={12} md={12}>
             <Card>
               <List />

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

@@ -0,0 +1,417 @@
+// @mui
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Tab,
+  Tabs,
+  CardHeader,
+  Stack,
+  Menu,
+  ButtonGroup,
+  Pagination,
+  Grid,
+} from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import AddIcon from '@mui/icons-material/Add';
+import UploadIcon from '@mui/icons-material/Upload';
+import CancelIcon from '@mui/icons-material/Cancel';
+// hooks
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../hooks/useSettings';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '../../utils/axios';
+import { LaravelPaginatedData } from '../../@types/paginated-data';
+import { Icd } from '../../@types/diagnosis';
+import BasePagination from '../../components/BasePagination';
+import { Member } from '../../@types/member';
+
+export default function List() {
+  const navigate = useNavigate();
+  const { themeStretch } = useSettings();
+  const { corporate_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [importResult, setImportResult] = useState(null);
+
+  function SearchInput(props: any) {
+    // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState('');
+
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? '';
+      setSearchText(newSearchText);
+    };
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    };
+
+    useEffect(() => {
+      // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams]);
+
+    return (
+      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+        <TextField
+          id="search-input"
+          ref={searchInput}
+          label="Search"
+          variant="outlined"
+          fullWidth
+          onChange={handleSearchChange}
+          value={searchText}
+        />
+      </form>
+    );
+  }
+
+  function ImportForm(props: any) {
+    // IMPORT
+    // Create Button Menu
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
+    const importForm = useRef<HTMLInputElement>(null);
+    const [currentImportFileName, setCurrentImportFileName] = useState(null);
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    const handleImportButton = () => {
+      if (importForm?.current) {
+        handleClose();
+        importForm.current ? importForm.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected');
+      }
+    };
+
+    const handleCancelImportButton = () => {
+      importForm.current.value = '';
+      importForm.current.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+
+    const handleImportChange = (event: any) => {
+      if (event.target.files[0]) {
+        setCurrentImportFileName(event.target.files[0].name);
+      } else {
+        setCurrentImportFileName(null);
+      }
+    };
+
+    const handleUpload = () => {
+      if (importForm.current?.files.length) {
+        const formData = new FormData();
+        formData.append('file', importForm.current?.files[0]);
+        axios
+          .post(`master/formularium/import`, formData)
+          .then((response) => {
+            handleCancelImportButton();
+            loadDataTableData();
+            setImportResult(response.data);
+            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+          })
+          .catch((response) => {
+            alert(
+              'Looks like something went wrong. Please check your data and try again. ' +
+                response.message
+            );
+          });
+      } else {
+        alert('No File Selected');
+      }
+    };
+
+    return (
+      <div>
+        <input
+          type="file"
+          id="file"
+          ref={importForm}
+          style={{ display: 'none' }}
+          onChange={handleImportChange}
+          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+        />
+        {!currentImportFileName && (
+          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+            <SearchInput onSearch={applyFilter} />
+          </Stack>
+        )}
+
+        {currentImportFileName && (
+          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+            <ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
+              <Button onClick={handleImportButton} fullWidth>
+                {currentImportFileName ?? 'No File Selected'}
+              </Button>
+              <Button
+                onClick={handleCancelImportButton}
+                size="small"
+                fullWidth={false}
+                sx={{ p: 1.8 }}
+              >
+                <CancelIcon color="error" />
+              </Button>
+            </ButtonGroup>
+
+            <Button
+              id="upload-button"
+              variant="outlined"
+              startIcon={<UploadIcon />}
+              sx={{ p: 1.8 }}
+              onClick={handleUpload}
+            >
+              Upload
+            </Button>
+          </Stack>
+        )}
+        {importResult && (
+          <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
+            <Box sx={{ color: 'text.secondary' }}>
+              Last Import Result Report :{' '}
+              <a href={importResult.result_file?.url ?? '#'}>
+                {importResult.result_file?.name ?? '-'}
+              </a>
+            </Box>
+          </Stack>
+        )}
+      </div>
+    );
+  }
+
+  // Called on every row to map the data to the columns
+  function createData(member: Member): Member {
+    return {
+      ...member,
+    };
+  }
+
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(true);
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+          <TableCell>
+            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.member_id}</TableCell>
+          <TableCell align="left">{row.payor_id}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="left">{row.nik}</TableCell>
+          <TableCell align="left">{row.nric}</TableCell>
+
+          <TableCell align="right">
+            <Button variant="outlined" color="success" size="small">
+              Active
+            </Button>
+          </TableCell>
+          {/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ borderBottom: 1 }}>
+                <Typography variant="body2" gutterBottom component="div">
+                  <Grid></Grid>
+                </Typography>
+              </Box>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: '',
+    first_page_url: '',
+    last_page: 1,
+    last_page_url: '',
+    next_page_url: '',
+    prev_page_url: '',
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0,
+  });
+  const [dataTablePage, setDataTablePage] = useState(5);
+
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/members', { params: filter });
+
+    setDataTableData(response.data.members);
+    setDataTableLoading(false);
+  };
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const applyFilter = async (searchFilter: string) => {
+    await loadDataTableData({ search: searchFilter });
+    setSearchParams({ search: searchFilter });
+  };
+
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
+  return (
+    <Stack>
+      <Stack
+        direction="row"
+        spacing={5}
+        sx={{ backgroundColor: '#F4F6F8', paddingX: 3, paddingY: '13px' }}
+      >
+        <Button variant="subtitle2" sx={{ position: 'relative' }}>
+          All Data ( Count )
+          <Typography
+            sx={{
+              borderBottom: '2px solid #19BBBB',
+              borderRadius: '1px',
+              position: 'absolute',
+              bottom: '-13px',
+              left: 0,
+              width: '100%',
+            }}
+            component="span"
+          />
+        </Button>
+        <Button variant="subtitle2" sx={{ position: 'relative' }}>
+          Ongoing ( Count )
+          {/* <Typography
+            sx={{
+              borderBottom: '2px solid #19BBBB',
+              borderRadius: '1px',
+              position: 'absolute',
+              bottom: '-13px',
+              left: 0,
+              width: '100%',
+            }}
+            component="span"
+          /> */}
+        </Button>
+        <Button variant="subtitle2" sx={{ position: 'relative' }}>
+          Done ( Count )
+          {/* <Typography
+            sx={{
+              borderBottom: '2px solid #19BBBB',
+              borderRadius: '1px',
+              position: 'absolute',
+              bottom: '-13px',
+              left: 0,
+              width: '100%',
+            }}
+            component="span"
+          /> */}
+        </Button>
+      </Stack>
+
+      <ImportForm />
+
+      <Card>
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left">
+                  No
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Name
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Member ID
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Service
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Start Date
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  End Date
+                </TableCell>
+                <TableCell style={headStyle} align="right" width={100}>
+                  Status
+                </TableCell>
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={8} align="center">
+                    Loading
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : dataTableData.data.length === 0 ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={8} align="center">
+                    No Data
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : (
+              <TableBody>
+                {dataTableData.data.map((row) => (
+                  <Row key={row.id} row={row} />
+                ))}
+              </TableBody>
+            )}
+          </Table>
+        </TableContainer>
+
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+    </Stack>
+  );
+}

frontend/client-portal/src/routes/index.tsx

@@ -93,6 +93,22 @@ export default function Router() {
         },
       ],
     },
+    {
+      path: '/alarm-center',
+      element: (
+        <AuthProvider>
+          <AuthGuard>
+            <DashboardLayout />
+          </AuthGuard>
+        </AuthProvider>
+      ),
+      children: [
+        {
+          element: <AlarmCenter />,
+          index: true,
+        },
+      ],
+    },
     // {
     //   path: '/dashboard',
     //   element: <DashboardLayout />,
@@ -131,7 +147,7 @@ const Login = Loadable(lazy(() => import('../pages/auth/Login')));
 const VerifyCode = Loadable(lazy(() => import('../pages/auth/VerifyCode')));
 
 // Dashboard
-const Dashboard = Loadable(lazy(() => import('../pages/Dashboard')));
+const Dashboard = Loadable(lazy(() => import('../pages/Dashboard/Dashboard')));
 const NotFound = Loadable(lazy(() => import('../pages/Page404')));
 
 // Members
@@ -139,4 +155,4 @@ const Members = Loadable(lazy(() => import('../pages/Members/Index')));
 const MembersCreate = Loadable(lazy(() => import('../pages/Members/Create')));
 
 // Alarm Center
-// const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
+const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));