211cdc71f9
All checks were successful
Build Frontend / build (push) Successful in 1m12s
Refactored dashboard pages for improved layout and visual consistency using Card components, motion animations, and updated color schemes. Added an OrderTimeline component to the order details page to visualize order lifecycle. Improved customer management page with better sorting, searching, and a detailed customer dialog. Updated storefront settings page with a modernized layout and clearer sectioning.
661 lines
25 KiB
TypeScript
661 lines
25 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import React from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import {
|
|
Eye,
|
|
Loader2,
|
|
CheckCircle2,
|
|
XCircle,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
ArrowUpDown,
|
|
Truck,
|
|
MessageCircle,
|
|
AlertTriangle,
|
|
Tag,
|
|
Percent
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import { clientFetch } from '@/lib/api';
|
|
import { exportOrdersToCSV } from '@/lib/api-client';
|
|
import { toast } from "sonner";
|
|
import { Download } from "lucide-react";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { cacheUtils } from '@/lib/api-client';
|
|
|
|
interface Order {
|
|
_id: string;
|
|
orderId: string;
|
|
status: string;
|
|
totalPrice: number;
|
|
orderDate: Date;
|
|
paidAt?: Date;
|
|
telegramUsername?: string;
|
|
telegramBuyerId?: string;
|
|
underpaid?: boolean;
|
|
underpaymentAmount?: number;
|
|
lastBalanceReceived?: number;
|
|
cryptoTotal?: number;
|
|
// Promotion fields
|
|
promotion?: string;
|
|
promotionCode?: string;
|
|
discountAmount?: number;
|
|
subtotalBeforeDiscount?: number;
|
|
}
|
|
|
|
|
|
|
|
type SortableColumns = "orderId" | "totalPrice" | "status" | "orderDate" | "paidAt";
|
|
|
|
interface StatusConfig {
|
|
icon: React.ElementType;
|
|
color: string;
|
|
bgColor: string;
|
|
animate?: string;
|
|
}
|
|
|
|
type OrderStatus = "paid" | "unpaid" | "acknowledged" | "shipped" | "completed" | "cancelled" | "confirming";
|
|
|
|
// Create a StatusFilter component to replace the missing component
|
|
const StatusFilter = ({ currentStatus, onChange }: { currentStatus: string, onChange: (value: string) => void }) => {
|
|
return (
|
|
<Select value={currentStatus} onValueChange={onChange}>
|
|
<SelectTrigger className="w-40">
|
|
<SelectValue placeholder="Filter Status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Statuses</SelectItem>
|
|
{["paid", "unpaid", "acknowledged", "shipped", "completed", "cancelled", "confirming"].map(status => (
|
|
<SelectItem key={status} value={status}>
|
|
{status.charAt(0).toUpperCase() + status.slice(1)}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
};
|
|
|
|
// Create a PageSizeSelector component
|
|
const PageSizeSelector = ({ currentSize, onChange, options }: { currentSize: number, onChange: (value: string) => void, options: number[] }) => {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<div className="text-sm font-medium text-muted-foreground">Show:</div>
|
|
<Select value={currentSize.toString()} onValueChange={onChange}>
|
|
<SelectTrigger className="w-24">
|
|
<SelectValue placeholder="Page Size" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{options.map(size => (
|
|
<SelectItem key={size} value={size.toString()}>
|
|
{size}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
|
|
export default function OrderTable() {
|
|
const [orders, setOrders] = useState<Order[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [statusFilter, setStatusFilter] = useState("all");
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [totalOrders, setTotalOrders] = useState(0);
|
|
const [sortConfig, setSortConfig] = useState<{
|
|
column: SortableColumns;
|
|
direction: "asc" | "desc";
|
|
}>({ column: "orderDate", direction: "desc" });
|
|
const [selectedOrders, setSelectedOrders] = useState<Set<string>>(new Set());
|
|
const [isShipping, setIsShipping] = useState(false);
|
|
const [itemsPerPage, setItemsPerPage] = useState<number>(20);
|
|
const pageSizeOptions = [5, 10, 15, 20, 25, 50, 75, 100];
|
|
const [refreshTrigger, setRefreshTrigger] = useState(0);
|
|
const [exporting, setExporting] = useState(false);
|
|
|
|
// Add order refresh subscription
|
|
useEffect(() => {
|
|
const unsubscribe = cacheUtils.onOrderRefresh(() => {
|
|
console.log("Order data refresh triggered in OrderTable");
|
|
setRefreshTrigger(prev => prev + 1);
|
|
});
|
|
|
|
return unsubscribe;
|
|
}, []);
|
|
|
|
// Fetch orders with server-side pagination
|
|
const fetchOrders = useCallback(async () => {
|
|
try {
|
|
setLoading(true);
|
|
const queryParams = new URLSearchParams({
|
|
page: currentPage.toString(),
|
|
limit: itemsPerPage.toString(),
|
|
sortBy: sortConfig.column,
|
|
sortOrder: sortConfig.direction,
|
|
...(statusFilter !== "all" && { status: statusFilter }),
|
|
});
|
|
|
|
const data = await clientFetch(`/orders?${queryParams}`);
|
|
|
|
console.log("Fetched orders with fresh data:", data.orders?.length || 0);
|
|
setOrders(data.orders || []);
|
|
setTotalPages(data.totalPages || 1);
|
|
setTotalOrders(data.totalOrders || 0);
|
|
} catch (error) {
|
|
toast.error("Failed to fetch orders");
|
|
console.error("Fetch error:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [currentPage, statusFilter, itemsPerPage, sortConfig, refreshTrigger]);
|
|
|
|
useEffect(() => {
|
|
fetchOrders();
|
|
}, [fetchOrders]);
|
|
|
|
// Reset to first page when filter changes
|
|
useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [statusFilter]);
|
|
|
|
const handlePageChange = (newPage: number) => {
|
|
setCurrentPage(newPage);
|
|
};
|
|
|
|
const handleItemsPerPageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
const newSize = parseInt(e.target.value, 10);
|
|
setItemsPerPage(newSize);
|
|
setCurrentPage(1); // Reset to first page when changing items per page
|
|
};
|
|
|
|
// Derived data calculations
|
|
const filteredOrders = orders.filter(
|
|
(order) => statusFilter === "all" || order.status === statusFilter
|
|
);
|
|
|
|
// Use the orders directly as they're already sorted by the server
|
|
const paginatedOrders = filteredOrders;
|
|
|
|
// Handlers
|
|
const handleSort = (column: SortableColumns) => {
|
|
setSortConfig(prev => ({
|
|
column,
|
|
direction: prev.column === column && prev.direction === "asc" ? "desc" : "asc"
|
|
}));
|
|
setCurrentPage(1); // Reset to first page when changing sort order
|
|
};
|
|
|
|
const toggleSelection = (orderId: string) => {
|
|
setSelectedOrders(prev => {
|
|
const newSet = new Set(prev);
|
|
newSet.has(orderId) ? newSet.delete(orderId) : newSet.add(orderId);
|
|
return newSet;
|
|
});
|
|
};
|
|
|
|
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 {
|
|
setIsShipping(true);
|
|
const response = await clientFetch("/orders/mark-shipped", {
|
|
method: "POST",
|
|
body: JSON.stringify({ orderIds: Array.from(selectedOrders) })
|
|
});
|
|
|
|
// Only update orders that were successfully marked as shipped
|
|
if (response.success && response.success.orders) {
|
|
const successfulOrderIds = new Set(response.success.orders.map((o: any) => o.id));
|
|
|
|
setOrders(prev =>
|
|
prev.map(order =>
|
|
successfulOrderIds.has(order._id)
|
|
? { ...order, status: "shipped" }
|
|
: order
|
|
)
|
|
);
|
|
|
|
if (response.failed && response.failed.count > 0) {
|
|
toast.warning(`${response.failed.count} orders could not be marked as shipped`);
|
|
}
|
|
|
|
if (response.success.count > 0) {
|
|
toast.success(`${response.success.count} orders marked as shipped`);
|
|
}
|
|
}
|
|
|
|
setSelectedOrders(new Set());
|
|
} catch (error) {
|
|
toast.error("Failed to update orders");
|
|
console.error("Shipping error:", error);
|
|
} finally {
|
|
setIsShipping(false);
|
|
}
|
|
};
|
|
|
|
const statusConfig: Record<OrderStatus, StatusConfig> = {
|
|
acknowledged: {
|
|
icon: CheckCircle2,
|
|
color: "text-purple-100",
|
|
bgColor: "bg-purple-600/90 shadow-[0_0_10px_rgba(147,51,234,0.3)]"
|
|
},
|
|
paid: {
|
|
icon: CheckCircle2,
|
|
color: "text-emerald-100",
|
|
bgColor: "bg-emerald-600/90 shadow-[0_0_10px_rgba(16,185,129,0.3)]",
|
|
animate: "animate-pulse"
|
|
},
|
|
unpaid: {
|
|
icon: XCircle,
|
|
color: "text-amber-100",
|
|
bgColor: "bg-amber-500/90"
|
|
},
|
|
confirming: {
|
|
icon: Loader2,
|
|
color: "text-blue-100",
|
|
bgColor: "bg-blue-500/90",
|
|
animate: "animate-spin"
|
|
},
|
|
shipped: {
|
|
icon: Truck,
|
|
color: "text-indigo-100",
|
|
bgColor: "bg-indigo-600/90 shadow-[0_0_10px_rgba(79,70,229,0.3)]"
|
|
},
|
|
completed: {
|
|
icon: CheckCircle2,
|
|
color: "text-green-100",
|
|
bgColor: "bg-green-600/90"
|
|
},
|
|
cancelled: {
|
|
icon: XCircle,
|
|
color: "text-gray-100",
|
|
bgColor: "bg-gray-600/90"
|
|
}
|
|
};
|
|
|
|
// Helper function to determine if order is underpaid
|
|
const isOrderUnderpaid = (order: Order) => {
|
|
// More robust check - only show underpaid if status allows it and underpayment exists
|
|
return order.underpaid === true &&
|
|
order.underpaymentAmount &&
|
|
order.underpaymentAmount > 0 &&
|
|
order.status !== "paid" &&
|
|
order.status !== "completed" &&
|
|
order.status !== "shipped" &&
|
|
order.status !== "cancelled";
|
|
};
|
|
|
|
// Helper function to get underpaid display info
|
|
const getUnderpaidInfo = (order: Order) => {
|
|
if (!isOrderUnderpaid(order)) return null;
|
|
|
|
const received = order.lastBalanceReceived || 0;
|
|
const required = order.cryptoTotal || 0;
|
|
const missing = order.underpaymentAmount || 0;
|
|
|
|
// Calculate LTC to GBP exchange rate from order data
|
|
const ltcToGbpRate = required > 0 ? order.totalPrice / required : 0;
|
|
const missingGbp = missing * ltcToGbpRate;
|
|
|
|
return {
|
|
received,
|
|
required,
|
|
missing,
|
|
missingGbp,
|
|
percentage: required > 0 ? ((received / required) * 100).toFixed(1) : 0
|
|
};
|
|
};
|
|
|
|
// Add manual refresh function
|
|
const handleRefresh = () => {
|
|
console.log("Manual refresh triggered");
|
|
setRefreshTrigger(prev => prev + 1);
|
|
toast.success("Orders refreshed");
|
|
};
|
|
|
|
// Handle CSV export
|
|
const handleExportCSV = async () => {
|
|
if (statusFilter === "all") {
|
|
toast.error("Please select a specific status to export");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setExporting(true);
|
|
await exportOrdersToCSV(statusFilter);
|
|
toast.success(`Orders exported successfully!`);
|
|
} catch (error) {
|
|
console.error("Error exporting orders:", error);
|
|
toast.error("Failed to export orders");
|
|
} finally {
|
|
setExporting(false);
|
|
}
|
|
};
|
|
|
|
// Add periodic refresh for underpaid orders
|
|
useEffect(() => {
|
|
// Check if we have any underpaid orders
|
|
const hasUnderpaidOrders = orders.some(order => isOrderUnderpaid(order));
|
|
|
|
if (hasUnderpaidOrders) {
|
|
console.log("Found underpaid orders, setting up refresh interval");
|
|
const interval = setInterval(() => {
|
|
console.log("Auto-refreshing due to underpaid orders");
|
|
setRefreshTrigger(prev => prev + 1);
|
|
}, 30000); // Refresh every 30 seconds if there are underpaid orders
|
|
|
|
return () => clearInterval(interval);
|
|
}
|
|
}, [orders]);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden">
|
|
{/* Filters header */}
|
|
<div className="p-4 border-b border-border/50 bg-muted/30">
|
|
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
|
|
<div className="flex flex-col sm:flex-row gap-2 sm:items-center w-full lg:w-auto">
|
|
<StatusFilter
|
|
currentStatus={statusFilter}
|
|
onChange={setStatusFilter}
|
|
/>
|
|
|
|
<PageSizeSelector
|
|
currentSize={itemsPerPage}
|
|
onChange={(value) => handleItemsPerPageChange({ target: { value } } as React.ChangeEvent<HTMLSelectElement>)}
|
|
options={pageSizeOptions}
|
|
/>
|
|
|
|
{statusFilter !== "all" && (
|
|
<Button
|
|
onClick={handleExportCSV}
|
|
disabled={exporting}
|
|
variant="outline"
|
|
size="sm"
|
|
className="bg-background/50 border-border/50"
|
|
>
|
|
{exporting ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
Exporting...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Download className="mr-2 h-4 w-4" />
|
|
Export CSV
|
|
</>
|
|
)}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 self-end lg:self-auto">
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button disabled={selectedOrders.size === 0 || isShipping} className="shadow-md">
|
|
<Truck className="mr-2 h-4 w-4" />
|
|
{isShipping ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
`Mark Shipped (${selectedOrders.size})`
|
|
)}
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Mark Orders as Shipped</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Are you sure you want to mark {selectedOrders.size} order{selectedOrders.size !== 1 ? 's' : ''} as shipped?
|
|
This action cannot be undone.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction onClick={markAsShipped}>
|
|
Confirm
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<CardContent className="p-0 relative min-h-[400px]">
|
|
{loading && (
|
|
<div className="absolute inset-0 bg-background/50 backdrop-blur-[1px] flex items-center justify-center z-50">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
</div>
|
|
)}
|
|
<div className="max-h-[calc(100vh-350px)] overflow-auto">
|
|
<Table>
|
|
<TableHeader className="bg-muted/50 sticky top-0 z-20">
|
|
<TableRow className="hover:bg-transparent border-border/50">
|
|
<TableHead className="w-12">
|
|
<Checkbox
|
|
checked={selectedOrders.size === paginatedOrders.length && paginatedOrders.length > 0}
|
|
onCheckedChange={toggleAll}
|
|
/>
|
|
</TableHead>
|
|
<TableHead className="cursor-pointer hover:text-primary transition-colors" onClick={() => handleSort("orderId")}>
|
|
Order ID <ArrowUpDown className="ml-2 inline h-3 w-3" />
|
|
</TableHead>
|
|
<TableHead className="cursor-pointer hover:text-primary transition-colors" onClick={() => handleSort("totalPrice")}>
|
|
Total <ArrowUpDown className="ml-2 inline h-3 w-3" />
|
|
</TableHead>
|
|
<TableHead className="hidden lg:table-cell">Promotion</TableHead>
|
|
<TableHead className="cursor-pointer hover:text-primary transition-colors" onClick={() => handleSort("status")}>
|
|
Status <ArrowUpDown className="ml-2 inline h-3 w-3" />
|
|
</TableHead>
|
|
<TableHead className="hidden md:table-cell cursor-pointer hover:text-primary transition-colors" onClick={() => handleSort("orderDate")}>
|
|
Date <ArrowUpDown className="ml-2 inline h-3 w-3" />
|
|
</TableHead>
|
|
<TableHead className="hidden xl:table-cell cursor-pointer hover:text-primary transition-colors" onClick={() => handleSort("paidAt")}>
|
|
Paid At <ArrowUpDown className="ml-2 inline h-3 w-3" />
|
|
</TableHead>
|
|
<TableHead className="hidden lg:table-cell">Buyer</TableHead>
|
|
<TableHead className="w-24 text-center">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<AnimatePresence mode="popLayout">
|
|
{paginatedOrders.map((order, index) => {
|
|
const StatusIcon = statusConfig[order.status as keyof typeof statusConfig]?.icon || XCircle;
|
|
const underpaidInfo = getUnderpaidInfo(order);
|
|
|
|
return (
|
|
<motion.tr
|
|
key={order._id}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2, delay: index * 0.03 }}
|
|
className="group hover:bg-muted/40 border-b border-border/50 transition-colors"
|
|
>
|
|
<TableCell>
|
|
<Checkbox
|
|
checked={selectedOrders.has(order._id)}
|
|
onCheckedChange={() => toggleSelection(order._id)}
|
|
disabled={order.status !== "paid" && order.status !== "acknowledged"}
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="font-mono text-sm font-medium">#{order.orderId}</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">£{order.totalPrice.toFixed(2)}</span>
|
|
{underpaidInfo && (
|
|
<span className="text-[10px] text-destructive flex items-center gap-1">
|
|
<AlertTriangle className="h-3 w-3" />
|
|
-£{underpaidInfo.missingGbp.toFixed(2)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="hidden lg:table-cell">
|
|
{order.promotionCode ? (
|
|
<div className="flex flex-col gap-1">
|
|
<div className="flex items-center gap-1">
|
|
<Tag className="h-3 w-3 text-emerald-500" />
|
|
<span className="text-[10px] font-mono bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 px-1.5 py-0.5 rounded border border-emerald-500/20">
|
|
{order.promotionCode}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1 text-[10px] text-emerald-600/80">
|
|
<Percent className="h-2.5 w-2.5" />
|
|
<span>-£{(order.discountAmount || 0).toFixed(2)}</span>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<span className="text-xs text-muted-foreground">-</span>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<div className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border shadow-sm ${statusConfig[order.status as OrderStatus]?.bgColor || "bg-muted text-muted-foreground border-border"} ${statusConfig[order.status as OrderStatus]?.color || ""}`}>
|
|
{React.createElement(statusConfig[order.status as OrderStatus]?.icon || XCircle, {
|
|
className: `h-3.5 w-3.5 ${statusConfig[order.status as OrderStatus]?.animate || ""}`
|
|
})}
|
|
{order.status.charAt(0).toUpperCase() + order.status.slice(1)}
|
|
</div>
|
|
{isOrderUnderpaid(order) && (
|
|
<div className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] bg-destructive/10 text-destructive border border-destructive/20 font-medium">
|
|
{underpaidInfo?.percentage}%
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="hidden md:table-cell text-sm text-muted-foreground">
|
|
{new Date(order.orderDate).toLocaleDateString("en-GB", {
|
|
day: '2-digit',
|
|
month: 'short',
|
|
year: 'numeric',
|
|
})}
|
|
<span className="ml-1 opacity-50 text-[10px]">
|
|
{new Date(order.orderDate).toLocaleTimeString("en-GB", { hour: '2-digit', minute: '2-digit' })}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="hidden xl:table-cell text-sm text-muted-foreground">
|
|
{order.paidAt ? new Date(order.paidAt).toLocaleDateString("en-GB", {
|
|
day: '2-digit',
|
|
month: 'short',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
}) : "-"}
|
|
</TableCell>
|
|
<TableCell className="hidden lg:table-cell">
|
|
{order.telegramUsername ? (
|
|
<span className="text-sm font-medium text-primary">@{order.telegramUsername}</span>
|
|
) : (
|
|
<span className="text-xs text-muted-foreground italic">Guest</span>
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<div className="flex items-center justify-center gap-1">
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-foreground" asChild>
|
|
<Link href={`/dashboard/orders/${order._id}`}>
|
|
<Eye className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
|
|
{(order.telegramBuyerId || order.telegramUsername) && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 text-muted-foreground hover:text-primary"
|
|
asChild
|
|
title={`Chat with customer${order.telegramUsername ? ` @${order.telegramUsername}` : ''}`}
|
|
>
|
|
<Link href={`/dashboard/chats/new?buyerId=${order.telegramBuyerId || order.telegramUsername}`}>
|
|
<MessageCircle className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
</motion.tr>
|
|
);
|
|
})}
|
|
</AnimatePresence>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</CardContent>
|
|
|
|
{/* Pagination */}
|
|
<div className="flex items-center justify-between px-4 py-4 border-t border-border/50 bg-background/50">
|
|
<div className="text-sm text-muted-foreground">
|
|
Page {currentPage} of {totalPages} ({totalOrders} total)
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handlePageChange(currentPage - 1)}
|
|
disabled={currentPage === 1 || loading}
|
|
className="h-8"
|
|
>
|
|
<ChevronLeft className="h-3 w-3 mr-1" />
|
|
Previous
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handlePageChange(currentPage + 1)}
|
|
disabled={currentPage >= totalPages || loading}
|
|
className="h-8"
|
|
>
|
|
Next
|
|
<ChevronRight className="h-3 w-3 ml-1" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |