@campxdev/shared 0.1.0

package/src/components/IconButtons/Icons.tsx

@@ -0,0 +1,269 @@
+import React from 'react'
+
+export const ViewIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="19.026"
+      height="14.775"
+      viewBox="0 0 19.026 14.775"
+    >
+      <g id="eye_9_" data-name="eye (9)" transform="translate(0.152 0.1)">
+        <path
+          id="Path_1389"
+          data-name="Path 1389"
+          d="M18.147,7.93a10.328,10.328,0,0,0-8.79-5.275A10.328,10.328,0,0,0,.568,7.93a3.827,3.827,0,0,0,0,4.026,10.328,10.328,0,0,0,8.79,5.275,10.328,10.328,0,0,0,8.79-5.275A3.827,3.827,0,0,0,18.147,7.93Zm-1.33,3.209a8.823,8.823,0,0,1-7.46,4.532A8.823,8.823,0,0,1,1.9,11.139a2.276,2.276,0,0,1,0-2.393,8.823,8.823,0,0,1,7.46-4.532,8.817,8.817,0,0,1,7.46,4.532A2.276,2.276,0,0,1,16.817,11.139Z"
+          transform="translate(0.004 -2.655)"
+          fill="#878787"
+          stroke="#fff"
+          strokeWidth="0.2"
+        />
+        <path
+          id="Path_1390"
+          data-name="Path 1390"
+          d="M10.9,7a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,10.9,7Zm0,6.239a2.34,2.34,0,1,1,2.34-2.34A2.34,2.34,0,0,1,10.9,13.239Z"
+          transform="translate(-1.538 -3.612)"
+          fill="#878787"
+          stroke="#fff"
+          strokeWidth="0.2"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export const EditIcon = () => {
+  return (
+    <svg
+      id="edit_3_"
+      data-name="edit (3)"
+      xmlns="http://www.w3.org/2000/svg"
+      width="16.416"
+      height="16.416"
+      viewBox="0 0 16.416 16.416"
+    >
+      <path
+        id="Path_1387"
+        data-name="Path 1387"
+        d="M14.341.65,6,8.99a3.4,3.4,0,0,0-1,2.418v.919a.684.684,0,0,0,.684.684H6.6a3.4,3.4,0,0,0,2.418-1L17.36,3.669a2.138,2.138,0,0,0,0-3.019,2.185,2.185,0,0,0-3.019,0ZM16.393,2.7,8.053,11.042a2.066,2.066,0,0,1-1.451.6H6.368v-.235a2.066,2.066,0,0,1,.6-1.451l8.339-8.339a.785.785,0,0,1,1.085,0,.768.768,0,0,1,0,1.085Z"
+        transform="translate(-1.58 -0.014)"
+        fill="rgba(18,18,18,0.5)"
+      />
+      <path
+        id="Path_1388"
+        data-name="Path 1388"
+        d="M15.732,6.142a.684.684,0,0,0-.684.684V10.26H12.312a2.052,2.052,0,0,0-2.052,2.052v2.736H3.42A2.052,2.052,0,0,1,1.368,13V3.42A2.052,2.052,0,0,1,3.42,1.368H9.6A.684.684,0,0,0,9.6,0H3.42A3.424,3.424,0,0,0,0,3.42V13a3.424,3.424,0,0,0,3.42,3.42h7.759a3.4,3.4,0,0,0,2.419-1L15.414,13.6a3.4,3.4,0,0,0,1-2.418V6.826A.684.684,0,0,0,15.732,6.142Zm-3.1,8.306a2.035,2.035,0,0,1-1,.547V12.312a.684.684,0,0,1,.684-.684H15a2.063,2.063,0,0,1-.547,1Z"
+        fill="rgba(18,18,18,0.5)"
+      />
+    </svg>
+  )
+}
+
+export const DeleteIcon = () => {
+  return (
+    <svg
+      id="trash_4_"
+      data-name="trash (4)"
+      xmlns="http://www.w3.org/2000/svg"
+      width="15"
+      height="18"
+      viewBox="0 0 15 18"
+    >
+      <g
+        id="trash_4_2"
+        data-name="trash (4)"
+        transform="translate(-2)"
+        opacity="0.5"
+      >
+        <path
+          id="Path_1384"
+          data-name="Path 1384"
+          d="M16.25,3H13.925A3.757,3.757,0,0,0,10.25,0H8.75A3.757,3.757,0,0,0,5.075,3H2.75a.75.75,0,1,0,0,1.5H3.5v9.75A3.755,3.755,0,0,0,7.25,18h4.5a3.755,3.755,0,0,0,3.75-3.75V4.5h.75a.75.75,0,0,0,0-1.5ZM8.75,1.5h1.5A2.254,2.254,0,0,1,12.372,3H6.628A2.255,2.255,0,0,1,8.75,1.5ZM14,14.25a2.25,2.25,0,0,1-2.25,2.25H7.25A2.25,2.25,0,0,1,5,14.25V4.5h9Z"
+          fill="#121212"
+        />
+        <path
+          id="Path_1385"
+          data-name="Path 1385"
+          d="M9.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,9.75,16Z"
+          transform="translate(-1.75 -2.5)"
+          fill="#121212"
+        />
+        <path
+          id="Path_1386"
+          data-name="Path 1386"
+          d="M13.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,13.75,16Z"
+          transform="translate(-2.75 -2.5)"
+          fill="#121212"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export const DisabledEditIcon = () => {
+  return (
+    <svg
+      id="Component_13_1"
+      data-name="Component 13 – 1"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+    >
+      <g id="Group_77" data-name="Group 77" transform="translate(-1753 -331)">
+        <path
+          id="Path_1387"
+          data-name="Path 1387"
+          d="M14.341.65,6,8.99a3.4,3.4,0,0,0-1,2.418v.919a.684.684,0,0,0,.684.684H6.6a3.4,3.4,0,0,0,2.418-1L17.36,3.669a2.138,2.138,0,0,0,0-3.019,2.185,2.185,0,0,0-3.019,0ZM16.393,2.7,8.053,11.042a2.066,2.066,0,0,1-1.451.6H6.368v-.235a2.066,2.066,0,0,1,.6-1.451l8.339-8.339a.785.785,0,0,1,1.085,0,.768.768,0,0,1,0,1.085Z"
+          transform="translate(1751.42 330.986)"
+          fill="rgba(18,18,18,0.5)"
+        />
+        <path
+          id="Path_1388"
+          data-name="Path 1388"
+          d="M15.732,6.142a.684.684,0,0,0-.684.684V10.26H12.312a2.052,2.052,0,0,0-2.052,2.052v2.736H3.42A2.052,2.052,0,0,1,1.368,13V3.42A2.052,2.052,0,0,1,3.42,1.368H9.6A.684.684,0,0,0,9.6,0H3.42A3.424,3.424,0,0,0,0,3.42V13a3.424,3.424,0,0,0,3.42,3.42h7.759a3.4,3.4,0,0,0,2.419-1L15.414,13.6a3.4,3.4,0,0,0,1-2.418V6.826A.684.684,0,0,0,15.732,6.142Zm-3.1,8.306a2.035,2.035,0,0,1-1,.547V12.312a.684.684,0,0,1,.684-.684H15a2.063,2.063,0,0,1-.547,1Z"
+          transform="translate(1753 331)"
+          fill="rgba(18,18,18,0.5)"
+        />
+      </g>
+      <g id="Group_79" data-name="Group 79" transform="translate(-1753 -330)">
+        <circle
+          id="Ellipse_66"
+          data-name="Ellipse 66"
+          cx="5"
+          cy="5"
+          r="5"
+          transform="translate(1763 340)"
+          fill="#bc2c3d"
+        />
+        <path
+          id="cross-small_3_"
+          data-name="cross-small (3)"
+          d="M11.181,5.838h0a.445.445,0,0,0-.63,0L8.509,7.88,6.467,5.838a.445.445,0,0,0-.63,0h0a.445.445,0,0,0,0,.63L7.88,8.509,5.838,10.551a.445.445,0,0,0,0,.63h0a.445.445,0,0,0,.63,0L8.509,9.139l2.042,2.042a.445.445,0,0,0,.63,0h0a.445.445,0,0,0,0-.63L9.139,8.509l2.042-2.042A.445.445,0,0,0,11.181,5.838Z"
+          transform="translate(1759.491 336.491)"
+          fill="#fff"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export const DisabledDeleteIcon = () => {
+  return (
+    <svg
+      id="Component_14_1"
+      data-name="Component 14 – 1"
+      xmlns="http://www.w3.org/2000/svg"
+      width="19.584"
+      height="21"
+      viewBox="0 0 19.584 21"
+    >
+      <g
+        id="Group_78"
+        data-name="Group 78"
+        transform="translate(-1789.416 -330)"
+      >
+        <g
+          id="trash_4_"
+          data-name="trash (4)"
+          transform="translate(1787.416 330)"
+          opacity="0.5"
+        >
+          <path
+            id="Path_1384"
+            data-name="Path 1384"
+            d="M16.25,3H13.925A3.757,3.757,0,0,0,10.25,0H8.75A3.757,3.757,0,0,0,5.075,3H2.75a.75.75,0,1,0,0,1.5H3.5v9.75A3.755,3.755,0,0,0,7.25,18h4.5a3.755,3.755,0,0,0,3.75-3.75V4.5h.75a.75.75,0,0,0,0-1.5ZM8.75,1.5h1.5A2.254,2.254,0,0,1,12.372,3H6.628A2.255,2.255,0,0,1,8.75,1.5ZM14,14.25a2.25,2.25,0,0,1-2.25,2.25H7.25A2.25,2.25,0,0,1,5,14.25V4.5h9Z"
+            fill="#121212"
+          />
+          <path
+            id="Path_1385"
+            data-name="Path 1385"
+            d="M9.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,9.75,16Z"
+            transform="translate(-1.75 -2.5)"
+            fill="#121212"
+          />
+          <path
+            id="Path_1386"
+            data-name="Path 1386"
+            d="M13.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,13.75,16Z"
+            transform="translate(-2.75 -2.5)"
+            fill="#121212"
+          />
+        </g>
+      </g>
+      <g
+        id="Group_80"
+        data-name="Group 80"
+        transform="translate(-1753.416 -329)"
+      >
+        <circle
+          id="Ellipse_66"
+          data-name="Ellipse 66"
+          cx="5"
+          cy="5"
+          r="5"
+          transform="translate(1763 340)"
+          fill="#bc2c3d"
+        />
+        <path
+          id="cross-small_3_"
+          data-name="cross-small (3)"
+          d="M11.181,5.838h0a.445.445,0,0,0-.63,0L8.509,7.88,6.467,5.838a.445.445,0,0,0-.63,0h0a.445.445,0,0,0,0,.63L7.88,8.509,5.838,10.551a.445.445,0,0,0,0,.63h0a.445.445,0,0,0,.63,0L8.509,9.139l2.042,2.042a.445.445,0,0,0,.63,0h0a.445.445,0,0,0,0-.63L9.139,8.509l2.042-2.042A.445.445,0,0,0,11.181,5.838Z"
+          transform="translate(1759.491 336.491)"
+          fill="#fff"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export const PrintIcon = () => {
+  return (
+    <svg
+      id="print_1_"
+      data-name="print (1)"
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+    >
+      <g id="print_1_2" data-name="print (1)" opacity="0.5">
+        <path
+          id="Path_1768"
+          data-name="Path 1768"
+          d="M12.667,4V2.667A2.667,2.667,0,0,0,10,0H6A2.667,2.667,0,0,0,3.333,2.667V4A3.337,3.337,0,0,0,0,7.333v3.333A3.337,3.337,0,0,0,3.333,14a2,2,0,0,0,2,2h5.333a2,2,0,0,0,2-2A3.337,3.337,0,0,0,16,10.667V7.333A3.337,3.337,0,0,0,12.667,4Zm-8-1.333A1.333,1.333,0,0,1,6,1.333h4a1.333,1.333,0,0,1,1.333,1.333V4H4.667ZM11.333,14a.667.667,0,0,1-.667.667H5.333A.667.667,0,0,1,4.667,14V11.333a.667.667,0,0,1,.667-.667h5.333a.667.667,0,0,1,.667.667Zm3.333-3.333a2,2,0,0,1-2,2V11.333a2,2,0,0,0-2-2H5.333a2,2,0,0,0-2,2v1.333a2,2,0,0,1-2-2V7.333a2,2,0,0,1,2-2h9.333a2,2,0,0,1,2,2Z"
+          fill="#121212"
+        />
+        <path
+          id="Path_1769"
+          data-name="Path 1769"
+          d="M17,10H15.667a.667.667,0,1,0,0,1.333H17A.667.667,0,1,0,17,10Z"
+          transform="translate(-5 -3.333)"
+        />
+      </g>
+    </svg>
+  )
+}
+
+
+export const DateRangeIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18.647"
+      height="14.651"
+      viewBox="0 0 18.647 14.651"
+    >
+      <g id="transfer" transform="translate(0 -51.198)" opacity="0.501">
+        <g id="Group_807" data-name="Group 807" transform="translate(0 51.198)">
+          <path
+            id="Path_1400"
+            data-name="Path 1400"
+            d="M18.452,56.055,13.79,51.393a.666.666,0,0,0-1.137.471v2H7.991a.666.666,0,1,0,0,1.332h5.328a.666.666,0,0,0,.666-.666V53.472l3.054,3.054L13.985,59.58V58.524a.666.666,0,0,0-.666-.666H5.993v-2a.666.666,0,0,0-1.137-.471L.195,60.051a.666.666,0,0,0,0,.942l4.662,4.662a.666.666,0,0,0,.471.2.658.658,0,0,0,.255-.051.666.666,0,0,0,.411-.615v-2h4.662a.666.666,0,0,0,0-1.332H5.327a.666.666,0,0,0-.666.666v1.056L1.607,60.522l3.054-3.054v1.056a.666.666,0,0,0,.666.666h7.326v2a.666.666,0,0,0,1.137.471L18.452,57A.666.666,0,0,0,18.452,56.055Z"
+            transform="translate(0 -51.198)"
+          />
+        </g>
+      </g>
+    </svg>
+  )
+}

package/src/components/IconButtons/assets/edit.svg

@@ -0,0 +1,4 @@
+<svg id="edit_3_" data-name="edit (3)" xmlns="http://www.w3.org/2000/svg" width="16.416" height="16.416" viewBox="0 0 16.416 16.416">
+  <path id="Path_1387" data-name="Path 1387" d="M14.341.65,6,8.99a3.4,3.4,0,0,0-1,2.418v.919a.684.684,0,0,0,.684.684H6.6a3.4,3.4,0,0,0,2.418-1L17.36,3.669a2.138,2.138,0,0,0,0-3.019,2.185,2.185,0,0,0-3.019,0ZM16.393,2.7,8.053,11.042a2.066,2.066,0,0,1-1.451.6H6.368v-.235a2.066,2.066,0,0,1,.6-1.451l8.339-8.339a.785.785,0,0,1,1.085,0,.768.768,0,0,1,0,1.085Z" transform="translate(-1.58 -0.014)" fill="rgba(18,18,18,0.5)"/>
+  <path id="Path_1388" data-name="Path 1388" d="M15.732,6.142a.684.684,0,0,0-.684.684V10.26H12.312a2.052,2.052,0,0,0-2.052,2.052v2.736H3.42A2.052,2.052,0,0,1,1.368,13V3.42A2.052,2.052,0,0,1,3.42,1.368H9.6A.684.684,0,0,0,9.6,0H3.42A3.424,3.424,0,0,0,0,3.42V13a3.424,3.424,0,0,0,3.42,3.42h7.759a3.4,3.4,0,0,0,2.419-1L15.414,13.6a3.4,3.4,0,0,0,1-2.418V6.826A.684.684,0,0,0,15.732,6.142Zm-3.1,8.306a2.035,2.035,0,0,1-1,.547V12.312a.684.684,0,0,1,.684-.684H15a2.063,2.063,0,0,1-.547,1Z" fill="rgba(18,18,18,0.5)"/>
+</svg>

package/src/components/IconButtons/assets/eye.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.026" height="14.775" viewBox="0 0 19.026 14.775">
+  <g id="eye_9_" data-name="eye (9)" transform="translate(0.152 0.1)">
+    <path id="Path_1389" data-name="Path 1389" d="M18.147,7.93a10.328,10.328,0,0,0-8.79-5.275A10.328,10.328,0,0,0,.568,7.93a3.827,3.827,0,0,0,0,4.026,10.328,10.328,0,0,0,8.79,5.275,10.328,10.328,0,0,0,8.79-5.275A3.827,3.827,0,0,0,18.147,7.93Zm-1.33,3.209a8.823,8.823,0,0,1-7.46,4.532A8.823,8.823,0,0,1,1.9,11.139a2.276,2.276,0,0,1,0-2.393,8.823,8.823,0,0,1,7.46-4.532,8.817,8.817,0,0,1,7.46,4.532A2.276,2.276,0,0,1,16.817,11.139Z" transform="translate(0.004 -2.655)" fill="#878787" stroke="#fff" strokeWidth="0.2"/>
+    <path id="Path_1390" data-name="Path 1390" d="M10.9,7a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,10.9,7Zm0,6.239a2.34,2.34,0,1,1,2.34-2.34A2.34,2.34,0,0,1,10.9,13.239Z" transform="translate(-1.538 -3.612)" fill="#878787" stroke="#fff" strokeWidth="0.2"/>
+  </g>
+</svg>

package/src/components/IconButtons/assets/trash.svg

@@ -0,0 +1,7 @@
+<svg id="trash_4_" data-name="trash (4)" xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 15 18">
+  <g id="trash_4_2" data-name="trash (4)" transform="translate(-2)" opacity="0.5">
+    <path id="Path_1384" data-name="Path 1384" d="M16.25,3H13.925A3.757,3.757,0,0,0,10.25,0H8.75A3.757,3.757,0,0,0,5.075,3H2.75a.75.75,0,1,0,0,1.5H3.5v9.75A3.755,3.755,0,0,0,7.25,18h4.5a3.755,3.755,0,0,0,3.75-3.75V4.5h.75a.75.75,0,0,0,0-1.5ZM8.75,1.5h1.5A2.254,2.254,0,0,1,12.372,3H6.628A2.255,2.255,0,0,1,8.75,1.5ZM14,14.25a2.25,2.25,0,0,1-2.25,2.25H7.25A2.25,2.25,0,0,1,5,14.25V4.5h9Z" fill="#121212"/>
+    <path id="Path_1385" data-name="Path 1385" d="M9.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,9.75,16Z" transform="translate(-1.75 -2.5)" fill="#121212"/>
+    <path id="Path_1386" data-name="Path 1386" d="M13.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,13.75,16Z" transform="translate(-2.75 -2.5)" fill="#121212"/>
+  </g>
+</svg>

package/src/components/IconButtons/index.tsx

@@ -0,0 +1,8 @@
+export {
+  ViewButton,
+  DeleteButton,
+  EditButton,
+  PrintButton,
+} from './IconButtons'
+
+export { DateRangeIcon } from './Icons'

package/src/components/IconLabel.tsx

@@ -0,0 +1,37 @@
+import { Box, styled, Typography } from '@mui/material'
+import { ReactNode } from 'react'
+
+const StyledStack = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  '& .MuiSvgIcon-root': {
+    fontSize: '1rem',
+    color: theme.palette.text.secondary,
+  },
+}))
+
+export default function IconLabel({
+  label,
+  icon,
+  onClick,
+}: {
+  label: string
+  icon: ReactNode
+  onClick?: () => void
+}) {
+  return (
+    <StyledStack
+      onClick={onClick ?? onClick}
+      sx={{
+        ...(onClick && {
+          cursor: 'pointer',
+          '&:hover': { borderBottom: '1px solid gray' },
+        }),
+      }}
+    >
+      {icon}
+      <Typography variant="subtitle2">{label}</Typography>
+    </StyledStack>
+  )
+}

package/src/components/Image/Image.tsx

@@ -0,0 +1,43 @@
+import { Box } from '@mui/material'
+const brokenImage = require('./broken-image.png')
+
+interface ImageProps {
+  src: string
+  alt: string
+  height: string | number
+  width: string | number
+  fit?: 'cover' | 'contain' | 'fill'
+  radius?: string | number
+}
+
+export default function Image({
+  src,
+  alt,
+  height,
+  width,
+  fit = 'contain',
+  radius = '10px',
+}: ImageProps) {
+  return (
+    <Box
+      sx={{
+        height: height,
+        width: width,
+        '& > img': {
+          borderRadius: radius,
+          width: '100%',
+          height: '100%',
+          objectFit: fit,
+        },
+      }}
+    >
+      <img
+        src={src}
+        alt={alt}
+        onError={(e: any) => {
+          e.target.src = brokenImage
+        }}
+      />
+    </Box>
+  )
+}

package/src/components/Image/index.tsx

@@ -0,0 +1 @@
+export { default } from './Image'

package/src/components/ImageUpload.tsx

@@ -0,0 +1,98 @@
+import { InsertPhotoOutlined } from '@mui/icons-material'
+import { Box, CircularProgress, styled, Typography } from '@mui/material'
+import { ReactNode, useRef, useState } from 'react'
+import { toast } from 'react-toastify'
+import axios from '../config/axios'
+
+interface ImageUploadProps {
+  onFileUploaded: (v) => void
+  postUrl: string
+  StyledUpload?: ReactNode
+  loadingState?: (v) => void
+}
+export default function ImageUpload({
+  onFileUploaded,
+  postUrl,
+  StyledUpload,
+  loadingState,
+}: ImageUploadProps) {
+  const [loading, setLoading] = useState(false)
+  const ref = useRef<HTMLInputElement>(null)
+
+  const handleChange = (e) => {
+    if (e.target.files[0]) {
+      const formData = new FormData()
+      formData.append('file', e.target.files[0])
+      setLoading(true)
+      loadingState && setLoading(true)
+      axios
+        .post(postUrl, formData)
+        .then((res) => {
+          onFileUploaded({
+            url: res.data.url,
+            key: res.data.key,
+            fileName: res.data?.mediaObject?.originalFileName ?? '',
+            id: res.data?.mediaObject?.id ?? '',
+          })
+          setLoading(false)
+          loadingState && setLoading(false)
+        })
+        .catch((err) => {
+          setLoading(false)
+          loadingState && setLoading(false)
+          toast.error('Server Error While Uploading File')
+        })
+    }
+  }
+
+  return (
+    <>
+      {StyledUpload ? (
+        <div
+          onClick={() => {
+            ref.current.click()
+          }}
+        >
+          {StyledUpload}
+        </div>
+      ) : (
+        <StyledImageLabel
+          onClick={() => {
+            ref.current.click()
+          }}
+        >
+          <InsertPhotoOutlined />
+          <Typography sx={{ opacity: '0.6' }}>
+            {loading ? 'Uploading...' : `Upload Photo`}
+          </Typography>
+        </StyledImageLabel>
+      )}
+
+      <input
+        accept="image/*"
+        type="file"
+        hidden
+        ref={ref}
+        onChange={handleChange}
+      />
+    </>
+  )
+}
+
+export const StyledImageLabel = styled('div')(({ theme }) => ({
+  cursor: 'pointer',
+  borderRadius: '10px',
+  width: '100%',
+  height: '150px',
+  border: '1px dashed #0000001A',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '&:hover': {
+    backgroundColor: '#EFEFEF',
+  },
+  '& > *': {
+    color: theme.palette.text.disabled,
+  },
+}))

package/src/components/Input/AutoCompleteSearch.tsx

@@ -0,0 +1,143 @@
+import {
+  Autocomplete,
+  Box,
+  CircularProgress,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+
+type Option = {
+  value: string | any
+  label: string | any
+}
+
+interface MultiSelectProps {
+  control?: any
+  label: string
+  name: string
+  options: { value: string | any; label: string | any }[]
+  placeholder?: string
+  hookForm?: boolean
+  loading?: boolean
+  [key: string]: any
+  multiple?: boolean
+}
+
+export default function AutoCompleteSearch({
+  control,
+  name,
+  options,
+  label,
+  loading, // pass this variable when options are from an async operation
+  hookForm = true,
+  multiple = false,
+  ...props
+}: MultiSelectProps) {
+  if (!hookForm) {
+    return (
+      <Autocomplete
+        multiple={multiple}
+        value={props.value}
+        fullWidth
+        onChange={(e, value) => {
+          props.onChange(value)
+        }}
+        options={options || []}
+        getOptionLabel={(option: Option) => option?.label || ''}
+        renderInput={(params) => (
+          <TextField
+            variant="outlined"
+            label={<FormLabel label={label} required={props.required} />}
+            {...params}
+          />
+        )}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState: { error } }) => (
+        <Box>
+          <Autocomplete
+            multiple={multiple}
+            loading={loading}
+            value={field.value}
+            fullWidth
+            onChange={(e, value) => {
+              field.onChange(value)
+            }}
+            options={options || []}
+            getOptionLabel={(option: Option) => option?.label || ''}
+            renderInput={(params) => (
+              <TextField
+                error={Boolean(error)}
+                variant="outlined"
+                label={<FormLabel label={label} required={props.required} />}
+                InputProps={{
+                  ...params.InputProps,
+                  endAdornment: (
+                    <>
+                      {loading ? (
+                        <CircularProgress color="inherit" size={20} />
+                      ) : null}
+                      {params.InputProps.endAdornment}
+                    </>
+                  ),
+                }}
+                {...params}
+              />
+            )}
+          />
+          {error && (
+            <Typography
+              fontSize={12}
+              sx={{
+                paddingLeft: '2px',
+                marginTop: '2px',
+              }}
+              color="error"
+            >
+              {error?.message}
+            </Typography>
+          )}
+        </Box>
+      )}
+    />
+  )
+}
+
+export function MyAutoComplete({
+  value,
+  onChange,
+  options,
+  label,
+  loading,
+  ...props
+}) {
+  return (
+    <Autocomplete
+      loading={loading}
+      value={value}
+      fullWidth
+      freeSolo
+      onChange={(e, value) => {
+        onChange(value.value)
+      }}
+      options={options || []}
+      getOptionLabel={(option: Option) => option?.label || ''}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          variant="outlined"
+          label={<FormLabel label={label} required={props.required} />}
+        />
+      )}
+    />
+  )
+}

