Cleanup

app/layout.tsx

@@ -1,12 +1,13 @@
 import { Inter } from "next/font/google"
 import "./globals.css"
-import { ThemeProvider } from "@/components/layout/theme-provider";
+import { ThemeProvider } from "@/components/layout/theme-provider"
+import type React from "react" // Import React
 
 const inter = Inter({ subsets: ["latin"] })
 
 export const metadata = {
   title: "Ember",
-  description: "",
+  description: "E-commerce management dashboard",
 }
 
 export default function RootLayout({
@@ -24,4 +25,3 @@ export default function RootLayout({
     </html>
   )
 }
-

components/dashboard/content.tsx

@@ -1,45 +1,26 @@
-"use client";
+"use client"
 
-import { useState, useEffect } from "react";
+import { useState, useEffect } from "react"
-import { Package, Clock, CheckCircle, AlertTriangle } from "lucide-react";
+import OrderStats from "./order-stats"
-import OrderStats from "./order-stats";
+import { getGreeting } from "@/lib/utils"
-
+import { statsConfig } from "@/config/dashboard"
-interface OrderStatsData {
+import type { OrderStatsData } from "@/lib/types"
-  totalOrders: number;
-  pendingOrders: number;
-  completedOrders: number;
-  cancelledOrders: number;
-}
 
 interface ContentProps {
-  username: string;
+  username: string
-  orderStats: OrderStatsData;
+  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("");
+  const [greeting, setGreeting] = useState("")
 
   useEffect(() => {
-    setGreeting(getGreeting());
+    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">
-      <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
+      <h1 className="text-2xl font-semibold text-foreground">
         {greeting}, {username}!
       </h1>
 
@@ -48,11 +29,12 @@ export default function Content({ username, orderStats }: ContentProps) {
           <OrderStats
             key={stat.title}
             title={stat.title}
-            value={stat.value.toLocaleString()}
+            value={orderStats[stat.key as keyof OrderStatsData].toLocaleString()}
             icon={stat.icon}
           />
         ))}
       </div>
     </div>
-  );
+  )
 }
+

components/dashboard/order-stats.tsx

@@ -1,21 +1,23 @@
-import type { LucideIcon } from "lucide-react";
+import type { LucideIcon } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
 interface OrderStatsProps {
-  title: string;
+  title: string
-  value: string;
+  value: string
-  icon: LucideIcon;
+  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">
+    <Card>
-      <div className="p-4">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <div className="flex items-center justify-between mb-2">
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
-          <h2 className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{title}</h2>
+        <Icon className="h-4 w-4 text-muted-foreground" />
-          <Icon className="w-4 h-4 text-zinc-600 dark:text-zinc-400" />
+      </CardHeader>
-        </div>
+      <CardContent>
-        <p className="text-2xl font-semibold text-zinc-900 dark:text-zinc-50">{value}</p>
+        <div className="text-2xl font-bold">{value}</div>
-      </div>
+      </CardContent>
-    </div>
+    </Card>
-  );
+  )
 }
+

components/layout/layout.tsx

@@ -1,29 +1,29 @@
-"use client";
+"use client"
 
-import { useState, useEffect } from "react";
+import { useState, useEffect } from "react"
-import { useTheme } from "next-themes";
+import { useTheme } from "next-themes"
-import Sidebar from "./sidebar";
+import Sidebar from "./sidebar"
+import type React from "react" // Added import for React
 
 interface LayoutProps {
-  children: React.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(() => 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]">
+        <main className="flex-1 overflow-auto p-6 dak:bg-[#0F0F12]">{children}</main>
-          {children}
-        </main>
       </div>
     </div>
-  );
+  )
 }
+

components/layout/nav-item.tsx

@@ -1,24 +1,22 @@
-import Link from "next/link";
+import Link from "next/link"
+import type { LucideIcon } from "lucide-react"
+import type React from "react" // Added import for React
 
 interface NavItemProps {
-  href: string;
+  href: string
-  icon: React.ElementType;
+  icon: LucideIcon
-  children: React.ReactNode;
+  children: React.ReactNode
-  onClick?: () => void;
+  onClick?: () => void
 }
 
