i need a shit

app/dashboard/orders/[id]/page.tsx

@@ -22,7 +22,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Clipboard, Truck, Package, ArrowRight, ChevronDown } from "lucide-react";
+import { Clipboard, Truck, Package, ArrowRight, ChevronDown, AlertTriangle, Copy } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import {
@@ -61,6 +61,11 @@ interface Order {
     stars: number;
     _id: string;
   };
+  underpaid?: boolean;
+  underpaymentAmount?: number;
+  lastBalanceReceived?: number;
+  cryptoTotal?: number;
+  paymentAddress?: string;
 }
 
 interface OrderInList extends Order {
@@ -74,6 +79,16 @@ interface OrdersResponse {
   totalOrders: number;
 }
 
+type ProductNames = Record<string, string>;
+type NavigationInfo = {
+  nextOrderId: string | null;
+  prevOrderId: string | null;
+  totalOrders: number;
+  currentOrderNumber: number;
+  totalPages: number;
+  currentPage: number;
+};
+
 const getStatusStyle = (status: string) => {
   switch (status) {
     case 'acknowledged':
@@ -454,10 +469,38 @@ export default function OrderDetailsPage() {
     }
   };
 
-  const copyToClipboard = (text: string) => {
+  const copyToClipboard = async (text: string) => {
-    navigator.clipboard.writeText(text);
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success("Payment address copied to clipboard");
+    } catch (error) {
+      toast.error("Failed to copy to clipboard");
+    }
   };
 
+  // Helper function to check if order is underpaid
+  const isOrderUnderpaid = (order: Order | null) => {
+    return order?.underpaid === true && order?.underpaymentAmount && order.underpaymentAmount > 0;
+  };
+
+  // Helper function to get underpaid information
+  const getUnderpaidInfo = (order: Order | null) => {
+    if (!isOrderUnderpaid(order)) return null;
+    
+    const received = order?.lastBalanceReceived || 0;
+    const required = order?.cryptoTotal || 0;
+    const missing = order?.underpaymentAmount || 0;
+    
+    return {
+      received,
+      required,
+      missing,
+      percentage: required > 0 ? ((received / required) * 100).toFixed(1) : 0
+    };
+  };
+
+  const underpaidInfo = getUnderpaidInfo(order);
+
   if (loading)
     return (
       <Layout>
@@ -481,9 +524,17 @@ export default function OrderDetailsPage() {
               <Package className="mr-2 h-6 w-6" />
               Order {order?.orderId}
             </h1>
+            <div className="flex gap-2">
               <div className={`px-3 py-1 rounded-full border ${getStatusStyle(order?.status || '')}`}>
                 {order?.status?.toUpperCase()}
               </div>
+              {isOrderUnderpaid(order) && (
+                <div className="flex items-center gap-1 px-3 py-1 rounded-full border bg-red-500/10 text-red-500 border-red-500/20">
+                  <AlertTriangle className="h-4 w-4" />
+                  UNDERPAID ({underpaidInfo?.percentage}%)
+                </div>
+              )}
+            </div>
           </div>
           <div className="flex items-center gap-2">
             {prevOrderId && (
@@ -507,6 +558,54 @@ export default function OrderDetailsPage() {
           </div>
         </div>
 
+        {/* Underpaid Alert Card */}
+        {isOrderUnderpaid(order) && underpaidInfo && (
+          <Card className="border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/20">
+            <CardHeader>
+              <CardTitle className="text-red-700 dark:text-red-400 flex items-center gap-2">
+                <AlertTriangle className="h-5 w-5" />
+                Payment Underpaid
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                <div>
+                  <p className="text-muted-foreground">Required Amount</p>
+                  <p className="font-mono">{underpaidInfo.required}</p>
+                </div>
+                <div>
+                  <p className="text-muted-foreground">Received Amount</p>
+                  <p className="font-mono">{underpaidInfo.received}</p>
+                </div>
+                <div>
+                  <p className="text-muted-foreground">Missing Amount</p>
+                  <p className="font-mono text-red-600">{underpaidInfo.missing}</p>
+                </div>
+                <div>
+                  <p className="text-muted-foreground">Payment Progress</p>
+                  <p className="font-semibold">{underpaidInfo.percentage}% paid</p>
+                </div>
+              </div>
+              
+              {order?.paymentAddress && (
+                <div className="pt-3 border-t border-red-200 dark:border-red-800">
+                  <p className="text-sm text-muted-foreground mb-2">Payment Address:</p>
+                  <div className="flex items-center gap-2 p-2 bg-background rounded border">
+                    <code className="flex-1 text-xs break-all">{order.paymentAddress}</code>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => copyToClipboard(order.paymentAddress!)}
+                    >
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
         <div className="grid grid-cols-3 gap-6">
           {/* Left Column - Order Details */}
           <div className="col-span-2 space-y-6">

components/analytics/OrderAnalyticsChart.tsx

@@ -5,7 +5,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Badge } from "@/components/ui/badge";
 import { useToast } from "@/hooks/use-toast";
 import { Skeleton } from "@/components/ui/skeleton";
-import { BarChart3, Clock, CheckCircle, XCircle, AlertCircle } from "lucide-react";
+import { BarChart3, Clock, CheckCircle, XCircle, AlertCircle, AlertTriangle } from "lucide-react";
 import { getOrderAnalyticsWithStore, type OrderAnalytics } from "@/lib/services/analytics-service";
 import { formatGBP } from "@/utils/format";
 import { ChartSkeleton } from './SkeletonLoaders';
@@ -58,6 +58,8 @@ export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartPr
         return 'bg-red-100 text-red-800';
       case 'disputed':
         return 'bg-orange-100 text-orange-800';
+      case 'underpaid':
+        return 'bg-red-200 text-red-900';
       default:
         return 'bg-gray-100 text-gray-800';
     }
@@ -76,6 +78,8 @@ export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartPr
         return <AlertCircle className="h-4 w-4" />;
       case 'cancelled':
         return <XCircle className="h-4 w-4" />;
+      case 'underpaid':
+        return <AlertTriangle className="h-4 w-4" />;
       default:
         return <BarChart3 className="h-4 w-4" />;
     }
@@ -99,6 +103,8 @@ export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartPr
         return 'Cancelled';
       case 'disputed':
         return 'Disputed';
+      case 'underpaid':
+        return 'Underpaid';
       default:
         return status.charAt(0).toUpperCase() + status.slice(1);
     }

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" 
+          side="left" 
-          align="start" 
           className="w-80 p-0"
-          sideOffset={10}
         >
-          <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" />
-            </div>
-            
           {loading ? (
-              // Show loading state
+            <div className="p-4 flex items-center justify-center">
-              <div className="p-4 flex justify-center items-center">
+              <Loader2 className="h-4 w-4 animate-spin mr-2" />
-                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+              <span className="text-sm">Loading orders...</span>
-                <span className="ml-2 text-sm text-muted-foreground">Loading orders...</span>
             </div>
           ) : orders.length === 0 ? (
-              // Show no orders state
+            <div className="p-4 text-center">
-              <div className="p-4 text-center text-sm text-muted-foreground">
+              <Package className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
-                No orders found for this customer
+              <p className="text-sm text-muted-foreground">No orders found</p>
             </div>
           ) : (
-              // Show orders
+            <>
+              <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>
+              
+              {/* Show orders */}
               <div className="max-h-64 overflow-y-auto divide-y divide-border">
                 {orders.map((order) => (
                   <div 
@@ -210,7 +234,11 @@ 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" :
@@ -220,6 +248,12 @@ export default function BuyerOrderInfo({ buyerId, chatId }: BuyerOrderInfoProps)
                         } 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>
                     </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>

components/tables/order-table.tsx

@@ -27,7 +27,8 @@ import {
   ChevronRight,
   ArrowUpDown,
   Truck,
-  MessageCircle
+  MessageCircle,
+  AlertTriangle
 } from "lucide-react";
 import Link from "next/link";
 import { clientFetch } from '@/lib/api';
@@ -53,6 +54,10 @@ interface Order {
   orderDate: Date;
   telegramUsername?: string;
   telegramBuyerId?: string;
+  underpaid?: boolean;
+  underpaymentAmount?: number;
+  lastBalanceReceived?: number;
+  cryptoTotal?: number;
 }
 
 type SortableColumns = "orderId" | "totalPrice" | "status" | "orderDate";
@@ -281,6 +286,27 @@ export default function OrderTable() {
     }
   };
 
+  // Helper function to determine if order is underpaid
+  const isOrderUnderpaid = (order: Order) => {
+    return order.underpaid === true && order.underpaymentAmount && order.underpaymentAmount > 0;
+  };
+
+  // Helper function to get underpaid display info
+  const getUnderpaidInfo = (order: Order) => {
+    if (!isOrderUnderpaid(order)) return null;
+    
+    const received = order.lastBalanceReceived || 0;
+    const required = order.cryptoTotal || 0;
+    const missing = order.underpaymentAmount || 0;
+    
+    return {
+      received,
+      required,
+      missing,
+      percentage: required > 0 ? ((received / required) * 100).toFixed(1) : 0
+    };
+  };
+
   return (
     <div className="space-y-4">
       <div className="border border-zinc-800 rounded-md bg-black/40 overflow-hidden">
@@ -368,6 +394,7 @@ export default function OrderTable() {
               <TableBody>
                 {paginatedOrders.map((order) => {
                   const StatusIcon = statusConfig[order.status as keyof typeof statusConfig]?.icon || XCircle;
+                  const underpaidInfo = getUnderpaidInfo(order);
 
                   return (
                     <TableRow key={order._id}>
@@ -379,8 +406,18 @@ export default function OrderTable() {
                         />
                       </TableCell>
                       <TableCell>#{order.orderId}</TableCell>
-                      <TableCell>£{order.totalPrice.toFixed(2)}</TableCell>
                       <TableCell>
+                        <div className="flex flex-col">
+                          <span>£{order.totalPrice.toFixed(2)}</span>
+                                                  {underpaidInfo && (
+                          <span className="text-xs text-red-400">
+                            Missing: £{(underpaidInfo.missing * 100).toFixed(2)}
+                          </span>
+                        )}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
                           <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm ${
                             statusConfig[order.status as OrderStatus]?.bgColor || "bg-gray-500"
                           } ${statusConfig[order.status as OrderStatus]?.color || "text-white"}`}>
@@ -389,6 +426,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-xs bg-red-600 text-white">
+                              <AlertTriangle className="h-3 w-3" />
+                              {underpaidInfo?.percentage}%
+                            </div>
+                          )}
+                        </div>
                       </TableCell>
                       <TableCell>
                         {new Date(order.orderDate).toLocaleDateString("en-GB", {

lib/types/index.ts

@@ -77,6 +77,11 @@ export interface Order {
   totalPrice: number
   createdAt: string
   telegramUsername?: string
+  underpaid?: boolean
+  underpaymentAmount?: number
+  lastBalanceReceived?: number
+  underpaymentNotified?: boolean
+  cryptoTotal?: number
 }
 
 export type OrderStatus = "paid" | "unpaid" | "confirming" | "shipped" | "completed" | "disputed" | "cancelled"