@campxdev/shared 1.8.14 → 1.8.15

package/src/components/Input/TimePicker.tsx

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

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

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

package/src/components/JsonPreview.tsx

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

package/src/components/LabelValue.tsx

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

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

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

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

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

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

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

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

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

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

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