@campxdev/shared 1.8.13 → 1.8.14

package/src/components/Input/TimePicker.tsx

@@ -1,77 +0,0 @@
-import { QueryBuilder } from '@mui/icons-material'
-import { InputAdornment, TextFieldProps } from '@mui/material'
-import 'flatpickr/dist/flatpickr.css'
-import { ReactNode } from 'react'
-import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
-import TextField from './TextField'
-
-export interface ITimePicker {
-  label?: ReactNode
-  name?: string
-  required?: boolean
-  minTime?: Date | string | number
-  maxTime?: Date | string | number
-  value: Date | null
-  onChange: (value: Date) => void
-  placeholder?: string
-  inputProps?: TextFieldProps
-  size?: 'medium' | 'small'
-}
-
-export default function TimePicker({
-  name,
-  label,
-  required,
-  minTime,
-  maxTime,
-  onChange,
-  value,
-  placeholder,
-  size = 'medium',
-  ...rest
-}: ITimePicker) {
-  return (
-    <Flatpickr
-      options={{
-        enableTime: true,
-        noCalendar: true,
-        dateFormat: 'h:i K',
-        minTime,
-        maxTime,
-        allowInput: true,
-      }}
-      onClose={(dates) => {
-        if (onChange) onChange(dates[0])
-      }}
-      onChange={(dates: Date[]) => {
-        if (onChange) onChange(dates[0])
-      }}
-      value={value || null}
-      render={(
-        props: Omit<DateTimePickerProps, 'options' | 'render'>,
-        ref: (node: HTMLInputElement | null) => void,
-      ) => {
-        return (
-          <TextField
-            size={size}
-            placeholder={placeholder}
-            label={label}
-            name={name}
-            variant="outlined"
-            autoComplete="off"
-            required={required}
-            inputRef={ref}
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <QueryBuilder />
-                </InputAdornment>
-              ),
-            }}
-            {...rest.inputProps}
-          />
-        )
-      }}
-    />
-  )
-}

package/src/components/Input/index.ts

@@ -1,26 +0,0 @@
-import TextField from './TextField'
-import DateTimePicker from './DateTimePicker'
-import FormLabel from './FormLabel'
-import MultiCheckbox from './MultiCheckbox'
-import MultiSelect from './MultiSelect'
-import RadioGroup from './RadioGroup'
-import SingleCheckbox from './SingleCheckbox'
-import SingleSelect from './SingleSelect'
-import AutoCompleteSearch from './AutoCompleteSearch'
-import TimePicker from './TimePicker'
-import DatePicker from './DatePicker'
-import DateRangePicker from './DateRangePicker'
-export {
-  TextField,
-  DateTimePicker,
-  FormLabel,
-  MultiCheckbox,
-  MultiSelect,
-  RadioGroup,
-  SingleCheckbox,
-  SingleSelect,
-  AutoCompleteSearch,
-  TimePicker,
-  DatePicker,
-  DateRangePicker,
-}

package/src/components/Input/types.ts

@@ -1,3 +0,0 @@
-import { ReactNode } from 'react'
-
-export type IOption = { label: ReactNode; value: any }

package/src/components/JsonPreview.tsx

@@ -1,7 +0,0 @@
-export default function JsonPreview({ data }: { data: any }) {
-  return (
-    <div>
-      <pre>{JSON.stringify(data, null, 2)}</pre>
-    </div>
-  )
-}

package/src/components/LabelValue.tsx

@@ -1,21 +0,0 @@
-import { Box, Stack, Typography } from '@mui/material'
-import { ReactNode } from 'react'
-
-export default function LabelValue({
-  label,
-  value,
-  reverse = false,
-}: {
-  label: string | ReactNode
-  value?: ReactNode
-  reverse?: boolean
-}) {
-  return (
-    <Stack flexDirection={reverse ? 'column-reverse' : 'column'} gap="6px">
-      <Typography variant="subtitle2">{label}</Typography>
-      <Typography paragraph fontWeight={600}>
-        {value ?? '-'}
-      </Typography>
-    </Stack>
-  )
-}

