@campxdev/shared 0.1.0

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/JsonPreview/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/JsonPreview/index.tsx

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

package/src/components/LabelValue/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/LabelValue/index.tsx

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

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/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,150 @@
+import { Box, IconButton, Menu, styled, Typography } from '@mui/material'
+import { AssetsStore } from '@campx/shared'
+import CogWheelMenu from './CogWheelMenu'
+import FreshDeskHelpButton from './FreshDeskHelpButton'
+import { StyledHeader, StyledImageWrapper } from './styles'
+import UserBox from './UserBox'
+import { Link } from 'react-router-dom'
+import { useState } from 'react'
+import { applications } from './applications'
+import { AppsIcon } from './icons'
+import Notification from './Notification'
+
+export default function AppHeader({ title }: { title?: string }) {
+  const assetState = AssetsStore.useState((s) => s)
+
+  return (
+    <StyledHeader>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
+        <AppsMenu />
+
+        <Link to={'/'}>
+          {title ? (
+            <Typography variant="h1">{title}</Typography>
+          ) : (
+            <StyledImageWrapper>
+              <img src={assetState.logo} />
+            </StyledImageWrapper>
+          )}
+        </Link>
+      </Box>
+      <Box className="actions">
+        <FreshDeskHelpButton />
+        <Notification />
+        <CogWheelMenu />
+        <UserBox />
+      </Box>
+    </StyledHeader>
+  )
+}
+
+const AppsMenu = () => {
+  const [anchorEl, setAnchorEl] = useState<any>(null)
+  const open = Boolean(anchorEl)
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <Box sx={{ marginRight: '10px' }}>
+      <StyledIconButton onClick={handleClick}>
+        <AppsIcon />
+      </StyledIconButton>
+
+      <Menu
+        elevation={2}
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          sx: {
+            padding: 0,
+            margin: 0,
+          },
+        }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        sx={{
+          '& .MuiPaper-root': {
+            left: '0px',
+          },
+        }}
+      >
+        <Box sx={{ padding: '1rem 1.5rem' }}>
+          <Typography variant="h6">Switch to</Typography>
+        </Box>
+        <Box>
+          {applications.map((item, index) => (
+            <StyledMenuItemContainer
+              key={index}
+              onClick={() => {
+                handleClose()
+              }}
+            >
+              <StyledMenuItem data={item} />
+            </StyledMenuItemContainer>
+          ))}
+        </Box>
+      </Menu>
+    </Box>
+  )
+}
+
+const StyledMenuItem = ({ data }) => {
+  return (
+    <StyledMenuitem>
+      <Box>{data.icon}</Box>
+      <Box>
+        <Typography variant="h1">{data?.title}</Typography>
+        <StyledDescription>{data?.description}</StyledDescription>
+      </Box>
+    </StyledMenuitem>
+  )
+}
+
+const StyledIconButton = styled(IconButton)({
+  padding: '20px',
+  backgroundColor: 'black',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '0px',
+})
+
+const StyledDescription = styled(Typography)(({ theme }) => ({
+  fontSize: '15px',
+  fontWeight: 500,
+  color: theme?.palette?.secondary?.main,
+}))
+
+const StyledMenuitem = styled(Box)({
+  height: '72px',
+  width: '400px',
+  padding: '40px 20px',
+  '&:hover': {
+    background: 'rgba(0, 0, 0, 0.03)',
+  },
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+})
+
+const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
+  cursor: 'pointer',
+  borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
+  '&:last-of-type': {
+    border: 'none',
+  },
+}))

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

@@ -0,0 +1,35 @@
+import { SettingsOutlined } from '@mui/icons-material'
+import { IconButton } from '@mui/material'
+import { useHistory } from '../../../hooks/useRouter'
+import MenuButton from '../../MenuButton'
+
+const profileMenu = [
+  { label: 'Roles and Permissions', value: '/roles-and-permissions' },
+  { label: 'Audit Logs', value: '/audit-logs' },
+  { label: 'Careers', value: '/careers' },
+  { label: 'PHD Applications', value: '/phd' },
+  { label: 'Anurag CET', value: '/applications' },
+  { label: 'Agri CET', value: '/agricet' },
+]
+
+const CogWheelMenu = () => {
+  const history = useHistory()
+
+  return (
+    <MenuButton
+      anchor={
+        <IconButton color="secondary">
+          <SettingsOutlined />
+        </IconButton>
+      }
+      menu={profileMenu?.map((item) => ({
+        label: item?.label,
+        onClick: () => {
+          history.push(item?.value)
+        },
+      }))}
+    />
+  )
+}
+
+export default CogWheelMenu

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

