@campxdev/shared 1.0.4 → 1.1.0

package/src/components/Layout/Header/HelpWidget/styles.tsx

@@ -1,92 +1,94 @@
-import { alpha, Box, Card, Dialog, styled } from '@mui/material'
-import { background, contactBg } from '../assets'
-// import background from '../../Header/assets/background.png'
-export const StyledDialogHeader = styled(Box)(({ theme }) => ({
-  height: '180px',
-  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
-  backgroundImage: `url(${background})`,
-  backgroundSize: 'cover',
-  display: 'flex',
-  alignItems: 'start',
-  justifyContent: 'flex-end',
-  padding: '0.6rem 1rem',
-}))
-export const StyledDialog = styled(Dialog)(() => ({
-  zIndex: 500,
-  transition: 'max-height 0.3s ease-in-out',
-  '& .MuiDialog-container': {
-    justifyContent: 'flex-end',
-    alignItems: 'end',
-
-    '& .MuiPaper-root': {
-      maxWidth: '380px',
-    },
-  },
-}))
-export const StyledCard = styled(Card)(() => ({
-  display: 'flex',
-  position: 'absolute',
-  width: '340px',
-  justifyContent: 'space-between',
-  margin: '-30px 20px 0 20px',
-  padding: '20px 15px',
-  cursor: 'pointer',
-  boxShadow: '0px 3px 15px #0000001A',
-}))
-
-export const StyledContactHeader = styled(Box)(({ theme }) => ({
-  height: '170px',
-  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
-  backgroundImage: `url(${contactBg})`,
-  backgroundSize: 'cover',
-  display: 'flex',
-  alignItems: 'start',
-  justifyContent: 'space-between',
-  padding: '0.6rem 1rem',
-}))
-
-// export const StyledContact = styled(Dialog)(() => ({
-//   zIndex: 500,
-//   height: '950px',
-//   '& .MuiDialog-container': {
-//     bottom: 0,
-//     justifyContent: 'flex-end',
-//     alignItems: 'end',
-//     '& .MuiPaper-root': {
-//       maxWidth: '380px',
-//     },
-//   },
-// }))
-
-export const StyledContactCard = styled(Card)(() => ({
-  minHeight: '50px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  padding: '10px',
-  cursor: 'pointer',
-  border: '1px solid #0000001A',
-  backgroundColor: '#cfbdbd1a',
-}))
-
-export const StyledDialogCard = styled(Card)(() => ({
-  padding: '20px',
-  boxShadow: '0px 5px 10px #0000001A',
-  maxHeight: '550px',
-  overflowY: 'auto',
-  '&::-webkit-scrollbar': {
-    width: '0px',
-    height: '0px',
-  },
-  marginTop: '-90px',
-  marginLeft: '-4px',
-  position: 'absolute',
-}))
-
-export const StyledContactBoxHeader = styled(Box)(() => ({
-  marginTop: '40px',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '5px',
-  cursor: 'pointer',
-}))
+import { alpha, Box, Card, Dialog, styled } from '@mui/material'
+import { background, contactBg } from '../assets'
+// import background from '../../Header/assets/background.png'
+export const StyledDialogHeader = styled(Box)(({ theme }) => ({
+  height: '180px',
+  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  backgroundImage: `url(${background})`,
+  backgroundSize: 'cover',
+  display: 'flex',
+  alignItems: 'start',
+  justifyContent: 'flex-end',
+  padding: '0.6rem 1rem',
+}))
+export const StyledDialog = styled(Dialog)(() => ({
+  zIndex: 500,
+  transition: 'max-height 0.3s ease-in-out',
+  '& .MuiDialog-container': {
+    justifyContent: 'flex-end',
+    alignItems: 'end',
+
+    '& .MuiPaper-root': {
+      maxWidth: '380px',
+    },
+  },
+}))
+export const StyledCard = styled(Card)(() => ({
+  display: 'flex',
+  position: 'absolute',
+  width: '340px',
+  justifyContent: 'space-between',
+  margin: '-30px 20px 0 20px',
+  padding: '20px 15px',
+  cursor: 'pointer',
+  boxShadow: '0px 3px 15px #0000001A',
+}))
+
+export const StyledContactHeader = styled(Box)(({ theme }) => ({
+  height: '170px',
+  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  backgroundImage: `url(${contactBg})`,
+  backgroundSize: 'cover',
+  display: 'flex',
+  alignItems: 'start',
+  justifyContent: 'space-between',
+  padding: '0.6rem 1rem',
+}))
+
+// export const StyledContact = styled(Dialog)(() => ({
+//   zIndex: 500,
+//   height: '950px',
+//   '& .MuiDialog-container': {
+//     bottom: 0,
+//     justifyContent: 'flex-end',
+//     alignItems: 'end',
+//     '& .MuiPaper-root': {
+//       maxWidth: '380px',
+//     },
+//   },
+// }))
+
+export const StyledContactCard = styled(Card)(() => ({
+  minHeight: '50px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '10px',
+  cursor: 'pointer',
+  border: '1px solid #0000001A',
+  backgroundColor: '#cfbdbd1a',
+}))
+
+export const StyledDialogCard = styled(Card)(() => ({
+  padding: '20px',
+  boxShadow: '0px 5px 10px #0000001A',
+  width: '350px',
+  margin: 'auto',
+  maxHeight: '550px',
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': {
+    width: '0px',
+    height: '0px',
+  },
+  marginTop: '-90px',
+  marginLeft: '-4px',
+  position: 'absolute',
+}))
+
+export const StyledContactBoxHeader = styled(Box)(() => ({
+  marginTop: '40px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '5px',
+  cursor: 'pointer',
+}))

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

