fixing table filter and search on dashboard

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

@@ -8,6 +8,7 @@ import {
   IconButton,
   LinearProgress,
   linearProgressClasses,
+  SelectChangeEvent,
 } from '@mui/material';
 // hooks
 import useSettings from '../../hooks/useSettings';
@@ -22,11 +23,10 @@ import { Stack } from '@mui/system';
 import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
 import { PolicyProps } from '../../@types/policy';
 import Table from '../../components/Table';
-import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
+import { DivisionData, HeadCell, Order, PaginationTableProps } from '../../@types/table';
 import { useSearchParams } from 'react-router-dom';
 import palette from '../../theme/palette';
 import { MoreVert as MoreVertIcon } from '@mui/icons-material';
-import TableList from '../../sections/dashboard/TableList';
 import { fSplit } from '../../utils/formatNumber';
 
 const itemList = [
@@ -130,6 +130,60 @@ export default function Index() {
   };
   /* -------------------------------------------------------------------------- */
 
+  /* ------------------------------ 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 = {
+    searchText: searchText,
+    setSearchText: setSearchText,
+    handleSearchSubmit: handleSearchSubmit,
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ handle filter ----------------------------- */
+  const [divisionValue, setDivisionValue] = useState('all');
+  const [divisionData, setDivisionData] = useState([]);
+
+  const handleDivisionChange = (event: SelectChangeEvent) => {
+    setDivisionValue(event.target.value as string);
+
+    if (event.target.value === 'all') {
+      searchParams.delete('division');
+      const params = Object.fromEntries([...searchParams.entries()]);
+      setAppliedParams(params);
+    } else {
+      const params = Object.fromEntries([
+        ...searchParams.entries(),
+        ['division', event.target.value as string],
+      ]);
+      setAppliedParams(params);
+    }
+  };
+
+  const filters = {
+    useFilter: true,
+    config: {
+      label: 'Division',
+      divisionValue: divisionValue,
+      divisionData: divisionData,
+      handleDivisionChange: handleDivisionChange,
+    },
+  };
+  /* -------------------------------------------------------------------------- */
+
   /* -------------------------------- headCell -------------------------------- */
   const headCells: HeadCell<never>[] = [
     {
@@ -181,6 +235,7 @@ export default function Index() {
   useEffect(() => {
     (async () => {
       setIsLoading(true);
+      let mounted = true;
 
       await new Promise((resolve) => setTimeout(resolve, 250));
 
@@ -196,17 +251,30 @@ export default function Index() {
         params: { ...parameters },
       });
 
-      setPolicyData(corporatePolicyLimit.data.data);
-
       setSearchParams(parameters);
-      setMemberData(corporateMembers.data.data);
-      setPaginationTable(corporateMembers.data);
-      setRowsPerPage(corporateMembers.data.per_page);
 
-      setIsLoading(false);
+      if (mounted) {
+        setPolicyData(corporatePolicyLimit.data.data);
+        setDivisionData(corporateDivision.data);
+        setMemberData(corporateMembers.data.data);
+        setPaginationTable(corporateMembers.data);
+        setRowsPerPage(corporateMembers.data.per_page);
+
+        setIsLoading(false);
+      }
+
+      return () => {
+        mounted = false;
+      };
     })();
   }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
 
+  /* ------------------------------- card policy ------------------------------ */
+  const newPolicyData = {
+    limit: policyData,
+  };
+  /* -------------------------------------------------------------------------- */
+
   const newMemberData: any = memberData.map((obj: any) => {
     return {
       ...obj,
@@ -270,7 +338,7 @@ export default function Index() {
             <CardNotification data={itemList} />
           </Grid>
           <Grid item xs={12} lg={6} md={12}>
-            <CardPolicy data={policyData} />
+            <CardPolicy data={newPolicyData} />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
             <Table
@@ -280,8 +348,9 @@ export default function Index() {
               paginations={paginations}
               loadings={loadings}
               params={params}
+              searchs={searchs}
+              filters={filters}
             />
-            {/* <TableList /> */}
           </Grid>
         </Grid>
       </Container>