@campxdev/react-blueprint 1.6.4 → 1.6.6

package/.storybook/preview.tsx

@@ -4,9 +4,8 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import { useDarkMode } from 'storybook-dark-mode';
-import { store } from '../src/redux/export';
+import { store } from '../src/redux/store';
 import { MuiThemeProvider } from '../src/themes/MuiThemeProvider';
-
 import { DarkColorTokens } from '../src/themes/colorTokens/darkColorTokens';
 import { LightColorTokens } from '../src/themes/colorTokens/lightColorTokens';
 import { darkTheme } from '../src/themes/darkTheme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/App.tsx

@@ -1,6 +1,7 @@
-import { Stack } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 import './App.css';
-import { Timeline, Typography } from './components/export';
+import { ActivityLogView } from './components/export';
 
 interface RowType {
   lastName: string;
@@ -17,50 +18,74 @@ function App() {
         paddingLeft: '16px',
       }}
     >
-      <Timeline
-        position="left"
-        timelineItems={[
-          {
-            timelineContent: (
-              <Stack>
-                <Typography>Requirement Gathering</Typography>
-              </Stack>
-            ),
-            variant: 'info',
-          },
-          {
-            timelineContent: (
-              <Stack>
-                <Typography>Requirement Gathering</Typography>
-              </Stack>
-            ),
-            variant: 'warning',
-          },
-          {
-            timelineContent: (
-              <Stack>
-                <Typography>Requirement Gathering</Typography>
-              </Stack>
-            ),
-            variant: 'success',
-          },
-          {
-            timelineContent: (
-              <Stack>
-                <Typography>Requirement Gathering</Typography>
-              </Stack>
-            ),
-          },
-          {
-            timelineContent: (
-              <Stack>
-                <Typography>Requirement Gathering</Typography>
-              </Stack>
-            ),
-            variant: 'error',
-          },
-        ]}
-      />
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <ActivityLogView
+          activitiesData={[
+            {
+              userName: 'ss',
+              action: 'create',
+              message: 's',
+              timestamp: new Date().toISOString(),
+            },
+            {
+              userName: 'ss',
+              action: 'update',
+              message: 's',
+              timestamp: new Date().toISOString(),
+            },
+            {
+              userName: 'ss',
+              action: 'update',
+              message: 's',
+              timestamp: new Date().toISOString(),
+            },
+            {
+              userName: 'ss',
+              action: 'update',
+              message: 's',
+              timestamp: new Date().toISOString(),
+            },
+            {
+              userName: 'ss',
+              action: 'update',
+              message: 's',
+              timestamp: new Date().toISOString(),
+            },
+            {
+              userName: 'ss',
+              action: 'delete',
+              message: 's',
+              timestamp: new Date().toISOString(),
+            },
+            {
+              userName: 'ss',
+              action: 'update',
+              message: 's',
+              timestamp: new Date().toISOString(),
+            },
+            {
+              userName: 'ss',
+              action: 'update',
+              message: 's',
+              timestamp: new Date().toISOString(),
+            },
+          ]}
+          isFetchingNextPage={false}
+          fetchNextPage={function (): void {
+            // throw new Error('Function not implemented.');
+          }}
+          hasNextPage={undefined}
+          fromDate={null}
+          toDate={null}
+          setFromDate={function (date: Date | null): void {
+            // throw new Error('Function not implemented.');
+          }}
+          setToDate={function (date: Date | null): void {
+            // throw new Error('Function not implemented.');
+          }}
+          isLoading={false}
+        />
+      </LocalizationProvider>
     </div>
   );
 }

package/src/components/Assets/Icons/IconComponents/PrinterIcon.tsx

