@campxdev/react-blueprint 1.6.5 → 1.6.6

package/package.json

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

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

@@ -91,12 +91,7 @@ const ActivityLogFilter = ({
           disabled={isLoading}
         />
         <Stack spacing={1} direction="row" ml={1} mt={2}>
-          <Button
-            onClick={handleFilterSubmit}
-            variant="contained"
-            disabled={isLoading}
-            loading={isLoading}
-          >
+          <Button onClick={handleFilterSubmit} variant="contained">
             Submit
           </Button>
         </Stack>
@@ -222,7 +217,7 @@ export const ActivityLogView = ({
           </Box>
         ))
       )}
-      {isFetchingNextPage && !loading && (
+      {isFetchingNextPage && (
         <StyledSpinnerBox>
           <Spinner />
         </StyledSpinnerBox>

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))}

package/src/components/DataDisplay/EditableDataTable/EditableDataTable.tsx

@@ -16,10 +16,11 @@ import { v4 } from 'uuid';
 import { DataTable, DataTableProps, Icons } from '../../export';
 
 export type EditableDataTableProps = {
-  hideDelete?: boolean;
   onChange: (rows: GridValidRowModel) => void;
   onSave?: (params: any) => void;
   onDelete?: (params: any) => void;
+  editVisibilityArray?: number[];
+  deleteVisibilityArray?: number[];
 } & Omit<
   DataTableProps,
   | 'rowModesModel'
@@ -29,7 +30,7 @@ export type EditableDataTableProps = {
 >;
 
 export const EditableDataTable = (props: EditableDataTableProps) => {
-  const { rows } = props;
+  const { rows = [] } = props;
 
   useEffect(() => {}, [props.columns]);
 
@@ -43,7 +44,7 @@ export const EditableDataTable = (props: EditableDataTableProps) => {
 
 export const EditableTableCore = (props: EditableDataTableProps) => {
   const theme = useTheme();
-  const { rows, columns } = props;
+  const { rows = [], columns } = props;
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
   const processRowUpdate = (newRow: GridRowModel) => {
     const updatedRow = { ...newRow, isNew: false };
@@ -86,6 +87,12 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
     props.onChange(rows?.filter((row) => row.id !== params.id) ?? []);
   };
 
+  const deleteVisibilityArray =
+    props.deleteVisibilityArray || rows.map((row) => row.id);
+
+  const editVisibilityArray =
+    props.editVisibilityArray || rows.map((row) => row.id);
+
   return (
     <>
       <DataTable
@@ -159,25 +166,29 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
             cellClassName: 'actions',
             getActions: (params) => {
               const actions = [];
-              if (rowModesModel[params.id]?.mode === GridRowModes.Edit) {
-                actions.push(
-                  <GridActionsCellItem
-                    icon={<Icons.SaveIcon />}
-                    label="Save"
-                    onClick={() => handleSaveClick(params)}
-                  />,
-                );
-              } else {
-                actions.push(
-                  <GridActionsCellItem
-                    icon={<Icons.EditIcon />}
-                    label="Edit"
-                    onClick={() => handleEditClick(params)}
-                    color="inherit"
-                  />,
-                );
+
+              if (editVisibilityArray.includes(params.row.id)) {
+                if (rowModesModel[params.id]?.mode === GridRowModes.Edit) {
+                  actions.push(
+                    <GridActionsCellItem
+                      icon={<Icons.SaveIcon />}
+                      label="Save"
+                      onClick={() => handleSaveClick(params)}
+                    />,
+                  );
+                } else {
+                  actions.push(
+                    <GridActionsCellItem
+                      icon={<Icons.EditIcon />}
+                      label="Edit"
+                      onClick={() => handleEditClick(params)}
+                      color="inherit"
+                    />,
+                  );
+                }
               }
-              if (!props.hideDelete) {
+
+              if (deleteVisibilityArray.includes(params.row.id)) {
                 actions.push(
                   <GridActionsCellItem
                     icon={<Icons.DeleteIcon />}

package/src/components/Feedback/Tooltip/ToolTipContent.tsx

@@ -0,0 +1,15 @@
+import { Stack } from '@mui/material';
+import { Icons, Typography } from '../../export';
+import { TooltipContentProps } from './Tooltip';
+
+export const ToolTipContent = ({ message }: TooltipContentProps) => {
+  return (
+    <Stack gap={1} sx={{ margin: '5px' }}>
+      <Stack direction="row" gap={1}>
+        <Icons.BulbIcon />
+        <Typography variant="subtitle3">Note:</Typography>
+      </Stack>
+      <Typography variant="caption">{message}</Typography>
+    </Stack>
+  );
+};

package/src/components/Feedback/Tooltip/Tooltip.tsx

@@ -2,14 +2,11 @@ import {
   IconButton,
   Tooltip as MuiTooltip,
   TooltipProps as MuiTooltipProps,
-  Stack,
 } from '@mui/material';
-import { Children, ReactElement } from 'react';
-import { BulbIcon } from '../../Assets/Icons/IconComponents/BulbIcon';
-import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Children, ReactNode } from 'react';
 
 export type TooltipProps = {
-  children: ReactElement | string;
+  children: ReactNode;
 } & MuiTooltipProps;
 export type TooltipContentProps = { message: string };
 
@@ -19,6 +16,7 @@ export const Tooltip = ({
   ...props
 }: TooltipProps) => {
   const isIconButton = Children.only(props.children).type === IconButton;
+
   return (
     <MuiTooltip {...props} placement={placement} arrow={arrow}>
       {isIconButton ? (
@@ -29,15 +27,3 @@ export const Tooltip = ({
     </MuiTooltip>
   );
 };
-
-export const ToolTipContent = ({ message }: TooltipContentProps) => {
-  return (
-    <Stack gap={1} sx={{ margin: '5px' }}>
-      <Stack direction="row" gap={1}>
-        <BulbIcon />
-        <Typography variant="subtitle3">Note:</Typography>
-      </Stack>
-      <Typography variant="caption">{message}</Typography>
-    </Stack>
-  );
-};

package/src/components/Feedback/export.ts

@@ -2,4 +2,5 @@ export * from './Alert/Alert';
 export * from './Snackbar/Snackbar';
 export * from './Spinner/Spinner';
 export * from './Tooltip/Tooltip';
+export * from './Tooltip/ToolTipContent';
 export * from './Tutorial/Tutorial';

package/src/components/Input/SingleSelect/SingleSelect.tsx

@@ -6,7 +6,7 @@ import {
   Paper,
 } from '@mui/material';
 import axios, { AxiosInstance } from 'axios';
-import _, { debounce } from 'lodash';
+import _, { debounce, startCase } from 'lodash';
 import { SyntheticEvent, useEffect, useMemo, useReducer } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Spinner } from '../../Feedback/Spinner/Spinner';
@@ -49,7 +49,12 @@ export type SingleSelectProps = {
     isInt?: boolean;
     isFloat?: boolean;
   };
-  dbLabelProps?: { labelKey: string; subLabelKey?: string };
+  dbLabelProps?: {
+    labelKey: string;
+    subLabelKey?: string;
+    useLabelStartCase?: boolean;
+    useSubLabelStartCase?: boolean;
+  };
   onChange?: (value: any) => void;
   error?: any;
   helperText?: string;
@@ -102,7 +107,11 @@ export const SingleSelect = ({
     isInt: false,
     isFloat: false,
   },
-  dbLabelProps,
+  dbLabelProps = {
+    labelKey: '',
+    useLabelStartCase: false,
+    useSubLabelStartCase: false,
+  },
   onOpen,
   onClose,
   ...restProps
@@ -451,8 +460,16 @@ export const SingleSelect = ({
         return (
           <Box component="li" {...props} key={option.value}>
             <OptionContainer>
-              <Typography variant="label1">{option.label}</Typography>
-              <Typography variant="caption">{option?.subLabel}</Typography>
+              <Typography variant="label1">
+                {dbLabelProps.useLabelStartCase
+                  ? startCase(option.label)
+                  : option.label}
+              </Typography>
+              <Typography variant="caption">
+                {dbLabelProps.useSubLabelStartCase
+                  ? startCase(option?.subLabel)
+                  : option?.subLabel}
+              </Typography>
             </OptionContainer>
           </Box>
         );

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

@@ -1,6 +1,6 @@
 import { Box, Divider, Stack, useTheme } from '@mui/material';
 import { GridColDef } from '@mui/x-data-grid';
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { ReactNode, useState } from 'react';
 import {
   DensitySelector,
@@ -8,13 +8,19 @@ import {
   TableColumnsSelector,
   Typography,
 } from '../../export';
-import { ColumnsAnchor } from './components/Anchors';
+import {
+  ColumnsAnchor,
+  FiltersAnchor,
+  SearchAnchor,
+} from './components/Anchors';
+import { SearchBar } from './components/SearchBar';
 
 interface PageHeaderProps {
-  uniqueId: string;
+  uniqueId?: string;
   viewsSlot?: ReactNode;
   actions?: ReactNode[];
   columns?: GridColDef[];
+  searchText?: string;
 }
 
 const ViewTab = ({ title }: { title: string }) => {
@@ -42,19 +48,16 @@ const motionDivVariants = {
   expanded: { height: '102px' },
 };
 
-const motionTextFieldVariants = {
-  collapsed: { width: '40px' },
-  expanded: { width: '300px' },
-};
-
 export const PageHeader = ({
   uniqueId,
   actions,
   columns,
   viewsSlot = <Box></Box>,
+  searchText = 'Search',
 }: PageHeaderProps) => {
   const [expanded, setExpanded] = useState(false);
   const [expandedSearch, setExpandedSearch] = useState(false);
+
   const theme = useTheme();
 
   const handleSearchClick = () => {
@@ -65,6 +68,8 @@ export const PageHeader = ({
     setExpandedSearch(false);
   };
 
+  const isTableMode = columns && uniqueId;
+
   return (
     <motion.div
       style={{
@@ -85,17 +90,18 @@ export const PageHeader = ({
         alignItems="center"
         justifyContent="space-between"
       >
-        {columns ? <ViewTab title="Default View" /> : viewsSlot}
+        {isTableMode ? <ViewTab title="Default View" /> : viewsSlot}
+
         <Stack direction="row" alignItems="center">
-          {/* {columns && (
+          {isTableMode && (
             <FiltersAnchor
               handleClick={() => {
                 setExpanded(!expanded);
               }}
               showDot={false}
             />
-          )} */}
-          {columns && (
+          )}
+          {isTableMode && (
             <ColumnsAnchor
               handleClick={() => {
                 setExpanded(!expanded);
@@ -103,35 +109,39 @@ export const PageHeader = ({
               showDot={false}
             />
           )}
-          {/* <motion.div
-            variants={motionTextFieldVariants}
-            animate={expandedSearch ? 'expanded' : 'collapsed'}
-            transition={{ duration: 0.3 }}
-          >
-            {!expandedSearch && (
-              <SearchAnchor handleClick={handleSearchClick} showDot={false} />
-            )}
-            {expandedSearch && (
-              <TextField
-                containerProps={{
-                  margin: '0px',
-                }}
-                size="small"
-                placeholder="Search by name"
-                // onChange={(e) => { setInput(e.target.value); }}
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <Icons.SearchIcon />
-                    </InputAdornment>
-                  ),
-                }}
-                onBlur={handleSearchBlur}
-                autoFocus
-              />
-            )}
-          </motion.div> */}
-          {columns && <DensitySelector uniqueId={uniqueId} />}
+          {isTableMode && (
+            <AnimatePresence mode="wait">
+              {expandedSearch ? (
+                <motion.div
+                  key="searchBar"
+                  initial={{ opacity: 0, x: -20, scale: 0.95 }}
+                  animate={{ opacity: 1, x: 0, scale: 1 }}
+                  exit={{ opacity: 0, x: 20, scale: 0.95 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <SearchBar
+                    searchText={searchText}
+                    handleSearchBlur={handleSearchBlur}
+                    uniqueId={uniqueId}
+                  />
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="searchAnchor"
+                  initial={{ opacity: 0, x: 20, scale: 0.95 }}
+                  animate={{ opacity: 1, x: 0, scale: 1 }}
+                  exit={{ opacity: 0, x: -20, scale: 0.95 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <SearchAnchor
+                    handleClick={handleSearchClick}
+                    showDot={false}
+                  />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          )}
+          {isTableMode && <DensitySelector uniqueId={uniqueId} />}
           {actions?.map((action, index) => action)}
         </Stack>
       </Stack>
@@ -144,7 +154,7 @@ export const PageHeader = ({
       )}
       {expanded && (
         <Stack direction="row" width="100%" alignItems="center" gap={2}>
-          {columns && (
+          {columns && uniqueId && (
             <TableColumnsSelector columns={columns} uniqueId={uniqueId} />
           )}
           <Divider

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

@@ -2,7 +2,7 @@ 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 { setDensity } from '../../../../../redux/slices/pageHeaderSlice';
+import { setDensityForUniqueId } from '../../../../../redux/slices/pageHeaderSlice';
 import { RootState } from '../../../../../redux/store';
 import { Button, DropdownMenu, Icons, Typography } from '../../../../export';
 import { DensityAnchor } from '../Anchors';
@@ -38,7 +38,7 @@ export const DensitySelector = ({
 
   const handleMenuClick = (value: GridDensity, close: () => void) => {
     dispatch(
-      setDensity({
+      setDensityForUniqueId({
         uniqueId: uniqueId,
         density: value,
       }),

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

@@ -0,0 +1,66 @@
+import { InputAdornment } from '@mui/material';
+import { debounce } from 'lodash';
+import React, { useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setSearchForUniqueId } from '../../../../redux/slices/pageHeaderSlice';
+import { RootState } from '../../../../redux/store';
+import { Icons, TextField } from '../../../export';
+
+export const SearchBar = ({
+  handleSearchBlur,
+  uniqueId,
+  searchText,
+}: {
+  handleSearchBlur: () => void;
+  uniqueId: string;
+  searchText: string;
+}) => {
+  const dispatch = useDispatch();
+
+  const search = useSelector(
+    (state: RootState) => state.pageHeader[uniqueId]?.filters?.search,
+  );
+
+  // Wrap onSearch in useCallback
+  const onSearch = (value: string) => {
+    dispatch(
+      setSearchForUniqueId({
+        uniqueId: uniqueId,
+        search: value,
+      }),
+    );
+  };
+
+  // Now we can memoize a debounced version of onSearch
+  const debouncedSendRequest = useMemo(
+    () => debounce(onSearch, 300),
+    [onSearch],
+  );
+
+  // Pass the updated value to the debounced function in onChange
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    debouncedSendRequest(e.target.value);
+  };
+
+  return (
+    <TextField
+      containerProps={{
+        margin: '0px',
+        width: '300px',
+      }}
+      size="small"
+      placeholder={searchText}
+      defaultValue={search || ''}
+      onChange={handleChange}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <Icons.SearchIcon />
+          </InputAdornment>
+        ),
+      }}
+      onBlur={handleSearchBlur}
+      autoFocus
+    />
+  );
+};

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

@@ -3,7 +3,7 @@ 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 { setColumnVisibilityModel } from '../../../../../redux/slices/pageHeaderSlice';
+import { setColumnVisibilityModelForUniqueId } from '../../../../../redux/slices/pageHeaderSlice';
 import { RootState } from '../../../../../redux/store';
 import { Button, Icons, SearchBar, SingleCheckBox } from '../../../../export';
 import { DropdownMenu } from '../../../../Navigation/export';
@@ -45,7 +45,7 @@ export const TableColumnsSelector = ({
       [column.field]: !checked,
     };
     dispatch(
-      setColumnVisibilityModel({
+      setColumnVisibilityModelForUniqueId({
         uniqueId: uniqueId,
         columnVisibilityModel: newColumnVisibilityModel,
       }),
@@ -77,7 +77,17 @@ export const TableColumnsSelector = ({
             Columns
           </Button>
         )}
-        menuProps={{ ...props.menuProps }}
+        menuProps={{
+          ...props.menuProps,
+          anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'left',
+          },
+          transformOrigin: {
+            vertical: 'top',
+            horizontal: 'left',
+          },
+        }}
         menuHeader={
           <SearchBar
             fullWidth
@@ -89,7 +99,7 @@ export const TableColumnsSelector = ({
           />
         }
         menuListContainerSx={{
-          margin: '10px 2px 0px 0px',
+          margin: '10px 5px 0px 5px',
           gap: 1,
           maxHeight: '350px',
         }}

package/src/components/Navigation/ConfirmDialog/ConfirmDialog.tsx

@@ -36,7 +36,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
       open={isOpen}
       content={({ close }) => {
         return (
-          <>
+          <Box sx={{ padding: '16px' }}>
             <Stack direction="row" alignItems="center">
               <img
                 src={
@@ -71,7 +71,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
                 {confirmButtonText}
               </Button>
             </Stack>
-          </>
+          </Box>
         );
       }}
       onClose={onCancel}

package/src/hooks/usePageHeader.ts

@@ -1,30 +1,69 @@
-import { GridColumnVisibilityModel, GridDensity } from '@mui/x-data-grid';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { v4 } from 'uuid';
-import { resetStateForUniqueId } from '../redux/slices/pageHeaderSlice';
+import {
+  PageHeaderSingleState,
+  resetStateForUniqueId,
+  setDefaultFiltersForUniqueId,
+  setLimitForUniqueId,
+  setOffsetForUniqueId,
+} from '../redux/slices/pageHeaderSlice';
 import { RootState } from '../redux/store';
 
-export const usePageHeader = () => {
+export const usePageHeader = (defaultFilters?: { [x: string]: any }) => {
   const uuidRef = useRef(v4());
   const dispatch = useDispatch();
-  const filterState = useSelector(
-    (state: RootState) =>
-      state.pageHeader[uuidRef.current] ||
-      ({} as {
-        density: GridDensity;
-        columnVisibilityModel: GridColumnVisibilityModel;
-      }),
-  );
 
   const resetState = () => {
     dispatch(resetStateForUniqueId({ uniqueId: uuidRef.current }));
   };
 
+  const setDefaultFilters = (defaultFilters: { [x: string]: any }) => {
+    dispatch(
+      setDefaultFiltersForUniqueId({
+        uniqueId: uuidRef.current,
+        defaultFilters,
+      }),
+    );
+  };
+
+  const onLimitChange = (limit: number) => {
+    dispatch(
+      setLimitForUniqueId({
+        uniqueId: uuidRef.current,
+        limit,
+      }),
+    );
+  };
+
+  const onPageChange = (offset: number) => {
+    dispatch(
+      setOffsetForUniqueId({
+        uniqueId: uuidRef.current,
+        offset,
+      }),
+    );
+  };
+
+  useEffect(() => {
+    if (defaultFilters)
+      setDefaultFilters({ limit: 10, offset: 0, skip: 0, ...defaultFilters });
+  }, []);
+
+  const filterState = useSelector(
+    (state: RootState) =>
+      state.pageHeader[uuidRef.current] ||
+      ({ filters: { limit: 10, offset: 0, skip: 0 } } as PageHeaderSingleState),
+  );
+
   return {
     columnVisibilityModel: filterState.columnVisibilityModel,
     density: filterState.density,
+    filters: { ...defaultFilters, ...filterState.filters },
     uniqueId: uuidRef.current,
     resetState,
+    setDefaultFilters,
+    onPageChange,
+    onLimitChange,
   };
 };

package/src/redux/slices/pageHeaderSlice.ts

@@ -1,33 +1,95 @@
 import { GridColumnVisibilityModel, GridDensity } from '@mui/x-data-grid';
 import { createSlice } from '@reduxjs/toolkit';
 
-export type PageHeaderState = {
-  [uniqueId: string]: {
-    density: GridDensity;
-    columnVisibilityModel: GridColumnVisibilityModel;
+export type PageHeaderSingleState = {
+  density: GridDensity;
+  columnVisibilityModel: GridColumnVisibilityModel;
+  filters: {
+    search?: string;
+    limit: number;
+    offset: number;
+    skip: number;
+    [x: string]: any;
   };
 };
 
+export type PageHeaderState = {
+  [uniqueId: string]: PageHeaderSingleState;
+};
+
 const initialState: PageHeaderState = {};
 
 export const pageHeaderSlice = createSlice({
   name: 'pageHeader',
   initialState,
   reducers: {
-    setColumnVisibilityModel: (state, action) => {
+    setColumnVisibilityModelForUniqueId: (state, action) => {
       const { uniqueId, columnVisibilityModel } = action.payload;
       state[uniqueId] = { ...state[uniqueId], columnVisibilityModel };
     },
-    setDensity: (state, action) => {
+    setDensityForUniqueId: (state, action) => {
       const { uniqueId, density } = action.payload;
       state[uniqueId] = { ...state[uniqueId], density };
     },
+    setSearchForUniqueId: (state, action) => {
+      const { uniqueId, search } = action.payload;
+      state[uniqueId] = {
+        ...state[uniqueId],
+        filters: {
+          ...state[uniqueId]?.filters,
+          search: search,
+        },
+      };
+    },
     resetStateForUniqueId: (state, action) => {
       const { uniqueId } = action.payload;
-      state[uniqueId] = { density: 'standard', columnVisibilityModel: {} };
+      state[uniqueId] = {
+        density: 'standard',
+        columnVisibilityModel: {},
+        filters: {
+          limit: 10,
+          offset: 0,
+          skip: 0,
+        },
+      };
+    },
+    setLimitForUniqueId: (state, action) => {
+      const { uniqueId, limit } = action.payload;
+      state[uniqueId] = {
+        ...state[uniqueId],
+        filters: {
+          ...state[uniqueId].filters,
+          limit: limit,
+        },
+      };
+    },
+    setOffsetForUniqueId: (state, action) => {
+      const { uniqueId, offset } = action.payload;
+      state[uniqueId] = {
+        ...state[uniqueId],
+        filters: {
+          ...state[uniqueId].filters,
+          offset: offset,
+          skip: offset,
+        },
+      };
+    },
+    setDefaultFiltersForUniqueId: (state, action) => {
+      const { uniqueId, defaultFilters } = action.payload;
+      state[uniqueId] = {
+        ...state[uniqueId],
+        filters: defaultFilters,
+      };
     },
   },
 });
 
-export const { setColumnVisibilityModel, setDensity, resetStateForUniqueId } =
-  pageHeaderSlice.actions;
+export const {
+  setColumnVisibilityModelForUniqueId,
+  setDensityForUniqueId,
+  resetStateForUniqueId,
+  setSearchForUniqueId,
+  setDefaultFiltersForUniqueId,
+  setLimitForUniqueId,
+  setOffsetForUniqueId,
+} = pageHeaderSlice.actions;

package/src/stories/Feedback/Tooltip.stories.tsx

@@ -1,10 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import {
-  Button,
-  Icons,
-  Tooltip,
-  ToolTipContent,
-} from '../../components/export';
+import { Button, Icons, Tooltip } from '../../components/export';
+import { ToolTipContent } from '../../components/Feedback/Tooltip/ToolTipContent';
 
 export default {
   title: 'Feedback/Tooltip',

package/src/stories/Input/TextField.stories.tsx

@@ -5,8 +5,8 @@ import { Meta } from '@storybook/react';
 import { InputAdornment as MuiInputAdornment } from '@mui/material';
 import { Icons } from '../../components/Assets/Icons/Icons';
 
-import { TextField, TextFieldProps, Tooltip, ToolTipContent } from '../../components/export';
-
+import { TextField, TextFieldProps, Tooltip } from '../../components/export';
+import { ToolTipContent } from '../../components/Feedback/Tooltip/ToolTipContent';
 
 // Define the default export with Meta type including the component type
 export default {