@campxdev/shared 3.1.7 → 3.1.9

package/package.json

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

package/src/components/ActivityLog/ActivityLog.tsx

@@ -1,24 +1,40 @@
+import RefreshIcon from '@mui/icons-material/Refresh'
 import {
   Timeline,
+  TimelineConnector,
   TimelineContent,
   TimelineItem,
   TimelineSeparator,
 } from '@mui/lab'
-import { Box, SxProps, Typography } from '@mui/material'
+import {
+  Box,
+  CircularProgress,
+  IconButton,
+  SxProps,
+  Typography,
+} from '@mui/material'
 import moment from 'moment'
-import { useCallback, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { useInfiniteQuery } from 'react-query'
 import { NoDataIllustration } from '..'
 import axios from '../../config/axios'
 import { useErrorModal } from '../ErrorModalWrapper/ErrorModalWrapper'
 import Spinner from '../Spinner'
 import Table from '../Tables/BasicTable/Table'
-import {
-  StyledAvatar,
-  StyledCircleIcon,
-  StyledSpinnerBox,
-  StyledTimeLineDot,
-} from './Styles'
+import { StyledAvatar, StyledCircleIcon, StyledTimeLineDot } from './Styles'
+
+interface ActivityLogItem {
+  timestamp: string
+  message: string
+  userName: string
+  action: string
+  typeId: number
+  type: string
+  tenantId: string
+  institutionId: number
+  userId: string
+  cursor: string
+}
 
 interface Props {
   endPoint: string
@@ -26,6 +42,7 @@ interface Props {
   enableTitle?: boolean
   params: any
   sx?: SxProps
+  reloadKey?: string | number
 }
 
 export default function ActivityLog({
@@ -34,31 +51,64 @@ export default function ActivityLog({
   enableTitle,
   params,
   sx,
+  reloadKey,
 }: Props) {
   const errorModal = useErrorModal()
-  const fetchActivities = async ({ pageParam = 0 }) => {
+  const timestamp = useRef(Date.now())
+  const queryKey = [
+    'activities',
+    endPoint,
+    JSON.stringify(params),
+    reloadKey ?? timestamp.current,
+  ]
+
+  const fetchActivities = async ({ pageParam = null }) => {
     try {
-      const response = await axios.get(endPoint, { params: { ...params } })
-      return response?.data
+      const queryParams = { ...params }
+      if (pageParam) {
+        queryParams.cursor = pageParam
+      }
+      const response = await axios.get(endPoint, { params: queryParams })
+      return response?.data || []
     } catch (error) {
       // eslint-disable-next-line no-console
-      console.log(error)
+      console.error('Error fetching activities:', error)
       errorModal({ error: error })
+      return []
     }
   }
 
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
-    useInfiniteQuery('activities', fetchActivities, {
-      getNextPageParam: (lastPage) => {
-        return lastPage?.length ? lastPage[lastPage?.length - 1].id : null
-      },
-    })
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    refetch,
+  } = useInfiniteQuery(queryKey, fetchActivities, {
+    getNextPageParam: (lastPage: ActivityLogItem[]) => {
+      return lastPage?.length ? lastPage[lastPage.length - 1].cursor : null
+    },
+    refetchOnWindowFocus: false,
+    cacheTime: 0,
+  })
 
-  const activitesData = data ? data?.pages?.flatMap((page) => page) : []
+  const activitiesData = data?.pages?.flatMap((page) => page) || []
 
-  if (isLoading) return <Spinner />
+  if (isLoading) {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        minHeight="200px"
+      >
+        <Spinner />
+      </Box>
+    )
+  }
 
-  if (data?.pages?.length === 0 || !activitesData?.length) {
+  if (!activitiesData?.length) {
     return (
       <NoDataIllustration
         imageSrc=""
@@ -67,7 +117,7 @@ export default function ActivityLog({
             variant="h6"
             style={{ textAlign: 'center', marginTop: '20px' }}
           >
-            {'No data found'}
+            No activity logs found
           </Typography>
         }
       />
@@ -77,37 +127,40 @@ export default function ActivityLog({
   return (
     <Box>
       {enableTitle && (
-        <Typography
-          variant="h1"
-          sx={{ fontSize: '18px', fontWeight: 700, margin: '20px' }}
-        >
-          Activity Log
-        </Typography>
-      )}
-
-      {!tableView ? (
         <Box
           sx={{
-            overflowY: 'scroll',
-            '&::-webkit-scrollbar': {
-              display: 'none',
-            },
-            height: '380px',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            margin: '20px',
           }}
         >
-          <TimeLineComponent
-            activitesData={activitesData}
-            fetchNextPage={fetchNextPage}
-            isFetchingNextPage={isFetchingNextPage}
-            hasNextPage={hasNextPage}
-            sx={sx}
-          />
+          <Typography variant="h1" sx={{ fontSize: '18px', fontWeight: 700 }}>
+            Activity Logs
+          </Typography>
+          <IconButton
+            size="small"
+            onClick={() => refetch()}
+            sx={{ '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.04)' } }}
+          >
+            <RefreshIcon fontSize="small" />
+          </IconButton>
         </Box>
+      )}
+
+      {!tableView ? (
+        <TimeLineComponent
+          activitiesData={activitiesData}
+          fetchNextPage={fetchNextPage}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+          sx={sx}
+        />
       ) : (
         <Box sx={{ margin: '0 25px' }}>
           <Table
-            columns={columns}
-            dataSource={activitesData}
+            columns={tableColumns}
+            dataSource={activitiesData}
             loading={isLoading}
           />
         </Box>
@@ -116,12 +169,13 @@ export default function ActivityLog({
   )
 }
 
-const columns = [
+// Table columns for table view
+const tableColumns = [
   {
     title: 'Date',
     dataIndex: 'timestamp',
     key: 'timestamp',
-    render: (timestamp) =>
+    render: (timestamp: string) =>
       moment.utc(timestamp)?.local().format('DD MMM YYYY - hh:mm A'),
   },
   {
@@ -138,131 +192,165 @@ const columns = [
     title: 'Message',
     dataIndex: 'message',
     key: 'message',
-    render: (message) => (
+    render: (message: string) => (
       <Typography sx={{ fontSize: '16px' }} variant="subtitle1">
-        {message?.split("'")?.map((text: string, index: number) =>
-          index % 2 === 0 ? (
-            <span key={index}>{text}</span>
-          ) : (
-            <Typography key={index} sx={{ display: 'inline', fontWeight: 900 }}>
-              {text}
-            </Typography>
-          ),
-        )}
+        {renderMessageWithBold(message)}
       </Typography>
     ),
   },
 ]
 
-export const TimeLineComponent = ({
-  activitesData,
-  isFetchingNextPage,
-  hasNextPage,
+// Helper: Render message with bold text (text within single quotes)
+const renderMessageWithBold = (message: string) => {
+  return message?.split("'")?.map((text: string, index: number) =>
+    index % 2 === 0 ? (
+      <span key={index}>{text}</span>
+    ) : (
+      <Typography key={index} component="span" sx={{ fontWeight: 900 }}>
+        {text}
+      </Typography>
+    ),
+  )
+}
+
+// Timeline Component with Infinite Scroll
+interface TimeLineComponentProps {
+  activitiesData: ActivityLogItem[]
+  fetchNextPage: () => void
+  hasNextPage: boolean | undefined
+  isFetchingNextPage: boolean
+  sx?: SxProps
+}
+
+const TimeLineComponent = ({
+  activitiesData,
   fetchNextPage,
+  hasNextPage,
+  isFetchingNextPage,
   sx,
-}) => {
-  const lastItemRef = useIntersectionObserver<HTMLDivElement>(() => {
-    if (!isFetchingNextPage && hasNextPage) fetchNextPage()
-  })
+}: TimeLineComponentProps) => {
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const loadMoreTriggerRef = useRef<HTMLDivElement>(null)
+
+  // Intersection observer for infinite scroll
+  useEffect(() => {
+    const trigger = loadMoreTriggerRef.current
+    const container = scrollContainerRef.current
+
+    if (!trigger || !container) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries
+        if (entry.isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage()
+        }
+      },
+      {
+        root: container,
+        rootMargin: '100px',
+        threshold: 0.1,
+      },
+    )
+
+    observer.observe(trigger)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage])
 
   return (
-    <Timeline sx={{ padding: 0, margin: 0 }}>
-      {activitesData?.map((item, index, items) => (
-        <Box
-          key={index}
-          ref={items.length - 1 === index ? lastItemRef : null}
-          sx={{ maxWidth: '550px', ...sx }}
-        >
-          <TimelineItem
-            sx={{
-              margin: 2,
-              padding: 0,
-              '&:before': { display: 'none' },
-            }}
+    <Box
+      ref={scrollContainerRef}
+      sx={{
+        overflowY: 'auto',
+        maxHeight: '600px',
+        '&::-webkit-scrollbar': {
+          display: 'none',
+        },
+      }}
+    >
+      <Timeline sx={{ padding: 0, margin: 0 }}>
+        {activitiesData.map((item, index) => (
+          <Box
+            key={`${item.cursor}-${index}`}
+            ref={
+              activitiesData.length - 1 === index ? loadMoreTriggerRef : null
+            }
+            sx={{ maxWidth: '550px', ...sx }}
           >
-            <TimelineSeparator>
-              <StyledTimeLineDot>
-                <StyledCircleIcon />
-              </StyledTimeLineDot>
-              {index < activitesData?.length - 1 && (
-                <Box
-                  sx={{
-                    width: '1px',
-                    height: '115%',
-                    bgcolor: '#12121233',
-                    position: 'absolute',
-                    top: '25px',
-                  }}
-                />
-              )}
-            </TimelineSeparator>
-            <TimelineContent sx={{ padding: '6px 8px' }}>
-              <Box>
-                <Typography variant="subtitle2" sx={{ fontSize: '14px' }}>
-                  {moment
-                    .utc(item?.timestamp)
-                    .local()
-                    .format('DD MMM YYYY - hh:mm A')}
-                </Typography>
-                <Typography sx={{ fontSize: '16px' }} variant="subtitle1">
-                  {item?.message
-                    ?.split("'")
-                    ?.map((text: string, index: number) =>
-                      index % 2 === 0 ? (
-                        <span key={index}>{text}</span>
-                      ) : (
-                        <Typography
-                          key={index}
-                          sx={{ display: 'inline', fontWeight: 900 }}
-                        >
-                          {text}
-                        </Typography>
-                      ),
-                    )}
-                </Typography>
-                <Typography
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    marginTop: '8px',
-                  }}
-                >
-                  <StyledAvatar>
-                    {item?.userName?.charAt(0)?.toUpperCase()}
-                  </StyledAvatar>
-                  <Typography sx={{ fontSize: '13px', fontWeight: 900 }}>
-                    {item?.userName}
+            <TimelineItem
+              sx={{
+                margin: 2,
+                padding: 0,
+                '&:before': { display: 'none' },
+              }}
+            >
+              <TimelineSeparator>
+                <StyledTimeLineDot>
+                  <StyledCircleIcon />
+                </StyledTimeLineDot>
+                {index < activitiesData.length - 1 && (
+                  <Box
+                    sx={{
+                      width: '1px',
+                      height: '115%',
+                      bgcolor: '#12121233',
+                      position: 'absolute',
+                      top: '25px',
+                    }}
+                  />
+                )}
+              </TimelineSeparator>
+              <TimelineContent sx={{ padding: '6px 8px' }}>
+                <Box>
+                  <Typography variant="subtitle2" sx={{ fontSize: '14px' }}>
+                    {moment
+                      .utc(item.timestamp)
+                      .local()
+                      .format('DD MMM YYYY - hh:mm A')}
                   </Typography>
-                </Typography>
-              </Box>
-            </TimelineContent>
-          </TimelineItem>
-          {isFetchingNextPage && index === items?.length - 1 && hasNextPage && (
-            <StyledSpinnerBox>
-              <Spinner />
-            </StyledSpinnerBox>
-          )}
-        </Box>
-      ))}
-    </Timeline>
-  )
-}
-
-function useIntersectionObserver<T extends HTMLDivElement>(
-  callback: () => void,
-) {
-  const observer = useRef<IntersectionObserver | null>(null)
+                  <Typography sx={{ fontSize: '16px' }} variant="subtitle1">
+                    {item.message?.split('\n')?.map((line: string, lineIdx: number) => (
+                      <Box key={lineIdx} component="div">
+                        {renderMessageWithBold(line)}
+                      </Box>
+                    ))}
+                  </Typography>
+                  <Typography
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      marginTop: '8px',
+                    }}
+                  >
+                    <StyledAvatar>
+                      {item.userName?.charAt(0)?.toUpperCase()}
+                    </StyledAvatar>
+                    <Typography sx={{ fontSize: '13px', fontWeight: 900 }}>
+                      {item.userName}
+                    </Typography>
+                  </Typography>
+                </Box>
+              </TimelineContent>
+            </TimelineItem>
+          </Box>
+        ))}
+      </Timeline>
 
-  const handleObserver = useCallback(
-    (node: T) => {
-      if (observer?.current) observer?.current?.disconnect()
-      observer.current = new IntersectionObserver((entries) => {
-        if (entries[0]?.isIntersecting) callback()
-      })
-      if (node) observer?.current?.observe(node)
-    },
-    [callback],
+      {/* Loading indicator */}
+      {isFetchingNextPage && (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            padding: 2,
+          }}
+        >
+          <CircularProgress size={20} />
+        </Box>
+      )}
+    </Box>
   )
-
-  return handleObserver
 }

package/src/config/axios.ts

@@ -25,6 +25,7 @@ const workspaceApiMapping: Record<string, string> = {
   'hostel-admin-workspace': '/hostel-admin-api',
   'transport-coordinator-workspace': '/transport-coordinator-api',
   'employee-workspace': '/employee-api',
+  'librarian-workspace': '/librarian-api',
 }
 
 export const formatParams = (params) => {