@@ -0,0 +1,42 @@
+export const PrinterIcon = ({ size = 16 }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.169 5.66634H4.8362C4.70378 5.6655 4.57703 5.61253 4.48339 5.51889C4.38975 5.42525 4.33678 5.29849 4.33594 5.16607V3.83274C4.33594 2.12607 5.129 1.33301 6.8362 1.33301H9.169C10.8757 1.33301 11.6687 2.12607 11.6687 3.83327V5.16661C11.6678 5.29884 11.6148 5.42539 11.5213 5.51889C11.4278 5.6124 11.3012 5.66536 11.169 5.66634ZM5.33594 4.66634H10.6693V3.83327C10.6693 2.69994 10.3029 2.33354 9.16954 2.33354H6.8362C5.70287 2.33354 5.33647 2.69994 5.33647 3.83381L5.33594 4.66634Z"
+        fill="#121212"
+        stroke="#121212"
+        strokeWidth="0.4"
+      />
+      <path
+        d="M8.669 15.6672H7.33567C5.72234 15.6672 4.83594 14.7808 4.83594 13.1669V10.5002C4.83692 10.3679 4.88995 10.2413 4.98358 10.1478C5.0772 10.0542 5.20388 10.0013 5.3362 10.0005H10.6695C10.802 10.0013 10.9287 10.0543 11.0224 10.1479C11.116 10.2416 11.169 10.3683 11.1698 10.5008V13.1674C11.1693 14.7808 10.2823 15.6672 8.669 15.6672ZM5.83594 11.0005V13.1669C5.83594 14.2202 6.28287 14.6666 7.3362 14.6666H8.66954C9.72234 14.6672 10.1693 14.2202 10.1693 13.1669V11.0005H5.83594Z"
+        fill="#121212"
+        stroke="#121212"
+        strokeWidth="0.4"
+      />
+      <path
+        d="M12.0003 12.9998H10.6669C10.5347 12.9989 10.4082 12.9459 10.3146 12.8524C10.2211 12.7589 10.1682 12.6323 10.1672 12.5001V10.9998H5.83333V12.4996C5.8325 12.6319 5.77959 12.7586 5.68607 12.8522C5.59255 12.9458 5.46593 12.9989 5.3336 12.9998H4.00027C2.3864 12.9998 1.5 12.1129 1.5 10.4996V7.16677C1.5 5.5529 2.3864 4.6665 4.00027 4.6665H12.0003C13.6136 4.6665 14.5005 5.5529 14.5005 7.16677V10.5001C14.5 12.1129 13.6131 12.9998 12.0003 12.9998ZM11.1667 11.9998H12.0003C13.0536 11.9998 13.5005 11.5529 13.5005 10.5001V7.16677C13.5005 6.11344 13.0536 5.66704 12.0008 5.66704H4.0008C2.94747 5.66704 2.50107 6.11397 2.50107 7.1673V10.5006C2.50107 11.554 2.948 12.0009 4.00133 12.0009H4.83333V10.4996C4.83431 10.3673 4.88727 10.2408 4.98078 10.1473C5.07429 10.0538 5.20083 10.0008 5.33307 9.99984H10.6664C10.7987 10.0007 10.9254 10.0536 11.019 10.1471C11.1127 10.2406 11.1657 10.3672 11.1667 10.4996V11.9998Z"
+        fill="#121212"
+        stroke="#121212"
+        strokeWidth="0.4"
+      />
+      <path
+        d="M11.3305 11.0005H4.66433C4.532 10.9997 4.40532 10.9467 4.3117 10.8532C4.21808 10.7597 4.16504 10.6331 4.16406 10.5008C4.1649 10.3683 4.21788 10.2416 4.31151 10.1479C4.40515 10.0543 4.53191 10.0013 4.66433 10.0005H11.331C11.4634 10.0013 11.5902 10.0543 11.6838 10.1479C11.7774 10.2416 11.8304 10.3683 11.8313 10.5008C11.8303 10.6332 11.7772 10.7599 11.6834 10.8534C11.5897 10.9469 11.4629 10.9998 11.3305 11.0005Z"
+        fill="#121212"
+        stroke="#121212"
+        strokeWidth="0.4"
+      />
+      <path
+        d="M6.66433 8.3335H4.66433C4.532 8.33266 4.40532 8.27976 4.3117 8.18623C4.21808 8.09271 4.16504 7.96609 4.16406 7.83376C4.1649 7.70134 4.21788 7.57458 4.31151 7.48095C4.40515 7.38731 4.53191 7.33434 4.66433 7.3335H6.66433C6.79675 7.33434 6.92351 7.38731 7.01714 7.48095C7.11078 7.57458 7.16376 7.70134 7.1646 7.83376C7.16362 7.96609 7.11058 8.09271 7.01696 8.18623C6.92334 8.27976 6.79666 8.33266 6.66433 8.3335Z"
+        fill="#121212"
+        stroke="#121212"
+        strokeWidth="0.4"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/Icons.tsx

@@ -78,6 +78,7 @@ import { OpenPaymentsIcon } from './IconComponents/OpenPaymentsIcon';
 import { PayxIcon } from './IconComponents/PayxIcon';
 import { PdfIcon } from './IconComponents/PdfIcon';
 import { PeoplexIcon } from './IconComponents/PeoplexIcon';
+import { PrinterIcon } from './IconComponents/PrinterIcon';
 import { ProductFeaturesIcon } from './IconComponents/ProductFeaturesIcon';
 import { ProfileIcon } from './IconComponents/ProfileIcon';
 import QuizIcon from './IconComponents/QuizIcon';
@@ -116,6 +117,7 @@ import { WhatsappIcon } from './IconComponents/WhatsappIcon';
 
 export const Icons = {
   NoteIcon,
+  PrinterIcon,
   RedoIcon,
   WhatsappIcon,
   SmsIcon,

package/src/components/DataDisplay/ActivityLogView/ActivityLogView.tsx

@@ -0,0 +1,228 @@
+import { TimelineContent, TimelineItem, TimelineSeparator } from '@mui/lab';
+import { Box, Stack, Typography, useTheme } from '@mui/material';
+import { format, isToday } from 'date-fns';
+import _ from 'lodash';
+import { useState } from 'react';
+import { Button, DatePicker, Spinner } from '../../export';
+import {
+  ActivityIcon,
+  convertUTCtoIST,
+  NoDataFound,
+  ScrollToTopButton,
+  useIntersectionObserver,
+} from './service';
+import {
+  StyledActivityLogViewBox,
+  StyledIconBox,
+  StyledSectionTitle,
+  StyledSpinnerBox,
+  StyledTimeline,
+  StyledTimelineConnector,
+  StyledTimelineDot,
+} from './styles';
+
+export type ActivityAction = 'create' | 'update' | 'delete';
+
+export interface Activity {
+  userName: string;
+  action: ActivityAction;
+  message: string;
+  timestamp: string;
+}
+
+interface ActivityLogProps {
+  activitiesData: Activity[];
+  isFetchingNextPage: boolean;
+  fetchNextPage: () => void;
+  hasNextPage: boolean | undefined;
+  fromDate: Date | null;
+  toDate: Date | null;
+  setFromDate: (date: Date | null) => void;
+  setToDate: (date: Date | null) => void;
+  isLoading: boolean;
+}
+
+const ActivityLogFilter = ({
+  fromDate,
+  toDate,
+  setFromDate,
+  setToDate,
+  fetchNextPage,
+  isLoading,
+}: {
+  fromDate: Date | null;
+  toDate: Date | null;
+  setFromDate: (date: Date | null) => void;
+  setToDate: (date: Date | null) => void;
+  fetchNextPage: () => void;
+  isLoading: boolean;
+}) => {
+  const [localFromDate, setLocalFromDate] = useState(fromDate);
+  const [localToDate, setLocalToDate] = useState(toDate);
+
+  const handleFilterSubmit = () => {
+    setFromDate(localFromDate);
+    setToDate(localToDate);
+    fetchNextPage();
+  };
+
+  const clearFilters = () => {
+    setLocalFromDate(null);
+    setLocalToDate(null);
+    setFromDate(null);
+    setToDate(null);
+  };
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 3 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <DatePicker
+          key={`from-date-${localFromDate}`}
+          label="From Date"
+          value={localFromDate}
+          onChange={setLocalFromDate}
+          disabled={isLoading}
+        />
+        <DatePicker
+          key={`to-date-${localToDate}`}
+          label="To Date"
+          value={localToDate}
+          onChange={setLocalToDate}
+          disabled={isLoading}
+        />
+        <Stack spacing={1} direction="row" ml={1} mt={2}>
+          <Button onClick={handleFilterSubmit} variant="contained">
+            Submit
+          </Button>
+        </Stack>
+      </Box>
+      <Box sx={{ display: 'flex', mt: 3.5 }}>
+        <Button onClick={clearFilters} disabled={isLoading}>
+          Clear
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export const ActivityLogView = ({
+  activitiesData,
+  isFetchingNextPage,
+  fetchNextPage,
+  hasNextPage,
+  fromDate,
+  toDate,
+  setFromDate,
+  setToDate,
+  isLoading,
+}: ActivityLogProps) => {
+  const theme = useTheme();
+  const lastItemRef = useIntersectionObserver(() => {
+    if (!isFetchingNextPage && hasNextPage) fetchNextPage();
+  });
+
+  const loading = isLoading && activitiesData.length === 0;
+
+  // Group activities by Today and Past Week and Older
+  const groupedActivities = _.groupBy(activitiesData, (activity) => {
+    const activityDate = convertUTCtoIST(activity.timestamp);
+    return isToday(activityDate)
+      ? 'Today'
+      : activityDate > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
+      ? 'Past Week'
+      : 'Older';
+  });
+
+  const renderMessage = (activity: Activity) =>
+    activity.message.split('\n').map((part, index) => (
+      <Typography key={index} component="div">
+        {index === 0 && (
+          <span style={{ color: theme.palette.text.primary }}>
+            {activity.userName}
+          </span>
+        )}{' '}
+        {part.split(/('[^']*')/g).map((text, idx) => {
+          const isQuotedText = text.startsWith("'") && text.endsWith("'");
+          return (
+            <span
+              key={idx}
+              style={{
+                color: isQuotedText
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary,
+              }}
+            >
+              {isQuotedText ? text.slice(1, -1) : text}
+            </span>
+          );
+        })}
+      </Typography>
+    ));
+
+  return (
+    <StyledActivityLogViewBox className="scrollable-activity-log">
+      <ActivityLogFilter
+        fromDate={fromDate}
+        toDate={toDate}
+        setFromDate={setFromDate}
+        setToDate={setToDate}
+        fetchNextPage={fetchNextPage}
+        isLoading={isLoading}
+      />
+
+      {loading ? (
+        <StyledSpinnerBox>
+          <Spinner />
+        </StyledSpinnerBox>
+      ) : activitiesData.length === 0 ? (
+        <NoDataFound message={'No data found'} />
+      ) : (
+        Object.entries(groupedActivities).map(([section, activities]) => (
+          <Box key={section}>
+            <StyledSectionTitle>{section}</StyledSectionTitle>
+            <StyledTimeline>
+              {activities.map((activity, index) => (
+                <TimelineItem
+                  key={index}
+                  ref={index === activities.length - 1 ? lastItemRef : null}
+                >
+                  <TimelineSeparator>
+                    <StyledTimelineDot>
+                      <StyledIconBox>
+                        <ActivityIcon type={activity.action} />
+                      </StyledIconBox>
+                    </StyledTimelineDot>
+                    {index < activities.length - 1 && (
+                      <StyledTimelineConnector />
+                    )}
+                  </TimelineSeparator>
+                  <TimelineContent
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      marginTop: 1,
+                    }}
+                  >
+                    <Typography>{renderMessage(activity)}</Typography>
+                    <Typography variant="caption">
+                      {format(
+                        convertUTCtoIST(activity.timestamp),
+                        "d MMMM yyyy 'at' hh:mm a",
+                      )}
+                    </Typography>
+                  </TimelineContent>
+                </TimelineItem>
+              ))}
+            </StyledTimeline>
+          </Box>
+        ))
+      )}
+      {isFetchingNextPage && (
+        <StyledSpinnerBox>
+          <Spinner />
+        </StyledSpinnerBox>
+      )}
+      <ScrollToTopButton />
+    </StyledActivityLogViewBox>
+  );
+};

