Merge branch 'staging' of itcorp.primaya.id:rajif/aso into staging

frontend/client-portal/.env.development

@@ -2,6 +2,6 @@ GENERATE_SOURCEMAP=false
 
 PORT=8083
 
-REACT_APP_HOST_API_URL="http://lms.test"
+REACT_APP_HOST_API_URL="http://localhost:8001"
 
-VITE_API_URL="http://lms.test/api/client"
+VITE_API_URL="http://localhost:8001/api/client"

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

@@ -15,128 +15,170 @@ 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';
+import TableComponent from '../../components/Table';
+
 /* ---------------------------------- hooks --------------------------------- */
 import useMap from '../../hooks/useMap';
 /* ---------------------------------- theme --------------------------------- */
 import palette from '../../theme/palette';
+import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
+import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
+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 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 DataTableProps = {
+//   fullName: string;
+//   memberId: string;
+//   service: string;
+//   start_date: string;
+//   end_date: string;
+//   status: boolean | number;
+// };
 
-/* -------------------------------------------------------------------------- */
+// /* -------------------------------------------------------------------------- */
 
-/* -------------------------- enchanced table head -------------------------- */
+// /* -------------------------- enchanced table head -------------------------- */
 
-type Order = 'asc' | 'desc';
+// type Order = 'asc' | 'desc';
 
-interface HeadCell {
-  id: string;
-  label: string;
-}
+// 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',
-  },
-];
+// 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;
-}
+// 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);
-  };
+// function EnhancedTableHead(props: EnhancedTableProps) {
+//   const { order, orderBy, onRequestSort } = props;
+//   const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+//     onRequestSort(event, property);
+//   };
 
