hide notification dashboard & add search employee data

app/Services/CorporateMemberService.php

@@ -203,6 +203,12 @@ class CorporateMemberService
             ->whereHas('employeds', function ($query) use ($corporateId) {
                 $query->where('corporate_id', $corporateId);
             })
+            ->when($request->input('search'), function ($query, $search) {
+                $query->where(function ($query) use ($search) {
+                    $query->orWhere('member_id', 'like', "%" . $search . "%")
+                        ->orWhere('name', 'like', "%" . $search . "%");
+                });
+            })
             ->when($request->has('orderBy'), function ($query) use ($request) {
                 $orderBy = match ($request->input('orderBy')) {
                     'memberId' => 'member_id',

frontend/client-portal/src/@types/table.ts

@@ -84,6 +84,7 @@ export type TableListProps<DataType> = {
   };
   searchs?: {
     useSearchs: boolean;
+    fullWidth?: boolean;
     searchText: string;
     setSearchText: Dispatch<SetStateAction<string>>;
     handleSearchSubmit: (event: FormEvent<HTMLFormElement>) => void;

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

@@ -1,5 +1,4 @@
 /* ---------------------------------- @mui ---------------------------------- */
-import { styled } from '@mui/material/styles';
 import {
   Paper,
   Table as TableContent,
@@ -12,49 +11,23 @@ import {
   Button,
   TableSortLabel,
   Box,
-  Card,
   Grid,
   FormControl,
   InputLabel,
   Select,
   MenuItem,
-  SelectChangeEvent,
+  InputAdornment,
-  Stack,
   Typography,
-  LinearProgress,
-  linearProgressClasses,
 } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
-/* ---------------------------------- axios --------------------------------- */
-import axios from '../utils/axios';
 /* ---------------------------------- react --------------------------------- */
-import { Fragment, useContext, useEffect, useState } from 'react';
+import { Fragment } from 'react';
-import { useSearchParams } from 'react-router-dom';
 /* -------------------------------- component ------------------------------- */
 import BaseTablePagination from './BaseTablePagination';
-/* ---------------------------------- theme --------------------------------- */
-import palette from '../theme/palette';
 /* ---------------------------------- utils --------------------------------- */
-import { UserCurrentCorporateContext } from '../contexts/UserCurrentCorporate';
+import { Download, Search as SearchIcon } from '@mui/icons-material';
-import { fSplit } from '../utils/formatNumber';
-import { Download, Search as SearchIcon, Upload } from '@mui/icons-material';
 /* ---------------------------------- types --------------------------------- */
-import { DivisionDataProps, Order, PaginationTableProps, TableListProps } from '../@types/table';
+import { DivisionDataProps, StatusDataProps, TableListProps } from '../@types/table';
-import { InputAdornment } from '@mui/material';
-import GetAppIcon from '@mui/icons-material/GetApp';
-/* --------------------------------- styled --------------------------------- */
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
-  height: 10,
-  borderRadius: 6,
-  [`&.${linearProgressClasses.colorPrimary}`]: {
-    backgroundColor: '#D1F1F1',
-  },
-  [`& .${linearProgressClasses.bar}`]: {
-    borderRadius: 6,
-    backgroundColor: theme.palette.primary.main,
-  },
-}));
-/* -------------------------------------------------------------------------- */
 
 export default function Table<T>({
   headCells,
@@ -136,7 +109,7 @@ export default function Table<T>({
     const parameters = Object.fromEntries([
       ...params.searchParams.entries(),
       ['page', newPage + 1],
-      ['per_page', paginations.rowsPerPage]
+      ['per_page', paginations.rowsPerPage],
     ]);
     paginations.setPage(newPage);
     await new Promise((resolve) => setTimeout(resolve, 500));
@@ -187,19 +160,19 @@ export default function Table<T>({
                 </FormControl>
               </Grid>
               <Grid item xs={12} lg={9} xl={10}>
-                  <form onSubmit={searchs.handleSearchSubmit}>
+                <form onSubmit={searchs?.handleSearchSubmit}>
                   <TextField
                     id="search-input"
                     label="Search"
                     variant="outlined"
-                      onChange={(event) => searchs.setSearchText(event.target.value)}
+                    onChange={(event) => searchs?.setSearchText(event.target.value)}
-                      value={searchs.searchText}
+                    value={searchs?.searchText}
                     fullWidth
                   />
                 </form>
               </Grid>
             </Fragment>
-            ) : null }
+          ) : null}
 
           {searchs && searchs.useSearchs ? (
             <Fragment>
@@ -223,8 +196,8 @@ export default function Table<T>({
                     />
                   </form>
                 </Grid>
-                ) :
+              ) : (
-                  <Grid item xs={12} lg={6} xl={6}>
+                <Grid item xs={12} lg={searchs.fullWidth ? 12 : 6} xl={searchs.fullWidth ? 12 : 6}>
                   <form onSubmit={searchs.handleSearchSubmit}>
                     <TextField
                       id="search-input"
@@ -243,10 +216,9 @@ export default function Table<T>({
                     />
                   </form>
                 </Grid>
-                }
+              )}
-                  
             </Fragment>
-            ) : null }
+          ) : null}
 
           {/* Start date */}
           {filterStartDate && filterStartDate.useFilter ? (
@@ -266,7 +238,7 @@ export default function Table<T>({
                 />
               </form>
             </Grid>
-            ) : null }
+          ) : null}
 
           {/* End Date */}
 
@@ -287,7 +259,7 @@ export default function Table<T>({
                 />
               </form>
             </Grid>
-            ) : null }
+          ) : null}
 
           {/* Filter status */}
           {filterStatus && filterStatus.useFilter ? (
@@ -302,7 +274,7 @@ export default function Table<T>({
                   onChange={filterStatus.config.handleStatusChange}
                 >
                   <MenuItem value="all">All</MenuItem>
-                    {filterStatus.config.filterData.map((row: StatusDataProps, index) => (
+                  {filterStatus.config.statusData.map((row: StatusDataProps, index) => (
                     <MenuItem key={index} value={row.id}>
                       {row.name}
                     </MenuItem>
@@ -310,21 +282,25 @@ export default function Table<T>({
                 </Select>
               </FormControl>
             </Grid>
-            ) : null } 
+          ) : null}
 
           {/* Export Report */}
-
           {exportReport && exportReport.useExport ? (
             <Grid item xs={12} lg={2} xl={2}>
               <FormControl fullWidth>
-                  <Button variant='contained' sx={{p:2}} onClick={exportReport.handleExportReport}>
+                <Button
+                  variant="contained"
+                  sx={{ p: 2 }}
+                  onClick={() => exportReport.handleExportReport}
+                >
                   <Download />
-                    <Typography variant='inherit' sx={{marginLeft: 1}}>Export</Typography> 
+                  <Typography variant="inherit" sx={{ marginLeft: 1 }}>
+                    Export
+                  </Typography>
                 </Button>
               </FormControl>
             </Grid>
-            ) : null } 
+          ) : null}
-
         </Grid>
       </Grid>
       {/* End Field 1 */}
@@ -338,7 +314,7 @@ export default function Table<T>({
             {/* End Table Header */}
             {/* Table Body */}
             <TableBody>
-                {loadings.isLoading && rows.length >= 1  ? (
+              {loadings.isLoading && rows && rows.length >= 1 ? (
                 <TableRow>
                   <TableCell colSpan={headCells?.length} align="center">
                     Loading . . .

frontend/client-portal/src/layouts/dashboard/index.tsx

@@ -60,9 +60,8 @@ export default function DashboardLayout() {
 
   const [corporateValue, setCorporateValue] = useLocalStorage(
     'corporateValue',
-    user.corporate ? `${user.corporate.id}` : ''
+    user && user.corporate ? `${user.corporate.id}` : ''
   );
-  const value = { corporateValue, setCorporateValue };
 
   if (verticalLayout) {
     return (
@@ -96,7 +95,7 @@ export default function DashboardLayout() {
   }
 
   return (
-    <UserCurrentCorporateContext.Provider value={value}>
+    <UserCurrentCorporateContext.Provider value={{ corporateValue, setCorporateValue }}>
       <Box
         sx={{
           display: { lg: 'flex' },

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

@@ -21,7 +21,7 @@ import { Stack } from '@mui/system';
 import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
 import Table from '../../components/Table';
 import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
-import { useSearchParams } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
 import palette from '../../theme/palette';
 import { fSplit } from '../../utils/formatNumber';
 
@@ -80,6 +80,7 @@ type CardPolicyProps = {
 export default function Index() {
   const { themeStretch } = useSettings();
   const { corporateValue } = useContext(UserCurrentCorporateContext);
+  const { pathname } = useLocation();
 
   const [memberData, setMemberData] = useState([]);
   const [policyData, setPolicyData] = useState<CardPolicyProps>();
@@ -257,8 +258,6 @@ export default function Index() {
     (async () => {
       setIsLoading(true);
 
-      await new Promise((resolve) => setTimeout(resolve, 250));
-
       const parameters =
         Object.keys(appliedParams).length !== 0
           ? appliedParams
@@ -270,10 +269,12 @@ export default function Index() {
         params: { ...parameters },
       });
 
-      //      console.log('member', corporateMembers);
       const corporateTopUpLimit = await axios.get(`${corporateValue}/topup`);
 
+      if (pathname === '/dashboard') {
         setSearchParams(parameters);
+      }
+
       setPolicyData({
         limit: corporatePolicyLimit.data.data,
         topUpLimit: corporateTopUpLimit.data.data,

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

@@ -85,6 +85,31 @@ export default function List() {
 
   /* -------------------------------------------------------------------------- */
 
+  /* ------------------------------ handle search ----------------------------- */
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (searchText === '') {
+      searchParams.delete('search');
+      const params = Object.fromEntries([...searchParams.entries()]);
+      setAppliedParams(params);
+    } else {
+      const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
+      setAppliedParams(params);
+    }
+  };
+
+  const searchs = {
+    useSearchs: true,
+    fullWidth: true,
+    searchText: searchText,
+    setSearchText: setSearchText,
+    handleSearchSubmit: handleSearchSubmit,
+  };
+  /* -------------------------------------------------------------------------- */
+
   /* -------------------------------- headCell -------------------------------- */
   const headCells: HeadCell<never>[] = [
     {
@@ -146,11 +171,6 @@ export default function List() {
       setData(
         response.data.data.map((obj: any) => ({
           ...obj,
-          // memberId:
-          // <Button
-          //  onClick={() => navigate ('/employee-data/user-profile/'+obj.personId)}
-          // >{obj.memberId}</Button>
-          // ,
           status:
             obj.status === 1 ? (
               <Label color="success">Active</Label>
@@ -200,7 +220,7 @@ export default function List() {
         paginations={paginations}
         loadings={loadings}
         params={params}
-        // searchs={searchs}
+        searchs={searchs}
         // filters={filters}
       />
     </Stack>