package/src/components/Layout/ChangePassword.tsx

@@ -1,49 +0,0 @@
-import { Button, Stack } from '@mui/material'
-import { useForm } from 'react-hook-form'
-import { toast } from 'react-toastify'
-import { FormTextField } from '..'
-import axios, { axiosErrorToast } from '../../config/axios'
-
-export default function ChangePassword({ close }) {
-  const { handleSubmit, control } = useForm()
-
-  const onSubmit = async (formData) => {
-    try {
-      await axios.post('/auth-server/auth/change-password', formData)
-      toast.success('Password Changed Successfully')
-    } catch (error) {
-      axiosErrorToast(error)
-    }
-  }
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack gap={2}>
-        <FormTextField
-          label="Old Password"
-          control={control}
-          name="oldPassword"
-          required
-        />
-        <FormTextField
-          label="New Password"
-          control={control}
-          name="newPassword"
-          required
-        />
-        <FormTextField
-          label="Confirm Password"
-          control={control}
-          name="password"
-          required
-        />
-        <Stack>
-          <Button variant="outlined" onClick={close}>
-            Cancel
-          </Button>
-          <Button type="submit">Submit</Button>
-        </Stack>
-      </Stack>
-    </form>
-  )
-}

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

@@ -1,112 +0,0 @@
-import { Box, Button, Typography } from '@mui/material'
-import { ReactNode } from 'react'
-import { isDevelopment } from '../../../constants/isDevelopment'
-import { applications } from './applications'
-import AppsMenu from './AppsMenu'
-import {
-  collegex,
-  commutex,
-  enrollx,
-  examx,
-  hostelx,
-  payx,
-  peoplex,
-} from './assets'
-
-import { HelpOutline } from '@mui/icons-material'
-import CogWheelMenu from './HeaderActions/CogWheelMenu'
-import {
-  StyledHeader,
-  StyledImageWrapper,
-  StyledLogosWrapper,
-  StyledRouterLink,
-} from './styles'
-import UserBox from './HeaderActions/UserBox'
-import FreshDeskHelpButton from './HeaderActions/FreshDeskHelpButton'
-import HeaderActions from './HeaderActions/HeaderActions'
-
-const imageMap = {
-  ums: collegex,
-  enroll: enrollx,
-  exams: examx,
-  payments: payx,
-  people: peoplex,
-  campx: collegex,
-  commute: commutex,
-  hostel: hostelx,
-}
-
-interface AppHeaderProps {
-  clientLogo: string
-  fullName: string
-  userBoxActions: {
-    label: ReactNode
-    icon?: ReactNode
-    onClick: any
-  }[]
-  customHeaderActions?: ReactNode
-  cogWheelMenu?: { label: string; path: string }[]
-}
-
-export default function AppHeader({
-  clientLogo = imageMap.campx,
-  fullName,
-  userBoxActions = [],
-  cogWheelMenu = [],
-  customHeaderActions,
-}: AppHeaderProps) {
-  return (
-    <StyledHeader>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-        <AppsMenu />
-        <AppLogo clientLogo={clientLogo} />
-      </Box>
-      <Box className="actions">
-        {customHeaderActions ? (
-          customHeaderActions
-        ) : (
-          <HeaderActions
-            cogWheelMenu={cogWheelMenu}
-            fullName={fullName}
-            userBoxActions={userBoxActions}
-          />
-        )}
-      </Box>
-    </StyledHeader>
-  )
-}
-
-const AppLogo = ({ clientLogo }) => {
-  const originSubdomain = window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
-  const currentApp =
-    applications.find((item) => item.key === originSubdomain)?.key ?? 'campx'
-
-  return (
-    <StyledRouterLink to={'/'}>
-      <StyledLogosWrapper>
-        <StyledImageWrapper>
-          <img src={imageMap[currentApp]} />
-        </StyledImageWrapper>
-        <Box
-          sx={{
-            height: '26px',
-            width: '2px',
-            background: 'gray',
-          }}
-        ></Box>
-        <StyledImageWrapper>
-          {isDevelopment ? (
-            <Typography variant="h1">Developer</Typography>
-          ) : (
-            <img
-              src={clientLogo}
-              onError={(e: any) => {
-                e.target.src = imageMap.campx
-              }}
-            />
-          )}
-        </StyledImageWrapper>
-      </StyledLogosWrapper>
-    </StyledRouterLink>
-  )
-}

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