package/src/components/DataDisplay/ActivityLogView/Icons.tsx

@@ -0,0 +1,65 @@
+export const DeleteIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      style={{ display: 'flex', alignItems: 'center' }}
+    >
+      <g clipPath="url(#clip0_2752_9015)">
+        <path
+          d="M10.7933 1.3335H5.20659C2.77992 1.3335 1.33325 2.78016 1.33325 5.20683V10.7868C1.33325 13.2202 2.77992 14.6668 5.20659 14.6668H10.7866C13.2133 14.6668 14.6599 13.2202 14.6599 10.7935V5.20683C14.6666 2.78016 13.2199 1.3335 10.7933 1.3335ZM10.6666 8.50016H5.33325C5.20064 8.50016 5.07347 8.44749 4.9797 8.35372C4.88593 8.25995 4.83325 8.13277 4.83325 8.00016C4.83325 7.86756 4.88593 7.74038 4.9797 7.64661C5.07347 7.55284 5.20064 7.50016 5.33325 7.50016H10.6666C10.7992 7.50016 10.9264 7.55284 11.0201 7.64661C11.1139 7.74038 11.1666 7.86756 11.1666 8.00016C11.1666 8.13277 11.1139 8.25995 11.0201 8.35372C10.9264 8.44749 10.7992 8.50016 10.6666 8.50016Z"
+          fill="#F2353C"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2752_9015">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const CreateIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <path
+        d="M10.793 1.3335H5.20632C2.77965 1.3335 1.33325 2.7799 1.33325 5.20656V10.7868C1.33325 13.2199 2.77965 14.6668 5.20632 14.6668H10.7866C13.2133 14.6668 14.6602 13.2204 14.6602 10.7938V5.20656C14.6666 2.7799 13.2197 1.3335 10.793 1.3335ZM10.6666 8.4999H8.49965V10.6668C8.49965 10.7994 8.44697 10.9266 8.35321 11.0204C8.25944 11.1142 8.13226 11.1668 7.99965 11.1668C7.86704 11.1668 7.73987 11.1142 7.6461 11.0204C7.55233 10.9266 7.49965 10.7994 7.49965 10.6668V8.4999H5.33325C5.20064 8.4999 5.07347 8.44722 4.9797 8.35345C4.88593 8.25968 4.83325 8.1325 4.83325 7.9999C4.83325 7.86729 4.88593 7.74011 4.9797 7.64634C5.07347 7.55257 5.20064 7.4999 5.33325 7.4999H7.49965V5.3335C7.49965 5.20089 7.55233 5.07371 7.6461 4.97994C7.73987 4.88617 7.86704 4.8335 7.99965 4.8335C8.13226 4.8335 8.25944 4.88617 8.35321 4.97994C8.44697 5.07371 8.49965 5.20089 8.49965 5.3335V7.4999H10.6666C10.7992 7.4999 10.9264 7.55257 11.0201 7.64634C11.1139 7.74011 11.1666 7.86729 11.1666 7.9999C11.1666 8.1325 11.1139 8.25968 11.0201 8.35345C10.9264 8.44722 10.7992 8.4999 10.6666 8.4999Z"
+        fill="#4BAABE"
+      />
+    </svg>
+  );
+};
+
+export const UpdateIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_2752_9033)">
+        <path
+          d="M10.7933 1.3335H5.20659C2.77992 1.3335 1.33325 2.78016 1.33325 5.20683V10.7868C1.33325 13.2202 2.77992 14.6668 5.20659 14.6668H10.7866C13.2133 14.6668 14.6599 13.2202 14.6599 10.7935V5.20683C14.6666 2.78016 13.2199 1.3335 10.7933 1.3335ZM11.1866 6.46683L7.40659 10.2468C7.36025 10.2934 7.30519 10.3303 7.24456 10.3555C7.18392 10.3806 7.11891 10.3936 7.05325 10.3936C6.98759 10.3936 6.92258 10.3806 6.86195 10.3555C6.80131 10.3303 6.74625 10.2934 6.69992 10.2468L4.81325 8.36016C4.76413 8.31439 4.72473 8.25919 4.6974 8.19785C4.67007 8.13652 4.65538 8.07031 4.65419 8.00318C4.65301 7.93604 4.66536 7.86936 4.6905 7.8071C4.71565 7.74484 4.75308 7.68828 4.80056 7.6408C4.84804 7.59332 4.90459 7.5559 4.96685 7.53075C5.02911 7.5056 5.0958 7.49325 5.16293 7.49444C5.23007 7.49562 5.29628 7.51031 5.35761 7.53764C5.41894 7.56497 5.47414 7.60437 5.51992 7.6535L7.05325 9.18683L10.4799 5.76016C10.5747 5.67184 10.7001 5.62376 10.8296 5.62605C10.9591 5.62833 11.0827 5.68081 11.1743 5.77242C11.2659 5.86402 11.3184 5.98761 11.3207 6.11715C11.323 6.24668 11.2749 6.37205 11.1866 6.46683Z"
+          fill="#88B053"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2752_9033">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/DataDisplay/ActivityLogView/service.tsx

