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/FormComponent2.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import { Form, Formik } from 'formik';
+import styled from '@emotion/styled';
+
+const FormComponent2 = ({
+  initialValues,
+  schema,
+  onSubmit,
+  children,
+  className,
+}) => (
+  <Formik
+    initialValues={initialValues}
+    validationSchema={schema}
+    onSubmit={onSubmit}
+  >
+    <StyledForm className={className}>
+      {children}
+    </StyledForm>
+  </Formik>
+);
+
+FormComponent2.propTypes = {
+  initialValues: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    pricePerHr: PropTypes.string.isRequired,
+    sitting_capacity: PropTypes.number.isRequired,
+    rental_duration: PropTypes.number.isRequired,
+    image: PropTypes.string.isRequired,
+  }).isRequired,
+  schema: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    pricePerHr: PropTypes.string.isRequired,
+    sitting_capacity: PropTypes.number.isRequired,
+    rental_duration: PropTypes.number.isRequired,
+    image: PropTypes.string.isRequired,
+  }).isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string.isRequired,
+};
+
+const StyledForm = styled(Form)`
+  // border: 1px solid blue;
+  padding: 2rem;
+
+  &.flex {
+    display: flex;
+    width: 60%;
+  }
+
+  & > .spanTwo {
+    grid-column: span 2;
+  }
+
+  & > .margin {
+    gird-column: span 2;
+    margin-left: 15%;
+    margin-right: 15%;
+  }
+`;
+
+export default FormComponent2;

src/components/Form/FormField.js

@@ -153,6 +153,32 @@ TextAreaInputField.propTypes = {
   id: PropTypes.string.isRequired,
 };
 
+export const FileInputField = ({ id, label, name, className, ...props }) => {
+  const [field, meta, helpers] = useField(name);
+
+  const handleChange = (event) => {
+    const file = event.currentTarget.files[0];
+    helpers.setValue(file);
+  };
+
+  return (
+    <FileInputWrapper className={className}>
+      <InputLabel htmlFor={props.name || props.id}>{label}</InputLabel>
+      <StyledFileInput type="file" {...field} {...props} onChange={handleChange} onBlur={() => helpers.setTouched(true)} />
+      {meta.touched && meta.error ? (
+        <FieldErrorInfo>{meta.error}</FieldErrorInfo>
+      ) : null}
+    </FileInputWrapper>
+  );
+};
+
+FileInputField.propTypes = {
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired
+};
+
 const DateFieldWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -168,6 +194,24 @@ const DateFieldWrapper = styled.div`
   }
 `;
 
+const FileInputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+
+  label {
+    margin-bottom: 0.5rem;
+  }
+`;
+
+const StyledFileInput = styled.input`
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
 const StyledDatePicker = styled(DatePicker)`
   width: 100%;
   padding: 0.5rem;
@@ -178,6 +222,7 @@ const StyledDatePicker = styled(DatePicker)`
 
 export const InputWrapper = styled.div`
   width: 100%;
+  margin-bottom: .5rem;
 `;
 
 export const InputLabel = styled.label`
@@ -208,7 +253,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`