slight cleanup
This commit is contained in:
g
@@ -1,6 +1,6 @@
|
||||
import Dashboard from "@/components/kokonutui/dashboard";
|
||||
import Content from "@/components/kokonutui/content";
|
||||
import { fetchWithAuthorization } from "@/lib/server-utils"
|
||||
import { fetchServer } from "@/lib/server-utils"
|
||||
|
||||
// ✅ Corrected Vendor Type
|
||||
interface Vendor {
|
||||
@@ -24,8 +24,8 @@ interface OrderStats {
|
||||
|
||||
export default async function DashboardPage() {
|
||||
const [userResponse, orderStats] = await Promise.all([
|
||||
fetchWithAuthorization<User>("/auth/me"),
|
||||
fetchWithAuthorization<OrderStats>("/orders/stats"),
|
||||
fetchServer<User>("/auth/me"),
|
||||
fetchServer<OrderStats>("/orders/stats"),
|
||||
]);
|
||||
|
||||
const vendor = userResponse.vendor;
|
||||
|
||||
@@ -6,19 +6,17 @@ import { Textarea } from "@/components/ui/textarea";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Send } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { apiRequest } from "@/lib/storeHelper"; // ✅ API helper
|
||||
import { apiRequest } from "@/lib/storeHelper";
|
||||
|
||||
// ✅ Define props type
|
||||
interface BroadcastDialogProps {
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps) {
|
||||
const [broadcastMessage, setBroadcastMessage] = useState<string>("");
|
||||
const [sendingBroadcast, setSendingBroadcast] = useState<boolean>(false);
|
||||
const [broadcastMessage, setBroadcastMessage] = useState("");
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
|
||||
// ✅ Send Broadcast Message
|
||||
const sendBroadcast = async () => {
|
||||
if (!broadcastMessage.trim()) {
|
||||
toast.warning("Broadcast message cannot be empty.");
|
||||
@@ -26,14 +24,10 @@ export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps)
|
||||
}
|
||||
|
||||
try {
|
||||
setSendingBroadcast(true);
|
||||
|
||||
// ✅ API Call
|
||||
setIsSending(true);
|
||||
const response = await apiRequest("/storefront/broadcast", "POST", { message: broadcastMessage });
|
||||
|
||||
if (response.error) {
|
||||
throw new Error(response.error);
|
||||
}
|
||||
if (response.error) throw new Error(response.error);
|
||||
|
||||
toast.success(`Broadcast sent to ${response.totalUsers} users!`);
|
||||
setBroadcastMessage("");
|
||||
@@ -41,7 +35,7 @@ export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps)
|
||||
} catch (error) {
|
||||
toast.error("Failed to send broadcast message.");
|
||||
} finally {
|
||||
setSendingBroadcast(false);
|
||||
setIsSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -52,17 +46,23 @@ export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps)
|
||||
<Send className="h-6 w-6 text-emerald-600" />
|
||||
<DialogTitle>Global Broadcast Message</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<Textarea
|
||||
placeholder="Type your message here..."
|
||||
value={broadcastMessage}
|
||||
onChange={(e) => setBroadcastMessage(e.target.value)}
|
||||
/>
|
||||
|
||||
<DialogFooter>
|
||||
<Button onClick={() => setOpen(false)} variant="secondary">
|
||||
<Button variant="secondary" onClick={() => setOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={sendBroadcast} disabled={sendingBroadcast} className="bg-emerald-600 hover:bg-emerald-700">
|
||||
{sendingBroadcast ? "Sending..." : "Send Broadcast"}
|
||||
<Button
|
||||
onClick={sendBroadcast}
|
||||
disabled={isSending}
|
||||
className="bg-emerald-600 hover:bg-emerald-700"
|
||||
>
|
||||
{isSending ? "Sending..." : "Send Broadcast"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Package, Clock, CheckCircle, AlertTriangle } from "lucide-react";
|
||||
import OrderStats from "./order-stats"
|
||||
import OrderStats from "./order-stats";
|
||||
|
||||
interface OrderStatsProps {
|
||||
interface OrderStatsData {
|
||||
totalOrders: number;
|
||||
pendingOrders: number;
|
||||
completedOrders: number;
|
||||
@@ -13,56 +13,45 @@ interface OrderStatsProps {
|
||||
|
||||
interface ContentProps {
|
||||
username: string;
|
||||
orderStats: OrderStatsProps;
|
||||
orderStats: OrderStatsData;
|
||||
}
|
||||
|
||||
const getGreeting = () => {
|
||||
const hour = new Date().getHours();
|
||||
if (hour < 12) return "Good morning";
|
||||
if (hour < 18) return "Good afternoon";
|
||||
return "Good evening";
|
||||
};
|
||||
|
||||
export default function Content({ username, orderStats }: ContentProps) {
|
||||
const [greeting, setGreeting] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const hour = new Date().getHours();
|
||||
if (hour < 12) {
|
||||
setGreeting("Good morning");
|
||||
} else if (hour < 18) {
|
||||
setGreeting("Good afternoon");
|
||||
} else {
|
||||
setGreeting("Good evening");
|
||||
}
|
||||
setGreeting(getGreeting());
|
||||
}, []);
|
||||
|
||||
const statsConfig = [
|
||||
{ title: "Total Orders", value: orderStats.totalOrders, icon: Package },
|
||||
{ title: "Completed Orders", value: orderStats.completedOrders, icon: CheckCircle },
|
||||
{ title: "Pending Orders", value: orderStats.pendingOrders, icon: Clock },
|
||||
{ title: "Cancelled Orders", value: orderStats.cancelledOrders, icon: AlertTriangle },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Dynamic Greeting */}
|
||||
<h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
|
||||
{greeting}, {username}!
|
||||
</h1>
|
||||
|
||||
{/* Order Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{statsConfig.map((stat) => (
|
||||
<OrderStats
|
||||
title="Total Orders"
|
||||
value={orderStats.totalOrders.toLocaleString()}
|
||||
icon={Package}
|
||||
key={stat.title}
|
||||
title={stat.title}
|
||||
value={stat.value.toLocaleString()}
|
||||
icon={stat.icon}
|
||||
/>
|
||||
<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>
|
||||
);
|
||||
|
||||
@@ -1,33 +1,29 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import type { ReactNode } from "react"
|
||||
import Sidebar from "./sidebar"
|
||||
import { useTheme } from "next-themes"
|
||||
import { useEffect, useState } from "react"
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTheme } from "next-themes";
|
||||
import Sidebar from "./sidebar";
|
||||
|
||||
interface LayoutProps {
|
||||
children: ReactNode
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function Layout({ children }: LayoutProps) {
|
||||
const { theme } = useTheme()
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const { theme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
useEffect(() => setMounted(true), []);
|
||||
|
||||
if (!mounted) {
|
||||
return null
|
||||
}
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<div className={`flex h-screen ${theme === "dark" ? "dark" : ""}`}>
|
||||
<Sidebar />
|
||||
<div className="w-full flex flex-1 flex-col">
|
||||
<main className="flex-1 overflow-auto p-6 bg-white dark:bg-[#0F0F12]">{children}</main>
|
||||
<main className="flex-1 overflow-auto p-6 bg-white dark:bg-[#0F0F12]">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ArrowDown, ArrowUp, type LucideIcon } from "lucide-react"
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
|
||||
interface OrderStatsProps {
|
||||
title: string
|
||||
value: string
|
||||
icon: LucideIcon
|
||||
title: string;
|
||||
value: string;
|
||||
icon: LucideIcon;
|
||||
}
|
||||
|
||||
export default function OrderStats({ title, value, icon: Icon,}: OrderStatsProps) {
|
||||
export default function OrderStats({ title, value, icon: Icon }: OrderStatsProps) {
|
||||
return (
|
||||
<div className="w-full bg-white dark:bg-zinc-900/70 border border-zinc-100 dark:border-zinc-800 rounded-xl shadow-sm backdrop-blur-xl">
|
||||
<div className="p-4">
|
||||
@@ -15,11 +14,8 @@ export default function OrderStats({ title, value, icon: Icon,}: OrderStatsProps
|
||||
<h2 className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{title}</h2>
|
||||
<Icon className="w-4 h-4 text-zinc-600 dark:text-zinc-400" />
|
||||
</div>
|
||||
<div className="flex items-baseline">
|
||||
<p className="text-2xl font-semibold text-zinc-900 dark:text-zinc-50">{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,72 +1,58 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
BarChart2,
|
||||
Package,
|
||||
ShoppingCart,
|
||||
Users,
|
||||
Settings,
|
||||
HelpCircle,
|
||||
Menu,
|
||||
Home,
|
||||
Truck,
|
||||
Box,
|
||||
DollarSign,
|
||||
Settings,
|
||||
LogOut,
|
||||
SunMoon,
|
||||
} from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import type React from "react"
|
||||
Menu,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function Sidebar() {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
||||
const router = useRouter()
|
||||
interface NavItemProps {
|
||||
href: string;
|
||||
icon: React.ElementType;
|
||||
children: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
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")
|
||||
} catch (error) {
|
||||
console.error("Error logging out:", error)
|
||||
}
|
||||
}
|
||||
|
||||
function NavItem({
|
||||
href,
|
||||
icon: Icon,
|
||||
children,
|
||||
}: {
|
||||
href: string
|
||||
icon: any
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
const NavItem = ({ href, icon: Icon, children, onClick }: NavItemProps) => (
|
||||
<Link
|
||||
href={href}
|
||||
onClick={handleNavigation}
|
||||
onClick={onClick}
|
||||
className="flex items-center px-3 py-2 text-sm rounded-md transition-colors text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
|
||||
>
|
||||
<Icon className="h-4 w-4 mr-3 flex-shrink-0" />
|
||||
{children}
|
||||
</Link>
|
||||
)
|
||||
);
|
||||
|
||||
export default function Sidebar() {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const handleLogout = async () => {
|
||||
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;";
|
||||
router.push("/login");
|
||||
} catch (error) {
|
||||
console.error("Logout error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -77,6 +63,7 @@ export default function Sidebar() {
|
||||
>
|
||||
<Menu className="h-5 w-5 text-gray-600 dark:text-gray-300" />
|
||||
</button>
|
||||
|
||||
<nav
|
||||
className={`
|
||||
fixed inset-y-0 left-0 z-[70] w-64 bg-white dark:bg-[#0F0F12] transform transition-transform duration-200 ease-in-out
|
||||
@@ -91,50 +78,46 @@ export default function Sidebar() {
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<ShoppingCart className="h-6 w-6 text-gray-900 dark:text-white" />
|
||||
<span className="text-lg font-semibold hover:cursor-pointer text-gray-900 dark:text-white">
|
||||
<span className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Ember
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="flex-1 overflow-y-auto py-4 px-4">
|
||||
<div className="space-y-6">
|
||||
<div className="flex-1 overflow-y-auto py-4 px-4 space-y-6">
|
||||
<div>
|
||||
<div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
||||
Overview
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NavItem href="/dashboard" icon={Home}>
|
||||
<NavItem href="/dashboard" icon={Home} onClick={() => setIsMobileMenuOpen(false)}>
|
||||
Dashboard
|
||||
</NavItem>
|
||||
<NavItem href="/dashboard/orders" icon={Package}>
|
||||
<NavItem href="/dashboard/orders" icon={Package} onClick={() => setIsMobileMenuOpen(false)}>
|
||||
Orders
|
||||
</NavItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Management Section */}
|
||||
<div>
|
||||
<div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
||||
Management
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NavItem href="/dashboard/products" icon={Box}>
|
||||
<NavItem href="/dashboard/products" icon={Box} onClick={() => setIsMobileMenuOpen(false)}>
|
||||
Products
|
||||
</NavItem>
|
||||
<NavItem href="/dashboard/shipping" icon={Truck}>
|
||||
Shipping Options
|
||||
<NavItem href="/dashboard/shipping" icon={Truck} onClick={() => setIsMobileMenuOpen(false)}>
|
||||
Shipping
|
||||
</NavItem>
|
||||
<NavItem href="/dashboard/storefront" icon={Settings}>
|
||||
Manage Storefront
|
||||
<NavItem href="/dashboard/storefront" icon={Settings} onClick={() => setIsMobileMenuOpen(false)}>
|
||||
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">
|
||||
<div className="p-4 border-t border-gray-200 dark:border-[#1F1F23]">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full flex items-center px-3 py-2 text-sm rounded-md transition-colors text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
|
||||
@@ -153,5 +136,5 @@ export default function Sidebar() {
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -19,8 +19,8 @@ import {
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Eye,
|
||||
Loader,
|
||||
CheckCircle,
|
||||
Loader2,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
@@ -28,316 +28,274 @@ import {
|
||||
Truck,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { fetchWithAuthClient } from "@/lib/client-utils";
|
||||
import { fetchClient } from "@/lib/client-utils";
|
||||
import { toast } from "sonner";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
|
||||
interface Order {
|
||||
_id: string;
|
||||
orderId: number;
|
||||
orderId: string;
|
||||
status: string;
|
||||
totalPrice: number;
|
||||
escrowExpiresAt: string;
|
||||
telegramUsername: string;
|
||||
createdAt: string;
|
||||
telegramUsername?: string;
|
||||
}
|
||||
|
||||
type SortableColumns = "orderId" | "totalPrice" | "status" | "createdAt";
|
||||
|
||||
export default function OrderTable() {
|
||||
const [orders, setOrders] = useState<Order[]>([]);
|
||||
const [filteredOrders, setFilteredOrders] = useState<Order[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [statusFilter, setStatusFilter] = useState("all");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [sortConfig, setSortConfig] = useState<{
|
||||
column: SortableColumns;
|
||||
direction: "asc" | "desc";
|
||||
}>({ column: "createdAt", direction: "desc" });
|
||||
const [selectedOrders, setSelectedOrders] = useState<Set<string>>(new Set());
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||
const [currentPage, setCurrentPage] = useState<number>(1);
|
||||
const [totalPages, setTotalPages] = useState<number>(1);
|
||||
const [sortColumn, setSortColumn] = useState<string>("createdAt");
|
||||
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
|
||||
const ITEMS_PER_PAGE = 10;
|
||||
|
||||
// Fetch Orders
|
||||
useEffect(() => {
|
||||
const fetchOrders = async () => {
|
||||
// Fetch orders with error handling
|
||||
const fetchOrders = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetchWithAuthClient("/orders");
|
||||
|
||||
if (response.orders) {
|
||||
setOrders(response.orders);
|
||||
setFilteredOrders(response.orders);
|
||||
setTotalPages(Math.ceil(response.orders.length / ITEMS_PER_PAGE));
|
||||
} else {
|
||||
throw new Error("Invalid API response format");
|
||||
}
|
||||
const data = await fetchClient<{ orders: Order[] }>("/orders");
|
||||
setOrders(data.orders || []);
|
||||
} catch (error) {
|
||||
toast.error("Failed to fetch orders.");
|
||||
console.error("Error fetching orders:", error);
|
||||
toast.error("Failed to fetch orders");
|
||||
console.error("Fetch error:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchOrders();
|
||||
}, []);
|
||||
|
||||
// Filter Orders by Status
|
||||
useEffect(() => {
|
||||
const filtered = orders.filter(
|
||||
fetchOrders();
|
||||
}, [fetchOrders]);
|
||||
|
||||
// Derived data calculations
|
||||
const filteredOrders = orders.filter(
|
||||
(order) => statusFilter === "all" || order.status === statusFilter
|
||||
);
|
||||
setFilteredOrders(filtered);
|
||||
setTotalPages(Math.ceil(filtered.length / ITEMS_PER_PAGE));
|
||||
setCurrentPage(1); // Reset to the first page on filter change
|
||||
}, [statusFilter, orders]);
|
||||
|
||||
// Sort Orders
|
||||
const sortedOrders = filteredOrders.sort((a, b) => {
|
||||
const aValue = a[sortColumn as keyof Order];
|
||||
const bValue = b[sortColumn as keyof Order];
|
||||
const sortedOrders = [...filteredOrders].sort((a, b) => {
|
||||
const aValue = a[sortConfig.column];
|
||||
const bValue = b[sortConfig.column];
|
||||
|
||||
if (typeof aValue === "number" || typeof aValue === "string") {
|
||||
if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
|
||||
if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
|
||||
if (typeof aValue === "string" && typeof bValue === "string") {
|
||||
return sortConfig.direction === "asc"
|
||||
? aValue.localeCompare(bValue)
|
||||
: bValue.localeCompare(aValue);
|
||||
}
|
||||
|
||||
if (typeof aValue === "number" && typeof bValue === "number") {
|
||||
return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Paginated Orders
|
||||
const totalPages = Math.ceil(sortedOrders.length / ITEMS_PER_PAGE);
|
||||
const paginatedOrders = sortedOrders.slice(
|
||||
(currentPage - 1) * ITEMS_PER_PAGE,
|
||||
currentPage * ITEMS_PER_PAGE
|
||||
);
|
||||
|
||||
// Handle Sorting
|
||||
const handleSort = (column: string) => {
|
||||
if (column === sortColumn) {
|
||||
setSortDirection(sortDirection === "asc" ? "desc" : "asc");
|
||||
} else {
|
||||
setSortColumn(column);
|
||||
setSortDirection("asc");
|
||||
}
|
||||
// Handlers
|
||||
const handleSort = (column: SortableColumns) => {
|
||||
setSortConfig(prev => ({
|
||||
column,
|
||||
direction: prev.column === column && prev.direction === "asc" ? "desc" : "asc"
|
||||
}));
|
||||
};
|
||||
|
||||
const toggleOrderSelection = (orderId: string) => {
|
||||
setSelectedOrders((prev) => {
|
||||
const updated = new Set(prev);
|
||||
if (updated.has(orderId)) {
|
||||
updated.delete(orderId);
|
||||
} else {
|
||||
updated.add(orderId);
|
||||
}
|
||||
return updated;
|
||||
const toggleSelection = (orderId: string) => {
|
||||
setSelectedOrders(prev => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.has(orderId) ? newSet.delete(orderId) : newSet.add(orderId);
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
// Handle Bulk Actions
|
||||
const toggleAll = () => {
|
||||
if (selectedOrders.size === paginatedOrders.length) {
|
||||
setSelectedOrders(new Set());
|
||||
} else {
|
||||
setSelectedOrders(new Set(paginatedOrders.map(o => o._id)));
|
||||
}
|
||||
};
|
||||
|
||||
const markAsShipped = async () => {
|
||||
try {
|
||||
if (selectedOrders.size === 0) {
|
||||
toast.warning("No orders selected.");
|
||||
toast.warning("Please select orders to mark as shipped");
|
||||
return;
|
||||
}
|
||||
|
||||
const orderIds = Array.from(selectedOrders);
|
||||
const response = await fetchWithAuthClient(
|
||||
"/orders/mark-shipped",
|
||||
"POST",
|
||||
{ orderIds }
|
||||
);
|
||||
try {
|
||||
await fetchClient("/orders/mark-shipped", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ orderIds: Array.from(selectedOrders) })
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
setOrders((prevOrders) =>
|
||||
prevOrders.map((order) =>
|
||||
setOrders(prev =>
|
||||
prev.map(order =>
|
||||
selectedOrders.has(order._id)
|
||||
? { ...order, status: "shipped" }
|
||||
: order
|
||||
)
|
||||
);
|
||||
setSelectedOrders(new Set());
|
||||
toast.success("Orders marked as shipped successfully.");
|
||||
} else {
|
||||
throw new Error("Failed to update orders");
|
||||
}
|
||||
toast.success("Selected orders marked as shipped");
|
||||
} catch (error) {
|
||||
toast.error("Failed to update orders.");
|
||||
console.error("Error marking orders as shipped:", error);
|
||||
toast.error("Failed to update orders");
|
||||
console.error("Shipping error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// Status display configuration
|
||||
const statusConfig = {
|
||||
paid: { icon: CheckCircle2, color: "text-green-500" },
|
||||
unpaid: { icon: XCircle, color: "text-red-500" },
|
||||
confirming: { icon: Loader2, color: "text-yellow-500 -" },
|
||||
shipped: { icon: Truck, color: "text-blue-500" },
|
||||
completed: { icon: CheckCircle2, color: "text-gray-500" },
|
||||
disputed: { icon: XCircle, color: "text-orange-500" },
|
||||
cancelled: { icon: XCircle, color: "text-gray-400" }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border dark:border-zinc-700 shadow-sm overflow-hidden">
|
||||
{/* Filter and Bulk Action */}
|
||||
<div className="p-4 flex justify-between items-center border-b dark:border-zinc-700">
|
||||
<div className="rounded-lg border shadow-sm overflow-hidden">
|
||||
{/* Toolbar */}
|
||||
<div className="p-4 flex justify-between items-center border-b">
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue placeholder="Filter Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All</SelectItem>
|
||||
<SelectItem value="paid">Paid</SelectItem>
|
||||
<SelectItem value="unpaid">Unpaid</SelectItem>
|
||||
<SelectItem value="shipped">Shipped</SelectItem>
|
||||
<SelectItem value="completed">Completed</SelectItem>
|
||||
<SelectItem value="all">All Statuses</SelectItem>
|
||||
{Object.keys(statusConfig).map(status => (
|
||||
<SelectItem key={status} value={status}>
|
||||
{status.charAt(0).toUpperCase() + status.slice(1)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button onClick={markAsShipped} disabled={selectedOrders.size === 0}>
|
||||
<Truck className="mr-2 h-5 w-5" />
|
||||
Mark as Shipped
|
||||
Mark Shipped ({selectedOrders.size})
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Orders Table */}
|
||||
{/* Table */}
|
||||
<Table>
|
||||
<TableHeader className="bg-gray-50 dark:bg-zinc-800/50">
|
||||
<TableHeader className="bg-muted">
|
||||
<TableRow>
|
||||
<TableHead className="w-[50px] text-center">
|
||||
<TableHead className="w-12">
|
||||
<Checkbox
|
||||
checked={
|
||||
selectedOrders.size === paginatedOrders.length &&
|
||||
paginatedOrders.length > 0
|
||||
}
|
||||
onCheckedChange={(checked) =>
|
||||
setSelectedOrders(
|
||||
checked
|
||||
? new Set(paginatedOrders.map((o) => o._id))
|
||||
: new Set()
|
||||
)
|
||||
}
|
||||
checked={selectedOrders.size > 0 && selectedOrders.size === paginatedOrders.length}
|
||||
onCheckedChange={toggleAll}
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-center cursor-pointer"
|
||||
onClick={() => handleSort("orderId")}
|
||||
>
|
||||
Order ID <ArrowUpDown className="ml-2 h-4 w-4 inline" />
|
||||
<TableHead className="cursor-pointer" onClick={() => handleSort("orderId")}>
|
||||
Order ID <ArrowUpDown className="ml-2 inline h-4 w-4" />
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-center cursor-pointer"
|
||||
onClick={() => handleSort("totalPrice")}
|
||||
>
|
||||
Total (£) <ArrowUpDown className="ml-2 h-4 w-4 inline" />
|
||||
<TableHead className="cursor-pointer" onClick={() => handleSort("totalPrice")}>
|
||||
Total <ArrowUpDown className="ml-2 inline h-4 w-4" />
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-center cursor-pointer"
|
||||
onClick={() => handleSort("status")}
|
||||
>
|
||||
Status <ArrowUpDown className="ml-2 h-4 w-4 inline" />
|
||||
<TableHead className="cursor-pointer" onClick={() => handleSort("status")}>
|
||||
Status <ArrowUpDown className="ml-2 inline h-4 w-4" />
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="text-center cursor-pointer"
|
||||
onClick={() => handleSort("createdAt")}
|
||||
>
|
||||
Date <ArrowUpDown className="ml-2 h-4 w-4 inline" />
|
||||
<TableHead className="cursor-pointer" onClick={() => handleSort("createdAt")}>
|
||||
Date <ArrowUpDown className="ml-2 inline h-4 w-4" />
|
||||
</TableHead>
|
||||
<TableHead className="text-center">Buyer</TableHead>
|
||||
<TableHead className="text-right">Action</TableHead>
|
||||
<TableHead>Buyer</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center py-4">
|
||||
<Loader className="h-5 w-5 animate-spin" />
|
||||
<TableCell colSpan={7} className="text-center h-24">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : paginatedOrders.length ? (
|
||||
paginatedOrders.map((order) => (
|
||||
) : paginatedOrders.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center h-24">
|
||||
No orders found
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
paginatedOrders.map(order => {
|
||||
const StatusIcon = statusConfig[order.status as keyof typeof statusConfig]?.icon || XCircle;
|
||||
const statusColor = statusConfig[order.status as keyof typeof statusConfig]?.color || "text-red-500";
|
||||
|
||||
return (
|
||||
<TableRow key={order._id}>
|
||||
<TableCell className="text-center">
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedOrders.has(order._id)}
|
||||
onCheckedChange={() => toggleOrderSelection(order._id)}
|
||||
onCheckedChange={() => toggleSelection(order._id)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">#{order.orderId}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
£{order.totalPrice.toFixed(2)}
|
||||
<TableCell>#{order.orderId}</TableCell>
|
||||
<TableCell>£{order.totalPrice.toFixed(2)}</TableCell>
|
||||
<TableCell>
|
||||
<div className={`flex items-center ${statusColor}`}>
|
||||
<StatusIcon className="h-4 w-4 mr-2" />
|
||||
{order.status.charAt(0).toUpperCase() + order.status.slice(1)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{order.status === "paid" && (
|
||||
<span className="flex items-center justify-center text-green-500">
|
||||
<CheckCircle className="h-4 w-4 mr-1" /> Paid
|
||||
</span>
|
||||
)}
|
||||
{order.status === "unpaid" && (
|
||||
<span className="flex items-center justify-center text-red-500">
|
||||
<XCircle className="h-4 w-4 mr-1" /> Unpaid
|
||||
</span>
|
||||
)}
|
||||
{order.status === "confirming" && (
|
||||
<span className="flex items-center justify-center text-yellow-500">
|
||||
<Loader className="h-4 w-4 mr-1 animate-spin" />{" "}
|
||||
Confirming
|
||||
</span>
|
||||
)}
|
||||
{order.status === "shipped" && (
|
||||
<span className="flex items-center justify-center text-blue-500">
|
||||
<Truck className="h-4 w-4 mr-1" /> Shipped
|
||||
</span>
|
||||
)}
|
||||
{order.status === "completed" && (
|
||||
<span className="flex items-center justify-center text-gray-500">
|
||||
<CheckCircle className="h-4 w-4 mr-1" /> Completed
|
||||
</span>
|
||||
)}
|
||||
{order.status === "disputed" && (
|
||||
<span className="flex items-center justify-center text-orange-500">
|
||||
<XCircle className="h-4 w-4 mr-1" /> Disputed
|
||||
</span>
|
||||
)}
|
||||
{order.status === "cancelled" && (
|
||||
<span className="flex items-center justify-center text-gray-400">
|
||||
<XCircle className="h-4 w-4 mr-1" /> Cancelled
|
||||
</span>
|
||||
)}
|
||||
<TableCell>
|
||||
{new Date(order.createdAt).toLocaleDateString("en-GB")}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{new Date(order.createdAt).toLocaleDateString()}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
@{order.telegramUsername}
|
||||
<TableCell>
|
||||
{order.telegramUsername ? `@${order.telegramUsername}` : "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link href={`/dashboard/orders/${order._id}`}>
|
||||
<Button size="sm" variant="ghost">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center py-4">
|
||||
No orders found.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="p-4 flex justify-between items-center border-t dark:border-zinc-700">
|
||||
<div className="p-4 flex justify-between items-center border-t">
|
||||
<div className="flex-1 text-sm text-muted-foreground">
|
||||
{selectedOrders.size} of {sortedOrders.length} row(s) selected
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
||||
onClick={() => setCurrentPage(p => Math.max(p - 1, 1))}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" /> Previous
|
||||
<ChevronLeft className="h-4 w-4 mr-2" /> Previous
|
||||
</Button>
|
||||
<span className="text-sm">
|
||||
<span className="text-sm font-medium">
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
disabled={currentPage >= totalPages}
|
||||
onClick={() => setCurrentPage(p => p + 1)}
|
||||
>
|
||||
Next <ChevronRight className="h-4 w-4" />
|
||||
Next <ChevronRight className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,43 +1,46 @@
|
||||
// ✅ Client-Safe API Helper
|
||||
export const fetchWithAuthClient = async <T = any>(
|
||||
/**
|
||||
* Client-side API utilities with authentication handling
|
||||
*/
|
||||
|
||||
const getAuthToken = (): string | null => {
|
||||
const token = document.cookie
|
||||
.split('; ')
|
||||
.find(row => row.startsWith('Authorization='))
|
||||
?.split('=')[1];
|
||||
|
||||
return token || null; // Return null instead of throwing an error
|
||||
};
|
||||
|
||||
export const fetchClient = async <T = unknown>(
|
||||
endpoint: string,
|
||||
method: string = "GET",
|
||||
body?: unknown
|
||||
options: RequestInit = {}
|
||||
): Promise<T> => {
|
||||
try {
|
||||
// ✅ Get auth token from cookies (Client-Safe)
|
||||
const authToken = document.cookie
|
||||
.split("; ")
|
||||
.find((row) => row.startsWith("Authorization="))
|
||||
?.split("=")[1];
|
||||
|
||||
if (!authToken) throw new Error("No authentication token found");
|
||||
|
||||
const options: RequestInit = {
|
||||
method,
|
||||
headers: {
|
||||
Authorization: `Bearer ${authToken}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
};
|
||||
|
||||
if (body) {
|
||||
options.body = JSON.stringify(body);
|
||||
const authToken = getAuthToken();
|
||||
if (!authToken) {
|
||||
console.warn("No authentication token found. Redirecting to login...");
|
||||
window.location.href = "/login";
|
||||
return Promise.reject("Unauthorized");
|
||||
}
|
||||
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}${endpoint}`,
|
||||
options
|
||||
);
|
||||
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}${endpoint}`, {
|
||||
...options,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${authToken}`,
|
||||
...options.headers,
|
||||
},
|
||||
credentials: 'include',
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`Failed to fetch: ${endpoint} (${res.status})`);
|
||||
const errorData = await res.json();
|
||||
throw new Error(errorData.message || `Request failed: ${res.statusText}`);
|
||||
}
|
||||
|
||||
return await res.json();
|
||||
return res.json();
|
||||
} catch (error) {
|
||||
console.error("API request error:", error);
|
||||
console.error(`API request to ${endpoint} failed:`, error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
31
lib/data-service.ts
Normal file
31
lib/data-service.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { fetchClient } from './client-utils';
|
||||
import type { Product, ShippingMethod, ApiResponse } from './types';
|
||||
|
||||
export const ProductService = {
|
||||
getAll: async (): Promise<ApiResponse<Product[]>> =>
|
||||
fetchClient('/products'),
|
||||
|
||||
create: async (product: Omit<Product, '_id'>): Promise<ApiResponse<Product>> =>
|
||||
fetchClient('/products', { method: 'POST', body: JSON.stringify(product) }),
|
||||
|
||||
update: async (id: string, product: Partial<Product>): Promise<ApiResponse<Product>> =>
|
||||
fetchClient(`/products/${id}`, { method: 'PUT', body: JSON.stringify(product) }),
|
||||
|
||||
delete: async (id: string): Promise<ApiResponse<void>> =>
|
||||
fetchClient(`/products/${id}`, { method: 'DELETE' })
|
||||
};
|
||||
|
||||
// Shipping Operations
|
||||
export const ShippingService = {
|
||||
getAll: async (): Promise<ApiResponse<ShippingMethod[]>> =>
|
||||
fetchClient('/shipping-options'),
|
||||
|
||||
create: async (method: Omit<ShippingMethod, '_id'>): Promise<ApiResponse<ShippingMethod>> =>
|
||||
fetchClient('/shipping-options', { method: 'POST', body: JSON.stringify(method) }),
|
||||
|
||||
update: async (id: string, method: Partial<ShippingMethod>): Promise<ApiResponse<ShippingMethod>> =>
|
||||
fetchClient(`/shipping-options/${id}`, { method: 'PUT', body: JSON.stringify(method) }),
|
||||
|
||||
delete: async (id: string): Promise<ApiResponse<void>> =>
|
||||
fetchClient(`/shipping-options/${id}`, { method: 'DELETE' })
|
||||
};
|
||||
@@ -1,47 +1,35 @@
|
||||
import { cookies } from "next/headers";
|
||||
import { redirect } from "next/navigation";
|
||||
import { cookies } from 'next/headers';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
/**
|
||||
* Fetch API with Authorization (for server-side usage only).
|
||||
* @param endpoint - The API endpoint.
|
||||
* @param options - Fetch options (optional).
|
||||
* @returns Parsed JSON response.
|
||||
* Server-side fetch wrapper with auth handling
|
||||
*/
|
||||
export async function fetchWithAuthorization<T = unknown>(
|
||||
export const fetchServer = async <T = unknown>(
|
||||
endpoint: string,
|
||||
options: RequestInit = {}
|
||||
): Promise<T> {
|
||||
// Access the Authorization cookie securely
|
||||
const cookieStore = await cookies();
|
||||
const authToken = cookieStore.get("Authorization")?.value;
|
||||
): Promise<T> => {
|
||||
const cookieStore = cookies();
|
||||
const authToken = await cookieStore.get('Authorization')?.value;
|
||||
|
||||
console.log("authToken", authToken);
|
||||
if (!authToken) redirect('/login');
|
||||
|
||||
if (!authToken) {
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
const config: RequestInit = {
|
||||
try {
|
||||
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}${endpoint}`, {
|
||||
...options,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${authToken}`,
|
||||
...(options.headers || {}),
|
||||
...options.headers,
|
||||
},
|
||||
cache: "no-store",
|
||||
};
|
||||
cache: 'no-store',
|
||||
});
|
||||
|
||||
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}${endpoint}`, config);
|
||||
if (res.status === 401) redirect('/login');
|
||||
if (!res.ok) throw new Error(`Request failed: ${res.statusText}`);
|
||||
|
||||
if (res.status === 401) {
|
||||
redirect("/login");
|
||||
return res.json();
|
||||
} catch (error) {
|
||||
console.error(`Server request to ${endpoint} failed:`, error);
|
||||
throw error;
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`Failed to fetch ${endpoint}: ${res.statusText}`);
|
||||
}
|
||||
|
||||
const data = await res.json() as T;
|
||||
|
||||
return data as Promise<T>;
|
||||
}
|
||||
};
|
||||
17
lib/types.ts
17
lib/types.ts
@@ -10,3 +10,20 @@ export interface ShippingData {
|
||||
name: string;
|
||||
price: number;
|
||||
}
|
||||
|
||||
export interface Product {
|
||||
_id?: string;
|
||||
name: string;
|
||||
price: number;
|
||||
description?: string;
|
||||
sku?: string;
|
||||
stock: number;
|
||||
createdAt?: Date;
|
||||
updatedAt?: Date;
|
||||
}
|
||||
|
||||
export type ApiResponse<T> = {
|
||||
data?: T;
|
||||
error?: string;
|
||||
total?: number;
|
||||
};
|
||||
Reference in New Issue
Block a user