Add Violation Button Component Added and Small Fixes

backend/src/routes/cars.ts

@@ -26,10 +26,7 @@ router.post("/check-license", async (req: Request, res: Response) => {
       return;
     }
 
-    res.status(200).json({
-      title: "License Number Found",
-      message: "Driver with this license number exists.",
-    });
+    res.status(200).json(driverFound);
   } catch (error) {
     console.log(error);
     res.sendStatus(500);

frontend/src/components/AddCar.tsx

@@ -0,0 +1,189 @@
+import React, { useState } from "react";
+import { Car } from "../types/datatypes";
+import useAddCar from "../hooks/car-hooks/useAddCar";
+
+const AddCar = ({
+  driverId,
+  licenseNumber,
+  setVehicleModalActive,
+}: {
+  driverId: string;
+  licenseNumber: string;
+  setVehicleModalActive: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const { postCar } = useAddCar();
+
+  const [formData, setFormData] = useState<Car>({
+    driver_id: driverId,
+    brand: "",
+    car_model: "",
+    color: "",
+    license_number: licenseNumber,
+  });
+
+  const [currentStep, setCurrentStep] = useState(1);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async () => {
+    await postCar(formData);
+    setVehicleModalActive(false);
+  };
+
+  const handleCancelButton = () => {
+    setVehicleModalActive(false);
+  };
+
+  const handleNextClick = async () => {
+    setCurrentStep(currentStep + 1);
+  };
+
+  const handleBackClick = () => {
+    setCurrentStep(currentStep - 1);
+  };
+
+  return (
+    <div className="absolute flex flex-col m-auto w-1/2 left-0 right-0 top-0 bottom-0 items-center justify-center h-1/2 px-6 py-5 bg-gray-600 rounded-md bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-10">
+      <h1 className="text-4xl font-syke-bold text-textgreen">Adding a Car</h1>
+      {currentStep === 1 && (
+        <>
+          <p className="text-textgreen">Enter car details.</p>
+          <div className="flex flex-col space-y-3 p-3">
+            <div className="flex space-x-3">
+              <div className="flex flex-col w-full">
+                <h1 className="text-white font-syke-light text-xl">
+                  License Plate
+                </h1>
+                <input
+                  type="text"
+                  className="bg-secondgrey font-syke-regular text-md w-full px-4 py-2 borderborder-none focus:outline-none focus:shadow-inner focus:ring-1 focus:ring-textgreen text-white placeholder-white placeholder-opacity-25 rounded-sm"
+                  name="license_plate"
+                  placeholder="Enter License Plate"
+                  value={formData.license_plate}
+                  onChange={handleChange}
+                />
+              </div>
+            </div>
+
+            <div className="flex space-x-3">
+              <div className="flex flex-col w-1/3">
+                <h1 className="text-white font-syke-light text-xl">Brand</h1>
+                <input
+                  type="text"
+                  className="bg-secondgrey font-syke-regular text-md w-full px-4 py-2 borderborder-none focus:outline-none focus:shadow-inner focus:ring-1 focus:ring-textgreen text-white placeholder-white placeholder-opacity-25 rounded-sm"
+                  name="brand"
+                  placeholder="Enter Brand"
+                  value={formData.brand}
+                  onChange={handleChange}
+                />
+              </div>
+              <div className="flex flex-col w-1/3">
+                <h1 className="text-white font-syke-light text-xl">Model</h1>
+                <input
+                  type="text"
+                  className="bg-secondgrey font-syke-regular text-md w-full px-4 py-2 borderborder-none focus:outline-none focus:shadow-inner focus:ring-1 focus:ring-textgreen text-white placeholder-white placeholder-opacity-25 rounded-sm"
+                  name="car_model"
+                  placeholder="Enter Car Model"
+                  value={formData.car_model}
+                  onChange={handleChange}
+                />
+              </div>
+              <div className="flex flex-col w-1/3">
+                <h1 className="text-white font-syke-light text-xl">Color</h1>
+                <input
+                  type="text"
+                  className="bg-secondgrey font-syke-regular text-md w-full px-4 py-2 borderborder-none focus:outline-none focus:shadow-inner focus:ring-1 focus:ring-textgreen text-white placeholder-white placeholder-opacity-25 rounded-sm"
+                  name="color"
+                  placeholder="Enter Color"
+                  value={formData.color}
+                  onChange={handleChange}
+                />
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      {currentStep === 2 && (
+        <>
+          <p className="text-textgreen">Confirm car details.</p>
+          <div className="flex flex-col space-y-8 p-3 w-full">
+            <div className="flex space-x-3 w-full">
+              <div className="flex flex-col w-full">
+                <h1 className="text-white font-syke-light text-xl">
+                  License Plate
+                </h1>
+                <h1 className="text-textgreen font-syke-medium text-3xl">
+                  {formData.license_plate}
+                </h1>
+              </div>
+            </div>
+
+            <div className="flex space-x-3">
+              <div className="flex flex-col w-1/3">
+                <h1 className="text-white font-syke-light text-xl">Brand</h1>
+                <h1 className="text-textgreen font-syke-medium text-3xl">
+                  {formData.brand}
+                </h1>
+              </div>
+              <div className="flex flex-col w-1/3">
+                <h1 className="text-white font-syke-light text-xl">Model</h1>
+                <h1 className="text-textgreen font-syke-medium text-3xl">
+                  {formData.car_model}
+                </h1>
+              </div>
+              <div className="flex flex-col w-1/3">
+                <h1 className="text-white font-syke-light text-xl">Color</h1>
+                <h1 className="text-textgreen font-syke-medium text-3xl">
+                  {formData.color}
+                </h1>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      <div className="flex justify-center items-center gap-5 p-5">
+        {currentStep === 1 && (
+          <>
+            <button
+              type="button"
+              className="w-32 bg-buttongreen font-syke-medium text-white py-2 hover:bg-[#33471a] font-syke-regular transition-colors rounded-sm"
+              onClick={handleCancelButton}>
+              Cancel
+            </button>
+
+            <button
+              type="button"
+              className="w-32 bg-buttongreen font-syke-medium text-white py-2 hover:bg-[#33471a] font-syke-regular transition-colors rounded-sm"
+              onClick={handleNextClick}>
+              Next
+            </button>
+          </>
+        )}
+        {currentStep === 2 && (
+          <>
+            <button
+              type="button"
+              className="w-32 bg-buttongreen font-syke-medium text-white py-2 hover:bg-[#33471a] font-syke-regular transition-colors rounded-sm"
+              onClick={handleBackClick}>
+              Back
+            </button>
+
+            <button
+              type="button"
+              className="w-32 bg-buttongreen font-syke-medium text-white py-2 hover:bg-[#33471a] font-syke-regular transition-colors rounded-sm"
+              onClick={handleSubmit}>
+              Add Car
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AddCar;

frontend/src/components/AddCarButton.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import AddCar from "../pages/AddCar";
+import AddCar from "./AddCar";
 import { DriverWithVandC } from "../types/datatypes";
 
 const AddCarButton = ({
@@ -13,22 +13,22 @@ const AddCarButton = ({
   vehicleModalActive: boolean;
   setVehicleModalActive: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const handleAddVehicle = () => {
+  const handleAddVehiclePressed = () => {
     setVehicleModalActive(true);
   };
   return (
     <>
       {activeSection === "vehicle" && (
         <button
-          onClick={handleAddVehicle}
+          onClick={handleAddVehiclePressed}
           className="flex bg-buttongreen text-white py-3 px-5 hover:bg-[#33471a] font-syke-regular transition-colors rounded-md justify-center items-center font-bold text-md mt-3 w-auto self-end">
           Add Vehicle
         </button>
       )}
       {vehicleModalActive && (
         <AddCar
-          driver_id={driver.id!}
-          license_number={driver.license_number!}
+          driverId={driver.id!}
+          licenseNumber={driver.license_number!}
           setVehicleModalActive={setVehicleModalActive}
         />
       )}

frontend/src/components/AddViolationButton.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { DriverWithVandC } from "../types/datatypes";
+import AddViolation from "./AddViolationComponent";
+
+const AddViolationButton = ({
+  activeSection,
+  driver,
+  violationModalActive,
+  setViolationModalActive,
+}: {
+  activeSection: string;
+  driver: DriverWithVandC;
+  violationModalActive: boolean;
+  setViolationModalActive: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const handleAddViolationPressed = () => {
+    setViolationModalActive(true);
+  };
+
+  return (
+    <>
+      {activeSection === "violation" && (
+        <button
+          onClick={handleAddViolationPressed}
+          className="flex bg-buttongreen text-white py-3 px-5 hover:bg-[#33471a] font-syke-regular transition-colors rounded-md justify-center items-center font-bold text-md mt-3 w-auto self-end">
+          Add Violation
+        </button>
+      )}
+      {violationModalActive && (
+        <AddViolation
+          driverId={driver.id!}
+          setViolationModalActive={setViolationModalActive}
+        />
+      )}
+    </>
+  );
+};
+
+export default AddViolationButton;