From 45cdc9ed867c8510c5dee06a764409875e304f13 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 9 Mar 2025 11:15:04 -0400
Subject: [PATCH] m

---
 src/assets/warn.png        | Bin 0 -> 4554 bytes
 src/components/Navbar.js   |   1 +
 src/components/Vehicles.js |  32 ++++++++++++++++++++++++++++----
 src/styles/App.css         |  34 ++++++++++++++++++++++++++++++----
 4 files changed, 59 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/warn.png

diff --git a/src/assets/warn.png b/src/assets/warn.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ea59973a5d0190b31fe6d07eced96ded4fa30b4
GIT binary patch
literal 4554
zcmai2i91y97k_6OW0!s38p@I_OC_Qh*)n8{tYJhXEtV`}M7EShLJ5^ETOnl`%M3|V
zc41P}42onMU$Twmcl!%|_j&Gf?(^KwJ=^EpbKdt&wZoY6a!GOl0C+7e(Dnepphp<s
zKtjU(`b&REaE4mA-T;8_{l6Rb=rErY00J?V=+lmoPZwyhFSFNUyO-BvkEeW`kY^X*
zM6na(HAHew%sq7p%C9}ptH_N(qu*l>m524E9+xW4k`D=vtIFD`P1gR;{MaYu$~n{Q
zuWG9Y7Me9|9v*VdJ35#7&NXkm*s|Burj0elB2MW?$u1_(HRJY=&9E6OTSn2_Sw`!B
zTXADc6D&4?|9e>`kSnOM`~(i3a0x?SEm5K-YDhl8Y+~|QLbUI?Ia<;$RKtDSpJ|=&
zsFtOO;?;8TW&X(m-pIl<nx;S?p1gD31A1Lben*WJB1lTi^NF!WU?d*dBjWdH<^tvM
z<XrN8|E3LM5q|&s#j=zyB*qVYjolDdIeCa0D?;FsaKFmDz90I+NR-%)vKL4YNQhfp
zo@}TwsnG~;H!FrC8+wi`A9Ewpy%odhW_}zOyXg;OJ-2C`WRF^wCdyQ6V*o_#g|M#X
z3-MF3$W{qC$d-TRj8k{?(Z#kGCzpgw-M49LItdhNp*ecXyN1R%FM<F%jkZF!QIEA;
zyqWjXG;lhRG;izq{)4EKT8%*|sqJ6KJ4<iCQGq%x{><PmvGzONsR^~lg(*E`hOgfD
z9pZvSLMpZJ9NOQz=7%BCRt7?lt{+{S5hhfMr%M{TOm)$(Xi8M2?%Xo-<4TBirq$77
z792{krwO{^XT@V)Kfg=w$zi*iy3=Ha&^jLU*JitSRQ8CAFze0T`X{%N=!M5(mfbjx
z$BDC6?$&2-zNZ_THEs|Wl96LwyRzsD6vimiQ1&or31kjZ=?NBdxtBI#btnHBm8#0v
ziA||bBg?t12*tg5+yA(aGex)4dx+7^>Apc*YbGyJ>31!bdxT=Q!%Y6A?j3oOO3$zu
z<T>ir%GzPSa#b=$d2L<6UM=CyXb*1h^tU~Us<fSxslpTnzRP26t|a#RP0Xp{3rK6;
zwmcG>kr%6kJW8eKSe)bObB+3EGnq&9!)_ls&AVpQ@MOe1H*svOStU02BU5enpS}ni
z?1zVClqah+=?fvw@NVA-6Gb=Vl=BtbUg<Ym-q8=cve<A*Sn&e?Ew5A7_~Cy{>>Qyl
zd71wMRA$d8q+3W&vv&4A{pY%t_d2%M(ciuJ7&0%ovF=CtTQ7+it+jR4Ov9Cqf<kM?
zi|Xc+zBQ<|^~1w~f?6jV9HyPeMM#{(S22G6NNXNhYetC2c~%oSiAsOt{ygAmHW5Ek
zYjCcpi*ypn?Gu4kR6$m%SL=F(y*+O;+lhXqMPG{Zf{R^pSUBgfRipS@K%Vy--lNuF
z@R=TIf|}2t+Gp6lmm}18_!zA~uhD32oeqWazM(K&bhMFAo!cr;Lao97b5z-=r#4lP
zwKU+L)<#G)pmTa_UqA07*`34o$Vg3)4Ig<Fum<Sf+%-z!N@z*nHu_!++?44!-T*oA
zB7j9x%KnC5s5Kxw7$Fg;`2j_kdA|C4x3Zsd|ID8)<LlqoPK$@~T5O{W5BPC0Mj`!d
z1J7}+mE55cZTiw)C!(Oq0V<XG^qq*yLid2A;9{`SvO#`NFpn*&V)Y{LIS|lyH0D2B
z`sVke45C5_><J?HRAW(oS<hMHut>>BTlRvxG{Vqq$d~k1QYkh6<3}ro%RHt&{tVF5
zak;O_n*He(=Lvp{#qXul2$_KhyLMkv1%w+AjB&M_?YvwJ>=agf+gO9^hA;D9R@haq
zc2-$7-pK#3<fol$wxN6q!n^=>g>HBmhzz_`d;%m?ZQ!FMZ+K&2xc^pp=N?#EAgx0&
z>Po`COz}hgLW%1|g^AuE$1|U4on0|InU)F<1g>nKR~qDk@(X9>@6R!lL3{SqoG~Vl
z52}z4)#{PgY-3;l{asM@AnkYZ1%Z`=mBRs)3Jmvh6DZkVnF2o*7GkdQDz8SgQ6XH(
z>bWI}E4OgD9k0Ek`%9lu%4aA*RA?IJcqSR)5bnD4MXg(oEz2m_f(w{x%Vo-<>Db{A
z(@l}2Qgi%)M1z6uWw@M5BVzk-XjAE!T-T+^?x3h0+>QZrm#;;Ts4!%LG%!Vdrc!i?
z3$81dJB#$*noXM-`o#5xMAKr%N-W;+eBhO}VxV%zao&0%Sw~(6th&GpZ(NQZY8k5G
zIn`gC@Qph-oyIv4<>(aP%?0*p72YvQsv9ZxMjQ{o1-on&1FhU5<=*pF*>EKrSkqN5
z5UX9XX*JRdQ9xf+STt?yd}<Os=%AaF0lz6)w4V#?40;^8B4u&O_Kc`7i1M2-Jc0XT
zJEY4ct&<Be>#ht|7r~RjKC+@LV)ff%d|R<>ZvTed>15mMTDO-5sr*C*eLIkA-uO`3
zyz|r3o0VKDu~b80Fx|jO6(R}^HONF>K|W4^lcdiEwq1Y6?<M*)g+|Cy0X+*xw>K((
zS~}gCeh##_S9*<<2G)k2-UH@mzrDLu0<?&oB;Hzs1Ey{;>9IOS&uU2z$*^fg?%7hA
za5R(R-js%8oIm0<XPlaOHp}lw=y?6z6=;-?ji*)gX9Y;r91d5qF9KS3Zq<Dr-k@l!
ze1=1Xsia>9IU91UMn7Ds_-KXdO%XP{eDUUq_%&9}BE~@=r$Gg{UqjexsbGnG#!Aml
zWxxR_mGQlDLrV20mohkOv+`Ck+^hJA??#>XoKm!#9AFB2ozNRKa${yLR*(Jx{DKw*
zCNm$t1qgeI2LDZZ?aU4gTN|{y>&Gs))JF%sJqi-v6S@PIBjka!HeGJOs(O3*aBt4p
z+JE?8wM))OkY(&yN)(~W5`~V`Yk)+di|fyHy{>nmVq9y&+EYi_Kn&&eqe0K<dI4Ld
zAF9<{U_z0qa$&1Q>4qd(hrJp~@1eJ<fblJMtZOk*G3cOrrRtX_`z0}WnN-?-%OAKF
zM9krO6i9sNr4+FFN^_QiP_Iz^k_PZfn^YO1Q0Bcn)5D(2F!`q&_D?ityWugycH5kT
zlluT}GAL*sV-Y?&b#UUY^G(2^)S5MIjSTz3)i3B23^=UyBc{xZ(8yY8FHyBMq<t_T
zeU6ezqj6Gxcyhf`b@T(dnbX$#46Mu4Mxr<2;YTwhh<UwN4YAxs#XNVqlg16ErSvgH
zCqnJ>L$+$LwFdTYC*i=8Gu#)ldo2VkDla@ebx!UOL>cB{p>^gpr8`a{s?#Q%giU4K
z3+rOO&rI`ppZgERgg^kLPd#-poU20B5e+y3+c1M2S(u^57emP+0)Y9)sQP&8K}%}-
zm{^bJ8Wbz_gyrdeY-Y<j23lFA@NLz;Q@I;KPDnA!50@Ez-*edBEE*b3#bs?9C;yz~
z(|)a*wQxrW6ChKBb#*_eV$H;ogNKu`Qot@u&azWO`;`s>`!CoaL#SB(icXfXDfvYB
z@w*~HOLPByXozqgoxEgM_s|2%VI9UkG+UI?$5EgkpdD_$^~edzq(;S}g31LpX^MKR
zi!%&(MYkG2W5WL$z9$6p6@d?hTaUylVrdm7UlofehX6yV#*t=jpEH686NQmXe9ma6
zRSjKmbrSi60?+;!W#;@P{gCeCRHTzbC;uQMR-F{Z$qnVUXBN9#GTUC3I<Bjz?$4|5
zP?T^Ku{r^1t6of@aS~t)3d==*C`f#0#~<Oxi?yQU;iP;_Q-xg}3^=V5v=#GTX;6Sx
zNwe*{nJTl}=VDy7C?_6KZ0r(K+gmqo#m)AMhYm3AJ@JeaKAFkuBeNT^In380Ley~x
z^NC<wo<NTz_|+t$hLYuAP^WjOHPCjl&j1cXF*auw(=0|_?Ym#*?4(={@D(hJuWKOB
zC&H(~4^GPZV`Q~*utZX!7EAVn16<nWOY@kNFTsa7okXmB1hv!%-);RV!f50w!sx(8
z%=~?{94ryrzVG*B&YFuU%IVIF48ZfMJ7*_r)_nXY8-pez$BP!ygWowwnEHoty}iVr
z-mE4b%~2-+g}K%&V;d%BQxEvFO%_iFwiUOE!q;8imn`Kf;60Rkb3Xc`4iWEZbBb56
z+)0;AOC)menlLX!0a7C=ZuBJM4I+{q#}TA{BK2!=S^WA<MiW)0JfECGPUbyZO;{@>
z-%6-%J$qatT_X5cq}Fzv?|QrXLY0{~;g}Izt9{NGeJJpu&N?a-xsi9Dz7Xxd>%Mh5
z>wc?>*mCb_I@F=Z#nrSLHRA)mC9V0cER1w+x1Qlylh{^^?;lQD%NS)Aoi9=VE4p4Y
zgDY5?2CRK7KCXPSt4FAQTYZZ-vcSuTsN5p{eNlUfZ{@%*iB*Nm9j=TwB5gm6LEO2C
zIZBTx<MZvic~PB*lw>juxIJE8g~hpI|CBQ?%;38#qii0JL~Ykr5`x|kjvb-@iLNVO
z4{9==BWYIP2ANOf%D2LPNh(Ahtomis>RN50Xuwrf#cEC5V>9xYnu`<ldXpVhO&U%f
zDX4EqHTaL0G=cnK&fq2;)@$26$XL;9YjeN$0D1r8m?Y>?((8lTpv|UFeqdQ=kg?s^
z+-F^1(&OeFwmDhYy!Xeq0khUZmp=dH7<f8f$u%MhI_y742wEq&H_D0pCp&p&8A~2d
ztNkJfI^NTb7#~h}dc7F3!n_%UvH!UsS~Zu^B(2Ws8bE*5=$+ABLbPeyHGR??sJS^v
zJyCl0O~r%t2ea7|(3-+av}%g4Rn%!c^_K^4OE*y}a(~mPQB00^i7GF+NSW+Zblfb)
zhJR@a7S0Z982h`WU1k<3d(UdG%_#$foEeGrX^xNTcMC2}B0g9RmMXA%t^G)bo$oVl
z|3n55>=(nYhiwN0VmoMiIspj&Zw{oZVTSP^2UI0si3ih6e^1(yomDY!Wp~?>&k2qR
zS0NWGF1yxb3gF3#Of4ffmE~5Bmi8&jQ_21X#9hM+@UvZJ43B)Sa4esUS;x?Om7B|D
zen*&=mEMiAo>M}QItrrAH1s!?tePYsh2Ifrx$hVxA&b}zc<|VFW&2(--uA`N6_xP>
z+fRJhm*#k8=N6BVfl6RA&o(>r9AkI|%gz_^s5f$?wD-4~`KPwqmjrQF2E@dVg86;B
zvR5{H$x@^Urqk`@&OMy^_R6)GnQ4P~w`Ce`{4=4g0Z(5d(RsJv``GcJCbJh?S{i=-
z(l!!oOy5fpWfbYt7FJebV@#NLPVe^bqcwF3zW4Y&**~HT?R~QmQs!cDub{03(nC}_
z0O7q`N`FRP?Lui+dV%)A<?iOTRT;ew#X*Ui%Xf=?q>YsZ*6Y0K(2wwVf;-@&a%Sdd
zl8sE^&jnX6nEX6@9H2`aLIrNBdiuA_V97W+ShxdudY?df7jnyxeQ1S4UX2wiBeKD7
z`Sk|Lz<~MCb9buX47iv&A>O=UX5S!v{Oequw=Jap@9yiOeFsqbjfolXf+tJHPmft8
zTKp#fdGXUnAoQwc5&o7rn6{LceHL$W2W9`b0h%0fd2_~3bO6+%G>Z&FQTkhln0YtU
zx%-ZxsTmcll%JPn3WhH_zqt=O>gYu;Ny!#{ICzWiJ1n{B4Co&0(##~5kY>N`{z_NC
z*UYbT809IWZbkDNt8Z+K>`guqIOTHU_+1Sg!Cno~*ITc4d{}|xtoq6bg&JJ&ORDe~
zmW6fPntc8IaU4PLBy4-@OU1eK8G!G_U9V!tAf_YkYIHP$|1#@jDpyQO);x+CBoirH
zngK9H5a6azq?NIJI_Oy;8K1fL_LrHW#8t)(nC(q-Ff-7lIV8%BH)j7W9^A2iJH>+d
z{mT(eSeSyRybqiX>N&7GA}SOtL&VVa<K4)E&-c>C75?vW#^c33m|~Hb)OX^H7j!rS
NEX^?JS0>)K{|8Giiw^(*

literal 0
HcmV?d00001

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 2acc739..bbce758 100644
--- a/src/components/Navbar.js
+++ b/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>
diff --git a/src/components/Vehicles.js b/src/components/Vehicles.js
index 1dc90e2..ea32085 100644
--- a/src/components/Vehicles.js
+++ b/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"
diff --git a/src/styles/App.css b/src/styles/App.css
index 46e902f..af30ff9 100644
--- a/src/styles/App.css
+++ b/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 {