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

Revamp OrderTable UI and add Firefox animation fallback
All checks were successful
Build Frontend / build (push) Successful in 1m8s
Details

Browse Source 
Updated the OrderTable component with a new dark-themed UI, improved color schemes, and enhanced button and table styles. Added browser detection to provide a simplified animation experience for Firefox users, ensuring compatibility and smoother rendering. Improved loading state visuals and refined table header and cell styling for better readability.
This commit is contained in:
g
2026-01-12 08:28:36 +00:00
parent 6997838bf7
commit 6cd658c4cb
1 changed files with 181 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
components/tables/order-table.tsx
View File

@@ -157,6 +157,13 @@ export default function OrderTable() {
}, []);
// Fetch orders with server-side pagination
// State for browser detection
const [isFirefox, setIsFirefox] = useState(false);
useEffect(() => {
setIsFirefox(navigator.userAgent.toLowerCase().indexOf("firefox") > -1);
}, []);
const fetchOrders = useCallback(async () => {
try {
setLoading(true);
@@ -394,9 +401,9 @@ export default function OrderTable() {
return (
<div className="space-y-4">
<Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden">
<Card className="border-white/10 bg-black/40 backdrop-blur-xl shadow-2xl overflow-hidden rounded-xl">
{/* Filters header */}
<div className="p-4 border-b border-border/50 bg-muted/30">
<div className="p-4 border-b border-white/5 bg-white/[0.02]">
<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
@@ -416,7 +423,7 @@ export default function OrderTable() {
disabled={exporting}
variant="outline"
size="sm"
className="bg-background/50 border-border/50"
className="bg-black/20 border-white/10 hover:bg-white/5 hover:text-white transition-colors"
>
{exporting ? (
<>
@@ -436,7 +443,7 @@ export default function OrderTable() {
<div className="flex items-center gap-2 self-end lg:self-auto">
<AlertDialog>
<AlertDialogTrigger asChild>
<Button disabled={selectedOrders.size === 0 || isShipping} className="shadow-md">
<Button disabled={selectedOrders.size === 0 || isShipping} className="shadow-lg bg-indigo-600 hover:bg-indigo-700 text-white border-0 transition-all hover:scale-105 active:scale-95">
<Truck className="mr-2 h-4 w-4" />
{isShipping ? (
<Loader2 className="h-4 w-4 animate-spin" />
@@ -468,68 +475,72 @@ export default function OrderTable() {
{/* 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 className="absolute inset-0 bg-black/60 backdrop-blur-[2px] flex items-center justify-center z-50">
<div className="flex flex-col items-center gap-3">
<Loader2 className="h-8 w-8 animate-spin text-indigo-500" />
<span className="text-zinc-400 text-sm font-medium">Loading orders...</span>
</div>
</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">
<TableHeader className="bg-white/[0.02] sticky top-0 z-20 backdrop-blur-md">
<TableRow className="hover:bg-transparent border-white/5">
<TableHead className="w-12">
<Checkbox
checked={selectedOrders.size === paginatedOrders.length && paginatedOrders.length > 0}
onCheckedChange={toggleAll}
className="border-white/20 data-[state=checked]:bg-indigo-500 data-[state=checked]:border-indigo-500"
/>
</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 className="cursor-pointer hover:text-indigo-400 transition-colors text-zinc-400" onClick={() => handleSort("orderId")}>
Order ID <ArrowUpDown className="ml-2 inline h-3 w-3 opacity-50" />
</TableHead>
<TableHead className="cursor-pointer hover:text-primary transition-colors" onClick={() => handleSort("totalPrice")}>
Total <ArrowUpDown className="ml-2 inline h-3 w-3" />
<TableHead className="cursor-pointer hover:text-indigo-400 transition-colors text-zinc-400" onClick={() => handleSort("totalPrice")}>
Total <ArrowUpDown className="ml-2 inline h-3 w-3 opacity-50" />
</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 className="hidden lg:table-cell text-zinc-400">Promotion</TableHead>
<TableHead className="cursor-pointer hover:text-indigo-400 transition-colors text-zinc-400" onClick={() => handleSort("status")}>
Status <ArrowUpDown className="ml-2 inline h-3 w-3 opacity-50" />
</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 className="hidden md:table-cell cursor-pointer hover:text-indigo-400 transition-colors text-zinc-400" onClick={() => handleSort("orderDate")}>
Date <ArrowUpDown className="ml-2 inline h-3 w-3 opacity-50" />
</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 className="hidden xl:table-cell cursor-pointer hover:text-indigo-400 transition-colors text-zinc-400" onClick={() => handleSort("paidAt")}>
Paid At <ArrowUpDown className="ml-2 inline h-3 w-3 opacity-50" />
</TableHead>
<TableHead className="hidden lg:table-cell">Buyer</TableHead>
<TableHead className="w-24 text-center">Actions</TableHead>
<TableHead className="hidden lg:table-cell text-zinc-400">Buyer</TableHead>
<TableHead className="w-24 text-center text-zinc-400">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<AnimatePresence>
{paginatedOrders.map((order, index) => {
{isFirefox ? (
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"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.2 }}
className="group hover:bg-white/[0.03] border-b border-white/5 transition-colors"
>
<TableCell>
<Checkbox
checked={selectedOrders.has(order._id)}
onCheckedChange={() => toggleSelection(order._id)}
disabled={order.status !== "paid" && order.status !== "acknowledged"}
className="border-white/20 data-[state=checked]:bg-indigo-500 data-[state=checked]:border-indigo-500"
/>
</TableCell>
<TableCell className="font-mono text-sm font-medium">#{order.orderId}</TableCell>
<TableCell className="font-mono text-sm font-medium text-zinc-300">#{order.orderId}</TableCell>
<TableCell>
<div className="flex flex-col">
<span className="font-medium">£{order.totalPrice.toFixed(2)}</span>
<span className="font-medium text-zinc-200">£{order.totalPrice.toFixed(2)}</span>
{underpaidInfo && (
<span className="text-[10px] text-destructive flex items-center gap-1">
<span className="text-[10px] text-red-400 flex items-center gap-1">
<AlertTriangle className="h-3 w-3" />
-£{underpaidInfo.missingGbp.toFixed(2)}
</span>
@@ -540,18 +551,18 @@ export default function OrderTable() {
{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">
<Tag className="h-3 w-3 text-emerald-400" />
<span className="text-[10px] font-mono bg-emerald-500/10 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">
<div className="flex items-center gap-1 text-[10px] text-emerald-400/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>
<span className="text-xs text-zinc-600">-</span>
)}
</TableCell>
<TableCell>
@@ -563,13 +574,13 @@ export default function OrderTable() {
{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">
<div className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] bg-red-500/10 text-red-400 border border-red-500/20 font-medium">
{underpaidInfo?.percentage}%
</div>
)}
</div>
</TableCell>
<TableCell className="hidden md:table-cell text-sm text-muted-foreground">
<TableCell className="hidden md:table-cell text-sm text-zinc-400">
{new Date(order.orderDate).toLocaleDateString("en-GB", {
day: '2-digit',
month: 'short',
@@ -579,7 +590,7 @@ export default function OrderTable() {
{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">
<TableCell className="hidden xl:table-cell text-sm text-zinc-400">
{order.paidAt ? new Date(order.paidAt).toLocaleDateString("en-GB", {
day: '2-digit',
month: 'short',
@@ -589,14 +600,14 @@ export default function OrderTable() {
</TableCell>
<TableCell className="hidden lg:table-cell">
{order.telegramUsername ? (
<span className="text-sm font-medium text-primary">@{order.telegramUsername}</span>
<span className="text-sm font-medium text-indigo-400 hover:text-indigo-300 transition-colors cursor-pointer">@{order.telegramUsername}</span>
) : (
<span className="text-xs text-muted-foreground italic">Guest</span>
<span className="text-xs text-zinc-500 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>
<Button variant="ghost" size="icon" className="h-8 w-8 text-zinc-400 hover:text-white hover:bg-white/10" asChild>
<Link href={`/dashboard/orders/${order._id}`}>
<Eye className="h-4 w-4" />
</Link>
@@ -606,7 +617,127 @@ export default function OrderTable() {
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-muted-foreground hover:text-primary"
className="h-8 w-8 text-zinc-400 hover:text-indigo-400 hover:bg-indigo-500/10"
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 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}
layout
initial={{ opacity: 0, scale: 0.98 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.98 }}
transition={{ duration: 0.2 }}
className="group hover:bg-white/[0.03] border-b border-white/5 transition-colors"
>
<TableCell>
<Checkbox
checked={selectedOrders.has(order._id)}
onCheckedChange={() => toggleSelection(order._id)}
disabled={order.status !== "paid" && order.status !== "acknowledged"}
className="border-white/20 data-[state=checked]:bg-indigo-500 data-[state=checked]:border-indigo-500"
/>
</TableCell>
<TableCell className="font-mono text-sm font-medium text-zinc-300">#{order.orderId}</TableCell>
<TableCell>
<div className="flex flex-col">
<span className="font-medium text-zinc-200">£{order.totalPrice.toFixed(2)}</span>
{underpaidInfo && (
<span className="text-[10px] text-red-400 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-400" />
<span className="text-[10px] font-mono bg-emerald-500/10 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-400/80">
<Percent className="h-2.5 w-2.5" />
<span>-£{(order.discountAmount || 0).toFixed(2)}</span>
</div>
</div>
) : (
<span className="text-xs text-zinc-600">-</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-red-500/10 text-red-400 border border-red-500/20 font-medium">
{underpaidInfo?.percentage}%
</div>
)}
</div>
</TableCell>
<TableCell className="hidden md:table-cell text-sm text-zinc-400">
{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-zinc-400">
{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-indigo-400 hover:text-indigo-300 transition-colors cursor-pointer">@{order.telegramUsername}</span>
) : (
<span className="text-xs text-zinc-500 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-zinc-400 hover:text-white hover:bg-white/10" 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-zinc-400 hover:text-indigo-400 hover:bg-indigo-500/10"
asChild
title={`Chat with customer${order.telegramUsername ? ` @${order.telegramUsername}` : ''}`}
>
@@ -621,14 +752,15 @@ export default function OrderTable() {
);
})}
</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">
<div className="flex items-center justify-between px-4 py-4 border-t border-white/5 bg-white/[0.02]">
<div className="text-sm text-zinc-500">
Page {currentPage} of {totalPages} ({totalOrders} total)
</div>
<div className="flex gap-2">
@@ -637,7 +769,7 @@ export default function OrderTable() {
size="sm"
onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1 || loading}
className="h-8"
className="h-8 bg-transparent border-white/10 hover:bg-white/5 text-zinc-400 hover:text-white"
>
<ChevronLeft className="h-3 w-3 mr-1" />
Previous
@@ -647,7 +779,7 @@ export default function OrderTable() {
size="sm"
onClick={() => handlePageChange(currentPage + 1)}
disabled={currentPage >= totalPages || loading}
className="h-8"
className="h-8 bg-transparent border-white/10 hover:bg-white/5 text-zinc-400 hover:text-white"
>
Next
<ChevronRight className="h-3 w-3 ml-1" />
@@ -656,6 +788,6 @@ export default function OrderTable() {
</div>
</Card>
</div>
</div >
);
}