@campxdev/shared 1.11.6 → 1.11.7-0.alpha-22

package/src/components/UploadFileDialog/UploadFileDialog.tsx

@@ -14,9 +14,12 @@ import {
 } from '@mui/material'
 import { ReactNode, useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
-import axios, { axiosErrorToast } from '../../config/axios'
+import axios from '../../config/axios'
 import { buffertoCSV } from '../../utils'
+import { useErrorModal } from '../ErrorModalWrapper/ErrorModalWrapper'
 import { DeleteButton, EditButton } from '../IconButtons'
+import { getAccept } from '../UploadButton/UploadButton'
+import { UploadButtonProps } from '../UploadButton/types'
 const animatedImage = require('./AnimatedUploadFile.gif')
 
 const StyledDialogHeader = styled(Box)(({ theme }) => ({
@@ -79,8 +82,10 @@ interface UploadFileDialogProps {
   sampleFileDownloadUrl?: string
   uploadUrl: string
   successMessage?: string
-  refetchFn: () => void
-  postBody?: { [key: string]: string }
+  refetchFn?: (res: any) => void
+  onUpload?: () => void
+  postBody?: { [key: string]: string | any }
+  type?: UploadButtonProps['type']
 }
 
 export default function UploadFileDialog({
@@ -94,10 +99,12 @@ export default function UploadFileDialog({
   refetchFn,
   sampleFileDownloadUrl,
   postBody = {},
+  onUpload,
+  type = 'excel',
 }: UploadFileDialogProps) {
   const inputRef: any = useRef(null)
   const [loading, setLoading] = useState(false)
-
+  const errorModal = useErrorModal()
   const [file, setFile] = useState(null)
   const [open, setOpen] = useState(false)
   const onClose = () => {
@@ -114,6 +121,7 @@ export default function UploadFileDialog({
   }
 
   const handleOnUpload = () => {
+    onUpload && onUpload()
     if (!file) return ``
     const formData = new FormData()
     formData.append('file', file)
@@ -128,25 +136,27 @@ export default function UploadFileDialog({
       .post(uploadUrl, formData)
       .then((res) => {
         setLoading(false)
-        refetchFn()
+        refetchFn && refetchFn(res)
         setOpen(false)
         toast.success(successMessage ?? 'Successful')
         setFile(null)
       })
       .catch((err) => {
+        // eslint-disable-next-line no-console
         console.log(err)
         setLoading(false)
-        axiosErrorToast(err)
+        // axiosErrorToast(err)
+        errorModal({ error: err })
       })
   }
 
   const handleSampleFileDownload = async () => {
     try {
       const res = await axios.get(sampleFileDownloadUrl)
-
       buffertoCSV({ data: res.data, filename: `${dialogTitle}` })
     } catch (error) {
-      axiosErrorToast(error)
+      errorModal({ error: error })
+      // axiosErrorToast(error)
     }
   }
 
@@ -194,7 +204,8 @@ export default function UploadFileDialog({
                 <input
                   onChange={handleImageChange}
                   hidden
-                  type="file"
+                  accept={getAccept(type)}
+                  type={'file'}
                   ref={inputRef}
                 />
                 <StyledChooseFileButton

package/src/components/index.ts

@@ -1,3 +1,4 @@
+import ActivityLog from './ActivityLog'
 import ApplicationProfile from './ApplicationProfile'
 import ChangePassword from './ChangePassword'
 import Chips from './Chips'
@@ -27,6 +28,7 @@ import { DialogButton, DrawerButton } from './ModalButtons'
 import { CustomDialog } from './ModalButtons/DialogButton'
 import { CustomDrawer } from './ModalButtons/DrawerButton'
 import PopoverButton from './ModalButtons/PopoverButton'
+import MongoDashboard from './MongoCharts'
 import PageNotFound from './PageNotFound'
 import ReactJoyRide from './ReactJoyRide'
 import ResetPassword from './ResetPassword'
@@ -60,6 +62,7 @@ export { default as PageHeader } from './PageHeader'
 export { default as useConfirm } from './PopupConfirm/useConfirm'
 export { default as ReportHeader } from './ReportHeader'
 export { default as ReportPageHeader } from './ReportPageHeader'
+export { default as SignatureFooter } from './SignatureFooter'
 export { default as Spinner } from './Spinner'
 export { default as PaymentStepper } from './Stepper'
 export { default as SwitchButton } from './SwitchButton'
@@ -70,6 +73,7 @@ export { default as ReactTable } from './Tables/ReactTable'
 export { default as Tabs } from './Tabs/Tabs'
 export { default as ToastContainer } from './ToastContainer'
 export {
+  ActivityLog,
   AppHeader,
   ApplicationProfile,
   AsyncSearchSelect,
@@ -94,6 +98,7 @@ export {
   LayoutWrapper,
   ListItemButton,
   LoginForm,
+  MongoDashboard,
   NavigationTabs,
   PageNotFound,
   PopoverButton,

package/src/config/axios.ts

@@ -2,12 +2,12 @@ import Axios, { AxiosRequestConfig } from 'axios'
 import Cookies from 'js-cookie'
 import { toast } from 'react-toastify'
 import { NetworkStore } from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
-import { isDevelopment, isSetup } from '../constants'
-import { InstitutionsStore } from '../shared-state/InstitutionsStore'
 
 const sessionKey = Cookies.get('campx_session_key')
-const clientId = window.location.pathname.split('/')[1] ?? 'campx_dev'
-const institutionId = window.location.pathname.split('/')[2] ?? 'campx_dev'
+const tenantId =
+  Cookies.get('campx_tenant') ?? window.location.hostname.split('.')[0]
+const institutionId =
+  Cookies.get('campx_institution') ?? window.location.pathname.split('/')[1]
 const openPaymentsKey = Cookies.get('campx_open_payments_key')
 
 export const formatParams = (params) => {
@@ -23,26 +23,12 @@ let axios = Axios.create({
   baseURL: process.env.REACT_APP_API_HOST,
   withCredentials: true,
   headers: {
-    'x-tenant-id': clientId,
-    ...((isDevelopment || isSetup) && sessionKey
-      ? { campx_session_key: sessionKey }
-      : {}),
-
-    ...(openPaymentsKey && {
-      campx_open_payments_key: openPaymentsKey,
-    }),
+    'x-tenant-id': tenantId,
   },
 })
 
 axios.interceptors.request.use(
   function (config: AxiosRequestConfig) {
-    const { current } = InstitutionsStore.getRawState()
-    if (current) {
-      config.headers['x-institution-code'] = current.code
-    } else {
-      config.headers['x-institution-code'] = institutionId
-    }
-
     const params = formatParams(config?.params)
     NetworkStore.update((s) => {
       s.loading = true

package/src/constants/UIConstants.ts

@@ -1,6 +1,18 @@
+import { ReactNode } from 'react'
+
 export const batchOptions = Array.from({ length: 12 }, (_, i) => {
-  return `${2012 + i} - ${2012 + i + 1}`
-}).reverse()
+  return `${new Date().getFullYear() - i} - ${new Date().getFullYear() - i + 1}`
+})
+
+export const getYears = () => {
+  const start = 2019
+  const end = new Date().getFullYear() + 3
+  const values = new Array(end - start).fill(0).map((_, i) => ({
+    label: `${start + i}`,
+    value: `${start + i}`,
+  }))
+  return values.reverse()
+}
 
 export const examGroupBatches = Array.from({ length: 10 }, (_, i) => {
   return `${2012 + i} - ${2012 + i + 1}`
@@ -125,4 +137,55 @@ export const ProfileApplicationType = [
     label: 'PeopleX',
     value: 'hrms',
   },
+  {
+    label: 'AdminX',
+    value: 'admin',
+  },
 ]
+
+export interface Option {
+  label: string | ReactNode
+  value: any
+}
+
+export interface GenerateLabelValueProps {
+  labelKey?: string
+  valueKey?: string
+  useIndexAsValue?: boolean
+  startFromOne?: boolean
+  showAll?: boolean
+}
+
+export const generateLabelValueOptions = (
+  options: any[],
+  {
+    labelKey,
+    valueKey,
+    useIndexAsValue,
+    startFromOne,
+    showAll,
+  }: GenerateLabelValueProps = {
+    labelKey: null,
+    valueKey: null,
+    useIndexAsValue: false,
+    startFromOne: false,
+    showAll: false,
+  },
+): Option[] => {
+  let result
+  if (labelKey == null) {
+    result = options.map((option, index) => ({
+      label: option[0].toUpperCase() + option.slice(1),
+      value: useIndexAsValue ? (startFromOne ? index + 1 : index) : option,
+    }))
+  } else {
+    result = options.map((option) => ({
+      label: option[labelKey],
+      value: option[valueKey],
+    }))
+  }
+  if (showAll) {
+    result.unshift({ label: 'All', value: 'all' })
+  }
+  return result
+}

package/src/constants/isDevelopment.ts

@@ -1,4 +1,3 @@
-const urlTenantKey = window.location.pathname.split('/')[1]
 export const isDevelopment =
   process.env.NODE_ENV === 'development' ||
   window.location.origin.split('campx')[1] === '.dev'

package/src/contexts/Providers.tsx

@@ -4,63 +4,25 @@ import MuiThemeProvider from '../theme/MuiThemeProvider'
 import QueryClientProvider from './QueryClientProvider'
 
 import Cookies from 'js-cookie'
-import { ReactNode, useEffect } from 'react'
+import { ReactNode } from 'react'
 import { ToastContainer } from '../components'
 import DialogProvider from '../components/DrawerWrapper/DrawerWrapper'
 import GlobalNetworkLoadingIndicator from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
-import FreshChatButton from '../components/Layout/Header/HeaderActions/FreshChatButton'
+import ErrorModalProvider from '../components/ErrorModalWrapper/ErrorModalWrapper'
 import RootModal from './RootModal'
-import { isDevelopment } from '../constants'
 
 export const campxTenantKey = Cookies.get('campx_tenant')
-export const urlTenantKey = window.location.pathname.split('/')[1]
+export const urlTenantKey = Cookies.get('campx_tenant')
 export const instituitionKey = window.location.pathname.split('/')[2]
 
 export default function Providers({ children }: { children: ReactNode }) {
-  const localInstituitionKey = localStorage.getItem('institution_key')
-
-  const getInstituitionKey = () => {
-    if (instituitionKey) {
-      return instituitionKey
-    } else {
-      if (!urlTenantKey) return null
-      if (localInstituitionKey) {
-        return localInstituitionKey
-      } else {
-        return null
-      }
-    }
-  }
-
-  useEffect(() => {
-    if (!urlTenantKey) {
-      if (isDevelopment) {
-        window.location.replace(window.location.origin + `/aupulse`)
-      }
-      if (campxTenantKey)
-        window.location.replace(window.location.origin + `/${campxTenantKey}`)
-    } else {
-      if (!instituitionKey) {
-        if (localInstituitionKey) {
-          window.location.replace(
-            window.location.origin + `/${urlTenantKey}/${localInstituitionKey}`,
-          )
-        }
-      }
-    }
-  }, [])
-
-  const baseName = getInstituitionKey()
-    ? `${urlTenantKey}/${getInstituitionKey()}`
-    : urlTenantKey
-
   return (
-    <BrowserRouter basename={baseName}>
+    <BrowserRouter>
       <QueryClientProvider>
         <MuiThemeProvider>
           <ConfirmContextProvider>
             <DialogProvider>
-              {children}
+              <ErrorModalProvider>{children}</ErrorModalProvider>
               <GlobalNetworkLoadingIndicator />
               <RootModal />
               <ToastContainer />

package/src/hooks/useAuth.ts

@@ -26,10 +26,12 @@ type AuthResponse = {
       logo: string
       logo_square: string
     }
+    isHomePageEnabled?: boolean
   }
 }
 
 const ApplicationObj = {
+  admin: 'admin',
   enroll: 'enroll_x',
   ums: 'square',
   payments: 'payments',
@@ -231,6 +233,11 @@ function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
           s.institutionType = res.data?.institutionType
           s.masterInstitutionUniqueId = res.data?.masterInstitutionUniqueId
           s.masterInstitutionId = res.data?.masterInstitutionId
+          s.isMasterInstitutionUser = res.data?.institutions
+            ?.map((institution) => institution?.id)
+            ?.includes(res?.data?.masterInstitutionUniqueId)
+          s.isMasterInstitution = res.data?.isMasterInstitution
+          s.isHomePageEnabled = res.data?.isHomePageEnabled
         })
         AssetsStore.update((s) => {
           s.logo = res.data?.assets.logo

package/src/layouts/Components/styles.tsx

@@ -1,5 +1,5 @@
-import styled from 'styled-components'
 import { styled as muiStyled } from '@mui/material'
+import styled from 'styled-components'
 
 export const headerHeight = '64px'
 export const sideNavWidth = '220px'
@@ -51,24 +51,42 @@ export const StyledLeftNavContainer = muiStyled('aside')(({ theme }) => ({
 }))
 
 export const StyledMainContentContainer = muiStyled('main')(() => ({
-  width: `calc(100% - ${sideNavWidth})`,
+  width:
+    window.innerWidth > 1024
+      ? `calc(100% - ${sideNavWidth})`
+      : '100% !important',
   height: `calc(100vh - ${headerHeight})`,
   position: 'fixed',
   top: headerHeight,
-  left: sideNavWidth,
+  left: window.innerWidth > 1024 ? sideNavWidth : 0,
+  right: window.innerWidth > 1024 ? 'unset' : 0,
+  bottom: window.innerWidth > 1024 ? 'unset' : 0,
   overflowY: 'auto',
 
   '&::-webkit-scrollbar': {
-    width: '0.6em',
-    height: '0.6em',
+    width: '0.4em',
+    height: '0.4em',
   },
 
   '&::-webkit-scrollbar-thumb': {
-    backgroundColor: 'rgba(0,0,0, 0.3)',
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
     borderRadius: '3px',
-
     '&:hover': {
       background: 'rgba(0,0,0, 0.4)',
     },
   },
+
+  // '&::-webkit-scrollbar': {
+  //   width: '0.6em',
+  //   height: '0.6em',
+  // },
+
+  // '&::-webkit-scrollbar-thumb': {
+  //   backgroundColor: 'rgba(0,0,0, 0.3)',
+  //   borderRadius: '3px',
+
+  //   '&:hover': {
+  //     background: 'rgba(0,0,0, 0.4)',
+  //   },
+  // },
 }))