@campxdev/react-blueprint 3.0.0-alpha.6 → 3.0.0-alpha.7

package/dist/esm/types/src/components/DataDisplay/DataTable/DataTable.d.ts

@@ -27,7 +27,7 @@ import { TablePagination, type PaginationProps } from './components/TablePaginat
  * @property {(newSortingState: SortingState) => void} [onSortingChange] - Sorting change callback
  * @property {boolean} [hideTableActionHeader] - Hide the action header
  * @property {Object} [tableActionProps] - Table action header configuration
- * @property {React.ReactNode[]} cards - Card view items for card layout
+ * @property {(row: TData, index: number) => React.ReactNode} [card] - Render function for card layout items
  * @property {string} [className] - CSS class for wrapper
  * @property {string} [tableClassName] - CSS class for table element
  * @property {string} [headerClassName] - CSS class for header row
@@ -66,7 +66,7 @@ type DataTableProps<TData = any> = {
             axios: Axios;
         };
     };
-    cards: React.ReactNode[];
+    card?: (row: TData, index: number) => React.ReactNode;
     className?: string;
     tableClassName?: string;
     headerClassName?: string;
@@ -100,7 +100,7 @@ type DataTableProps<TData = any> = {
  * @param {boolean} [props.isLoading] - Show loading skeletons
  * @param {boolean} [props.hideTableActionHeader] - Hide action header
  * @param {Object} [props.tableActionProps] - Table action configuration
- * @param {React.ReactNode[]} props.cards - Card view items
+ * @param {(row: TData, index: number) => React.ReactNode} [props.card] - Card render function
  * @param {string} [props.className] - Wrapper CSS class
  * @param {string} [props.tableClassName] - Table CSS class
  * @param {string} [props.headerClassName] - Header CSS class

package/dist/esm/types/src/components/DataDisplay/DataTable/components/CardsView.d.ts

@@ -1,3 +1,15 @@
-import { DataTableProps } from '../DataTable';
-declare const CardsView: <TData extends Record<string, any> = any>({ cards, cardContainerClassName, limit, offset, totalCount, onPageChange, onLimitChange, isLoading, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
+type CardsViewProps<TData = any> = {
+    card?: (row: TData, index: number) => React.ReactNode;
+    rows: TData[];
+    cardContainerClassName?: string;
+    isLoading?: boolean;
+    limit?: number;
+    offset?: number;
+    totalCount?: number;
+    onPageChange?: (page: number) => void;
+    onLimitChange?: (limit: number) => void;
+    rowSelectionModel?: Record<string, boolean>;
+    onRowSelectionModelChange?: (newRowSelectionModel: Record<string, boolean>) => void;
+};
+declare const CardsView: <TData extends Record<string, any> = any>({ card, rows, cardContainerClassName, limit, offset, totalCount, onPageChange, onLimitChange, isLoading, }: CardsViewProps<TData>) => import("react/jsx-runtime").JSX.Element;
 export default CardsView;

package/dist/esm/types/src/components/Layout/PageContent/PageContent.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 interface PageContentProps {
     children: ReactNode;
     className?: string;
+    styles?: React.CSSProperties;
 }
 /**
  * PageContent Component
@@ -22,6 +23,6 @@ interface PageContentProps {
  * </PageContent>
  * ```
  */
-declare const PageContent: ({ children, className }: PageContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const PageContent: ({ children, className, styles }: PageContentProps) => import("react/jsx-runtime").JSX.Element;
 export { PageContent };
 export default PageContent;

package/dist/esm/types/src/components/Navigation/TabsContainer/TabsContainer.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 /**
  * Configuration for an individual tab in TabsContainer
  */
@@ -31,6 +32,8 @@ export interface TabsContainerProps {
     tabsListClassName?: string;
     /** Optional CSS class names for each TabsTrigger element */
     tabsTriggerClassName?: string;
+    /** Optional inline styles for the TabsContent container */
+    tabsContainerStyles?: CSSProperties;
     /** Layout variant - 'fixed' uses viewport height, 'dynamic' uses content height. Defaults to 'fixed' */
     variant?: 'fixed' | 'dynamic';
 }
@@ -49,6 +52,7 @@ export interface TabsContainerProps {
  * @param {string} [props.className] - CSS classes for the Tabs root
  * @param {string} [props.tabsListClassName] - CSS classes for the TabsList
  * @param {string} [props.tabsTriggerClassName] - CSS classes for TabsTrigger elements
+ * @param {CSSProperties} [props.tabsContainerStyles] - Inline styles for TabsContent
  * @param {'fixed' | 'dynamic'} [props.variant='fixed'] - Layout mode for tab content
  *
  * @returns {React.ReactElement} A Tabs component with tab list and content area
@@ -95,5 +99,5 @@ export interface TabsContainerProps {
  *   currentTabIndex={0}
  * />
  */
-export declare const TabsContainer: ({ tabs, onTabChange, currentTabIndex, className, tabsListClassName, tabsTriggerClassName, variant, }: TabsContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabsContainer: ({ tabs, onTabChange, currentTabIndex, className, tabsListClassName, tabsTriggerClassName, tabsContainerStyles, variant, }: TabsContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/src/shadcn-components/Input/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: {
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "input";
+    variant?: "input" | "link" | "default" | "destructive" | "outline" | "secondary" | "ghost";
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg";
 } & import("class-variance-authority/dist/types").ClassProp) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, MouseEvent as MouseEvent$1, FC, SyntheticEvent, ReactElement } from 'react';
+import React__default, { ReactNode, MouseEvent as MouseEvent$1, FC, SyntheticEvent, ReactElement, CSSProperties } from 'react';
 import { HorizontalAlignmentType, VerticalAlignmentType, IconType } from 'recharts/types/component/DefaultLegendContent';
 import { LayoutType, AnimationTiming } from 'recharts/types/util/types';
 import { CurveType } from 'recharts/types/shape/Curve';
@@ -1413,7 +1413,7 @@ declare const TablePagination: (props: PaginationProps) => react_jsx_runtime.JSX
  * @property {(newSortingState: SortingState) => void} [onSortingChange] - Sorting change callback
  * @property {boolean} [hideTableActionHeader] - Hide the action header
  * @property {Object} [tableActionProps] - Table action header configuration
- * @property {React.ReactNode[]} cards - Card view items for card layout
+ * @property {(row: TData, index: number) => React.ReactNode} [card] - Render function for card layout items
  * @property {string} [className] - CSS class for wrapper
  * @property {string} [tableClassName] - CSS class for table element
  * @property {string} [headerClassName] - CSS class for header row
@@ -1452,7 +1452,7 @@ type DataTableProps<TData = any> = {
             axios: Axios;
         };
     };
-    cards: React__default.ReactNode[];
+    card?: (row: TData, index: number) => React__default.ReactNode;
     className?: string;
     tableClassName?: string;
     headerClassName?: string;
@@ -1486,7 +1486,7 @@ type DataTableProps<TData = any> = {
  * @param {boolean} [props.isLoading] - Show loading skeletons
  * @param {boolean} [props.hideTableActionHeader] - Hide action header
  * @param {Object} [props.tableActionProps] - Table action configuration
- * @param {React.ReactNode[]} props.cards - Card view items
+ * @param {(row: TData, index: number) => React.ReactNode} [props.card] - Card render function
  * @param {string} [props.className] - Wrapper CSS class
  * @param {string} [props.tableClassName] - Table CSS class
  * @param {string} [props.headerClassName] - Header CSS class
@@ -3425,6 +3425,7 @@ declare function SheetDescription({ className, ...props }: React$1.ComponentProp
 interface PageContentProps {
     children: ReactNode;
     className?: string;
+    styles?: React.CSSProperties;
 }
 /**
  * PageContent Component
@@ -3445,7 +3446,7 @@ interface PageContentProps {
  * </PageContent>
  * ```
  */
-declare const PageContent: ({ children, className }: PageContentProps) => react_jsx_runtime.JSX.Element;
+declare const PageContent: ({ children, className, styles }: PageContentProps) => react_jsx_runtime.JSX.Element;
 
 interface PageHeaderProps {
     uniqueId?: string;
@@ -4287,6 +4288,8 @@ interface TabsContainerProps {
     tabsListClassName?: string;
     /** Optional CSS class names for each TabsTrigger element */
     tabsTriggerClassName?: string;
+    /** Optional inline styles for the TabsContent container */
+    tabsContainerStyles?: CSSProperties;
     /** Layout variant - 'fixed' uses viewport height, 'dynamic' uses content height. Defaults to 'fixed' */
     variant?: 'fixed' | 'dynamic';
 }
@@ -4305,6 +4308,7 @@ interface TabsContainerProps {
  * @param {string} [props.className] - CSS classes for the Tabs root
  * @param {string} [props.tabsListClassName] - CSS classes for the TabsList
  * @param {string} [props.tabsTriggerClassName] - CSS classes for TabsTrigger elements
+ * @param {CSSProperties} [props.tabsContainerStyles] - Inline styles for TabsContent
  * @param {'fixed' | 'dynamic'} [props.variant='fixed'] - Layout mode for tab content
  *
  * @returns {React.ReactElement} A Tabs component with tab list and content area
@@ -4351,7 +4355,7 @@ interface TabsContainerProps {
  *   currentTabIndex={0}
  * />
  */
-declare const TabsContainer: ({ tabs, onTabChange, currentTabIndex, className, tabsListClassName, tabsTriggerClassName, variant, }: TabsContainerProps) => react_jsx_runtime.JSX.Element;
+declare const TabsContainer: ({ tabs, onTabChange, currentTabIndex, className, tabsListClassName, tabsTriggerClassName, tabsContainerStyles, variant, }: TabsContainerProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * Props for the UploadDialog component

package/dist/styles.css

@@ -392,9 +392,6 @@
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
-  .bottom-4 {
-    bottom: calc(var(--spacing) * 4);
-  }
   .bottom-5 {
     bottom: calc(var(--spacing) * 5);
   }
@@ -419,9 +416,6 @@
   .z-50 {
     z-index: 50;
   }
-  .z-\[999\] {
-    z-index: 999;
-  }
   .z-\[1000\] {
     z-index: 1000;
   }
@@ -1269,9 +1263,6 @@
   .rounded-\[5px\] {
     border-radius: 5px;
   }
-  .rounded-\[32px\] {
-    border-radius: 32px;
-  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -1561,18 +1552,6 @@
   .bg-yellow-background {
     background-color: var(--yellow-background);
   }
-  .bg-gradient-to-r {
-    --tw-gradient-position: to right in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
-  .from-\[\#573DAB\] {
-    --tw-gradient-from: #573DAB;
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-\[\#846AD6\] {
-    --tw-gradient-to: #846AD6;
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .fill-current {
     fill: currentcolor;
   }
@@ -4479,48 +4458,6 @@
   inherits: false;
   initial-value: solid;
 }
-@property --tw-gradient-position {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-via {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-to {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-via-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-@property --tw-gradient-via-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 50%;
-}
-@property --tw-gradient-to-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -4713,15 +4650,6 @@
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
-      --tw-gradient-position: initial;
-      --tw-gradient-from: #0000;
-      --tw-gradient-via: #0000;
-      --tw-gradient-to: #0000;
-      --tw-gradient-stops: initial;
-      --tw-gradient-via-stops: initial;
-      --tw-gradient-from-position: 0%;
-      --tw-gradient-via-position: 50%;
-      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "3.0.0-alpha.6",
+  "version": "3.0.0-alpha.7",
   "description": "React UI component library for CampX applications",
   "author": "CampX",
   "license": "MIT",

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

@@ -51,7 +51,7 @@ import {
  * @property {(newSortingState: SortingState) => void} [onSortingChange] - Sorting change callback
  * @property {boolean} [hideTableActionHeader] - Hide the action header
  * @property {Object} [tableActionProps] - Table action header configuration
- * @property {React.ReactNode[]} cards - Card view items for card layout
+ * @property {(row: TData, index: number) => React.ReactNode} [card] - Render function for card layout items
  * @property {string} [className] - CSS class for wrapper
  * @property {string} [tableClassName] - CSS class for table element
  * @property {string} [headerClassName] - CSS class for header row
@@ -103,7 +103,7 @@ type DataTableProps<TData = any> = {
   };
 
   // Card view props
-  cards: React.ReactNode[];
+  card?: (row: TData, index: number) => React.ReactNode;
 
   // Optional customization
   className?: string;
@@ -140,7 +140,7 @@ type DataTableProps<TData = any> = {
  * @param {boolean} [props.isLoading] - Show loading skeletons
  * @param {boolean} [props.hideTableActionHeader] - Hide action header
  * @param {Object} [props.tableActionProps] - Table action configuration
- * @param {React.ReactNode[]} props.cards - Card view items
+ * @param {(row: TData, index: number) => React.ReactNode} [props.card] - Card render function
  * @param {string} [props.className] - Wrapper CSS class
  * @param {string} [props.tableClassName] - Table CSS class
  * @param {string} [props.headerClassName] - Header CSS class
@@ -372,7 +372,19 @@ const DataTable = <TData extends Record<string, any> = any>(
       )}
 
       {layoutMode === 'card' ? (
-        <CardsView {...props} />
+        <CardsView
+          card={props.card}
+          rows={rows}
+          cardContainerClassName={props.cardContainerClassName}
+          limit={limit}
+          offset={offset}
+          totalCount={totalCount}
+          onPageChange={onPageChange}
+          onLimitChange={onLimitChange}
+          isLoading={isLoading}
+          rowSelectionModel={rowSelectionModel}
+          onRowSelectionModelChange={onRowSelectionModelChange}
+        />
       ) : (
         <TableView
           table={table}

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

@@ -2,11 +2,27 @@ import { cn } from '@/lib/utils';
 import { Card } from '@/shadcn-components/DataDisplay/Card/Card';
 import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
 import { Skeleton } from '../../Skeleton/Skeleton';
-import { DataTableProps } from '../DataTable';
 import { TablePagination } from './TablePagination';
 
+type CardsViewProps<TData = any> = {
+  card?: (row: TData, index: number) => React.ReactNode;
+  rows: TData[];
+  cardContainerClassName?: string;
+  isLoading?: boolean;
+  limit?: number;
+  offset?: number;
+  totalCount?: number;
+  onPageChange?: (page: number) => void;
+  onLimitChange?: (limit: number) => void;
+  rowSelectionModel?: Record<string, boolean>;
+  onRowSelectionModelChange?: (
+    newRowSelectionModel: Record<string, boolean>,
+  ) => void;
+};
+
 const CardsView = <TData extends Record<string, any> = any>({
-  cards,
+  card,
+  rows,
   cardContainerClassName = '',
   limit,
   offset,
@@ -14,7 +30,7 @@ const CardsView = <TData extends Record<string, any> = any>({
   onPageChange,
   onLimitChange,
   isLoading,
-}: DataTableProps<TData>) => {
+}: CardsViewProps<TData>) => {
   return (
     <Card
       className={cn('w-full rounded-md border bg-background p-0 m-0 gap-0')}
@@ -22,7 +38,7 @@ const CardsView = <TData extends Record<string, any> = any>({
       <Typography
         className="border-b p-3 bg-secondary text-muted-foreground"
         variant={'small'}
-      >{`Showing ${cards?.length} cards`}</Typography>
+      >{`Showing ${rows?.length} cards`}</Typography>
       <div
         className={cn(
           'grid gap-2 p-3',
@@ -36,21 +52,20 @@ const CardsView = <TData extends Record<string, any> = any>({
       >
         {isLoading ? (
           Array.from({ length: 8 }).map((_, index) => (
-            <div key={`skeleton-card-${index}`} className="flex flex-col h-full gap-3">
+            <div
+              key={`skeleton-card-${index}`}
+              className="flex flex-col h-full gap-3"
+            >
               <Skeleton className="h-40 w-full rounded-lg" />
               <Skeleton className="h-4 w-3/4" />
               <Skeleton className="h-4 w-1/2" />
             </div>
           ))
-        ) : cards && cards.length > 0 ? (
-          cards.map((card, index) => (
-            <div key={index} className={cn('flex flex-col', 'h-full')}>
-              {card}
-            </div>
-          ))
+        ) : card && rows && rows.length > 0 ? (
+          rows.map((row, index) => card(row, index))
         ) : (
           <div className="col-span-full p-4 text-center border rounded-md">
-            <p className="text-muted-foreground">No cards available</p>
+            <p className="text-muted-foreground">No items available</p>
           </div>
         )}
       </div>
@@ -66,7 +81,7 @@ const CardsView = <TData extends Record<string, any> = any>({
             totalCount={totalCount}
             onPageChange={onPageChange}
             onLimitChange={onLimitChange}
-            rowCount={cards?.length || 0}
+            rowCount={rows?.length || 0}
           />
         )}
     </Card>

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

@@ -48,6 +48,16 @@ const ColumnSelector: React.FC<ColumnSelectorProps> = ({
     );
   };
 
+  const handleClearAllHidden = () => {
+    // Clear all hidden columns by resetting to empty object
+    dispatch(
+      setColumnVisibilityModelForUniqueId({
+        uniqueId,
+        columnVisibilityModel: {},
+      }),
+    );
+  };
+
   return (
     <DropdownMenu
       anchor={({ open }) => (
@@ -55,8 +65,8 @@ const ColumnSelector: React.FC<ColumnSelectorProps> = ({
           <Columns3 size={16} />
         </Button>
       )}
-      menu={() =>
-        visibleColumns.map((column) => {
+      menu={() => [
+        ...visibleColumns.map((column) => {
           // React Table uses accessorKey as the column ID if no explicit id is set
           const columnId = column.id || (column as any).accessorKey || '';
           if (!columnId) return null;
@@ -88,8 +98,16 @@ const ColumnSelector: React.FC<ColumnSelectorProps> = ({
               )}
             </div>
           );
-        })
-      }
+        }),
+        <Button
+          variant={'link'}
+          size={'sm'}
+          className="text-destructive hover:no-underline"
+          onClick={handleClearAllHidden}
+        >
+          Clear
+        </Button>,
+      ]}
     />
   );
 };

package/src/components/DataDisplay/DataTable/components/TableHeaders/TableActionHeader.tsx

@@ -95,10 +95,15 @@ const TableActionHeader = ({
       </div>
 
       <div className="flex items-center gap-2">
-        {/* Density Selector  */}
-        <DensitySelector uniqueId={uniqueId} />
-        {/* Column Selector  */}
-        <ColumnSelector columns={columns} uniqueId={uniqueId} />
+        {layoutMode === 'table' && (
+          <>
+            {' '}
+            {/* Density Selector  */}
+            <DensitySelector uniqueId={uniqueId} />
+            {/* Column Selector  */}
+            <ColumnSelector columns={columns} uniqueId={uniqueId} />
+          </>
+        )}
         {/* Layout Switcher */}
         <div className="flex gap-1 border rounded-md flex-shrink-0 bg-background">
           <Button

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

@@ -167,7 +167,11 @@ const TableView = React.forwardRef<HTMLDivElement, TableViewProps>(
                   <TableRow
                     key={row.id}
                     data-state={row.getIsSelected() && 'selected'}
-                    className={cn(rowHeightClass, customRowClassName)}
+                    className={cn(
+                      rowHeightClass,
+                      customRowClassName,
+                      onRowClick && 'cursor-pointer',
+                    )}
                     onClick={() => onRowClick?.({ row })}
                   >
                     {row.getVisibleCells().map((cell: any, index: number) => (

package/src/components/Layout/AppLayout/AppLayout.tsx

@@ -1,7 +1,5 @@
-import { FileText } from 'lucide-react';
 import React from 'react';
 import { useMediaQuery } from '../../../hooks/useMediaQuery';
-import { Button } from '../../Input/Button/Button';
 import { Sidebar } from './components/Sidebar/Sidebar';
 import { SidebarProvider, useSidebar } from './context/SidebarContext';
 import { AppLayoutProps } from './types';
@@ -90,18 +88,11 @@ const AppLayoutContent: React.FC<AppLayoutProps> = ({
         }
       />
 
-      <Button
-        className="bg-gradient-to-r from-[#573DAB] to-[#846AD6] rounded-[32px] fixed bottom-4 right-4 z-[999] p-2"
-        onClick={() => window.open('https://docs.campx.in/', '_blank')}
-      >
-        <FileText className="w-8 h-8 text-white" />
-      </Button>
-
       {/* Main Content */}
       <div
         style={{
           height: '100vh',
-          overflow: 'hidden',
+          overflow: 'auto',
           display: 'flex',
           flexDirection: 'column',
         }}

package/src/components/Layout/AppLayout/components/UserProfilePopup.tsx

@@ -130,7 +130,7 @@ export const UserProfilePopup: React.FC<UserProfilePopupProps> = ({
           label={
             <div className="flex flex-col gap-1 flex-1">
               Account
-              <div className="flex flex-row items-center justify-between">
+              <div className="flex flex-row items-center justify-between gap-4">
                 <div className="flex flex-row gap-2">
                   <CircularAvatar
                     text={userFullName}

package/src/components/Layout/PageContent/PageContent.tsx

@@ -5,6 +5,7 @@ import { ReactNode } from 'react';
 interface PageContentProps {
   children: ReactNode;
   className?: string;
+  styles?: React.CSSProperties;
 }
 
 /**
@@ -26,7 +27,7 @@ interface PageContentProps {
  * </PageContent>
  * ```
  */
-const PageContent = ({ children, className }: PageContentProps) => {
+const PageContent = ({ children, className, styles }: PageContentProps) => {
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
   return (
@@ -36,9 +37,9 @@ const PageContent = ({ children, className }: PageContentProps) => {
         className,
       )}
       style={{
-        height: isSmallScreen ? 'calc(100vh - 101px)' : `calc(100vh - 90px)`,
-        maxHeight: isSmallScreen ? 'calc(100vh - 101px)' : `calc(100vh - 90px)`,
+        height: isSmallScreen ? 'calc(100vh - 101px)' : `calc(100vh - 80px)`,
         overflowY: 'auto',
+        ...styles,
       }}
     >
       {children}

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

@@ -9,7 +9,10 @@ import { cn } from '@/lib/utils';
 import { EllipsisVertical, Funnel, Plus } from 'lucide-react';
 import { cloneElement, ReactElement, ReactNode } from 'react';
 import { useDispatch } from 'react-redux';
-import { setFilterByNameForUniqueId } from '../../../redux/slices/pageHeaderSlice';
+import {
+  resetStateForUniqueId,
+  setFilterByNameForUniqueId,
+} from '../../../redux/slices/pageHeaderSlice';
 import { SearchBarProps } from '../../Input/SearchBar/SearchBar';
 import { Breadcrumbs } from '../../Navigation/Breadcrumbs/Breadcrumbs';
 import { PageHeaderSearchBar } from './components/SearchBar';
@@ -144,12 +147,24 @@ const PageHeader = ({
               useMenuSlot={true}
               menuSlot={() => (
                 <div className="flex flex-col gap-2 p-1 w-80">
-                  <Typography
-                    variant={'lead'}
-                    className="flex gap-1 items-center p-1 pb-0 text-sm"
-                  >
-                    <Funnel size={16} /> Advanced Filters
-                  </Typography>
+                  <div className="flex justify-between">
+                    <Typography
+                      variant={'lead'}
+                      className="flex gap-1 items-center p-1 pb-0 text-sm"
+                    >
+                      <Funnel size={16} /> Advanced Filters
+                    </Typography>
+                    <Button
+                      variant={'link'}
+                      size={'sm'}
+                      className="text-destructive hover:no-underline"
+                      onClick={() =>
+                        dispatch(resetStateForUniqueId({ uniqueId }))
+                      }
+                    >
+                      Clear
+                    </Button>
+                  </div>
                   <Separator />
                   {filterButtonProps.components.map((component, index) => (
                     <div key={index} className="w-full ">