@@ -1,13 +1,13 @@
-import { IconButton } from '@mui/material'
-import { NotificationIcon } from './icons'
-
-function Notification() {
-  return (
-    <>
-      <IconButton>
-        <NotificationIcon />
-      </IconButton>
-    </>
-  )
-}
-export default Notification
+import { IconButton } from '@mui/material'
+import { NotificationIcon } from './icons'
+
+function Notification() {
+  return (
+    <>
+      <IconButton>
+        <NotificationIcon />
+      </IconButton>
+    </>
+  )
+}
+export default Notification

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

@@ -1,90 +1,90 @@
-import { Box, Typography } from '@mui/material'
-import { ReactNode, useState } from 'react'
-import { avatarImage } from '../../../assets/images'
-import MenuButton from '../../MenuButton'
-import { StyledUser } from './styles'
-import logout from '../../../utils/logout'
-import ChangePassword from '../../ChangePassword'
-import { ExitToAppOutlined, HttpsOutlined } from '@mui/icons-material'
-import ConfirmationNumberOutlinedIcon from '@mui/icons-material/ConfirmationNumberOutlined'
-import DialogWrapper from '../../DrawerWrapper/DialogWrapper'
-import MyTickets from '../Tickets/MyTickets'
-export default function UserBox({
-  username,
-  profileIcon,
-  actions,
-}: {
-  username: string
-  profileIcon: string
-  actions: { label: ReactNode; icon?: ReactNode; onClick: any }[]
-}) {
-  const [open, setOpen] = useState(false)
-  const [openTicket, setOpenTicket] = useState(false)
-  const handleClickOpen = () => {
-    setOpen(true)
-  }
-  const handleClose = (value: string) => {
-    setOpen(false)
-  }
-  const handleTicketOpen = () => {
-    setOpenTicket(true)
-  }
-  const handleTicketClose = () => {
-    setOpenTicket(false)
-  }
-  return (
-    <>
-      <MenuButton
-        anchor={
-          <Box minWidth={'80px'} textAlign="center">
-            <StyledUser>
-              <img
-                src={profileIcon ?? avatarImage}
-                style={{
-                  height: '32px',
-                  width: '32px',
-                  objectFit: 'contain',
-                }}
-                onError={(e: any) => {
-                  e.target.src = avatarImage
-                }}
-              />
-              <Typography variant="h6">{username}</Typography>
-            </StyledUser>
-          </Box>
-        }
-        menu={[
-          ...actions,
-          {
-            label: 'My Tickets',
-            icon: <ConfirmationNumberOutlinedIcon />,
-            onClick: handleTicketOpen,
-          },
-
-          {
-            label: 'Change Password',
-            icon: <HttpsOutlined />,
-            onClick: handleClickOpen,
-          },
-          {
-            label: 'Logout',
-            icon: <ExitToAppOutlined />,
-            onClick: logout,
-          },
-        ]}
-        menuProps={{
-          PaperProps: { sx: { top: '64px !important' } },
-        }}
-      />
-      <DialogWrapper
-        open={openTicket}
-        title={'All Tickets'}
-        children={<MyTickets />}
-        onClose={() => {
-          handleTicketClose()
-        }}
-      />
-      <ChangePassword open={open} onClose={handleClose} />
-    </>
-  )
-}
+import { Box, Typography } from '@mui/material'
+import { ReactNode, useState } from 'react'
+import { avatarImage } from '../../../assets/images'
+import MenuButton from '../../MenuButton'
+import { StyledUser } from './styles'
+import logout from '../../../utils/logout'
+import ChangePassword from '../../ChangePassword'
+import { ExitToAppOutlined, HttpsOutlined } from '@mui/icons-material'
+import ConfirmationNumberOutlinedIcon from '@mui/icons-material/ConfirmationNumberOutlined'
+import DialogWrapper from '../../DrawerWrapper/DialogWrapper'
+import MyTickets from '../Tickets/MyTickets'
+export default function UserBox({
+  username,
+  profileIcon,
+  actions,
+}: {
+  username: string
+  profileIcon: string
+  actions: { label: ReactNode; icon?: ReactNode; onClick: any }[]
+}) {
+  const [open, setOpen] = useState(false)
+  const [openTicket, setOpenTicket] = useState(false)
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+  const handleClose = (value: string) => {
+    setOpen(false)
+  }
+  const handleTicketOpen = () => {
+    setOpenTicket(true)
+  }
+  const handleTicketClose = () => {
+    setOpenTicket(false)
+  }
+  return (
+    <>
+      <MenuButton
+        anchor={
+          <Box minWidth={'80px'} textAlign="center">
+            <StyledUser>
+              <img
+                src={profileIcon ?? avatarImage}
+                style={{
+                  height: '32px',
+                  width: '32px',
+                  objectFit: 'contain',
+                }}
+                onError={(e: any) => {
+                  e.target.src = avatarImage
+                }}
+              />
+              <Typography variant="h6">{username}</Typography>
+            </StyledUser>
+          </Box>
+        }
+        menu={[
+          ...actions,
+          {
+            label: 'My Tickets',
+            icon: <ConfirmationNumberOutlinedIcon />,
+            onClick: handleTicketOpen,
+          },
+
+          {
+            label: 'Change Password',
+            icon: <HttpsOutlined />,
+            onClick: handleClickOpen,
+          },
+          {
+            label: 'Logout',
+            icon: <ExitToAppOutlined />,
+            onClick: logout,
+          },
+        ]}
+        menuProps={{
+          PaperProps: { sx: { top: '64px !important' } },
+        }}
+      />
+      <DialogWrapper
+        open={openTicket}
+        title={'All Tickets'}
+        children={<MyTickets />}
+        onClose={() => {
+          handleTicketClose()
+        }}
+      />
+      <ChangePassword open={open} onClose={handleClose} />
+    </>
+  )
+}

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

