added widget form components

src/layouts/pages/widgets/components/InputForm/HOC/HOC.jsx

@@ -0,0 +1,2 @@
+const Dummy = (props) => props.children;
+export default Dummy;

src/layouts/pages/widgets/components/InputForm/InputForms/InputForm2/InputForm2.jsx

@@ -0,0 +1,51 @@
+import styles from "./InputForm2.module.css";
+import InputText from "../components/inputText/inputText";
+import Img1 from "../images/image 4.jpg";
+import Img2 from "../images/image 2.jpg";
+
+const InputForm2 = () => (
+  <div className={styles.outer}>
+    <div className={styles.images}>
+      <img src={Img1} alt="Car" />
+      <img src={Img2} alt="Barcode" />
+    </div>
+    <hr />
+
+    <div className={styles.form}>
+      <div className={styles.row1}>
+        <InputText label="<Widget Nam> Name" placeholder="Pickup Truck# 202" />
+        <InputText label="type" placeholder="Ford F 250" />
+        <InputText label="Size" placeholder="Large" />
+        <InputText label="Color" placeholder="White" />
+        <InputText label="Model/VIN#" />
+        <InputText label="Last Service Meter Reading" placeholder="120000" />
+        <InputText label="Last Check-out Meter Reading" placeholder="123456" />
+        <InputText label="Last Check-in Meter Reading" placeholder="123456" />
+        <InputText label="Last Service Date" placeholder="01/01/2022" />
+      </div>
+      <div className={styles.row2}>
+        <InputText label="Last Reported Location" />
+        <InputText label="Status" placeholder="Checked Out" />
+        <InputText label="Check-Out Reason" />
+        <InputText label="Last-Check-Out By" placeholder="Danial Craig" />
+        <InputText label="Last-Check-In By" placeholder="John Doe" />
+        <InputText label="Last Reported Date & Time" />
+        <InputText label="Issue Reported" />
+        <InputText label="Toll Tag #" />
+      </div>
+    </div>
+    <div className={styles.buttons}>
+      <button type="button" className={styles.in}>
+        Check In
+      </button>
+      <button type="button" className={styles.out}>
+        Check Out
+      </button>
+      <button type="button" className={styles.report}>
+        Report
+      </button>
+    </div>
+  </div>
+);
+
+export default InputForm2;

src/layouts/pages/widgets/components/InputForm/InputForms/InputForm2/InputForm2.module.css

@@ -0,0 +1,44 @@
+.images {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px 40px;
+}
+
+.form {
+    display: grid;
+    background: white;
+    padding: 35px;
+    grid-template-columns: repeat(2, minmax(30%, auto));
+    grid-gap: 30px;
+}
+
+.buttons {
+    display: flex;
+    justify-content: center;
+}
+
+.buttons button {
+    padding: 12px 50px;
+    border-radius: 4px;
+    border: none;
+    margin: 0 8px;
+    color: white;
+    margin-bottom: 50px;
+}
+
+.in {
+    background: #34c759;
+}
+
+.out {
+    background: #ff3b30;
+}
+
+.report {
+    background: #007aff;
+}
+
+.outer {
+    height: auto;
+    background: white;
+}

src/layouts/pages/widgets/components/InputForm/InputForms/components/Icons/upload.js