-  return (
-    <TableHead>
-      <TableRow>
-        <TableCell align="center">No</TableCell>
-        {headCells.map((headCell) => (
-          <TableCell
-            key={headCell.id}
-            sortDirection={orderBy === headCell.id ? order : false}
-            align="center"
-          >
-            <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>
-          </TableCell>
-        ))}
-      </TableRow>
-    </TableHead>
-  );
-}
+//   return (
+//     <TableHead>
+//       <TableRow>
+//         <TableCell align="center">No</TableCell>
+//         {headCells.map((headCell) => (
+//           <TableCell
+//             key={headCell.id}
+//             sortDirection={orderBy === headCell.id ? order : false}
+//             align="center"
+//           >
+//             <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>
+//           </TableCell>
+//         ))}
+//       </TableRow>
+//     </TableHead>
+//   );
+// }
 
 /* -------------------------------------------------------------------------- */
 
 export default function List() {
-  const [order, setOrder] = useState<Order>('asc');
-  const [orderBy, setOrderBy] = useState('name');
-  const [customSearchParams, setCustomSearchParams] = useMap<string, any>();
+  const { corporateValue } = useContext(UserCurrentCorporateContext);
+
+  const [data, setData] = useState([]);
+
+  /* -------------------------------------------------------------------------- */
+  /*                          setting up for the table                          */
+  /* -------------------------------------------------------------------------- */
   const [isLoading, setIsLoading] = useState(true);
-  const [dataTable, setDataTable] = useState([]);
+
+  const loadings = {
+    isLoading: isLoading,
+    setIsLoading: setIsLoading,
+  };
+
+  /* ------------------------------ handle params ----------------------------- */
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [appliedParams, setAppliedParams] = useState({});
+
+  const params = {
+    searchParams: searchParams,
+    setSearchParams: setSearchParams,
+    appliedParams: appliedParams,
+    setAppliedParams: setAppliedParams,
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ handle order ------------------------------ */
+  const [order, setOrder] = useState<Order>('asc');
+  const [orderBy, setOrderBy] = useState('fullName');
+
+  const orders = {
+    order: order,
+    setOrder: setOrder,
+    orderBy: orderBy,
+    setOrderBy: setOrderBy,
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------- handle pagination --------------------------- */
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
+
   const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
     current_page: 0,
     from: 0,
@@ -148,182 +190,156 @@ export default function List() {
     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);
+  const paginations = {
+    page: page,
+    setPage: setPage,
+    rowsPerPage: rowsPerPage,
+    setRowsPerPage: setRowsPerPage,
+    paginationTable: paginationTable,
+    setPaginationTable: setPaginationTable,
   };
   /* -------------------------------------------------------------------------- */
 
-  /* ------------------------------ Search field ------------------------------ */
+  /* ------------------------------ handle search ----------------------------- */
   const [searchText, setSearchText] = useState('');
 
-  const handleSearch = (event: any) => {
-    setSearchText(event.target.value);
-  };
-
-  const handleSearchSubmit = async (event: any) => {
+  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]);
-    setIsLoading(true);
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    loadDataTable(params);
-    setIsLoading(false);
+
+    if (searchText === '') {
+      searchParams.delete('search');
+      const params = Object.fromEntries([...searchParams.entries()]);
+      setAppliedParams(params);
+    } else {
+      const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
+      setAppliedParams(params);
+    }
   };
-  /* -------------------------------------------------------------------------- */
 
-  /* --------------------------- 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);
+  const searchs = {
+    searchText: searchText,
+    setSearchText: setSearchText,
+    handleSearchSubmit: handleSearchSubmit,
   };
-  /* -------------------------------------------------------------------------- */
 
-  /* ------------------------ 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));
-  };
+  /* -------------------------------- headCell -------------------------------- */
+  const headCells: HeadCell<never>[] = [
+    {
+      id: 'fullName',
+      align: 'left',
+      label: 'Name',
+      isSort: true,
+    },
+    {
+      id: 'memberId',
+      align: 'left',
+      label: 'Member ID',
+      isSort: true,
+    },
+    {
+      id: 'start_date',
+      align: 'center',
+      label: 'Start Date',
+      isSort: true,
+    },
+    {
+      id: 'end_date',
+      align: 'center',
+      label: 'End Date',
+      isSort: false,
+    },
+    {
+      id: 'status',
+      align: 'center',
+      label: 'Status',
+      isSort: true,
+    },
+  ];
   /* -------------------------------------------------------------------------- */
 
   useEffect(() => {
-    loadDataTable();
-  }, []);
+    (async () => {
+      setIsLoading(true);
+
+      await new Promise((resolve) => setTimeout(resolve, 250));
+
+      const parameters =
+        Object.keys(appliedParams).length !== 0
+          ? appliedParams
+          : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
+
+      const response = await axios.get(`/${corporateValue}/members?type=alarm-center`, {
+        params: parameters,
+      });
+
+      setData(
+        response.data.data.map((obj: any) => {
+          return {
+            ...obj,
+            status:
+              obj.status === 1 ? (
+                <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],
+                    },
+                  }}
+                >
+                  done
+                </Button>
+              ) : (
+                <Button
+                  startIcon={<Iconify icon="fa6-solid:clock" />}
+                  sx={{
+                    backgroundColor: '#CD7B2E',
+                    color: '#FFFF',
+                    paddingX: 1.5,
+                    paddingY: 1,
+                    '&:hover': {
+                      backgroundColor: '#BF6919',
+                      color: '#FFFF',
+                    },
+                  }}
+                >
+                  Ongoing
+                </Button>
+              ),
+          };
+        })
+      );
+
+      setPaginationTable(response.data);
+      setRowsPerPage(response.data.per_page);
+
+      if (searchParams.get('page')) {
+        //@ts-ignore
+        const currentPage = parseInt(searchParams.get('page')) - 1;
+
+        paginationTable.current_page = currentPage;
+        setPage(currentPage);
+      }
+
+      setIsLoading(false);
+    })();
+  }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
 
   return (
     <Stack>
-      {/* Search */}
-      <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">
-          <EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleRequestSort} />
-          <TableBody>
-            {isLoading ? (
-              <TableRow>
-                <TableCell colSpan={8} align="center">
-                  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 */}
-      <BaseTablePagination
-        count={paginationTable.total}
-        onPageChange={onPageChangeHandle}
-        page={page}
-        rowsPerPage={rowsPerPage}
-        onRowsPerPageChange={onRowsPerPageChangeHandle}
+      <TableComponent
+        headCells={headCells}
+        rows={data}
+        orders={orders}
+        paginations={paginations}
+        loadings={loadings}
+        params={params}
+        searchs={searchs}
+        // filters={filters}
       />
     </Stack>
   );

frontend/dashboard/src/pages/Corporates/Member/sections/DialogLog.tsx

@@ -61,7 +61,7 @@ const DialogLog = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) =
   const [loadingLog, setLoadingLog] = useState(false);
 
   useEffect(() => {
-    setBenefitIds(data.member.current_plan?.benefits.map((benefit) => benefit.id))
+    setBenefitIds(data.member.current_plan?.benefits.filter((benefit) => benefit.pivot.active == 1).map((benefit) => benefit.id))
     setCheckedBenefitIds(benefitIds)
     console.log('Check All', benefitIds, 'X', data.member.current_plan?.benefits.map((benefit) => benefit.id))
   }, [])