@@ -0,0 +1,101 @@
+import { ArrowUpward, Info } from '@mui/icons-material';
+import { Box, Fab, Typography } from '@mui/material';
+import { addHours, addMinutes, parseISO } from 'date-fns';
+import { useCallback, useRef } from 'react';
+import { emptyListImage } from '../../../assets/images/svg';
+import { StyledBox } from '../../Assets/ErrorPages/styles';
+import { ActivityAction } from '../../export';
+import { CreateIcon, DeleteIcon, UpdateIcon } from './Icons';
+
+/**
+ * Converts a given UTC date string to Indian Standard Time (IST).
+ *
+ * @param dateString - The date string in ISO format to be converted.
+ * @returns The converted date object in IST.
+ */
+export const convertUTCtoIST = (dateString: string) => {
+  const date = parseISO(dateString);
+  return addMinutes(addHours(date, 5), 30);
+};
+
+export const ActivityIcon = ({ type }: { type: ActivityAction }) => {
+  switch (type) {
+    case 'create':
+      return <CreateIcon />;
+    case 'delete':
+      return <DeleteIcon />;
+    case 'update':
+      return <UpdateIcon />;
+    default:
+      return <Info />;
+  }
+};
+
+export const ScrollToTopButton = () => {
+  const handleScrollToTop = () => {
+    const container = document.querySelector('.scrollable-activity-log');
+    if (container) {
+      container.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        bottom: 20,
+        right: 20,
+        zIndex: 1500,
+      }}
+    >
+      <Fab
+        color="primary"
+        size="small"
+        onClick={handleScrollToTop}
+        aria-label="Scroll to top"
+      >
+        <ArrowUpward />
+      </Fab>
+    </Box>
+  );
+};
+
+export const NoDataFound = ({ message }: { message: string }) => {
+  return (
+    <>
+      <StyledBox>
+        <img
+          src={emptyListImage}
+          alt="page not found"
+          width={'350px'}
+          style={{ margin: '20px' }}
+        />
+        <Typography variant="subtitle1">{message}</Typography>
+      </StyledBox>
+    </>
+  );
+};
+
+export function useIntersectionObserver(callback: () => void) {
+  const observer = useRef<IntersectionObserver | null>(null);
+
+  const handleObserver = useCallback(
+    (node: HTMLDivElement) => {
+      if (observer.current) observer.current.disconnect();
+
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) {
+          callback();
+        }
+      });
+
+      if (node) observer.current.observe(node);
+    },
+    [callback],
+  );
+
+  return handleObserver;
+}