package/src/components/Input/DatePicker.tsx

@@ -0,0 +1,60 @@
+import { Box, TextField } from '@mui/material'
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import FormLabel from './FormLabel'
+interface Props {
+  label?: string
+  name?: string
+  size?: 'small' | 'medium'
+  control?: any
+  minDate?: any
+  maxDate?: any
+  required?: boolean
+  value: any
+  onChange: any
+}
+export default function FormDatePicker(props: Props) {
+  const {
+    name,
+    size = 'small',
+    label = '',
+    minDate,
+    maxDate,
+    required = false,
+    value,
+    onChange,
+  } = props
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <Box>
+        <DatePicker
+          label={<FormLabel label={label} required={required} />}
+          mask="__/__/____"
+          inputFormat="DD/MM/yyyy"
+          value={value}
+          onChange={onChange}
+          minDate={minDate}
+          maxDate={maxDate}
+          renderInput={(params) => (
+            <TextField
+              fullWidth
+              size={size}
+              {...params}
+              // error={Boolean(error)}
+            />
+          )}
+        />
+        {/* {error && (
+          <Typography
+            variant="caption"
+            component={'div'}
+            sx={{ pl: '2px' }}
+            color="rgb(211, 47, 47)"
+          >
+            {error.message}
+          </Typography>
+        )} */}
+      </Box>
+    </LocalizationProvider>
+  )
+}