refactor: redesign table module

src/app/(modules)/layout.tsx

@@ -1,6 +1,8 @@
+import { BreadcrumbBasic } from "@/components/app-breadcrumb";
 import { AppSidebar } from "@/components/app-sidebar";
 import { ModeToggle } from "@/components/mode-toogle";
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { Separator } from "@/components/ui/separator";
 import React from "react";
 
 const ModulesLayout = ({
@@ -11,15 +13,23 @@ const ModulesLayout = ({
   return (
     <SidebarProvider>
       <AppSidebar />
-      <main className="flex flex-1 flex-col p-4 pt-0 w-full h-screen overflow-hidden">
-        <div className="flex gap-3 items-center mt-2 sticky top-0 bg-background z-50 py-2">
-          <SidebarTrigger />
-          <ModeToggle />
+      <main className="flex flex-1 flex-col w-full h-screen overflow-hidden">
+        <div className="flex-1 overflow-auto">
+          {/* Centering container wrapper */}
+          <div className="max-w-380 mx-auto w-full flex flex-col min-h-full">
+            <div className="flex gap-3 items-center sticky top-0 bg-background/50 backdrop-blur-md z-30 py-3 px-6 border-b border-border/10">
+              <SidebarTrigger />
+              <ModeToggle />
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <BreadcrumbBasic />
+            </div>
+            <div className="p-6 flex-1">{children}</div>
+          </div>
         </div>
-        <div className="flex-1 py-2  overflow-auto">{children}</div>
       </main>
     </SidebarProvider>
   );
 };
 
+
 export default ModulesLayout;