i need a shit

2025-07-17 11:06:58 +01:00
parent 18e87721e2
commit 57e130a247
5 changed files with 242 additions and 60 deletions
--- a/app/dashboard/orders/[id]/page.tsx
+++ b/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">
--- a/components/analytics/OrderAnalyticsChart.tsx
+++ b/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);
    }
--- a/components/dashboard/BuyerOrderInfo.tsx
+++ b/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>
--- a/components/tables/order-table.tsx
+++ b/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,15 +406,32 @@ export default function OrderTable() {
                        />
                      </TableCell>
                      <TableCell>#{order.orderId}</TableCell>
-                      <TableCell>£{order.totalPrice.toFixed(2)}</TableCell>
                      <TableCell>
-                        <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"}`}>
-                          {React.createElement(statusConfig[order.status as OrderStatus]?.icon || XCircle, {
-                            className: `h-4 w-4 ${statusConfig[order.status as OrderStatus]?.animate || ""}`
-                          })}
-                          {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
+                        <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"}`}>
+                            {React.createElement(statusConfig[order.status as OrderStatus]?.icon || XCircle, {
+                              className: `h-4 w-4 ${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-xs bg-red-600 text-white">
+                              <AlertTriangle className="h-3 w-3" />
+                              {underpaidInfo?.percentage}%
+                            </div>
+                          )}
                        </div>
                      </TableCell>
                      <TableCell>
--- a/lib/types/index.ts
+++ b/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"