slight cleanup

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();
-    if (hour < 12) {
-      setGreeting("Good morning");
-    } else if (hour < 18) {
-      setGreeting("Good afternoon");
-    } else {
-      setGreeting("Good evening");
-    }
+    setGreeting(getGreeting());
   }, []);
 
+  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
-          title="Total Orders"
-          value={orderStats.totalOrders.toLocaleString()}
-          icon={Package}
-        />
-                <OrderStats
-          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>
+        {statsConfig.map((stat) => (
+          <OrderStats
+            key={stat.title}
+            title={stat.title}
+            value={stat.value.toLocaleString()}
+            icon={stat.icon}
+          />
+        ))}
       </div>
     </div>
   );

components/kokonutui/layout.tsx

@@ -1,33 +1,29 @@
-"use client"
+"use client";
 
-import type { ReactNode } from "react"
-import Sidebar from "./sidebar"
-import { useTheme } from "next-themes"
-import { useEffect, useState } from "react"
+import { useState, useEffect } from "react";
+import { useTheme } from "next-themes";
+import Sidebar from "./sidebar";
 
 interface LayoutProps {
-  children: ReactNode
+  children: React.ReactNode;
 }
 
 export default function Layout({ children }: LayoutProps) {
-  const { theme } = useTheme()
-  const [mounted, setMounted] = useState(false)
+  const { theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
 
-  useEffect(() => {
-    setMounted(true)
-  }, [])
+  useEffect(() => setMounted(true), []);
 
-  if (!mounted) {
-    return null
-  }
+  if (!mounted) 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 { ArrowDown, ArrowUp, type LucideIcon } from "lucide-react"
+import type { LucideIcon } from "lucide-react";
 
 interface OrderStatsProps {
-  title: string
-  value: string
-  icon: LucideIcon
+  title: string;
+  value: string;
+  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>
-        </div>
+        <p className="text-2xl font-semibold text-zinc-900 dark:text-zinc-50">{value}</p>
       </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,
-} from "lucide-react"
-import Link from "next/link"
-import { useState } from "react"
-import { useRouter } from "next/navigation"
-import type React from "react"
+  Menu,
+} from "lucide-react";
+
+interface NavItemProps {
+  href: string;
+  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 router = useRouter()
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const router = useRouter();
 
-  function handleNavigation() {
-    setIsMobileMenuOpen(false)
-  }
-
-  async function handleLogout() {
+  const handleLogout = async () => {
     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
-      router.push("/login") 
+      document.cookie = "authToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;";
+      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="space-y-6">
-              <div>
-                <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-                  Overview
-                </div>
-                <div className="space-y-1">
-                  <NavItem href="/dashboard" icon={Home}>
-                    Dashboard
-                  </NavItem>
-                  <NavItem href="/dashboard/orders" icon={Package}>
-                    Orders
-                  </NavItem>
-                </div>
+          <div className="flex-1 overflow-y-auto py-4 px-4 space-y-6">
+            <div>
+              <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                Overview
               </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 className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-                  Management
-                </div>
-                <div className="space-y-1">
-                  <NavItem href="/dashboard/products" icon={Box}>
-                    Products
-                  </NavItem>
-                  <NavItem href="/dashboard/shipping" icon={Truck}>
-                    Shipping Options
-                  </NavItem>
-                  <NavItem href="/dashboard/storefront" icon={Settings}>
-                    Manage Storefront
-                  </NavItem>
-                </div>
+            <div>
+              <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                Management
+              </div>
+              <div className="space-y-1">
+                <NavItem href="/dashboard/products" icon={Box} onClick={() => setIsMobileMenuOpen(false)}>
+                  Products
+                </NavItem>
+                <NavItem href="/dashboard/shipping" icon={Truck} onClick={() => setIsMobileMenuOpen(false)}>
+                  Shipping
+                </NavItem>
+                <NavItem href="/dashboard/storefront" icon={Settings} onClick={() => setIsMobileMenuOpen(false)}>
+                  Storefront
+                </NavItem>
               </div>
             </div>
           </div>
 
-          {/* Theme Toggle & Logout at Bottom */}
-          <div className="p-4 border-t border-gray-200 dark:border-[#1F1F23] flex flex-col space-y-2">
+          <div className="p-4 border-t border-gray-200 dark:border-[#1F1F23]">
             <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() {
         />
       )}
     </>
-  )
+  );
 }