ENCOA-13: Add filter for "In Use" and "Unused" for the Code List

ENCOA-15: Checkbox to select/unselect all for the Code List

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

@@ -32,22 +32,33 @@ 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 [filterAvailability, setFilterAvailability] = useState<"in-use" | "unused">();
+
 	const [filteredCodes, setFilteredCodes] = useState<Code[]>([]);
 
 	const {users} = useUsers();
 	const {codes, reload} = useCodes(user?.type === "corporate" ? user?.id : undefined);
 
 	useEffect(() => {
-		if (!filteredCorporate) return setFilteredCodes(codes);
+		let result = [...codes];
+		if (filteredCorporate) result = result.filter((x) => x.creator === filteredCorporate.id);
+		if (filterAvailability) result = result.filter((x) => (filterAvailability === "in-use" ? !!x.userId : !x.userId));
 
-		setFilteredCodes(codes.filter((x) => x.creator === filteredCorporate.id));
+		setFilteredCodes(result);
-	}, [codes, filteredCorporate]);
+	}, [codes, filteredCorporate, filterAvailability]);
 
 	const toggleCode = (id: string) => {
 		setSelectedCodes((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
 	};
 
+	const toggleAllCodes = (checked: boolean) => {
+		if (checked) return setSelectedCodes(filteredCodes.filter((x) => !x.userId).map((x) => x.code));
+
+		return setSelectedCodes([]);
+	};
+
 	const deleteCodes = async (codes: string[]) => {
 		if (!confirm(`Are you sure you want to delete these ${codes.length} code(s)?`)) return;
 
@@ -97,7 +108,17 @@ export default function CodeList({user}: {user: User}) {
 
 	const defaultColumns = [
 		columnHelper.accessor("code", {
-			header: "",
+			id: "code",
+			header: () => (
+				<Checkbox
+					disabled={filteredCodes.filter((x) => !x.userId).length === 0}
+					isChecked={
+						selectedCodes.length === filteredCodes.filter((x) => !x.userId).length && filteredCodes.filter((x) => !x.userId).length > 0
+					}
+					onChange={(checked) => toggleAllCodes(checked)}>
+					{""}
+				</Checkbox>
+			),
 			cell: (info) =>
 				!info.row.original.userId ? (
 					<Checkbox isChecked={selectedCodes.includes(info.getValue())} onChange={() => toggleCode(info.getValue())}>
@@ -156,33 +177,46 @@ export default function CodeList({user}: {user: User}) {
 	return (
 		<>
 			<div className="flex items-center justify-between pb-4 pt-1">
-				<Select
+				<div className="flex items-center gap-4">
-					className="!w-96 !py-1"
+					<Select
-					disabled={user?.type === "corporate"}
+						className="!w-96 !py-1"
-					isClearable
+						disabled={user?.type === "corporate"}
-					value={
+						isClearable
-						filteredCorporate
+						placeholder="Corporate"
-							? {
+						value={
-									label: `${
+							filteredCorporate
-										filteredCorporate.type === "corporate"
+								? {
-											? filteredCorporate.corporateInformation?.companyInformation?.name || filteredCorporate.name
+										label: `${
-											: filteredCorporate.name
+											filteredCorporate.type === "corporate"
-									} (${USER_TYPE_LABELS[filteredCorporate.type]})`,
+												? filteredCorporate.corporateInformation?.companyInformation?.name || filteredCorporate.name
-									value: filteredCorporate.id,
+												: filteredCorporate.name
-							  }
+										} (${USER_TYPE_LABELS[filteredCorporate.type]})`,
-							: null
+										value: filteredCorporate.id,
-					}
+								  }
-					options={users
+								: null
-						.filter((x) => ["admin", "developer", "corporate"].includes(x.type))
+						}
-						.map((x) => ({
+						options={users
-							label: `${x.type === "corporate" ? x.corporateInformation?.companyInformation?.name || x.name : x.name} (${
+							.filter((x) => ["admin", "developer", "corporate"].includes(x.type))
-								USER_TYPE_LABELS[x.type]
+							.map((x) => ({
-							})`,
+								label: `${x.type === "corporate" ? x.corporateInformation?.companyInformation?.name || x.name : x.name} (${
-							value: x.id,
+									USER_TYPE_LABELS[x.type]
-							user: x,
+								})`,
-						}))}
+								value: x.id,
-					onChange={(value) => setFilteredCorporate(value ? users.find((x) => x.id === value?.value) : undefined)}
+								user: x,
-				/>
+							}))}
+						onChange={(value) => setFilteredCorporate(value ? users.find((x) => x.id === value?.value) : undefined)}
+					/>
+					<Select
+						className="!w-96 !py-1"
+						placeholder="Availability"
+						isClearable
+						options={[
+							{label: "In Use", value: "in-use"},
+							{label: "Unused", value: "unused"},
+						]}
+						onChange={(value) => setFilterAvailability(value ? (value.value as typeof filterAvailability) : undefined)}
+					/>
+				</div>
 				<div className="flex gap-4 items-center">
 					<span>{selectedCodes.length} code(s) selected</span>
 					<Button