From 9cf226526f76620120a74ca827dabf80e9cfca9d Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Sat, 30 Aug 2025 22:53:47 +0100
Subject: [PATCH] Add customer insights dashboard to order table

Introduced a CustomerInsightsDisplay component to show key metrics such as total orders, revenue, success rates, and recent activity above the order table. Updated data fetching and types to support customer insights from the API.
---
 components/tables/order-table.tsx | 106 +++++++++++++++++++++++++++++-
 public/git-info.json              |   4 +-
 2 files changed, 106 insertions(+), 4 deletions(-)

diff --git a/components/tables/order-table.tsx b/components/tables/order-table.tsx
index da2b047..862b796 100644
--- a/components/tables/order-table.tsx
+++ b/components/tables/order-table.tsx
@@ -30,12 +30,18 @@ import {
   MessageCircle,
   AlertTriangle,
   Tag,
-  Percent
+  Percent,
+  TrendingUp,
+  Users,
+  DollarSign,
+  ShoppingCart,
+  Calendar
 } 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,
@@ -69,6 +75,35 @@ 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";
 
 interface StatusConfig {
@@ -120,6 +155,68 @@ 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[]>([]);
   const [loading, setLoading] = useState(true);
@@ -127,6 +224,7 @@ 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";
@@ -159,12 +257,13 @@ export default function OrderTable() {
         ...(statusFilter !== "all" && { status: statusFilter }),
       });
 
-      const data = await clientFetch(`/orders?${queryParams}`);
+      const data: OrdersResponse = 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);
@@ -365,6 +464,9 @@ 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">
diff --git a/public/git-info.json b/public/git-info.json
index de113eb..9027d99 100644
--- a/public/git-info.json
+++ b/public/git-info.json
@@ -1,4 +1,4 @@
 {
-  "commitHash": "57502d0",
-  "buildTime": "2025-08-30T20:06:32.862Z"
+  "commitHash": "fabc8f2",
+  "buildTime": "2025-08-30T21:51:03.692Z"
 }
\ No newline at end of file