From e5ee4d0169f8029db708e4938e87df22fe86e3e9 Mon Sep 17 00:00:00 2001 From: YakshitAgarwal Date: Wed, 20 Aug 2025 15:41:49 +0530 Subject: [PATCH] Navigation bar fixed on allp ages --- src/app/production/NavigationTabs.tsx | 35 ++--- src/components/Blockchain/Blockchain.tsx | 2 +- src/components/Inventory/InventoryTabs.tsx | 48 ++----- src/components/Logistics/Logistics.tsx | 128 +++--------------- src/components/Logistics/Overview.tsx | 102 ++++++++++++++ src/components/molecules/AnalyticsHeader.tsx | 36 +++-- src/components/molecules/Dashboard.tsx | 122 ++++++++--------- src/components/molecules/DashboardTabs.tsx | 58 +++----- src/components/organism/Inventory.tsx | 4 +- src/components/organism/SupplierTab.tsx | 48 ++----- .../{bloackchain.tsx => blockchain.tsx} | 0 src/components/ui/tabs.tsx | 26 ++-- 12 files changed, 266 insertions(+), 343 deletions(-) create mode 100644 src/components/Logistics/Overview.tsx rename src/components/organism/{bloackchain.tsx => blockchain.tsx} (100%) diff --git a/src/app/production/NavigationTabs.tsx b/src/app/production/NavigationTabs.tsx index 3a3efca..6b1492f 100644 --- a/src/app/production/NavigationTabs.tsx +++ b/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 ( - +
+ + + Overview + Shipment + Tracking + Carriers + + +
); }; diff --git a/src/components/Blockchain/Blockchain.tsx b/src/components/Blockchain/Blockchain.tsx index e203c19..70d35ef 100644 --- a/src/components/Blockchain/Blockchain.tsx +++ b/src/components/Blockchain/Blockchain.tsx @@ -25,7 +25,7 @@ export function Blockchain() { onValueChange={setActiveTab} className="space-y-6" > - + Overview Transactions Smart Contracts diff --git a/src/components/Inventory/InventoryTabs.tsx b/src/components/Inventory/InventoryTabs.tsx index c7b3cff..2521ca4 100644 --- a/src/components/Inventory/InventoryTabs.tsx +++ b/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 ; - case "Inventory Items": - return

Inventory Items

; - case "Alerts": - return

Alerts

; - case "Analytics": - return

Analytics

; - default: - return null; - } - }; - return (
{/* Header */} @@ -34,24 +18,20 @@ const InventoryTabs = () => {
{/* Tabs */} -
- {tabs.map((tab) => ( - - ))} +
+ + + Overview + Shipment + Tracking + Carriers + +
- - {/* Dynamic content */} -
{renderTabContent()}
); }; diff --git a/src/components/Logistics/Logistics.tsx b/src/components/Logistics/Logistics.tsx index 8db11a3..7228d52 100644 --- a/src/components/Logistics/Logistics.tsx +++ b/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: , - status: "up", - }, - { - heading: "On-Time Delivery", - info: "92.5%", - stat: "+1.2%", - time: "from last month", - icon: , - status: "up", - }, - { - heading: "Average Transit Time", - info: "3.2 days", - stat: "+0.5 days", - time: "from last month", - icon: , - status: "down", - }, - { - heading: "Verified Shipments", - info: "80%", - stat: "+5%", - time: "from last month", - icon: , - status: "up", - }, - ]; + const [activeTab, setActiveTab] = useState("overview"); return (
@@ -66,65 +16,19 @@ const Logistics = () => {

-
    - {Tablist.map((item) => ( -
  • setSelected(item.name)} - > - {item.name} -
    • - ))} -
-
-
-
    - {Data.map((item) => ( -
  • -
    -
    -
    - {item.heading} -
    -
    {item.icon}
    -
    -
    - {item.info} -
    -
    -
    - {item.status === "up" ? ( - - ) : ( - - )} -
    -
    {item.stat}
    -
    -
    - {item.time} -
    -
    -
    • - ))} -
-
-
- - -
-
- - + + + Overview + Shipment + Tracking + Carriers + + +
); diff --git a/src/components/Logistics/Overview.tsx b/src/components/Logistics/Overview.tsx new file mode 100644 index 0000000..b47afda --- /dev/null +++ b/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: , + status: "up", + }, + { + heading: "On-Time Delivery", + info: "92.5%", + stat: "+1.2%", + time: "from last month", + icon: , + status: "up", + }, + { + heading: "Average Transit Time", + info: "3.2 days", + stat: "+0.5 days", + time: "from last month", + icon: , + status: "down", + }, + { + heading: "Verified Shipments", + info: "80%", + stat: "+5%", + time: "from last month", + icon: , + status: "up", + }, + ]; + return ( + +
+
    + {Data.map((item) => ( +
  • +
    +
    +
    + {item.heading} +
    +
    {item.icon}
    +
    +
    + {item.info} +
    +
    +
    + {item.status === "up" ? ( + + ) : ( + + )} +
    +
    {item.stat}
    +
    +
    + {item.time} +
    +
    +
    • + ))} +
+
+
+ + +
+
+ + +
+ + ); +}; +export default Overview; diff --git a/src/components/molecules/AnalyticsHeader.tsx b/src/components/molecules/AnalyticsHeader.tsx index 77e255b..c57acc1 100644 --- a/src/components/molecules/AnalyticsHeader.tsx +++ b/src/components/molecules/AnalyticsHeader.tsx @@ -1,6 +1,10 @@ +"use client"; +import { useState } from "react"; +import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Calendar, Download, Share2 } from "lucide-react"; export default function AnalyticsHeader() { + const [activeTab, setActiveTab] = useState("overview"); return (
{/* Header & Description */} @@ -40,30 +44,24 @@ export default function AnalyticsHeader() {
{/* Tabs */} -
- - - - +
+ + + Overview + Shipment + Tracking + Carriers + +
); } - - - - - - // import { Calendar, Download, Share2 } from "lucide-react"; // export default function AnalyticsHeader() { diff --git a/src/components/molecules/Dashboard.tsx b/src/components/molecules/Dashboard.tsx index c890dfd..148de00 100644 --- a/src/components/molecules/Dashboard.tsx +++ b/src/components/molecules/Dashboard.tsx @@ -1,46 +1,47 @@ -'use client'; +"use client"; -import AlertsNotifications from '../atoms/AlertsNotifications'; -import BlockchainTransactions from '../atoms/BlockchainTransactions'; -import InventoryLevels from '../atoms/InventoryLevels'; -import InventoryStatus from '../atoms/InventoryStatus'; -import ProductionStatus from './ProductionStatus'; -import SupplyChainVisibility from '../organism/SupplyChainVisibility'; -import TopSuppliers from '../atoms/TopSuppliers'; +import AlertsNotifications from "../atoms/AlertsNotifications"; +import BlockchainTransactions from "../atoms/BlockchainTransactions"; +import InventoryLevels from "../atoms/InventoryLevels"; +import InventoryStatus from "../atoms/InventoryStatus"; +import ProductionStatus from "./ProductionStatus"; +import SupplyChainVisibility from "../organism/SupplyChainVisibility"; +import TopSuppliers from "../atoms/TopSuppliers"; import { MdInventory, MdProductionQuantityLimits, MdLocalShipping, -} from 'react-icons/md'; -import { SiBlockchaindotcom } from 'react-icons/si'; -import DashboardMetrics from '../atoms/DashboarMetrics'; +} from "react-icons/md"; +import { SiBlockchaindotcom } from "react-icons/si"; +import DashboardMetrics from "../atoms/DashboarMetrics"; +import { TabsContent } from "@/components/ui/tabs"; const metrics = [ { - title: 'Total Inventory Value', - value: '$1,284,342', - change: '2.5%', + title: "Total Inventory Value", + value: "$1,284,342", + change: "2.5%", isPositive: true, icon: , }, { - title: 'Production Efficiency', - value: '94.2%', - change: '1.2%', + title: "Production Efficiency", + value: "94.2%", + change: "1.2%", isPositive: true, icon: , }, { - title: 'On-Time Delivery', - value: '89.7%', - change: '0.9%', + title: "On-Time Delivery", + value: "89.7%", + change: "0.9%", isPositive: false, icon: , }, { - title: 'Blockchain Transactions', - value: '1,482', - change: '13.3%', + title: "Blockchain Transactions", + value: "1,482", + change: "13.3%", isPositive: false, icon: , }, @@ -48,54 +49,37 @@ const metrics = [ export default function DashboardPage() { return ( -
- {/* Top summary section */} -

- Dashboard -

-

- Overview of your supply chain operations and blockchain transactions -

-
-
- - - - + +
+
+
+ {metrics.map((metric, index) => ( + + ))} +
+
+ {/* Main chart sections */} +
+ {/* Inventory and Production charts */} +
+ + +
+ {/* Supply Chain Visibility */} +
+ + +
+ {/* Inventory Status Chart */} +
-
- {metrics.map((metric, index) => ( - - ))} + {/* Bottom Alerts/Inventory/Suppliers */} +
+ + +
-
- {/* Main chart sections */} -
- {/* Inventory and Production charts */} -
- - -
- {/* Supply Chain Visibility */} -
- - -
- {/* Inventory Status Chart */} -
-
- {/* Bottom Alerts/Inventory/Suppliers */} -
- - -
-
+ ); } diff --git a/src/components/molecules/DashboardTabs.tsx b/src/components/molecules/DashboardTabs.tsx index 89e51b7..0a54097 100644 --- a/src/components/molecules/DashboardTabs.tsx +++ b/src/components/molecules/DashboardTabs.tsx @@ -1,61 +1,37 @@ "use client"; import { useState } from "react"; +import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import DashboardPage from "./Dashboard"; import Inventory from "../organism/Inventory"; import Production from "../organism/Production"; -import BlockChain from "../organism/bloackchain"; - - -const tabs = ["Overview", "Inventory", "Production", "Blockchain"]; +import BlockChain from "../organism/blockchain"; const DashboardTabs = () => { - const [activeTab, setActiveTab] = useState("Overview"); - - const renderTabContent = () => { - switch (activeTab) { - case "Overview": - return ; - case "Inventory": - return ; - case "Production": - return ; - case "Blockchain": - return ; - default: - return null; - } - }; + const [activeTab, setActiveTab] = useState("overview"); return ( -
- {/* Header */} +

Dashboard

Overview of your supply chain operations and blockchain transactions

- - {/* Tabs */} -
- {tabs.map((tab) => ( - - ))} +
+ + + Overview + Inventory + Production + Blockchain + +
- - {/* Dynamic content */} -
{renderTabContent()}
); }; diff --git a/src/components/organism/Inventory.tsx b/src/components/organism/Inventory.tsx index d5c9d37..e72a67a 100644 --- a/src/components/organism/Inventory.tsx +++ b/src/components/organism/Inventory.tsx @@ -5,8 +5,6 @@ import WarehouseDistribution from "../molecules/WarehouseDistribution"; import InventoryStartCards from "../molecules/InventoryStartCards"; import RecentMovements from "../molecules/RecentMovements"; - - export default function Inventory() { return (
@@ -23,5 +21,5 @@ export default function Inventory() {
- ) + ); } diff --git a/src/components/organism/SupplierTab.tsx b/src/components/organism/SupplierTab.tsx index b48e3ed..8c113b8 100644 --- a/src/components/organism/SupplierTab.tsx +++ b/src/components/organism/SupplierTab.tsx @@ -2,27 +2,11 @@ import { useState } from "react"; import Supplier from "./Supplier"; - -const tabs = ["Overview", "Suppliers", "Performance", "Contracts"]; +import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; const SupplierTabs = () => { const [activeTab, setActiveTab] = useState("Overview"); - const renderTabContent = () => { - switch (activeTab) { - case "Overview": - return ; - case "Suppliers": - return

Suppliers

; - case "Performance": - return

Performance

; - case "Contracts": - return

Contracts

; - default: - return null; - } - }; - return (
{/* Header */} @@ -34,24 +18,20 @@ const SupplierTabs = () => {
{/* Tabs */} -
- {tabs.map((tab) => ( - - ))} +
+ + + Overview + Shipment + Tracking + Carriers + +
- - {/* Dynamic content */} -
{renderTabContent()}
); }; diff --git a/src/components/organism/bloackchain.tsx b/src/components/organism/blockchain.tsx similarity index 100% rename from src/components/organism/bloackchain.tsx rename to src/components/organism/blockchain.tsx diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx index 497ba5e..bd0423d 100644 --- a/src/components/ui/tabs.tsx +++ b/src/components/ui/tabs.tsx @@ -1,9 +1,9 @@ -"use client" +"use client"; -import * as React from "react" -import * as TabsPrimitive from "@radix-ui/react-tabs" +import * as React from "react"; +import * as TabsPrimitive from "@radix-ui/react-tabs"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; function Tabs({ className, @@ -12,10 +12,10 @@ function Tabs({ return ( - ) + ); } function TabsList({ @@ -26,12 +26,12 @@ function TabsList({ - ) + ); } function TabsTrigger({ @@ -42,12 +42,12 @@ function TabsTrigger({ - ) + ); } function TabsContent({ @@ -57,10 +57,10 @@ function TabsContent({ return ( - ) + ); } -export { Tabs, TabsList, TabsTrigger, TabsContent } +export { Tabs, TabsList, TabsTrigger, TabsContent };