@@ -1,105 +0,0 @@
-import { Box, Menu, Typography } from '@mui/material'
-import Cookies from 'js-cookie'
-import { useState } from 'react'
-import { applications } from './applications'
-import { AppsIcon } from './icons'
-import {
-  StyledDescription,
-  StyledIconButton,
-  StyledMenuItem,
-  StyledMenuItemContainer,
-  StyledLink,
-  StyledImageBox,
-} from './styles'
-
-export const campxTenantKey = Cookies.get('campx_tenant')
-
-const AppsMenu = () => {
-  const [anchorEl, setAnchorEl] = useState<any>(null)
-  const open = Boolean(anchorEl)
-
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  return (
-    <>
-      <StyledIconButton onClick={handleClick}>
-        <AppsIcon />
-      </StyledIconButton>
-
-      <Menu
-        transitionDuration={150}
-        elevation={2}
-        id="basic-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-        TransitionProps={{
-          unmountOnExit: false,
-        }}
-        sx={{
-          '& .MuiPaper-root': {
-            left: '0 !important',
-            top: '64px !important',
-            '&>:last-child': {
-              paddingBottom: '0px',
-            },
-          },
-        }}
-      >
-        <Box sx={{ padding: '0.3rem 1rem' }}>
-          <Typography variant="body2">Switch to</Typography>
-        </Box>
-        <Box>
-          {applications.map((item, index) => (
-            <StyledLink
-              href={item.path + `/${campxTenantKey ?? ''}`}
-              key={index}
-            >
-              <StyledMenuItemContainer
-                key={index}
-                onClick={() => {
-                  window.location.href = item.path
-                  handleClose()
-                }}
-              >
-                <MenuItem data={item} />
-              </StyledMenuItemContainer>
-            </StyledLink>
-          ))}
-        </Box>
-      </Menu>
-    </>
-  )
-}
-
-export default AppsMenu
-
-const MenuItem = ({ data }) => {
-  return (
-    <StyledMenuItem>
-      <StyledImageBox>
-        <img src={data.icon} style={{ width: '20px', height: '20px' }} />
-      </StyledImageBox>
-      <Box>
-        <Typography variant="h1" sx={{ marginBottom: '7px' }}>
-          {data?.title}
-        </Typography>
-        <StyledDescription>{data?.description}</StyledDescription>
-      </Box>
-    </StyledMenuItem>
-  )
-}

package/src/components/Layout/Header/HeaderActions/CogWheelMenu.tsx

@@ -1,33 +0,0 @@
-import { SettingsOutlined } from '@mui/icons-material'
-import { IconButton } from '@mui/material'
-import { useHistory } from '../../../../hooks/useRouter'
-import DropDownButton from '../../../DropDownButton/DropDownButton'
-
-const CogWheelMenu = ({ menu }) => {
-  const history = useHistory()
-
-  return (
-    <DropDownButton
-      anchor={({ open }) => (
-        <IconButton color="secondary" onClick={open}>
-          <SettingsOutlined />
-        </IconButton>
-      )}
-      menu={menu?.map((item) => ({
-        label: item?.label,
-        onClick: () => {
-          history.push(item?.path)
-        },
-      }))}
-      menuProps={{
-        PaperProps: { sx: { top: '56px !important' } },
-        transformOrigin: {
-          horizontal: 'center',
-          vertical: 'top',
-        },
-      }}
-    />
-  )
-}
-
-export default CogWheelMenu

package/src/components/Layout/Header/HeaderActions/FreshDeskHelpButton.tsx

