ENCOA-4: Added the ability to filter by Creator on the Code List

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

@@ -1,5 +1,6 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
+import Select from "@/components/Low/Select";
 import useCodes from "@/hooks/useCodes";
 import useUser from "@/hooks/useUser";
 import useUsers from "@/hooks/useUsers";
@@ -31,10 +32,18 @@ const CreatorCell = ({id, users}: {id: string; users: User[]}) => {
 
 export default function CodeList({user}: {user: User}) {
 	const [selectedCodes, setSelectedCodes] = useState<string[]>([]);
+	const [filteredCorporate, setFilteredCorporate] = useState<User | undefined>(user?.type === "corporate" ? user : undefined);
+	const [filteredCodes, setFilteredCodes] = useState<Code[]>([]);
 
 	const {users} = useUsers();
 	const {codes, reload} = useCodes(user?.type === "corporate" ? user?.id : undefined);
 
+	useEffect(() => {
+		if (!filteredCorporate) return setFilteredCodes(codes);
+
+		setFilteredCodes(codes.filter((x) => x.creator === filteredCorporate.id));
+	}, [codes, filteredCorporate]);
+
 	const toggleCode = (id: string) => {
 		setSelectedCodes((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
 	};
@@ -139,23 +148,52 @@ export default function CodeList({user}: {user: User}) {
 	];
 
 	const table = useReactTable({
-		data: codes,
+		data: filteredCodes,
 		columns: defaultColumns,
 		getCoreRowModel: getCoreRowModel(),
 	});
 
 	return (
 		<>
-			<div className="flex items-center justify-between pb-4 pt-1 px-4">
-				<span>{selectedCodes.length} code(s) selected</span>
-				<Button
-					disabled={selectedCodes.length === 0}
-					variant="outline"
-					color="red"
-					className="!py-1 px-10"
-					onClick={() => deleteCodes(selectedCodes)}>
-					Delete
-				</Button>
+			<div className="flex items-center justify-between pb-4 pt-1">
+				<Select
+					className="!w-96 !py-1"
+					disabled={user?.type === "corporate"}
+					isClearable
+					value={
+						filteredCorporate
+							? {
+									label: `${
+										filteredCorporate.type === "corporate"
+											? filteredCorporate.corporateInformation?.companyInformation?.name || filteredCorporate.name
+											: filteredCorporate.name
+									} (${USER_TYPE_LABELS[filteredCorporate.type]})`,
+									value: filteredCorporate.id,
+							  }
+							: null
+					}
+					options={users
+						.filter((x) => ["admin", "developer", "corporate"].includes(x.type))
+						.map((x) => ({
+							label: `${x.type === "corporate" ? x.corporateInformation?.companyInformation?.name || x.name : x.name} (${
+								USER_TYPE_LABELS[x.type]
+							})`,
+							value: x.id,
+							user: x,
+						}))}
+					onChange={(value) => setFilteredCorporate(value ? users.find((x) => x.id === value?.value) : undefined)}
+				/>
+				<div className="flex gap-4 items-center">
+					<span>{selectedCodes.length} code(s) selected</span>
+					<Button
+						disabled={selectedCodes.length === 0}
+						variant="outline"
+						color="red"
+						className="!py-1 px-10"
+						onClick={() => deleteCodes(selectedCodes)}>
+						Delete
+					</Button>
+				</div>
 			</div>
 			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 				<thead>