From 6cd658c4cbbd36f162126384740873ab029900f7 Mon Sep 17 00:00:00 2001
From: g <g@paki.email>
Date: Mon, 12 Jan 2026 08:28:36 +0000
Subject: [PATCH] Revamp OrderTable UI and add Firefox animation fallback

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.
---
 components/tables/order-table.tsx | 230 +++++++++++++++++++++++-------
 1 file changed, 181 insertions(+), 49 deletions(-)

diff --git a/components/tables/order-table.tsx b/components/tables/order-table.tsx
index 2f983f4..6fb7ee0 100644
--- a/components/tables/order-table.tsx
+++ b/components/tables/order-table.tsx
@@ -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,7 @@ 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}` : ''}`}
                               >
@@ -619,16 +630,137 @@ export default function OrderTable() {
                         </TableCell>
                       </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>
             </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 >
   );
 }
\ No newline at end of file