Navigation bar fixed on all pages

src/app/production/NavigationTabs.tsx

@@ -1,24 +1,25 @@
+"use client";
+import { useState } from "react";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import React from "react";
 
 const NavigationTabs: React.FC = () => {
-  const tabs = [
-    "Overview",
-    "Production Lines",
-    "Quality Control",
-    "Maintenance",
-  ];
-
+  const [activeTab, setActiveTab] = useState("overview");
   return (
-    <nav className="flex gap-4 mb-6 max-sm:hidden">
-      {tabs.map((tab) => (
-        <button
-          key={tab}
-          className="px-3 py-1.5 text-sm font-medium leading-5 rounded cursor-pointer bg-muted text-muted-foreground"
-        >
-          {tab}
-        </button>
-      ))}
-    </nav>
+    <div className="font-inter">
+      <Tabs
+        value={activeTab}
+        onValueChange={setActiveTab}
+        className="space-y-6"
+      >
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="shipment">Shipment</TabsTrigger>
+          <TabsTrigger value="tracking">Tracking</TabsTrigger>
+          <TabsTrigger value="carriers">Carriers</TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
   );
 };
 

src/components/Blockchain/Blockchain.tsx

@@ -25,7 +25,7 @@ export function Blockchain() {
         onValueChange={setActiveTab}
         className="space-y-6"
       >
-        <TabsList className="grid w-full grid-cols-4 lg:w-[400px]">
+        <TabsList>
           <TabsTrigger value="overview">Overview</TabsTrigger>
           <TabsTrigger value="transactions">Transactions</TabsTrigger>
           <TabsTrigger value="contracts">Smart Contracts</TabsTrigger>

src/components/Inventory/InventoryTabs.tsx

@@ -2,27 +2,11 @@
 
 import { useState } from "react";
 import Inventory from "./Inventory";
-
-const tabs = ["Overview", "Inventory Items", "Alerts", "Analytics"];
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 const InventoryTabs = () => {
   const [activeTab, setActiveTab] = useState("Overview");
 
-  const renderTabContent = () => {
-    switch (activeTab) {
-      case "Overview":
-        return <Inventory />;
-      case "Inventory Items":
-        return <h1>Inventory Items</h1>;
-      case "Alerts":
-        return <h1>Alerts</h1>;
-      case "Analytics":
-        return <h1>Analytics</h1>;
-      default:
-        return null;
-    }
-  };
-
   return (
     <div className="bg-background text-foreground min-h-screen p-6">
       {/* Header */}
@@ -34,24 +18,20 @@ const InventoryTabs = () => {
       </div>
 
       {/* Tabs */}
-      <div className="flex flex-wrap gap-2 bg-card p-3 rounded-lg mb-6 w-full md:max-w-[450px] max-w-[600px] border border-border">
-        {tabs.map((tab) => (
-          <button
-            key={tab}
-            onClick={() => setActiveTab(tab)}
-            className={`flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium transition border border-border ${
-              activeTab === tab
-                ? "bg-muted text-foreground"
-                : "text-muted-foreground hover:bg-muted hover:text-foreground"
-            }`}
-          >
-            {tab}
-          </button>
-        ))}
+      <div className="font-inter">
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="space-y-6"
+        >
+          <TabsList>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="shipment">Shipment</TabsTrigger>
+            <TabsTrigger value="tracking">Tracking</TabsTrigger>
+            <TabsTrigger value="carriers">Carriers</TabsTrigger>
+          </TabsList>
+        </Tabs>
       </div>
-
-      {/* Dynamic content */}
-      <div className="mt-6">{renderTabContent()}</div>
     </div>
   );
 };

src/components/Logistics/Logistics.tsx

@@ -1,60 +1,10 @@
 "use client";
-import {
-  Truck,
-  Calendar,
-  Clock,
-  CircleCheck,
-  MoveUpRight,
-  MoveDownRight,
-} from "lucide-react";
 import { useState } from "react";
-import ShipmentStatus from "./ShipmentStatus";
-import LogisticsAlerts from "./LogisticsAlerts";
-import LogisticsMap from "./LogisticsMap";
-import DeliveryPerformance from "./DeliverPerformance";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import Overview from "./Overview";
 
 const Logistics = () => {
-  const [selected, setSelected] = useState("Overview");
-  const Tablist = [
-    { name: "Overview" },
-    { name: "Shipment" },
-    { name: "Tracking" },
-    { name: "Carriers" },
-  ];
-  const Data = [
-    {
-      heading: "Active Shipments",
-      info: "3",
-      stat: "+2",
-      time: "from last week",
-      icon: <Truck size={16} />,
-      status: "up",
-    },
-    {
-      heading: "On-Time Delivery",
-      info: "92.5%",
-      stat: "+1.2%",
-      time: "from last month",
-      icon: <Calendar size={16} />,
-      status: "up",
-    },
-    {
-      heading: "Average Transit Time",
-      info: "3.2 days",
-      stat: "+0.5 days",
-      time: "from last month",
-      icon: <Clock size={16} />,
-      status: "down",
-    },
-    {
-      heading: "Verified Shipments",
-      info: "80%",
-      stat: "+5%",
-      time: "from last month",
-      icon: <CircleCheck size={16} />,
-      status: "up",
-    },
-  ];
+  const [activeTab, setActiveTab] = useState("overview");
 
   return (
     <div className="p-4 md:p-8 font-inter max-w-full overflow-x-hidden">
@@ -66,65 +16,19 @@ const Logistics = () => {
         </p>
       </div>
       <div className="font-inter pt-6">
-        <ul className="flex bg-[#f1f5f9] w-[350px] h-[40px] gap-2 p-1 justify-center items-center text-center rounded-[6px]">
-          {Tablist.map((item) => (
-            <li
-              key={item.name}
-              className={`p-1 rounded-[4px] font-medium text-[14px] text-[#64748b] w-[87.5px] cursor-pointer hover:bg-white
-                ${selected === item.name ? "bg-white text-black" : ""}`}
-              onClick={() => setSelected(item.name)}
-            >
-              {item.name}
-            </li>
-          ))}
-        </ul>
-      </div>
-      <div className="py-4 font-inter">
-        <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-          {Data.map((item) => (
-            <li
-              key={item.heading}
-              className="min-h-[142px] border border-[#e2e8f0] rounded-[8px] p-4"
-            >
-              <div>
-                <div className="flex justify-between items-center">
-                  <div className="text-[14px] text-[#020817] font-medium">
-                    {item.heading}
-                  </div>
-                  <div>{item.icon}</div>
-                </div>
-                <div className="font-bold text-[24px] text-[#020817] pt-2">
-                  {item.info}
-                </div>
-                <div
-                  className={`flex items-center gap-1 ${
-                    item.status === "up" ? "text-[#10b189]" : "text-[#f43f5e]"
-                  }`}
-                >
-                  <div>
-                    {item.status === "up" ? (
-                      <MoveUpRight size={16} />
-                    ) : (
-                      <MoveDownRight size={16} />
-                    )}
-                  </div>
-                  <div className="font-normal text-[12px]">{item.stat}</div>
-                </div>
-                <div className="font-normal text-[12px] text-[#64748b]">
-                  {item.time}
-                </div>
-              </div>
-            </li>
-          ))}
-        </ul>
-      </div>
-      <div className="flex flex-col lg:flex-row gap-4 font-inter">
-        <DeliveryPerformance />
-        <ShipmentStatus />
-      </div>
-      <div className="flex flex-col lg:flex-row gap-4 font-inter pt-4">
-        <LogisticsMap />
-        <LogisticsAlerts />
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="space-y-6"
+        >
+          <TabsList>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="shipment">Shipment</TabsTrigger>
+            <TabsTrigger value="tracking">Tracking</TabsTrigger>
+            <TabsTrigger value="carriers">Carriers</TabsTrigger>
+          </TabsList>
+          <Overview />
+        </Tabs>
       </div>
     </div>
   );

src/components/Logistics/Overview.tsx

@@ -0,0 +1,102 @@
+import {
+  MoveUpRight,
+  MoveDownRight,
+  Truck,
+  Calendar,
+  Clock,
+  CircleCheck,
+} from "lucide-react";
+import { TabsContent } from "@/components/ui/tabs";
+import ShipmentStatus from "./ShipmentStatus";
+import LogisticsAlerts from "./LogisticsAlerts";
+import LogisticsMap from "./LogisticsMap";
+import DeliveryPerformance from "./DeliverPerformance";
+
+const Overview = () => {
+  const Data = [
+    {
+      heading: "Active Shipments",
+      info: "3",
+      stat: "+2",
+      time: "from last week",
+      icon: <Truck size={16} />,
+      status: "up",
+    },
+    {
+      heading: "On-Time Delivery",
+      info: "92.5%",
+      stat: "+1.2%",
+      time: "from last month",
+      icon: <Calendar size={16} />,
+      status: "up",
+    },
+    {
+      heading: "Average Transit Time",
+      info: "3.2 days",
+      stat: "+0.5 days",
+      time: "from last month",
+      icon: <Clock size={16} />,
+      status: "down",
+    },
+    {
+      heading: "Verified Shipments",
+      info: "80%",
+      stat: "+5%",
+      time: "from last month",
+      icon: <CircleCheck size={16} />,
+      status: "up",
+    },
+  ];
+  return (
+    <TabsContent value="overview">
+      <div className="py-4 font-inter">
+        <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {Data.map((item) => (
+            <li
+              key={item.heading}
+              className="min-h-[142px] border border-[#e2e8f0] rounded-[8px] p-4"
+            >
+              <div>
+                <div className="flex justify-between items-center">
+                  <div className="text-[14px] text-[#020817] font-medium">
+                    {item.heading}
+                  </div>
+                  <div>{item.icon}</div>
+                </div>
+                <div className="font-bold text-[24px] text-[#020817] pt-2">
+                  {item.info}
+                </div>
+                <div
+                  className={`flex items-center gap-1 ${
+                    item.status === "up" ? "text-[#10b189]" : "text-[#f43f5e]"
+                  }`}
+                >
+                  <div>
+                    {item.status === "up" ? (
+                      <MoveUpRight size={16} />
+                    ) : (
+                      <MoveDownRight size={16} />
+                    )}
+                  </div>
+                  <div className="font-normal text-[12px]">{item.stat}</div>
+                </div>
+                <div className="font-normal text-[12px] text-[#64748b]">
+                  {item.time}
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="flex flex-col lg:flex-row gap-4 font-inter">
+        <DeliveryPerformance />
+        <ShipmentStatus />
+      </div>
+      <div className="flex flex-col lg:flex-row gap-4 font-inter pt-4">
+        <LogisticsMap />
+        <LogisticsAlerts />
+      </div>
+    </TabsContent>
+  );
+};
+export default Overview;