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

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

@@ -157,6 +157,13 @@ export default function OrderTable() {
}, []); }, []);
// Fetch orders with server-side pagination // 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 () => { const fetchOrders = useCallback(async () => {
try { try {
setLoading(true); setLoading(true);
@@ -394,9 +401,9 @@ export default function OrderTable() {
return ( return (
<div className="space-y-4"> <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 */} {/* 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 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"> <div className="flex flex-col sm:flex-row gap-2 sm:items-center w-full lg:w-auto">
<StatusFilter <StatusFilter
@@ -416,7 +423,7 @@ export default function OrderTable() {
disabled={exporting} disabled={exporting}
variant="outline" variant="outline"
size="sm" 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 ? ( {exporting ? (
<> <>
@@ -436,7 +443,7 @@ export default function OrderTable() {
<div className="flex items-center gap-2 self-end lg:self-auto"> <div className="flex items-center gap-2 self-end lg:self-auto">
<AlertDialog> <AlertDialog>
<AlertDialogTrigger asChild> <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" /> <Truck className="mr-2 h-4 w-4" />
{isShipping ? ( {isShipping ? (
<Loader2 className="h-4 w-4 animate-spin" /> <Loader2 className="h-4 w-4 animate-spin" />
@@ -468,68 +475,72 @@ export default function OrderTable() {
{/* Table */} {/* Table */}
<CardContent className="p-0 relative min-h-[400px]"> <CardContent className="p-0 relative min-h-[400px]">
{loading && ( {loading && (
<div className="absolute inset-0 bg-background/50 backdrop-blur-[1px] flex items-center justify-center z-50"> <div className="absolute inset-0 bg-black/60 backdrop-blur-[2px] flex items-center justify-center z-50">
<Loader2 className="h-8 w-8 animate-spin text-primary" /> <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>
)} )}
<div className="max-h-[calc(100vh-350px)] overflow-auto"> <div className="max-h-[calc(100vh-350px)] overflow-auto">
<Table> <Table>
<TableHeader className="bg-muted/50 sticky top-0 z-20"> <TableHeader className="bg-white/[0.02] sticky top-0 z-20 backdrop-blur-md">
<TableRow className="hover:bg-transparent border-border/50"> <TableRow className="hover:bg-transparent border-white/5">
<TableHead className="w-12"> <TableHead className="w-12">
<Checkbox <Checkbox
checked={selectedOrders.size === paginatedOrders.length && paginatedOrders.length > 0} checked={selectedOrders.size === paginatedOrders.length && paginatedOrders.length > 0}
onCheckedChange={toggleAll} onCheckedChange={toggleAll}
className="border-white/20 data-[state=checked]:bg-indigo-500 data-[state=checked]:border-indigo-500"
/> />
</TableHead> </TableHead>
<TableHead className="cursor-pointer hover:text-primary transition-colors" onClick={() => handleSort("orderId")}> <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" /> Order ID <ArrowUpDown className="ml-2 inline h-3 w-3 opacity-50" />
</TableHead> </TableHead>
<TableHead className="cursor-pointer hover:text-primary transition-colors" onClick={() => handleSort("totalPrice")}> <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" /> Total <ArrowUpDown className="ml-2 inline h-3 w-3 opacity-50" />
</TableHead> </TableHead>
<TableHead className="hidden lg:table-cell">Promotion</TableHead> <TableHead className="hidden lg:table-cell text-zinc-400">Promotion</TableHead>
<TableHead className="cursor-pointer hover:text-primary transition-colors" onClick={() => handleSort("status")}> <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" /> Status <ArrowUpDown className="ml-2 inline h-3 w-3 opacity-50" />
</TableHead> </TableHead>
<TableHead className="hidden md:table-cell cursor-pointer hover:text-primary transition-colors" onClick={() => handleSort("orderDate")}> <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" /> Date <ArrowUpDown className="ml-2 inline h-3 w-3 opacity-50" />
</TableHead> </TableHead>
<TableHead className="hidden xl:table-cell cursor-pointer hover:text-primary transition-colors" onClick={() => handleSort("paidAt")}> <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" /> Paid At <ArrowUpDown className="ml-2 inline h-3 w-3 opacity-50" />
</TableHead> </TableHead>
<TableHead className="hidden lg:table-cell">Buyer</TableHead> <TableHead className="hidden lg:table-cell text-zinc-400">Buyer</TableHead>
<TableHead className="w-24 text-center">Actions</TableHead> <TableHead className="w-24 text-center text-zinc-400">Actions</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
<AnimatePresence> {isFirefox ? (
{paginatedOrders.map((order, index) => { paginatedOrders.map((order, index) => {
const StatusIcon = statusConfig[order.status as keyof typeof statusConfig]?.icon || XCircle; const StatusIcon = statusConfig[order.status as keyof typeof statusConfig]?.icon || XCircle;
const underpaidInfo = getUnderpaidInfo(order); const underpaidInfo = getUnderpaidInfo(order);
return ( return (
<motion.tr <motion.tr
key={order._id} key={order._id}
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} transition={{ duration: 0.2 }}
transition={{ duration: 0.2, delay: index * 0.03 }} className="group hover:bg-white/[0.03] border-b border-white/5 transition-colors"
className="group hover:bg-muted/40 border-b border-border/50 transition-colors"
> >
<TableCell> <TableCell>
<Checkbox <Checkbox
checked={selectedOrders.has(order._id)} checked={selectedOrders.has(order._id)}
onCheckedChange={() => toggleSelection(order._id)} onCheckedChange={() => toggleSelection(order._id)}
disabled={order.status !== "paid" && order.status !== "acknowledged"} 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>
<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> <TableCell>
<div className="flex flex-col"> <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 && ( {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" /> <AlertTriangle className="h-3 w-3" />
-£{underpaidInfo.missingGbp.toFixed(2)} -£{underpaidInfo.missingGbp.toFixed(2)}
</span> </span>
@@ -540,18 +551,18 @@ export default function OrderTable() {
{order.promotionCode ? ( {order.promotionCode ? (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Tag className="h-3 w-3 text-emerald-500" /> <Tag className="h-3 w-3 text-emerald-400" />
<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"> <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} {order.promotionCode}
</span> </span>
</div> </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" /> <Percent className="h-2.5 w-2.5" />
<span>-£{(order.discountAmount || 0).toFixed(2)}</span> <span>-£{(order.discountAmount || 0).toFixed(2)}</span>
</div> </div>
</div> </div>
) : ( ) : (
<span className="text-xs text-muted-foreground">-</span> <span className="text-xs text-zinc-600">-</span>
)} )}
</TableCell> </TableCell>
<TableCell> <TableCell>
@@ -563,13 +574,13 @@ export default function OrderTable() {
{order.status.charAt(0).toUpperCase() + order.status.slice(1)} {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
</div> </div>
{isOrderUnderpaid(order) && ( {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}% {underpaidInfo?.percentage}%
</div> </div>
)} )}
</div> </div>
</TableCell> </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", { {new Date(order.orderDate).toLocaleDateString("en-GB", {
day: '2-digit', day: '2-digit',
month: 'short', month: 'short',
@@ -579,7 +590,7 @@ export default function OrderTable() {
{new Date(order.orderDate).toLocaleTimeString("en-GB", { hour: '2-digit', minute: '2-digit' })} {new Date(order.orderDate).toLocaleTimeString("en-GB", { hour: '2-digit', minute: '2-digit' })}
</span> </span>
</TableCell> </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", { {order.paidAt ? new Date(order.paidAt).toLocaleDateString("en-GB", {
day: '2-digit', day: '2-digit',
month: 'short', month: 'short',
@@ -589,14 +600,14 @@ export default function OrderTable() {
</TableCell> </TableCell>
<TableCell className="hidden lg:table-cell"> <TableCell className="hidden lg:table-cell">
{order.telegramUsername ? ( {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>
<TableCell className="text-center"> <TableCell className="text-center">
<div className="flex items-center justify-center gap-1"> <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}`}> <Link href={`/dashboard/orders/${order._id}`}>
<Eye className="h-4 w-4" /> <Eye className="h-4 w-4" />
</Link> </Link>
@@ -606,7 +617,7 @@ export default function OrderTable() {
<Button <Button
variant="ghost" variant="ghost"
size="icon" 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 asChild
title={`Chat with customer${order.telegramUsername ? ` @${order.telegramUsername}` : ''}`} title={`Chat with customer${order.telegramUsername ? ` @${order.telegramUsername}` : ''}`}
> >
@@ -619,16 +630,137 @@ export default function OrderTable() {
</TableCell> </TableCell>
</motion.tr> </motion.tr>
); );
})} })
</AnimatePresence> ) : (
<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}` : ''}`}
>
<Link href={`/dashboard/chats/new?buyerId=${order.telegramBuyerId || order.telegramUsername}`}>
<MessageCircle className="h-4 w-4" />
</Link>
</Button>
)}
</div>
</TableCell>
</motion.tr>
);
})}
</AnimatePresence>
)}
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
</CardContent> </CardContent>
{/* Pagination */} {/* Pagination */}
<div className="flex items-center justify-between px-4 py-4 border-t border-border/50 bg-background/50"> <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-muted-foreground"> <div className="text-sm text-zinc-500">
Page {currentPage} of {totalPages} ({totalOrders} total) Page {currentPage} of {totalPages} ({totalOrders} total)
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
@@ -637,7 +769,7 @@ export default function OrderTable() {
size="sm" size="sm"
onClick={() => handlePageChange(currentPage - 1)} onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1 || loading} 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" /> <ChevronLeft className="h-3 w-3 mr-1" />
Previous Previous
@@ -647,7 +779,7 @@ export default function OrderTable() {
size="sm" size="sm"
onClick={() => handlePageChange(currentPage + 1)} onClick={() => handlePageChange(currentPage + 1)}
disabled={currentPage >= totalPages || loading} 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 Next
<ChevronRight className="h-3 w-3 ml-1" /> <ChevronRight className="h-3 w-3 ml-1" />
@@ -656,6 +788,6 @@ export default function OrderTable() {
</div> </div>
</Card> </Card>
</div> </div >
); );
} }