@campxdev/react-blueprint 1.6.5 → 1.6.7

package/package.json

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

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

@@ -0,0 +1,21 @@
+export const AssignmentIcon = ({ size = 16 }) => {
+  return (
+    <svg
+      width="60"
+      height="60"
+      viewBox="0 0 60 60"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 4C0 1.79086 1.79086 0 4 0H56C58.2091 0 60 1.79086 60 4V56C60 58.2091 58.2091 60 56 60H4C1.79086 60 0 58.2091 0 56V4Z"
+        fill="#F2353C"
+        fill-opacity="0.2"
+      />
+      <path
+        d="M34.3125 31.875C34.3125 32.1237 34.2137 32.3621 34.0379 32.5379C33.8621 32.7137 33.6236 32.8125 33.375 32.8125H25.875C25.6264 32.8125 25.3879 32.7137 25.2121 32.5379C25.0363 32.3621 24.9375 32.1237 24.9375 31.875C24.9375 31.6264 25.0363 31.3879 25.2121 31.2121C25.3879 31.0363 25.6264 30.9375 25.875 30.9375H33.375C33.6236 30.9375 33.8621 31.0363 34.0379 31.2121C34.2137 31.3879 34.3125 31.6264 34.3125 31.875ZM30.5625 34.6875H25.875C25.6264 34.6875 25.3879 34.7863 25.2121 34.9621C25.0363 35.1379 24.9375 35.3764 24.9375 35.625C24.9375 35.8737 25.0363 36.1121 25.2121 36.2879C25.3879 36.4637 25.6264 36.5625 25.875 36.5625H30.5625C30.8111 36.5625 31.0496 36.4637 31.2254 36.2879C31.4012 36.1121 31.5 35.8737 31.5 35.625C31.5 35.3764 31.4012 35.1379 31.2254 34.9621C31.0496 34.7863 30.8111 34.6875 30.5625 34.6875ZM39 28.5795V36.5625C38.9986 37.8053 38.5043 38.9968 37.6255 39.8755C36.7468 40.7543 35.5553 41.2486 34.3125 41.25H24.9375C23.6947 41.2486 22.5032 40.7543 21.6245 39.8755C20.7457 38.9968 20.2514 37.8053 20.25 36.5625V23.4375C20.2514 22.1947 20.7457 21.0033 21.6245 20.1245C22.5032 19.2457 23.6947 18.7514 24.9375 18.75H29.1705C30.0325 18.7479 30.8865 18.9166 31.6829 19.2464C32.4794 19.5762 33.2026 20.0606 33.8107 20.6715L37.077 23.94C37.6885 24.5477 38.1733 25.2707 38.5034 26.0671C38.8335 26.8635 39.0023 27.7174 39 28.5795ZM32.4855 21.9975C32.1904 21.7117 31.8591 21.4659 31.5 21.2663V25.3125C31.5 25.5612 31.5988 25.7996 31.7746 25.9754C31.9504 26.1512 32.1889 26.25 32.4375 26.25H36.4837C36.284 25.8913 36.0379 25.5604 35.7518 25.266L32.4855 21.9975ZM37.125 28.5795C37.125 28.425 37.095 28.2795 37.0807 28.125H32.4375C31.6916 28.125 30.9762 27.8287 30.4488 27.3013C29.9213 26.7738 29.625 26.0584 29.625 25.3125V20.6693C29.475 20.655 29.325 20.625 29.1705 20.625H24.9375C24.1916 20.625 23.4762 20.9213 22.9488 21.4488C22.4213 21.9762 22.125 22.6916 22.125 23.4375V36.5625C22.125 37.3084 22.4213 38.0238 22.9488 38.5513C23.4762 39.0787 24.1916 39.375 24.9375 39.375H34.3125C35.0584 39.375 35.7738 39.0787 36.3012 38.5513C36.8287 38.0238 37.125 37.3084 37.125 36.5625V28.5795Z"
+        fill="#F2353C"
+      />
+    </svg>
+  );
+};

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

@@ -12,6 +12,7 @@ import { AppsIcon } from './IconComponents/AppsIcon';
 import { ArchiveIcon } from './IconComponents/ArchiveIcon';
 import { ArrowBackIcon } from './IconComponents/ArrowBackIcon';
 import { AssessmentsIcon } from './IconComponents/AssessmentsIcon';
+import { AssignmentIcon } from './IconComponents/AssignmentIcon';
 import { AttachmentIcon } from './IconComponents/AttachmentIcon';
 import { AttendanceIcon } from './IconComponents/AttendanceIcon';
 import { BulbIcon } from './IconComponents/BulbIcon';
@@ -78,6 +79,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,8 +118,10 @@ import { WhatsappIcon } from './IconComponents/WhatsappIcon';
 
 export const Icons = {
   NoteIcon,
+  PrinterIcon,
   RedoIcon,
   WhatsappIcon,
+  AssignmentIcon,
   SmsIcon,
   EmailIcon,
   TextLocalIcon,

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

@@ -87,7 +87,7 @@ export const Card = ({
       {children}
       {imageSrc && <StyledImage src={imageSrc} alt="Card image" />}
       <StyledHeader sx={headerSx}>
-        <Stack gap={'8px'} flexDirection={'row'}>
+        <Stack gap={'8px'} flexDirection={'row'} alignItems={'center'}>
           {/* check box onclick functionality need to add */}
           {/* {checkBox && (
             <StyledStack>
@@ -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/Breadcrumbs/Breadcrumbs.tsx

@@ -3,6 +3,7 @@ import {
   BreadcrumbsProps as MuiBreadcrumbsProps,
   Stack,
   styled,
+  SxProps,
 } from '@mui/material';
 import _ from 'lodash';
 import { Link } from 'react-router-dom';
@@ -12,9 +13,14 @@ import { Typography } from '../../export';
 
 export type BreadcrumbsProps = {
   pathTrimCount: number;
+  containerProps: SxProps;
 } & MuiBreadcrumbsProps;
 
-export const Breadcrumbs = ({ pathTrimCount, ...rest }: BreadcrumbsProps) => {
+export const Breadcrumbs = ({
+  pathTrimCount,
+  containerProps,
+  ...rest
+}: BreadcrumbsProps) => {
   const specialCharacter = getBreadcrumbsCharacter();
   const currentPathArray = window.location.pathname.split('/');
 
@@ -25,7 +31,7 @@ export const Breadcrumbs = ({ pathTrimCount, ...rest }: BreadcrumbsProps) => {
   currentPathArray.splice(0, pathTrimCount + 1);
 
   return (
-    <BreadcrumbContainer>
+    <BreadcrumbContainer sx={containerProps}>
       <MuiBreadcrumbs {...rest}>
         {currentPathArray?.map((item, index) => {
           basePath = basePath + `/${item}`;

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 {