@campxdev/react-blueprint 1.6.3 → 1.6.5

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.3",
+  "version": "1.6.5",
   "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/DataDisplay/ActivityLogView/ActivityLogView.tsx

@@ -0,0 +1,233 @@
+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"
+            disabled={isLoading}
+            loading={isLoading}
+          >
+            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 && !loading && (
+        <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/DataTable/DataTable.tsx

@@ -63,4 +63,6 @@ export const CellContainer = styled(Stack)(({ theme }) => ({
   alignItems: 'center',
   height: '100%',
   flexDirection: 'row',
+  justifyContent: 'flex-start',
+  gap: '12px',
 }));

package/src/components/DataDisplay/export.ts

@@ -1,4 +1,5 @@
 export * from './AccordionGroup/AccordionGroup';
+export * from './ActivityLogView/ActivityLogView';
 export * from './Avatar/Avatar';
 export * from './Card/Card';
 export * from './Chips/Chips';

package/src/components/Layout/PageHeader/components/DensitySelector/DensitySelector.tsx

@@ -2,7 +2,8 @@ import { MenuListProps, MenuProps, Stack, useTheme } from '@mui/material';
 import { GridDensity } from '@mui/x-data-grid';
 import { capitalize } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
-import { RootState, setDensity } from '../../../../../redux/export';
+import { setDensity } from '../../../../../redux/slices/pageHeaderSlice';
+import { RootState } from '../../../../../redux/store';
 import { Button, DropdownMenu, Icons, Typography } from '../../../../export';
 import { DensityAnchor } from '../Anchors';
 
@@ -18,8 +19,7 @@ export const DensitySelector = ({
 }: DensitySelectorProps) => {
   const dispatch = useDispatch();
   const density = useSelector(
-    (state: RootState) =>
-      state.pageHeaderSlice[uniqueId]?.density || 'standard',
+    (state: RootState) => state.pageHeader[uniqueId]?.density || 'standard',
   );
   const gridDensity: GridDensity[] = ['compact', 'standard', 'comfortable'];
 

package/src/components/Layout/PageHeader/components/TableColumnsSelector/TableColumnsSelector.tsx

@@ -3,10 +3,8 @@ import { MenuListProps, MenuProps, Typography, useTheme } from '@mui/material';
 import { GridColDef, GridColumnVisibilityModel } from '@mui/x-data-grid';
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  RootState,
-  setColumnVisibilityModel,
-} from '../../../../../redux/export';
+import { setColumnVisibilityModel } from '../../../../../redux/slices/pageHeaderSlice';
+import { RootState } from '../../../../../redux/store';
 import { Button, Icons, SearchBar, SingleCheckBox } from '../../../../export';
 import { DropdownMenu } from '../../../../Navigation/export';
 
@@ -26,7 +24,7 @@ export const TableColumnsSelector = ({
 
   const columnVisibilityModel = useSelector(
     (state: RootState) =>
-      state.pageHeaderSlice[uniqueId]?.columnVisibilityModel ||
+      state.pageHeader[uniqueId]?.columnVisibilityModel ||
       columns.reduce((acc, column) => {
         acc[column.field] = true;
         return acc;

package/src/hooks/usePageHeader.ts

@@ -10,7 +10,7 @@ export const usePageHeader = () => {
   const dispatch = useDispatch();
   const filterState = useSelector(
     (state: RootState) =>
-      state.pageHeaderSlice[uuidRef.current] ||
+      state.pageHeader[uuidRef.current] ||
       ({} as {
         density: GridDensity;
         columnVisibilityModel: GridColumnVisibilityModel;

package/src/redux/export.ts

@@ -1,2 +1 @@
-export * from './slices/pageHeaderSlice';
-export * from './store';
+export * from './reducers';

package/src/redux/reducers.ts

@@ -0,0 +1,5 @@
+import { pageHeaderSlice } from './slices/pageHeaderSlice';
+
+export const reactBlueprintReducers = {
+  pageHeader: pageHeaderSlice.reducer,
+};

package/src/redux/slices/pageHeaderSlice.ts

@@ -10,7 +10,7 @@ export type PageHeaderState = {
 
 const initialState: PageHeaderState = {};
 
-const pageHeaderSlice = createSlice({
+export const pageHeaderSlice = createSlice({
   name: 'pageHeader',
   initialState,
   reducers: {
@@ -31,5 +31,3 @@ const pageHeaderSlice = createSlice({
 
 export const { setColumnVisibilityModel, setDensity, resetStateForUniqueId } =
   pageHeaderSlice.actions;
-
-export default pageHeaderSlice.reducer;

package/src/redux/store.ts

@@ -1,10 +1,8 @@
-import { configureStore } from '@reduxjs/toolkit';
-import pageHeaderSlice from './slices/pageHeaderSlice';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { reactBlueprintReducers } from './reducers';
 
 export const store = configureStore({
-  reducer: {
-    pageHeaderSlice,
-  },
+  reducer: combineReducers(reactBlueprintReducers),
 });
 
 export type RootState = ReturnType<typeof store.getState>;

package/src/stories/DataDisplay/ActivityLogView.stories.tsx

@@ -0,0 +1,96 @@
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react/*';
+import { Activity, ActivityLogView } from '../../components/export';
+
+// Mock data for the story with diverse timestamps and actions
+const activitiesData: Activity[] = [
+  {
+    userName: 'John Doe',
+    action: 'create',
+    message: "created 'Student Registration'",
+    timestamp: new Date().toISOString(), // Today
+  },
+  {
+    userName: 'Jane Smith',
+    action: 'update',
+    message: `updated 'Employee Record'
+• 'Position' has been changed from 'Junior Developer' to 'Senior Developer'
+• 'Salary' has been changed from '$50,000' to '$70,000'
+• 'Department' has been changed from 'IT Support' to 'Software Development'
+• 'Supervisor' has been changed from 'Mr. Adams' to 'Ms. Johnson'
+• 'Work Hours' have been changed from '40' to '45'`,
+    timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), // 2 days ago (Past Week)
+  },
+  {
+    userName: 'Admin',
+    action: 'delete',
+    message: "deleted 'Annual Report'",
+    timestamp: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(), // 10 days ago (Older)
+  },
+  {
+    userName: 'Alice Johnson',
+    action: 'create',
+    message: "created 'Course Outline'",
+    timestamp: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), // 5 days ago (Past Week)
+  },
+  {
+    userName: 'Bob Brown',
+    action: 'update',
+    message: `updated 'Project Details'
+• 'Project Name' has been changed from 'Website Revamp' to 'Mobile App Launch'
+• 'Deadline' has been changed from 'June 2023' to 'August 2023'
+• 'Team Members' have been changed from '5' to '8'
+• 'Budget' has been changed from '$20,000' to '$35,000'
+• 'Client Contact' has been changed from 'Mr. Lee' to 'Mrs. Gomez'`,
+    timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), // Yesterday (Past Week)
+  },
+  {
+    userName: 'Charlie Green',
+    action: 'delete',
+    message: "deleted 'Temporary Files'",
+    timestamp: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString(), // 15 days ago (Older)
+  },
+  {
+    userName: 'Emily White',
+    action: 'update',
+    message: `updated 'Client Information'
+• 'Client Name' has been changed from 'Acme Corp' to 'Globex Inc.'
+• 'Contact Number' has been changed from '123-456-7890' to '987-654-3210'
+• 'Address' has been changed from '123 Main St' to '456 Elm St'
+• 'Email' has been changed from 'info@acme.com' to 'contact@globex.com'
+• 'Account Manager' has been changed from 'John Smith' to 'Laura Adams'`,
+    timestamp: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), // 3 days ago (Past Week)
+  },
+];
+
+const meta: Meta<typeof ActivityLogView> = {
+  title: 'DataDisplay/ActivityLog',
+  component: ActivityLogView,
+  decorators: [
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <Story />
+      </LocalizationProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ActivityLogView>;
+
+export const Default: Story = {
+  args: {
+    activitiesData,
+    isFetchingNextPage: false,
+    fetchNextPage: action('fetchNextPage'),
+    hasNextPage: true,
+    fromDate: null,
+    toDate: null,
+    setFromDate: action('setFromDate'),
+    setToDate: action('setToDate'),
+    isLoading: false,
+  },
+};