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

src/components/Low/Select.tsx

@@ -17,9 +17,10 @@ interface Props {
 	onChange: (value: Option | null) => void;
 	isClearable?: boolean;
 	styles?: StylesConfig<Option, boolean, GroupBase<Option>>;
+	className?: string;
 }
 
-export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable}: Props) {
+export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, className}: Props) {
 	const [target, setTarget] = useState<HTMLElement>();
 
 	useEffect(() => {
@@ -34,6 +35,7 @@ export default function Select({value, defaultValue, options, placeholder, disab
 					: clsx(
 							"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
 							disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+							className,
 					  )
 			}
 			options={options}

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,14 +148,42 @@ 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">
+			<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}
@@ -157,6 +194,7 @@ export default function CodeList({user}: {user: User}) {
 						Delete
 					</Button>
 				</div>
+			</div>
 			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 				<thead>
 					{table.getHeaderGroups().map((headerGroup) => (