@@ -1,90 +1,90 @@
-import { isDevelopment } from '../../../constants'
-import {
-  campxSquareSmall,
-  examsSmall,
-  hostelSmall,
-  paySmall,
-  peopleSmall,
-  commuteSmall,
-} from './assets'
-
-const origins = {
-  ums: {
-    dev: 'https://ums.campx.dev',
-    prod: 'https://ums.campx.in',
-  },
-  payments: {
-    dev: 'https://payments.campx.dev',
-    prod: 'https://payments.campx.in',
-  },
-  exams: {
-    dev: 'https://exams.campx.dev',
-    prod: 'https://exams.campx.in',
-  },
-  people: {
-    dev: 'https://people.campx.dev',
-    prod: 'https://people.campx.in',
-  },
-  hostel: {
-    dev: 'https://hostel.campx.dev',
-    prod: 'https://hostel.campx.in',
-  },
-  commute: {
-    dev: 'https://commute.campx.dev',
-    prod: 'https://commute.campx.in',
-  },
-}
-
-export const applications = [
-  {
-    title: 'CollegeX',
-    path: isDevelopment ? origins.ums.dev : origins.ums.prod,
-    icon: campxSquareSmall,
-    key: 'ums',
-    description: 'Manage Complete Campus Activities',
-  },
-  {
-    title: 'ExamX',
-    key: 'exams',
-    path: isDevelopment ? origins.exams.dev : origins.exams.prod,
-    icon: examsSmall,
-    description: 'Manage all Examinations in the Campus',
-  },
-  {
-    title: 'HostelX',
-    key: 'hostel',
-    path: isDevelopment ? origins.hostel.dev : origins.hostel.prod,
-    icon: hostelSmall,
-    description: 'Manage Hostels in the Campus',
-  },
-  {
-    title: 'PayX',
-    key: 'payments',
-    path: isDevelopment ? origins.payments.dev : origins.payments.prod,
-    icon: paySmall,
-    description: 'Manage Payments in the Campus',
-  },
-  {
-    title: 'CommuteX',
-    key: 'commute',
-    path: isDevelopment ? origins.commute.dev : origins.commute.prod,
-    icon: commuteSmall,
-    description: 'Manage Commute in the Campus',
-  },
-  ...(isDevelopment
-    ? [
-        {
-          title: 'PeopleX',
-          path: isDevelopment ? origins.people.dev : origins.people.prod,
-          icon: peopleSmall,
-          description: 'Manage People in the Campus',
-        },
-      ]
-    : []),
-  // {
-  // 	title: 'EnrollX',
-  // 	path: '/hostel',
-  // 	icon:  enrollHeaderLogo,
-  // 	// description: 'Manage Admissions in the Campus',
-  // },
-]
+import { isDevelopment } from '../../../constants'
+import {
+  campxSquareSmall,
+  examsSmall,
+  hostelSmall,
+  paySmall,
+  peopleSmall,
+  commuteSmall,
+} from './assets'
+
+const origins = {
+  ums: {
+    dev: 'https://ums.campx.dev',
+    prod: 'https://ums.campx.in',
+  },
+  payments: {
+    dev: 'https://payments.campx.dev',
+    prod: 'https://payments.campx.in',
+  },
+  exams: {
+    dev: 'https://exams.campx.dev',
+    prod: 'https://exams.campx.in',
+  },
+  people: {
+    dev: 'https://people.campx.dev',
+    prod: 'https://people.campx.in',
+  },
+  hostel: {
+    dev: 'https://hostel.campx.dev',
+    prod: 'https://hostel.campx.in',
+  },
+  commute: {
+    dev: 'https://commute.campx.dev',
+    prod: 'https://commute.campx.in',
+  },
+}
+
+export const applications = [
+  {
+    title: 'CollegeX',
+    path: isDevelopment ? origins.ums.dev : origins.ums.prod,
+    icon: campxSquareSmall,
+    key: 'ums',
+    description: 'Manage Complete Campus Activities',
+  },
+  {
+    title: 'ExamX',
+    key: 'exams',
+    path: isDevelopment ? origins.exams.dev : origins.exams.prod,
+    icon: examsSmall,
+    description: 'Manage all Examinations in the Campus',
+  },
+  {
+    title: 'HostelX',
+    key: 'hostel',
+    path: isDevelopment ? origins.hostel.dev : origins.hostel.prod,
+    icon: hostelSmall,
+    description: 'Manage Hostels in the Campus',
+  },
+  {
+    title: 'PayX',
+    key: 'payments',
+    path: isDevelopment ? origins.payments.dev : origins.payments.prod,
+    icon: paySmall,
+    description: 'Manage Payments in the Campus',
+  },
+  {
+    title: 'CommuteX',
+    key: 'commute',
+    path: isDevelopment ? origins.commute.dev : origins.commute.prod,
+    icon: commuteSmall,
+    description: 'Manage Commute in the Campus',
+  },
+  ...(isDevelopment
+    ? [
+        {
+          title: 'PeopleX',
+          path: isDevelopment ? origins.people.dev : origins.people.prod,
+          icon: peopleSmall,
+          description: 'Manage People in the Campus',
+        },
+      ]
+    : []),
+  // {
+  // 	title: 'EnrollX',
+  // 	path: '/hostel',
+  // 	icon:  enrollHeaderLogo,
+  // 	// description: 'Manage Admissions in the Campus',
+  // },
+]

package/src/components/Layout/Header/assets/campx_square_small.svg

@@ -1,9 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="320" height="320.001" viewBox="0 0 320 320.001">
-  <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>
-  <path id="Subtraction_37" data-name="Subtraction 37" d="M2495-5403H2175v-320h320v320Zm-260-260v200h200v-200Z" transform="translate(-2175 5723)" fill="url(#linear-gradient)"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="320" height="320.001" viewBox="0 0 320 320.001">
+  <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>
+  <path id="Subtraction_37" data-name="Subtraction 37" d="M2495-5403H2175v-320h320v320Zm-260-260v200h200v-200Z" transform="translate(-2175 5723)" fill="url(#linear-gradient)"/>
+</svg>

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

@@ -1,14 +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>
+<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/commutexSmall.svg

@@ -1,11 +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>
+<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>