diff --git a/src/layouts/pages/widgets/components/InputForm/HOC/HOC.jsx b/src/layouts/pages/widgets/components/InputForm/HOC/HOC.jsx
new file mode 100644
index 0000000..84e1ad8
--- /dev/null
+++ b/src/layouts/pages/widgets/components/InputForm/HOC/HOC.jsx
@@ -0,0 +1,2 @@
+const Dummy = (props) => props.children;
+export default Dummy;
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/InputForm2/InputForm2.jsx b/src/layouts/pages/widgets/components/InputForm/InputForms/InputForm2/InputForm2.jsx
new file mode 100644
index 0000000..c4d23c7
--- /dev/null
+++ b/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 = () => (
+
+
+

+

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default InputForm2;
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/InputForm2/InputForm2.module.css b/src/layouts/pages/widgets/components/InputForm/InputForms/InputForm2/InputForm2.module.css
new file mode 100644
index 0000000..cb891bf
--- /dev/null
+++ b/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;
+}
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/Icons/Image.js b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Icons/Image.js
new file mode 100644
index 0000000..be3c9e4
--- /dev/null
+++ b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Icons/Image.js
@@ -0,0 +1,72 @@
+const Image = ({ width = 40, height = 22, ...props }) => (
+
+);
+
+export default Image;
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/Icons/upload.js b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Icons/upload.js
new file mode 100644
index 0000000..819b8d9
--- /dev/null
+++ b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Icons/upload.js
@@ -0,0 +1,18 @@
+const ImportIcon = ({ width = 40, height = 22, color = "#2F363D", ...props }) => (
+
+);
+export default ImportIcon;
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/Image Upload/ImageUpload.jsx b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Image Upload/ImageUpload.jsx
new file mode 100644
index 0000000..1602ec9
--- /dev/null
+++ b/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 = () => (
+
+
+
+
+
+ {"Upload Image"}
+
+
+
+
+
+
+
+
+
+);
+
+export default ImageUpload;
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/Image Upload/ImageUpload.module.css b/src/layouts/pages/widgets/components/InputForm/InputForms/components/Image Upload/ImageUpload.module.css
new file mode 100644
index 0000000..c0f4821
--- /dev/null
+++ b/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;
+}
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputOptions/inputOptions.module.css b/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputOptions/inputOptions.module.css
new file mode 100644
index 0000000..94f56f2
--- /dev/null
+++ b/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,")
+ 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;
+}
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputOptions/inputoptions.jsx b/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputOptions/inputoptions.jsx
new file mode 100644
index 0000000..186e51c
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ );
+};
+export default InputOptions;
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputText/input.module.css b/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputText/input.module.css
new file mode 100644
index 0000000..30d1bff
--- /dev/null
+++ b/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;
+}
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputText/inputText.jsx b/src/layouts/pages/widgets/components/InputForm/InputForms/components/inputText/inputText.jsx
new file mode 100644
index 0000000..534cab4
--- /dev/null
+++ b/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 }) => (
+
+
+
+
+
+);
+
+export default Input;
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/images/image 2.jpg b/src/layouts/pages/widgets/components/InputForm/InputForms/images/image 2.jpg
new file mode 100644
index 0000000..413530a
Binary files /dev/null and b/src/layouts/pages/widgets/components/InputForm/InputForms/images/image 2.jpg differ
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/images/image 4.jpg b/src/layouts/pages/widgets/components/InputForm/InputForms/images/image 4.jpg
new file mode 100644
index 0000000..b230f77
Binary files /dev/null and b/src/layouts/pages/widgets/components/InputForm/InputForms/images/image 4.jpg differ
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/inputform1/Inputform1.jsx b/src/layouts/pages/widgets/components/InputForm/InputForms/inputform1/Inputform1.jsx
new file mode 100644
index 0000000..92935a9
--- /dev/null
+++ b/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 = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Stock Level Triggers
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default inputForm;
diff --git a/src/layouts/pages/widgets/components/InputForm/InputForms/inputform1/input1.module.css b/src/layouts/pages/widgets/components/InputForm/InputForms/inputform1/input1.module.css
new file mode 100644
index 0000000..321fdf2
--- /dev/null
+++ b/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;
+}