@@ -0,0 +1,19 @@
+import { HelpOutline } from '@mui/icons-material'
+import { Button, IconButton } 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 (
+    <IconButton color="secondary" onClick={handleOpenFreshDeskWidget}>
+      <HelpOutline />
+    </IconButton>
+  )
+}

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

@@ -0,0 +1,6 @@
+export default function MainAppHeader() {
+  return (
+    // <div>MainAppHeader</div
+    <></>
+  )
+}

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/UserBox.tsx

@@ -0,0 +1,51 @@
+import {
+  ExitToAppOutlined,
+  HttpsOutlined,
+  PermIdentityOutlined,
+} from '@mui/icons-material'
+import { Avatar, Typography } from '@mui/material'
+import { useHistory } from '../../../hooks/useRouter'
+import { avatarImage } from '../../../assets/images'
+import { UserStore } from '../../../shared-state/UserStore'
+import MenuButton from '../../MenuButton'
+import { StyledUser } from './styles'
+
+async function logout() {
+  localStorage.removeItem('token')
+  window.location.reload()
+}
+
+export default function UserBox() {
+  const user = UserStore.useState((s) => s).user
+  const history = useHistory()
+
+  return (
+    <MenuButton
+      anchor={
+        <StyledUser>
+          <Avatar src={user?.picture?.url ?? avatarImage} />
+          <Typography variant="h6">{user?.fullName}</Typography>
+        </StyledUser>
+      }
+      menu={[
+        {
+          label: 'Profile',
+          icon: <PermIdentityOutlined />,
+          onClick: () => {
+            history.push('/profile')
+          },
+        },
+        {
+          label: 'Change Password',
+          icon: <HttpsOutlined />,
+          onClick: () => {},
+        },
+        {
+          label: 'Logout',
+          icon: <ExitToAppOutlined />,
+          onClick: logout,
+        },
+      ]}
+    />
+  )
+}

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

@@ -0,0 +1,39 @@
+import GiteTwoToneIcon from '@mui/icons-material/GiteTwoTone'
+import SchoolRoundedIcon from '@mui/icons-material/SchoolRounded'
+import AssignmentRoundedIcon from '@mui/icons-material/AssignmentRounded'
+import AccountBalanceWalletRoundedIcon from '@mui/icons-material/AccountBalanceWalletRounded'
+import PersonRoundedIcon from '@mui/icons-material/PersonRounded'
+
+export const applications = [
+  {
+    title: 'CollegeX',
+    path: '/college',
+    icon: <SchoolRoundedIcon />,
+    key: 'collegex',
+    description: 'Pack my box with five dozens liquor jugs',
+  },
+  {
+    title: 'ExamX',
+    path: '/exams',
+    icon: <AssignmentRoundedIcon />,
+    description: 'Pack my box with five dozens liquor jugs',
+  },
+  {
+    title: 'PayX',
+    path: '/payments',
+    icon: <AccountBalanceWalletRoundedIcon />,
+    description: 'Pack my box with five dozens liquor jugs',
+  },
+  {
+    title: 'PeopleX',
+    path: '/people',
+    icon: <PersonRoundedIcon />,
+    description: 'Pack my box with five dozens liquor jugs',
+  },
+  {
+    title: 'HostelX',
+    path: '/hostel',
+    icon: <GiteTwoToneIcon />,
+    description: 'Pack my box with five dozens liquor jugs',
+  },
+]

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

@@ -0,0 +1,57 @@
+export const AppsIcon = () => {
+  return (
+    <svg
+      id="apps"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path
+        id="Path_15109"
+        data-name="Path 15109"
+        d="M7,0H4A4,4,0,0,0,0,4V7a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V4A4,4,0,0,0,7,0ZM9,7A2,2,0,0,1,7,9H4A2,2,0,0,1,2,7V4A2,2,0,0,1,4,2H7A2,2,0,0,1,9,4Z"
+        fill="#d4483e"
+      />
+      <path
+        id="Path_15110"
+        data-name="Path 15110"
+        d="M20,0H17a4,4,0,0,0-4,4V7a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
+        fill="#f8d759"
+      />
+      <path
+        id="Path_15111"
+        data-name="Path 15111"
+        d="M7,13H4a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V17A4,4,0,0,0,7,13Zm2,7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2H7a2,2,0,0,1,2,2Z"
+        fill="#88b053"
+      />
+      <path
+        id="Path_15112"
+        data-name="Path 15112"
+        d="M20,13H17a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V17A4,4,0,0,0,20,13Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
+        fill="#4baabe"
+      />
+    </svg>
+  )
+}
+
+export const NotificationIcon = () => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18.125"
+        height="20"
+        viewBox="0 0 18.125 20"
+      >
+        <path
+          id="bell_10_"
+          data-name="bell (10)"
+          d="M18.958,11.384l-1.583-5.7a7.767,7.767,0,0,0-15.064.395L1.085,11.595a4.166,4.166,0,0,0,4.067,5.07H6.08a4.166,4.166,0,0,0,8.166,0h.7a4.166,4.166,0,0,0,4.015-5.281Zm-8.795,6.948a2.5,2.5,0,0,1-2.346-1.666H12.51A2.5,2.5,0,0,1,10.163,18.332Zm6.771-4.32A2.481,2.481,0,0,1,14.944,15H5.152a2.5,2.5,0,0,1-2.44-3.042L3.937,6.444a6.1,6.1,0,0,1,11.832-.31l1.583,5.7a2.481,2.481,0,0,1-.418,2.181Z"
+          transform="translate(-0.986 -0.002)"
+          fill="#121212"
+        />
+      </svg>
+    </>
+  )
+}

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

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

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

@@ -0,0 +1,48 @@
+import { AppBar, Box, ListItemText, styled } from '@mui/material'
+
+export const StyledImageWrapper = styled('div')`
+  width: auto;
+  height: 24px;
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+`
+
+export const StyledItemText = styled(ListItemText)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  transition: '0.2s ease',
+}))
+
+export const StyledAppBar = styled(AppBar)(({ theme }) => ({
+  backgroundColor: 'white',
+  boxShadow: '0px 8px 28px rgb(136,136,136, 0.3)',
+}))
+
+export const StyledHeader = styled(Box)(({ theme }) => ({
+  boxShadow: '0px 2px 10px #0000001a',
+  // padding: '0 1rem',
+  backgroundColor: 'white',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  '& .actions': {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '14px',
+  },
+}))
+
+export const StyledUser = styled(Box)(({ theme }) => ({
+  cursor: 'pointer',
+  borderRadius: '5px',
+  transition: 'background 0.2s ease',
+  padding: '5px 10px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+  '&:hover': {
+    background: theme.palette.secondary.light,
+  },
+}))

package/src/components/LinearProgress/LinearProgress.tsx

@@ -0,0 +1,27 @@
+import { BoxProps, styled, Box, LinearProgress } from '@mui/material'
+import { globalStore } from '../../App'
+
+export default function LinearIndeterminate() {
+  const loading = globalStore.useState((s) => s).loading
+
+  if (!loading) return null
+  return <StyledLinearProgress />
+}
+
+export const StyledLinearProgress = styled((props: BoxProps) => (
+  <Box {...props}>
+    <LinearProgress
+      color={'inherit'}
+      sx={{
+        height: '3px',
+      }}
+    />
+  </Box>
+))(({ theme }) => ({
+  width: '100%',
+  position: 'fixed',
+  top: '64px',
+  left: 0,
+  zIndex: 400,
+  color: theme.palette.common.yellow,
+}))

package/src/components/LinearProgress/index.tsx

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

package/src/components/MediaRow/MediaRow.tsx

@@ -0,0 +1,69 @@
+import { Delete } from '@mui/icons-material'
+import { Box, IconButton, styled, Typography, Stack } from '@mui/material'
+import Image from '../Image'
+// import { Media } from 'components/UploadButton/UploadButton'
+
+interface MediaRowProps {
+  list: any[]
+  onDelete?: (mediaKey: string) => void
+}
+
+export default function MediaRow({ list, onDelete }: MediaRowProps) {
+  console.log(list, 'list')
+  return (
+    <Box sx={{ display: 'flex', gap: '1rem', width: '100%', flexWrap: 'wrap' }}>
+      {list.map((item, index) => (
+        <>{rednerMediaCard(item, onDelete)}</>
+      ))}
+    </Box>
+  )
+}
+
+const rednerMediaCard = (item: any, onDelete?: (mediaKey: string) => void) => {
+  switch (item?.type) {
+    case 'image':
+      return (
+        <StyledImageContainer>
+          <IconButton
+            size="small"
+            color="error"
+            onClick={() => {
+              onDelete(item?.key)
+            }}
+          >
+            <Delete fontSize="small" />
+          </IconButton>
+          <Image src={item?.url} height={120} width={150} alt={''} />
+        </StyledImageContainer>
+      )
+    case 'file':
+      return (
+        <Stack
+          direction={'row'}
+          alignItems="center"
+          justifyContent={'space-between'}
+          gap={'10px'}
+        >
+          <Typography>{item?.fileName}</Typography>
+          <IconButton color="error">
+            <Delete fontSize="small" />
+          </IconButton>
+        </Stack>
+      )
+
+    default:
+      break
+  }
+}
+
+const StyledImageContainer = styled(Box)(({ theme }) => ({
+  border: theme.borders.grayLight,
+  borderRadius: '10px',
+  padding: '0.7rem',
+  position: 'relative',
+  '& > button': {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+}))

package/src/components/MediaRow/index.tsx

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