Merge pull request #133 from eduversa/ankur

Ankur

components/AlertModal.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { useAlert } from "../contexts/AlertContext";
+
+const AlertModal = () => {
+  const { alert, closeAlert } = useAlert();
+
+  if (!alert.isOpen) return null;
+
+  return (
+    <div className="modal-overlay" onClick={closeAlert}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <p>{alert.message}</p>
+        <button onClick={closeAlert} className="close-button">
+          Close
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default AlertModal;

components/FacultyIdCard.jsx

@@ -0,0 +1,99 @@
+import PropTypes from "prop-types";
+import Image from "next/image";
+
+const FacultyIdCard = ({
+  faculty,
+  placeholderImage,
+  isFavorite,
+  toggleFavorite,
+}) => {
+  const facultyId = faculty.user_id;
+
+  const handleViewProfile = () => {
+    localStorage.setItem("selectedFacultyId", facultyId);
+    console.log(localStorage.getItem("selectedFacultyId"));
+  };
+
+  return (
+    <div className="faculty-card">
+      <Image
+        src={faculty.image || placeholderImage}
+        alt={`${faculty.personal_info.first_name || "No Name"}'s Image`}
+        className="faculty-image"
+        width={100}
+        height={100}
+        objectFit="cover"
+      />
+      <h2>
+        {faculty.personal_info.first_name || "No Name"}{" "}
+        {faculty.personal_info.last_name || ""}
+      </h2>
+      <p>Email: {faculty.personal_info?.email || "N/A"}</p>
+      <p>User ID: {faculty.user_id}</p>
+      <p>
+        Address: {faculty.personal_info.present_address?.street || "N/A"},{" "}
+        {faculty.personal_info.present_address?.city || "N/A"},{" "}
+        {faculty.personal_info.present_address?.district || "N/A"},{" "}
+        {faculty.personal_info.present_address?.state || "N/A"}
+      </p>
+      <p>Gender: {faculty.personal_info.gender || "N/A"}</p>
+      <p>
+        DOB:{" "}
+        {faculty.personal_info.dob
+          ? new Date(faculty.personal_info.dob).toLocaleDateString()
+          : "N/A"}
+      </p>
+      <p>Contact: {faculty.personal_info.contact || "N/A"}</p>
+      <p>Faculty ID: {faculty.job_info.faculty_id}</p>
+      <p>Room: {faculty.job_info.room || "N/A"}</p>
+      <p>Department: {faculty.job_info.department || "Not Assigned"}</p>
+
+      <button
+        onClick={toggleFavorite}
+        className={`favorite-button ${isFavorite ? "favorited" : ""}`}
+        aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
+      >
+        {isFavorite ? "Unfavorite" : "Favorite"}
+      </button>
+
+      <button
+        onClick={handleViewProfile}
+        className="view-profile-button"
+        aria-label="View Profile"
+      >
+        View Profile
+      </button>
+    </div>
+  );
+};
+
+FacultyIdCard.propTypes = {
+  faculty: PropTypes.shape({
+    user_id: PropTypes.string.isRequired,
+    image: PropTypes.string,
+    personal_info: PropTypes.shape({
+      first_name: PropTypes.string,
+      last_name: PropTypes.string,
+      email: PropTypes.string,
+      present_address: PropTypes.shape({
+        street: PropTypes.string,
+        city: PropTypes.string,
+        district: PropTypes.string,
+        state: PropTypes.string,
+      }),
+      gender: PropTypes.string,
+      dob: PropTypes.string,
+      contact: PropTypes.string,
+    }),
+    job_info: PropTypes.shape({
+      faculty_id: PropTypes.string,
+      room: PropTypes.string,
+      department: PropTypes.string,
+    }),
+  }).isRequired,
+  placeholderImage: PropTypes.string.isRequired,
+  isFavorite: PropTypes.bool.isRequired,
+  toggleFavorite: PropTypes.func.isRequired,
+};
+
+export default FacultyIdCard;

components/Routine.jsx

@@ -0,0 +1,128 @@
+import React from "react";
+
+
+const routineData = [
+  {
+    period: 1,
+    subjects: ["Mathematics", "English", "History", "Science", "Art"],
+    teachers: [
+      "Mrs. Jane Doe",
+      "Mr. John Smith",
+      "Ms. Sarah Lee",
+      "Dr. Michael Johnson",
+      "Ms. Emily Davis",
+    ],
+  },
+  {
+    period: 2,
+    subjects: ["English", "Mathematics", "Art", "History", "Science"],
+    teachers: [
+      "Mr. John Smith",
+      "Mrs. Jane Doe",
+      "Ms. Emily Davis",
+      "Ms. Sarah Lee",
+      "Dr. Michael Johnson",
+    ],
+  },
+  {
+    period: 3,
+    subjects: ["History", "Science", "Mathematics", "Art", "English"],
+    teachers: [
+      "Ms. Sarah Lee",
+      "Dr. Michael Johnson",
+      "Mrs. Jane Doe",
+      "Ms. Emily Davis",
+      "Mr. John Smith",
+    ],
+  },
+  {
+    period: 4,
+    subjects: ["Science", "Art", "English", "Mathematics", "History"],
+    teachers: [
+      "Dr. Michael Johnson",
+      "Ms. Emily Davis",
+      "Mr. John Smith",
+      "Mrs. Jane Doe",
+      "Ms. Sarah Lee",
+    ],
+  },
+  {
+    period: 5,
+    subjects: ["Art", "History", "Science", "English", "Mathematics"],
+    teachers: [
+      "Ms. Emily Davis",
+      "Ms. Sarah Lee",
+      "Dr. Michael Johnson",
+      "Mr. John Smith",
+      "Mrs. Jane Doe",
+    ],
+  },
+  {
+    period: 6,
+    subjects: ["Mathematics", "Science", "English", "Art", "History"],
+    teachers: [
+      "Mrs. Jane Doe",
+      "Dr. Michael Johnson",
+      "Mr. John Smith",
+      "Ms. Emily Davis",
+      "Ms. Sarah Lee",
+    ],
+  },
+  {
+    period: 7,
+    subjects: ["English", "Art", "History", "Science", "Mathematics"],
+    teachers: [
+      "Mr. John Smith",
+      "Ms. Emily Davis",
+      "Ms. Sarah Lee",
+      "Dr. Michael Johnson",
+      "Mrs. Jane Doe",
+    ],
+  },
+];
+
+const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
+
+const colors = ["blue", "green", "yellow", "red", "purple"];
+
+export default function Routine() {
+  return (
+    <div className="routine-container">
+      <div className="routine-card">
+        <div className="routine-header">
+          <h2>Class Routine Schedule</h2>
+          <div className="date-range">Monday - Friday</div>
+        </div>
+
+        <div className="routine-grid-wrapper">
+          <div className="routine-grid">
+            <div className="grid-header">Period</div>
+            {days.map((day, index) => (
+              <div
+                key={day}
+                className={`grid-header day ${colors[index % colors.length]}`}
+              >
+                {day}
+              </div>
+            ))}
+
+            {routineData.map(({ period, subjects, teachers }) => (
+              <React.Fragment key={period}>
+                <div className="period-number">{period}</div>
+                {subjects.map((subject, index) => (
+                  <div
+                    key={`${period}-${days[index]}`}
+                    className={`subject-cell ${colors[index % colors.length]}`}
+                  >
+                    <h3>{subject}</h3>
+                    <p>{teachers[index]}</p>
+                  </div>
+                ))}
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/index.jsx

@@ -1,5 +1,7 @@
 export { default as TypingText } from "./TypingText";
 export { default as ApplicantForm } from "./ApplicantForm/ApplicantForm";
+export { default as AlertModal } from "./AlertModal";
+
 // Loading Components
 export { default as Circle } from "./Loading/Circle";
 export { default as Default } from "./Loading/Default";
@@ -28,3 +30,4 @@ export { default as ManageApp } from "./ManageApp";
 export { default as CommonMeta } from "./CommonMeta";
 
 export { default as IdCard } from "./IdCard";
+export { default as FacultyIdCard } from "./FacultyIdCard";

containers/Header/ApplicantNavbar.jsx

@@ -1,45 +1,56 @@
 import React, { Fragment, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { logoutApi } from "@/functions";
 import { AllLoader } from "@/components";
+import { withLoading, devLog, apiRequest } from "@/utils/apiUtils";
+import { useAlert } from "@/contexts/AlertContext";
 
 function ApplicantNavbar() {
   const router = useRouter();
   const logoText = "eduversa";
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const { showAlert } = useAlert();
 
   const handleLogout = async () => {
     const userId = localStorage.getItem("userid");
     const authToken = localStorage.getItem("authToken");
 
     try {
-      setIsLoading(true);
-      const apiResponse = await logoutApi(userId, authToken);
-      if (apiResponse.status === false) {
-        alert(apiResponse.message);
-        setIsLoading(false);
+      const wrappedApiRequest = withLoading(
+        apiRequest,
+        setIsLoading,
+        showAlert,
+        "Logout"
+      );
+
+      const response = await wrappedApiRequest(
+        `/account/auth?user_id=${userId}`,
+        "PATCH",
+        null,
+        authToken,
+        "logout"
+      );
+
+      if (!response.success || response.status === false) {
+        devLog("Logout error:", response);
+        showAlert(response.message);
         return;
       }
-      if (process.env.NODE_ENV === "development") {
-        console.log("Logout data:", apiResponse);
-      }
-      localStorage.removeItem("authToken");
-      localStorage.removeItem("email");
-      localStorage.removeItem("userType");
-      localStorage.removeItem("userid");
-      localStorage.removeItem("applicant_profile");
+
+      // devLog("Logout response:", response);
+      showAlert(response.message);
+
       localStorage.clear();
-      alert(apiResponse.message);
-      setIsLoading(false);
       router.push("/");
     } catch (error) {
-      if (process.env.NODE_ENV === "development") {
-        console.error("Logout error:", error.message);
-      }
+      devLog("Global error:", error);
+      showAlert(
+        error.message || "An unexpected error occurred. Please try again."
+      );
     }
   };
+
   const menuItems = [
     { label: "Dashboard", className: "nav-item", src: "/applicant" },
     {
@@ -78,7 +89,7 @@ function ApplicantNavbar() {
             </button>
           </div>
           <div
-            className={`menu ${isMenuOpen && "open"}`}
+            className={`menu ${isMenuOpen ? "open" : ""}`}
             onClick={() => setIsMenuOpen(!isMenuOpen)}
           >
             <div className="menu-line"></div>

containers/Header/Navbar.jsx

@@ -96,6 +96,11 @@ function Navbar() {
         className: "nav-item",
         src: "/admin/manage/students",
       },
+      {
+        label: "Manage Faculties",
+        className: "nav-item",
+        src: "/admin/manage/faculties",
+      },
       {
         label: "Contact Us",
         className: "nav-item",
@@ -112,9 +117,7 @@ function Navbar() {
         src: "/admin/scanner",
       },
     ],
-    faculty: [
-      { label: "Dashboard", className: "nav-item", src: "/faculty/dashboard" },
-    ],
+    faculty: [{ label: "Dashboard", className: "nav-item", src: "/faculty" }],
     student: [
       { label: "Dashboard", className: "nav-item", src: "/student" },
       {

contexts/AlertContext.js

@@ -0,0 +1,18 @@
+import React, { createContext, useState, useContext } from "react";
+
+const AlertContext = createContext();
+
+export const AlertProvider = ({ children }) => {
+  const [alert, setAlert] = useState({ isOpen: false, message: "" });
+
+  const showAlert = (message) => setAlert({ isOpen: true, message });
+  const closeAlert = () => setAlert({ isOpen: false, message: "" });
+
+  return (
+    <AlertContext.Provider value={{ alert, showAlert, closeAlert }}>
+      {children}
+    </AlertContext.Provider>
+  );
+};
+
+export const useAlert = () => useContext(AlertContext);

functions/generateOtp.js

@@ -37,3 +37,5 @@ const generateOtpApi = async (userIdOrEmail) => {
 };
 
 export default generateOtpApi;
+
+