-export const NavItem: React.FC<NavItemProps> = ({
+export const NavItem: React.FC<NavItemProps> = ({ href, icon: Icon, children, onClick }) => (
-  href,
-  icon: Icon,
-  children,
-  onClick,
-}) => (
   <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]"
+    className="flex items-center px-3 py-2 text-sm rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
   >
     <Icon className="h-4 w-4 mr-3 flex-shrink-0" />
     {children}
   </Link>
-);
+)
+

components/layout/sidebar.tsx

@@ -1,114 +1,43 @@
-"use client";
+"use client"
-
-import { fetchData } from "@/lib/data-service";
-import { useState } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import {
-  Package,
-  ShoppingCart,
-  Home,
-  Truck,
-  Box,
-  Settings,
-  LogOut,
-  Menu,
-} from "lucide-react";
-
-import { NavItem } from "./nav-item";
-
-interface SidebarItem {
-  name: string;
-  href: string;
-  icon: React.ElementType;
-}
-
-interface SidebarSection {
-  title: string;
-  items: SidebarItem[];
-}
-
-const sidebarConfig: SidebarSection[] = [
-  {
-    title: "Overview",
-    items: [
-      { name: "Dashboard", href: "/dashboard", icon: Home },
-      { name: "Orders", href: "/dashboard/orders", icon: Package },
-    ],
-  },
-  {
-    title: "Management",
-    items: [
-      { name: "Products", href: "/dashboard/products", icon: Box },
-      { name: "Shipping", href: "/dashboard/shipping", icon: Truck },
-      { name: "Storefront", href: "/dashboard/storefront", icon: Settings },
-    ],
-  },
-];
 
