Registration List Responsiveness

backend/src/routes/auth.ts

@@ -63,7 +63,7 @@ router.post("/login", validateAuth, async (req: Request, res: Response) => {
     if (!user) {
       res.status(401).json({
         title: "Wrong Email or Password",
-        message: "The credentials entered are invalid.........",
+        message: "The credentials entered are invalid.",
       });
       return;
     }

frontend/src/components/PreviewProfile.tsx

@@ -90,7 +90,7 @@ const PreviewProfile = ({
             </div>
           </div>
         </div>
-        <div className="flex w-full flex-row-reverse ">
+        <div className="flex w-full flex-row-reverse">
           <button
             onClick={handleSendNotification}
             className="p-2 px-4 w-2/6 ml-4 lg:text-md md:text-xs sm:text-sm xs:text-xs text-2xs bg-buttongreen active:bg-colorhover transition-colors rounded-sm text-white font-syke-bold">

frontend/src/components/RegistrationListCard.tsx

@@ -7,18 +7,23 @@ const RegistrationListCard = ({
 }: Registration) => {
   return (
     <div
-      className="border-b-2 flex-col flex-2 border-t-transparent w-full border-b-inputfield space-y-[20px]"
-      id="row">
-      <div className="flex p-2 items-right overflow-y-auto">
-        <div className="flex-2 min-w-[70%]">
-          <h1 className="text-white font-syke-light text-md">Name</h1>
-          <h1 className="text-textgreen font-syke-medium text-xl">
-            {first_name} {last_name} 
+      className="border-b-2 flex-col flex border-t-transparent w-full border-b-inputfield"
+      id="row"
+    >
+      <div className="flex p-2 items-right w-full space-x-5 overflow-y-auto">
+        <div className="flex-2 w-1/2">
+          <h1 className="text-white font-syke-light md:text-md xs:text-sm text-xs">
+            Name
+          </h1>
+          <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-lg xs:text-lg text-md">
+            {first_name} {last_name}
           </h1>
         </div>
-        <div className="flex-2 text-left">
-          <h1 className="text-white font-syke-light text-md">Driver Type</h1>
-          <h1 className="text-textgreen font-syke-medium text-xl">
+        <div className="flex-2 text-left w-1/2">
+          <h1 className="text-white font-syke-light md:text-md xs:text-sm text-xs">
+            Driver Type
+          </h1>
+          <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-lg xs:text-lg text-md">
             {driver_type}
           </h1>
         </div>

frontend/src/components/SearchAndSort.tsx

@@ -1,16 +1,20 @@
 import React, { SetStateAction, useState } from "react";
-import { DriverWithVandC } from "../types/datatypes";
+import { DriverWithVandC, Registration } from "../types/datatypes";
 
 interface SearchAndSortProps {
-  entries: DriverWithVandC[];
-  setFilteredEntries: React.Dispatch<SetStateAction<DriverWithVandC[]>>;
+  entries?: DriverWithVandC[];
+  registrations?: Registration[];
+  setFilteredEntries?: React.Dispatch<SetStateAction<DriverWithVandC[]>>;
+  setFilteredRegisters?: React.Dispatch<SetStateAction<Registration[]>>;
   handleSortToggle: () => void;
   isSorted: boolean;
 }
 
 const SearchAndSort = ({
   entries,
   setFilteredEntries,
+  setFilteredRegisters,
+  registrations,
   handleSortToggle,
   isSorted,
 }: SearchAndSortProps) => {
@@ -19,14 +23,28 @@ const SearchAndSort = ({
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const searchTerm = e.target.value;
     setSearchQuery(searchTerm);
+    if (location.pathname === "/registration-list") {
+      const filteredItems = registrations!.filter(
+        (register) =>
+          register!
+            .first_name!.toLowerCase()
+            .includes(searchTerm.toLowerCase()) ||
+          register!.last_name!.toLowerCase().includes(searchTerm.toLowerCase()),
+      );
 
-    const filteredItems = entries!.filter(
-      (entry) =>
-        entry!.first_name!.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        entry!.last_name!.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        entry!.license_number!.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-    if (searchQuery != null || "") setFilteredEntries(filteredItems);
+      if (searchQuery !== null || "") setFilteredRegisters!(filteredItems);
+    } else {
+      const filteredItems = entries!.filter(
+        (entry) =>
+          entry!.first_name!.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          entry!.last_name!.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          entry!
+            .license_number!.toLowerCase()
+            .includes(searchTerm.toLowerCase()),
+      );
+
+      if (searchQuery !== null || "") setFilteredEntries!(filteredItems);
+    }
   };
 
   return (

frontend/src/hooks/registration-hooks/useDeleteRegistration.ts

@@ -2,14 +2,15 @@ import { BackendMessage } from "../../types/response.types";
 import { fetchWithAuth } from "../../utils/fetch";
 import useFetchWithAuthExports from "../context-hooks/useFetchWithAuthExports";
 import { toast } from "react-toastify";
-import { useState } from "react";
+import { LoadingContextType } from "../../types/loading.types";
+import useLoading from "../context-hooks/useLoading";
 
 export const useDeleteRegistration = () => {
   const { auth, refresh, navigate } = useFetchWithAuthExports();
-  const [deleteloading, setdeleteLoading] = useState<boolean>(false);
+  const { setAppLoading }: LoadingContextType = useLoading();
 
   const deleteRegistration = async (licenseNumber: string) => {
-    setdeleteLoading(true);
+    setAppLoading!(true);
 
     try {
       // Send license_number in the request body as JSON
@@ -50,11 +51,11 @@ export const useDeleteRegistration = () => {
       console.error("Error during deletion:", error);
       toast.error("Unexpected error occurred.");
     } finally {
-      setdeleteLoading(false);
+      setAppLoading!(false);
     }
   };
 
-  return { deleteRegistration, deleteloading };
+  return { deleteRegistration };
 };
 
 export default useDeleteRegistration;

frontend/src/pages/DriverList.tsx

@@ -71,7 +71,7 @@ const DriversList = () => {
                 <div className="flex lg:flex-row flex-col text-textgreen pb-3">
                   <div>
                     <h1 className="lg:text-4xl text-3xl font-syke-bold">
-                      Drivers' List
+                      Drivers List
                     </h1>
                     <p className="lg:text-xl md:text-lg text-md font-syke-bold">
                       List of Drivers within the university.