refactor: redesign table module

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

@@ -1,45 +1,47 @@
 "use client";
+import React from "react";
 import { Button } from "@/components/ui/button";
 import SearchBar from "./SearchBar";
-import { PlusIcon } from "lucide-react";
+import { FolderPlus, Settings2, SlidersHorizontal } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 
 interface TopHeaderProps {
-  title?: string;
-  itemCount?: number;
-  onAddNew?: () => void;
-  addButtonText?: string;
+    title?: string;
+    itemCount?: number;
+    onAddNew?: () => void;
+    addButtonText?: string;
 }
 
 const TopHeader = ({ title, itemCount, onAddNew, addButtonText = "Add New" }: TopHeaderProps) => {
-  return (
-    <div className="flex flex-col gap-4 p-4">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
-          {itemCount !== undefined && (
-            <span className="flex items-center justify-center bg-secondary text-secondary-foreground min-w-[24px] h-[24px] px-2 text-xs font-bold rounded-full">
-              {itemCount}
-            </span>
-          )}
+    return (
+        <div className="flex flex-col gap-1 p-3 w-full">
+            {/* Connected Summary Block */}
+            <div className="w-full bg-muted/30 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>
+            </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>
         </div>
-
-        {onAddNew && (
-          <Button 
-            onClick={onAddNew}
-            size="sm"
-            className="flex items-center gap-2"
-          >
-            <PlusIcon className="w-4 h-4" />
-            {addButtonText}
-          </Button>
-        )}
-      </div>
-
-      <div className="flex w-full max-w-sm ml-auto">
-        <SearchBar />
-      </div>
-    </div>
-  );
+    );
 };
 
 export default TopHeader;