balls

components/kokonutui/content.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Package, Clock, CheckCircle, AlertTriangle } from "lucide-react";
+import OrderStats from "./order-stats"
+
+interface OrderStatsProps {
+  totalOrders: number;
+  pendingOrders: number;
+  completedOrders: number;
+  cancelledOrders: number;
+}
+
+interface ContentProps {
+  username: string;
+  orderStats: OrderStatsProps;
+}
+
+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");
+    }
+  }, []);
+
+  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>
+      </div>
+    </div>
+  );
+}

components/kokonutui/dashboard.tsx

@@ -0,0 +1,7 @@
+import type React from "react"
+import Layout from "./layout"
+
+export default function Dashboard({ children }: { children: React.ReactNode }) {
+  return <Layout>{children}</Layout>
+}
+

components/kokonutui/layout.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import type { ReactNode } from "react"
+import Sidebar from "./sidebar"
+import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
+
+interface LayoutProps {
+  children: ReactNode
+}
+
+export default function Layout({ children }: LayoutProps) {
+  const { theme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  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>
+      </div>
+    </div>
+  )
+}
+

components/kokonutui/order-stats.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@/lib/utils"
+import { ArrowDown, ArrowUp, type LucideIcon } from "lucide-react"
+
+interface OrderStatsProps {
+  title: string
+  value: string
+  icon: LucideIcon
+}
+
+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">
+        <div className="flex items-center justify-between mb-2">
+          <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>
+      </div>
+    </div>
+  )
+}
+

components/kokonutui/sidebar.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import {
+  BarChart2,
+  Package,
+  ShoppingCart,
+  Users,
+  Settings,
+  HelpCircle,
+  Menu,
+  Home,
+  Truck,
+  Box,
+  DollarSign,
+  LogOut,
+  SunMoon,
+} from "lucide-react"
+import Link from "next/link"
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import type React from "react"
+
+export default function Sidebar() {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const router = useRouter()
+
+  function handleNavigation() {
+    setIsMobileMenuOpen(false)
+  }
+
+  async function handleLogout() {
+    try {
+      const authToken = document.cookie.split("authToken=")[1]
+
+      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/logout`, {
+        method: "POST",
+        headers: { "Authorization": `Bearer ${authToken}` },
+        credentials: "include",
+      })
+
+      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") // Redirect to login page
+    } catch (error) {
+      console.error("Error logging out:", 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 (
+    <>
+      <button
+        type="button"
+        className="lg:hidden fixed top-4 left-4 z-[70] p-2 rounded-lg bg-white dark:bg-[#0F0F12] shadow-md"
+        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+      >
+        <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
+          lg:translate-x-0 lg:static lg:w-64 border-r border-gray-200 dark:border-[#1F1F23]
+          ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"}
+        `}
+      >
+        <div className="h-full flex flex-col">
+          <Link
+            href="/dashboard"
+            className="h-16 px-6 flex items-center border-b border-gray-200 dark:border-[#1F1F23]"
+          >
+            <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">
+                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>
+
+              {/* 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>
+          </div>
+
+          {/* Theme Toggle & Logout at Bottom */}
+          <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]"
+            >
+              <LogOut className="h-5 w-5 mr-3 flex-shrink-0" />
+              Logout
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      {isMobileMenuOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 z-[65] lg:hidden"
+          onClick={() => setIsMobileMenuOpen(false)}
+        />
+      )}
+    </>
+  )
+}