dashboard table, alarm center table

frontend/client-portal/src/components/BaseTablePagination.tsx

@@ -10,9 +10,10 @@ export default function BaseTablePagination({
   onRowsPerPageChange,
 }: TablePaginationProps) {
   return (
-    <Box sx={{ m: 2 }} display="flex" justifyContent="flex-end">
+    <Box>
       <TablePagination
         component="div"
+        rowsPerPageOptions={[10, 25]}
         count={count}
         page={page}
         onPageChange={onPageChange}

frontend/client-portal/src/hooks/useMap.ts

@@ -0,0 +1,50 @@
+import { useCallback, useState } from 'react'
+
+export type MapOrEntries<K, V> = Map<K, V> | [K, V][]
+
+// Public interface
+export interface Actions<K, V> {
+  set: (key: K, value: V) => void
+  setAll: (entries: MapOrEntries<K, V>) => void
+  remove: (key: K) => void
+  reset: Map<K, V>['clear']
+}
+
+// We hide some setters from the returned map to disable autocompletion
+type Return<K, V> = [Omit<Map<K, V>, 'set' | 'clear' | 'delete'>, Actions<K, V>]
+
+function useMap<K, V>(
+  initialState: MapOrEntries<K, V> = new Map(),
+): Return<K, V> {
+  const [map, setMap] = useState(new Map(initialState))
+
+  const actions: Actions<K, V> = {
+    set: useCallback((key, value) => {
+      setMap(prev => {
+        const copy = new Map(prev)
+        copy.set(key, value)
+        return copy
+      })
+    }, []),
+
+    setAll: useCallback(entries => {
+      setMap(() => new Map(entries))
+    }, []),
+
+    remove: useCallback(key => {
+      setMap(prev => {
+        const copy = new Map(prev)
+        copy.delete(key)
+        return copy
+      })
+    }, []),
+
+    reset: useCallback(() => {
+      setMap(() => new Map())
+    }, []),
+  }
+
+  return [map, actions]
+}
+
+export default useMap

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

@@ -16,7 +16,6 @@ import Scrollbar from '../../../components/Scrollbar';
 import { NavSectionVertical } from '../../../components/nav-section';
 //
 import navConfig from './NavConfig';
-import NavbarDocs from './NavbarDocs';
 import NavbarAccount from './NavbarAccount';
 import CollapseButton from './CollapseButton';
 
@@ -76,7 +75,7 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
           <Stack direction="row" alignItems="center" justifyContent="space-between">
             <Stack direction="row" alignItems="center">
               <Logo />
-              <Typography ml={3}>PRIME CENTER</Typography>
+              <Typography ml={3}>Client Portal</Typography>
             </Stack>
             <CollapseButton onToggleCollapse={onToggleCollapse} collapseClick={collapseClick} />
           </Stack>
@@ -92,8 +91,6 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
       <NavSectionVertical navConfig={navConfig} isCollapse={isCollapse} />
 
       <Box sx={{ flexGrow: 1 }} />
-
-      {!isCollapse && <NavbarDocs />}
     </Scrollbar>
   );
 

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

@@ -1,7 +1,7 @@
 /* ---------------------------------- react --------------------------------- */
 import { useState, SyntheticEvent } from 'react';
 /* ---------------------------------- @mui ---------------------------------- */
-import { Box, Tabs, Tab, Container, Grid, Card, Typography } from '@mui/material';
+import { Box, Tabs, Tab, Container, Grid, Card } from '@mui/material';
 import { styled } from '@mui/material/styles';
 /* ------------------------------- components ------------------------------- */
 import Page from '../../components/Page';
@@ -43,11 +43,7 @@ function TabPanel(props: TabPanelProps) {
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      {value === index && (
+      {value === index && <Box>{children}</Box>}
-        <Box>
-          <Typography>{children}</Typography>
-        </Box>
-      )}
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-// @mui
+/* ---------------------------------- @mui ---------------------------------- */
 import {
   Paper,
   Table,
@@ -9,101 +9,322 @@ import {
   TableRow,
   TextField,
   Stack,
+  Button,
+  TableSortLabel,
+  Box,
 } from '@mui/material';
-// hooks
+import { visuallyHidden } from '@mui/utils';
-import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
+/* ---------------------------------- axios --------------------------------- */
-import { useSearchParams } from 'react-router-dom';
+import axios from 'axios';
-// components
+/* ---------------------------------- react --------------------------------- */
-import axios from '../../utils/axios';
+import { useEffect, useState } from 'react';
-import BasePagination from '../../components/BasePagination';
+/* -------------------------------- component ------------------------------- */
+import Iconify from '../../components/Iconify';
+import BaseTablePagination from '../../components/BaseTablePagination';
+/* ---------------------------------- hooks --------------------------------- */
+import useMap from '../../hooks/useMap';
+/* ---------------------------------- theme --------------------------------- */
+import palette from '../../theme/palette';
 
-export default function List() {
+/* ---------------------------------- types --------------------------------- */
-  const [searchParams, setSearchParams] = useSearchParams();
 
-  function SearchInput(props: any) {
+type PaginationTableProps = {
-    // SEARCH
+  current_page: number;
-    const searchInput = useRef<HTMLInputElement>(null);
+  from: number;
-    const [searchText, setSearchText] = useState('');
+  last_page: number;
+  links: [];
+  path: string;
+  per_page: number;
+  to: number;
+  total: number;
+};
 
-    const handleSearchChange = (event: any) => {
+type DataTableProps = {
-      const newSearchText = event.target.value ?? '';
+  name: string;
-      setSearchText(newSearchText);
+  member_id: string;
+  service: string;
+  start_date: string;
+  end_date: string;
+  status: string;
+};
+
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------- enchanced table head -------------------------- */
+
+type Order = 'asc' | 'desc';
+
+interface HeadCell {
+  id: string;
+  label: string;
+}
+
+const headCells: readonly HeadCell[] = [
+  {
+    id: 'name',
+    label: 'Name',
+  },
+  {
+    id: 'member_id',
+    label: 'Member ID',
+  },
+  {
+    id: 'service',
+    label: 'Service',
+  },
+  {
+    id: 'start_date',
+    label: 'Start Date',
+  },
+  {
+    id: 'end_date',
+    label: 'End Date',
+  },
+  {
+    id: 'status',
+    label: 'Status',
+  },
+];
+
+interface EnhancedTableProps {
+  onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
+  order: Order;
+  orderBy: string;
+}
+
+function EnhancedTableHead(props: EnhancedTableProps) {
+  const { order, orderBy, onRequestSort } = props;
+  const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+    onRequestSort(event, property);
   };
 
-    const handleSearchSubmit = (event: any) => {
-      event.preventDefault();
-      props.onSearch(searchText); // Trigger to Parent
-    };
-
-    useEffect(() => {
-      // Trigger First Search
-      setSearchText(searchParams.get('search') ?? '');
-    }, []);
-
   return (
-      <form onSubmit={handleSearchSubmit} style={{ width: '100%', padding: '20px 24px' }}>
+    <TableHead>
-        <TextField
+      <TableRow>
-          id="search-input"
+        <TableCell align="center">No</TableCell>
-          ref={searchInput}
+        {headCells.map((headCell) => (
-          label="Search"
+          <TableCell
-          variant="outlined"
+            key={headCell.id}
-          fullWidth
+            sortDirection={orderBy === headCell.id ? order : false}
-          onChange={handleSearchChange}
+            align="center"
-          value={searchText}
+          >
-        />
+            <TableSortLabel
-      </form>
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : 'asc'}
+              onClick={createSortHandler(headCell.id)}
+            >
+              {headCell.label}
+              {orderBy === headCell.id ? (
+                <Box component="span" sx={visuallyHidden}>
+                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                </Box>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
   );
-  }
+}
 
-  const headStyle = {
+/* -------------------------------------------------------------------------- */
-    fontWeight: 'bold',
+
+export default function List() {
+  const [order, setOrder] = useState<Order>('asc');
+  const [orderBy, setOrderBy] = useState('name');
+  const [customSearchParams, setCustomSearchParams] = useMap<string, any>();
+  const [isLoading, setIsLoading] = useState(true);
+  const [dataTable, setDataTable] = useState([]);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
+    current_page: 0,
+    from: 0,
+    last_page: 0,
+    links: [],
+    path: '',
+    per_page: 0,
+    to: 0,
+    total: 0,
+  });
+
+  /* ------------------------------- handle sort ------------------------------ */
+  const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+    const params = Object.fromEntries([
+      ...customSearchParams.entries(),
+      ['order', isAsc ? 'desc' : 'asc'],
+      ['orderBy', property],
+    ]);
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    loadDataTable(params);
+    setIsLoading(false);
   };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ Search field ------------------------------ */
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearch = (event: any) => {
+    setSearchText(event.target.value);
+  };
+
+  const handleSearchSubmit = async (event: any) => {
+    event.preventDefault();
+    const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]);
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    loadDataTable(params);
+    setIsLoading(false);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* --------------------------- Load Data Table API -------------------------- */
+  const loadDataTable = async (appliedParams: any | null = null) => {
+    setIsLoading(true);
+
+    const params = appliedParams
+      ? appliedParams
+      : Object.fromEntries([
+          ...customSearchParams.entries(),
+          ['order', order],
+          ['orderBy', orderBy],
+        ]);
+    const response = await axios.get('http://localhost:8001/api/alarm-center', { params: params });
+
+    setDataTable(response.data.data);
+    setPaginationTable(response.data.meta);
+    setRowsPerPage(response.data.meta.per_page);
+    setIsLoading(false);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------ button change pagination ------------------------ */
+  const onPageChangeHandle = async (event: unknown, newPage: number) => {
+    const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
+    setPage(newPage);
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    loadDataTable(params);
+    setIsLoading(false);
+    setCustomSearchParams.set('page', newPage + 1);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ----------------------- row page per limit on click ---------------------- */
+  const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPage(0);
+    const params = Object.fromEntries([
+      ...customSearchParams.entries(),
+      ['page', 0],
+      ['per_page', parseInt(event.target.value, 10)],
+    ]);
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    loadDataTable(params);
+    setIsLoading(false);
+    setCustomSearchParams.set('per_page', parseInt(event.target.value, 10));
+  };
+  /* -------------------------------------------------------------------------- */
+
+  useEffect(() => {
+    loadDataTable();
+  }, []);
 
   return (
     <Stack>
       {/* Search */}
-      <SearchInput />
+      <form onSubmit={handleSearchSubmit} style={{ width: '100%', padding: '20px 24px' }}>
+        <TextField
+          id="search-input"
+          label="Search"
+          variant="outlined"
+          fullWidth
+          onChange={handleSearch}
+          value={searchText}
+        />
+      </form>
 
       {/* The Main Table */}
       <TableContainer component={Paper}>
         <Table aria-label="collapsible table">
-          <TableHead>
+          <EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleRequestSort} />
-            <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>
-          </TableHead>
           <TableBody>
+            {isLoading ? (
               <TableRow>
                 <TableCell colSpan={8} align="center">
-                No Data
+                  Loading . . .
                 </TableCell>
               </TableRow>
+            ) : dataTable.length >= 1 ? (
+              dataTable.map((row: DataTableProps, index) => (
+                <TableRow key={index}>
+                  <TableCell align="center">{paginationTable.from + index++}</TableCell>
+                  <TableCell align="center">{row.name}</TableCell>
+                  <TableCell align="center">{row.member_id}</TableCell>
+                  <TableCell align="center">{row.service}</TableCell>
+                  <TableCell align="center">{row.start_date}</TableCell>
+                  <TableCell align="center">{row.end_date}</TableCell>
+                  <TableCell align="center">
+                    {row.status.toLowerCase() === 'done' ? (
+                      <Button
+                        startIcon={<Iconify icon="ic:round-check" />}
+                        sx={{
+                          backgroundColor: palette.light.grey[300],
+                          color: palette.light.grey[800],
+                          paddingX: 1.5,
+                          paddingY: 1,
+                          '&:hover': {
+                            backgroundColor: palette.light.grey[400],
+                            color: palette.light.grey[800],
+                          },
+                        }}
+                      >
+                        {row.status}
+                      </Button>
+                    ) : (
+                      <Button
+                        startIcon={<Iconify icon="fa6-solid:clock" />}
+                        sx={{
+                          backgroundColor: '#CD7B2E',
+                          color: '#FFFF',
+                          paddingX: 1.5,
+                          paddingY: 1,
+                          '&:hover': {
+                            backgroundColor: '#BF6919',
+                            color: '#FFFF',
+                          },
+                        }}
+                      >
+                        {row.status}
+                      </Button>
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={8} align="center">
+                  No Data Found
+                </TableCell>
+              </TableRow>
+            )}
           </TableBody>
         </Table>
       </TableContainer>
 
       {/* Pagination */}
-      {/* <BasePagination onPageChange={handlePageChange} /> */}
+      <BaseTablePagination
+        count={paginationTable.total}
+        onPageChange={onPageChangeHandle}
+        page={page}
+        rowsPerPage={rowsPerPage}
+        onRowsPerPageChange={onRowsPerPageChangeHandle}
+      />
     </Stack>
   );
 }

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

@@ -7,6 +7,7 @@ import Page from '../../components/Page';
 // theme
 import CardNotification from '../../sections/dashboard/CardNotification';
 import CardBalance from '../../sections/dashboard/CardBalance';
+import TableList from '../../sections/dashboard/TableList';
 import List from './List';
 
 // ----------------------------------------------------------------------
@@ -55,7 +56,8 @@ export default function Dashboard() {
             <CardBalance />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
-            <List />
+            <TableList />
+            {/* <List /> */}
           </Grid>
         </Grid>
       </Container>

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

@@ -47,7 +47,15 @@ import BasePagination from '../../components/BasePagination';
 import { Member } from '../../@types/member';
 import Iconify from '../../components/Iconify';
 
-const options = ['All', 'Option 2'];
+const options = [
+  { label: 'The Shawshank Redemption', value: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+];
 
 export default function List() {
   const navigate = useNavigate();
@@ -77,7 +85,8 @@ export default function List() {
     useEffect(() => {
       // Trigger First Search
       setSearchText(searchParams.get('search') ?? '');
-    }, [searchParams]);
+      console.log(value, inputValue);
+    }, [searchParams, value, inputValue]);
 
     return (
       <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>

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

@@ -1,401 +0,0 @@
-// @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 ListTest() {
-  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} />
-            {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
-            <Button
-              id="import-button"
-              variant="outlined"
-              startIcon={<AddIcon />}
-              sx={{ p: 1.8 }}
-              aria-controls={createMenu ? 'basic-menu' : undefined}
-              aria-haspopup="true"
-              aria-expanded={createMenu ? 'true' : undefined}
-              onClick={handleClick}
-            >
-              Create
-            </Button>
-            <Menu
-              id="import-button"
-              anchorEl={anchorEl}
-              open={createMenu}
-              onClose={handleClose}
-              MenuListProps={{
-                'aria-labelledby': 'basic-button',
-              }}
-            >
-              <MenuItem
-                onClick={() => {
-                  navigate('/master/formularium/create');
-                }}
-              >
-                Create
-              </MenuItem>
-              <MenuItem onClick={handleImportButton}>Import</MenuItem>
-              <MenuItem onClick={handleClose}>Download Template</MenuItem>
-            </Menu>
-          </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>
-      <ImportForm />
-
-      <Card>
-        {/* The Main Table */}
-        <TableContainer component={Paper}>
-          <Table aria-label="collapsible table">
-            <TableBody>
-              <TableRow>
-                <TableCell style={headStyle} align="left">
-                  Detail
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  MemberID
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  PayorID
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  Name
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  NIK
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  PlanID
-                </TableCell>
-                <TableCell style={headStyle} align="right" width={100}>
-                  Status
-                </TableCell>
-                {/* <TableCell style={headStyle} align="right" width={100}>Action</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/sections/dashboard/TableList.tsx

@@ -0,0 +1,379 @@
+/* ---------------------------------- @mui ---------------------------------- */
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Button,
+  TableSortLabel,
+  Box,
+  IconButton,
+  Card,
+  Grid,
+  Autocomplete,
+} from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+/* ---------------------------------- axios --------------------------------- */
+import axios from 'axios';
+/* ---------------------------------- react --------------------------------- */
+import { useEffect, useState } from 'react';
+/* -------------------------------- component ------------------------------- */
+import Iconify from '../../components/Iconify';
+import BaseTablePagination from '../../components/BaseTablePagination';
+/* ---------------------------------- hooks --------------------------------- */
+import useMap from '../../hooks/useMap';
+/* ---------------------------------- theme --------------------------------- */
+import palette from '../../theme/palette';
+import { useSearchParams } from 'react-router-dom';
+
+/* ---------------------------------- types --------------------------------- */
+
+type PaginationTableProps = {
+  current_page: number;
+  from: number;
+  last_page: number;
+  links: [];
+  path: string;
+  per_page: number;
+  to: number;
+  total: number;
+};
+
+type DataTableProps = {
+  name: string;
+  member_id: string;
+  service: string;
+  start_date: string;
+  end_date: string;
+  status: string;
+};
+
+type Order = 'asc' | 'desc';
+
+interface HeadCell {
+  id: string;
+  align: string;
+  label: string;
+  isSort: boolean;
+}
+
+interface EnhancedTableProps {
+  onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
+  order: Order;
+  orderBy: string;
+}
+
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------- enchanced table head -------------------------- */
+
+const headCells: readonly HeadCell[] = [
+  {
+    id: 'member_id',
+    align: 'left',
+    label: 'Member ID',
+    isSort: false,
+  },
+  {
+    id: 'name',
+    align: 'center',
+    label: 'Name',
+    isSort: false,
+  },
+  {
+    id: 'division',
+    align: 'center',
+    label: 'Divisi',
+    isSort: false,
+  },
+  {
+    id: 'limit',
+    align: 'center',
+    label: 'Limit',
+    isSort: false,
+  },
+  {
+    id: 'status',
+    align: 'center',
+    label: 'Status',
+    isSort: false,
+  },
+];
+
+function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps) {
+  const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            sortDirection={orderBy === headCell.id ? order : false}
+            // @ts-ignore
+            align={headCell.align}
+            sx={{ padding: 2 }}
+          >
+            {headCell.isSort ? (
+              <TableSortLabel
+                active={orderBy === headCell.id}
+                direction={orderBy === headCell.id ? order : 'asc'}
+                onClick={createSortHandler(headCell.id)}
+              >
+                {headCell.label}
+                {orderBy === headCell.id ? (
+                  <Box component="span" sx={visuallyHidden}>
+                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                  </Box>
+                ) : null}
+              </TableSortLabel>
+            ) : (
+              headCell.label
+            )}
+          </TableCell>
+        ))}
+        <TableCell align="center">{''}</TableCell>
+      </TableRow>
+    </TableHead>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+
+export default function TableList() {
+  const [order, setOrder] = useState<Order>('asc');
+  const [orderBy, setOrderBy] = useState('name');
+  const [customSearchParams, setCustomSearchParams] = useSearchParams();
+  const [isLoading, setIsLoading] = useState(true);
+  const [dataTable, setDataTable] = useState([]);
+  const [dataDivision, setDataDivision] = useState([]);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [appliedParams, setAppliedParams] = useState({});
+  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
+    current_page: 0,
+    from: 0,
+    last_page: 0,
+    links: [],
+    path: '',
+    per_page: 0,
+    to: 0,
+    total: 0,
+  });
+
+  /* ------------------------------- handle sort ------------------------------ */
+  const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+    const params = Object.fromEntries([
+      ...customSearchParams.entries(),
+      ['order', isAsc ? 'desc' : 'asc'],
+      ['orderBy', property],
+    ]);
+    setAppliedParams(params);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ Search field ------------------------------ */
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchText(event.target.value);
+  };
+
+  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsLoading(true);
+    const params = Object.fromEntries([
+      ...customSearchParams.entries(),
+      ['page', 0],
+      ['search', searchText],
+    ]);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setAppliedParams(params);
+    setIsLoading(false);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------- table pagination ---------------------------- */
+
+  /* ------------------------ button change pagination ------------------------ */
+  const onPageChangeHandle = async (
+    event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    setIsLoading(true);
+    const params = Object.fromEntries([
+      ...customSearchParams.entries(),
+      ['page', newPage + 1],
+      ['order', order],
+      ['orderBy', orderBy],
+    ]);
+    setPage(newPage);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setAppliedParams(params);
+    setIsLoading(false);
+    // setCustomSearchParams.set('page', newPage + 1);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* --------------------------- row page per limit --------------------------- */
+  const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIsLoading(true);
+    setPage(0);
+    const params = Object.fromEntries([
+      ...customSearchParams.entries(),
+      ['page', 0],
+      ['order', order],
+      ['orderBy', orderBy],
+      ['per_page', parseInt(event.target.value, 10)],
+    ]);
+    setRowsPerPage(parseInt(event.target.value, 10));
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setAppliedParams(params);
+    setIsLoading(false);
+    // setCustomSearchParams.set('per_page', parseInt(event.target.value, 10));
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* -------------------------------------------------------------------------- */
+
+  useEffect(() => {
+    (async () => {
+      setIsLoading(true);
+
+      const params =
+        Object.keys(appliedParams).length !== 0
+          ? appliedParams
+          : Object.fromEntries([
+              ...customSearchParams.entries(),
+              // ['order', order],
+              // ['orderBy', orderBy],
+            ]);
+
+      const response = await axios.get('http://localhost:8001/api/dashboard', {
+        params: params,
+      });
+
+      const division = await axios.get('http://localhost:8001/api/division');
+      setDataDivision(division.data);
+
+      setDataTable(response.data.data);
+      setPaginationTable(response.data.meta);
+      setRowsPerPage(response.data.meta.per_page);
+      setIsLoading(false);
+    })();
+  }, [appliedParams, customSearchParams, order, orderBy]);
+
+  return (
+    <Card>
+      <Grid container>
+        {/* Field 1 */}
+        <Grid item xs={12} paddingX="24px" paddingY="20px">
+          <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+            <TextField
+              id="search-input"
+              label="Search"
+              variant="outlined"
+              fullWidth
+              onChange={handleSearch}
+              value={searchText}
+            />
+          </form>
+        </Grid>
+        {/* End Field 1 */}
+        {/* Field 2 */}
+        <Grid item xs={12}>
+          <TableContainer component={Paper}>
+            <Table aria-label="collapsible table" size="small">
+              <EnhancedTableHead
+                order={order}
+                orderBy={orderBy}
+                onRequestSort={handleRequestSort}
+              />
+              <TableBody>
+                {isLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={6} align="center">
+                      Loading . . .
+                    </TableCell>
+                  </TableRow>
+                ) : dataTable.length >= 1 ? (
+                  dataTable.map((row: DataTableProps, index) => (
+                    <TableRow key={index}>
+                      <TableCell align="left">{row.member_id}</TableCell>
+                      <TableCell align="center">{row.name}</TableCell>
+                      <TableCell align="center">{row.service}</TableCell>
+                      <TableCell align="center">{row.start_date}</TableCell>
+                      <TableCell align="center">
+                        {row.status.toLowerCase() === 'active' ? (
+                          <Button
+                            sx={{
+                              backgroundColor: 'rgba(84, 214, 44, 0.16)',
+                              color: palette.dark.success.dark,
+                              paddingX: 1.5,
+                              paddingY: 1,
+                              '&:hover': {
+                                backgroundColor: palette.light.grey[400],
+                                color: palette.light.grey[800],
+                              },
+                            }}
+                          >
+                            {row.status}
+                          </Button>
+                        ) : (
+                          <Button
+                            sx={{
+                              backgroundColor: '#CD7B2E',
+                              color: '#FFFF',
+                              paddingX: 1.5,
+                              paddingY: 1,
+                              '&:hover': {
+                                backgroundColor: '#BF6919',
+                                color: '#FFFF',
+                              },
+                            }}
+                          >
+                            {row.status}
+                          </Button>
+                        )}
+                      </TableCell>
+                      <TableCell align="right">
+                        <IconButton>
+                          <Iconify icon="ic:baseline-more-vert" />
+                        </IconButton>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={6} align="center">
+                      No Data Found
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </TableContainer>
+
+          {/* Pagination */}
+          <BaseTablePagination
+            count={paginationTable.total}
+            onPageChange={onPageChangeHandle}
+            page={page}
+            rowsPerPage={rowsPerPage}
+            onRowsPerPageChange={onRowsPerPageChangeHandle}
+          />
+        </Grid>
+        {/* End Field 2 */}
+      </Grid>
+    </Card>
+  );
+}

frontend/client-portal/src/theme/overrides/Table.ts

@@ -4,9 +4,19 @@ import { Theme } from '@mui/material/styles';
 
 export default function Table(theme: Theme) {
   return {
+    MuiTableHead: {
+        styleOverrides: {
+          root: {
+            '.MuiTableRow-root': {
+              borderBottom: 'none',
+            },
+          },
+      },
+    },
     MuiTableRow: {
       styleOverrides: {
         root: {
+          borderBottom: '1px solid rgba(241, 243, 244, 1)',
           '&.Mui-selected': {
             backgroundColor: theme.palette.action.selected,
             '&:hover': {

frontend/dashboard/src/pages/Corporates/Index.tsx

@@ -1,5 +1,30 @@
 // @mui
-import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Stack } from '@mui/material';
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Container,
+  FormControl,
+  Grid,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Stack,
+} from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import PublishIcon from '@mui/icons-material/Publish';
@@ -10,7 +35,7 @@ import useSettings from '../../hooks/useSettings';
 import Page from '../../components/Page';
 import axios from '../../utils/axios';
 import useAuth from '../../hooks/useAuth';
-import { Link , NavLink as RouterLink, useSearchParams } from 'react-router-dom';
+import { Link, NavLink as RouterLink, useSearchParams } from 'react-router-dom';
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { Theme, useTheme } from '@mui/material/styles';
 import { Corporate } from '../../@types/corporates';
@@ -25,10 +50,10 @@ export default function Corporates() {
   const [searchParams, setSearchParams] = useSearchParams();
 
   // Called on every row to map the data to the columns
-  function createData( corporate: Corporate ): Corporate {
+  function createData(corporate: Corporate): Corporate {
     return {
       ...corporate,
-    }
+    };
   }
 
   // Dummy Default Data
@@ -36,19 +61,19 @@ export default function Corporates() {
   const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
     current_page: 1,
     data: [],
-    path: "",
+    path: '',
-    first_page_url: "",
+    first_page_url: '',
     last_page: 1,
-    last_page_url: "",
+    last_page_url: '',
-    next_page_url: "",
+    next_page_url: '',
-    prev_page_url: "",
+    prev_page_url: '',
     per_page: 10,
     from: 0,
     to: 0,
-    total: 0
+    total: 0,
   });
 
-  const loadDataTableData = async (appliedFilter : any | null = null) => {
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
     const response = await axios.get('/corporates', { params: filter });
@@ -56,25 +81,22 @@ export default function Corporates() {
     setDataTableLoading(false);
 
     setDataTableData(response.data);
-  }
+  };
-
 
   const applyFilter = async (searchFilter: any) => {
-    await loadDataTableData({ "search" : searchFilter });
+    await loadDataTableData({ search: searchFilter });
-    setSearchParams({ "search" : searchFilter });
+    setSearchParams({ search: searchFilter });
-  }
+  };
 
-  const handlePageChange = (event : ChangeEvent, value: number) => {
+  const handlePageChange = (event: ChangeEvent, value: number) => {
-    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
     loadDataTableData(filter);
     setSearchParams(filter);
-  }
+  };
-
 
   useEffect(() => {
     loadDataTableData();
-  }, [])
+  }, []);
-
 
   const headStyle = {
     fontWeight: 'bold',
@@ -92,13 +114,7 @@ export default function Corporates() {
     },
   };
 
-  const names = [
+  const names = ['PLAN001', 'PLAN002', 'PLAN003', 'PLAN004', 'PLAN005'];
-    'PLAN001',
-    'PLAN002',
-    'PLAN003',
-    'PLAN004',
-    'PLAN005',
-  ];
   function getStyles(name: string, personName: string[], theme: Theme) {
     return {
       fontWeight:
@@ -117,7 +133,7 @@ export default function Corporates() {
     } = event;
     setPlanIdFilter(
       // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
+      typeof value === 'string' ? value.split(',') : value
     );
   };
 
@@ -128,7 +144,7 @@ export default function Corporates() {
     } = event;
     setStatusFilter(
       // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
+      typeof value === 'string' ? value.split(',') : value
     );
   };
   // END FILTER SELECT
@@ -137,27 +153,35 @@ export default function Corporates() {
   function SearchInput(props: any) {
     // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState("");
+    const [searchText, setSearchText] = useState('');
 
     const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? ''
+      const newSearchText = event.target.value ?? '';
       setSearchText(newSearchText);
-    }
+    };
 
     const handleSubmit = (event: any) => {
       event.preventDefault();
       props.onSearch(searchText); // Trigger to Parent
-    }
+    };
 
     useEffect(() => {
       // console.log('Search Input: useEffect')
       setSearchText(searchParams.get('search') ?? '');
-    }, [searchParams])
+    }, [searchParams]);
 
     return (
       <form onSubmit={handleSubmit} style={{ width: '100%' }}>
         <Stack direction={'row'} spacing={2} sx={{ mb: 2 }}>
-          <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+          <TextField
+            id="search-input"
+            ref={searchInput}
+            label="Search"
+            variant="outlined"
+            fullWidth
+            onChange={handleSearchChange}
+            value={searchText}
+          />
 
           {/* <Grid item>
             <TextField id="outlined-basic" label="Search" variant="outlined" sx={{ width: 400 }}/>
@@ -218,13 +242,17 @@ export default function Corporates() {
             <Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
               Import
             </Button> */}
-            <Link to={"/corporates/create"}>
+          <Link to={'/corporates/create'}>
-              <Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
+            <Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }}>
+              Create
+            </Button>
           </Link>
           {/* </Grid> */}
         </Stack>
 
-        <Button type='submit' sx={{ display: 'none' }}>Search</Button>
+        <Button type="submit" sx={{ display: 'none' }}>
+          Search
+        </Button>
       </form>
     );
   }
@@ -236,50 +264,80 @@ export default function Corporates() {
     const [open, setOpen] = React.useState(false);
 
     const handleActivate = (model: any, status: string) => {
-      axios.put(`/corporates/${row.id}/activation`, { 
+      axios
+        .put(`/corporates/${row.id}/activation`, {
           // service_code: service.service_code,
-        active: status == 'active'
+          active: status == 'active',
         })
         .then((res) => {
           setDataTableData({
             ...dataTableData,
             data: dataTableData.data.map((model) => {
-            let updatedModel = model
+              let updatedModel = model;
               if (row.id == model.id) {
-              updatedModel.active = res.data.corporate.active
+                updatedModel.active = res.data.corporate.active;
               }
-            return updatedModel
+              return updatedModel;
-          })
+            }),
-        })
+          });
         })
         .catch((error) => {
           // console.log('asdasd', error.response.data.message)
-        enqueueSnackbar(error.response.data.message ?? error.message ?? 'Failed Processing Request', { variant: 'error' });
+          enqueueSnackbar(
-      })
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
-    }
+            { variant: 'error' }
+          );
+        });
+    };
 
     return (
       <React.Fragment>
         <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
           <TableCell>
-            <IconButton
+            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
           </TableCell>
           <TableCell align="left">{row.code}</TableCell>
           <TableCell align="left">{row.name}</TableCell>
           <TableCell align="left">
-            {( row.active == 1 && <Button variant="outlined" color="success" size="small" onClick={() => { handleActivate(row, 'inactive') }}>Active</Button> )}
+            {row.active == 1 && (
-            {( row.active != 1 && <Button variant="outlined" color="error" size="small" onClick={() => { handleActivate(row, 'active') }}>Inactive</Button> )}
+              <Button
+                variant="outlined"
+                color="success"
+                size="small"
+                onClick={() => {
+                  handleActivate(row, 'inactive');
+                }}
+              >
+                Active
+              </Button>
+            )}
+            {row.active != 1 && (
+              <Button
+                variant="outlined"
+                color="error"
+                size="small"
+                onClick={() => {
+                  handleActivate(row, 'active');
+                }}
+              >
+                Inactive
+              </Button>
+            )}
           </TableCell>
           <TableCell align="right">
             <Stack direction="row" justifyContent="flex-end" spacing={1}>
-              <Link to={"/corporates/" + row.id + "/edit"}><Button variant="outlined" color="primary" size="small">Edit</Button></ Link>
+              <Link to={'/corporates/' + row.id + '/edit'}>
-              <Link to={"/corporates/" + row.id + ""}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
+                <Button variant="outlined" color="primary" size="small">
+                  Edit
+                </Button>
+              </Link>
+              <Link to={'/corporates/' + row.id + ''}>
+                <Button variant="outlined" color="primary" size="small">
+                  Config
+                </Button>
+              </Link>
             </Stack>
           </TableCell>
         </TableRow>
@@ -335,7 +393,10 @@ export default function Corporates() {
                         Minimal Deposit
                       </Grid>
                       <Grid item xs={6}>
-                        : {row.current_policy ? fCurrency(row.current_policy?.minimal_deposit_net) : '-'}
+                        :{' '}
+                        {row.current_policy
+                          ? fCurrency(row.current_policy?.minimal_deposit_net)
+                          : '-'}
                       </Grid>
                     </Grid>
                   </Grid>
@@ -366,7 +427,6 @@ export default function Corporates() {
                   </Grid>
                 </Grid>
 
-
                 <Typography sx={{ fontWeight: '600', mb: 1, mt: 2 }}>Sub Corporate</Typography>
                 <Grid container>
                   <Grid item xs={12}>
@@ -380,7 +440,6 @@ export default function Corporates() {
                     </Grid>
                   </Grid>
                 </Grid>
-
               </Box>
             </Collapse>
           </TableCell>
@@ -403,7 +462,7 @@ export default function Corporates() {
           ]}
         />
 
-        <SearchInput onSearch={applyFilter}/>
+        <SearchInput onSearch={applyFilter} />
 
         <Card>
           {/* The Main Table */}
@@ -412,38 +471,46 @@ export default function Corporates() {
               <TableBody>
                 <TableRow>
                   <TableCell style={headStyle} align="left" width={50} />
-                <TableCell style={headStyle} align="left">Code</TableCell>
+                  <TableCell style={headStyle} align="left">
-                <TableCell style={headStyle} align="left">Name</TableCell>
+                    Code
-                <TableCell style={headStyle} align="left" width={100}>Status</TableCell>
+                  </TableCell>
-                <TableCell style={headStyle} align="right" width={100}>Action</TableCell>
+                  <TableCell style={headStyle} align="left">
+                    Name
+                  </TableCell>
+                  <TableCell style={headStyle} align="left" width={100}>
+                    Status
+                  </TableCell>
+                  <TableCell style={headStyle} align="right" width={100}>
+                    Action
+                  </TableCell>
                 </TableRow>
               </TableBody>
-            {dataTableIsLoading ? 
+              {dataTableIsLoading ? (
-              (
                 <TableBody>
                   <TableRow>
-                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                    <TableCell colSpan={8} align="center">
+                      Loading
+                    </TableCell>
                   </TableRow>
                 </TableBody>
-              ) : (
+              ) : dataTableData.data.length == 0 ? (
-                dataTableData.data.length == 0 ? 
-                (
                 <TableBody>
                   <TableRow>
-                      <TableCell colSpan={8} align="center">No Data</TableCell>
+                    <TableCell colSpan={8} align="center">
+                      No Data
+                    </TableCell>
                   </TableRow>
                 </TableBody>
               ) : (
                 <TableBody>
-                    {dataTableData.data.map(row => (
+                  {dataTableData.data.map((row) => (
                     <Row key={row.code} row={row} />
                   ))}
                 </TableBody>
-                )
               )}
             </Table>
           </TableContainer>
-        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
+          <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
         </Card>
       </Container>
     </Page>