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) => {
-    navigator.clipboard.writeText(text);
+  const copyToClipboard = async (text: string) => {
+    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,8 +524,16 @@ export default function OrderDetailsPage() {
               <Package className="mr-2 h-6 w-6" />
               Order {order?.orderId}
             </h1>
-            <div className={`px-3 py-1 rounded-full border ${getStatusStyle(order?.status || '')}`}>
-              {order?.status?.toUpperCase()}
+            <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">
@@ -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">