Add new car

package.json

@@ -52,6 +52,7 @@
   "devDependencies": {
     "@babel/core": "^7.23.5",
     "@babel/eslint-parser": "^7.23.3",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-syntax-jsx": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
     "eslint": "^7.32.0",

src/components/Card/DisplayCartCard.js

@@ -4,9 +4,9 @@ import styled from '@emotion/styled';
 import { FaFacebook, FaTwitter, FaInstagram } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 
-const DisplayCartCard = ({ imageName, name, shortNote }) => (
+const DisplayCartCard = ({ imgSrc, name, shortNote }) => (
   <Container to="/u/dashboard/item-details">
-    <Image src={require(`../asset/${imageName}.jpg`).default} alt={name} />
+    <Image src={imgSrc} alt={name} />
     <Content>
       <Name>{name}</Name>
       <Note>{shortNote}</Note>
@@ -26,7 +26,7 @@ const DisplayCartCard = ({ imageName, name, shortNote }) => (
 );
 
 DisplayCartCard.propTypes = {
-  imageName: PropTypes.string.isRequired,
+  imgSrc: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   shortNote: PropTypes.string.isRequired,
 };

src/components/Card/DisplayItemCard.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { FaCog, FaArrowRight, FaSyncAlt } from 'react-icons/fa';
+import colorWheel from '../../components/asset/small_color_wheel.png';
 
 const DisplayItemCard = ({ name, imgSrc, amount, description }) => {
   const [rotation, setRotation] = useState(0);
@@ -14,7 +15,10 @@ const DisplayItemCard = ({ name, imgSrc, amount, description }) => {
         <Image>
           <Image1 src={imgSrc} alt={name} rotation={rotation} />
           <RotateButton onClick={handleRotate}>
-            <FaSyncAlt />
+            <Rotate>
+              <FaSyncAlt />
+              Rotate vehicle
+            </Rotate>
           </RotateButton>
         </Image>
         <Content>
@@ -44,7 +48,8 @@ const DisplayItemCard = ({ name, imgSrc, amount, description }) => {
             5.9% APR Representative
         </BoldText>
         <ColorWheel>
-            DISCOVER MORE MODEL
+          DISCOVER MORE MODEL
+          <img src={colorWheel} alt='Color Wheel'/>
         </ColorWheel>
         <ConfigureButton>
             <SettingIcon>
@@ -71,16 +76,16 @@ const Container = styled.div`
   display: flex;
   border-radius: 8px;
   text-align: right;
-//   margin-right: -20rem;
 //   width: 40%;
-  overflow: hidden;
+//   overflow: hidden;
 //   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 `;
 
 const Image = styled.div`
-  border: 1px solid blue;
+//   border: 1px solid blue;
   width: 40rem;
-  margin-right: 2rem;
+  margin-right: 5rem;
+  margin-top: 3rem;
   postion: relative;
 `;
 
@@ -94,41 +99,52 @@ const Image1 = styled.img`
 
 const RotateButton = styled.button`
   position: absolute;
-  bottom: 1rem;
-  right: 55rem;
-  background-color: #fff;
+  top: 40rem;
+  right: 50rem;
+  background-color: white;
   border: none;
   border-radius: 50%;
-  padding: 0.5rem;
+//   padding: 0.5rem;
   cursor: pointer;
 `;
 
+const Rotate = styled.div`
+//   border: 1px solid blue;
+  color: green;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 50%;
+  padding: 10px;
+`;
+
 const Content = styled.div`
   padding: 4rem 2rem;
 `;
 
 const Name = styled.h2`
   font-size: 1.5rem;
   margin-bottom: 1rem;
+  margin-top: -4rem;
 `;
 
 const Description = styled.p`
   font-size: 1rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 `;
 
 const Table = styled.table`
   width: 100%;
   margin-bottom: 2rem;
-  margin-top: 3rem;
+  margin-top: 2rem;
 `;
 
 const TableRow = styled.tr`
   background-color: ${(props) => props.color};
 `;
 
 const TableData = styled.td`
-  padding: 1rem;
+  padding: 0.5rem;
   text-align: center;
 `;
 
@@ -140,7 +156,13 @@ const BoldText = styled.div`
 
 const ColorWheel = styled.div`
   /* Add styles for the color wheel */
-  margin-bottom: 5rem;
+//   border: 1px solid blue;
+  display: flex;
+  flex-direction: column;
+//   margin-bottom: 2rem;
+  margin-left: 9rem;
+  width: 15rem;
+//   height: 1rem;
 `;
 
 const ConfigureButton = styled.button`
@@ -149,7 +171,8 @@ const ConfigureButton = styled.button`
   padding: 8px 16px;
   display: flex;
   align-items: center;
-  margin-left: 15rem;
+  margin-left: 10rem;
+  margin-top: 0.8rem;
   border: none;
   border-radius: 5rem;
   cursor: pointer;

src/components/Form/FormComponent.js

@@ -43,7 +43,8 @@ FormComponent.propTypes = {
 };
 
 const StyledForm = styled(Form)`
-  border: 1px solid orange;
+  // border: 1px solid blue;
+  padding: 2rem;
 
   &.flex {
     display: flex;
@@ -59,11 +60,6 @@ const StyledForm = styled(Form)`
     margin-left: 15%;
     margin-right: 15%;
   }
-
-  &.horizontalForm {
-    grid-template-columns: 5fr 1fr;
-    align-items: last baseline;
-  }
 `;
 
 export default FormComponent;

src/components/Form/FormField.js

@@ -178,6 +178,7 @@ const StyledDatePicker = styled(DatePicker)`
 
 export const InputWrapper = styled.div`
   width: 100%;
+  margin-bottom: .5rem;
 `;
 
 export const InputLabel = styled.label`
@@ -208,7 +209,7 @@ const Select = styled.select`
 export const Input = styled.input`
   border: 2px solid white;
   border-radius: 4px;
-  padding: 0.5rem;
+  padding: .5rem;
   text-align: left;
   font-weight: bolder;
   color: black;

src/layout/UsersDashboard/UsersDashboardLayout.js

@@ -25,17 +25,14 @@ const UsersDashboardLayout = () => {
 export default UsersDashboardLayout;
 
 const Container = styled.div`
-  display: grid;
-  grid-template-columns: 18rem auto;
-  height: 100vh;
-  width: 100vw;
-  overflow: scroll;
   background-color: white;
+  // border: 1px solid blue;
 `;
 
 const Section = styled.section`
-  /* border: 2px solid yellow; */
-  width: 100%;
+  // border: 2px solid blue;
+  width: 80%;
+  margin-left: 17rem;
 `;
 
 const MainContent = styled.main`

src/layout/UsersDashboard/sideNav/Nav.js

@@ -33,6 +33,8 @@ const Container = styled.nav`
   background-color: white;
   flex-direction: column;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
+  position: fixed;
+  height: 100%;
   gap: 3.8rem;
   top: 0;
 
@@ -48,6 +50,6 @@ const NavbtnSection = styled.section`
 `;
 
 const LogoutBtn = styled.div`
-  margin-top: auto;
+  margin-top: 8rem;
 `;
 

src/models/car.model.js

@@ -0,0 +1,17 @@
+import * as Yup from 'yup';
+
+export const CarSchema = Yup.object().shape({
+  name: Yup.string().required('Car Name is required'),
+  description: Yup.string().required('Car description is required'),
+  pricePerHr: Yup.string().required('Price is required'),
+  sitting_capacity: Yup.number().required('State sitting capacity'),
+  rental_duration: Yup.number().required('State the duration'),
+});
+
+export const carInitialValues = {
+  name: '',
+  description: '',
+  pricePerHr: '',
+  sitting_capacity: '',
+  rental_duration: '',
+};

src/pages/UserDashboard/AddNewCar/AddNewCar.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import AddNewCarForm from './AddNewCarForm';
+
+const AddNewCar = () => {
+  return(
+    <Container>
+      <SignUpContent>
+        <Title>CREATE A VEHICLE</Title>
+        <AddNewCarForm />
+      </SignUpContent>
+    </Container>
+  )
+}
+
+export default AddNewCar;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+//   min-height: 100vh;
+//   height: fit-content;
+`;
+
+const SignUpContent = styled.div`
+  margin-top: -.5rem;
+  padding: .2rem;
+// //   border: 1px solid blue;
+  width: 600px;
+  align-items: center;
+  background-color: white;
+  box-shadow: 0 7px 8px rgba(0, 0, 0, 0.1);
+`;
+
+const Title = styled.p`
+  font-size: 1rem;
+`;
+

src/pages/UserDashboard/AddNewCar/AddNewCarForm.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import FormComponent from '../../../components/Form/FormComponent';
+import { CarSchema, carInitialValues } from '../../../models/car.model';
+import FormSubmitButton from '../../../components/Button/FormSubmitButton';
+import { TextAreaInputField, TextInputField } from '../../../components/Form/FormField';
+
+
+const AddNewCarForm = () => {
+  const dispatch = useDispatch();
+
+  const handleSubmit = (values) => {
+    console.log(values);
+    dispatch(userSignUp(values));
+  };
+
+  return (
+    <FormComponent
+      initialValues={carInitialValues}
+      schema={CarSchema}
+      onSubmit={handleSubmit}
+      className=""
+    >
+      <TextInputField label="Car Name" name="name" placeholder="Car Name" />
+      <TextAreaInputField label="Description" name="description" placeholder="Description" />
+      <TextInputField label="Price/hr" name="pricePrHr" placeholder="Price"/>
+      <TextInputField label="Sitting Capacity" name="sitting_capacity" placeholder="Sitting Capacity" />
+      <TextInputField label="Rental Duration" name="rental_duration" placeholder="Duration" />
+      <FormSubmitButton type="submit" className="sign-up-submit">
+        Create
+      </FormSubmitButton>
+    </FormComponent>
+  );
+};
+
+export default AddNewCarForm;