@@ -1,24 +0,0 @@
-import { HelpOutline } from '@mui/icons-material'
-import { Button } from '@mui/material'
-
-export default function FreshDeskHelpButton() {
-  const handleOpenFreshDeskWidget = () => {
-    try {
-      ;(window as any)?.openFreshDeskWidget()
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error('Error launching Freshdesk')
-    }
-  }
-  return (
-    <Button
-      variant="text"
-      color="secondary"
-      startIcon={<HelpOutline />}
-      onClick={handleOpenFreshDeskWidget}
-      sx={{ padding: '20px' }}
-    >
-      Help
-    </Button>
-  )
-}

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

@@ -1,18 +0,0 @@
-import { Box } from '@mui/material'
-import UserBox from './UserBox'
-import CogWheelMenu from './CogWheelMenu'
-import FreshDeskHelpButton from './FreshDeskHelpButton'
-
-export default function HeaderActions({
-  cogWheelMenu,
-  fullName,
-  userBoxActions,
-}) {
-  return (
-    <>
-      <FreshDeskHelpButton />
-      {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
-      <UserBox fullName={fullName} actions={userBoxActions} />
-    </>
-  )
-}

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

@@ -1,56 +0,0 @@
-import { ExitToAppOutlined, HttpsOutlined } from '@mui/icons-material'
-import logout from '../../../../utils/logout'
-import ChangePassword from '../../../ChangePassword'
-import DropDownButton from '../../../DropDownButton/DropDownButton'
-import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
-import { StyledAvatar } from '../styles'
-
-const getStartingLetters = (text: string) => {
-  if (!text) return ''
-  return text
-    .split(' ')
-    ?.map((w) => w[0])
-    ?.join('')
-}
-
-export default function UserBox({
-  fullName,
-  actions,
-  customActions = [],
-}: {
-  fullName: string
-  actions: IMenuItemProps[] | []
-  customActions?: IMenuItemProps[] | []
-}) {
-  return (
-    <DropDownButton
-      anchor={({ open }) => (
-        <StyledAvatar onClick={open}>
-          {getStartingLetters(fullName)}
-        </StyledAvatar>
-      )}
-      menu={
-        customActions?.length
-          ? customActions
-          : [
-              ...actions,
-              {
-                label: 'Change Password',
-                actionType: 'dialog',
-                icon: <HttpsOutlined />,
-                content: ({ close }) => <ChangePassword close={close} />,
-                contentTitle: 'Change Password',
-              },
-              {
-                label: 'Logout',
-                icon: <ExitToAppOutlined />,
-                onClick: logout,
-              },
-            ]
-      }
-      menuProps={{
-        PaperProps: { sx: { top: '56px !important' } },
-      }}
-    />
-  )
-}

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

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

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

@@ -1,103 +0,0 @@
-import { isDevelopment } from '../../../constants'
-import {
-  campxSquareSmall,
-  examsSmall,
-  hostelSmall,
-  paySmall,
-  peopleSmall,
-  commuteSmall,
-  enrollSmall,
-} 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',
-  },
-  enroll: {
-    dev: 'https://enroll.campx.dev',
-    prod: 'https://enroll.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: 'PayX',
-    key: 'payments',
-    path: isDevelopment ? origins.payments.dev : origins.payments.prod,
-    icon: paySmall,
-    description: 'Manage Payments in the Campus',
-  },
-  {
-    title: 'EnrollX',
-    key: 'enroll',
-    path: isDevelopment ? origins.enroll.dev : origins.enroll.prod,
-    icon: enrollSmall,
-    description: 'Manage Admissions 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
-    ? [
-        {
-          title: 'PeopleX',
-          key: 'people',
-          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 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" viewBox="0 0 35 35">
-  <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_7" data-name="Subtraction 7" d="M-5678.321,8264.99h-13.18v-13.234h6.563v6.672h6.617v6.563Zm21.82,0h-13.18v-6.562h6.617v-6.672h6.563v13.234Zm0-21.875h-6.562v-6.562h-6.617v-6.562h13.18v13.125Zm-28.437,0h-6.562V8229.99h13.18v6.563h-6.617v6.563Z" transform="translate(5691.501 -8229.99)" fill="url(#linear-gradient)"/>
-</svg>