m

src/components/Navbar.js

@@ -7,6 +7,7 @@ const Navbar = (props) => {
         <span className="navSpan">Your Dashboard</span>
         <span className="navSpan">Edit Profile</span>
         <span className="navSpan">Edit Settings</span>
+        <span className="navSpan">Generate Reports</span>
         <span className="navSpan">Change View</span>
       </div>
     </div>

src/components/Vehicles.js

@@ -11,6 +11,7 @@ import {
 import Vehicle from "./Vehicle";
 import TextInput from "../pageElements/textInput";
 import Button from "../pageElements/button";
+import warn from "../assets/warn.png";
 
 const Vehicles = () => {
   const [savedVehicles, setSavedVehicles] = useState([]);
@@ -27,6 +28,10 @@ const Vehicles = () => {
     "Category",
     "Mileage",
     "Pre-QRV-Price",
+    "Date Received",
+    "Purchase Order No.",
+    "Purchase Order Date",
+    "Finance Company Id",
   ];
   const handleIdInput = (e) => setVehId(e.target.value);
 
@@ -53,7 +58,7 @@ const Vehicles = () => {
     const formatMiles = parseFloat(inputs.mileage.replace(/,/g, ""));
     const formatPrice = parseFloat(inputs.price.replace(/,/g, "") * 100);
     inputs.Mileage = formatMiles;
-    //inputs.price = formatPrice;
+    inputs.Price = formatPrice;
   };
 
   useEffect(() => {
@@ -65,7 +70,7 @@ const Vehicles = () => {
           const dbVehs = data.map((item, i) => {
             return Object.assign(item, { id: ids[i] });
           });
-          console.log("~~~~~~~~~~~~dbVehs", dbVehs);
+
           setSavedVehicles(dbVehs);
         } else {
           console.log("Error fetching data from database");
@@ -102,6 +107,10 @@ const Vehicles = () => {
     const cat = inputs.Category;
     const miles = inputs.Mileage;
     const price = inputs["Pre-QRV-Price"];
+    const date = inputs["Date Received"];
+    const poNo = inputs["Purchase Order No."];
+    const poDate = inputs["Purchase Order Date"];
+    const finCoId = inputs["Finance Company Id"];
 
     if (
       !make ||
@@ -111,7 +120,11 @@ const Vehicles = () => {
       !year ||
       !cat ||
       !miles ||
-      !price
+      !price ||
+      !date ||
+      !poNo ||
+      !poDate ||
+      !finCoId
     ) {
       setAlert("Please fill out all fields");
       return false;
@@ -175,7 +188,18 @@ const Vehicles = () => {
               ))}
             </div>
           </div>
-          <div>{alert ? <div className="alert">{alert}</div> : <></>}</div>
+          <div>
+            {alert ? (
+              <div className="alert-container">
+                <div className="alert-items-container">
+                  <img src={warn} className="warnImg" alt="warning image" />
+                  <p>{alert}</p>
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
+          </div>
         </div>
         <Button
           className="auxButton"

src/styles/App.css

@@ -39,7 +39,7 @@ body {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  height: 205px;
+  height: 300px;
   padding: 20px;
 }
 
@@ -64,7 +64,7 @@ body {
   border-radius: 6px;
   max-width: 535px;
   flex: 1 0 auto;
-  background-color: #f9f5ff;
+  background-color: #f8eefc;
 }
 
 .veh-text {
@@ -90,6 +90,32 @@ body {
   border-radius: 4px;
 }
 
+.alert-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 0px auto;
+  width: 420px;
+}
+
+.alert-items-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: 0px auto;
+  width: 400px;
+  font-size: 0.8rem;
+  color: red;
+}
+
+.warnImg {
+  height: 16px;
+  width: 16px;
+  margin: -3px 5px 0px 5px;
+}
+
 .alert {
   color: red;
   font-size: 0.8rem;
@@ -175,7 +201,7 @@ body {
   height: 50px;
   padding: 15px 20px 0px 20px;
   border-bottom: 2px solid #a9a9a9;
-  background-color: #fcf6ff;
+  background-color: #f8eefc;
 }
 
 .navRow {
@@ -187,7 +213,7 @@ body {
 }
 
 .navSpan {
-  margin: 10px 10px;
+  margin: 10px 16px;
 }
 
 .navSpan:hover {