g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup

Browse Source
This commit is contained in:
g
2025-02-08 01:56:42 +00:00
parent 468fd69cb5
commit 7374e56253
13 changed files with 297 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/dashboard/content.tsx
View File

@@ -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>
);
}
)
}

32
components/dashboard/order-stats.tsx
View File

@@ -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>
)
}

28
components/layout/layout.tsx
View File

@@ -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>
);
}
)
}

24
components/layout/nav-item.tsx
View File

@@ -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>
);
)

125
components/layout/sidebar.tsx
View File

@@ -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;

201
components/modals/product-modal.tsx
View File

@@ -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 */}
<ProductBasicInfo
productData={productData}
handleChange={handleChange}
categories={categories}
setProductData={setProductData}
/>
<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,24 +169,21 @@ 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,
}))
}))
}
>
<SelectTrigger className="h-9 text-sm">
@@ -245,4 +199,5 @@ const UnitTypeSelect = ({
</SelectContent>
</Select>
</div>
);
)

89
components/ui/card.tsx
View File

@@ -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 }