slight cleanup

app/dashboard/page.tsx

@@ -1,6 +1,6 @@
 import Dashboard from "@/components/kokonutui/dashboard";
 import Content from "@/components/kokonutui/content";
-import { fetchWithAuthorization } from "@/lib/server-utils"
+import { fetchServer } from "@/lib/server-utils"
 
 // ✅ Corrected Vendor Type
 interface Vendor {
@@ -24,8 +24,8 @@ interface OrderStats {
 
 export default async function DashboardPage() {
   const [userResponse, orderStats] = await Promise.all([
-    fetchWithAuthorization<User>("/auth/me"),
+    fetchServer<User>("/auth/me"),
-    fetchWithAuthorization<OrderStats>("/orders/stats"),
+    fetchServer<OrderStats>("/orders/stats"),
   ]);
 
   const vendor = userResponse.vendor; 

components/broadcast-dialog.tsx

@@ -6,19 +6,17 @@ import { Textarea } from "@/components/ui/textarea";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Send } from "lucide-react";
 import { toast } from "sonner";
-import { apiRequest } from "@/lib/storeHelper"; // ✅ API helper
+import { apiRequest } from "@/lib/storeHelper";
 
-// ✅ Define props type
 interface BroadcastDialogProps {
   open: boolean;
   setOpen: (open: boolean) => void;
 }
 
 export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps) {
-  const [broadcastMessage, setBroadcastMessage] = useState<string>("");
+  const [broadcastMessage, setBroadcastMessage] = useState("");
-  const [sendingBroadcast, setSendingBroadcast] = useState<boolean>(false);
+  const [isSending, setIsSending] = useState(false);
 
-  // ✅ Send Broadcast Message
   const sendBroadcast = async () => {
     if (!broadcastMessage.trim()) {
       toast.warning("Broadcast message cannot be empty.");
@@ -26,14 +24,10 @@ export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps)
     }
 
     try {
-      setSendingBroadcast(true);
+      setIsSending(true);
-
-      // ✅ API Call
       const response = await apiRequest("/storefront/broadcast", "POST", { message: broadcastMessage });
 
-      if (response.error) {
+      if (response.error) throw new Error(response.error);
-        throw new Error(response.error);
-      }
 
       toast.success(`Broadcast sent to ${response.totalUsers} users!`);
       setBroadcastMessage("");
@@ -41,7 +35,7 @@ export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps)
     } catch (error) {
       toast.error("Failed to send broadcast message.");
     } finally {
-      setSendingBroadcast(false);
+      setIsSending(false);
     }
   };
 
@@ -52,17 +46,23 @@ export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps)
           <Send className="h-6 w-6 text-emerald-600" />
           <DialogTitle>Global Broadcast Message</DialogTitle>
         </DialogHeader>
+        
         <Textarea
           placeholder="Type your message here..."
           value={broadcastMessage}
           onChange={(e) => setBroadcastMessage(e.target.value)}
         />
+        
         <DialogFooter>
-          <Button onClick={() => setOpen(false)} variant="secondary">
+          <Button variant="secondary" onClick={() => setOpen(false)}>
             Cancel
           </Button>
-          <Button onClick={sendBroadcast} disabled={sendingBroadcast} className="bg-emerald-600 hover:bg-emerald-700">
+          <Button 
-            {sendingBroadcast ? "Sending..." : "Send Broadcast"}
+            onClick={sendBroadcast} 
+            disabled={isSending}
+            className="bg-emerald-600 hover:bg-emerald-700"
+          >
+            {isSending ? "Sending..." : "Send Broadcast"}
           </Button>
         </DialogFooter>
       </DialogContent>

components/kokonutui/content.tsx

@@ -2,9 +2,9 @@
 
 import { useState, useEffect } from "react";
 import { Package, Clock, CheckCircle, AlertTriangle } from "lucide-react";
-import OrderStats from "./order-stats"
+import OrderStats from "./order-stats";
 