package/src/components/DataDisplay/ActivityLogView/styles.tsx

@@ -0,0 +1,52 @@
+import {
+  Timeline,
+  TimelineConnector,
+  TimelineDot,
+  timelineItemClasses,
+} from '@mui/lab';
+import { Box, styled, Typography } from '@mui/material';
+
+export const StyledSpinnerBox = styled(Box)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const StyledSectionTitle = styled(Typography)(({ theme }) => ({
+  fontSize: '12px',
+  color: theme.palette.text.secondary,
+}));
+
+export const StyledTimeline = styled(Timeline)({
+  [`& .${timelineItemClasses.root}:before`]: { flex: 0, padding: 0 },
+  [`& .${timelineItemClasses.root}:not(:first-of-type)`]: {
+    marginTop: '0px',
+  },
+});
+
+export const StyledTimelineDot = styled(TimelineDot)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.defaultBackground,
+  boxShadow: 'none',
+  width: 30,
+  padding: 0,
+  paddingLeft: 5,
+  height: 30,
+}));
+
+export const StyledTimelineConnector = styled(TimelineConnector)(
+  ({ theme }) => ({
+    width: '1px',
+  }),
+);
+
+export const StyledActivityLogViewBox = styled(Box)({
+  '&::-webkit-scrollbar': { display: 'none' },
+  overflowY: 'auto',
+  maxHeight: '70vh',
+});
+
+export const StyledIconBox = styled(Box)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/DataDisplay/Card/Card.tsx

@@ -160,7 +160,7 @@ export const Card = ({
           <StyledButton
             variant="text"
             onClick={handleClick}
-            sx={footer.buttonProps}
+            {...footer.buttonProps}
             endIcon={footer?.endIcon ?? <ChevronRight />}
           >
             {footer?.buttonText ?? 'View'}

package/src/components/DataDisplay/DataTable/TablePagination.tsx

@@ -57,6 +57,10 @@ export const TablePagination = (props: PaginationProps) => {
           },
         }}
         menu={[
+          <DropdownMenuItem
+            label="10 / Page"
+            onClick={() => onLimitChange(Number(10))}
+          />,
           <DropdownMenuItem
             label="20 / Page"
             onClick={() => onLimitChange(Number(20))}