feat: add role user modules and shared table updates

src/components/data-table/Header/index.tsx

@@ -1,45 +1,40 @@
 'use client';
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import SearchBar from './SearchBar';
-import { FolderPlus, Settings2, SlidersHorizontal } from 'lucide-react';
-import { Badge } from '@/components/ui/badge';
+import { Plus } from 'lucide-react';
 
 interface TopHeaderProps {
   title?: string;
   itemCount?: number;
   onAddNew?: () => void;
   addButtonText?: string;
+  toolbar?: React.ReactNode;
 }
 
-const TopHeader = ({ title, itemCount, onAddNew, addButtonText = 'Add New' }: TopHeaderProps) => {
+const TopHeader = ({
+  title,
+  itemCount,
+  onAddNew,
+  addButtonText = 'Add New',
+  toolbar,
+}: TopHeaderProps) => {
   return (
-    <div className="flex flex-col gap-1 p-3 w-full">
-      {/* Connected Summary Block */}
-      <div className="w-full bg-muted/10 border border-border/50 rounded-lg p-4 flex items-center">
-        <div className="flex items-center gap-2 text-muted-foreground font-semibold tracking-tight">
-          <span className="text-base text-foreground/80">Total {title || 'Items'} :</span>
-          <span className="text-primary font-bold text-lg">{itemCount || 0}</span>
+    <div className="space-y-4">
+      {(title || onAddNew) && (
+        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+          <div>
+            {title ? <h2 className="text-base font-semibold">{title}</h2> : null}
+            <p className="text-sm text-muted-foreground">Total {itemCount ?? 0}</p>
+          </div>
+          {onAddNew ? (
+            <Button onClick={onAddNew}>
+              <Plus className="mr-2 size-4" />
+              {addButtonText}
+            </Button>
+          ) : null}
         </div>
-      </div>
-
-      <div className="flex items-center justify-between gap-4">
-        {/* Search Bar Hidden for now as per requirement */}
-        {/* <div className="flex w-full max-w-sm">
-                    <SearchBar />
-                </div> */}
-
-        {/* Add New Button moved to PageHeader */}
-        {/* {onAddNew && (
-                    <Button 
-                        onClick={onAddNew}
-                        className="h-11 px-6 rounded-xl bg-primary hover:bg-primary/90 text-primary-foreground font-bold text-sm shadow-md shadow-primary/20 transition-all hover:-translate-y-0.5"
-                    >
-                        <FolderPlus className="mr-2 h-5 w-5" />
-                        {addButtonText}
-                    </Button>
-                )} */}
-      </div>
+      )}
+      {toolbar ? <div>{toolbar}</div> : null}
     </div>
   );
 };