slight cleanup
This commit is contained in:
g
@@ -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 () => {
|
||||
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");
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Failed to fetch orders.");
|
||||
console.error("Error fetching orders:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchOrders();
|
||||
// Fetch orders with error handling
|
||||
const fetchOrders = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await fetchClient<{ orders: Order[] }>("/orders");
|
||||
setOrders(data.orders || []);
|
||||
} catch (error) {
|
||||
toast.error("Failed to fetch orders");
|
||||
console.error("Fetch error:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Filter Orders by Status
|
||||
useEffect(() => {
|
||||
const filtered = 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]);
|
||||
fetchOrders();
|
||||
}, [fetchOrders]);
|
||||
|
||||
// Sort Orders
|
||||
const sortedOrders = filteredOrders.sort((a, b) => {
|
||||
const aValue = a[sortColumn as keyof Order];
|
||||
const bValue = b[sortColumn as keyof Order];
|
||||
// Derived data calculations
|
||||
const filteredOrders = orders.filter(
|
||||
(order) => statusFilter === "all" || order.status === statusFilter
|
||||
);
|
||||
|
||||
if (typeof aValue === "number" || typeof aValue === "string") {
|
||||
if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
|
||||
if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
|
||||
const sortedOrders = [...filteredOrders].sort((a, b) => {
|
||||
const aValue = a[sortConfig.column];
|
||||
const bValue = b[sortConfig.column];
|
||||
|
||||
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 markAsShipped = async () => {
|
||||
try {
|
||||
if (selectedOrders.size === 0) {
|
||||
toast.warning("No orders selected.");
|
||||
return;
|
||||
}
|
||||
|
||||
const orderIds = Array.from(selectedOrders);
|
||||
const response = await fetchWithAuthClient(
|
||||
"/orders/mark-shipped",
|
||||
"POST",
|
||||
{ orderIds }
|
||||
);
|
||||
|
||||
if (response.success) {
|
||||
setOrders((prevOrders) =>
|
||||
prevOrders.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");
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Failed to update orders.");
|
||||
console.error("Error marking orders as shipped:", error);
|
||||
const toggleAll = () => {
|
||||
if (selectedOrders.size === paginatedOrders.length) {
|
||||
setSelectedOrders(new Set());
|
||||
} else {
|
||||
setSelectedOrders(new Set(paginatedOrders.map(o => o._id)));
|
||||
}
|
||||
};
|
||||
|
||||
const markAsShipped = async () => {
|
||||
if (selectedOrders.size === 0) {
|
||||
toast.warning("Please select orders to mark as shipped");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await fetchClient("/orders/mark-shipped", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ orderIds: Array.from(selectedOrders) })
|
||||
});
|
||||
|
||||
setOrders(prev =>
|
||||
prev.map(order =>
|
||||
selectedOrders.has(order._id)
|
||||
? { ...order, status: "shipped" }
|
||||
: order
|
||||
)
|
||||
);
|
||||
setSelectedOrders(new Set());
|
||||
toast.success("Selected orders marked as shipped");
|
||||
} catch (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) => (
|
||||
<TableRow key={order._id}>
|
||||
<TableCell className="text-center">
|
||||
<Checkbox
|
||||
checked={selectedOrders.has(order._id)}
|
||||
onCheckedChange={() => toggleOrderSelection(order._id)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">#{order.orderId}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
£{order.totalPrice.toFixed(2)}
|
||||
</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>
|
||||
<TableCell className="text-center">
|
||||
{new Date(order.createdAt).toLocaleDateString()}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
@{order.telegramUsername}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Link href={`/dashboard/orders/${order._id}`}>
|
||||
<Button size="sm" variant="ghost">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
) : paginatedOrders.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center py-4">
|
||||
No orders found.
|
||||
<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>
|
||||
<Checkbox
|
||||
checked={selectedOrders.has(order._id)}
|
||||
onCheckedChange={() => toggleSelection(order._id)}
|
||||
/>
|
||||
</TableCell>
|
||||
<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>
|
||||
{new Date(order.createdAt).toLocaleDateString("en-GB")}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{order.telegramUsername ? `@${order.telegramUsername}` : "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link href={`/dashboard/orders/${order._id}`}>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="p-4 flex justify-between items-center border-t dark:border-zinc-700">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" /> Previous
|
||||
</Button>
|
||||
<span className="text-sm">
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
>
|
||||
Next <ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
<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(p => Math.max(p - 1, 1))}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4 mr-2" /> Previous
|
||||
</Button>
|
||||
<span className="text-sm font-medium">
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={currentPage >= totalPages}
|
||||
onClick={() => setCurrentPage(p => p + 1)}
|
||||
>
|
||||
Next <ChevronRight className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user