i need a shit

components/dashboard/BuyerOrderInfo.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect, useCallback, useRef } from "react";
-import { Package, ShoppingBag, Info, ExternalLink, Loader2 } from "lucide-react";
+import { Package, ShoppingBag, Info, ExternalLink, Loader2, AlertTriangle } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -26,6 +26,10 @@ interface Order {
     pricePerUnit: number;
     totalItemPrice: number;
   }>;
+  underpaid?: boolean;
+  underpaymentAmount?: number;
+  lastBalanceReceived?: number;
+  cryptoTotal?: number;
 }
 
 interface BuyerOrderInfoProps {
@@ -141,6 +145,21 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
     return `£${price.toFixed(2)}`;
   };
   
+  // Helper function to check if order is underpaid
+  const isOrderUnderpaid = (order: Order) => {
+    return order.underpaid === true && order.underpaymentAmount && order.underpaymentAmount > 0;
+  };
+
+  // Helper function to get underpaid percentage
+  const getUnderpaidPercentage = (order: Order) => {
+    if (!isOrderUnderpaid(order)) return 0;
+    
+    const received = order.lastBalanceReceived || 0;
+    const required = order.cryptoTotal || 0;
+    
+    return required > 0 ? ((received / required) * 100) : 0;
+  };
+  
   // If we know there are no orders, don't show the component at all
   if (hasOrders === false) {
     return null;
@@ -172,33 +191,38 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
                 {productCount} items
               </Badge>
             )}
+            {orders.some(order => isOrderUnderpaid(order)) && (
+              <AlertTriangle className="h-3 w-3 text-red-500" />
+            )}
           </Button>
         </TooltipTrigger>
         <TooltipContent 
-          side="bottom" 
-          align="start" 
-          className="w-80 p-0" 
-          sideOffset={10}
+          side="left" 
+          className="w-80 p-0"
         >
-          <div className="py-2">
-            <div className="px-3 py-2 text-xs font-medium border-b flex justify-between items-center">
-              <span>Recent Orders from this Customer</span>
-              <Info className="h-3.5 w-3.5 text-muted-foreground" />
+          {loading ? (
+            <div className="p-4 flex items-center justify-center">
+              <Loader2 className="h-4 w-4 animate-spin mr-2" />
+              <span className="text-sm">Loading orders...</span>
             </div>
-            
-            {loading ? (
-              // Show loading state
-              <div className="p-4 flex justify-center items-center">
-                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-                <span className="ml-2 text-sm text-muted-foreground">Loading orders...</span>
+          ) : orders.length === 0 ? (
+            <div className="p-4 text-center">
+              <Package className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
+              <p className="text-sm text-muted-foreground">No orders found</p>
+            </div>
+          ) : (
+            <>
+              <div className="p-3 border-b bg-muted/50">
+                <div className="flex items-center justify-between">
+                  <h4 className="font-medium text-sm">Recent Orders</h4>
+                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                    <Package className="h-3 w-3" />
+                    {orders.length} {orders.length === 1 ? 'order' : 'orders'}
+                  </div>
+                </div>
               </div>
-            ) : orders.length === 0 ? (
-              // Show no orders state
-              <div className="p-4 text-center text-sm text-muted-foreground">
-                No orders found for this customer
-              </div>
-            ) : (
-              // Show orders
+              
+              {/* Show orders */}
               <div className="max-h-64 overflow-y-auto divide-y divide-border">
                 {orders.map((order) => (
                   <div 
@@ -210,16 +234,26 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
                       <div className="flex items-center gap-2">
                         <Package className="h-3.5 w-3.5" />
                         <span className="text-xs font-medium">Order #{order.orderId}</span>
+                        {isOrderUnderpaid(order) && (
+                          <AlertTriangle className="h-3 w-3 text-red-500" />
+                        )}
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Badge variant={
+                          order.status === "paid" ? "paid" : 
+                          order.status === "unpaid" ? "unpaid" :
+                          order.status === "shipped" ? "shipped" :
+                          order.status === "completed" ? "completed" :
+                          "secondary"
+                        } className="text-[10px] h-5 px-1.5">
+                          {order.status.toUpperCase()}
+                        </Badge>
+                        {isOrderUnderpaid(order) && (
+                          <Badge variant="destructive" className="text-[10px] h-5 px-1.5">
+                            {getUnderpaidPercentage(order).toFixed(0)}% PAID
+                          </Badge>
+                        )}
                       </div>
-                      <Badge variant={
-                        order.status === "paid" ? "paid" : 
-                        order.status === "unpaid" ? "unpaid" :
-                        order.status === "shipped" ? "shipped" :
-                        order.status === "completed" ? "completed" :
-                        "secondary"
-                      } className="text-[10px] h-5 px-1.5">
-                        {order.status.toUpperCase()}
-                      </Badge>
                     </div>
                     
                     <div className="flex justify-between items-center text-xs text-muted-foreground pl-5">
@@ -227,26 +261,20 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
                         <span>{order.products.length} {order.products.length === 1 ? 'product' : 'products'}</span>
                         <span>·</span>
                         <span>{formatPrice(order.totalPrice)}</span>
+                        {isOrderUnderpaid(order) && (
+                          <>
+                            <span>·</span>
+                            <span className="text-red-500">Underpaid</span>
+                          </>
+                        )}
                       </div>
                       <span className="text-[10px]">{new Date(order.orderDate).toLocaleDateString()}</span>
                     </div>
                   </div>
                 ))}
               </div>
-            )}
-            
-            <div className="border-t px-3 py-2">
-              <Button 
-                variant="ghost" 
-                size="sm" 
-                className="w-full h-7 text-xs flex items-center gap-1.5"
-                onClick={() => router.push(`/dashboard/orders?buyer=${buyerId}`)}
-              >
-                <ExternalLink className="h-3.5 w-3.5" />
-                View All Customer Orders
-              </Button>
-            </div>
-          </div>
+            </>
+          )}
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>