Added search area for table users

src/hooks/useListSearch.tsx

@@ -0,0 +1,48 @@
+import {useState, useMemo} from 'react';
+import Input from "@/components/Low/Input";
+
+/*fields example = [
+    ['id'],
+    ['companyInformation', 'companyInformation', 'name']
+]*/
+
+
+const getFieldValue = (fields: string[], data: any): string => {
+    if(fields.length === 0) return data;
+    const [key, ...otherFields] = fields;
+
+    if(data[key]) return getFieldValue(otherFields, data[key]);
+    return data;
+}
+
+export const useListSearch = (fields: string[][], rows: any[]) => {
+    const [text, setText] = useState('');
+
+    const renderSearch = () => (
+        <Input
+            label="Search"
+            type="text"
+            name="search"
+            onChange={setText}
+            placeholder="Enter search text"
+            value={text}
+        />
+    )
+
+    const updatedRows = useMemo(() => {
+        const searchText = text.toLowerCase();
+        return rows.filter((row) => {
+            return fields.some((fieldsKeys) => {
+                const value = getFieldValue(fieldsKeys, row);
+                if(typeof value === 'string') {
+                    return value.toLowerCase().includes(searchText);
+                }
+            })
+        })
+    }, [fields, rows, text])
+
+    return {
+        rows: updatedRows,
+        renderSearch,
+    }
+}

src/pages/(admin)/Lists/UserList.tsx

@@ -20,9 +20,14 @@ import {USER_TYPE_LABELS} from "@/resources/user";
 import useFilterStore from "@/stores/listFilterStore";
 import {useRouter} from "next/router";
 import {isCorporateUser} from '@/resources/user';
+import { useListSearch } from "@/hooks/useListSearch";
 
 const columnHelper = createColumnHelper<User>();
-
+const searchFields = [
+	['name'],
+	['email'],
+	['corporateInformation', 'companyInformation', 'name'],
+];
 export default function UserList({user, filters = []}: {user: User; filters?: ((user: User) => boolean)[]}) {
 	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
 	const [sorter, setSorter] = useState<string>();
@@ -333,7 +338,7 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 					<SorterArrow name="companyName" />
 				</button>
 			) as any,
-			cell: (info) => info.getValue(),
+			cell: (info) => getCorporateName(info.row.original),
 		}),
 		columnHelper.accessor("subscriptionExpirationDate", {
 			header: (
@@ -478,8 +483,13 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 		return a.id.localeCompare(b.id);
 	};
 
+	const { rows: filteredRows, renderSearch } = useListSearch(
+		searchFields,
+		displayUsers,
+	)
+
 	const table = useReactTable({
-		data: displayUsers,
+		data: filteredRows,
 		columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
 		getCoreRowModel: getCoreRowModel(),
 	});
@@ -562,6 +572,8 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 					)}
 				</>
 			</Modal>
+			<div className="w-full flex flex-col gap-2">
+				{renderSearch()}
 				<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 					<thead>
 						{table.getHeaderGroups().map((headerGroup) => (
@@ -587,5 +599,6 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 					</tbody>
 				</table>
 			</div>
+		</div>
 	);
 }