@campxdev/shared 1.8.4 → 1.8.5-0.alpha-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.8.4",
+  "version": "1.8.50.alpha-2",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/ApplicationProfile/ApplicationProfile.tsx

@@ -0,0 +1,342 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  CircularProgress,
+  InputAdornment,
+  Typography,
+  styled,
+} from '@mui/material'
+import { useEffect, useState } from 'react'
+import { useMutation, useQuery } from 'react-query'
+import { toast } from 'react-toastify'
+import { useImmer } from 'use-immer'
+import UserProfileRelation from './UserProfileRelation'
+import {
+  defaultFilterObj,
+  fetchApplicationUsers,
+  fetchProfiles,
+  removeUserApplicationProfile,
+  updateUserApplicationProfile,
+} from './Service'
+import useConfirm from '../PopupConfirm/useConfirm'
+import Spinner from '../Spinner'
+import PageHeader from '../PageHeader'
+import { PageContent } from '../PageContent'
+
+import { SingleSelect } from '../Input'
+import ActionButton from '../ActionButton'
+import { axiosErrorToast } from '../../config/axios'
+import { DialogButton } from '../ModalButtons'
+import SearchBar from '../FilterComponents/SearchBar'
+import Table from '../Tables/BasicTable/Table'
+import { ValidateAccess } from '../../permissions'
+import { Permission, PermissionsStore } from '../../shared-state'
+
+interface ApplicationProfileProps {
+  application: 'exams' | 'square' | 'payments' | 'enroll_x' | 'hostels'
+  title: string
+  permissions?: {
+    add: string
+    edit: string
+    view: string
+    delete: string
+  }
+}
+function ApplicationProfile({
+  application = 'exams',
+  title,
+  permissions,
+}: ApplicationProfileProps) {
+  const { isConfirmed } = useConfirm()
+  const [filters, setFilters] = useImmer(defaultFilterObj)
+  const { data, isLoading, refetch } = useQuery(
+    ['application-users', ...Object.keys(filters)?.map((key) => filters[key])],
+    () => fetchApplicationUsers({ application, ...filters }),
+  )
+
+  const { data: profiles, isLoading: profilesLoading } = useQuery(
+    'profiles',
+    () => fetchProfiles({ application }),
+  )
+
+  const { mutate, isLoading: removingUserProfile } = useMutation(
+    removeUserApplicationProfile,
+    {
+      onSuccess: (res) => {
+        refetch()
+        toast.success('User profile removed from application')
+      },
+    },
+  )
+
+  const handleRemove = async (data) => {
+    const confirmed = await isConfirmed(
+      'Are you sure you want to remove the user profile?',
+    )
+    if (!confirmed) return
+    mutate({ userId: data.id, application: application })
+  }
+  const columns = [
+    {
+      title: 'User',
+      key: '',
+      dataIndex: '',
+      render: (_, row) => <UserComponent userData={row} />,
+    },
+    {
+      title: 'Profile',
+      key: '',
+      dataIndex: '',
+      render: (_, row) => (
+        <RenderProfileDropDown
+          profiles={profiles?.profiles}
+          data={row}
+          application={application}
+          refetchFn={refetch}
+          permissions={permissions}
+        />
+      ),
+    },
+    {
+      title: 'Actions',
+      key: '',
+      dataIndex: '',
+      render: (_, row) => (
+        <ValidateAccess
+          accessKey={
+            permissions
+              ? Permission[permissions.delete]
+              : Permission.CAN_DASHBOARD_VIEW
+          }
+        >
+          <Button
+            variant="text"
+            onClick={() => handleRemove(row)}
+            sx={{ padding: '0px', margin: '0px' }}
+          >
+            Remove
+          </Button>
+        </ValidateAccess>
+      ),
+    },
+  ]
+  const handleLimitChange = (value: number) => {
+    setFilters((s) => {
+      s.limit = value
+      s.offset = 0
+    })
+  }
+
+  const handlePagination = (value: number) => {
+    setFilters((s) => {
+      s.offset = value * s.limit - s.limit
+    })
+  }
+  if (profilesLoading) {
+    return <Spinner />
+  }
+  return (
+    <>
+      <PageHeader
+        title={title}
+        actions={[
+          <ValidateAccess
+            key={0}
+            accessKey={
+              permissions
+                ? Permission[permissions.add]
+                : Permission.CAN_DASHBOARD_VIEW
+            }
+          >
+            <DialogButton
+              key={0}
+              title={'Add User Profile Relation'}
+              anchor={({ open }) => (
+                <ActionButton onClick={open}>
+                  Add User Profile Relation
+                </ActionButton>
+              )}
+              content={({ close }) => (
+                <UserProfileRelation
+                  close={close}
+                  application={application}
+                  profiles={profiles?.profiles}
+                />
+              )}
+            />
+          </ValidateAccess>,
+        ]}
+      />
+      <PageContent sx={{ marginTop: '25px' }}>
+        <StyledTableContainer>
+          <SearchBar
+            onSearch={(value) => {
+              setFilters((s) => {
+                s.search = value
+              })
+            }}
+            textFieldProps={{
+              placeholder: 'Search by Name',
+              title: 'Search by Name',
+              sx: { width: '300px', marginBottom: '25px' },
+              size: 'small',
+            }}
+          />
+          <Table
+            columns={columns}
+            dataSource={data?.users ?? []}
+            loading={isLoading || removingUserProfile}
+            pagination={{
+              limit: filters.limit,
+              onChangeLimit: handleLimitChange,
+              onChange: handlePagination,
+              totalCount: data?.count,
+              page: filters.offset / filters.limit,
+            }}
+          />
+        </StyledTableContainer>
+      </PageContent>
+    </>
+  )
+}
+export default ApplicationProfile
+
+export const RenderProfileDropDown = ({
+  profiles,
+  data,
+  refetchFn,
+  application,
+  permissions,
+}) => {
+  const permissionState = PermissionsStore.useState((s) => s)
+  const CanEdit = permissions
+    ? permissionState.permissions[Permission[permissions.edit]]
+    : permissionState.permissions['can_dashboard_view']
+  const [state, setState] = useState({
+    userId: data.id,
+    profileId: data.profiles[0].id,
+  })
+
+  useEffect(() => {
+    setState((pre) => ({
+      userId: data.id,
+      profileId: data.profiles[0].id,
+    }))
+  }, [data])
+  const { mutate, isLoading } = useMutation(updateUserApplicationProfile, {
+    onSuccess: (res) => {
+      refetchFn()
+      toast.success('User application profile updated successfully')
+    },
+    onError: (err) => {
+      // eslint-disable-next-line no-console
+      console.log(err)
+      axiosErrorToast(err)
+    },
+  })
+  const handleChange = (e) => {
+    setState({
+      userId: data.id,
+      profileId: e.target.value,
+    })
+    mutate({
+      userId: state.userId,
+      profileIds: [e.target.value],
+      application: application,
+    })
+  }
+  return (
+    <>
+      <StyledDropDownContainer>
+        <SingleSelect
+          label={'Profile'}
+          name={'profile'}
+          value={state?.profileId}
+          onChange={(e) => {
+            handleChange(e)
+          }}
+          disabled={!CanEdit}
+          endAdornment={
+            isLoading && (
+              <InputAdornment position="end">
+                <CircularProgress
+                  size={20}
+                  color={'secondary'}
+                  sx={{ marginRight: '10px' }}
+                />
+              </InputAdornment>
+            )
+          }
+          options={
+            profiles?.map((profile) => ({
+              label: profile.name,
+              value: profile.id,
+            })) ?? []
+          }
+        />
+      </StyledDropDownContainer>
+    </>
+  )
+}
+
+export const UserComponent = ({ userData }) => {
+  return (
+    <>
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          gap: '10px',
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+        }}
+      >
+        <Avatar alt={userData?.fullName} />
+        <Typography variant="subtitle1">{userData?.fullName}</Typography>
+      </Box>
+    </>
+  )
+}
+export const StyledTableContainer = styled(Box)(({ theme }) => ({
+  width: '70%',
+  margin: 'auto',
+  '& .MuiTableHead-root': {
+    border: '1px solid white',
+    borderBottom: theme.borders.grayLight,
+    borderWidth: '2px',
+
+    backgroundColor: 'white',
+    '& th': {
+      textAlign: 'left',
+      padding: '5px',
+    },
+    '& .MuiBox-root': {
+      color: '#121212b3',
+      fontSize: '164x',
+    },
+  },
+  '& tbody': {
+    border: '1px solid white',
+    borderBottom: theme.borders.grayLight,
+    borderWidth: '2px',
+    '& tr': {
+      border: '1px solid white',
+    },
+  },
+  '& td': {
+    textAlign: 'center',
+    border: '1px solid white',
+    padding: '15px 0px',
+  },
+}))
+
+export const StyledDropDownContainer = styled(Box)(({ theme }) => ({
+  width: '200px',
+  '& .MuiTypography-root': {
+    display: 'none',
+  },
+  '& .MuiInputBase-root': {
+    backgroundColor: '#f5f6f8',
+  },
+}))

package/src/components/ApplicationProfile/Service.ts

@@ -0,0 +1,68 @@
+import * as yup from 'yup'
+import axios from '../../config/axios'
+export const defaultFilterObj = {
+  search: null,
+  limit: 10,
+  offset: 0,
+}
+
+export const userProfileSchema = yup.object().shape({
+  userId: yup
+    .object()
+    .shape({
+      label: yup.string().required('User is required'),
+      value: yup.string().required('User is required'),
+    })
+    .required('User is required'),
+  profileIds: yup.string().required('Profile is required'),
+})
+export const fetchUsers = (params) => {
+  return axios
+    .get(`/square/profile-permissions/new-users`, {
+      params: params,
+    })
+    .then((res) => res.data)
+}
+
+export const fetchApplicationUsers = (params) => {
+  return axios
+    .get(`/square/profile-permissions/application-users`, {
+      params: params,
+    })
+    .then((res) => res.data)
+}
+
+export const fetchProfiles = (application) => {
+  return axios
+    .get(`/square/profiles`, {
+      params: application,
+    })
+    .then((res) => res.data)
+}
+
+interface ApplicationUserProfile {
+  application: string
+  userId: number
+  profileIds: number[]
+}
+export const createApplicationUserProfile = (
+  postBody: ApplicationUserProfile,
+) => {
+  return axios
+    .post(`/square/profile-permissions/add-user`, postBody)
+    .then((res) => res.data)
+}
+
+export const removeUserApplicationProfile = (postBody) => {
+  return axios
+    .post(`/square/profile-permissions/remove-user`, postBody)
+    .then((res) => res.data)
+}
+
+export const updateUserApplicationProfile = (
+  postBody: ApplicationUserProfile,
+) => {
+  return axios
+    .put(`/square/profile-permissions/edit-user-permissions`, postBody)
+    .then((res) => res.data)
+}

package/src/components/ApplicationProfile/UserProfileRelation.tsx

@@ -0,0 +1,174 @@
+import { yupResolver } from '@hookform/resolvers/yup'
+import {
+  Autocomplete,
+  CircularProgress,
+  Popper,
+  Stack,
+  styled,
+} from '@mui/material'
+import { useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { useMutation, useQueryClient } from 'react-query'
+import { toast } from 'react-toastify'
+import {
+  createApplicationUserProfile,
+  fetchUsers,
+  userProfileSchema,
+} from './Service'
+import { useImmer } from 'use-immer'
+import { axiosErrorToast } from '../../config/axios'
+import { FormMultiSelect, FormSingleSelect } from '../HookForm'
+import ActionButton from '../ActionButton'
+interface UserProps {
+  options: {
+    label: any
+    value: any
+  }[]
+  inputValue: string
+}
+function UserProfileRelation({ close, application, profiles }) {
+  const [state, setState] = useImmer<UserProps>({
+    options: [],
+    inputValue: '',
+  })
+  const queryClient = useQueryClient()
+
+  const { control, handleSubmit, formState } = useForm({
+    defaultValues: {},
+    resolver: yupResolver(userProfileSchema),
+  })
+
+  const { mutate, isLoading: creatingUserProfile } = useMutation(
+    createApplicationUserProfile,
+    {
+      onSuccess: (res) => {
+        queryClient.invalidateQueries(`application-users`)
+        toast.success('User profile added to application successfully')
+        close()
+      },
+      onError: (err) => {
+        // eslint-disable-next-line no-console
+        console.log(err)
+        axiosErrorToast(err)
+      },
+    },
+  )
+
+  const { mutate: fetchUsersFn, isLoading: gettingUsers } = useMutation(
+    fetchUsers,
+    {
+      onSuccess: (res) => {
+        setState((s) => {
+          s.options = res.users?.map((item) => ({
+            label: item.fullName,
+            value: item.id,
+          }))
+        })
+      },
+    },
+  )
+  const onSubmit = (formData) => {
+    mutate({
+      application: application,
+      profileIds: [+formData.profileIds],
+      userId: +formData.userId?.value,
+    })
+  }
+  const onError = (err) => {
+    // eslint-disable-next-line no-console
+    console.log(err)
+  }
+
+  const handleInputChange = (e) => {
+    if (e) {
+      setState((s) => {
+        s.inputValue = e.target.value
+      })
+      if (e.target.value.length > 3) {
+        fetchUsersFn({
+          application: application,
+          search: e.target.value,
+        })
+      }
+    }
+  }
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit, onError)}>
+        <Stack gap={4} sx={{ padding: '10px' }}>
+          <FormMultiSelect
+            multiple={false}
+            label={'User'}
+            name={'userId'}
+            onInputChange={handleInputChange}
+            loading={gettingUsers}
+            control={control}
+            options={state.options ?? []}
+            required
+          />
+
+          <FormSingleSelect
+            label={'Profile'}
+            name={'profileIds'}
+            control={control}
+            options={
+              profiles?.map((profile) => ({
+                label: profile.name,
+                value: profile.id,
+              })) ?? []
+            }
+            required
+          />
+          <Stack gap={2} direction={'row'} sx={{ justifyContent: 'flex-end' }}>
+            <ActionButton variant="outlined" onClick={close}>
+              Cancel
+            </ActionButton>
+            <ActionButton type="submit" loading={creatingUserProfile}>
+              Confirm
+            </ActionButton>
+          </Stack>
+        </Stack>
+      </form>
+    </>
+  )
+}
+export default UserProfileRelation
+
+const StyledPopper = styled(Popper)(({ theme }) => ({
+  '& .MuiPaper-root': {
+    borderRadius: '10px',
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+    boxShadow: '0px 4px 16px #0000000F',
+    marginTop: '1px',
+    '& .MuiAutocomplete-listbox': {
+      minWidth: '240px',
+      padding: '10px',
+      '& .MuiAutocomplete-option': {
+        padding: '10px',
+        background: 'none',
+        '&.Mui-focused': {
+          background: 'none',
+        },
+      },
+      '& .MuiCheckbox-root': {
+        padding: 0,
+        marginRight: '10px',
+      },
+    },
+    '&::-webkit-scrollbar': {
+      width: '0.5em',
+      height: '0.5em',
+    },
+
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: 'rgba(0, 0, 0, 0.15)',
+      borderRadius: '3px',
+
+      '&:hover': {
+        background: 'rgba(0, 0, 0, 0.2)',
+      },
+    },
+  },
+}))

package/src/components/ApplicationProfile/index.tsx

@@ -0,0 +1 @@
+export { default } from "./ApplicationProfile";

package/src/components/DropDownButton/DropdownMenuItem.tsx

@@ -9,6 +9,8 @@ import { ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 import { DrawerButtonProps } from '../ModalButtons/DrawerButton'
 import { StyledMenuItem } from './styles'
+import { ValidateAccess } from '../../permissions'
+import { Permission } from '../../shared-state'
 
 const StyledLink = styled(Link)(({ theme }) => ({
   display: 'block',
@@ -53,6 +55,7 @@ export type IMenuItemProps = Omit<MenuItemButtonProps, 'onClick'> & {
   onClick?: () => void
   dialogProps?: Omit<DialogProps, 'open'>
   drawerProps?: Omit<DrawerProps, 'open'>
+  permissionKey?: Permission
 }
 
 export interface IRenderMenuItemProps extends IMenuItemProps {
@@ -70,6 +73,7 @@ export const RenderMenuItem = ({
   link,
   drawerProps,
   dialogProps,
+  permissionKey,
   ...props
 }: IRenderMenuItemProps) => {
   const renderMenuItem: Record<MenuItemType, ReactNode> = {
@@ -106,5 +110,13 @@ export const RenderMenuItem = ({
       </StyledLink>
     ),
   }
+
+  if (permissionKey)
+    return (
+      <ValidateAccess accessKey={permissionKey}>
+        {renderMenuItem[actionType]}
+      </ValidateAccess>
+    )
+
   return <>{renderMenuItem[actionType]}</>
 }

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,5 +1,8 @@
-import { ReactNode } from 'react'
-import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'
+import { ReactElement, ReactNode } from 'react'
+import {
+  ErrorBoundary as ReactErrorBoundary,
+  FallbackProps,
+} from 'react-error-boundary'
 import { QueryErrorResetBoundary } from 'react-query'
 import { useLocation } from 'react-router-dom'
 import ErrorFallback from './ErrorFallback'
@@ -7,9 +10,11 @@ import ErrorFallback from './ErrorFallback'
 export default function ErrorBoundary({
   children,
   resetKey,
+  customFallback,
 }: {
   children: ReactNode
   resetKey?: string
+  customFallback?: (props: FallbackProps) => JSX.Element
 }) {
   const location = useLocation()
   return (
@@ -17,7 +22,7 @@ export default function ErrorBoundary({
       {({ reset }) => (
         <ReactErrorBoundary
           key={resetKey ?? location?.pathname}
-          fallbackRender={ErrorFallback}
+          fallbackRender={customFallback ?? ErrorFallback}
           onReset={reset}
         >
           {children}

package/src/components/ErrorBoundary/ErrorFallback.tsx

@@ -14,6 +14,7 @@ import { PermissionsStore } from '../../shared-state'
 import axios from '../../config/axios'
 
 const StyledAlert = styled(Alert)(({ theme }) => ({
+  height: '60px',
   border: `1px solid ${theme.palette.error.main}`,
   display: 'flex',
   alignItems: 'center',
@@ -66,7 +67,7 @@ export default function ErrorFallback({ error, resetErrorBoundary }) {
   }
 
   return (
-    <Box sx={{ marginTop: '16px', padding: '16px' }}>
+    <Box sx={{ marginTop: '16px', padding: '20px' }}>
       <StyledAlert severity="error">
         {error?.response?.data?.message ?? error?.message}
         <Button
@@ -139,7 +140,11 @@ export function InternalServer({ resetBoundary, error }) {
           Internal Server Error.
         </Typography>
         <Typography variant="body1">
-          {error?.response?.data?.message}
+          {error?.response?.data?.message
+            ? typeof error?.response?.data?.message === 'string'
+              ? error?.response?.data?.message
+              : JSON.stringify(error?.response?.data?.message)
+            : 'Internal Server Error'}
         </Typography>
         <Button
           size="small"

package/src/components/FloatingContainer.tsx

@@ -26,7 +26,7 @@ function FloatingContainer({
 }) {
   return (
     <>
-      <StyledFooter show={show ? show : true}>{children}</StyledFooter>
+      <StyledFooter show={show}>{children}</StyledFooter>
     </>
   )
 }