view table alarm-center

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

@@ -15,9 +15,10 @@ import {
 } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
 /* ---------------------------------- axios --------------------------------- */
-import axios from 'axios';
+// import axios from 'axios';
+import axios from '../../utils/axios';
 /* ---------------------------------- react --------------------------------- */
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 /* -------------------------------- component ------------------------------- */
 import Iconify from '../../components/Iconify';
 import BaseTablePagination from '../../components/BaseTablePagination';
@@ -25,6 +26,7 @@ import BaseTablePagination from '../../components/BaseTablePagination';
 import useMap from '../../hooks/useMap';
 /* ---------------------------------- theme --------------------------------- */
 import palette from '../../theme/palette';
+import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
 
 /* ---------------------------------- types --------------------------------- */
 
@@ -40,12 +42,12 @@ type PaginationTableProps = {
 };
 
 type DataTableProps = {
-  name: string;
-  member_id: string;
+  fullName: string;
+  memberId: string;
   service: string;
   start_date: string;
   end_date: string;
-  status: string;
+  status: boolean | number;
 };
 
 /* -------------------------------------------------------------------------- */
@@ -130,8 +132,9 @@ function EnhancedTableHead(props: EnhancedTableProps) {
 /* -------------------------------------------------------------------------- */
 
 export default function List() {
+  const { corporateValue } = useContext(UserCurrentCorporateContext);
   const [order, setOrder] = useState<Order>('asc');
-  const [orderBy, setOrderBy] = useState('name');
+  const [orderBy, setOrderBy] = useState('');
   const [customSearchParams, setCustomSearchParams] = useMap<string, any>();
   const [isLoading, setIsLoading] = useState(true);
   const [dataTable, setDataTable] = useState([]);
@@ -147,7 +150,6 @@ export default function List() {
     to: 0,
     total: 0,
   });
-
   /* ------------------------------- handle sort ------------------------------ */
   const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
     const isAsc = orderBy === property && order === 'asc';
@@ -155,8 +157,8 @@ export default function List() {
     setOrderBy(property);
     const params = Object.fromEntries([
       ...customSearchParams.entries(),
-      ['order', isAsc ? 'desc' : 'asc'],
-      ['orderBy', property],
+      // ['order', isAsc ? 'desc' : 'asc'],
+      // ['orderBy', property],
     ]);
     setIsLoading(true);
     await new Promise((resolve) => setTimeout(resolve, 500));
@@ -190,14 +192,15 @@ export default function List() {
       ? appliedParams
       : Object.fromEntries([
           ...customSearchParams.entries(),
-          ['order', order],
-          ['orderBy', orderBy],
+          // ['order', order],
+          // ['orderBy', orderBy],
         ]);
-    const response = await axios.get('http://localhost:8001/api/alarm-center', { params: params });
-
+    const response = await axios.get(`/${corporateValue}/members?type=alarm-center`, {
+      params: params,
+    });
     setDataTable(response.data.data);
-    setPaginationTable(response.data.meta);
-    setRowsPerPage(response.data.meta.per_page);
+    setPaginationTable(response.data);
+    setRowsPerPage(response.data.per_page);
     setIsLoading(false);
   };
   /* -------------------------------------------------------------------------- */
@@ -264,13 +267,13 @@ export default function List() {
               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.fullName}</TableCell>
+                  <TableCell align="center">{row.memberId}</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' ? (
+                    {row.status === 1 ? (
                       <Button
                         startIcon={<Iconify icon="ic:round-check" />}
                         sx={{
@@ -284,7 +287,7 @@ export default function List() {
                           },
                         }}
                       >
-                        {row.status}
+                        done
                       </Button>
                     ) : (
                       <Button
@@ -300,7 +303,7 @@ export default function List() {
                           },
                         }}
                       >
-                        {row.status}
+                        Ongoing
                       </Button>
                     )}
                   </TableCell>