-interface OrderStatsProps {
+interface OrderStatsData {
   totalOrders: number;
   pendingOrders: number;
   completedOrders: number;
@@ -13,56 +13,45 @@ interface OrderStatsProps {
 
 interface ContentProps {
   username: string;
-  orderStats: OrderStatsProps;
+  orderStats: OrderStatsData;
 }
 
+const getGreeting = () => {
+  const hour = new Date().getHours();
+  if (hour < 12) return "Good morning";
+  if (hour < 18) return "Good afternoon";
+  return "Good evening";
+};
+
 export default function Content({ username, orderStats }: ContentProps) {
   const [greeting, setGreeting] = useState("");
 
   useEffect(() => {
-    const hour = new Date().getHours();
+    setGreeting(getGreeting());
-    if (hour < 12) {
-      setGreeting("Good morning");
-    } else if (hour < 18) {
-      setGreeting("Good afternoon");
-    } else {
-      setGreeting("Good evening");
-    }
   }, []);
 
+  const statsConfig = [
+    { title: "Total Orders", value: orderStats.totalOrders, icon: Package },
+    { title: "Completed Orders", value: orderStats.completedOrders, icon: CheckCircle },
+    { title: "Pending Orders", value: orderStats.pendingOrders, icon: Clock },
+    { title: "Cancelled Orders", value: orderStats.cancelledOrders, icon: AlertTriangle },
+  ];
+
   return (
     <div className="space-y-6">
-      {/* Dynamic Greeting */}
       <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
         {greeting}, {username}!
       </h1>
 
-      {/* Order Stats */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <OrderStats
+        {statsConfig.map((stat) => (
-          title="Total Orders"
+          <OrderStats
-          value={orderStats.totalOrders.toLocaleString()}
+            key={stat.title}
-          icon={Package}
+            title={stat.title}
-        />
+            value={stat.value.toLocaleString()}
-                <OrderStats
+            icon={stat.icon}
-          title="Completed Orders"
+          />
-          value={orderStats.completedOrders.toLocaleString()}
+        ))}
-          icon={CheckCircle}
-        />
-        <OrderStats
-          title="Pending Orders"
-          value={orderStats.pendingOrders.toLocaleString()}
-          icon={Clock}
-        />
-        <OrderStats
-          title="Cancelled Orders"
-          value={orderStats.cancelledOrders.toLocaleString()}
-          icon={AlertTriangle}
-        />
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <div className="lg:col-span-2"></div>
       </div>
     </div>
   );

components/kokonutui/layout.tsx

@@ -1,33 +1,29 @@
-"use client"
+"use client";
 
-import type { ReactNode } from "react"
+import { useState, useEffect } from "react";
-import Sidebar from "./sidebar"
+import { useTheme } from "next-themes";
-import { useTheme } from "next-themes"
+import Sidebar from "./sidebar";
-import { useEffect, useState } from "react"
 
 interface LayoutProps {
-  children: ReactNode
+  children: React.ReactNode;
 }
 
 export default function Layout({ children }: LayoutProps) {
-  const { theme } = useTheme()
+  const { theme } = useTheme();
-  const [mounted, setMounted] = useState(false)
+  const [mounted, setMounted] = useState(false);
 
-  useEffect(() => {
+  useEffect(() => setMounted(true), []);
-    setMounted(true)
-  }, [])
 
-  if (!mounted) {
+  if (!mounted) return null;
-    return null
-  }
 
   return (
     <div className={`flex h-screen ${theme === "dark" ? "dark" : ""}`}>
       <Sidebar />
       <div className="w-full flex flex-1 flex-col">
-        <main className="flex-1 overflow-auto p-6 bg-white dark:bg-[#0F0F12]">{children}</main>
+        <main className="flex-1 overflow-auto p-6 bg-white dark:bg-[#0F0F12]">
+          {children}
+        </main>
       </div>
     </div>
-  )
+  );
 }
-

components/kokonutui/order-stats.tsx

@@ -1,13 +1,12 @@
-import { cn } from "@/lib/utils"
+import type { LucideIcon } from "lucide-react";
-import { ArrowDown, ArrowUp, type LucideIcon } from "lucide-react"
 
 interface OrderStatsProps {
-  title: string
+  title: string;
-  value: string
+  value: string;
-  icon: LucideIcon
+  icon: LucideIcon;
 }
 
-export default function OrderStats({ title, value, icon: Icon,}: OrderStatsProps) {
+export default function OrderStats({ title, value, icon: Icon }: OrderStatsProps) {
   return (
     <div className="w-full bg-white dark:bg-zinc-900/70 border border-zinc-100 dark:border-zinc-800 rounded-xl shadow-sm backdrop-blur-xl">
       <div className="p-4">
@@ -15,11 +14,8 @@ export default function OrderStats({ title, value, icon: Icon,}: OrderStatsProps
           <h2 className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{title}</h2>
           <Icon className="w-4 h-4 text-zinc-600 dark:text-zinc-400" />
         </div>
-        <div className="flex items-baseline">
+        <p className="text-2xl font-semibold text-zinc-900 dark:text-zinc-50">{value}</p>
-          <p className="text-2xl font-semibold text-zinc-900 dark:text-zinc-50">{value}</p>
-        </div>
       </div>
     </div>
-  )
+  );
 }
-

components/kokonutui/sidebar.tsx

@@ -1,72 +1,58 @@
-"use client"
+"use client";
 
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
 import {
-  BarChart2,
   Package,
   ShoppingCart,
-  Users,
-  Settings,
-  HelpCircle,
-  Menu,
   Home,
   Truck,
   Box,
-  DollarSign,
+  Settings,
   LogOut,
-  SunMoon,
+  Menu,
-} from "lucide-react"
+} from "lucide-react";
-import Link from "next/link"
+
-import { useState } from "react"
+interface NavItemProps {
-import { useRouter } from "next/navigation"
+  href: string;
-import type React from "react"
+  icon: React.ElementType;
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+
+const NavItem = ({ href, icon: Icon, children, onClick }: NavItemProps) => (
+  <Link
+    href={href}
+    onClick={onClick}
+    className="flex items-center px-3 py-2 text-sm rounded-md transition-colors text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
+  >
+    <Icon className="h-4 w-4 mr-3 flex-shrink-0" />
+    {children}
+  </Link>
+);
 
 export default function Sidebar() {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const router = useRouter()
+  const router = useRouter();
 
-  function handleNavigation() {
+  const handleLogout = async () => {
-    setIsMobileMenuOpen(false)
-  }
-
-  async function handleLogout() {
     try {
-      const authToken = document.cookie.split("authToken=")[1]
+      const authToken = document.cookie.split("authToken=")[1];
-
       const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/logout`, {
         method: "POST",
-        headers: { "Authorization": `Bearer ${authToken}` },
+        headers: { Authorization: `Bearer ${authToken}` },
         credentials: "include",
-      })
+      });
 
-      if (!res.ok) throw new Error("Logout failed")
+      if (!res.ok) throw new Error("Logout failed");
 
-      document.cookie = "authToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;" // Clear cookie
+      document.cookie = "authToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;";
-      router.push("/login") 
+      router.push("/login");
     } catch (error) {
-      console.error("Error logging out:", error)
+      console.error("Logout error:", error);
     }
-  }
+  };
-
-  function NavItem({
-    href,
-    icon: Icon,
-    children,
-  }: {
-    href: string
-    icon: any
-    children: React.ReactNode
-  }) {
-    return (
-      <Link
-        href={href}
-        onClick={handleNavigation}
-        className="flex items-center px-3 py-2 text-sm rounded-md transition-colors text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
-      >
-        <Icon className="h-4 w-4 mr-3 flex-shrink-0" />
-        {children}
-      </Link>
-    )
-  }
 
   return (
     <>
@@ -77,6 +63,7 @@ export default function Sidebar() {
       >
         <Menu className="h-5 w-5 text-gray-600 dark:text-gray-300" />
       </button>
+
       <nav
         className={`
           fixed inset-y-0 left-0 z-[70] w-64 bg-white dark:bg-[#0F0F12] transform transition-transform duration-200 ease-in-out
@@ -91,50 +78,46 @@ export default function Sidebar() {
           >
             <div className="flex items-center gap-3">
               <ShoppingCart className="h-6 w-6 text-gray-900 dark:text-white" />
-              <span className="text-lg font-semibold hover:cursor-pointer text-gray-900 dark:text-white">
+              <span className="text-lg font-semibold text-gray-900 dark:text-white">
                 Ember
               </span>
             </div>
           </Link>
 
-          <div className="flex-1 overflow-y-auto py-4 px-4">
+          <div className="flex-1 overflow-y-auto py-4 px-4 space-y-6">
-            <div className="space-y-6">
+            <div>
-              <div>
+              <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-                <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                Overview
-                  Overview
-                </div>
-                <div className="space-y-1">
-                  <NavItem href="/dashboard" icon={Home}>
-                    Dashboard
-                  </NavItem>
-                  <NavItem href="/dashboard/orders" icon={Package}>
-                    Orders
-                  </NavItem>
-                </div>
               </div>
+              <div className="space-y-1">
+                <NavItem href="/dashboard" icon={Home} onClick={() => setIsMobileMenuOpen(false)}>
+                  Dashboard
+                </NavItem>
+                <NavItem href="/dashboard/orders" icon={Package} onClick={() => setIsMobileMenuOpen(false)}>
+                  Orders
+                </NavItem>
+              </div>
+            </div>
 
-              {/* Management Section */}
+            <div>
-              <div>
+              <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-                <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                Management
-                  Management
+              </div>
-                </div>
+              <div className="space-y-1">
-                <div className="space-y-1">
+                <NavItem href="/dashboard/products" icon={Box} onClick={() => setIsMobileMenuOpen(false)}>
-                  <NavItem href="/dashboard/products" icon={Box}>
+                  Products
-                    Products
+                </NavItem>
-                  </NavItem>
+                <NavItem href="/dashboard/shipping" icon={Truck} onClick={() => setIsMobileMenuOpen(false)}>
-                  <NavItem href="/dashboard/shipping" icon={Truck}>
+                  Shipping
-                    Shipping Options
+                </NavItem>
-                  </NavItem>
+                <NavItem href="/dashboard/storefront" icon={Settings} onClick={() => setIsMobileMenuOpen(false)}>
-                  <NavItem href="/dashboard/storefront" icon={Settings}>
+                  Storefront
-                    Manage Storefront
+                </NavItem>
-                  </NavItem>
-                </div>
               </div>
             </div>
           </div>
 
-          {/* Theme Toggle & Logout at Bottom */}
+          <div className="p-4 border-t border-gray-200 dark:border-[#1F1F23]">
-          <div className="p-4 border-t border-gray-200 dark:border-[#1F1F23] flex flex-col space-y-2">
             <button
               onClick={handleLogout}
               className="w-full flex items-center px-3 py-2 text-sm rounded-md transition-colors text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
@@ -153,5 +136,5 @@ export default function Sidebar() {
         />
       )}
     </>
-  )
+  );
 }

components/order-table.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import {
   Table,
   TableBody,
@@ -19,8 +19,8 @@ import {
 } from "@/components/ui/select";
 import {
   Eye,
-  Loader,
+  Loader2,
-  CheckCircle,
+  CheckCircle2,
   XCircle,
   ChevronLeft,
   ChevronRight,
@@ -28,315 +28,273 @@ import {
   Truck,
 } from "lucide-react";
 import Link from "next/link";
-import { fetchWithAuthClient } from "@/lib/client-utils";
+import { fetchClient } from "@/lib/client-utils";
 import { toast } from "sonner";
 import { Checkbox } from "@/components/ui/checkbox";
 
 interface Order {
   _id: string;
-  orderId: number;
+  orderId: string;
   status: string;
   totalPrice: number;
-  escrowExpiresAt: string;
-  telegramUsername: string;
   createdAt: string;
+  telegramUsername?: string;
 }
 
+type SortableColumns = "orderId" | "totalPrice" | "status" | "createdAt";
+
 export default function OrderTable() {
   const [orders, setOrders] = useState<Order[]>([]);
-  const [filteredOrders, setFilteredOrders] = useState<Order[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [sortConfig, setSortConfig] = useState<{
+    column: SortableColumns;
+    direction: "asc" | "desc";
+  }>({ column: "createdAt", direction: "desc" });
   const [selectedOrders, setSelectedOrders] = useState<Set<string>>(new Set());
-  const [loading, setLoading] = useState<boolean>(true);
-  const [statusFilter, setStatusFilter] = useState<string>("all");
-  const [currentPage, setCurrentPage] = useState<number>(1);
-  const [totalPages, setTotalPages] = useState<number>(1);
-  const [sortColumn, setSortColumn] = useState<string>("createdAt");
-  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
   const ITEMS_PER_PAGE = 10;
 
-  // Fetch Orders
+  // Fetch orders with error handling
-  useEffect(() => {
+  const fetchOrders = useCallback(async () => {
-    const fetchOrders = async () => {
+    try {
-      try {
+      setLoading(true);
-        setLoading(true);
+      const data = await fetchClient<{ orders: Order[] }>("/orders");
-        const response = await fetchWithAuthClient("/orders");
+      setOrders(data.orders || []);
-
+    } catch (error) {
-        if (response.orders) {
+      toast.error("Failed to fetch orders");
-          setOrders(response.orders);
+      console.error("Fetch error:", error);
-          setFilteredOrders(response.orders);
+    } finally {
-          setTotalPages(Math.ceil(response.orders.length / ITEMS_PER_PAGE));
+      setLoading(false);
-        } else {
+    }
-          throw new Error("Invalid API response format");
-        }
-      } catch (error) {
-        toast.error("Failed to fetch orders.");
-        console.error("Error fetching orders:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchOrders();
   }, []);
 
-  // Filter Orders by Status
   useEffect(() => {
-    const filtered = orders.filter(
+    fetchOrders();
-      (order) => statusFilter === "all" || order.status === statusFilter
+  }, [fetchOrders]);
-    );
-    setFilteredOrders(filtered);
-    setTotalPages(Math.ceil(filtered.length / ITEMS_PER_PAGE));
-    setCurrentPage(1); // Reset to the first page on filter change
-  }, [statusFilter, orders]);
 
-  // Sort Orders
+  // Derived data calculations
-  const sortedOrders = filteredOrders.sort((a, b) => {
+  const filteredOrders = orders.filter(
-    const aValue = a[sortColumn as keyof Order];
+    (order) => statusFilter === "all" || order.status === statusFilter
-    const bValue = b[sortColumn as keyof Order];
+  );
 
-    if (typeof aValue === "number" || typeof aValue === "string") {
+  const sortedOrders = [...filteredOrders].sort((a, b) => {
-      if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
+    const aValue = a[sortConfig.column];
-      if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
+    const bValue = b[sortConfig.column];
+
+    if (typeof aValue === "string" && typeof bValue === "string") {
+      return sortConfig.direction === "asc"
+        ? aValue.localeCompare(bValue)
+        : bValue.localeCompare(aValue);
+    }
+
+    if (typeof aValue === "number" && typeof bValue === "number") {
+      return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue;
     }
 
     return 0;
   });
 
-  // Paginated Orders
+  const totalPages = Math.ceil(sortedOrders.length / ITEMS_PER_PAGE);
   const paginatedOrders = sortedOrders.slice(
     (currentPage - 1) * ITEMS_PER_PAGE,
     currentPage * ITEMS_PER_PAGE
   );
 
-  // Handle Sorting
+  // Handlers
-  const handleSort = (column: string) => {
+  const handleSort = (column: SortableColumns) => {
-    if (column === sortColumn) {
+    setSortConfig(prev => ({
-      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+      column,
-    } else {
+      direction: prev.column === column && prev.direction === "asc" ? "desc" : "asc"
-      setSortColumn(column);
+    }));
-      setSortDirection("asc");
-    }
   };
 
-  const toggleOrderSelection = (orderId: string) => {
+  const toggleSelection = (orderId: string) => {
-    setSelectedOrders((prev) => {
+    setSelectedOrders(prev => {
-      const updated = new Set(prev);
+      const newSet = new Set(prev);
-      if (updated.has(orderId)) {
+      newSet.has(orderId) ? newSet.delete(orderId) : newSet.add(orderId);
-        updated.delete(orderId);
+      return newSet;
-      } else {
-        updated.add(orderId);
-      }
-      return updated;
     });
   };
 
-  // Handle Bulk Actions
+  const toggleAll = () => {
-  const markAsShipped = async () => {
+    if (selectedOrders.size === paginatedOrders.length) {
-    try {
+      setSelectedOrders(new Set());
-      if (selectedOrders.size === 0) {
+    } else {
-        toast.warning("No orders selected.");
+      setSelectedOrders(new Set(paginatedOrders.map(o => o._id)));
-        return;
-      }
-
-      const orderIds = Array.from(selectedOrders);
-      const response = await fetchWithAuthClient(
-        "/orders/mark-shipped",
-        "POST",
-        { orderIds }
-      );
-
-      if (response.success) {
-        setOrders((prevOrders) =>
-          prevOrders.map((order) =>
-            selectedOrders.has(order._id)
-              ? { ...order, status: "shipped" }
-              : order
-          )
-        );
-        setSelectedOrders(new Set());
-        toast.success("Orders marked as shipped successfully.");
-      } else {
-        throw new Error("Failed to update orders");
-      }
-    } catch (error) {
-      toast.error("Failed to update orders.");
-      console.error("Error marking orders as shipped:", error);
     }
   };
 
+  const markAsShipped = async () => {
+    if (selectedOrders.size === 0) {
+      toast.warning("Please select orders to mark as shipped");
+      return;
+    }
+
+    try {
+      await fetchClient("/orders/mark-shipped", {
+        method: "POST",
+        body: JSON.stringify({ orderIds: Array.from(selectedOrders) })
+      });
+
+      setOrders(prev =>
+        prev.map(order =>
+          selectedOrders.has(order._id)
+            ? { ...order, status: "shipped" }
+            : order
+        )
+      );
+      setSelectedOrders(new Set());
+      toast.success("Selected orders marked as shipped");
+    } catch (error) {
+      toast.error("Failed to update orders");
+      console.error("Shipping error:", error);
+    }
+  };
+
+  // Status display configuration
+  const statusConfig = {
+    paid: { icon: CheckCircle2, color: "text-green-500" },
+    unpaid: { icon: XCircle, color: "text-red-500" },
+    confirming: { icon: Loader2, color: "text-yellow-500 -" },
+    shipped: { icon: Truck, color: "text-blue-500" },
+    completed: { icon: CheckCircle2, color: "text-gray-500" },
+    disputed: { icon: XCircle, color: "text-orange-500" },
+    cancelled: { icon: XCircle, color: "text-gray-400" }
+  };
+
   return (
-    <div className="rounded-lg border dark:border-zinc-700 shadow-sm overflow-hidden">
+    <div className="rounded-lg border shadow-sm overflow-hidden">
-      {/* Filter and Bulk Action */}
+      {/* Toolbar */}
-      <div className="p-4 flex justify-between items-center border-b dark:border-zinc-700">
+      <div className="p-4 flex justify-between items-center border-b">
         <Select value={statusFilter} onValueChange={setStatusFilter}>
           <SelectTrigger className="w-40">
             <SelectValue placeholder="Filter Status" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="all">All</SelectItem>
+            <SelectItem value="all">All Statuses</SelectItem>
-            <SelectItem value="paid">Paid</SelectItem>
+            {Object.keys(statusConfig).map(status => (
-            <SelectItem value="unpaid">Unpaid</SelectItem>
+              <SelectItem key={status} value={status}>
-            <SelectItem value="shipped">Shipped</SelectItem>
+                {status.charAt(0).toUpperCase() + status.slice(1)}
-            <SelectItem value="completed">Completed</SelectItem>
+              </SelectItem>
+            ))}
           </SelectContent>
         </Select>
+
         <Button onClick={markAsShipped} disabled={selectedOrders.size === 0}>
           <Truck className="mr-2 h-5 w-5" />
-          Mark as Shipped
+          Mark Shipped ({selectedOrders.size})
         </Button>
       </div>
 
-      {/* Orders Table */}
+      {/* Table */}
       <Table>
-        <TableHeader className="bg-gray-50 dark:bg-zinc-800/50">
+        <TableHeader className="bg-muted">
           <TableRow>
-            <TableHead className="w-[50px] text-center">
+            <TableHead className="w-12">
               <Checkbox
-                checked={
+                checked={selectedOrders.size > 0 && selectedOrders.size === paginatedOrders.length}
-                  selectedOrders.size === paginatedOrders.length &&
+                onCheckedChange={toggleAll}
-                  paginatedOrders.length > 0
-                }
-                onCheckedChange={(checked) =>
-                  setSelectedOrders(
-                    checked
-                      ? new Set(paginatedOrders.map((o) => o._id))
-                      : new Set()
-                  )
-                }
               />
             </TableHead>
-            <TableHead
+            <TableHead className="cursor-pointer" onClick={() => handleSort("orderId")}>
-              className="text-center cursor-pointer"
+              Order ID <ArrowUpDown className="ml-2 inline h-4 w-4" />
-              onClick={() => handleSort("orderId")}
-            >
-              Order ID <ArrowUpDown className="ml-2 h-4 w-4 inline" />
             </TableHead>
-            <TableHead
+            <TableHead className="cursor-pointer" onClick={() => handleSort("totalPrice")}>
-              className="text-center cursor-pointer"
+              Total <ArrowUpDown className="ml-2 inline h-4 w-4" />
-              onClick={() => handleSort("totalPrice")}
-            >
-              Total (£) <ArrowUpDown className="ml-2 h-4 w-4 inline" />
             </TableHead>
-            <TableHead
+            <TableHead className="cursor-pointer" onClick={() => handleSort("status")}>
-              className="text-center cursor-pointer"
+              Status <ArrowUpDown className="ml-2 inline h-4 w-4" />
-              onClick={() => handleSort("status")}
-            >
-              Status <ArrowUpDown className="ml-2 h-4 w-4 inline" />
             </TableHead>
-            <TableHead
+            <TableHead className="cursor-pointer" onClick={() => handleSort("createdAt")}>
-              className="text-center cursor-pointer"
+              Date <ArrowUpDown className="ml-2 inline h-4 w-4" />
-              onClick={() => handleSort("createdAt")}
-            >
-              Date <ArrowUpDown className="ml-2 h-4 w-4 inline" />
             </TableHead>
-            <TableHead className="text-center">Buyer</TableHead>
+            <TableHead>Buyer</TableHead>
-            <TableHead className="text-right">Action</TableHead>
+            <TableHead className="text-right">Actions</TableHead>
           </TableRow>
         </TableHeader>
+
         <TableBody>
           {loading ? (
             <TableRow>
-              <TableCell colSpan={7} className="text-center py-4">
+              <TableCell colSpan={7} className="text-center h-24">
-                <Loader className="h-5 w-5 animate-spin" />
+                <Loader2 className="h-8 w-8 animate-spin mx-auto" />
               </TableCell>
             </TableRow>
-          ) : paginatedOrders.length ? (
+          ) : paginatedOrders.length === 0 ? (
-            paginatedOrders.map((order) => (
-              <TableRow key={order._id}>
-                <TableCell className="text-center">
-                  <Checkbox
-                    checked={selectedOrders.has(order._id)}
-                    onCheckedChange={() => toggleOrderSelection(order._id)}
-                  />
-                </TableCell>
-                <TableCell className="text-center">#{order.orderId}</TableCell>
-                <TableCell className="text-center">
-                  £{order.totalPrice.toFixed(2)}
-                </TableCell>
-                <TableCell className="text-center">
-                  {order.status === "paid" && (
-                    <span className="flex items-center justify-center text-green-500">
-                      <CheckCircle className="h-4 w-4 mr-1" /> Paid
-                    </span>
-                  )}
-                  {order.status === "unpaid" && (
-                    <span className="flex items-center justify-center text-red-500">
-                      <XCircle className="h-4 w-4 mr-1" /> Unpaid
-                    </span>
-                  )}
-                  {order.status === "confirming" && (
-                    <span className="flex items-center justify-center text-yellow-500">
-                      <Loader className="h-4 w-4 mr-1 animate-spin" />{" "}
-                      Confirming
-                    </span>
-                  )}
-                  {order.status === "shipped" && (
-                    <span className="flex items-center justify-center text-blue-500">
-                      <Truck className="h-4 w-4 mr-1" /> Shipped
-                    </span>
-                  )}
-                  {order.status === "completed" && (
-                    <span className="flex items-center justify-center text-gray-500">
-                      <CheckCircle className="h-4 w-4 mr-1" /> Completed
-                    </span>
-                  )}
-                  {order.status === "disputed" && (
-                    <span className="flex items-center justify-center text-orange-500">
-                      <XCircle className="h-4 w-4 mr-1" /> Disputed
-                    </span>
-                  )}
-                  {order.status === "cancelled" && (
-                    <span className="flex items-center justify-center text-gray-400">
-                      <XCircle className="h-4 w-4 mr-1" /> Cancelled
-                    </span>
-                  )}
-                </TableCell>
-                <TableCell className="text-center">
-                  {new Date(order.createdAt).toLocaleDateString()}
-                </TableCell>
-                <TableCell className="text-center">
-                  @{order.telegramUsername}
-                </TableCell>
-                <TableCell className="text-right">
-                  <Link href={`/dashboard/orders/${order._id}`}>
-                    <Button size="sm" variant="ghost">
-                      <Eye className="h-4 w-4" />
-                    </Button>
-                  </Link>
-                </TableCell>
-              </TableRow>
-            ))
-          ) : (
             <TableRow>
-              <TableCell colSpan={7} className="text-center py-4">
+              <TableCell colSpan={7} className="text-center h-24">
-                No orders found.
+                No orders found
               </TableCell>
             </TableRow>
+          ) : (
+            paginatedOrders.map(order => {
+              const StatusIcon = statusConfig[order.status as keyof typeof statusConfig]?.icon || XCircle;
+              const statusColor = statusConfig[order.status as keyof typeof statusConfig]?.color || "text-red-500";
+
+              return (
+                <TableRow key={order._id}>
+                  <TableCell>
+                    <Checkbox
+                      checked={selectedOrders.has(order._id)}
+                      onCheckedChange={() => toggleSelection(order._id)}
+                    />
+                  </TableCell>
+                  <TableCell>#{order.orderId}</TableCell>
+                  <TableCell>£{order.totalPrice.toFixed(2)}</TableCell>
+                  <TableCell>
+                    <div className={`flex items-center ${statusColor}`}>
+                      <StatusIcon className="h-4 w-4 mr-2" />
+                      {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {new Date(order.createdAt).toLocaleDateString("en-GB")}
+                  </TableCell>
+                  <TableCell>
+                    {order.telegramUsername ? `@${order.telegramUsername}` : "-"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Button variant="ghost" size="sm" asChild>
+                      <Link href={`/dashboard/orders/${order._id}`}>
+                        <Eye className="h-4 w-4" />
+                      </Link>
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              );
+            })
           )}
         </TableBody>
       </Table>
 
       {/* Pagination */}
-      <div className="p-4 flex justify-between items-center border-t dark:border-zinc-700">
+      <div className="p-4 flex justify-between items-center border-t">
-        <Button
+        <div className="flex-1 text-sm text-muted-foreground">
-          variant="outline"
+          {selectedOrders.size} of {sortedOrders.length} row(s) selected
-          size="sm"
+        </div>
-          disabled={currentPage === 1}
+
-          onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+        <div className="flex items-center gap-4">
-        >
+          <Button
-          <ChevronLeft className="h-4 w-4" /> Previous
+            variant="outline"
-        </Button>
+            size="sm"
-        <span className="text-sm">
+            disabled={currentPage === 1}
-          Page {currentPage} of {totalPages}
+            onClick={() => setCurrentPage(p => Math.max(p - 1, 1))}
-        </span>
+          >
-        <Button
+            <ChevronLeft className="h-4 w-4 mr-2" /> Previous
-          variant="outline"
+          </Button>
-          size="sm"
+          <span className="text-sm font-medium">
-          disabled={currentPage === totalPages}
+            Page {currentPage} of {totalPages}
-          onClick={() => setCurrentPage((prev) => prev + 1)}
+          </span>
-        >
+          <Button
-          Next <ChevronRight className="h-4 w-4" />
+            variant="outline"
-        </Button>
+            size="sm"
+            disabled={currentPage >= totalPages}
+            onClick={() => setCurrentPage(p => p + 1)}
+          >
+            Next <ChevronRight className="h-4 w-4 ml-2" />
+          </Button>
+        </div>
       </div>
     </div>
   );

lib/client-utils.ts

@@ -1,43 +1,46 @@
-// ✅ Client-Safe API Helper
+/**
-export const fetchWithAuthClient = async <T = any>(
+ * Client-side API utilities with authentication handling
+ */
+
+const getAuthToken = (): string | null => {
+  const token = document.cookie
+    .split('; ')
+    .find(row => row.startsWith('Authorization='))
+    ?.split('=')[1];
+
+  return token || null; // Return null instead of throwing an error
+};
+
+export const fetchClient = async <T = unknown>(
   endpoint: string,
-  method: string = "GET",
+  options: RequestInit = {}
-  body?: unknown
 ): Promise<T> => {
   try {
-    // ✅ Get auth token from cookies (Client-Safe)
+    const authToken = getAuthToken();
-    const authToken = document.cookie
+    if (!authToken) {
-      .split("; ")
+      console.warn("No authentication token found. Redirecting to login...");
-      .find((row) => row.startsWith("Authorization="))
+      window.location.href = "/login";
-      ?.split("=")[1];
+      return Promise.reject("Unauthorized");
-
-    if (!authToken) throw new Error("No authentication token found");
-
-    const options: RequestInit = {
-      method,
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-        "Content-Type": "application/json",
-      },
-      credentials: "include",
-    };
-
-    if (body) {
-      options.body = JSON.stringify(body);
     }
 
-    const res = await fetch(
+    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}${endpoint}`, {
-      `${process.env.NEXT_PUBLIC_API_URL}${endpoint}`,
+      ...options,
-      options
+      headers: {
-    );
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${authToken}`,
+        ...options.headers,
+      },
+      credentials: 'include',
+    });
 
     if (!res.ok) {
-      throw new Error(`Failed to fetch: ${endpoint} (${res.status})`);
+      const errorData = await res.json();
+      throw new Error(errorData.message || `Request failed: ${res.statusText}`);
     }
 
-    return await res.json();
+    return res.json();
   } catch (error) {
-    console.error("API request error:", error);
+    console.error(`API request to ${endpoint} failed:`, error);
     throw error;
   }
 };

lib/data-service.ts

@@ -0,0 +1,31 @@
+import { fetchClient } from './client-utils';
+import type { Product, ShippingMethod, ApiResponse } from './types';
+
+export const ProductService = {
+  getAll: async (): Promise<ApiResponse<Product[]>> => 
+    fetchClient('/products'),
+  
+  create: async (product: Omit<Product, '_id'>): Promise<ApiResponse<Product>> => 
+    fetchClient('/products', { method: 'POST', body: JSON.stringify(product) }),
+
+  update: async (id: string, product: Partial<Product>): Promise<ApiResponse<Product>> => 
+    fetchClient(`/products/${id}`, { method: 'PUT', body: JSON.stringify(product) }),
+
+  delete: async (id: string): Promise<ApiResponse<void>> => 
+    fetchClient(`/products/${id}`, { method: 'DELETE' })
+};
+
+// Shipping Operations
+export const ShippingService = {
+  getAll: async (): Promise<ApiResponse<ShippingMethod[]>> => 
+    fetchClient('/shipping-options'),
+
+  create: async (method: Omit<ShippingMethod, '_id'>): Promise<ApiResponse<ShippingMethod>> => 
+    fetchClient('/shipping-options', { method: 'POST', body: JSON.stringify(method) }),
+
+  update: async (id: string, method: Partial<ShippingMethod>): Promise<ApiResponse<ShippingMethod>> => 
+    fetchClient(`/shipping-options/${id}`, { method: 'PUT', body: JSON.stringify(method) }),
+
+  delete: async (id: string): Promise<ApiResponse<void>> => 
+    fetchClient(`/shipping-options/${id}`, { method: 'DELETE' })
+};

lib/server-utils.ts

@@ -1,47 +1,35 @@
-import { cookies } from "next/headers";
+import { cookies } from 'next/headers';
-import { redirect } from "next/navigation";
+import { redirect } from 'next/navigation';
 
 /**
- * Fetch API with Authorization (for server-side usage only).
+ * Server-side fetch wrapper with auth handling
- * @param endpoint - The API endpoint.
- * @param options - Fetch options (optional).
- * @returns Parsed JSON response.
  */
-export async function fetchWithAuthorization<T = unknown>(
+export const fetchServer = async <T = unknown>(
   endpoint: string,
   options: RequestInit = {}
-): Promise<T> {
+): Promise<T> => {
-  // Access the Authorization cookie securely
+  const cookieStore = cookies();
-  const cookieStore = await cookies();
+  const authToken = await cookieStore.get('Authorization')?.value;
-  const authToken = cookieStore.get("Authorization")?.value;
 
-  console.log("authToken", authToken);
+  if (!authToken) redirect('/login');
 
-  if (!authToken) {
+  try {
-    redirect("/login");
+    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}${endpoint}`, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${authToken}`,
+        ...options.headers,
+      },
+      cache: 'no-store',
+    });
+
+    if (res.status === 401) redirect('/login');
+    if (!res.ok) throw new Error(`Request failed: ${res.statusText}`);
+
+    return res.json();
+  } catch (error) {
+    console.error(`Server request to ${endpoint} failed:`, error);
+    throw error;
   }
-
+};
-  const config: RequestInit = {
-    ...options,
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${authToken}`,
-      ...(options.headers || {}),
-    },
-    cache: "no-store",
-  };
-
-  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}${endpoint}`, config);
-
-  if (res.status === 401) {
-    redirect("/login"); 
-  }
-
-  if (!res.ok) {
-    throw new Error(`Failed to fetch ${endpoint}: ${res.statusText}`);
-  }
-
-  const data = await res.json() as T;
-
-  return data as Promise<T>;
-}

lib/types.ts

@@ -10,3 +10,20 @@ export interface ShippingData {
   name: string;
   price: number;
 }
+
+export interface Product {
+  _id?: string;
+  name: string;
+  price: number;
+  description?: string;
+  sku?: string;
+  stock: number;
+  createdAt?: Date;
+  updatedAt?: Date;
+}
+
+export type ApiResponse<T> = {
+  data?: T;
+  error?: string;
+  total?: number;
+};