Add customer insights to order details page

Introduces a customer insights panel on the order details page, displaying metrics such as total orders, total spent, payment success rate, and customer tenure. Removes customer insights logic and display from the order table component for a more focused and relevant presentation.
2025-08-31 18:30:54 +01:00
parent 9cf226526f
commit a10b9e0094
3 changed files with 105 additions and 108 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, AlertTriangle, Copy, Loader2, RefreshCw } from "lucide-react";
+import { Clipboard, Truck, Package, ArrowRight, ChevronDown, AlertTriangle, Copy, Loader2, RefreshCw, Users, TrendingUp, Calendar, DollarSign } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import {
@@ -76,6 +76,26 @@ interface Order {
  subtotalBeforeDiscount?: number;
 }

+interface CustomerInsights {
+  totalOrders: number;
+  completedOrders: number;
+  cancelledOrders: number;
+  paidOrders: number;
+  totalSpent: number;
+  averageOrderValue: number;
+  completionRate: number;
+  paymentSuccessRate: number;
+  cancellationRate: number;
+  firstOrder: string | null;
+  lastOrder: string | null;
+  customerSince: number; // days since first order
+}
+
+interface OrderResponse {
+  order: Order;
+  customerInsights: CustomerInsights;
+}
+
 interface OrderInList extends Order {
  _id: string;
 }
@@ -120,6 +140,7 @@ const getStatusStyle = (status: string) => {

 export default function OrderDetailsPage() {
  const [order, setOrder] = useState<Order | null>(null);
+  const [customerInsights, setCustomerInsights] = useState<CustomerInsights | null>(null);
  const [trackingNumber, setTrackingNumber] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
@@ -358,11 +379,13 @@ export default function OrderDetailsPage() {

        if (!res) throw new Error("Failed to fetch order details");

-        const data: Order = await res;
-        setOrder(data);
-        console.log("Fresh order data:", data);
+        const data: OrderResponse = await res;
+        setOrder(data.order);
+        setCustomerInsights(data.customerInsights);
+        console.log("Fresh order data:", data.order);
+        console.log("Customer insights:", data.customerInsights);

-        const productIds = data.products.map((product) => product.productId);
+        const productIds = data.order.products.map((product) => product.productId);
        const productNamesMap = await fetchProductNames(productIds, authToken);
        setProductNames(productNamesMap);
        
@@ -378,7 +401,7 @@ export default function OrderDetailsPage() {
          });
        }, 3000); 

-        if (data.status === "paid") {
+        if (data.order.status === "paid") {
          setIsPaid(true);
        }
      } catch (err: any) {
@@ -668,6 +691,78 @@ export default function OrderDetailsPage() {
          </Card>
        )}

+        {/* Customer Insights */}
+        {customerInsights && order?.telegramUsername && (
+          <Card className="mb-6">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Users className="h-5 w-5" />
+                Customer Insights - @{order.telegramUsername}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-blue-600">
+                    {customerInsights.totalOrders}
+                  </div>
+                  <div className="text-sm text-muted-foreground">Total Orders</div>
+                  <div className="text-xs text-muted-foreground">
+                    {customerInsights.paidOrders} paid
+                  </div>
+                </div>
+                
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-green-600">
+                    £{customerInsights.totalSpent.toFixed(2)}
+                  </div>
+                  <div className="text-sm text-muted-foreground">Total Spent</div>
+                  <div className="text-xs text-muted-foreground">
+                    £{customerInsights.averageOrderValue.toFixed(2)} avg
+                  </div>
+                </div>
+                
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-purple-600">
+                    {customerInsights.paymentSuccessRate.toFixed(1)}%
+                  </div>
+                  <div className="text-sm text-muted-foreground">Success Rate</div>
+                  <div className="text-xs text-muted-foreground">
+                    {customerInsights.completionRate.toFixed(1)}% completed
+                  </div>
+                </div>
+                
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-orange-600">
+                    {customerInsights.customerSince}
+                  </div>
+                  <div className="text-sm text-muted-foreground">Days as Customer</div>
+                  <div className="text-xs text-muted-foreground">
+                    {customerInsights.firstOrder ? 
+                      new Date(customerInsights.firstOrder).toLocaleDateString('en-GB', {
+                        day: '2-digit',
+                        month: 'short',
+                        year: 'numeric'
+                      }) : 'N/A'
+                    }
+                  </div>
+                </div>
+              </div>
+              
+              {customerInsights.cancellationRate > 20 && (
+                <div className="mt-4 p-3 bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+                  <div className="flex items-center gap-2 text-yellow-800 dark:text-yellow-200">
+                    <AlertTriangle className="h-4 w-4" />
+                    <span className="text-sm font-medium">
+                      High cancellation rate: {customerInsights.cancellationRate.toFixed(1)}%
+                    </span>
+                  </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/tables/order-table.tsx
+++ b/components/tables/order-table.tsx
@@ -30,18 +30,12 @@ import {
  MessageCircle,
  AlertTriangle,
  Tag,
-  Percent,
-  TrendingUp,
-  Users,
-  DollarSign,
-  ShoppingCart,
-  Calendar
+  Percent
 } from "lucide-react";
 import Link from "next/link";
 import { clientFetch } from '@/lib/api';
 import { toast } from "sonner";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import {
  AlertDialog,
  AlertDialogAction,
@@ -75,34 +69,7 @@ interface Order {
  subtotalBeforeDiscount?: number;
 }

-interface CustomerInsights {
-  overview: {
-    totalOrders: number;
-    completedOrders: number;
-    cancelledOrders: number;
-    uniqueCustomers: number;
-    completionRate: number;
-    paymentSuccessRate: number;
-    cancellationRate: number;
-  };
-  financial: {
-    totalRevenue: number;
-    averageOrderValue: number;
-  };
-  recent30Days: {
-    orders: number;
-    revenue: number;
-    newCustomers: number;
-  };
-}

-interface OrdersResponse {
-  orders: Order[];
-  page: number;
-  totalPages: number;
-  totalOrders: number;
-  customerInsights: CustomerInsights;
-}

 type SortableColumns = "orderId" | "totalPrice" | "status" | "orderDate" | "paidAt";

@@ -155,67 +122,7 @@ const PageSizeSelector = ({ currentSize, onChange, options }: { currentSize: num
  );
 };

-// Customer Insights Display Component
-const CustomerInsightsDisplay = ({ insights }: { insights: CustomerInsights }) => {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-      {/* Overview Stats */}
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
-          <ShoppingCart className="h-4 w-4 text-muted-foreground" />
-        </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-bold">{insights.overview.totalOrders}</div>
-          <p className="text-xs text-muted-foreground">
-            {insights.overview.uniqueCustomers} unique customers
-          </p>
-        </CardContent>
-      </Card>

-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Success Rate</CardTitle>
-          <TrendingUp className="h-4 w-4 text-muted-foreground" />
-        </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-bold text-green-600">
-            {insights.overview.paymentSuccessRate.toFixed(1)}%
-          </div>
-          <p className="text-xs text-muted-foreground">
-            {insights.overview.completionRate.toFixed(1)}% completion rate
-          </p>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
-          <DollarSign className="h-4 w-4 text-muted-foreground" />
-        </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-bold">£{insights.financial.totalRevenue.toFixed(2)}</div>
-          <p className="text-xs text-muted-foreground">
-            £{insights.financial.averageOrderValue.toFixed(2)} avg order
-          </p>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Last 30 Days</CardTitle>
-          <Calendar className="h-4 w-4 text-muted-foreground" />
-        </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-bold">{insights.recent30Days.orders}</div>
-          <p className="text-xs text-muted-foreground">
-            £{insights.recent30Days.revenue.toFixed(2)} revenue
-          </p>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};

 export default function OrderTable() {
  const [orders, setOrders] = useState<Order[]>([]);
@@ -224,7 +131,6 @@ export default function OrderTable() {
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalOrders, setTotalOrders] = useState(0);
-  const [customerInsights, setCustomerInsights] = useState<CustomerInsights | null>(null);
  const [sortConfig, setSortConfig] = useState<{
    column: SortableColumns;
    direction: "asc" | "desc";
@@ -257,13 +163,12 @@ export default function OrderTable() {
        ...(statusFilter !== "all" && { status: statusFilter }),
      });

-      const data: OrdersResponse = await clientFetch(`/orders?${queryParams}`);
+      const data = await clientFetch(`/orders?${queryParams}`);
      
      console.log("Fetched orders with fresh data:", data.orders?.length || 0);
      setOrders(data.orders || []);
      setTotalPages(data.totalPages || 1);
      setTotalOrders(data.totalOrders || 0);
-      setCustomerInsights(data.customerInsights || null);
    } catch (error) {
      toast.error("Failed to fetch orders");
      console.error("Fetch error:", error);
@@ -464,9 +369,6 @@ export default function OrderTable() {

  return (
    <div className="space-y-4">
-      {/* Customer Insights */}
-      {customerInsights && <CustomerInsightsDisplay insights={customerInsights} />}
-      
      <div className="border border-zinc-800 rounded-md bg-black/40 overflow-hidden">
        {/* Filters header */}
        <div className="p-4 border-b border-zinc-800 bg-black/60">
--- a/public/git-info.json
+++ b/public/git-info.json
@@ -1,4 +1,4 @@
 {
-  "commitHash": "fabc8f2",
-  "buildTime": "2025-08-30T21:51:03.692Z"
+  "commitHash": "9cf2265",
+  "buildTime": "2025-08-31T17:30:00.225Z"
 }