@@ -0,0 +1,18 @@
+const ImportIcon = ({ width = 40, height = 22, color = "#2F363D", ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 65 64"
+    fill="none"
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M30.116 6.11454C31.1574 5.07315 32.8458 5.07315 33.8872 6.11454L47.2205 19.4479C48.2619 20.4893 48.2619 22.1777 47.2205 23.2191C46.1791 24.2605 44.4907 24.2605 43.4493 23.2191L34.6683 14.4381L34.6683 40.0002C34.6683 41.4729 33.4744 42.6668 32.0016 42.6668C30.5289 42.6668 29.335 41.4729 29.335 40.0002L29.3349 14.4381L20.5539 23.2191C19.5125 24.2605 17.824 24.2605 16.7826 23.2191C15.7412 22.1777 15.7412 20.4893 16.7826 19.4479L30.116 6.11454ZM8.00163 37.3335C9.47439 37.3335 10.6683 38.5274 10.6683 40.0002V50.6668C10.6683 51.3741 10.9492 52.0523 11.4493 52.5524C11.9494 53.0525 12.6277 53.3335 13.335 53.3335H50.6683C51.3755 53.3335 52.0538 53.0525 52.5539 52.5524C53.054 52.0523 53.335 51.3741 53.335 50.6668V40.0002C53.335 38.5274 54.5289 37.3335 56.0016 37.3335C57.4744 37.3335 58.6683 38.5274 58.6683 40.0002V50.6668C58.6683 52.7886 57.8254 54.8234 56.3251 56.3237C54.8249 57.824 52.79 58.6668 50.6683 58.6668H13.335C11.2132 58.6668 9.1784 57.824 7.67811 56.3237C6.17782 54.8234 5.33496 52.7886 5.33496 50.6668V40.0002C5.33496 38.5274 6.52887 37.3335 8.00163 37.3335Z"
+      fill="#2F363D"
+    />
+  </svg>
+);
+export default ImportIcon;

src/layouts/pages/widgets/components/InputForm/InputForms/components/Image Upload/ImageUpload.jsx

@@ -0,0 +1,23 @@
+import styles from "./ImageUpload.module.css";
+import Upload from "../Icons/upload";
+import Image from "../Icons/Image";
+
+const ImageUpload = () => (
+  <div>
+    <div className={styles.outerBorder}>
+      <div className={styles.border}>
+        <Upload height={50} width={60} />
+        <br />
+        <span>{"Upload <Widget Name> Image"}</span>
+      </div>
+      <div className={styles.items}>
+        <Image height={50} width={80} />
+        <Image height={50} width={80} />
+        <Image height={50} width={80} />
+        <Image height={50} width={80} />
+      </div>
+    </div>
+  </div>
+);
+
+export default ImageUpload;

src/layouts/pages/widgets/components/InputForm/InputForms/components/Image Upload/ImageUpload.module.css

@@ -0,0 +1,21 @@
+.border {
+    text-align: center;
+    border: 1px dashed #e8e8e8;
+    width: 100%;
+    border-radius: 5px;
+    font-size: 15px;
+    padding: 45px 0;
+}
+
+.border svg {
+    margin-bottom: 5px;
+}
+.outerBorder {
+    border: 2px solid #e8e8e8;
+    padding: 12px;
+    border-radius: 5px;
+}
+
+.items {
+    padding-top: 15px;
+}

src/layouts/pages/widgets/components/InputForm/InputForms/components/inputOptions/inputOptions.module.css

@@ -0,0 +1,28 @@
+.select {
+    color: #000000;
+    font-size: 14px;
+    position: relative;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background: rgb(255, 255, 255)
+        url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><g opacity='0.75'><path d='M13.5101 15.2002L15.4801 13.2302L18.6901 10.0202C19.3601 9.34018 18.8801 8.18018 17.9201 8.18018H11.6901H6.08007C5.12007 8.18018 4.64007 9.34018 5.32007 10.0202L10.5001 15.2002C11.3201 16.0302 12.6801 16.0302 13.5101 15.2002Z' fill='black'/></g></svg>")
+        no-repeat;
+    background-position: right 5px top 50%;
+
+    padding: 14px 0;
+    padding-left: 10px;
+    border: 1px solid lightgray;
+    border-radius: 5px;
+    width: 100%;
+    margin-top: 5px;
+    margin-bottom: 15px;
+}
+
+.selected {
+    color: blue;
+}
+
+select option:first-child {
+    color: lightgray;
+}

src/layouts/pages/widgets/components/InputForm/InputForms/components/inputOptions/inputoptions.jsx

@@ -0,0 +1,22 @@
+import styles from "./inputOptions.module.css";
+import HOC from "../../../HOC/HOC";
+
+const InputOptions = ({ label, options, data, placeholder }) => {
+  return (
+    <HOC>
+      <label htmlFor={data}>{label}</label>
+      <br />
+      <select className={styles.select}>
+        <option value="" disabled selected className={styles.selected}>
+          {placeholder}
+        </option>
+        {options.map((option) => (
+          <option value={option} name={option} key={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </HOC>
+  );
+};
+export default InputOptions;

src/layouts/pages/widgets/components/InputForm/InputForms/components/inputText/input.module.css

@@ -0,0 +1,14 @@
+.label {
+    font-size: 14px;
+    padding-bottom: 5px;
+}
+
+.input {
+    padding: 14px 0;
+    padding-left: 10px;
+    border: 1px solid lightgray;
+    border-radius: 5px;
+    width: calc(100% - 10px);
+    margin-top: 5px;
+    margin-bottom: 15px;
+}

src/layouts/pages/widgets/components/InputForm/InputForms/components/inputText/inputText.jsx

@@ -0,0 +1,14 @@
+import styles from "./input.module.css";
+import HOC from "../../../HOC/HOC";
+
+const Input = ({ label, placeholder }) => (
+  <HOC>
+    <label htmlFor="input" className={styles.label}>
+      {label}
+    </label>
+    <br />
+    <input type="text" name="input" id="input" placeholder={placeholder} className={styles.input} />
+  </HOC>
+);
+
+export default Input;

src/layouts/pages/widgets/components/InputForm/InputForms/inputform1/Inputform1.jsx

@@ -0,0 +1,100 @@
+import styles from "./input1.module.css";
+import InputText from "../components/inputText/inputText";
+import InputOption from "../components/inputOptions/inputoptions";
+import ImageUpload from "../components/Image Upload/ImageUpload";
+
+const inputForm = () => (
+  <div className={styles.border}>
+    <div className={styles.formOuter}>
+      <div className={styles.form}>
+        <div className={styles.row1}>
+          <div>
+            <InputText label="Widget Name" />
+            <label htmlFor="des" className={styles.label}>
+              Description
+            </label>
+            <br />
+            <textarea
+              name="description"
+              id="des"
+              cols="30"
+              rows="10"
+              className={styles.text}
+            ></textarea>
+            <InputOption
+              label="Manufacturer"
+              options={["one", "two", "three"]}
+              placeholder="Select lorem ipsum"
+            />
+            <InputOption
+              label="Type"
+              options={["one", "two", "three"]}
+              placeholder="Select lorem ipsum"
+            />
+            <InputOption
+              label="Unit Of Material"
+              options={["one", "two", "three"]}
+              placeholder="Select lorem ipsum"
+            />
+            <InputText label="Package Count" />
+          </div>
+          <div>
+            <InputText label="Formal Name" />
+            <InputOption
+              label="Size"
+              options={["one", "two", "three"]}
+              placeholder="Select lorem ipsum"
+            />
+            <InputOption
+              label="Color"
+              options={["one", "two", "three"]}
+              placeholder="Select lorem ipsum"
+            />
+            <InputText label="Unit Cost" />
+            <InputText label="Count Per Pallet" />
+            <InputText label="Count Per Pallet Package" />
+            <InputOption
+              label="<Widget Name> Family Association"
+              options={["Level 1", "Level 2", "Level 3"]}
+              placeholder="Level 1"
+            />
+            <InputOption options={["Level 1", "Level 2", "Level 3"]} placeholder="Level 2" />
+          </div>
+        </div>
+        <div className={styles.row2}>
+          <div>
+            <ImageUpload />
+          </div>
+          <div className={styles.buttons}>
+            <button>Add Custom fields</button>
+            <button>Import</button>
+          </div>
+          <span>Stock Level Triggers</span>
+          <hr />
+          <div className={styles.numbers}>
+            <div>
+              <label htmlFor="Under">Under</label> <br />
+              <input type="number" name="Under" />
+            </div>
+            <div>
+              <label htmlFor="Over">Over</label>
+              <br />
+              <input type="number" name="Over" />
+            </div>
+            <div>
+              <label htmlFor="Alert">Alert</label> <br />
+              <input type="number" name="Alert" />
+            </div>
+          </div>
+
+          <div className={styles.buttons}>
+            <button className={styles.cancel}>Cancel</button>
+            <button className={styles.add}>Add Item</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default inputForm;

src/layouts/pages/widgets/components/InputForm/InputForms/inputform1/input1.module.css

@@ -0,0 +1,83 @@
+.border {
+    background-color: #f9f9f9;
+}
+
+.form {
+    display: grid;
+    background: white;
+    padding: 30px 35px;
+    grid-template-rows: repeat(2, 1fr);
+}
+
+.formOuter {
+    padding: 30px 35px;
+}
+
+.label {
+    font-size: 14px;
+    padding-bottom: 5px;
+}
+
+.text {
+    padding: 14px 0;
+    padding-left: 10px;
+    border: 1px solid lightgray;
+    border-radius: 5px;
+    width: calc(100% - 10px);
+    margin-top: 5px;
+    margin-bottom: 15px;
+    resize: none;
+}
+
+.row1 {
+    display: grid;
+    grid-gap: 30px;
+    grid-template-columns: repeat(2, minmax(30%, auto));
+}
+
+.buttons {
+    display: flex;
+    justify-content: center;
+    padding: 50px 0;
+}
+
+.buttons button {
+    border: 1px solid #80bcff;
+    color: #80bcff;
+    background: white;
+    border-radius: 7px;
+    font-size: 13px;
+    padding: 10px 0;
+    width: 18%;
+    margin: 0 15px;
+    text-transform: uppercase;
+    cursor: pointer;
+}
+
+.row2 input[type="number"] {
+    padding: 12px 10px;
+    border: 1px solid lightgray;
+    border-radius: 5px;
+    margin-right: 25px;
+}
+
+.row2 input[type="number"]::-webkit-inner-spin-button,
+.row2 input[type="number"]::-webkit-outer-spin-button {
+    opacity: 1;
+    margin: 0;
+    background-color: white;
+}
+
+.numbers {
+    display: flex;
+    margin-top: 20px;
+}
+
+.cancel {
+    color: red !important;
+    border: 1px solid red !important;
+}
+.add {
+    color: white !important;
+    background: #007aff !important;
+}