admin financial aids requests page completed successfully.

src/App.jsx

@@ -38,6 +38,7 @@ import {
   MyBlogs,
   Error,
   CourseFinancialAid,
+  MangeFinancialAidRequests,
 } from "./pages";
 import { action as updateProfileInfoAction } from "./components/userProfile/profileSettings/UpdateProfileInfo";
 
@@ -121,6 +122,7 @@ const router = createBrowserRouter([
   {
     path: "/signup",
     element: <SignUp />,
+    errorElement: <Error />,
   },
   {
     path: "/login",
@@ -195,6 +197,10 @@ const router = createBrowserRouter([
         path: "paymentsrecords",
         element: <ManagePayments />,
       },
+      {
+        path: "financial-aid-requests",
+        element: <MangeFinancialAidRequests />,
+      },
     ],
   },
 ]);

src/components/dashboard/FinancialAidRequestElement.jsx

@@ -0,0 +1,127 @@
+import { toast } from "react-toastify";
+import { customFetch } from "../../utils/customFetch";
+
+import TableBody from "./shard/TableBody";
+import TableBodyCell from "./shard/TableBodyCell";
+
+const FinancialAidRequestElement = ({ request, token, setIsChanged }) => {
+  const {
+    _id,
+    age,
+    education,
+    employmentStatus,
+    course,
+    user,
+    applicationStatus,
+    createdAt,
+    updatedAt,
+  } = request;
+  const formatCreatedAtDate = new Date(createdAt).toLocaleDateString();
+
+  const handleApprove = async () => {
+    const confirm = window.confirm(
+      "Are you sure you want to approve this financial aid request?"
+    );
+    if (!confirm) return;
+    try {
+      await customFetch.patch(
+        `admin/approveFinancialAidRequest/${_id}`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      setIsChanged(true);
+      toast.success("Financial application approved successfully");
+    } catch (error) {
+      toast.error(error.response.data.message);
+    }
+  };
+
+  const handleReject = async () => {
+    const confirm = window.confirm(
+      "Are you sure you want to reject this financial aid request?"
+    );
+    if (!confirm) return;
+    try {
+      await customFetch.patch(
+        `admin/rejectFinancialAidRequest/${_id}`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      setIsChanged(true);
+      toast.success("Financial Aid application rejected successfully");
+    } catch (error) {
+      toast.error(error.response.data.message);
+    }
+  };
+
+  const handleDelete = async () => {
+    const confirm = window.confirm(
+      "Are you sure you want to delete this financial aid Request?"
+    );
+    if (!confirm) return;
+    try {
+      await customFetch.delete(`admin/deleteFinancialAidRequest/${_id}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      setIsChanged(true);
+      toast.success("Financial Aid application deleted successfully");
+    } catch (error) {
+      toast.error(error.response.data.message);
+    }
+  };
+
+  return (
+    <TableBody>
+      <TableBodyCell>{_id}</TableBodyCell>
+      <TableBodyCell>{user.name}</TableBodyCell>
+      <TableBodyCell>{user.email}</TableBodyCell>
+      <TableBodyCell>{age}</TableBodyCell>
+      <TableBodyCell>{education}</TableBodyCell>
+      <TableBodyCell>{employmentStatus}</TableBodyCell>
+      <TableBodyCell>{course.title}</TableBodyCell>
+      <TableBodyCell>{formatCreatedAtDate}</TableBodyCell>
+      <TableBodyCell>{applicationStatus}</TableBodyCell>
+
+      <TableBodyCell>
+        <div className="flex gap-5">
+          <button
+            type="button"
+            onClick={handleDelete}
+            className="bg-red-500 text-white p-1.5 rounded hover:bg-red-800"
+          >
+            Delete
+          </button>
+          <button
+            type="button"
+            onClick={handleApprove}
+            disabled={applicationStatus === "approved"}
+            className="bg-green-500 text-white p-1.5 rounded hover:bg-green-800"
+          >
+            Approve
+          </button>
+          <button
+            type="button"
+            onClick={handleReject}
+            disabled={applicationStatus === "rejected"}
+            className="bg-blue-500 text-white p-1.5 rounded hover:bg-blue-800"
+          >
+            Reject
+          </button>
+        </div>
+      </TableBodyCell>
+    </TableBody>
+  );
+};
+
+export default FinancialAidRequestElement;

src/components/dashboard/FinancialAidRequestHeader.jsx

@@ -0,0 +1,21 @@
+import TableHeader from "./shard/TableHeader";
+import TableHeaderCell from "./shard/TableHeaderCell";
+
+const FinancialAidRequestHeader = () => {
+  return (
+    <TableHeader>
+      <TableHeaderCell>Request-ID</TableHeaderCell>
+      <TableHeaderCell>Name</TableHeaderCell>
+      <TableHeaderCell>Email</TableHeaderCell>
+      <TableHeaderCell>Age</TableHeaderCell>
+      <TableHeaderCell>Education</TableHeaderCell>
+      <TableHeaderCell>Employment-Status</TableHeaderCell>
+      <TableHeaderCell>Course-Title</TableHeaderCell>
+      <TableHeaderCell>Created At</TableHeaderCell>
+      <TableHeaderCell>Application-Status</TableHeaderCell>
+      <TableHeaderCell>Actions</TableHeaderCell>
+    </TableHeader>
+  );
+};
+
+export default FinancialAidRequestHeader;

src/components/index.js

@@ -67,6 +67,9 @@ export { default as InstructorElement } from "./dashboard/InstructorElement";
 export { default as InstructorRequestsHeader } from "./dashboard/InstructorRequestsHeader";
 export { default as InstructorsApplicationElement } from "./dashboard/InstructorsApplicationElement";
 
+export { default as FinancialAidRequestHeader } from "./dashboard/FinancialAidRequestHeader";
+export { default as FinancialAidRequestElement } from "./dashboard/FinancialAidRequestElement";
+
 export { default as StatsBox } from "./dashboard/StatsBox";
 export { default as StatsContainer } from "./dashboard/StatsContainer";
 

src/layout/dashboard/DashboardNavBar.jsx

@@ -54,6 +54,10 @@ function DashboardNavBar() {
                 path="/dashboard/paidCourses"
                 navText="Paid Courses"
               />
+              <NavBarLink
+                path="/dashboard/financial-aid-requests"
+                navText="Financial Aid Requests"
+              />
               <NavBarLink
                 path="/dashboard/reservations"
                 navText="Enrollments"

src/layout/dashboard/SideBar.jsx

@@ -10,6 +10,7 @@ import { LiaBlogSolid } from "react-icons/lia";
 import { FaCodePullRequest } from "react-icons/fa6";
 import { FiUsers, FiUserPlus } from "react-icons/fi";
 import { SiGoogledisplayandvideo360 } from "react-icons/si";
+import { MdRequestQuote } from "react-icons/md";
 
 function SideBar() {
   return (
@@ -42,6 +43,13 @@ function SideBar() {
           navText="Paid Courses"
         />
 
+        {/* financial aid request*/}
+        <NavigationLink
+          path="/dashboard/financial-aid-requests"
+          NavIcon={MdRequestQuote}
+          navText="Financial Aid Requests"
+        />
+
         {/* Add Courses */}
         <NavigationLink
           path="/dashboard/addcourse"
@@ -84,13 +92,6 @@ function SideBar() {
           navText="Reserved Courses"
         />
 
-        {/* Settings */}
-        <NavigationLink
-          path="/dashboard/settings"
-          NavIcon={IoSettings}
-          navText="Settings"
-        />
-
         {/* Payments */}
         <NavigationLink
           path="/dashboard/paymentsrecords"
@@ -111,6 +112,12 @@ function SideBar() {
           NavIcon={FaCodePullRequest}
           navText="Instructors Requests"
         />
+        {/* Settings */}
+        <NavigationLink
+          path="/dashboard/settings"
+          NavIcon={IoSettings}
+          navText="Settings"
+        />
       </div>
     </div>
   );

src/pages/dashboard/ManageInstructorsRequests.jsx

@@ -73,9 +73,11 @@ const ManageInstructorsRequests = () => {
       <PageContainer tableHeader="Instructors requests">
         <InstructorRequestsHeader />
         {loading ? (
-          <div className="flex justify-center items-center h-10">
-            <p className="text-2xl font-semibold">Loading...</p>
-          </div>
+          <tr>
+            <td colSpan="10" className="text-center p-5 text-3xl">
+              No Courses Found
+            </td>
+          </tr>
         ) : error ? (
           <div className="flex justify-center items-center h-10">
             <p className="text-2xl font-semibold text-red-500">{error}</p>

src/pages/dashboard/MangeFinancialAidRequests.jsx

@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { customFetch } from "../../utils/customFetch";
+
+import {
+  PageIntro,
+  PageContainer,
+  FinancialAidRequestHeader,
+  FinancialAidRequestElement,
+  Pagination,
+} from "../../components";
+
+const MangeFinancialAidRequests = () => {
+  const { token } = useSelector((state) => state.userReducers);
+  const [financialAidRequests, setFinancialAidRequests] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isChanged, setIsChanged] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(15);
+  const [isMorePages, setIsMorePages] = useState(false);
+
+  useEffect(() => {
+    const fetchFinancialAidRequests = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await customFetch.get(
+          "admin/getAllFinancialAidRequests",
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+            params: {
+              page: currentPage,
+              limit: itemsPerPage,
+            },
+          }
+        );
+
+        const fetchedFinancialAidsApplications =
+          response.data.data.financialAidRequests;
+
+        if (fetchedFinancialAidsApplications.length < itemsPerPage) {
+          setIsMorePages(false);
+        } else {
+          setIsMorePages(true);
+        }
+
+        setFinancialAidRequests(fetchedFinancialAidsApplications);
+      } catch (error) {
+        setError(
+          error.message || "Failed to fetch  Financial Aids Applications "
+        );
+      } finally {
+        setLoading(false);
+        setIsChanged(false);
+      }
+    };
+
+    fetchFinancialAidRequests();
+  }, [token, isChanged, currentPage, itemsPerPage]);
+
+  return (
+    <div className="p-5">
+      <PageIntro pageName="Financial Aids requests" />
+      <PageContainer tableHeader="Financial Aids requests">
+        <FinancialAidRequestHeader />
+        {loading ? (
+          <tr>
+            <td colSpan="10" className="text-center p-5 text-3xl">
+              Loading Financial Aids Requests......
+            </td>
+          </tr>
+        ) : error ? (
+          <div className="flex justify-center items-center h-10">
+            <p className="text-2xl font-semibold text-red-500">{error}</p>
+          </div>
+        ) : financialAidRequests.length > 0 ? (
+          financialAidRequests.map((request, index) => (
+            <FinancialAidRequestElement
+              key={request._id}
+              request={request}
+              // index={index + 1 + (currentPage - 1) * itemsPerPage}
+              token={token}
+              setIsChanged={setIsChanged}
+            />
+          ))
+        ) : (
+          <div className="flex justify-center items-center h-10">
+            <p className="text-2xl font-semibold">
+              No Financial Aid Requests were requested
+            </p>
+          </div>
+        )}
+      </PageContainer>
+      <Pagination
+        currentPage={currentPage}
+        isMorePages={isMorePages}
+        onPrevPage={() => setCurrentPage((prev) => prev - 1)}
+        onNextPage={() => setCurrentPage((prev) => prev + 1)}
+      />
+    </div>
+  );
+};
+
+export default MangeFinancialAidRequests;

src/pages/index.js

@@ -30,6 +30,7 @@ export { default as CreateInstructorAccount } from "./dashboard/CreateInstructor
 export { default as ManageInstructorsRequests } from "./dashboard/ManageInstructorsRequests";
 export { default as ManageBlogs } from "./dashboard/ManageBlogs";
 export { default as ManagePayments } from "./dashboard/ManagePayments";
+export { default as MangeFinancialAidRequests } from "./dashboard/MangeFinancialAidRequests";
 
 //userProfile
 export { default as Profile } from "./userProfile/Profile";