Cleanup
This commit is contained in:
g
BIN
Archive.zip
Normal file
BIN
Archive.zip
Normal file
Binary file not shown.
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,45 +1,26 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Package, Clock, CheckCircle, AlertTriangle } from "lucide-react";
|
||||
import OrderStats from "./order-stats";
|
||||
|
||||
interface OrderStatsData {
|
||||
totalOrders: number;
|
||||
pendingOrders: number;
|
||||
completedOrders: number;
|
||||
cancelledOrders: number;
|
||||
}
|
||||
import { useState, useEffect } from "react"
|
||||
import OrderStats from "./order-stats"
|
||||
import { getGreeting } from "@/lib/utils"
|
||||
import { statsConfig } from "@/config/dashboard"
|
||||
import type { OrderStatsData } from "@/lib/types"
|
||||
|
||||
interface ContentProps {
|
||||
username: string;
|
||||
orderStats: OrderStatsData;
|
||||
username: string
|
||||
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());
|
||||
}, []);
|
||||
|
||||
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 },
|
||||
];
|
||||
setGreeting(getGreeting())
|
||||
}, [])
|
||||
|
||||
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>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
value: string;
|
||||
icon: LucideIcon;
|
||||
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>
|
||||
<p className="text-2xl font-semibold text-zinc-900 dark:text-zinc-50">{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">{title}</CardTitle>
|
||||
<Icon className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{value}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTheme } from "next-themes";
|
||||
import Sidebar from "./sidebar";
|
||||
import { useState, useEffect } from "react"
|
||||
import { useTheme } from "next-themes"
|
||||
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 [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 dak:bg-[#0F0F12]">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
icon: React.ElementType;
|
||||
children: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
href: string
|
||||
icon: LucideIcon
|
||||
children: React.ReactNode
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
export const NavItem: React.FC<NavItemProps> = ({
|
||||
href,
|
||||
icon: Icon,
|
||||
children,
|
||||
onClick,
|
||||
}) => (
|
||||
export const NavItem: React.FC<NavItemProps> = ({ 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>
|
||||
);
|
||||
)
|
||||
|
||||
|
||||
@@ -1,114 +1,43 @@
|
||||
"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 },
|
||||
],
|
||||
},
|
||||
];
|
||||
"use client"
|
||||
|
||||
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 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);
|
||||
}
|
||||
};
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
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
|
||||
lg:translate-x-0 lg:static lg:w-64 border-r border-gray-200 dark:border-[#1F1F23]
|
||||
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-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-gray-200 dark:border-[#1F1F23]"
|
||||
>
|
||||
<Link href="/dashboard" className="h-16 px-6 flex items-center border-b border-border">
|
||||
<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 text-gray-900 dark:text-white">
|
||||
Ember
|
||||
</span>
|
||||
<ShoppingCart className="h-6 w-6 text-foreground" />
|
||||
<span className="text-lg font-semibold text-foreground">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
|
||||
key={idx}
|
||||
href={item.href}
|
||||
icon={item.icon}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<NavItem 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-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]"
|
||||
<div className="p-4 border-t border-border">
|
||||
<Button
|
||||
onClick={() => {}}
|
||||
variant="ghost"
|
||||
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;
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { ImageUpload } from "@/components/forms/image-upload";
|
||||
import { PricingTiers } from "@/components/forms/pricing-tiers";
|
||||
import { ProductModalProps, ProductData } from "@/lib/types";
|
||||
import { toast } from "sonner";
|
||||
import { useState, useEffect } from "react"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { ImageUpload } from "@/components/forms/image-upload"
|
||||
import { PricingTiers } from "@/components/forms/pricing-tiers"
|
||||
import type { ProductModalProps, ProductData } from "@/lib/types"
|
||||
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 [imageDimensions, setImageDimensions] = useState({ width: 300, height: 200 });
|
||||
}) => {
|
||||
const [imagePreview, setImagePreview] = useState<string | null>(null)
|
||||
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 });
|
||||
setImagePreview(null);
|
||||
return;
|
||||
setProductData({ ...productData, image: null })
|
||||
setImagePreview(null)
|
||||
return
|
||||
}
|
||||
|
||||
const image = new Image();
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
const image = new Image()
|
||||
const objectUrl = URL.createObjectURL(file)
|
||||
|
||||
image.onload = () => {
|
||||
const aspectRatio = image.naturalWidth / image.naturalHeight;
|
||||
const width = aspectRatio > 1 ? 300 : 200 * aspectRatio;
|
||||
const height = aspectRatio > 1 ? 300 / aspectRatio : 200;
|
||||
const aspectRatio = image.naturalWidth / image.naturalHeight
|
||||
const width = aspectRatio > 1 ? 300 : 200 * aspectRatio
|
||||
const height = aspectRatio > 1 ? 300 / aspectRatio : 200
|
||||
|
||||
setProductData({ ...productData, image: file });
|
||||
setImagePreview(objectUrl);
|
||||
setImageDimensions({ width, height });
|
||||
};
|
||||
setProductData({ ...productData, image: file })
|
||||
setImagePreview(objectUrl)
|
||||
setImageDimensions({ width, height })
|
||||
}
|
||||
|
||||
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 });
|
||||
};
|
||||
image.src = objectUrl
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
onSave(productData);
|
||||
toast.success(editing ? "Product updated!" : "Product added!");
|
||||
onClose();
|
||||
};
|
||||
onSave(productData)
|
||||
toast.success(editing ? "Product updated!" : "Product added!")
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-6xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base">
|
||||
{editing ? "Edit Product" : "Add Product"}
|
||||
</DialogTitle>
|
||||
<DialogTitle className="text-base">{editing ? "Edit Product" : "Add Product"}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-8 py-4">
|
||||
{/* Left Column */}
|
||||
<div className="space-y-6">
|
||||
<ProductBasicInfo
|
||||
productData={productData}
|
||||
handleChange={handleChange}
|
||||
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 onClick={handleSave}>
|
||||
{editing ? "Update" : "Create"}
|
||||
<Button variant="outline" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave}>{editing ? "Update" : "Create"}</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
const ProductBasicInfo = ({
|
||||
productData,
|
||||
handleChange,
|
||||
categories,
|
||||
setProductData,
|
||||
}: {
|
||||
productData: ProductData;
|
||||
handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
||||
categories: { _id: string; name: string }[];
|
||||
setProductData: React.Dispatch<React.SetStateAction<ProductData>>;
|
||||
}) => (
|
||||
<>
|
||||
const ProductBasicInfo: React.FC<{
|
||||
productData: ProductData
|
||||
handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
|
||||
categories: { _id: string; name: string }[]
|
||||
setProductData: React.Dispatch<React.SetStateAction<ProductData>>
|
||||
}> = ({ productData, handleChange, categories, setProductData }) => (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium">Product Name</label>
|
||||
<Input
|
||||
@@ -166,28 +134,17 @@ const ProductBasicInfo = ({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CategorySelect
|
||||
categories={categories}
|
||||
value={productData.category}
|
||||
setProductData={setProductData}
|
||||
/>
|
||||
<CategorySelect categories={categories} value={productData.category} setProductData={setProductData} />
|
||||
|
||||
<UnitTypeSelect
|
||||
value={productData.unitType}
|
||||
setProductData={setProductData}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
<UnitTypeSelect value={productData.unitType} setProductData={setProductData} />
|
||||
</div>
|
||||
)
|
||||
|
||||
const CategorySelect = ({
|
||||
categories,
|
||||
value,
|
||||
setProductData,
|
||||
}: {
|
||||
categories: { _id: string; name: string }[];
|
||||
value: string;
|
||||
setProductData: React.Dispatch<React.SetStateAction<ProductData>>;
|
||||
}) => (
|
||||
const CategorySelect: React.FC<{
|
||||
categories: { _id: string; name: string }[]
|
||||
value: string
|
||||
setProductData: React.Dispatch<React.SetStateAction<ProductData>>
|
||||
}> = ({ categories, value, setProductData }) => (
|
||||
<div>
|
||||
<label className="text-sm font-medium">Category</label>
|
||||
<Select
|
||||
@@ -212,21 +169,18 @@ const CategorySelect = ({
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
|
||||
const UnitTypeSelect = ({
|
||||
value,
|
||||
setProductData,
|
||||
}: {
|
||||
value: string;
|
||||
setProductData: React.Dispatch<React.SetStateAction<ProductData>>;
|
||||
}) => (
|
||||
const UnitTypeSelect: React.FC<{
|
||||
value: string
|
||||
setProductData: React.Dispatch<React.SetStateAction<ProductData>>
|
||||
}> = ({ value, setProductData }) => (
|
||||
<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>
|
||||
);
|
||||
)
|
||||
|
||||
|
||||
@@ -1,79 +1,44 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/styles";
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-lg border bg-card text-card-foreground shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
const Card = React.forwardRef<HTMLDivElement, 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<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ 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<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-2xl font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardTitle.displayName = "CardTitle"
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardDescription.displayName = "CardDescription"
|
||||
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
))
|
||||
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
|
||||
)
|
||||
CardContent.displayName = "CardContent"
|
||||
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ 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 }
|
||||
|
||||
|
||||
9
config/dashboard.ts
Normal file
9
config/dashboard.ts
Normal file
@@ -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 },
|
||||
]
|
||||
|
||||
20
config/sidebar.ts
Normal file
20
config/sidebar.ts
Normal file
@@ -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 },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
109
lib/types.ts
109
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;
|
||||
onClose: () => void;
|
||||
onSave: (productData: ProductData) => void;
|
||||
productData: ProductData;
|
||||
categories: Category[];
|
||||
editing: boolean;
|
||||
handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
||||
handleTieredPricingChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;
|
||||
handleAddTier: () => void; // ✅ ADDED
|
||||
handleRemoveTier: (index: number) => void; // ✅ ADDED
|
||||
setProductData: React.Dispatch<React.SetStateAction<ProductData>>;
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
onSave: (productData: ProductData) => void
|
||||
productData: ProductData
|
||||
categories: Category[]
|
||||
editing: boolean
|
||||
handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
|
||||
handleTieredPricingChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void
|
||||
handleAddTier: () => void
|
||||
handleRemoveTier: (index: number) => void
|
||||
setProductData: React.Dispatch<React.SetStateAction<ProductData>>
|
||||
}
|
||||
|
||||
// lib/types.ts
|
||||
export interface ShippingMethod {
|
||||
_id?: string; // Optional before saving, required after fetching
|
||||
name: string;
|
||||
price: number;
|
||||
_id?: string
|
||||
name: string
|
||||
price: number
|
||||
}
|
||||
|
||||
export interface ShippingData {
|
||||
_id?: string; // Optional before saving
|
||||
name: string;
|
||||
price: number;
|
||||
_id?: string
|
||||
name: string
|
||||
price: number
|
||||
}
|
||||
|
||||
export type ApiResponse<T> = {
|
||||
data?: T;
|
||||
error?: string;
|
||||
total?: number;
|
||||
};
|
||||
|
||||
|
||||
data?: T
|
||||
error?: string
|
||||
total?: number
|
||||
}
|
||||
|
||||
export interface Product {
|
||||
_id?: string;
|
||||
name: string;
|
||||
description: string;
|
||||
stock?: number;
|
||||
unitType: string;
|
||||
category: string;
|
||||
pricing: PricingTier[];
|
||||
image?: string | File | null;
|
||||
_id?: string
|
||||
name: string
|
||||
description: string
|
||||
stock?: number
|
||||
unitType: string
|
||||
category: string
|
||||
pricing: PricingTier[]
|
||||
image?: string | File | null
|
||||
}
|
||||
|
||||
export interface ProductData {
|
||||
_id?: string;
|
||||
name: string;
|
||||
description: string;
|
||||
stock?: number;
|
||||
unitType: string;
|
||||
category: string;
|
||||
pricing: PricingTier[];
|
||||
image?: string | File | null;
|
||||
}
|
||||
export interface ProductData extends Product {}
|
||||
|
||||
export interface PricingTier {
|
||||
minQuantity: number;
|
||||
pricePerUnit: number;
|
||||
_id?: string;
|
||||
minQuantity: number
|
||||
pricePerUnit: number
|
||||
_id?: string
|
||||
}
|
||||
|
||||
export interface Category {
|
||||
_id: string;
|
||||
name: string;
|
||||
_id: 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
|
||||
}
|
||||
13
lib/utils.ts
Normal file
13
lib/utils.ts
Normal file
@@ -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"
|
||||
}
|
||||
Reference in New Issue
Block a user