Added payment done and pending visible to Admin and Developers without filters

src/dashboards/Admin.tsx

@@ -7,12 +7,13 @@ import UserList from "@/pages/(admin)/Lists/UserList";
 import {dateSorter} from "@/utils";
 import moment from "moment";
 import {useEffect, useState} from "react";
-import {BsArrowLeft, BsBriefcaseFill, BsGlobeCentralSouthAsia, BsPerson, BsPersonFill, BsPencilSquare, BsBank} from "react-icons/bs";
+import {BsArrowLeft, BsBriefcaseFill, BsGlobeCentralSouthAsia, BsPerson, BsPersonFill, BsPencilSquare, BsBank, BsCurrencyDollar} from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
 import IconCard from "./IconCard";
 import useFilterStore from "@/stores/listFilterStore";
 import {useRouter} from "next/router";
+import usePaymentStatusUsers from '@/hooks/usePaymentStatusUsers';
 
 interface Props {
 	user: User;
@@ -26,6 +27,7 @@ export default function AdminDashboard({user}: Props) {
 	const {stats} = useStats(user.id);
 	const {users, reload} = useUsers();
 	const {groups} = useGroups();
+	const { pending, done } = usePaymentStatusUsers();
 
 	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
 	const router = useRouter();
@@ -146,6 +148,26 @@ export default function AdminDashboard({user}: Props) {
 		</>
 	);
 
+	const CorporatePaidStatusList = ({ paid }: {paid: Boolean}) => {
+		const list = paid ? done : pending;
+		const filter = (x: User) => x.type === "corporate" && list.includes(x.id);
+
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">{paid ? 'Payment Done' : 'Pending Payment'} ({list.length})</h2>
+				</div>
+				<UserList user={user} filters={[filter]} />
+			</>
+		);
+	};
+
 	const InactiveCountryManagerList = () => {
 		return (
 			<>
@@ -268,6 +290,20 @@ export default function AdminDashboard({user}: Props) {
 					}
 					color="rose"
 				/>
+				<IconCard
+					onClick={() => setPage("paymentdone")}
+					Icon={BsCurrencyDollar}
+					label="Payment Done"
+					value={done.length}
+					color="purple"
+				/>
+				<IconCard
+					onClick={() => setPage("paymentdone")}
+					Icon={BsCurrencyDollar}
+					label="Pending Payment"
+					value={pending.length}
+					color="rose"
+				/>
 			</section>
 
 			<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between">
@@ -477,6 +513,8 @@ export default function AdminDashboard({user}: Props) {
 			{page === "inactiveStudents" && <InactiveStudentsList />}
 			{page === "inactiveCorporate" && <InactiveCorporateList />}
 			{page === "inactiveCountryManagers" && <InactiveCountryManagerList />}
+			{page === "paymentdone" && <CorporatePaidStatusList paid={true} />}
+			{page === "paymentpending" && <CorporatePaidStatusList paid={false} />}
 			{page === "" && <DefaultDashboard />}
 		</>
 	);

src/pages/api/payments/assigned.ts

@@ -30,16 +30,20 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
     return;
   }
 
-  const codeQuery = query(
-    collection(db, "payments"),
-    // where("agent", "==", "xRMirufz6PPQqxKBgvPTWiWKBD63"),
-    where(req.session.user.type, "==", req.session.user.id)
-    // Based on the logic of query we should be able to do this:
-    // where("isPaid", "==", paid === "paid"),
-    // but for some reason it is ignoring all but the first clause
-    // I opted into only fetching relevant content for the user
-    // and then filter it with JS
-  );
+  // if it's an admin, don't apply query filters
+  const whereClauses = ["admin", "developer"].includes(req.session.user.type)
+    ? []
+    : [
+        // where("agent", "==", "xRMirufz6PPQqxKBgvPTWiWKBD63"),
+        where(req.session.user.type, "==", req.session.user.id),
+        // Based on the logic of query we should be able to do this:
+        // where("isPaid", "==", paid === "paid"),
+        // but for some reason it is ignoring all but the first clause
+        // I opted into only fetching relevant content for the user
+        // and then filter it with JS
+      ];
+
+  const codeQuery = query(collection(db, "payments"), ...whereClauses);
 
   const snapshot = await getDocs(codeQuery);
   if (snapshot.empty) {