Update page.tsx

app/dashboard/storefront/customers/page.tsx

@@ -62,6 +62,12 @@ import {
 export default function CustomerManagementPage() {
   const router = useRouter();
   const [customers, setCustomers] = useState<CustomerStats[]>([]);
+  // State for browser detection
+  const [isFirefox, setIsFirefox] = useState(false);
+
+  useEffect(() => {
+    setIsFirefox(navigator.userAgent.toLowerCase().indexOf("firefox") > -1);
+  }, []);
   const [filteredCustomers, setFilteredCustomers] = useState<CustomerStats[]>([]);
   const [searchQuery, setSearchQuery] = useState("");
   const [loading, setLoading] = useState(true);
@@ -338,6 +344,80 @@ export default function CustomerManagementPage() {
                     </TableRow>
                   </TableHeader>
                   <TableBody>
+                    {isFirefox ? (
+                      filteredCustomers.map((customer, index) => (
+                        <motion.tr
+                          key={customer.userId}
+                          initial={{ opacity: 0, y: 10 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          transition={{ duration: 0.2, delay: index * 0.03 }}
+                          className={`cursor-pointer group hover:bg-muted/50 border-b border-border/50 transition-colors ${!customer.hasOrders ? "bg-primary/5 hover:bg-primary/10" : ""}`}
+                          onClick={() => setSelectedCustomer(customer)}
+                        >
+                          <TableCell className="py-3">
+                            <div className="flex items-center gap-3">
+                              <div className={`h-9 w-9 rounded-full flex items-center justify-center text-xs font-medium ${!customer.hasOrders ? 'bg-primary/20 text-primary' : 'bg-muted text-muted-foreground'
+                                }`}>
+                                {customer.telegramUsername ? customer.telegramUsername.substring(0, 2).toUpperCase() : 'ID'}
+                              </div>
+                              <div>
+                                <div className="font-medium flex items-center gap-2">
+                                  @{customer.telegramUsername || "Unknown"}
+                                  {!customer.hasOrders && (
+                                    <Badge variant="outline" className="h-5 px-1.5 text-[10px] bg-primary/10 text-primary border-primary/20">
+                                      New
+                                    </Badge>
+                                  )}
+                                </div>
+                                <div className="text-xs text-muted-foreground flex items-center font-mono mt-0.5">
+                                  <span className="opacity-50 select-none">ID:</span>
+                                  <span className="ml-1">{customer.telegramUserId}</span>
+                                </div>
+                              </div>
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-center">
+                            <Badge variant="secondary" className="font-mono font-normal">
+                              {customer.totalOrders}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-center font-mono text-sm">
+                            {formatCurrency(customer.totalSpent)}
+                          </TableCell>
+                          <TableCell className="text-center text-sm text-muted-foreground">
+                            {customer.lastOrderDate ? (
+                              <div className="flex items-center justify-center gap-1.5">
+                                <Calendar className="h-3 w-3 opacity-70" />
+                                {formatDate(customer.lastOrderDate).split(",")[0]}
+                              </div>
+                            ) : "Never"}
+                          </TableCell>
+                          <TableCell className="text-center">
+                            {customer.hasOrders ? (
+                              <div className="flex justify-center flex-wrap gap-1">
+                                {customer.ordersByStatus.paid > 0 && (
+                                  <Badge className="bg-blue-500/15 text-blue-500 hover:bg-blue-500/25 border-blue-500/20 h-5 px-1.5 text-[10px]">
+                                    {customer.ordersByStatus.paid} Paid
+                                  </Badge>
+                                )}
+                                {customer.ordersByStatus.completed > 0 && (
+                                  <Badge className="bg-emerald-500/15 text-emerald-500 hover:bg-emerald-500/25 border-emerald-500/20 h-5 px-1.5 text-[10px]">
+                                    {customer.ordersByStatus.completed} Done
+                                  </Badge>
+                                )}
+                                {customer.ordersByStatus.shipped > 0 && (
+                                  <Badge className="bg-amber-500/15 text-amber-500 hover:bg-amber-500/25 border-amber-500/20 h-5 px-1.5 text-[10px]">
+                                    {customer.ordersByStatus.shipped} Ship
+                                  </Badge>
+                                )}
+                              </div>
+                            ) : (
+                              <span className="text-xs text-muted-foreground italic">No activity</span>
+                            )}
+                          </TableCell>
+                        </motion.tr>
+                      ))
+                    ) : (
                       <AnimatePresence mode="popLayout">
                         {filteredCustomers.map((customer, index) => (
                           <motion.tr
@@ -413,6 +493,7 @@ export default function CustomerManagementPage() {
                           </motion.tr>
                         ))}
                       </AnimatePresence>
+                    )}
                   </TableBody>
                 </Table>
               </div>