code base

2025-07-13 22:49:55 +05:30
parent d4f21c9a99
commit cd43f0e98e
96 changed files with 17779 additions and 0 deletions
--- a/frontend/src/pages/Applications/Applications.jsx
+++ b/frontend/src/pages/Applications/Applications.jsx
@@ -0,0 +1,112 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { useParams, useRouteLoaderData } from "react-router-dom";
+import ApplicationTable from "../Applications/components/ApplicationTable";
+import Pagination from "../../components/Pagination";
+import axios from "axios";
+import ApplicationView from "../ApplicationView/ApplicationView";
+import ApplicationsStatusDescription from "./components/ApplicationsStatusDescription";
+import Search from "./components/Search";
+import Modal from "../../components/Modal/Modal";
+import Root from "../../components/DashboardRoot/Root";
+import { TbLoader3 } from "react-icons/tb";
+
+const Applications = () => {
+  const { role } =
+    useRouteLoaderData("Applicant-Root")?.data ||
+    useRouteLoaderData("Validator-Root")?.data;
+  const [numOfApplications, setNumOfApplications] = useState(0);
+  const [applications, setApplications] = useState([]);
+  const [applicantName, setApplicantName] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [applicationDisplay, setApplicationDisplay] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 4;
+  const { status } = useParams();
+
+  // Reset currentPage when status changes
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [status]);
+
+  // Fetch applications based on status, pagination, and search criteria
+  useEffect(() => {
+    const fetchApplications = async () => {
+      setLoading(true);
+      try {
+        const skip = (currentPage - 1) * itemsPerPage;
+        const res = await axios.get(
+          `${
+            import.meta.env.VITE_APP_API_URL
+          }/general/getApplications/${status}?take=${itemsPerPage}&skip=${skip}${
+            applicantName
+              ? `&sortBy=applicantName&sortValue=${applicantName}`
+              : ""
+          }`,
+          { withCredentials: true }
+        );
+        setNumOfApplications(res.data.totalApplications);
+        setApplications(res.data.applications);
+      } catch (err) {
+        console.error(err);
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchApplications();
+  }, [status, currentPage, applicantName]);
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+  const handleSelect = useCallback((selection) => {
+    setApplicantName(selection); // Update search criteria only when selection is finalized
+  }, []);
+
+  const renderTable = () =>
+    applications.length > 0 ? (
+      <ApplicationTable
+        title={`${
+          status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()
+        } Applications`}
+        applications={applications}
+      />
+    ) : (
+      <p className="text-gray-600">
+        No {status.toLowerCase()} applications found.
+      </p>
+    );
+
+  if (loading) {
+    return (
+      <div className="flex flex-col justify-center items-center h-full animate-pulse pb-[10%]">
+        <TbLoader3 className="animate-spin text-xl size-24 text-red-700" />
+        <p className="mt-2">Loading...</p>
+      </div>
+    );
+  }
+  if (error) return <div>Error: {error}</div>;
+
+  return (
+    <main className="flex flex-col p-6">
+      <div className="min-w-min bg-white shadow rounded-lg p-6 mb-20">
+        <ApplicationsStatusDescription />
+
+        {role === "Validator" && (
+          <Search value={applicantName} setValue={handleSelect} />
+        )}
+        {renderTable()}
+        <Pagination
+          numOfItems={numOfApplications}
+          itemsPerPage={itemsPerPage}
+          currentPage={currentPage}
+          onPageChange={handlePageChange}
+        />
+      </div>
+    </main>
+  );
+};
+
+export default Applications;