add on campus offers tab (#376) (#377)

Author: mittal-ishaan

src/app/(routes)/admin/oncampus-offers/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+import { fetchAllSeasons, fetchOnCampusOffers } from "@/helpers/api";
+import generateColumns from "@/components/NewTableComponent/ColumnMapping";
+import { onCampusOfferDTO } from "@/dto/onCampusOfferDTO";
+import Table from "@/components/NewTableComponent/Table";
+import { useEffect, useState } from "react";
+import Loader from "@/components/Loader/loader";
+import toast from "react-hot-toast";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+const internHiddenColumns = ["salary.firstYearCTC", "salary.totalCTC", "salary.salaryPeriod"];
+const placementHiddenColumns = ["salary.stipend", "salary.otherCompensations", "salary.salaryPeriod"];
+
+const OnCampusOffersPage = () => {
+  const columns = generateColumns(onCampusOfferDTO);
+  const [seasons, setSeasons] = useState<{ id: string; name: string, type: string }[]>([]);
+  const [selectedSeason, setSelectedSeason] = useState<string>("");
+  const [loading, setLoading] = useState(true);
+  const [allOffers, setAllOffers] = useState();
+  const [visibleColumns, setVisibleColumns] = useState<any[]>([]);
+
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        const data = await fetchAllSeasons();
+        if (Array.isArray(data)) {
+          setSeasons(
+            data.map((s: any) => ({
+              id: s.id,
+              name: `${s.type} - ${s.year}`,
+              type: s.type,
+            })),
+          );
+        }
+        setSelectedSeason(data[0]?.id);
+      } catch (error) {
+        console.log(error);
+        toast.error("Failed to select a season");
+      }
+    };
+    getData();
+  }, []);
+
+  useEffect(() => {
+    if (selectedSeason) {
+      try {
+      setLoading(true);
+      fetchOnCampusOffers(selectedSeason).then((data) => {
+        setAllOffers(data);
+      });
+      if (seasons.find(season => season.id === selectedSeason)?.type === "INTERN") {
+        setVisibleColumns(columns.filter((column: any) => !internHiddenColumns.includes(column?.accessorKey)));
+      } else {
+          setVisibleColumns(columns.filter((column: any) => !placementHiddenColumns.includes(column?.accessorKey)));
+        }
+      } catch (error) {
+        toast.error("Failed to fetch on campus offers");
+      } finally {
+        setLoading(false);
+      }
+    }
+  }, [selectedSeason]);
+
+  return (
+    <div className="container mx-auto my-4 md:my-8 px-2 md:px-4">
+      <h1 className="text-2xl md:text-3xl mb-4 md:mb-8 font-bold mx-auto text-center">
+        On Campus Offers
+      </h1>
+      <div className="flex justify-center">
+          <Select onValueChange={(value) => setSelectedSeason(value)} value={selectedSeason}>
+            <SelectTrigger>
+              <SelectValue>
+                {seasons.find(season => season.id === selectedSeason)?.name || "Select a season"}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {seasons.map((season) => (
+                <SelectItem key={season.id} value={season.id}>
+                  {season.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+      </div>
+      {loading && (
+        <div className="w-full flex justify-center">
+          <Loader />
+        </div>
+      )}
+      {allOffers && (
+        <div>
+          <Table
+            data={allOffers}
+            columns={visibleColumns}
+            type={"on-campus-offers"}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OnCampusOffersPage;

src/components/SideBar/Roles/admin.tsx

@@ -404,6 +404,47 @@ const AdminDashboard = () => {
             {/* <SessionDropDown AllSeasons={AllSeasons} /> */}
           </div>
         </Link>
+        <Link href={"/admin/oncampus-offers"}>
+          <div className="hover:bg-slate-600/50 rounded-md my-2 py-2 px-4 text-white">
+            <div className="flex justify-start gap-3">
+              <div className="w-5 flex-shrink-0 text-white">
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="text-white"
+                >
+                  <path
+                    d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M19 15L18.09 19.26L12 20L18.09 20.74L19 25L19.91 20.74L26 20L19.91 19.26L19 15Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M5 15L4.09 19.26L-2 20L4.09 20.74L5 25L5.91 20.74L12 20L5.91 19.26L5 15Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <motion.div
+                initial={{ opacity: 1 }}
+                animate={context.isOpen ? "open" : "closed"}
+                transition={{ duration: 0.1 }}
+                variants={{
+                  closed: { opacity: 0 },
+                  open: { opacity: 1 },
+                }}
+                className={`${context.isOpen ? "visible" : "hidden"} flex-1 text-white`}
+              >
+                On Campus Offers
+              </motion.div>
+            </div>
+          </div>
+        </Link>
         <Link href={"/admin/dashboard"}>
           <div className="hover:bg-slate-600/50 rounded-md my-2 py-2 px-4 cursor-pointer text-white">
             <div className="flex justify-start gap-3">

src/dto/onCampusOfferDTO.ts

@@ -0,0 +1,38 @@
+const onCampusOfferDTO = [
+  {
+    status: "string",
+    student: {
+        rollNo: "string",
+        user: {
+          name: "string",
+          email: "string",
+          contact: "string",
+        },
+        program: {
+          course: "string",
+          branch: "string",
+          department: "string",
+          year: "string",
+        },
+    },
+    salary: {
+        job: {
+            role: "string",
+            season: {
+                year: "string",
+                type: "string",
+            },
+            company: {
+                name: "string",
+            },
+        },
+      totalCTC: "number",
+      firstYearCTC: "number",
+      stipend: "number",
+      otherCompensations: "number",
+      salaryPeriod: "string",
+    },
+  },
+];
+
+export { onCampusOfferDTO };

src/helpers/api.ts

@@ -508,6 +508,14 @@ export const getStudentSalaryOffers = async (
   return apiCall(`/on-campus-offers/salaries/${jobId}/student/${studentId}`);
 };
 
+export const fetchOnCampusOffers = async (seasonId: string) => {
+  return apiCall(`/on-campus-offers`, {
+    queryParam: {
+      "q[filterBy][salary][job][season][id][eq][]": seasonId,
+    },
+  });
+};
+
 export const fetchStudentOffers = async (studentId: string) => {
   return apiCall(`/on-campus-offers`, {
     queryParam: {