@campxdev/shared 0.6.9 → 0.6.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "0.6.9",
+  "version": "0.6.11",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/Input/RadioGroup.tsx

@@ -11,7 +11,7 @@ import {
 import { ReactNode } from 'react'
 
 interface Props extends RadioGroupProps {
-  label: string
+  label: string | ReactNode
   name?: string
   control?: any
   sx?: any
@@ -33,11 +33,17 @@ export default function RadioGroup(props: Props) {
   return (
     <Box>
       <Box sx={{ display: 'flex' }}>
-        <Typography variant="subtitle2">{label}</Typography>
-        {required && (
-          <Typography fontSize={14} component={'span'} color="error">
-            {'  *'}
-          </Typography>
+        {typeof label === 'string' ? (
+          <>
+            <Typography variant="subtitle2">{label}</Typography>
+            {required && (
+              <Typography fontSize={14} component={'span'} color="error">
+                {'  *'}
+              </Typography>
+            )}
+          </>
+        ) : (
+          <>{label}</>
         )}
       </Box>
       <MuiRadioGroup value={value} onChange={onChange} row={row} name={name}>

package/src/components/Layout/Header/AppHeader.tsx

@@ -4,7 +4,8 @@ import { Link } from 'react-router-dom'
 import { isDevelopment } from '../../../constants/isDevelopment'
 import { applications } from './applications'
 import AppsMenu from './AppsMenu'
-import { collegex, enrollx, examx, payx, peoplex } from './assets'
+import { collegex, commutex, enrollx, examx, hostelx, payx, peoplex,} from './assets'
+
 import CogWheelMenu from './CogWheelMenu'
 import FreshDeskHelpButton from './FreshDeskHelpButton'
 import Notification from './Notification'
@@ -32,8 +33,10 @@ const imageMap = {
   enroll: enrollx,
   exams: examx,
   payments: payx,
-  peoplex: peoplex,
+  people: peoplex,
   campx: collegex,
+  commute:commutex,
+  hostel:hostelx
 }
 
 interface AppHeaderProps {

package/src/components/Layout/Header/applications.ts

@@ -5,6 +5,7 @@ import {
   hostelSmall,
   paySmall,
   peopleSmall,
+ commuteSmall
 } from './assets'
 
 const origins = {
@@ -50,11 +51,18 @@ export const applications = [
     description: 'Manage all Examinations in the Campus',
   },
   {
-    title: 'PayX',
-    key: 'payments',
-    path: isDevelopment ? origins.payments.dev : origins.payments.prod,
-    icon: paySmall,
-    description: 'Manage Online Payments in the Campus',
+    title: 'HostelX',
+    key: 'hostel',
+    path: isDevelopment ? origins.hostel.dev : origins.hostel.prod,
+    icon: hostelSmall,
+    description: 'Manage Hostels in the Campus',
+  },
+  {
+    title: 'CommuteX',
+    key: 'commute',
+    path: isDevelopment ? origins.commute.dev : origins.commute.prod,
+    icon: commuteSmall,
+    description: 'Manage Commute in the Campus',
   },
   ...(isDevelopment
     ? [
@@ -64,18 +72,6 @@ export const applications = [
           icon: peopleSmall,
           description: 'Manage People in the Campus',
         },
-        {
-          title: 'HostelX',
-          path: isDevelopment ? origins.hostel.dev : origins.hostel.prod,
-          icon: hostelSmall,
-          description: 'Manage Hostels in the Campus',
-        },
-        {
-          title: 'CommuteX',
-          path: isDevelopment ? origins.commute.dev : origins.commute.prod,
-          icon: hostelSmall,
-          description: 'Manage Commute in the Campus',
-        },
       ]
     : []),
   // {

package/src/components/Layout/Header/assets/index.ts

@@ -1,23 +1,32 @@
-import collegex from './campx.png'
-const enrollx = require('./enrollx.png')
-import examx from './newexamx.png'
-import payx from './newpayx.png'
-const peoplex = require('./peoplex.png')
-import campxSquareSmall from './campx_square_small.svg'
-import examsSmall from './exams_small.svg'
-import paySmall from './pay_small.svg'
-import peopleSmall from './people_small.svg'
-import hostelSmall from './hostel_small.svg'
+import collegex from './newAssets/campx.png'
+import enrollx from './newAssets/entrollx.png'
+import examx from './newAssets/examx.png'
+import payx from './newAssets/payx.png'
+import peoplex from './newAssets/pepolex.png'
+import campxSquareSmall from './newAssets/campx_square_small.svg'
+import examsSmall from './newAssets/exams_small.svg'
+import paySmall from './newAssets/pay_small.svg'
+import peopleSmall from './newAssets/people_small.svg'
+import hostelSmall from './newAssets/hostel_small.svg'
+import commuteSmall from './newAssets/commutexSmall.svg'
+import commutex from './newAssets/commuteX.png'
+import hostelx from './newAssets/hostelx.png'
+
 
 export {
   collegex,
   enrollx,
   examx,
   payx,
+  hostelx,
   peoplex,
   campxSquareSmall,
   examsSmall,
   paySmall,
   peopleSmall,
   hostelSmall,
+  commutex,
+ 
+  commuteSmall
+  
 }

package/src/components/Layout/Header/assets/newAssets/commutex.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="164.636" height="30" viewBox="0 0 164.636 30">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#6a2886"/>
+      <stop offset="1" stop-color="#8234a4"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4626" data-name="Group 4626" transform="translate(-154.491 -25)">
+    <text id="COMMUTEX" transform="translate(186.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">COMMUTEX</tspan></text>
+    <g id="Group_4542" data-name="Group 4542" transform="translate(1.791 -224.981)">
+      <path id="Union_49" data-name="Union 49" d="M14.451,30l-3.59-4.941L7.271,30H.073L0,29.947,10.177,15.939H.007V14.064H10.226L3.657,5.031v0L0,0V0H7.312L10.9,4.941,14.492,0h7.2l.073.053L11.584,14.064H21.757v1.875H11.54l6.566,9.03v0L21.763,30v0Z" transform="translate(152.7 249.981)" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

package/src/components/Layout/Header/assets/newAssets/commutexSmall.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="232.146" height="320.001" viewBox="0 0 232.146 320.001">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#6a2886"/>
+      <stop offset="1" stop-color="#8234a4"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4542" data-name="Group 4542" transform="translate(-152.7 -249.981)">
+    <path id="Union_49" data-name="Union 49" d="M-15618.083,8500l-38.289-52.705-38.293,52.705h-76.783l-.779-.57,108.556-149.414h-108.484v-20h109.009l-70.071-96.354-.016.02-38.993-53.663.016-.023h77.982l38.293,52.7,38.288-52.7h76.784l.783.566-108.588,149.454h108.513v20h-108.977l70.039,96.317.016-.02,38.993,53.663-.016.023Z" transform="translate(15924.928 -7930.02)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/components/Layout/Header/assets/newAssets/enroll.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="144.563" height="30" viewBox="0 0 144.563 30">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#007ab1"/>
+      <stop offset="1" stop-color="#149ecd"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4627" data-name="Group 4627" transform="translate(-142.219 -25)">
+    <g id="Group_4626" data-name="Group 4626" transform="translate(-6.346)">
+      <text id="ENROLLX" transform="translate(186.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">ENROLLX</tspan></text>
+    </g>
+    <path id="Union_6" data-name="Union 6" d="M-1754-2151h0v0l3.636-5v0l7.262-10h7.161l.073.053-10.86,14.947Zm13.437-6.012,6.53-8.988h7.161l.073.053-6.491,8.935Zm13.691-8.988Zm0,0h-7.161l-6.54-9h7.272l6.5,8.948Zm-16.228,0-7.262-10v0l-3.636-5v0h7.273l10.86,14.947-.073.053Zm5.443-15h0ZM-1737.657-2181Zm-7.275,0h0v0h7.273l0,0h-7.275Zm-9.068,0h0Z" transform="translate(1896.219 2206)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/components/Layout/Header/assets/newAssets/enrollx.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="144.563" height="30" viewBox="0 0 144.563 30">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#007ab1"/>
+      <stop offset="1" stop-color="#149ecd"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4627" data-name="Group 4627" transform="translate(-142.219 -25)">
+    <g id="Group_4626" data-name="Group 4626" transform="translate(-6.346)">
+      <text id="ENROLLX" transform="translate(186.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">ENROLLX</tspan></text>
+    </g>
+    <path id="Union_6" data-name="Union 6" d="M-1754-2151h0v0l3.636-5v0l7.262-10h7.161l.073.053-10.86,14.947Zm13.437-6.012,6.53-8.988h7.161l.073.053-6.491,8.935Zm13.691-8.988Zm0,0h-7.161l-6.54-9h7.272l6.5,8.948Zm-16.228,0-7.262-10v0l-3.636-5v0h7.273l10.86,14.947-.073.053Zm5.443-15h0ZM-1737.657-2181Zm-7.275,0h0v0h7.273l0,0h-7.275Zm-9.068,0h0Z" transform="translate(1896.219 2206)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/components/Layout/Header/assets/newAssets/examsx.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="121.121" height="30" viewBox="0 0 121.121 30">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#d86b00"/>
+      <stop offset="1" stop-color="#ed9035"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4626" data-name="Group 4626" transform="translate(-145.007 -25)">
+    <text id="EXAMX" transform="translate(184.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">EXAMX</tspan></text>
+    <g id="Group_4477" data-name="Group 4477" transform="translate(-197.288 -238.509)">
+      <path id="Subtraction_66" data-name="Subtraction 66" d="M29.12,30H21.847l0,0L0,30v0l3.636-5v0L10.9,15,3.638,5v0L0,0V0H29.12V0l-3.636,5V5L18.221,15l7.263,10v0l3.636,5,0,0ZM11.511,5.827h0l2.876,3.96V20.208l-2.876,3.96,6.094,0-2.871-3.956V9.787l2.871-3.956-6.094,0Z" transform="translate(342.295 263.509)" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

package/src/components/Layout/Header/assets/newAssets/hostelx.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="464.103" height="320" viewBox="0 0 464.103 320">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#573dab"/>
+      <stop offset="1" stop-color="#7251dd"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4511" data-name="Group 4511" transform="translate(-270.758 -251.98)">
+    <path id="Subtraction_9" data-name="Subtraction 9" d="M79.763,164.484H.016L0,164.46l39.875-54.878.015.021L118.681,1.165,157.727,54.9l.015-.021.827,1.138L79.763,164.483ZM198.442,1.137h0L197.615,0h.431l.8.58-.4.555Z" transform="translate(384.15 407.496)" fill="url(#linear-gradient)"/>
+    <path id="Union_40" data-name="Union 40" d="M79.765,320H.017L0,319.974,39.878,265.1l.013.019,78.793-108.439.185.253,34.4-47.349.016.022,78.79-108.44.389.534.239-.333L350.791,163.9l-.077.058,73.5,101.155.016-.019L464.1,319.974l-.017.023H384.339L305.533,211.531l.031-.042L265.677,156.63l-.014.019,0,0v0l-.4-.554.02-.014-7.844-10.789.1.016-25.226-34.717-39.155,53.891h-.379l-35.728,49.138L79.765,320v0ZM152.94,1.392l-1-1.367L151.96,0h1.991L152.94,1.392v0Zm158.893-.256L311.008,0h.431l.8.583-.4.554Z" transform="translate(270.757 251.98)" fill="url(#linear-gradient)"/>
+    <path id="Subtraction_10" data-name="Subtraction 10" d="M198.046,164.484h-78.52L40.883,56.246,80.756,1.366,198.845,163.9l-.8.58ZM1,1.393h0L0,.024.015,0H2.006L1,1.392Z" transform="translate(422.701 407.495)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/components/Layout/Header/assets/newAssets/libraryx.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="145.621" height="30" viewBox="0 0 145.621 30">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#cba100"/>
+      <stop offset="1" stop-color="#f8d759"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4626" data-name="Group 4626" transform="translate(-154.507 -25)">
+    <text id="LIBRARYX" transform="translate(186.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">LIBRARYX</tspan></text>
+    <path id="Union_4" data-name="Union 4" d="M-3281.868-5857h0Zm-7.273,0-.073-.1-.073.1h-7.273v0l2.106-2.9,1.53-2.106v0l.073-.1-7.15-9.842.073-.053h7.16l3.553,4.89,3.553-4.89-3.553-4.89-3.553,4.89h-7.16l-.073-.053,7.15-9.842-.073-.1v0l-3.636-5v0h7.272l.073.1.073-.1h7.273v0l-3.636,5v0l-.073.1,7.15,9.842-.073.053.073.053-7.15,9.842.073.1v0l3.636,5v0Zm-7.42-30h0Z" transform="translate(3454.507 5912)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/components/Layout/Header/assets/newAssets/payx.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="93.064" height="30" viewBox="0 0 93.064 30">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.222" y1="1" x2="0.787" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#88b053"/>
+      <stop offset="1" stop-color="#50840b"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4626" data-name="Group 4626" transform="translate(-157.064 -25)">
+    <text id="PAYX" transform="translate(190.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">PAYX</tspan></text>
+    <g id="Group_4464" data-name="Group 4464" transform="translate(-1440.537 -756.55)">
+      <g id="Group_4461" data-name="Group 4461" transform="translate(1597.6 781.55)">
+        <g id="Group_4460" data-name="Group 4460" transform="translate(0 0)">
+          <path id="Subtraction_8" data-name="Subtraction 8" d="M7.5,15.42,18.668.054,18.593,0H11.232L3.766,10.275v0L.026,15.418v0H7.5Z" transform="translate(2.447 14.58)" fill="url(#linear-gradient)"/>
+          <path id="Subtraction_8-2" data-name="Subtraction 8" d="M11.19,0,.026,15.366.1,15.42H7.462L14.928,5.145v0L18.668,0V0H11.19Z" transform="translate(-0.026 0)" fill="url(#linear-gradient)"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/components/Layout/Header/assets/newAssets/peoplex.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155.964" height="30.002" viewBox="0 0 155.964 30.002">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#d0002b"/>
+      <stop offset="1" stop-color="#ea4a6b"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4626" data-name="Group 4626" transform="translate(-136.164 -24.999)">
+    <text id="PEOPLEX" transform="translate(186.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">PEOPLEX</tspan></text>
+    <path id="Union_42" data-name="Union 42" d="M-1723.591-7464l-4.718-6.494-.884,1.217,3.8,5.2-.1.072h-17.139l0,0,3.84-5.284-.875-1.206-4.717,6.494H-1754l0,0,4.8-6.611,0,0,9.494-13.066.047.064h0l5.664,7.765,5.7-7.765h0l.029-.04,14.226,19.582-.1.072Zm-8.653-26.22a3.782,3.782,0,0,1,3.78-3.782,3.784,3.784,0,0,1,3.782,3.782,3.784,3.784,0,0,1-3.782,3.782A3.782,3.782,0,0,1-1732.245-7490.219Zm-11.241,0a3.782,3.782,0,0,1,3.78-3.782,3.783,3.783,0,0,1,3.782,3.782,3.783,3.783,0,0,1-3.782,3.782A3.782,3.782,0,0,1-1743.486-7490.219Z" transform="translate(1890.163 7519)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/components/Layout/Header/assets/newAssets/squarex.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="226.128" height="30" viewBox="0 0 226.128 30">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#596e79"/>
+      <stop offset="1" stop-color="#7c909b"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4626" data-name="Group 4626" transform="translate(-148 -25)">
+    <text id="CAMPX_SQUARE" data-name="CAMPX SQUARE" transform="translate(190.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">CAMPX SQUARE</tspan></text>
+    <path id="Subtraction_57" data-name="Subtraction 57" d="M-5680.2,8259.99h-11.3v-11.343h5.625v5.718h5.672v5.625Zm18.7,0h-11.3v-5.625h5.671v-5.718h5.625v11.343Zm0-18.749h-5.625v-5.626h-5.671v-5.625h11.3v11.251Zm-24.375,0h-5.625V8229.99h11.3v5.625h-5.672v5.626Z" transform="translate(5839.5 -8204.99)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/components/SideNav.tsx

@@ -74,14 +74,24 @@ const RenderMenuItem = ({ menuItem }) => {
   return (
     <>
       {hasAccess ? (
-        <StyledLink to={path}>
-          <ListItemButton
-            hasChildren={false}
-            label={title}
-            isActive={!!match}
-            icon={icon}
-          />
-        </StyledLink>
+        <>
+          <StyledLink to={path}>
+            <ListItemButton
+              hasChildren={false}
+              label={title}
+              isActive={!!match}
+              icon={icon}
+            />
+          </StyledLink>
+          {menuItem?.sectionEnd && (
+            <Box
+              sx={{
+                backgroundColor: '#1D1D1D',
+                height: '5px',
+              }}
+            ></Box>
+          )}
+        </>
       ) : null}
     </>
   )
@@ -125,6 +135,14 @@ const DropDownMenu = ({ path, title, icon, menuItems }) => {
           ))}
         </List>
       </Collapse>
+      {menuItems?.sectionEnd && (
+        <Box
+          sx={{
+            backgroundColor: '#1D1D1D',
+            height: '5px',
+          }}
+        ></Box>
+      )}
     </Box>
   )
 }

package/src/components/UploadButton/UploadButton.tsx

@@ -36,7 +36,7 @@ export default function UploadButton({
       const formData = new FormData()
       formData.append('file', e.target.files[0])
       setLoading(true)
-      loadingState && setLoading(true)
+      loadingState && loadingState(true)
       axios
         .post(uploadUrl, formData)
         .then((res) => {
@@ -49,62 +49,63 @@ export default function UploadButton({
           })
           refetchFn()
           setLoading(false)
-          loadingState && setLoading(false)
+          loadingState && loadingState(false)
           if (onSuccess) onSuccess()
           formRef?.current.reset()
         })
         .catch((err) => {
           setLoading(false)
-          loadingState && setLoading(false)
+          loadingState && loadingState(false)
           toast.error(
             err?.response?.data?.message ?? 'Server Error While Uploading File',
           )
-          formRef?.current.reset()
+          !styledUpload && formRef?.current.reset()
         })
     }
   }
 
   return (
     <>
-    {styledUpload ? (
-      <>
-        <div
-          onClick={() => {
-            ref.current.click()
-          }}
-        >
-          {styledUpload}
-        </div>
-      <input
-        accept={getAccept(type)}
-        type="file"
-        hidden
-        ref={ref}
-        onChange={handleChange}
-      />
+      {styledUpload ? (
+        <>
+          <div
+            onClick={() => {
+              ref.current.click()
+            }}
+          >
+            {styledUpload}
+          </div>
+          <input
+            accept={getAccept(type)}
+            type="file"
+            hidden
+            ref={ref}
+            onChange={handleChange}
+          />
         </>
       ) : (
-    <>
-      <form ref={formRef}>
-        <input
-          ref={fileInputRef}
-          type="file"
-          style={{ display: 'none' }}
-          accept={getAccept(type)}
-          onChange={handleChange}
-        />
-        <StyledButton
-          fullWidth
-          endIcon={loading ? <CircularProgress size={16} /> : null}
-          variant="outlined"
-          disabled={loading}
-          size={'large'}
-          onClick={() => fileInputRef.current.click()}
-        >
-          {getLabel(type)}
-        </StyledButton>
-      </form>
-    </>)}
+        <>
+          <form ref={formRef}>
+            <input
+              ref={fileInputRef}
+              type="file"
+              style={{ display: 'none' }}
+              accept={getAccept(type)}
+              onChange={handleChange}
+            />
+            <StyledButton
+              fullWidth
+              endIcon={loading ? <CircularProgress size={16} /> : null}
+              variant="outlined"
+              disabled={loading}
+              size={'large'}
+              onClick={() => fileInputRef.current.click()}
+            >
+              {getLabel(type)}
+            </StyledButton>
+          </form>
+        </>
+      )}
     </>
   )
 }