+import { useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { ShoppingCart, LogOut } from "lucide-react"
+import { NavItem } from "./nav-item"
+import { Button } from "@/components/ui/button"
+import { sidebarConfig } from "@/config/sidebar"
 
 const Sidebar: React.FC = () => {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
-  const router = useRouter();
+  const router = useRouter()
-
-  const handleLogout = async () => {
-    try {
-      const authToken = document.cookie.split("authToken=")[1];
-      const res = await fetchData(`${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;";
-      router.push("/login");
-    } catch (error) {
-      console.error("Logout error:", error);
-    }
-  };
 
   return (
     <>
-      {/* Sidebar Navigation */}
       <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
+          fixed inset-y-0 left-0 z-[70] w-64 bg-background 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]
+          lg:translate-x-0 lg:static lg:w-64 border-r border-border
           ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"}
         `}
       >
         <div className="h-full flex flex-col">
-          {/* Brand Logo */}
+          <Link href="/dashboard" className="h-16 px-6 flex items-center border-b border-border">
-          <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" />
+              <ShoppingCart className="h-6 w-6 text-foreground" />
-              <span className="text-lg font-semibold text-gray-900 dark:text-white">
+              <span className="text-lg font-semibold text-foreground">Ember</span>
-                Ember
-              </span>
             </div>
           </Link>
 
-          {/* Sidebar Navigation Items */}
           <div className="flex-1 overflow-y-auto py-4 px-4 space-y-6">
             {sidebarConfig.map((section, index) => (
               <div key={index}>
-                <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-muted-foreground">
                   {section.title}
                 </div>
                 <div className="space-y-1">
                   {section.items.map((item, idx) => (
-                    <NavItem
+                    <NavItem key={idx} href={item.href} icon={item.icon} onClick={() => setIsMobileMenuOpen(false)}>
-                      key={idx}
-                      href={item.href}
-                      icon={item.icon}
-                      onClick={() => setIsMobileMenuOpen(false)}
-                    >
                       {item.name}
                     </NavItem>
                   ))}
@@ -117,20 +46,19 @@ const Sidebar: React.FC = () => {
             ))}
           </div>
 
-          {/* Logout Button */}
+          <div className="p-4 border-t border-border">
-          <div className="p-4 border-t border-gray-200 dark:border-[#1F1F23]">
+            <Button
-            <button
+              onClick={() => {}}
-              onClick={handleLogout}
+              variant="ghost"
-              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]"
+              className="w-full justify-start text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 hover:bg-background"
             >
               <LogOut className="h-5 w-5 mr-3 flex-shrink-0" />
               Logout
-            </button>
+            </Button>
           </div>
         </div>
       </nav>
 
-      {/* Mobile Menu Overlay */}
       {isMobileMenuOpen && (
         <div
           className="fixed inset-0 bg-black bg-opacity-50 z-[65] lg:hidden"
@@ -138,7 +66,8 @@ const Sidebar: React.FC = () => {
         />
       )}
     </>
-  );
+  )
-};
+}
+
+export default Sidebar
 
-export default Sidebar;

components/modals/product-modal.tsx

@@ -1,17 +1,18 @@
-"use client";
+"use client"
 
-import { useState, useEffect } from "react";
+import { useState, useEffect } from "react"
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea";
+import { Textarea } from "@/components/ui/textarea"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { ImageUpload } from "@/components/forms/image-upload";
+import { ImageUpload } from "@/components/forms/image-upload"
-import { PricingTiers } from "@/components/forms/pricing-tiers";
+import { PricingTiers } from "@/components/forms/pricing-tiers"
-import { ProductModalProps, ProductData } from "@/lib/types";
+import type { ProductModalProps, ProductData } from "@/lib/types"
-import { toast } from "sonner";
+import { toast } from "sonner"
+import type React from "react" // Import React
 
-export const ProductModal = ({
+export const ProductModal: React.FC<ProductModalProps> = ({
   open,
   onClose,
   onSave,
@@ -19,92 +20,64 @@ export const ProductModal = ({
   categories,
   editing,
   handleChange,
+  handleTieredPricingChange,
+  handleAddTier,
+  handleRemoveTier,
   setProductData,
-}: ProductModalProps) => {
+}) => {
-  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [imagePreview, setImagePreview] = useState<string | null>(null)
-  const [imageDimensions, setImageDimensions] = useState({ width: 300, height: 200 });
+  const [imageDimensions, setImageDimensions] = useState({ width: 300, height: 200 })
 
   useEffect(() => {
     if (productData.image && typeof productData.image === "string") {
-      setImagePreview(productData.image);
+      setImagePreview(productData.image)
     }
-  }, [productData.image]);
+  }, [productData.image])
 
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
+    const file = e.target.files?.[0]
     if (!file) {
-      setProductData({ ...productData, image: null });
+      setProductData({ ...productData, image: null })
-      setImagePreview(null);
+      setImagePreview(null)
-      return;
+      return
     }
 
-    const image = new Image();
+    const image = new Image()
-    const objectUrl = URL.createObjectURL(file);
+    const objectUrl = URL.createObjectURL(file)
 
     image.onload = () => {
-      const aspectRatio = image.naturalWidth / image.naturalHeight;
+      const aspectRatio = image.naturalWidth / image.naturalHeight
-      const width = aspectRatio > 1 ? 300 : 200 * aspectRatio;
+      const width = aspectRatio > 1 ? 300 : 200 * aspectRatio
-      const height = aspectRatio > 1 ? 300 / aspectRatio : 200;
+      const height = aspectRatio > 1 ? 300 / aspectRatio : 200
 
-      setProductData({ ...productData, image: file });
+      setProductData({ ...productData, image: file })
-      setImagePreview(objectUrl);
+      setImagePreview(objectUrl)
-      setImageDimensions({ width, height });
+      setImageDimensions({ width, height })
-    };
+    }
 
-    image.src = objectUrl;
+    image.src = objectUrl
-  };
+  }
-
-  const handleTierChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
-    const { name, valueAsNumber } = e.target;
-  
-    if (!["minQuantity", "pricePerUnit"].includes(name)) return; // ✅ Ensure valid keys
-  
-    const updatedPricing = [...productData.pricing];
-    (updatedPricing[index] as any)[name] = isNaN(valueAsNumber) ? 0 : valueAsNumber;
-    
-    setProductData({ ...productData, pricing: updatedPricing });
-  };
-
-
-  const handleAddTier = () => {
-    setProductData(prev => ({
-      ...prev,
-      pricing: [...prev.pricing, { minQuantity: 1, pricePerUnit: 0 }]
-    }));
-  };
-
-  const handleRemoveTier = (index: number) => {
-    const updatedPricing = productData.pricing.filter((_, i) => i !== index);
-    setProductData({ ...productData, pricing: updatedPricing });
-  };
 
   const handleSave = () => {
-    onSave(productData);
+    onSave(productData)
-    toast.success(editing ? "Product updated!" : "Product added!");
+    toast.success(editing ? "Product updated!" : "Product added!")
-    onClose();
+    onClose()
-  };
+  }
 
   return (
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent className="max-w-6xl">
         <DialogHeader>
-          <DialogTitle className="text-base">
+          <DialogTitle className="text-base">{editing ? "Edit Product" : "Add Product"}</DialogTitle>
-            {editing ? "Edit Product" : "Add Product"}
-          </DialogTitle>
         </DialogHeader>
 
         <div className="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-8 py-4">
-          {/* Left Column */}
+          <ProductBasicInfo
-          <div className="space-y-6">
+            productData={productData}
-            <ProductBasicInfo
+            handleChange={handleChange}
-              productData={productData}
+            categories={categories}
-              handleChange={handleChange}
+            setProductData={setProductData}
-              categories={categories}
+          />
-              setProductData={setProductData}
-            />
-          </div>
-
-          {/* Right Column */}
           <div className="space-y-6">
             <ImageUpload
               imagePreview={imagePreview}
@@ -113,7 +86,7 @@ export const ProductModal = ({
             />
             <PricingTiers
               pricing={productData.pricing}
-              handleTierChange={handleTierChange}
+              handleTierChange={handleTieredPricingChange}
               handleRemoveTier={handleRemoveTier}
               handleAddTier={handleAddTier}
             />
@@ -121,28 +94,23 @@ export const ProductModal = ({
         </div>
 
         <DialogFooter>
-          <Button variant="outline" onClick={onClose}>Cancel</Button>
+          <Button variant="outline" onClick={onClose}>
-          <Button onClick={handleSave}>
+            Cancel
-            {editing ? "Update" : "Create"}
           </Button>
+          <Button onClick={handleSave}>{editing ? "Update" : "Create"}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  );
+  )
-};
+}
 
-const ProductBasicInfo = ({
+const ProductBasicInfo: React.FC<{
-  productData,
+  productData: ProductData
-  handleChange,
+  handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
-  categories,
+  categories: { _id: string; name: string }[]
-  setProductData,
+  setProductData: React.Dispatch<React.SetStateAction<ProductData>>
-}: {
+}> = ({ productData, handleChange, categories, setProductData }) => (
-  productData: ProductData;
+  <div className="space-y-4">
-  handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-  categories: { _id: string; name: string }[];
-  setProductData: React.Dispatch<React.SetStateAction<ProductData>>;
-}) => (
-  <>
     <div>
       <label className="text-sm font-medium">Product Name</label>
       <Input
@@ -166,28 +134,17 @@ const ProductBasicInfo = ({
       />
     </div>
 
-    <CategorySelect
+    <CategorySelect categories={categories} value={productData.category} setProductData={setProductData} />
-      categories={categories}
-      value={productData.category}
-      setProductData={setProductData}
-    />
 
-    <UnitTypeSelect
+    <UnitTypeSelect value={productData.unitType} setProductData={setProductData} />
-      value={productData.unitType}
+  </div>
-      setProductData={setProductData}
+)
-    />
-  </>
-);
 
-const CategorySelect = ({
+const CategorySelect: React.FC<{
-  categories,
+  categories: { _id: string; name: string }[]
-  value,
+  value: string
-  setProductData,
+  setProductData: React.Dispatch<React.SetStateAction<ProductData>>
-}: {
+}> = ({ categories, value, setProductData }) => (
-  categories: { _id: string; name: string }[];
-  value: string;
-  setProductData: React.Dispatch<React.SetStateAction<ProductData>>;
-}) => (
   <div>
     <label className="text-sm font-medium">Category</label>
     <Select
@@ -212,21 +169,18 @@ const CategorySelect = ({
       </SelectContent>
     </Select>
   </div>
-);
+)
 
-const UnitTypeSelect = ({
+const UnitTypeSelect: React.FC<{
-  value,
+  value: string
-  setProductData,
+  setProductData: React.Dispatch<React.SetStateAction<ProductData>>
-}: {
+}> = ({ value, setProductData }) => (
-  value: string;
-  setProductData: React.Dispatch<React.SetStateAction<ProductData>>;
-}) => (
   <div>
     <label className="text-sm font-medium">Unit Type</label>
     <Select
       value={value || "placeholder"}
       onValueChange={(val) =>
-        setProductData((prev: ProductData) => ({
+        setProductData((prev) => ({
           ...prev,
           unitType: val === "placeholder" ? "" : val,
         }))
@@ -245,4 +199,5 @@ const UnitTypeSelect = ({
       </SelectContent>
     </Select>
   </div>
-);
+)
+

components/ui/card.tsx

@@ -1,79 +1,44 @@
 import * as React from "react"
 
-import { cn } from "@/lib/styles";
+import { cn } from "@/lib/utils"
 
-const Card = React.forwardRef<
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  HTMLDivElement,
+  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
-    {...props}
-  />
 ))
 Card.displayName = "Card"
 
-const CardHeader = React.forwardRef<
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => (
-  React.HTMLAttributes<HTMLDivElement>
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
->(({ className, ...props }, ref) => (
+  ),
-  <div
+)
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
 CardHeader.displayName = "CardHeader"
 
-const CardTitle = React.forwardRef<
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => (
-  React.HTMLAttributes<HTMLDivElement>
+    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
->(({ className, ...props }, ref) => (
+  ),
-  <div
+)
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
 CardTitle.displayName = "CardTitle"
 
-const CardDescription = React.forwardRef<
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => (
-  React.HTMLAttributes<HTMLDivElement>
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
->(({ className, ...props }, ref) => (
+  ),
-  <div
+)
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
 CardDescription.displayName = "CardDescription"
 
-const CardContent = React.forwardRef<
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
-  React.HTMLAttributes<HTMLDivElement>
+)
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
 CardContent.displayName = "CardContent"
 
-const CardFooter = React.forwardRef<
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => (
-  React.HTMLAttributes<HTMLDivElement>
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
->(({ className, ...props }, ref) => (
+  ),
-  <div
+)
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
 CardFooter.displayName = "CardFooter"
 
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+

config/dashboard.ts

@@ -0,0 +1,9 @@
+import { Package, Clock, CheckCircle, AlertTriangle } from "lucide-react"
+
+export const statsConfig = [
+  { title: "Total Orders", key: "totalOrders", icon: Package },
+  { title: "Completed Orders", key: "completedOrders", icon: CheckCircle },
+  { title: "Pending Orders", key: "pendingOrders", icon: Clock },
+  { title: "Cancelled Orders", key: "cancelledOrders", icon: AlertTriangle },
+]
+

config/sidebar.ts

@@ -0,0 +1,20 @@
+import { Home, Package, Box, Truck, Settings } from "lucide-react"
+
+export const sidebarConfig = [
+  {
+    title: "Overview",
+    items: [
+      { name: "Dashboard", href: "/dashboard", icon: Home },
+      { name: "Orders", href: "/dashboard/orders", icon: Package },
+    ],
+  },
+  {
+    title: "Management",
+    items: [
+      { name: "Products", href: "/dashboard/products", icon: Box },
+      { name: "Shipping", href: "/dashboard/shipping", icon: Truck },
+      { name: "Storefront", href: "/dashboard/storefront", icon: Settings },
+    ],
+  },
+]
+

lib/types.ts

@@ -1,69 +1,82 @@
-import { ChangeEvent, Dispatch, SetStateAction } from "react";
+import type { LucideIcon } from "lucide-react"
+import type React from "react"
 
 export interface ProductModalProps {
-  open: boolean;
+  open: boolean
-  onClose: () => void;
+  onClose: () => void
-  onSave: (productData: ProductData) => void;
+  onSave: (productData: ProductData) => void
-  productData: ProductData;
+  productData: ProductData
-  categories: Category[];
+  categories: Category[]
-  editing: boolean;
+  editing: boolean
-  handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
-  handleTieredPricingChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;
+  handleTieredPricingChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void
-  handleAddTier: () => void; // ✅ ADDED
+  handleAddTier: () => void
-  handleRemoveTier: (index: number) => void; // ✅ ADDED
+  handleRemoveTier: (index: number) => void
-  setProductData: React.Dispatch<React.SetStateAction<ProductData>>;
+  setProductData: React.Dispatch<React.SetStateAction<ProductData>>
 }
 
-// lib/types.ts
 export interface ShippingMethod {
-  _id?: string; // Optional before saving, required after fetching
+  _id?: string
-  name: string;
+  name: string
-  price: number;
+  price: number
 }
 
 export interface ShippingData {
-  _id?: string; // Optional before saving
+  _id?: string
-  name: string;
+  name: string
-  price: number;
+  price: number
 }
 
 export type ApiResponse<T> = {
-  data?: T;
+  data?: T
-  error?: string;
+  error?: string
-  total?: number;
+  total?: number
-};
+}
-
-
 
 export interface Product {
-  _id?: string;
+  _id?: string
-  name: string;
+  name: string
-  description: string;
+  description: string
-  stock?: number;
+  stock?: number
-  unitType: string;
+  unitType: string
-  category: string;
+  category: string
-  pricing: PricingTier[];
+  pricing: PricingTier[]
-  image?: string | File | null;
+  image?: string | File | null
 }
 
-export interface ProductData {
+export interface ProductData extends Product {}
-  _id?: string;
-  name: string;
-  description: string;
-  stock?: number;
-  unitType: string;
-  category: string;
-  pricing: PricingTier[];
-  image?: string | File | null;
-}
 
 export interface PricingTier {
-  minQuantity: number;
+  minQuantity: number
-  pricePerUnit: number;
+  pricePerUnit: number
-  _id?: string;
+  _id?: string
 }
 
 export interface Category {
-  _id: string;
+  _id: string
-  name: string;
+  name: string
+}
+
+export interface OrderStatsData {
+  totalOrders: number
+  pendingOrders: number
+  completedOrders: number
+  cancelledOrders: number
+}
+
+export interface Order {
+  _id: string
+  orderId: string
+  status: OrderStatus
+  totalPrice: number
+  createdAt: string
+  telegramUsername?: string
+}
+
+export type OrderStatus = "paid" | "unpaid" | "confirming" | "shipped" | "completed" | "disputed" | "cancelled"
+
+export interface StatusConfig {
+  icon: LucideIcon
+  color: string
+  animate?: string
 }

lib/utils.ts

@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}
+
+export const getGreeting = () => {
+  const hour = new Date().getHours()
+  if (hour < 12) return "Good morning"
+  if (hour < 18) return "Good afternoon"
+  return "Good evening"
+}