@campxdev/shared 3.1.3 → 3.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "3.1.3",
+  "version": "3.1.5",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/ReactJoyRide.tsx

@@ -1,11 +1,7 @@
-import TourIcon from '@mui/icons-material/Tour'
 import { Box, Button, Typography } from '@mui/material'
-import { ReactNode, useEffect, useState } from 'react'
-import ReactJoyride, { Step, CallBackProps } from 'react-joyride'
-import { useQuery } from 'react-query'
-import axios from '../config/axios'
+import { ReactNode, useState } from 'react'
+import ReactJoyride, { Step } from 'react-joyride'
 import './CustomJoyRideStyles.css'
-import Spinner from './Spinner'
 
 function ReactJoyRide({
   steps,
@@ -17,95 +13,65 @@ function ReactJoyRide({
   tourName: string
 }) {
   const [run, setRun] = useState(false)
-  const [stepIndex, setStepIndex] = useState(0)
-
-  const fetchTours = (params) => {
-    return axios.get(`/square/tours`).then((res) => res.data)
-  }
-
-  const { data: toursData, isLoading: toursLoading } = useQuery(
-    'tours',
-    fetchTours,
-  )
-
-  useEffect(() => {}, [run])
-
-  const completeTour = async () => {
-    try {
-      await axios.post(`/square/tours/complete`, { tourName })
-    } catch (error) {
-      // console.error('Error in Completing Tour:', error)
-    }
-  }
-
-  const handleJoyRideCallback = (data: CallBackProps) => {
-    const { action, status, index } = data
-
-    if (action === 'next' || action === 'prev') {
-      setStepIndex(index + (action === 'next' ? 1 : 0))
-    }
-
-    if (action === 'reset') {
-      setRun(false)
-      setStepIndex(0)
-      completeTour()
-    }
-  }
 
   const customSteps = steps.map((step, index) => ({
-      ...step,
-      title: '', // Remove the automatic title
-      content: (
-        <Box sx={{ fontFamily: 'Roboto, sans-serif',display: 'flex', flexDirection: 'column', }}>
-  
-          <Typography 
-            variant="caption" 
-            sx={{ 
-              color: '#6b7280', 
-              fontWeight: 500,
-              textTransform: 'uppercase',
-              letterSpacing: '0.5px',
-              fontSize: '11px',
+    ...step,
+    title: '', // Remove the automatic title
+    content: (
+      <Box
+        sx={{
+          fontFamily: 'Roboto, sans-serif',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Typography
+          variant="caption"
+          sx={{
+            color: '#6b7280',
+            fontWeight: 500,
+            textTransform: 'uppercase',
+            letterSpacing: '0.5px',
+            fontSize: '11px',
+          }}
+        >
+          Step {index + 1}
+        </Typography>
+        <Box sx={{ padding: '4px 0' }}>
+          <Typography
+            sx={{
+              lineHeight: 1.5,
+              color: '#4b5563',
+              fontFamily: 'Poppins, sans-serif',
+              fontSize: '16px',
+              fontWeight: '600',
+              marginTop: '12px',
             }}
           >
-            Step {index + 1}
+            {step.title}
           </Typography>
-          <Box sx={{ padding: '4px 0' }}>
-            <Typography 
-              sx={{ 
-                lineHeight: 1.5,
-                color: '#4b5563',
-                fontFamily: 'Poppins, sans-serif',
-                fontSize: '16px',
-                fontWeight: '600',
-                marginTop: '12px',
-              }}
-            >
-              {step.title}
-            </Typography>
-          </Box>
-          <Box sx={{ padding: '4px 0' }}>
-            <Typography 
-              sx={{ 
-                fontSize: '14px',
-                lineHeight: 1.5,
-                color: '#4b5563',
-                fontFamily: 'Heebo, sans-serif',
-                fontWeight: '500',
-              }}
-            >
-              {step.content}
-            </Typography>
-          </Box>
         </Box>
-      ),
-    }))
+        <Box sx={{ padding: '4px 0' }}>
+          <Typography
+            sx={{
+              fontSize: '14px',
+              lineHeight: 1.5,
+              color: '#4b5563',
+              fontFamily: 'Heebo, sans-serif',
+              fontWeight: '500',
+            }}
+          >
+            {step.content}
+          </Typography>
+        </Box>
+      </Box>
+    ),
+  }))
 
   return (
     <>
       <Box>
         <ReactJoyride
-          callback={handleJoyRideCallback}
           run={run}
           steps={customSteps}
           styles={{
@@ -119,7 +85,8 @@ function ReactJoyRide({
             },
             tooltip: {
               borderRadius: '12px',
-              boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+              boxShadow:
+                '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
               fontSize: '14px',
               padding: '20px',
               minWidth: '320px',
@@ -132,7 +99,7 @@ function ReactJoyRide({
               fontSize: '16px',
               fontWeight: '600',
               color: '#1f2937',
-     fontFamily: 'Poppins, sans-serif',
+              fontFamily: 'Poppins, sans-serif',
             },
             tooltipContent: {
               fontSize: '14px',
@@ -140,7 +107,7 @@ function ReactJoyRide({
               color: '#4b5563',
               padding: '0',
               fontFamily: 'Heebo, sans-serif !important',
-              fontWeight: '400'
+              fontWeight: '400',
             },
             buttonNext: {
               backgroundColor: '#121212',
@@ -246,7 +213,8 @@ function ReactJoyRide({
             '&:hover': {
               backgroundColor: '#1E027F',
               color: 'white',
-              boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+              boxShadow:
+                '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
               transform: 'translateY(-50%) translateX(-4px)',
             },
             '&:active': {

package/src/components/Selectors/ClassRoomSelector.tsx

@@ -41,6 +41,7 @@ const ClassRoomSelector = (props: ClassRoomSelectorProps) => {
         axios
           .get(api, {
             params: filters,
+            workspace: false,
           })
           .then((response) => {
             setOptions(response.data)
@@ -54,7 +55,9 @@ const ClassRoomSelector = (props: ClassRoomSelectorProps) => {
       }
     } else if (options.length === 0) {
       axios
-        .get(api)
+        .get(api, {
+          workspace: false,
+        })
         .then((response) => {
           setOptions(response.data)
         })

package/src/components/Selectors/CourseSelector.tsx

@@ -29,7 +29,9 @@ export default function CourseSelector(props: CourseSelectorProps) {
   const handleOpen = () => {
     if (options.length === 0) {
       axios
-        .get(api)
+        .get(api, {
+          workspace: false,
+        })
         .then((response) => {
           setOptions(response.data)
         })

package/src/components/Selectors/DepartmentSelector.tsx

@@ -27,7 +27,9 @@ export default function DepartmentSelector(props: DepartmentSelectorProps) {
   const handleOpen = () => {
     if (options.length === 0) {
       axios
-        .get(api)
+        .get(api, {
+          workspace: false,
+        })
         .then((response) => {
           setOptions(response.data.data)
         })

package/src/components/Selectors/ExamGroupSelector.tsx

@@ -43,6 +43,7 @@ const ExamGroupSelector = (props: ExamGroupSelectorProps) => {
               isArchived: 'false',
               isExamPublished: 'true',
             },
+            workspace: false,
           })
           .then((response) => {
             setOptions(
@@ -64,6 +65,7 @@ const ExamGroupSelector = (props: ExamGroupSelectorProps) => {
             isArchived: 'false',
             isExamPublished: 'true',
           },
+          workspace: false,
         })
         .then((response) => {
           setOptions(

package/src/components/Selectors/FacultySelector.tsx

@@ -38,6 +38,7 @@ const FacultySelector = (props: FacultySelectorProps) => {
         axios
           .get(api, {
             params: filters,
+            workspace: false,
           })
           .then((response) => {
             setOptions(response.data.data)

package/src/components/Selectors/FeeTypeSelector.tsx

@@ -19,7 +19,9 @@ export default function FeeTypeSelector(props: FeeTypeSelectorProps) {
   const handleOpen = () => {
     if (options.length === 0) {
       axios
-        .get('/paymentx/fee-types')
+        .get('/paymentx/fee-types', {
+          workspace: false,
+        })
         .then((response) => {
           setOptions(response.data)
         })

package/src/components/Selectors/FormSelectors/MultiSelect/MultiFacultySelector.tsx

@@ -43,6 +43,7 @@ const MultiFacultySelector = (props: MultiFacultySelectorProps) => {
         axios
           .get(api, {
             params: filters,
+            workspace: false,
           })
           .then((response) => {
             setOptions(response.data.data)
@@ -54,7 +55,7 @@ const MultiFacultySelector = (props: MultiFacultySelectorProps) => {
       }
     } else if (options.length === 0) {
       axios
-        .get(api)
+        .get(api, { workspace: false })
         .then((response) => {
           setOptions(response.data.data)
         })

package/src/components/Selectors/FormSelectors/MultiSelect/MultiFeeTypeSelector.tsx

@@ -30,7 +30,7 @@ const MultiFeeTypeSelector = (props: MultiProgramSelectorProps) => {
   const handleOpen = () => {
     if (options.length === 0) {
       axios
-        .get('/paymentx/fee-types')
+        .get('/paymentx/fee-types', { workspace: false })
         .then((response) => {
           setOptions(response.data)
         })

package/src/components/Selectors/FormSelectors/MultiSelect/MultiProgramSelector.tsx

@@ -38,6 +38,7 @@ const MultiProgramSelector = (props: MultiProgramSelectorProps) => {
         axios
           .get(api, {
             params: filters,
+            workspace: false,
           })
           .then((response) => {
             setOptions(response.data)
@@ -49,7 +50,9 @@ const MultiProgramSelector = (props: MultiProgramSelectorProps) => {
       }
     } else if (options.length === 0) {
       axios
-        .get(api)
+        .get(api, {
+          workspace: false,
+        })
         .then((response) => {
           setOptions(response.data)
         })

package/src/components/Selectors/FormSelectors/MultiSelect/MultiQuotaSelector.tsx

@@ -38,6 +38,7 @@ export default function MultiQuotaSelector(props: MultiQuotaSelectorProps) {
         axios
           .get(api, {
             params: filters,
+            workspace: false,
           })
           .then((response) => {
             setOptions(
@@ -51,7 +52,9 @@ export default function MultiQuotaSelector(props: MultiQuotaSelectorProps) {
       }
     } else if (options.length === 0) {
       axios
-        .get(api)
+        .get(api, {
+          workspace: false,
+        })
         .then((response) => {
           setOptions(
             api == '/square/quotas' ? response.data : response.data.quota,

package/src/components/Selectors/ProgramSelector.tsx

@@ -35,6 +35,7 @@ const ProgramSelector = (props: ProgramSelectorProps) => {
         axios
           .get(api, {
             params: filters,
+            workspace: false,
           })
           .then((response) => {
             setOptions(response.data)
@@ -46,7 +47,9 @@ const ProgramSelector = (props: ProgramSelectorProps) => {
       }
     } else if (options.length === 0) {
       axios
-        .get(api)
+        .get(api, {
+          workspace: false,
+        })
         .then((response) => {
           setOptions(response.data)
         })

package/src/components/Selectors/QuotaSelector.tsx

@@ -33,6 +33,7 @@ export default function QuotaSelector(props: QuotaSelectorProps) {
         axios
           .get(api, {
             params: filters,
+            workspace: false,
           })
           .then((response) => {
             setOptions(
@@ -46,7 +47,9 @@ export default function QuotaSelector(props: QuotaSelectorProps) {
       }
     } else if (options.length === 0) {
       axios
-        .get(api)
+        .get(api, {
+          workspace: false,
+        })
         .then((response) => {
           setOptions(
             api == '/square/quotas' ? response.data : response.data.quota,

package/src/components/Selectors/SemesterSelector.tsx

@@ -33,6 +33,7 @@ const SemesterSelector = (props: SemesterSelectorProps) => {
         axios
           .get(api, {
             params: filters,
+            workspace: false,
           })
           .then((response) => {
             setOptions(response.data)
@@ -44,7 +45,9 @@ const SemesterSelector = (props: SemesterSelectorProps) => {
       }
     } else if (options.length === 0) {
       axios
-        .get(api)
+        .get(api, {
+          workspace: false,
+        })
         .then((response) => {
           setOptions(response.data)
         })

package/src/config/axios.ts

@@ -3,14 +3,30 @@ import Cookies from 'js-cookie'
 import { toast } from 'react-toastify'
 import { NetworkStore } from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
 
-const isDevelopment = process.env.NODE_ENV == 'development'
+// Declare the extended axios types to include our custom property
+declare module 'axios' {
+  export interface AxiosRequestConfig {
+    workspace?: boolean
+  }
+}
+
+export const isDevelopment = window.location.hostname.includes('localhost')
 
-const tenantCode =
-  isDevelopment || window.location.hostname === 'localhost'
-    ? Cookies.get('campx_tenant')
-    : window.location.hostname.split('.')[0]
+const tenantCode = window.location.hostname.split('.')[0]
 const institutionCode = window.location.pathname.split('/')[1]
 
+// Workspace to API endpoint prefix mapping
+const workspaceApiMapping: Record<string, string> = {
+  'student-workspace': '/student-api',
+  'faculty-workspace': '/faculty-api',
+  'department-workspace': '/department-api',
+  'academic-coordinator-workspace': '/academic-coordinator-api',
+  'academic-admin-workspace': '/academic-admin-api',
+  'hostel-admin-workspace': '/hostel-admin-api',
+  'transport-coordinator-workspace': '/transport-coordinator-api',
+  'employee-workspace': '/employee-api',
+}
+
 export const formatParams = (params) => {
   return Object.fromEntries(
     Object.entries(params ?? {})?.map((i) => [
@@ -35,6 +51,26 @@ axios.interceptors.request.use(
     NetworkStore.update((s) => {
       s.loading = true
     })
+
+    // Handle workspace routing (default: true)
+    if (
+      config.workspace !== false &&
+      window.location.pathname.split('/')[2] &&
+      window.location.pathname.split('/')[2] !== 'common-workspace' &&
+      workspaceApiMapping[window.location.pathname.split('/')[2]]
+    ) {
+      const workspacePrefix =
+        workspaceApiMapping[window.location.pathname.split('/')[2]]
+      if (
+        workspacePrefix &&
+        typeof workspacePrefix === 'string' &&
+        workspacePrefix.trim()
+      ) {
+        config.url = `${workspacePrefix}${config.url}`
+      }
+    }
+
+    // Add session keys from cookies if available
     const sessionKey = Cookies.get('campx_session_key')
     const openPaymentsKey = Cookies.get('campx_open_payments_key')
 
@@ -73,6 +109,7 @@ axios.interceptors.response.use(
 
     // Check if the error is an unauthorized error (401)
     if (err?.response && err?.response?.status === 401) {
+      // Clear session keys from cookies on unauthorized error
       Cookies.remove('campx_session_key')
       Cookies.remove('campx_tenant')
       Cookies.remove('campx_institution')

package/src/contexts/Providers.tsx

@@ -3,7 +3,6 @@ import ConfirmContextProvider from '../components/PopupConfirm/ConfirmContextPro
 import MuiThemeProvider from '../theme/MuiThemeProvider'
 import QueryClientProvider from './QueryClientProvider'
 
-import Cookies from 'js-cookie'
 import { ReactNode, useEffect } from 'react'
 import { ToastContainer } from '../components'
 import DialogProvider from '../components/DrawerWrapper/DrawerWrapper'
@@ -11,41 +10,19 @@ import GlobalNetworkLoadingIndicator from '../components/ErrorBoundary/GlobalNet
 import ErrorModalProvider from '../components/ErrorModalWrapper/ErrorModalWrapper'
 import RootModal from './RootModal'
 
-const isDevelopment = process.env.NODE_ENV == 'development'
+const isDevelopment = window.location.hostname.includes('localhost')
 
-export const campxTenantKey = isDevelopment
-  ? Cookies.get('campx_tenant')
-  : window.location.hostname.split('.')[0]
-export const urlTenantKey = isDevelopment
-  ? Cookies.get('campx_tenant')
-  : window.location.hostname.split('.')[0]
-export const instituitionKey =
-  window.location.pathname.split('/')[1] != ''
-    ? window.location.pathname.split('/')[1]
-    : Cookies.get('campx_institution')
+export const campxTenantKey = window.location.hostname.split('.')[0]
+export const urlTenantKey = window.location.hostname.split('.')[0]
+export const instituitionKey = window.location.pathname.split('/')[1]
 
 export default function Providers({ children }: { children: ReactNode }) {
   var baseName = '/'
-  var tenantCode
-  var institutionCode =
-    window.location.pathname.split('/')[1] != ''
-      ? window.location.pathname.split('/')[1]
-      : Cookies.get('campx_institution')
+  var tenantCode = window.location.hostname.split('.')[0]
+  var institutionCode = window.location.pathname.split('/')[1]
 
-  if (isDevelopment) {
-    tenantCode = Cookies.get('campx_tenant')
-    if (
-      tenantCode &&
-      institutionCode &&
-      window.location.pathname !== '/auth/login'
-    ) {
-      baseName = `/${institutionCode}`
-    }
-  } else {
-    tenantCode = window.location.hostname.split('.')[0]
-    if (institutionCode && window.location.pathname !== '/auth/login') {
-      baseName = `/${institutionCode}`
-    }
+  if (institutionCode && window.location.pathname !== '/auth/login') {
+    baseName = `/${institutionCode}`
   }
 
   useEffect(() => {

package/src/hooks/useAuth.ts

@@ -104,7 +104,7 @@ const useAuth = ({
 
   const appInit = async () => {
     try {
-      const res = await axios.get(permissionsEndpoint)
+      const res = await axios.get(permissionsEndpoint, { workspace: false })
       const isAdmin = checkIsAdmin(res.data.user)
       setLoading(false)
       setData(res.data)