From 9cdfd37e60e7a315310c1db2000e922d18c58cab Mon Sep 17 00:00:00 2001
From: Michael Oduah <oduahmichaelebuka@gmail.com>
Date: Fri, 1 Nov 2024 16:30:28 +0100
Subject: [PATCH 1/2] Updated register form

---
 src/app/(auth)/register/page.tsx          | 14 +++++++-------
 src/components/Breadcrumbs/Breadcrumb.tsx |  6 +++---
 src/components/Dashboard/Dashboard.tsx    |  4 +---
 src/components/Sidebar/index.tsx          |  5 ++---
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/app/(auth)/register/page.tsx b/src/app/(auth)/register/page.tsx
index 24119b5..65fcb55 100644
--- a/src/app/(auth)/register/page.tsx
+++ b/src/app/(auth)/register/page.tsx
@@ -149,7 +149,7 @@ const Register: React.FC = () => {
                 htmlFor="email"
                 className="block mb-2 text-lg font-medium text-[#000000]"
               >
-                Email Address
+                Description
               </label>
               <input
                 type="email"
@@ -158,7 +158,7 @@ const Register: React.FC = () => {
                 value={description}
                 onChange={(event) => setDescription(event.target?.value)}
                 className="bg-white border border-black text-[#000000] text-sm rounded-full block w-full p-3 placeholder-[#000000]"
-                placeholder="name@gmail.com"
+                placeholder="Description"
                 required
               />
             </div>
@@ -243,7 +243,7 @@ const Register: React.FC = () => {
                 value={address}
                 onChange={(event) => setAddress(event.target?.value)}
                 className="bg-white border border-black text-[#000000] text-sm rounded-full block w-full p-3 placeholder-[#000000]"
-                placeholder="name@gmail.com"
+                placeholder="Store address"
                 required
               />
             </div>
@@ -255,13 +255,13 @@ const Register: React.FC = () => {
                 Opening Time
               </label>
               <input
-                type="tel"
+                type="text"
                 id="phone"
                 name="phone"
                 value={opening_time}
                 onChange={(event) => setOpeningTime(event.target?.value)}
                 className="bg-white border border-black text-[#000000] text-sm rounded-full block w-full p-3 placeholder-[#000000]"
-                placeholder="Phone Number"
+                placeholder="Opening Time"
                 required
               />
             </div>
@@ -273,13 +273,13 @@ const Register: React.FC = () => {
                 Closing Time
               </label>
               <input
-                type="tel"
+                type="text"
                 id="phone"
                 name="phone"
                 value={closing_time}
                 onChange={(event) => setClosingTime(event.target?.value)}
                 className="bg-white border border-black text-[#000000] text-sm rounded-full block w-full p-3 placeholder-[#000000]"
-                placeholder="Phone Number"
+                placeholder="Closing Time"
                 required
               />
             </div>
diff --git a/src/components/Breadcrumbs/Breadcrumb.tsx b/src/components/Breadcrumbs/Breadcrumb.tsx
index a4b5fc7..b33a44d 100644
--- a/src/components/Breadcrumbs/Breadcrumb.tsx
+++ b/src/components/Breadcrumbs/Breadcrumb.tsx
@@ -76,9 +76,9 @@ const Breadcrumb = ({ pageName }: BreadcrumbProps) => {
   if (!user) {
     return <div>Loading...</div>;
   }
-  if (loading) return <div>Loading vendor details...</div>;
-  if (error) return <div>Error: {error}</div>;
-  if (!vendor) return <div>No vendor found</div>;
+
+  
+  if (!vendor) return null;
 
   return (
     <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index b54206a..c9e8975 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -125,9 +125,7 @@ const VendorDashboard = () => {
     return <div>Loading...</div>;
   }
 
-  if (loading) return <div>Loading vendor details...</div>;
-  if (error) return <div>Error: {error}</div>;
-  if (!vendor) return <div>No vendor found</div>;
+  if (!vendor) return null;
 
   return (
     <>
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index 3f28770..ec63a7c 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -97,9 +97,8 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
   if (!user) {
     return <div>Loading...</div>;
   }
-  if (loading) return <div>Loading vendor details...</div>;
-  if (error) return <div>Error: {error}</div>;
-  if (!vendor) return <div>No vendor found</div>;
+  
+  if (!vendor) return null;
 
   const menuGroups =  [
     {

From b4a5c63147a2be13fef06c965de50b657d4a36fe Mon Sep 17 00:00:00 2001
From: Michael Oduah <oduahmichaelebuka@gmail.com>
Date: Fri, 1 Nov 2024 17:42:53 +0100
Subject: [PATCH 2/2] Updated the routing system

---
 .../vendor/add-account/{ => [slug]}/page.tsx  |   0
 .../category/{ => [slug]}/[id]/page.jsx       |   0
 .../{ => [slug]}/add-category/page.jsx        |   0
 .../vendor/category/{ => [slug]}/page.jsx     |   0
 .../vendor/deposit/{ => [slug]}/page.tsx      |   0
 .../vendor/foods/{ => [slug]}/[id]/page.tsx   |   0
 .../foods/{ => [slug]}/add-food/page.jsx      |   0
 .../(app)/vendor/foods/{ => [slug]}/page.jsx  |   0
 .../vendor/order-item/{ => [slug]}/page.jsx   |   0
 .../(app)/vendor/order/{ => [slug]}/page.jsx  |   0
 .../vendor/profile/{ => [slug]}/page.tsx      |   0
 .../(app)/vendor/sales/{ => [slug]}/page.tsx  |   0
 .../vendor/settings/{ => [slug]}/page.tsx     |   0
 .../(app)/vendor/wallet/{ => [slug]}/page.tsx |   0
 .../vendor/withdrawal/{ => [slug]}/page.tsx   |   0
 src/components/Dashboard/Add-Account.tsx      |  75 +++++-
 src/components/Dashboard/Add-Category.tsx     |  77 +++++-
 src/components/Dashboard/Add-Food.tsx         |  76 +++++-
 src/components/Dashboard/All-Category.tsx     |  90 ++++++-
 src/components/Dashboard/All-Food.tsx         |  74 ++++-
 src/components/Dashboard/Edit-Category.tsx    |  77 +++++-
 src/components/Dashboard/Edit-Food.tsx        |  74 ++++-
 src/components/Dashboard/Food-Detail.tsx      |   0
 src/components/Dashboard/OrderItems.tsx       | 255 +++++++++++-------
 src/components/Dashboard/Orders.tsx           | 255 +++++++++++-------
 src/components/Dashboard/Profile.tsx          |  71 +++++
 src/components/Dashboard/Sales-Analysis.tsx   |  84 +++++-
 src/components/Dashboard/Settings.tsx         |  98 +++++--
 src/components/Dashboard/Wallet.tsx           |  84 +++++-
 src/components/Dashboard/Withdrawal.tsx       |  74 ++++-
 src/components/Header/Balance.tsx             |  72 +++++
 .../Header/DropdownNotification.tsx           |  76 +++++-
 src/components/Header/DropdownUser.tsx        |  78 +++++-
 src/components/Header/index.tsx               | 100 +++++--
 src/components/Sidebar/index.tsx              |  26 +-
 35 files changed, 1546 insertions(+), 270 deletions(-)
 rename src/app/(app)/vendor/add-account/{ => [slug]}/page.tsx (100%)
 rename src/app/(app)/vendor/category/{ => [slug]}/[id]/page.jsx (100%)
 rename src/app/(app)/vendor/category/{ => [slug]}/add-category/page.jsx (100%)
 rename src/app/(app)/vendor/category/{ => [slug]}/page.jsx (100%)
 rename src/app/(app)/vendor/deposit/{ => [slug]}/page.tsx (100%)
 rename src/app/(app)/vendor/foods/{ => [slug]}/[id]/page.tsx (100%)
 rename src/app/(app)/vendor/foods/{ => [slug]}/add-food/page.jsx (100%)
 rename src/app/(app)/vendor/foods/{ => [slug]}/page.jsx (100%)
 rename src/app/(app)/vendor/order-item/{ => [slug]}/page.jsx (100%)
 rename src/app/(app)/vendor/order/{ => [slug]}/page.jsx (100%)
 rename src/app/(app)/vendor/profile/{ => [slug]}/page.tsx (100%)
 rename src/app/(app)/vendor/sales/{ => [slug]}/page.tsx (100%)
 rename src/app/(app)/vendor/settings/{ => [slug]}/page.tsx (100%)
 rename src/app/(app)/vendor/wallet/{ => [slug]}/page.tsx (100%)
 rename src/app/(app)/vendor/withdrawal/{ => [slug]}/page.tsx (100%)
 delete mode 100644 src/components/Dashboard/Food-Detail.tsx

diff --git a/src/app/(app)/vendor/add-account/page.tsx b/src/app/(app)/vendor/add-account/[slug]/page.tsx
similarity index 100%
rename from src/app/(app)/vendor/add-account/page.tsx
rename to src/app/(app)/vendor/add-account/[slug]/page.tsx
diff --git a/src/app/(app)/vendor/category/[id]/page.jsx b/src/app/(app)/vendor/category/[slug]/[id]/page.jsx
similarity index 100%
rename from src/app/(app)/vendor/category/[id]/page.jsx
rename to src/app/(app)/vendor/category/[slug]/[id]/page.jsx
diff --git a/src/app/(app)/vendor/category/add-category/page.jsx b/src/app/(app)/vendor/category/[slug]/add-category/page.jsx
similarity index 100%
rename from src/app/(app)/vendor/category/add-category/page.jsx
rename to src/app/(app)/vendor/category/[slug]/add-category/page.jsx
diff --git a/src/app/(app)/vendor/category/page.jsx b/src/app/(app)/vendor/category/[slug]/page.jsx
similarity index 100%
rename from src/app/(app)/vendor/category/page.jsx
rename to src/app/(app)/vendor/category/[slug]/page.jsx
diff --git a/src/app/(app)/vendor/deposit/page.tsx b/src/app/(app)/vendor/deposit/[slug]/page.tsx
similarity index 100%
rename from src/app/(app)/vendor/deposit/page.tsx
rename to src/app/(app)/vendor/deposit/[slug]/page.tsx
diff --git a/src/app/(app)/vendor/foods/[id]/page.tsx b/src/app/(app)/vendor/foods/[slug]/[id]/page.tsx
similarity index 100%
rename from src/app/(app)/vendor/foods/[id]/page.tsx
rename to src/app/(app)/vendor/foods/[slug]/[id]/page.tsx
diff --git a/src/app/(app)/vendor/foods/add-food/page.jsx b/src/app/(app)/vendor/foods/[slug]/add-food/page.jsx
similarity index 100%
rename from src/app/(app)/vendor/foods/add-food/page.jsx
rename to src/app/(app)/vendor/foods/[slug]/add-food/page.jsx
diff --git a/src/app/(app)/vendor/foods/page.jsx b/src/app/(app)/vendor/foods/[slug]/page.jsx
similarity index 100%
rename from src/app/(app)/vendor/foods/page.jsx
rename to src/app/(app)/vendor/foods/[slug]/page.jsx
diff --git a/src/app/(app)/vendor/order-item/page.jsx b/src/app/(app)/vendor/order-item/[slug]/page.jsx
similarity index 100%
rename from src/app/(app)/vendor/order-item/page.jsx
rename to src/app/(app)/vendor/order-item/[slug]/page.jsx
diff --git a/src/app/(app)/vendor/order/page.jsx b/src/app/(app)/vendor/order/[slug]/page.jsx
similarity index 100%
rename from src/app/(app)/vendor/order/page.jsx
rename to src/app/(app)/vendor/order/[slug]/page.jsx
diff --git a/src/app/(app)/vendor/profile/page.tsx b/src/app/(app)/vendor/profile/[slug]/page.tsx
similarity index 100%
rename from src/app/(app)/vendor/profile/page.tsx
rename to src/app/(app)/vendor/profile/[slug]/page.tsx
diff --git a/src/app/(app)/vendor/sales/page.tsx b/src/app/(app)/vendor/sales/[slug]/page.tsx
similarity index 100%
rename from src/app/(app)/vendor/sales/page.tsx
rename to src/app/(app)/vendor/sales/[slug]/page.tsx
diff --git a/src/app/(app)/vendor/settings/page.tsx b/src/app/(app)/vendor/settings/[slug]/page.tsx
similarity index 100%
rename from src/app/(app)/vendor/settings/page.tsx
rename to src/app/(app)/vendor/settings/[slug]/page.tsx
diff --git a/src/app/(app)/vendor/wallet/page.tsx b/src/app/(app)/vendor/wallet/[slug]/page.tsx
similarity index 100%
rename from src/app/(app)/vendor/wallet/page.tsx
rename to src/app/(app)/vendor/wallet/[slug]/page.tsx
diff --git a/src/app/(app)/vendor/withdrawal/page.tsx b/src/app/(app)/vendor/withdrawal/[slug]/page.tsx
similarity index 100%
rename from src/app/(app)/vendor/withdrawal/page.tsx
rename to src/app/(app)/vendor/withdrawal/[slug]/page.tsx
diff --git a/src/components/Dashboard/Add-Account.tsx b/src/components/Dashboard/Add-Account.tsx
index 7b9c3c1..d528365 100644
--- a/src/components/Dashboard/Add-Account.tsx
+++ b/src/components/Dashboard/Add-Account.tsx
@@ -1,8 +1,32 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Image from "next/image";
 import Nigeria from "/public/nigeria2.png";
 import XLM from "/public/xlm.png";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
+
 
 const AddAccount = () => {
   // State to track selected currency
@@ -13,6 +37,55 @@ const AddAccount = () => {
     setSelectedCurrency(e.target.value);
   };
 
+      // vendor slug
+      const router = useRouter();
+      const [user, setUser] = useState<UserProfile | null>(null);
+      const [queryClient] = useState(() => new QueryClient());
+      const logout = useLogout(queryClient);
+    
+      const { slug } = useParams(); // Get the slug directly from params
+      const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+      const [loading, setLoading] = useState<boolean>(true);
+      const [error, setError] = useState<string | null>(null);
+    
+      // Fetch vendor data as a separate function
+      const fetchVendor = async (slug: string) => {
+        try {
+          const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+    
+          // Assuming response.data contains your expected vendor data
+          if (response?.data?.vendor) {
+            setVendor(response.data.vendor);
+          } else {
+            throw new Error("Vendor not found");
+          }
+        } catch (err) {
+          setError("Failed to fetch vendor details");
+        } finally {
+          setLoading(false);
+        }
+      };
+    
+      useEffect(() => {
+        const token = getToken();
+        const userData = getUser();
+        if (!token || !userData) {
+          router.push("/login");
+        } else {
+          setUser(userData as UserProfile);
+        }
+    
+        if (slug) {
+          fetchVendor(slug as string); // Call the fetchVendor function
+        }
+      }, [slug, router]);
+    
+      if (!user) {
+        return <div>Loading...</div>;
+      }
+      
+      if (!vendor) return null;
+
   return (
     <div className="w-full mx-auto">
       <div className="grid md:grid-cols-2 gap-5 md:gap-10">
diff --git a/src/components/Dashboard/Add-Category.tsx b/src/components/Dashboard/Add-Category.tsx
index a34f2fa..ea6d96d 100644
--- a/src/components/Dashboard/Add-Category.tsx
+++ b/src/components/Dashboard/Add-Category.tsx
@@ -1,12 +1,34 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
-import placeholderImage from "/public/Food_and_flower.png"
+import placeholderImage from "/public/Food_and_flower.png";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const CategoryForm: React.FC = () => {
   const [imagePreview, setImagePreview] = useState<string | null>(null);
 
-
   // Handle image selection and preview
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -15,6 +37,55 @@ const CategoryForm: React.FC = () => {
     }
   };
 
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <>
       <div className="grid md:grid-cols-2 gap-10">
diff --git a/src/components/Dashboard/Add-Food.tsx b/src/components/Dashboard/Add-Food.tsx
index 878ffd9..97a8810 100644
--- a/src/components/Dashboard/Add-Food.tsx
+++ b/src/components/Dashboard/Add-Food.tsx
@@ -1,6 +1,29 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const FoodForm: React.FC = () => {
   const [imagePreview, setImagePreview] = useState<string | null>(null);
@@ -17,6 +40,55 @@ const FoodForm: React.FC = () => {
     }
   };
 
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <div className="grid md:grid-cols-2 gap-10">
       <form className="w-full mx-auto bg-white p-8 rounded-lg shadow-lg md:order-1 order-2">
@@ -183,5 +255,3 @@ const FoodForm: React.FC = () => {
 };
 
 export default FoodForm;
-
-
diff --git a/src/components/Dashboard/All-Category.tsx b/src/components/Dashboard/All-Category.tsx
index 58ded8e..1ff070e 100644
--- a/src/components/Dashboard/All-Category.tsx
+++ b/src/components/Dashboard/All-Category.tsx
@@ -1,43 +1,119 @@
 "use client";
+import React, { useState, useEffect } from "react";
 import Turkey from "/public/turkey.jpg";
 import JellofRice from "/public/jollof1.jpg";
 import Drinks from "/public/drinks.jpg";
 import Link from "next/link";
 import Image from "next/image";
 import dynamic from "next/dynamic";
-import React from "react";
 import CardDataStats from "@/components/CardDataStats";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const FoodCategory = [
   {
     id: 1,
     name: "Rice",
     total: "5",
-    imageSrc: JellofRice, 
+    imageSrc: JellofRice,
     alt: "Jellof Rice",
   },
   {
     id: 2,
     name: "Protein (Meat)",
     total: "5",
-    imageSrc: Turkey, 
+    imageSrc: Turkey,
     alt: "Turkey",
   },
   {
     id: 3,
     name: "Drinks",
     total: "30",
-    imageSrc: Drinks, 
+    imageSrc: Drinks,
     alt: "Drinks",
   },
 ];
 
 const Category: React.FC = () => {
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
   return (
     <>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-3 2xl:gap-7.5">
-      {FoodCategory.map((food, index) => (
-          <CardDataStats key={index} name={food.name} total={"Total Item " + food.total} id={food.id}>
+        {FoodCategory.map((food, index) => (
+          <CardDataStats
+            key={index}
+            name={food.name}
+            total={"Total Item " + food.total}
+            id={food.id}
+          >
             <Image
               src={food.imageSrc}
               alt={food.alt}
@@ -47,9 +123,7 @@ const Category: React.FC = () => {
             />
           </CardDataStats>
         ))}
-
       </div>
-
     </>
   );
 };
diff --git a/src/components/Dashboard/All-Food.tsx b/src/components/Dashboard/All-Food.tsx
index c6371d0..b30578a 100644
--- a/src/components/Dashboard/All-Food.tsx
+++ b/src/components/Dashboard/All-Food.tsx
@@ -1,10 +1,33 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { FaEdit, FaEye, FaTrash } from "react-icons/fa";
 import FoodImage from "/public/food_1.png";
 import Image from "next/image";
 import Link from "next/link";
 import { StaticImport } from "next/dist/shared/lib/get-img-props";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 // Define the type for the category keys
 type FoodCategory = "appetizer" | "main" | "dessert" | "drink";
@@ -439,6 +462,55 @@ const SidebarWithFoodItems: React.FC = () => {
     setSelectedFood(null);
   };
 
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <div className="flex gap-3">
       {/* Sidebar */}
diff --git a/src/components/Dashboard/Edit-Category.tsx b/src/components/Dashboard/Edit-Category.tsx
index df2cd5c..d382e6e 100644
--- a/src/components/Dashboard/Edit-Category.tsx
+++ b/src/components/Dashboard/Edit-Category.tsx
@@ -1,12 +1,34 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
-import placeholderImage from "/public/Food_and_flower.png"
+import placeholderImage from "/public/Food_and_flower.png";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const EditCategory: React.FC = () => {
   const [imagePreview, setImagePreview] = useState<string | null>(null);
 
-
   // Handle image selection and preview
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -15,6 +37,55 @@ const EditCategory: React.FC = () => {
     }
   };
 
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <>
       <div className="grid md:grid-cols-2 gap-10">
diff --git a/src/components/Dashboard/Edit-Food.tsx b/src/components/Dashboard/Edit-Food.tsx
index 8b4eb94..97a8810 100644
--- a/src/components/Dashboard/Edit-Food.tsx
+++ b/src/components/Dashboard/Edit-Food.tsx
@@ -1,6 +1,29 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const FoodForm: React.FC = () => {
   const [imagePreview, setImagePreview] = useState<string | null>(null);
@@ -17,6 +40,55 @@ const FoodForm: React.FC = () => {
     }
   };
 
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <div className="grid md:grid-cols-2 gap-10">
       <form className="w-full mx-auto bg-white p-8 rounded-lg shadow-lg md:order-1 order-2">
diff --git a/src/components/Dashboard/Food-Detail.tsx b/src/components/Dashboard/Food-Detail.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Dashboard/OrderItems.tsx b/src/components/Dashboard/OrderItems.tsx
index fa5021d..0f030f8 100644
--- a/src/components/Dashboard/OrderItems.tsx
+++ b/src/components/Dashboard/OrderItems.tsx
@@ -1,5 +1,28 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const OrderItems = () => {
   const data = [
@@ -31,111 +54,161 @@ const OrderItems = () => {
 
   const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
 
-
-  const handleItemsPerPageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  const handleItemsPerPageChange = (
+    e: React.ChangeEvent<HTMLSelectElement>
+  ) => {
     setItemsPerPage(Number(e.target.value));
     setCurrentPage(1);
   };
 
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <>
-    <div className="w-full">
-      <div className="flex gap-5 items-center md:justify-between">
-        {/* Search Bar */}
-        <div className="mb-4">
-          <input
-            type="text"
-            placeholder="Search......"
-            value={searchTerm}
-            onChange={handleSearchChange}
-            className="p-2 md:p-3 text-gray-700 bg-gray-100 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
-        </div>
+      <div className="w-full">
+        <div className="flex gap-5 items-center md:justify-between">
+          {/* Search Bar */}
+          <div className="mb-4">
+            <input
+              type="text"
+              placeholder="Search......"
+              value={searchTerm}
+              onChange={handleSearchChange}
+              className="p-2 md:p-3 text-gray-700 bg-gray-100 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
 
-        {/*Data Per Page */}
-        <div className="mb-4">
-          <label className="mr-2 text-gray-700">Entries per page:</label>
-          <select
-            value={itemsPerPage}
-            onChange={handleItemsPerPageChange}
-            className="p-2 border border-gray-300 rounded-lg bg-white"
-          >
-            <option value={5}>5</option>
-            <option value={10}>10</option>
-            <option value={15}>15</option>
-            <option value={20}>20</option>
-          </select>
+          {/*Data Per Page */}
+          <div className="mb-4">
+            <label className="mr-2 text-gray-700">Entries per page:</label>
+            <select
+              value={itemsPerPage}
+              onChange={handleItemsPerPageChange}
+              className="p-2 border border-gray-300 rounded-lg bg-white"
+            >
+              <option value={5}>5</option>
+              <option value={10}>10</option>
+              <option value={15}>15</option>
+              <option value={20}>20</option>
+            </select>
+          </div>
         </div>
-      </div>
 
-      {/* Data Table */}
-      <div className="grid">
-        <div className="overflow-x-auto shadow-lg rounded-lg border border-[#3ab764]">
-          <table className="min-w-full md:w-full bg-white rounded-lg">
-            <thead className="bg-gray-50">
-              <tr className="text-left text-gray-600 text-sm font-semibold">
-                <th className="py-4 px-6">ID</th>
-                <th className="py-4 px-6">Customer Name</th>
-                <th className="py-4 px-6">Order Number</th>
-                <th className="py-4 px-6">Items</th>
-                <th className="py-4 px-6">Price</th>
-                <th className="py-4 px-6">Quantity</th>
-              </tr>
-            </thead>
-            <tbody>
-              {currentItems.map((item, index) => (
-                <tr
-                  key={item.id}
-                  className={`border-b ${
-                    index % 2 === 0 ? "bg-gray-50" : "bg-white"
-                  } hover:bg-gray-100`}
-                >
-                  <td className="py-4 px-6">{item.id}</td>
-                  <td className="py-4 px-6">{item.name}</td>
-                  <td className="py-4 px-6">{item.category}</td>
-                  <td className="py-4 px-6">{item.price.toFixed(2)}</td>
-                  <td className="py-4 px-6">{item.price.toFixed(2)}</td>
-                  <td className="py-4 px-6">{item.name}</td>
+        {/* Data Table */}
+        <div className="grid">
+          <div className="overflow-x-auto shadow-lg rounded-lg border border-[#3ab764]">
+            <table className="min-w-full md:w-full bg-white rounded-lg">
+              <thead className="bg-gray-50">
+                <tr className="text-left text-gray-600 text-sm font-semibold">
+                  <th className="py-4 px-6">ID</th>
+                  <th className="py-4 px-6">Customer Name</th>
+                  <th className="py-4 px-6">Order Number</th>
+                  <th className="py-4 px-6">Items</th>
+                  <th className="py-4 px-6">Price</th>
+                  <th className="py-4 px-6">Quantity</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {currentItems.map((item, index) => (
+                  <tr
+                    key={item.id}
+                    className={`border-b ${
+                      index % 2 === 0 ? "bg-gray-50" : "bg-white"
+                    } hover:bg-gray-100`}
+                  >
+                    <td className="py-4 px-6">{item.id}</td>
+                    <td className="py-4 px-6">{item.name}</td>
+                    <td className="py-4 px-6">{item.category}</td>
+                    <td className="py-4 px-6">{item.price.toFixed(2)}</td>
+                    <td className="py-4 px-6">{item.price.toFixed(2)}</td>
+                    <td className="py-4 px-6">{item.name}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
-      </div>
 
-      <div className="flex gap-5 items-center md:justify-between">
-        {/* Showing Entries Info */}
-        <div className="mt-4">
-          <p className="text-gray-700">
-            Showing {indexOfFirstItem + 1} to{" "}
-            {Math.min(indexOfLastItem, filteredData.length)} of{" "}
-            {filteredData.length} entries
-          </p>
-        </div>
+        <div className="flex gap-5 items-center md:justify-between">
+          {/* Showing Entries Info */}
+          <div className="mt-4">
+            <p className="text-gray-700">
+              Showing {indexOfFirstItem + 1} to{" "}
+              {Math.min(indexOfLastItem, filteredData.length)} of{" "}
+              {filteredData.length} entries
+            </p>
+          </div>
 
-        {/* Pagination */}
-        <div className="flex justify-center mt-6">
-          <nav>
-            <ul className="inline-flex items-center space-x-1">
-              {Array.from({ length: totalPages }, (_, index) => (
-                <li key={index}>
-                  <button
-                    onClick={() => paginate(index + 1)}
-                    className={`px-4 py-2 rounded-lg border ${
-                      currentPage === index + 1
-                        ? "bg-blue-500 text-white"
-                        : "bg-white text-gray-700 hover:bg-blue-500 hover:text-white"
-                    } shadow-md`}
-                  >
-                    {index + 1}
-                  </button>
-                </li>
-              ))}
-            </ul>
-          </nav>
+          {/* Pagination */}
+          <div className="flex justify-center mt-6">
+            <nav>
+              <ul className="inline-flex items-center space-x-1">
+                {Array.from({ length: totalPages }, (_, index) => (
+                  <li key={index}>
+                    <button
+                      onClick={() => paginate(index + 1)}
+                      className={`px-4 py-2 rounded-lg border ${
+                        currentPage === index + 1
+                          ? "bg-blue-500 text-white"
+                          : "bg-white text-gray-700 hover:bg-blue-500 hover:text-white"
+                      } shadow-md`}
+                    >
+                      {index + 1}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          </div>
         </div>
       </div>
-    </div>
     </>
   );
 };
diff --git a/src/components/Dashboard/Orders.tsx b/src/components/Dashboard/Orders.tsx
index 832e1a2..0817d47 100644
--- a/src/components/Dashboard/Orders.tsx
+++ b/src/components/Dashboard/Orders.tsx
@@ -1,5 +1,28 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const Order = () => {
   const data = [
@@ -31,111 +54,161 @@ const Order = () => {
 
   const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
 
-
-  const handleItemsPerPageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  const handleItemsPerPageChange = (
+    e: React.ChangeEvent<HTMLSelectElement>
+  ) => {
     setItemsPerPage(Number(e.target.value));
     setCurrentPage(1);
   };
 
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <>
-    <div className="w-full">
-      <div className="flex gap-5 items-center md:justify-between">
-        {/* Search Bar */}
-        <div className="mb-4">
-          <input
-            type="text"
-            placeholder="Search......"
-            value={searchTerm}
-            onChange={handleSearchChange}
-            className="p-2 md:p-3 text-gray-700 bg-gray-100 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
-        </div>
+      <div className="w-full">
+        <div className="flex gap-5 items-center md:justify-between">
+          {/* Search Bar */}
+          <div className="mb-4">
+            <input
+              type="text"
+              placeholder="Search......"
+              value={searchTerm}
+              onChange={handleSearchChange}
+              className="p-2 md:p-3 text-gray-700 bg-gray-100 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
 
-        {/*Data Per Page */}
-        <div className="mb-4">
-          <label className="mr-2 text-gray-700">Entries per page:</label>
-          <select
-            value={itemsPerPage}
-            onChange={handleItemsPerPageChange}
-            className="p-2 border border-gray-300 rounded-lg bg-white"
-          >
-            <option value={5}>5</option>
-            <option value={10}>10</option>
-            <option value={15}>15</option>
-            <option value={20}>20</option>
-          </select>
+          {/*Data Per Page */}
+          <div className="mb-4">
+            <label className="mr-2 text-gray-700">Entries per page:</label>
+            <select
+              value={itemsPerPage}
+              onChange={handleItemsPerPageChange}
+              className="p-2 border border-gray-300 rounded-lg bg-white"
+            >
+              <option value={5}>5</option>
+              <option value={10}>10</option>
+              <option value={15}>15</option>
+              <option value={20}>20</option>
+            </select>
+          </div>
         </div>
-      </div>
 
-      {/* Data Table */}
-      <div className="grid">
-        <div className="overflow-x-auto shadow-lg rounded-lg border border-[#3ab764]">
-          <table className="min-w-full md:w-full bg-white rounded-lg">
-            <thead className="bg-gray-50">
-              <tr className="text-left text-gray-600 text-sm font-semibold">
-                <th className="py-4 px-6">ID</th>
-                <th className="py-4 px-6">Customer Name</th>
-                <th className="py-4 px-6">Order Number</th>
-                <th className="py-4 px-6">Items</th>
-                <th className="py-4 px-6">Price</th>
-                <th className="py-4 px-6">Quantity</th>
-              </tr>
-            </thead>
-            <tbody>
-              {currentItems.map((item, index) => (
-                <tr
-                  key={item.id}
-                  className={`border-b ${
-                    index % 2 === 0 ? "bg-gray-50" : "bg-white"
-                  } hover:bg-gray-100`}
-                >
-                  <td className="py-4 px-6">{item.id}</td>
-                  <td className="py-4 px-6">{item.name}</td>
-                  <td className="py-4 px-6">{item.category}</td>
-                  <td className="py-4 px-6">{item.price.toFixed(2)}</td>
-                  <td className="py-4 px-6">{item.price.toFixed(2)}</td>
-                  <td className="py-4 px-6">{item.name}</td>
+        {/* Data Table */}
+        <div className="grid">
+          <div className="overflow-x-auto shadow-lg rounded-lg border border-[#3ab764]">
+            <table className="min-w-full md:w-full bg-white rounded-lg">
+              <thead className="bg-gray-50">
+                <tr className="text-left text-gray-600 text-sm font-semibold">
+                  <th className="py-4 px-6">ID</th>
+                  <th className="py-4 px-6">Customer Name</th>
+                  <th className="py-4 px-6">Order Number</th>
+                  <th className="py-4 px-6">Items</th>
+                  <th className="py-4 px-6">Price</th>
+                  <th className="py-4 px-6">Quantity</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {currentItems.map((item, index) => (
+                  <tr
+                    key={item.id}
+                    className={`border-b ${
+                      index % 2 === 0 ? "bg-gray-50" : "bg-white"
+                    } hover:bg-gray-100`}
+                  >
+                    <td className="py-4 px-6">{item.id}</td>
+                    <td className="py-4 px-6">{item.name}</td>
+                    <td className="py-4 px-6">{item.category}</td>
+                    <td className="py-4 px-6">{item.price.toFixed(2)}</td>
+                    <td className="py-4 px-6">{item.price.toFixed(2)}</td>
+                    <td className="py-4 px-6">{item.name}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
-      </div>
 
-      <div className="flex gap-5 items-center md:justify-between">
-        {/* Showing Entries Info */}
-        <div className="mt-4">
-          <p className="text-gray-700">
-            Showing {indexOfFirstItem + 1} to{" "}
-            {Math.min(indexOfLastItem, filteredData.length)} of{" "}
-            {filteredData.length} entries
-          </p>
-        </div>
+        <div className="flex gap-5 items-center md:justify-between">
+          {/* Showing Entries Info */}
+          <div className="mt-4">
+            <p className="text-gray-700">
+              Showing {indexOfFirstItem + 1} to{" "}
+              {Math.min(indexOfLastItem, filteredData.length)} of{" "}
+              {filteredData.length} entries
+            </p>
+          </div>
 
-        {/* Pagination */}
-        <div className="flex justify-center mt-6">
-          <nav>
-            <ul className="inline-flex items-center space-x-1">
-              {Array.from({ length: totalPages }, (_, index) => (
-                <li key={index}>
-                  <button
-                    onClick={() => paginate(index + 1)}
-                    className={`px-4 py-2 rounded-lg border ${
-                      currentPage === index + 1
-                        ? "bg-blue-500 text-white"
-                        : "bg-white text-gray-700 hover:bg-blue-500 hover:text-white"
-                    } shadow-md`}
-                  >
-                    {index + 1}
-                  </button>
-                </li>
-              ))}
-            </ul>
-          </nav>
+          {/* Pagination */}
+          <div className="flex justify-center mt-6">
+            <nav>
+              <ul className="inline-flex items-center space-x-1">
+                {Array.from({ length: totalPages }, (_, index) => (
+                  <li key={index}>
+                    <button
+                      onClick={() => paginate(index + 1)}
+                      className={`px-4 py-2 rounded-lg border ${
+                        currentPage === index + 1
+                          ? "bg-blue-500 text-white"
+                          : "bg-white text-gray-700 hover:bg-blue-500 hover:text-white"
+                      } shadow-md`}
+                    >
+                      {index + 1}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          </div>
         </div>
       </div>
-    </div>
     </>
   );
 };
diff --git a/src/components/Dashboard/Profile.tsx b/src/components/Dashboard/Profile.tsx
index 48c7ab3..ed248be 100644
--- a/src/components/Dashboard/Profile.tsx
+++ b/src/components/Dashboard/Profile.tsx
@@ -5,9 +5,80 @@ import Logo from "/public/logo-dark.png";
 import { Metadata } from "next";
 import { FaRegUserCircle } from "react-icons/fa";
 import { BsEnvelopeAt } from "react-icons/bs";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+import { useEffect, useState } from "react";
 
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const Profile = () => {
+      // vendor slug
+      const router = useRouter();
+      const [user, setUser] = useState<UserProfile | null>(null);
+      const [queryClient] = useState(() => new QueryClient());
+      const logout = useLogout(queryClient);
+    
+      const { slug } = useParams(); // Get the slug directly from params
+      const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+      const [loading, setLoading] = useState<boolean>(true);
+      const [error, setError] = useState<string | null>(null);
+    
+      // Fetch vendor data as a separate function
+      const fetchVendor = async (slug: string) => {
+        try {
+          const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+    
+          // Assuming response.data contains your expected vendor data
+          if (response?.data?.vendor) {
+            setVendor(response.data.vendor);
+          } else {
+            throw new Error("Vendor not found");
+          }
+        } catch (err) {
+          setError("Failed to fetch vendor details");
+        } finally {
+          setLoading(false);
+        }
+      };
+    
+      useEffect(() => {
+        const token = getToken();
+        const userData = getUser();
+        if (!token || !userData) {
+          router.push("/login");
+        } else {
+          setUser(userData as UserProfile);
+        }
+    
+        if (slug) {
+          fetchVendor(slug as string); // Call the fetchVendor function
+        }
+      }, [slug, router]);
+    
+      if (!user) {
+        return <div>Loading...</div>;
+      }
+      
+      if (!vendor) return null;
   return (
     <>
       <div className="flex justify-center">
diff --git a/src/components/Dashboard/Sales-Analysis.tsx b/src/components/Dashboard/Sales-Analysis.tsx
index d3182e8..a4256d5 100644
--- a/src/components/Dashboard/Sales-Analysis.tsx
+++ b/src/components/Dashboard/Sales-Analysis.tsx
@@ -6,14 +6,34 @@ import Link from "next/link";
 import Image from "next/image";
 import dynamic from "next/dynamic";
 import React from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
 
-const MonthlyOverview = dynamic(
-  () => import("@/components/Charts/ChartTwo"),
-  {
-    ssr: false,
-  }
-);
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
+
+const MonthlyOverview = dynamic(() => import("@/components/Charts/ChartTwo"), {
+  ssr: false,
+});
 const ChartOne = dynamic(() => import("@/components/Charts/ChartOne"), {
   ssr: false,
 });
@@ -67,6 +87,56 @@ const Sales: React.FC = () => {
   const toggleBalance = () => {
     setBalance(!balance);
   };
+
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <>
       <div className="flex flex-row-reverse">
diff --git a/src/components/Dashboard/Settings.tsx b/src/components/Dashboard/Settings.tsx
index 7c2a1dc..55f918d 100644
--- a/src/components/Dashboard/Settings.tsx
+++ b/src/components/Dashboard/Settings.tsx
@@ -1,21 +1,91 @@
-"use client"
+"use client";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import { Metadata } from "next";
 import { FaRegUserCircle } from "react-icons/fa";
 import { BsEnvelopeAt } from "react-icons/bs";
 import { AiFillEdit } from "react-icons/ai";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
 
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const Settings = () => {
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <>
       <div className="grid grid-cols-5 gap-8">
         <div className="col-span-5 xl:col-span-3">
           <div className="rounded-sm border border-stroke bg-white shadow-default">
             <div className="border-b border-stroke px-7 py-4">
-              <h3 className="font-medium text-black">
-                Personal Information
-              </h3>
+              <h3 className="font-medium text-black">Personal Information</h3>
             </div>
             <div className="p-7">
               <form action="#">
@@ -143,36 +213,26 @@ const Settings = () => {
         <div className="col-span-5 xl:col-span-2 bg-light">
           <div className="rounded-sm ">
             <div className="border-b border-stroke px-7 bg-white py-4">
-              <h3 className="font-medium text-black">
-                Settings
-              </h3>
+              <h3 className="font-medium text-black">Settings</h3>
             </div>
             <div className="border-b border-stroke px-7 bg-white py-4 my-3 rounded-xl shadow shadow-lg">
               <Link href="#">
-                <h3 className="font-medium text-black">
-                  Preference
-                </h3>
+                <h3 className="font-medium text-black">Preference</h3>
               </Link>
             </div>
             <div className="border-b border-stroke px-7 bg-white py-4 my-3 rounded-xl shadow shadow-lg">
               <Link href="#">
-                <h3 className="font-medium text-black">
-                  Help Center
-                </h3>
+                <h3 className="font-medium text-black">Help Center</h3>
               </Link>
             </div>
             <div className="border-b border-stroke px-7 bg-white py-4 my-3 rounded-xl shadow shadow-lg">
               <Link href="#">
-                <h3 className="font-medium text-black">
-                  Provide FeedBack
-                </h3>
+                <h3 className="font-medium text-black">Provide FeedBack</h3>
               </Link>
             </div>
             <div className="border-b border-stroke px-7 bg-white py-4 my-3 rounded-xl shadow shadow-lg">
               <Link href="#">
-                <h3 className="font-medium text-black">
-                  Vendor Support
-                </h3>
+                <h3 className="font-medium text-black">Vendor Support</h3>
               </Link>
             </div>
           </div>
diff --git a/src/components/Dashboard/Wallet.tsx b/src/components/Dashboard/Wallet.tsx
index fbfcd74..9c7abe3 100644
--- a/src/components/Dashboard/Wallet.tsx
+++ b/src/components/Dashboard/Wallet.tsx
@@ -1,14 +1,37 @@
 "use client";
 import React from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Image from "next/image";
-import Link from "next/link"
-import ExchangeRate from "@/components/Charts/ExchargeRate"
+import Link from "next/link";
+import ExchangeRate from "@/components/Charts/ExchargeRate";
 import Deposit from "/public/deposit.png";
 import Pay from "/public/pay.png";
 import Swap from "/public/swap.png";
 import Add from "/public/plus.png";
 import Order from "/public/order.png";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const Wallet: React.FC = () => {
   const data = [
@@ -52,6 +75,55 @@ const Wallet: React.FC = () => {
     setCurrentPage(1);
   };
 
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <>
       <div className="grid text-black grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-2 2xl:gap-7.5">
@@ -74,10 +146,8 @@ const Wallet: React.FC = () => {
       </div>
 
       <div>
-      <h1 className="text-xl text-black font-bold my-5">
-          Exchange Rate
-        </h1>
-        <ExchangeRate/>
+        <h1 className="text-xl text-black font-bold my-5">Exchange Rate</h1>
+        <ExchangeRate />
       </div>
 
       <div className="w-full">
diff --git a/src/components/Dashboard/Withdrawal.tsx b/src/components/Dashboard/Withdrawal.tsx
index c58525c..5f7bc5e 100644
--- a/src/components/Dashboard/Withdrawal.tsx
+++ b/src/components/Dashboard/Withdrawal.tsx
@@ -1,8 +1,31 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Image from "next/image";
 import Nigeria from "/public/nigeria2.png";
 import XLM from "/public/xlm.png";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const CurrencyForm = () => {
   // State to track selected currency
@@ -13,6 +36,55 @@ const CurrencyForm = () => {
     setSelectedCurrency(e.target.value);
   };
 
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <div className="w-full mx-auto">
       <div className="grid md:grid-cols-2 gap-5 md:gap-10">
diff --git a/src/components/Header/Balance.tsx b/src/components/Header/Balance.tsx
index df3b960..e8e6da1 100644
--- a/src/components/Header/Balance.tsx
+++ b/src/components/Header/Balance.tsx
@@ -3,6 +3,29 @@ import React from "react";
 import { useEffect, useRef, useState } from "react";
 import { BiHide } from "react-icons/bi";
 import { BiShowAlt } from "react-icons/bi";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const Balance = () => {
   const [balance, setBalance] = useState(false);
@@ -10,6 +33,55 @@ const Balance = () => {
     setBalance(!balance);
   };
 
+      // vendor slug
+      const router = useRouter();
+      const [user, setUser] = useState<UserProfile | null>(null);
+      const [queryClient] = useState(() => new QueryClient());
+      const logout = useLogout(queryClient);
+    
+      const { slug } = useParams(); // Get the slug directly from params
+      const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+      const [loading, setLoading] = useState<boolean>(true);
+      const [error, setError] = useState<string | null>(null);
+    
+      // Fetch vendor data as a separate function
+      const fetchVendor = async (slug: string) => {
+        try {
+          const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+    
+          // Assuming response.data contains your expected vendor data
+          if (response?.data?.vendor) {
+            setVendor(response.data.vendor);
+          } else {
+            throw new Error("Vendor not found");
+          }
+        } catch (err) {
+          setError("Failed to fetch vendor details");
+        } finally {
+          setLoading(false);
+        }
+      };
+    
+      useEffect(() => {
+        const token = getToken();
+        const userData = getUser();
+        if (!token || !userData) {
+          router.push("/login");
+        } else {
+          setUser(userData as UserProfile);
+        }
+    
+        if (slug) {
+          fetchVendor(slug as string); // Call the fetchVendor function
+        }
+      }, [slug, router]);
+    
+      if (!user) {
+        return <div>Loading...</div>;
+      }
+      
+      if (!vendor) return null;
+
   return (
     <>
       <div className="flex">
diff --git a/src/components/Header/DropdownNotification.tsx b/src/components/Header/DropdownNotification.tsx
index 5a75b4c..3fc4d05 100644
--- a/src/components/Header/DropdownNotification.tsx
+++ b/src/components/Header/DropdownNotification.tsx
@@ -1,12 +1,84 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Link from "next/link";
 import ClickOutside from "@/components/ClickOutside";
 import { IoMdNotificationsOutline } from "react-icons/io";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const DropdownNotification = () => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [notifying, setNotifying] = useState(true);
 
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <ClickOutside onClick={() => setDropdownOpen(false)} className="relative">
       <li>
@@ -26,7 +98,7 @@ const DropdownNotification = () => {
             <span className="absolute -z-10 inline-flex h-full w-full animate-ping rounded-full bg-meta-1 opacity-75"></span>
           </span>
 
-          <IoMdNotificationsOutline/>
+          <IoMdNotificationsOutline />
         </Link>
 
         {dropdownOpen && (
diff --git a/src/components/Header/DropdownUser.tsx b/src/components/Header/DropdownUser.tsx
index 88ea4ab..16b0f10 100644
--- a/src/components/Header/DropdownUser.tsx
+++ b/src/components/Header/DropdownUser.tsx
@@ -1,4 +1,5 @@
-import { useState, useContext } from "react";
+"use client"
+import { useState, useContext, useEffect } from "react";
 import Link from "next/link";
 import ClickOutside from "@/components/ClickOutside";
 import { User } from "lucide-react";
@@ -7,10 +8,83 @@ import { TbSettingsCog } from "react-icons/tb";
 import { BiLogOutCircle } from "react-icons/bi";
 import { BsChevronDown } from "react-icons/bs";
 import { AiOutlineDashboard } from "react-icons/ai";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
+
 
 const DropdownUser = () => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
+    // vendor slug
+    const router = useRouter();
+    const [user, setUser] = useState<UserProfile | null>(null);
+    const [queryClient] = useState(() => new QueryClient());
+    const logout = useLogout(queryClient);
+  
+    const { slug } = useParams(); // Get the slug directly from params
+    const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+  
+    // Fetch vendor data as a separate function
+    const fetchVendor = async (slug: string) => {
+      try {
+        const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+  
+        // Assuming response.data contains your expected vendor data
+        if (response?.data?.vendor) {
+          setVendor(response.data.vendor);
+        } else {
+          throw new Error("Vendor not found");
+        }
+      } catch (err) {
+        setError("Failed to fetch vendor details");
+      } finally {
+        setLoading(false);
+      }
+    };
+  
+    useEffect(() => {
+      const token = getToken();
+      const userData = getUser();
+      if (!token || !userData) {
+        router.push("/login");
+      } else {
+        setUser(userData as UserProfile);
+      }
+  
+      if (slug) {
+        fetchVendor(slug as string); // Call the fetchVendor function
+      }
+    }, [slug, router]);
+  
+    if (!user) {
+      return <div>Loading...</div>;
+    }
+    
+    if (!vendor) return null;
+
   return (
     <ClickOutside onClick={() => setDropdownOpen(false)} className="relative">
       <Link
@@ -20,7 +94,7 @@ const DropdownUser = () => {
       >
         <span className="hidden text-right lg:block">
           <span className="block text-sm font-medium text-black ">
-            Rodinia Kitchen
+            {vendor.name}
           </span>
           {/* <span className="block text-xs">UX Designer</span> */}
         </span>
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index a40b53f..5b0aff1 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,20 +1,88 @@
 import Link from "next/link";
 import React from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import DropdownUser from "@/components/Header/DropdownUser";
 import Balance from "@/components/Header/Balance";
 import Image from "next/image";
-import Logo_Dark from "/public/logo-dark.png"
-// import DarkModeSwitcher from "./DarkModeSwitcher";
-// import DropdownMessage from "./DropdownMessage";
+import Logo_Dark from "/public/logo-dark.png";
 import DropdownNotification from "./DropdownNotification";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
 
-const Header = (
-  props: {
-    sidebarOpen: string | boolean | undefined;
-    setSidebarOpen: (arg0: boolean) => void;
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
+
+const Header = (props: {
+  sidebarOpen: string | boolean | undefined;
+  setSidebarOpen: (arg0: boolean) => void;
+}) => {
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
   }
-) => {
+
+  if (!vendor) return null;
+
   return (
     <header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1">
       <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
@@ -62,18 +130,16 @@ const Header = (
           </button>
           {/* <!-- Hamburger Toggle BTN --> */}
 
-          <Link className="block flex-shrink-0 lg:hidden p-2 rounded-full" href="/vendor/dashboard">
-            <Image
-              width={70}
-              height={50}
-              src={Logo_Dark}
-              alt="Logo"
-            />
+          <Link
+            className="block flex-shrink-0 lg:hidden p-2 rounded-full"
+            href={"/vendor/dashboard/"+ vendor.slug}
+          >
+            <Image width={70} height={50} src={Logo_Dark} alt="Logo" />
           </Link>
         </div>
 
         <div className="hidden sm:block md:w-2/3">
-          <Balance/>
+          <Balance />
         </div>
 
         <div className="flex items-center gap-3 2xsm:gap-7">
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index ec63a7c..3a4e50f 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -97,10 +97,10 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
   if (!user) {
     return <div>Loading...</div>;
   }
-  
+
   if (!vendor) return null;
 
-  const menuGroups =  [
+  const menuGroups = [
     {
       name: "MENU",
       menuItems: [
@@ -115,8 +115,8 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
           label: "Items",
           route: "#",
           children: [
-            { label: "Items", route: "/vendor/foods" },
-            { label: "Add New Item", route: "/vendor/foods/add-food" },
+            { label: "Items", route: `/vendor/foods/${vendor.slug}` },
+            { label: "Add New Item", route: `/vendor/foods/add-food/${vendor.slug}` },
           ],
         },
 
@@ -125,10 +125,10 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
           label: "Item Categories",
           route: "#",
           children: [
-            { label: "Item Category", route: "/vendor/category" },
+            { label: "Item Category", route: `/vendor/category/${vendor.slug}` },
             {
               label: "Add New Category",
-              route: "/vendor/category/add-category",
+              route: `/vendor/category/add-category/${vendor.slug}`,
             },
           ],
         },
@@ -136,13 +136,13 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
         {
           icon: <LiaCartArrowDownSolid />,
           label: "Orders",
-          route: "/vendor/order",
+          route: `/vendor/order/${vendor.slug}`,
         },
 
         {
           icon: <BsDiagram3 />,
           label: "Ordered Items",
-          route: "/vendor/order-item",
+          route: `/vendor/order-item/${vendor.slug}`,
         },
       ],
     },
@@ -153,19 +153,19 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
         {
           icon: <FaRegUserCircle />,
           label: "Profile",
-          route: "/vendor/profile",
+          route: `/vendor/profile/${vendor.slug}`,
         },
 
         {
           icon: <GiWallet />,
           label: "Wallet",
-          route: "/vendor/wallet",
+          route: `/vendor/wallet/${vendor.slug}`,
         },
 
         {
           icon: <TbSettingsCog />,
           label: "Account Settings",
-          route: "/vendor/settings",
+          route: `/vendor/settings/${vendor.slug}`,
         },
 
         {
@@ -177,7 +177,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
         {
           icon: <TbPresentationAnalytics />,
           label: "Sales Analysis",
-          route: "/vendor/sales",
+          route: `/vendor/sales/${vendor.slug}`,
         },
 
         {
@@ -198,7 +198,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
       >
         {/* <!-- SIDEBAR HEADER --> */}
         <div className="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
-          <Link href={vendor.slug}>
+          <Link href={"/vendor/dashboard/" + vendor.slug}>
             <Image width={70} height={50} src={Logo} alt="Logo" priority />
           </Link>