Finished Add Violation, Small Fixes, Responsiveness

backend/src/middlewares/validateAuth.ts

@@ -8,7 +8,7 @@ const validateAuth = (req: Request, res: Response, next: NextFunction) => {
   };
 
   switch (req.path) {
-    case "/register":
+    case "/signup":
       {
         const { first_name, last_name, email, password, confirm_password } =
           req.body;

backend/src/routes/cars.ts

@@ -9,7 +9,7 @@ router.post("/check-license", async (req: Request, res: Response) => {
     const { license_number } = req.body;
 
     const { rows: drivers } = await pool.query(
-      `SELECT id FROM drivers WHERE license_number = $1`,
+      `SELECT * FROM drivers WHERE license_number = $1`,
       [license_number]
     );
 

frontend/src/App.tsx

@@ -3,30 +3,33 @@ import "react-activity/dist/Spinner.css";
 import "react-toastify/dist/ReactToastify.css";
 
 import LoginPage from "./pages/LoginPage.tsx";
+
 import HomePage from "./pages/HomePage.tsx";
-import SignUp from "./pages/SignUpPage.tsx";
 import AboutPage from "./pages/AboutPage.tsx";
+import SignUpPage from "./pages/SignUpPage.tsx";
+import UnauthorizedPage from "./pages/UnauthorizedPage.tsx";
+import AddViolationPage from "./pages/AddViolationPage.tsx";
 
 import AdminLandingPage from "./pages/AdminHomePage.tsx";
 import EncodePage from "./pages/EncodePage.tsx";
 import ViolatorList from "./pages/ViolatorList.tsx";
 import DriversList from "./pages/DriverList.tsx";
-import RegisterDriver from "./pages/RegisterDriver.tsx";
 import AddDriver from "./pages/AddDriver.tsx";
-import UnauthorizedPage from "./pages/UnauthorizedPage.tsx";
-import HomepageDriver from "./components/NotificationsList.tsx";
 import RegistrationList from "./pages/RegistrationList.tsx";
+import RegisterDriver from "./pages/RegisterDriver.tsx";
+import SendNotif from "./pages/SendNotif.tsx";
+
+import ViewProfile from "./pages/ViewProfile.tsx";
+import Protocols from "./components/Policies/protocols.tsx";
+import Rules from "./components/Policies/rules.tsx";
+import ChangePassword from "./pages/ChangePassword.tsx";
+
 import RequireAuth from "./components/RequireAuth.tsx";
 import PersistLogin from "./components/PersistLogin.tsx";
+
 import Loading from "./components/Loading.tsx";
 import { LoadingContextType } from "./types/loading.types.ts";
 import useLoading from "./hooks/context-hooks/useLoading.ts";
-import ViewProfile from "./pages/ViewProfile.tsx";
-import Protocols from "./components/Policies/protocols.tsx";
-import Rules from "./components/Policies/rules.tsx";
-import ChangePassword from "./pages/ChangePassword.tsx";
-import AddViolationPage from "./pages/AddViolationPage.tsx";
-import SendNotif from "./pages/SendNotif.tsx";
 
 const Main = () => {
   const { appLoading }: LoadingContextType = useLoading();
@@ -39,26 +42,63 @@ const Main = () => {
     <BrowserRouter>
       <Routes>
         {/* PUBLIC ROUTES */}
-        <Route path="/" element={<Navigate to="/login" replace />} />
-        <Route path="/login" element={<LoginPage />} />
+        <Route
+          path="/"
+          element={
+            <Navigate
+              to="/login"
+              replace
+            />
+          }
+        />
+        <Route
+          path="/login"
+          element={<LoginPage />}
+        />
 
-        <Route path="/signup" element={<SignUp />} />
+        <Route
+          path="/signup"
+          element={<SignUpPage />}
+        />
 
-        <Route path="/unauthorized" element={<UnauthorizedPage />} />
+        <Route
+          path="/unauthorized"
+          element={<UnauthorizedPage />}
+        />
 
         <Route element={<PersistLogin />}>
           {/* FOR ALL LOGGED IN */}
-          <Route path="/view-profile/:driverId" element={<ViewProfile />} />
-          <Route path="/changepassword" element={<ChangePassword />} />
+          <Route
+            path="/view-profile/:driverId"
+            element={<ViewProfile />}
+          />
+          <Route
+            path="/changepassword"
+            element={<ChangePassword />}
+          />
 
           {/* USER ROUTES */}
           <Route element={<RequireAuth forAdmin={false} />}>
-            <Route path="/homepage" element={<HomePage />} />
-            <Route path="/about" element={<AboutPage />} />
-            <Route path="/register-driver" element={<RegisterDriver />} />
-            <Route path="/homepagedriver" element={<HomepageDriver />} />
-            <Route path="/protocols" element={<Protocols />} />
-            <Route path="/rules" element={<Rules />} />
+            <Route
+              path="/homepage"
+              element={<HomePage />}
+            />
+            <Route
+              path="/about"
+              element={<AboutPage />}
+            />
+            <Route
+              path="/register-driver"
+              element={<RegisterDriver />}
+            />
+            <Route
+              path="/protocols"
+              element={<Protocols />}
+            />
+            <Route
+              path="/rules"
+              element={<Rules />}
+            />
           </Route>
 
           {/* ADMIN ROUTES */}
@@ -94,12 +134,12 @@ const Main = () => {
             <Route
               path="/send-notif/:id"
               element={<SendNotif />}
-            /> 
+            />
           </Route>
         </Route>
       </Routes>
     </BrowserRouter>
   );
 };
 
-export default Main
+export default Main;

frontend/src/components/PreviewProfile.tsx

@@ -26,45 +26,45 @@ const PreviewProfile = ({
       <form className="space-y-[2rem]">
         <div className="flex w-full">
           <div className="flex-1">
-            <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-md text-sm">
+            <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
               Last Name
             </h1>
-            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg text-md">
+            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
               {selectedEntry.last_name || ""}
             </h1>
           </div>
           <div className="flex-1">
-            <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-md text-sm">
+            <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
               First Name
             </h1>
-            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg text-md">
+            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
               {selectedEntry.first_name || ""}
             </h1>
           </div>
         </div>
 
         <div className="flex w-full">
-          <div className="flex-1">
-            <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-md text-sm">
+          <div className="flex-2 w-3/12">
+            <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
               Sex
             </h1>
-            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg text-md">
+            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
               {selectedEntry.sex || ""}
             </h1>
           </div>
-          <div className="flex-1">
-            <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-md text-sm">
+          <div className="flex-2 w-5/12">
+            <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
               Date of Birth
             </h1>
-            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg text-md">
+            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
               {selectedEntry.date_of_birth || "MM/DD/YY"}
             </h1>
           </div>
-          <div className="flex-1">
-            <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-md text-sm">
+          <div className="flex-2 w-4/12">
+            <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
               Driver Type
             </h1>
-            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg text-md">
+            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
               {selectedEntry.driver_type || ""}
             </h1>
           </div>
@@ -73,18 +73,18 @@ const PreviewProfile = ({
         <div className="w-full">
           <div className="flex">
             <div className="flex-1">
-              <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-md text-sm">
+              <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
                 License Number
               </h1>
-              <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg text-md">
+              <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
                 {selectedEntry.license_number || ""}
               </h1>
             </div>
             <div className="flex-1">
-              <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-md text-sm">
+              <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
                 License Expiration Date
               </h1>
-              <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg text-md">
+              <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
                 {selectedEntry.license_expiration_date || ""}
               </h1>
             </div>
@@ -93,12 +93,12 @@ const PreviewProfile = ({
         <div className="flex w-full flex-row-reverse ">
           <button
             onClick={handleSendNotification}
-            className="p-2 px-4 w-2/6 ml-4  bg-buttongreen active:bg-colorhover transition-colors rounded-sm text-white font-syke-bold">
-            Send Notification
+            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">
+            Notify
           </button>
           <button
             onClick={handleViewProfile}
-            className="p-2 px-4 w-2/6 bg-buttongreen active:bg-colorhover transition-colors rounded-sm text-white font-syke-bold">
+            className="p-2 px-4 w-2/6 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">
             View Profile
           </button>
         </div>

frontend/src/components/RegistrationListCard.tsx

@@ -13,7 +13,7 @@ const RegistrationListCard = ({
         <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">
-            {last_name} {first_name}
+            {first_name} {last_name} 
           </h1>
         </div>
         <div className="flex-2 text-left">

frontend/src/components/ViolatorsListCard.tsx

@@ -5,41 +5,47 @@ const ViolatorsListCard = ({
   last_name,
   driver_type,
   license_number,
-  violations ,
+  violations,
 }: Violators) => {
-
   return (
     <div
-        className="border-b-2 flex-col flex-1 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-[20%]">
-            <h1 className="text-white font-syke-light text-sm">Violations</h1>
-            <h1 className="text-textgreen font-syke-medium text-md">
+      className="border-b-2 flex-col flex-1 border-t-transparent w-full border-b-inputfield"
+      id="row">
+      <div className="flex p-2 w-full items-right overflow-y-auto">
+        <div className="flex-2 w-2/12">
+          <h1 className="text-white font-syke-light lg:text-sm md:text-2xs xs:text-xs text-xxs">
+            Violations
+          </h1>
+          <h1 className="text-textgreen font-syke-medium lg:text-sm md:text-xs xs:text-xs text-2xs">
             {violations ? violations.length : 0}
-            </h1>
-          </div>
-          <div className="flex-2 min-w-[32%]">
-            <h1 className="text-white font-syke-light text-sm">Name</h1>
-            <h1 className="text-textgreen font-syke-medium text-md">
-              {first_name} {last_name}
-            </h1>
-          </div>
-          <div className="flex-2 text-left min-w-[23%]">
-            <h1 className="text-white font-syke-light text-sm">Driver Type</h1>
-            <h1 className="text-textgreen font-syke-medium text-md">
-              {driver_type}
-            </h1>
-          </div>
-          <div className="flex-2  text-left">
-            <h1 className="text-white font-syke-light text-sm">License Number</h1>
-            <h1 className="text-textgreen font-syke-medium text-md">
-              {license_number}
-            </h1>
-          </div>
+          </h1>
+        </div>
+        <div className="flex-2 w-4/12">
+          <h1 className="text-white font-syke-light lg:text-sm md:text-2xs xs:text-xs text-xxs">
+            Name
+          </h1>
+          <h1 className="text-textgreen font-syke-medium lg:text-sm md:text-xs xs:text-xs text-2xs">
+            {first_name} {last_name}
+          </h1>
+        </div>
+        <div className="flex-2 text-left lg:w-2/12 md:3/12 w-2/12">
+          <h1 className="text-white font-syke-light lg:text-sm md:text-2xs xs:text-xs text-xxs">
+            Driver Type
+          </h1>
+          <h1 className="text-textgreen font-syke-medium lg:text-sm md:text-xs xs:text-xs text-2xs">
+            {driver_type}
+          </h1>
+        </div>
+        <div className="flex-2 text-left lg:w-4/12 md:w-3/12 w-4/12">
+          <h1 className="text-white font-syke-light lg:text-sm md:text-2xs xs:text-xs text-xxs">
+            License Number
+          </h1>
+          <h1 className="text-textgreen font-syke-medium lg:text-sm md:text-xs xs:text-xs text-2xs">
+            {license_number}
+          </h1>
         </div>
       </div>
+    </div>
   );
 };
 

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

@@ -1,20 +1,21 @@
-import { useState } from "react";
 import { toast } from "react-toastify";
 import { fetchWithAuth } from "../../utils/fetch"; // Custom fetch utility
 import useFetchWithAuthExports from "../context-hooks/useFetchWithAuthExports";
+import { LoadingContextType } from "../../types/loading.types";
+import useLoading from "../context-hooks/useLoading";
 
 export const useApproveRegistration = () => {
-  const [processLoading, setProcessLoading] = useState<boolean>(false);
   const { auth, refresh, navigate } = useFetchWithAuthExports();
+  const { setAppLoading }: LoadingContextType = useLoading();
+
+  const approveRegistration = async (licenseNumber: string) => {
+    setAppLoading!(true);
 
-  const approveRegistration = async (licenseNumber: string): Promise<void> => {
     if (!licenseNumber) {
       toast.error("License number is required.");
       return;
     }
 
-    setProcessLoading(true);
-
     try {
       const response = await fetchWithAuth(
         navigate,
@@ -28,7 +29,7 @@ export const useApproveRegistration = () => {
       if (!response.ok) {
         const errorData = await response.json();
         toast.error(errorData.message || "Failed to approve registration.");
-        return;
+        return false;
       }
 
       const data = await response.json();
@@ -39,9 +40,9 @@ export const useApproveRegistration = () => {
         "Network error occurred. Could not connect to the server. Please try again."
       );
     } finally {
-      setProcessLoading(false);
+      setAppLoading!(false);
     }
   };
 
-  return { approveRegistration, processLoading };
-};
+  return { approveRegistration };
+};