From 57e196cc6aafa6aff3e2078ec1c1c4c33804870e Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Wed, 19 Mar 2025 14:06:58 +0100
Subject: [PATCH] testing

---
 app/dashboard/admin/page.tsx        |  287 ++++---
 app/dashboard/orders/[id]/page.tsx  |   24 +-
 components/admin/AdminAnalytics.tsx | 1090 +++++++++------------------
 3 files changed, 499 insertions(+), 902 deletions(-)

diff --git a/app/dashboard/admin/page.tsx b/app/dashboard/admin/page.tsx
index 579c561..070b972 100644
--- a/app/dashboard/admin/page.tsx
+++ b/app/dashboard/admin/page.tsx
@@ -1,172 +1,161 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { 
-  AlertCircle, Users, MessageSquare, BarChart as BarChartIcon, Trash2, Bot, Database,
-  DollarSign, CreditCard, Landmark, Shield, Tag
-} from "lucide-react";
-import AdminAnalytics from "@/components/admin/AdminAnalytics";
+import React, { useEffect, useState } from "react";
+// Example chart library:
+// import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts";
+
+interface DailyDataPoint {
+  date: string;
+  count: number;
+}
+
+interface AnalyticsData {
+  success?: boolean;
+  orders?: {
+    total: number;
+    today: number;
+    week: number;
+    dailyOrders: DailyDataPoint[];
+  };
+  revenue?: {
+    total: number;
+    today: number;
+    week: number;
+    dailyRevenue: DailyDataPoint[];
+  };
+  vendors?: {
+    total: number;
+    newToday: number;
+    newThisWeek: number;
+    dailyVendors: DailyDataPoint[];
+  };
+  engagement?: {
+    totalChats: number;
+    activeChatsToday: number;
+    dailyChats: DailyDataPoint[];
+  };
+  products?: {
+    total: number;
+  };
+  message?: string;
+}
 
 export default function AdminDashboardPage() {
-  const [activeTab, setActiveTab] = useState("overview");
-  const [isAdmin, setIsAdmin] = useState(false);
+  const [analytics, setAnalytics] = useState<AnalyticsData | null>(null);
   const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    // Check if the current user is an admin
-    const checkAdminStatus = async () => {
-      try {
-        // Get auth token from cookies
-        const token = document.cookie
-          .split("; ")
-          .find((row) => row.startsWith("Authorization="))
-          ?.split("=")[1];
-
-        if (!token) {
-          setIsAdmin(false);
-          setLoading(false);
-          return;
+  const fetchAnalytics = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admin/analytics`, {
+        headers: {
+          'Authorization': `Bearer ${process.env.NEXT_PUBLIC_JWT_SECRET}`
         }
+      });
+      const data = await response.json();
+      setAnalytics(data);
+    } catch (error) {
+      console.error("Error fetching analytics:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
 
-        const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/me`, {
-          method: "GET",
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        });
-
-        const data = await response.json();
-        // Check if vendor has admin privileges
-        setIsAdmin(data.vendor?.isAdmin === true);
-      } catch (error) {
-        console.error("Error checking admin status:", error);
-        setIsAdmin(false);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    checkAdminStatus();
+  useEffect(() => {
+    fetchAnalytics();
   }, []);
 
   if (loading) {
+    return <div className="p-4">Loading Admin Dashboard...</div>;
+  }
+
+  if (!analytics?.success) {
     return (
-      <div className="flex justify-center items-center h-screen">
-        <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
+      <div className="p-4">
+        <h2>Error Fetching Analytics</h2>
+        <p>{analytics?.message || "Unknown error occurred."}</p>
       </div>
     );
   }
 
-  if (!isAdmin) {
-    return (
-      <div className="container mx-auto p-6">
-        <Alert variant="destructive">
-          <AlertCircle className="h-4 w-4" />
-          <AlertTitle>Access Denied</AlertTitle>
-          <AlertDescription>
-            You do not have permission to access the admin dashboard.
-          </AlertDescription>
-        </Alert>
-      </div>
-    );
-  }
+  // Deconstruct the analytics data
+  const {
+    orders,
+    revenue,
+    vendors,
+    engagement,
+    products,
+  } = analytics;
 
   return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-6">Admin Dashboard</h1>
-      
-      <Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab}>
-        <TabsList className="grid grid-cols-5 w-full mb-6">
-          <TabsTrigger value="overview">Overview</TabsTrigger>
-          <TabsTrigger value="vendors">Vendors</TabsTrigger>
-          <TabsTrigger value="bot">Bot Management</TabsTrigger>
-          <TabsTrigger value="sessions">Sessions</TabsTrigger>
-          <TabsTrigger value="analytics">Analytics</TabsTrigger>
-        </TabsList>
-        
-        <TabsContent value="overview">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => setActiveTab("vendors")}>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-md font-medium">Vendor Management</CardTitle>
-                <Users className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <CardDescription>
-                  View and manage vendors across the platform.
-                </CardDescription>
-              </CardContent>
-            </Card>
-            
-            <Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => setActiveTab("bot")}>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-md font-medium">Bot Management</CardTitle>
-                <Bot className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <CardDescription>
-                  Configure and manage the Telegram bot settings.
-                </CardDescription>
-              </CardContent>
-            </Card>
-            
-            <Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => setActiveTab("sessions")}>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-md font-medium">Session Management</CardTitle>
-                <Database className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <CardDescription>
-                  Manage active sessions and clear inactive ones.
-                </CardDescription>
-              </CardContent>
-            </Card>
-            
-            <Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => setActiveTab("analytics")}>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-md font-medium">Analytics</CardTitle>
-                <BarChartIcon className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <CardDescription>
-                  View platform statistics and performance metrics.
-                </CardDescription>
-              </CardContent>
-            </Card>
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">Admin Dashboard</h1>
 
-            <Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => setActiveTab("analytics")}>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-md font-medium">Promotions</CardTitle>
-                <Tag className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <CardDescription>
-                  Track promotion usage and performance metrics.
-                </CardDescription>
-              </CardContent>
-            </Card>
+      {/* Quick stats row */}
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
+        <div className="bg-white rounded shadow p-4">
+          <h2 className="font-bold text-lg mb-2">Total Orders</h2>
+          <p className="text-xl">{orders?.total || 0}</p>
+          <p className="text-sm text-gray-600">
+            Today: {orders?.today || 0} | This Week: {orders?.week || 0}
+          </p>
+        </div>
 
-            <Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => setActiveTab("analytics")}>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-md font-medium">Payments & Escrow</CardTitle>
-                <Landmark className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <CardDescription>
-                  Monitor escrow status and financial operations.
-                </CardDescription>
-              </CardContent>
-            </Card>
-          </div>
-        </TabsContent>
-          <TabsContent value="analytics">
-          <AdminAnalytics />
-        </TabsContent>
-      </Tabs>
+        <div className="bg-white rounded shadow p-4">
+          <h2 className="font-bold text-lg mb-2">Revenue</h2>
+          <p className="text-xl">£{revenue?.total?.toFixed(2) || 0}</p>
+          <p className="text-sm text-gray-600">
+            Today: £{revenue?.today?.toFixed(2) || 0} | This Week: £{revenue?.week?.toFixed(2) || 0}
+          </p>
+        </div>
+
+        <div className="bg-white rounded shadow p-4">
+          <h2 className="font-bold text-lg mb-2">Vendors</h2>
+          <p className="text-xl">{vendors?.total || 0}</p>
+          <p className="text-sm text-gray-600">
+            New Today: {vendors?.newToday || 0} | This Week: {vendors?.newThisWeek || 0}
+          </p>
+        </div>
+
+        <div className="bg-white rounded shadow p-4">
+          <h2 className="font-bold text-lg mb-2">Chats</h2>
+          <p className="text-xl">{engagement?.totalChats || 0}</p>
+          <p className="text-sm text-gray-600">
+            Active Today: {engagement?.activeChatsToday || 0}
+          </p>
+        </div>
+
+        <div className="bg-white rounded shadow p-4">
+          <h2 className="font-bold text-lg mb-2">Products</h2>
+          <p className="text-xl">{products?.total || 0}</p>
+        </div>
+      </div>
+
+      {/* Example chart section */}
+      <div className="mt-8 bg-white p-4 rounded shadow">
+        <h2 className="text-lg font-bold mb-4">Orders This Week</h2>
+
+        {/* 
+        Uncomment and customize if using a chart library like Recharts:
+
+        <LineChart
+          width={800}
+          height={300}
+          data={orders?.dailyOrders || []}
+          margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
+        >
+          <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
+          <XAxis dataKey="date" />
+          <YAxis />
+          <Tooltip />
+          <Line type="monotone" dataKey="count" stroke="#8884d8" />
+        </LineChart>
+        */}
+
+        <pre className="text-sm bg-gray-100 p-2 rounded mt-2">
+          {JSON.stringify(orders?.dailyOrders, null, 2)}
+        </pre>
+      </div>
     </div>
   );
 } 
\ No newline at end of file
diff --git a/app/dashboard/orders/[id]/page.tsx b/app/dashboard/orders/[id]/page.tsx
index c6d090a..978840a 100644
--- a/app/dashboard/orders/[id]/page.tsx
+++ b/app/dashboard/orders/[id]/page.tsx
@@ -132,11 +132,17 @@ export default function OrderDetailsPage() {
       const results = await Promise.all(responses.map((res) => res));
   
       results.forEach((product, index) => {
-        productNamesMap[productIds[index]] = product.name || "Unknown Product";
+        productNamesMap[productIds[index]] = product.name || "Unknown Product (Deleted)";
       });
 
     } catch (err) {
       console.error("Failed to fetch product names:", err);
+      // Initialize product names that failed to load
+      productIds.forEach(id => {
+        if (!productNamesMap[id]) {
+          productNamesMap[id] = "Unknown Product (Deleted)";
+        }
+      });
     }
     return productNamesMap;
   };
@@ -323,6 +329,20 @@ export default function OrderDetailsPage() {
         const productIds = data.products.map((product) => product.productId);
         const productNamesMap = await fetchProductNames(productIds, authToken);
         setProductNames(productNamesMap);
+        
+        // Add a short timeout to ensure any products still showing as loading
+        // are marked as deleted/unknown
+        setTimeout(() => {
+          setProductNames(prev => {
+            const newMap = {...prev};
+            productIds.forEach(id => {
+              if (!newMap[id] || newMap[id] === "Loading...") {
+                newMap[id] = "Unknown Product (Deleted)";
+              }
+            });
+            return newMap;
+          });
+        }, 3000); // 3 second timeout
 
         if (data.status === "paid") {
           setIsPaid(true);
@@ -603,7 +623,7 @@ export default function OrderDetailsPage() {
                   {order?.products.map((product) => (
                     <TableRow key={product._id}>
                       <TableCell>
-                        {productNames[product.productId] || "Loading..."}
+                        {productNames[product.productId] || "Unknown Product (Deleted)"}
                       </TableCell>
                       <TableCell>{product.quantity}</TableCell>
                       <TableCell>£{product.pricePerUnit.toFixed(2)}</TableCell>
diff --git a/components/admin/AdminAnalytics.tsx b/components/admin/AdminAnalytics.tsx
index f2c1357..1f43f14 100644
--- a/components/admin/AdminAnalytics.tsx
+++ b/components/admin/AdminAnalytics.tsx
@@ -3,12 +3,11 @@
 import React, { useState, useEffect } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { AlertCircle, BarChart as BarChartIcon, LineChart, RefreshCw, Users, ShoppingCart, 
-  TrendingUp, TrendingDown, DollarSign, MessageSquare, Clock, Landmark } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { AlertCircle, BarChart, RefreshCw, Users, ShoppingCart, 
+  TrendingUp, TrendingDown, DollarSign, Package } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip, Legend, XAxis, YAxis, BarChart, Bar } from "recharts";
 
 // API response data structure
 interface AnalyticsData {
@@ -20,17 +19,14 @@ interface AnalyticsData {
     active?: number;
     stores?: number;
     dailyGrowth?: { date: string; count: number }[];
-    data?: { date: string; count: number }[];
   };
   orders?: {
     total?: number;
     totalToday?: number;
     totalThisWeek?: number;
-    recent?: number;
     pending?: number;
     completed?: number;
     dailyOrders?: { date: string; count: number }[];
-    data?: { date: string; count: number }[];
   };
   revenue?: {
     total?: number;
@@ -41,7 +37,6 @@ interface AnalyticsData {
   engagement?: {
     totalMessages?: number;
     activeChats?: number;
-    avgResponseTime?: number;
     dailyMessages?: { date: string; count: number }[];
   };
   products?: {
@@ -56,49 +51,6 @@ interface AnalyticsData {
     total?: number;
     active?: number;
   };
-  promotions?: {
-    total?: number;
-    active?: number;
-    used?: number;
-    totalDiscountAmount?: number;
-    discountPercentage?: number;
-    topPromotions?: { _id: string; count: number; totalDiscount: number }[];
-    discountByType?: {
-      percentage?: { count: number; totalDiscount: number };
-      fixed?: { count: number; totalDiscount: number };
-    };
-  };
-  chats?: {
-    totalChats?: number;
-    activeChats?: number;
-    totalMessages?: number;
-    recentMessages?: number;
-    messagesBySender?: { buyer: number; vendor: number };
-    avgResponseTimeMin?: number;
-    messagesByHour?: number[];
-  };
-  telegram?: {
-    totalUsers?: number;
-    totalStoreConnections?: number;
-    avgStoresPerUser?: number;
-    multiStoreUsers?: number;
-  };
-  escrow?: {
-    total?: number;
-    active?: number;
-    released?: number;
-    disputed?: number;
-    disputeRate?: number;
-    totalByCurrency?: { ltc: number; btc: number; xmr: number };
-    heldByCurrency?: { ltc: number; btc: number; xmr: number };
-    avgReleaseTimeHours?: number;
-  };
-  security?: {
-    blockedUsers?: {
-      total?: number;
-      recentlyBlocked?: number;
-    }
-  };
 }
 
 export default function AdminAnalytics() {
@@ -118,9 +70,6 @@ export default function AdminAnalytics() {
         .find((row) => row.startsWith("Authorization="))
         ?.split("=")[1];
 
-      console.log("Token from cookie:", token ? token.substring(0, 10) + "..." : "not found");
-      console.log("API URL:", `${process.env.NEXT_PUBLIC_API_URL}/admin/analytics?range=${dateRange}`);
-      
       const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admin/analytics?range=${dateRange}`, {
         method: "GET",
         headers: {
@@ -128,85 +77,15 @@ export default function AdminAnalytics() {
         },
       });
 
-      console.log("Response status:", response.status);
-      console.log("Response ok:", response.ok);
-      
       if (!response.ok) {
-        const errorText = await response.text();
-        console.error("Error response:", errorText);
-        throw new Error(`Failed to fetch analytics data: ${response.status} ${errorText}`);
+        throw new Error("Failed to fetch analytics data");
       }
 
       const data = await response.json();
-      console.log("Analytics data received:", data);
       setAnalyticsData(data);
-    } catch (error: any) {
+    } catch (error) {
       console.error("Error fetching analytics data:", error);
-      setErrorMessage(`Failed to load analytics data: ${error.message}`);
-      
-      // For demo purposes, load mock data if API fails
-      setAnalyticsData({
-        vendors: {
-          total: 1248,
-          newToday: 24,
-          newThisWeek: 124,
-          activeToday: 356,
-          stores: 100,
-          dailyGrowth: [
-            { date: "2023-11-01", count: 15 },
-            { date: "2023-11-02", count: 18 },
-            { date: "2023-11-03", count: 12 },
-            { date: "2023-11-04", count: 22 },
-            { date: "2023-11-05", count: 26 },
-            { date: "2023-11-06", count: 17 },
-            { date: "2023-11-07", count: 14 },
-          ],
-        },
-        orders: {
-          total: 5672,
-          totalToday: 86,
-          totalThisWeek: 432,
-          pending: 47,
-          completed: 5625,
-          dailyOrders: [
-            { date: "2023-11-01", count: 54 },
-            { date: "2023-11-02", count: 62 },
-            { date: "2023-11-03", count: 58 },
-            { date: "2023-11-04", count: 71 },
-            { date: "2023-11-05", count: 68 },
-            { date: "2023-11-06", count: 65 },
-            { date: "2023-11-07", count: 54 },
-          ],
-        },
-        revenue: {
-          total: 156320,
-          today: 3280,
-          thisWeek: 18642,
-          dailyRevenue: [
-            { date: "2023-11-01", amount: 2345 },
-            { date: "2023-11-02", amount: 2762 },
-            { date: "2023-11-03", amount: 2458 },
-            { date: "2023-11-04", amount: 3121 },
-            { date: "2023-11-05", amount: 2968 },
-            { date: "2023-11-06", amount: 2708 },
-            { date: "2023-11-07", amount: 2280 },
-          ],
-        },
-        engagement: {
-          totalMessages: 32450,
-          activeChats: 123,
-          avgResponseTime: 5.2,
-          dailyMessages: [
-            { date: "2023-11-01", count: 432 },
-            { date: "2023-11-02", count: 512 },
-            { date: "2023-11-03", count: 478 },
-            { date: "2023-11-04", count: 541 },
-            { date: "2023-11-05", count: 498 },
-            { date: "2023-11-06", count: 465 },
-            { date: "2023-11-07", count: 423 },
-          ],
-        },
-      });
+      setErrorMessage("Failed to load analytics data. Please try again.");
     } finally {
       setLoading(false);
       setRefreshing(false);
@@ -230,706 +109,415 @@ export default function AdminAnalytics() {
     );
   }
 
-  // These would normally be real chart components
-  // For this example, we'll use simplified representations
-  const SimpleAreaChart = ({ data, label, color }: { data: any[]; label: string; color: string }) => {
-    // Handle empty data or undefined
+  // Chart component for line/area charts
+  const Chart = ({ data, valueKey = "count", color = "#3b82f6", height = 200 }: 
+    { data: any[]; valueKey?: string; color?: string; height?: number }) => {
     if (!data || data.length === 0) {
       return (
-        <div className="w-full h-32 flex items-center justify-center text-muted-foreground">
+        <div className="w-full flex items-center justify-center text-muted-foreground" style={{ height: `${height}px` }}>
           No data available
         </div>
       );
     }
     
+    // Find min and max for scaling
+    const values = data.map(d => d[valueKey] || 0);
+    const max = Math.max(...values, 1);
+    const min = Math.min(...values, 0);
+    const range = max - min || 1;
+    
     return (
-      <div className="w-full h-32 relative mt-2">
-        {/* Simplified chart visualization */}
-        <div className="absolute bottom-0 left-0 right-0 top-0 flex items-end">
+      <div className="w-full relative" style={{ height: `${height}px` }}>
+        <div className="absolute inset-0 flex items-end">
           {data.map((item, index) => {
-            // Normalize height between 10% and 90%
-            const values = data.map(d => d.count || d.amount);
-            const max = Math.max(...values);
-            const min = Math.min(...values);
-            const range = max - min;
-            const value = item.count || item.amount;
-            const normalizedHeight = range === 0 
-              ? 50 
-              : 10 + (((value - min) / range) * 80);
+            const value = item[valueKey] || 0;
+            const normalizedHeight = ((value - min) / range) * 90 + 10; // Scale to 10%-100%
             
             return (
               <div 
-                key={index} 
-                className="flex-1 mx-0.5 rounded-t"
-                style={{ 
-                  height: `${normalizedHeight}%`, 
-                  backgroundColor: color,
-                  opacity: 0.7 
-                }}
-              />
+                key={index}
+                className="group flex-1 relative"
+              >
+                <div 
+                  className="w-full rounded-t transition-all duration-200"
+                  style={{ 
+                    height: `${normalizedHeight}%`, 
+                    backgroundColor: color,
+                    opacity: 0.7 
+                  }}
+                />
+                <div className="absolute bottom-0 left-0 right-0 opacity-0 group-hover:opacity-100 bg-background text-xs text-center rounded p-1 transform -translate-y-full pointer-events-none z-10 transition-opacity">
+                  {valueKey === "amount" ? 
+                    new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value) : 
+                    value}
+                  <div className="text-[10px] text-muted-foreground">
+                    {new Date(item.date).toLocaleDateString('en-US', {month: 'short', day: 'numeric'})}
+                  </div>
+                </div>
+              </div>
             );
           })}
         </div>
-        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-border"></div>
-        <div className="absolute bottom-[-20px] left-0 right-0 flex justify-between text-xs text-muted-foreground">
-          <span>{new Date(data[0].date).toLocaleDateString('en-US', {month: 'short', day: 'numeric'})}</span>
-          <span>{new Date(data[data.length - 1].date).toLocaleDateString('en-US', {month: 'short', day: 'numeric'})}</span>
+        <div className="absolute bottom-0 left-0 right-0 h-px bg-border"></div>
+        
+        {/* X-axis labels */}
+        <div className="absolute bottom-[-24px] left-0 right-0 flex justify-between text-xs text-muted-foreground">
+          <span>{new Date(data[0]?.date).toLocaleDateString('en-US', {month: 'short', day: 'numeric'})}</span>
+          <span>{new Date(data[data.length - 1]?.date).toLocaleDateString('en-US', {month: 'short', day: 'numeric'})}</span>
         </div>
       </div>
     );
   };
 
-  // Function to render trend indicator
-  const TrendIndicator = ({ value, prefix = "", suffix = "" }: { value: number, prefix?: string, suffix?: string }) => {
-    if (value === 0) return null;
+  // Trend indicator component for metric cards
+  const TrendIndicator = ({ current, previous }: { current: number, previous: number }) => {
+    if (!current || !previous) return null;
+    
+    const percentChange = ((current - previous) / previous) * 100;
+    
+    if (Math.abs(percentChange) < 0.1) return null;
     
     return (
-      <div className={`flex items-center text-xs font-medium ml-1 ${value > 0 ? 'text-green-500' : 'text-red-500'}`}>
-        {value > 0 ? <TrendingUp className="h-3 w-3 mr-1" /> : <TrendingDown className="h-3 w-3 mr-1" />}
-        {prefix}{Math.abs(value).toFixed(1)}{suffix}
+      <div className={`flex items-center text-xs font-medium ${percentChange >= 0 ? 'text-green-500' : 'text-red-500'}`}>
+        {percentChange >= 0 ? 
+          <TrendingUp className="h-3 w-3 mr-1" /> : 
+          <TrendingDown className="h-3 w-3 mr-1" />}
+        {Math.abs(percentChange).toFixed(1)}%
       </div>
     );
   };
 
-  // Mini sparkline component for metric cards
-  const MiniSparkline = ({ data, color = "#3b82f6" }: { data: any[], color?: string }) => {
-    if (!data || data.length === 0) return null;
-    
-    const values = data.map(item => item.count || item.amount || 0);
-    const max = Math.max(...values, 1);
-    
-    return (
-      <div className="flex items-end h-8 space-x-px mt-2">
-        {values.map((value, index) => {
-          const height = (value / max) * 100;
-          return (
-            <div 
-              key={index}
-              className="flex-1 rounded-sm transition-all duration-200"
-              style={{ 
-                height: `${height}%`, 
-                backgroundColor: color,
-                minHeight: '2px',
-                opacity: 0.7 + ((index / values.length) * 0.3) // gradually increase opacity
-              }}
-            />
-          );
-        })}
-      </div>
-    );
+  // Format currency
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      maximumFractionDigits: 0
+    }).format(value);
   };
 
   return (
-    <div className="w-full">
-      <div className="flex justify-between items-center mb-6">
-        <h2 className="text-xl font-bold">Platform Analytics</h2>
-        <div className="flex items-center space-x-4">
-          <Select value={dateRange} onValueChange={setDateRange}>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="Select timeframe" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="7days">Last 7 Days</SelectItem>
-              <SelectItem value="30days">Last 30 Days</SelectItem>
-              <SelectItem value="90days">Last 90 Days</SelectItem>
-            </SelectContent>
-          </Select>
-          <Button 
-            size="sm" 
-            onClick={handleRefresh}
-            disabled={refreshing}
-            className="flex items-center gap-2"
-          >
-            <RefreshCw className={`h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
-            Refresh
-          </Button>
-        </div>
-      </div>
-
+    <div className="space-y-6">
       {errorMessage && (
-        <Alert variant="destructive" className="mb-6">
+        <Alert variant="destructive">
           <AlertCircle className="h-4 w-4" />
           <AlertTitle>Error</AlertTitle>
           <AlertDescription>{errorMessage}</AlertDescription>
         </Alert>
       )}
-
-      <Tabs defaultValue="orders">
-        <TabsList className="grid grid-cols-6 mb-6">
+      
+      <div className="flex justify-between items-center">
+        <div>
+          <h2 className="text-2xl font-bold">Dashboard Analytics</h2>
+          <p className="text-muted-foreground">Overview of your marketplace performance</p>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          <Select 
+            value={dateRange} 
+            onValueChange={setDateRange}
+          >
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="Last 7 days" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="24hours">Last 24 hours</SelectItem>
+              <SelectItem value="7days">Last 7 days</SelectItem>
+              <SelectItem value="30days">Last 30 days</SelectItem>
+            </SelectContent>
+          </Select>
+          
+          <Button 
+            variant="outline" 
+            size="icon" 
+            onClick={handleRefresh}
+            disabled={refreshing}
+          >
+            <RefreshCw 
+              className={`h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} 
+            />
+          </Button>
+        </div>
+      </div>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {/* Orders Card */}
+        <Card>
+          <CardHeader className="pb-2">
+            <div className="flex justify-between items-start">
+              <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
+              <ShoppingCart className="h-4 w-4 text-muted-foreground" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {analyticsData?.orders?.total?.toLocaleString() || '0'}
+            </div>
+            <div className="flex items-center text-xs text-muted-foreground mt-1">
+              <span>Today: {analyticsData?.orders?.totalToday || 0}</span>
+              <TrendIndicator 
+                current={analyticsData?.orders?.totalToday || 0} 
+                previous={(analyticsData?.orders?.total || 0) / 30} // Rough estimate
+              />
+            </div>
+            
+            {analyticsData?.orders?.dailyOrders && (
+              <div className="mt-3 h-10">
+                <Chart 
+                  data={analyticsData.orders.dailyOrders} 
+                  height={40}
+                />
+              </div>
+            )}
+          </CardContent>
+        </Card>
+        
+        {/* Revenue Card */}
+        <Card>
+          <CardHeader className="pb-2">
+            <div className="flex justify-between items-start">
+              <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
+              <DollarSign className="h-4 w-4 text-muted-foreground" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {formatCurrency(analyticsData?.revenue?.total || 0)}
+            </div>
+            <div className="flex items-center text-xs text-muted-foreground mt-1">
+              <span>Today: {formatCurrency(analyticsData?.revenue?.today || 0)}</span>
+              <TrendIndicator 
+                current={analyticsData?.revenue?.today || 0} 
+                previous={(analyticsData?.revenue?.total || 0) / 30} // Rough estimate
+              />
+            </div>
+            
+            {analyticsData?.revenue?.dailyRevenue && (
+              <div className="mt-3 h-10">
+                <Chart 
+                  data={analyticsData.revenue.dailyRevenue} 
+                  valueKey="amount"
+                  color="#10b981"
+                  height={40}
+                />
+              </div>
+            )}
+          </CardContent>
+        </Card>
+        
+        {/* Vendors Card */}
+        <Card>
+          <CardHeader className="pb-2">
+            <div className="flex justify-between items-start">
+              <CardTitle className="text-sm font-medium">Vendors</CardTitle>
+              <Users className="h-4 w-4 text-muted-foreground" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {analyticsData?.vendors?.total?.toLocaleString() || '0'}
+            </div>
+            <div className="flex items-center text-xs text-muted-foreground mt-1">
+              <span>New Today: {analyticsData?.vendors?.newToday || 0}</span>
+              <TrendIndicator 
+                current={analyticsData?.vendors?.newToday || 0} 
+                previous={(analyticsData?.vendors?.newThisWeek || 0) / 7} // Average per day
+              />
+            </div>
+            
+            {analyticsData?.vendors?.dailyGrowth && (
+              <div className="mt-3 h-10">
+                <Chart 
+                  data={analyticsData.vendors.dailyGrowth}
+                  color="#8b5cf6"
+                  height={40}
+                />
+              </div>
+            )}
+          </CardContent>
+        </Card>
+        
+        {/* Products Card */}
+        <Card>
+          <CardHeader className="pb-2">
+            <div className="flex justify-between items-start">
+              <CardTitle className="text-sm font-medium">Products</CardTitle>
+              <Package className="h-4 w-4 text-muted-foreground" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {analyticsData?.products?.total?.toLocaleString() || '0'}
+            </div>
+            <div className="flex items-center text-xs text-muted-foreground mt-1">
+              <span>New This Week: {analyticsData?.products?.recent || 0}</span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+      
+      <Tabs defaultValue="orders" className="mt-6">
+        <TabsList>
           <TabsTrigger value="orders">Orders</TabsTrigger>
-          <TabsTrigger value="vendors">Vendors</TabsTrigger>
           <TabsTrigger value="revenue">Revenue</TabsTrigger>
-          <TabsTrigger value="promotions">Promotions</TabsTrigger>
-          <TabsTrigger value="communication">Communication</TabsTrigger>
-          <TabsTrigger value="payments">Payments</TabsTrigger>
+          <TabsTrigger value="vendors">Vendors</TabsTrigger>
+          <TabsTrigger value="engagement">Engagement</TabsTrigger>
         </TabsList>
-
-        <TabsContent value="orders">
+        
+        <TabsContent value="orders" className="mt-4">
           <Card>
             <CardHeader>
-              <CardTitle>Order Analytics</CardTitle>
-              <CardDescription>Order volume and revenue metrics</CardDescription>
+              <CardTitle>Order Trends</CardTitle>
+              <CardDescription>
+                Daily order volume over the selected time period
+              </CardDescription>
             </CardHeader>
             <CardContent>
-              {analyticsData && (
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-                  <div className="p-4 border rounded-md">
-                    <div className="text-sm font-medium text-muted-foreground mb-1">Total Orders</div>
-                    <div className="text-2xl font-semibold">{analyticsData.orders?.total?.toLocaleString() || '0'}</div>
-                  </div>
-                  
-                  <div className="p-4 border rounded-md">
-                    <div className="text-sm font-medium text-muted-foreground mb-1">Orders Today</div>
-                    <div className="text-2xl font-semibold">{analyticsData.orders?.totalToday?.toLocaleString() || '0'}</div>
-                  </div>
-                  
-                  <div className="p-4 border rounded-md">
-                    <div className="text-sm font-medium text-muted-foreground mb-1">Pending Orders</div>
-                    <div className="text-2xl font-semibold">{analyticsData.orders?.pending?.toLocaleString() || '0'}</div>
-                  </div>
-                  
-                  <div className="p-4 border rounded-md">
-                    <div className="text-sm font-medium text-muted-foreground mb-1">Revenue</div>
-                    <div className="text-2xl font-semibold">${analyticsData.revenue?.total?.toLocaleString() || '0'}</div>
-                  </div>
+              {analyticsData?.orders?.dailyOrders ? (
+                <Chart 
+                  data={analyticsData.orders.dailyOrders} 
+                  height={300}
+                />
+              ) : (
+                <div className="flex items-center justify-center h-[300px] text-muted-foreground">
+                  No order data available
                 </div>
               )}
               
-              <div className="mt-6">
-                <h3 className="text-lg font-medium mb-4">Order & Revenue Trends</h3>
-                {analyticsData && (
-                  <div className="h-[300px] flex items-center justify-center border rounded-md">
-                    <p className="text-muted-foreground">Order and revenue charts would render here</p>
-                  </div>
-                )}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+                <div className="bg-muted/50 p-4 rounded-lg">
+                  <div className="text-sm font-medium mb-1">Total Orders</div>
+                  <div className="text-2xl font-bold">{analyticsData?.orders?.total?.toLocaleString() || '0'}</div>
+                </div>
+                <div className="bg-muted/50 p-4 rounded-lg">
+                  <div className="text-sm font-medium mb-1">Pending Orders</div>
+                  <div className="text-2xl font-bold">{analyticsData?.orders?.pending?.toLocaleString() || '0'}</div>
+                </div>
+                <div className="bg-muted/50 p-4 rounded-lg">
+                  <div className="text-sm font-medium mb-1">Completed Orders</div>
+                  <div className="text-2xl font-bold">{analyticsData?.orders?.completed?.toLocaleString() || '0'}</div>
+                </div>
               </div>
             </CardContent>
           </Card>
         </TabsContent>
         
-        <TabsContent value="vendors">
+        <TabsContent value="revenue" className="mt-4">
           <Card>
             <CardHeader>
-              <CardTitle>Vendor Analytics</CardTitle>
-              <CardDescription>Detailed vendor metrics and store statistics</CardDescription>
+              <CardTitle>Revenue Trends</CardTitle>
+              <CardDescription>
+                Daily revenue over the selected time period
+              </CardDescription>
             </CardHeader>
             <CardContent>
-              {analyticsData && (
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-                  <div className="p-4 border rounded-md">
-                    <div className="text-sm font-medium text-muted-foreground mb-1">Total Vendors</div>
-                    <div className="text-2xl font-semibold">{analyticsData.vendors?.total?.toLocaleString() || '0'}</div>
-                  </div>
-                  
-                  <div className="p-4 border rounded-md">
-                    <div className="text-sm font-medium text-muted-foreground mb-1">New Today</div>
-                    <div className="text-2xl font-semibold">{analyticsData.vendors?.newToday?.toLocaleString() || '0'}</div>
-                  </div>
-                  
-                  <div className="p-4 border rounded-md">
-                    <div className="text-sm font-medium text-muted-foreground mb-1">New This Week</div>
-                    <div className="text-2xl font-semibold">{analyticsData.vendors?.newThisWeek?.toLocaleString() || '0'}</div>
-                  </div>
-                  
-                  <div className="p-4 border rounded-md">
-                    <div className="text-sm font-medium text-muted-foreground mb-1">Active Stores</div>
-                    <div className="text-2xl font-semibold">{analyticsData.vendors?.stores?.toLocaleString() || analyticsData.stores?.total?.toLocaleString() || '0'}</div>
-                  </div>
+              {analyticsData?.revenue?.dailyRevenue ? (
+                <Chart 
+                  data={analyticsData.revenue.dailyRevenue} 
+                  valueKey="amount"
+                  color="#10b981" 
+                  height={300}
+                />
+              ) : (
+                <div className="flex items-center justify-center h-[300px] text-muted-foreground">
+                  No revenue data available
                 </div>
               )}
               
-              <div className="mt-6">
-                <h3 className="text-lg font-medium mb-4">Vendor Growth Trend</h3>
-                {analyticsData && (
-                  <div className="h-[300px] flex items-center justify-center border rounded-md">
-                    <p className="text-muted-foreground">Vendor growth chart would render here</p>
-                  </div>
-                )}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+                <div className="bg-muted/50 p-4 rounded-lg">
+                  <div className="text-sm font-medium mb-1">Total Revenue</div>
+                  <div className="text-2xl font-bold">{formatCurrency(analyticsData?.revenue?.total || 0)}</div>
+                </div>
+                <div className="bg-muted/50 p-4 rounded-lg">
+                  <div className="text-sm font-medium mb-1">Today's Revenue</div>
+                  <div className="text-2xl font-bold">{formatCurrency(analyticsData?.revenue?.today || 0)}</div>
+                </div>
+                <div className="bg-muted/50 p-4 rounded-lg">
+                  <div className="text-sm font-medium mb-1">This Week's Revenue</div>
+                  <div className="text-2xl font-bold">{formatCurrency(analyticsData?.revenue?.thisWeek || 0)}</div>
+                </div>
               </div>
             </CardContent>
           </Card>
         </TabsContent>
         
-        <TabsContent value="revenue">
-          <Card className="shadow-sm">
+        <TabsContent value="vendors" className="mt-4">
+          <Card>
             <CardHeader>
-              <CardTitle>Revenue Analytics</CardTitle>
-              <CardDescription>Revenue and financial metrics</CardDescription>
+              <CardTitle>Vendor Growth</CardTitle>
+              <CardDescription>
+                New vendor registrations over time
+              </CardDescription>
             </CardHeader>
             <CardContent>
-              {analyticsData && (
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
-                  <div className="p-4 border rounded-md bg-gradient-to-r from-purple-950/30 to-slate-900/30">
-                    <div className="text-sm font-medium text-muted-foreground mb-1">Total Processed</div>
-                    <div className="text-2xl font-semibold">${analyticsData.revenue?.total?.toLocaleString() || '0'}</div>
-                  </div>
-                  
-                  <div className="p-4 border rounded-md bg-gradient-to-r from-purple-950/30 to-slate-900/30">
-                    <div className="text-sm font-medium text-muted-foreground mb-1">Today's Revenue</div>
-                    <div className="text-2xl font-semibold">${analyticsData.revenue?.today?.toLocaleString() || '0'}</div>
-                  </div>
-                  
-                  <div className="p-4 border rounded-md bg-gradient-to-r from-purple-950/30 to-slate-900/30">
-                    <div className="text-sm font-medium text-muted-foreground mb-1">This Week</div>
-                    <div className="text-2xl font-semibold">${analyticsData.revenue?.thisWeek?.toLocaleString() || '0'}</div>
-                  </div>
-                  
-                  <div className="p-4 border rounded-md bg-gradient-to-r from-purple-950/30 to-slate-900/30">
-                    <div className="text-sm font-medium text-muted-foreground mb-1">Average Per Order</div>
-                    <div className="text-2xl font-semibold">
-                      ${analyticsData.revenue && analyticsData.orders?.total 
-                          ? Math.round((analyticsData.revenue.total || 0) / analyticsData.orders.total).toLocaleString() 
-                          : '0'}
-                    </div>
-                  </div>
+              {analyticsData?.vendors?.dailyGrowth ? (
+                <Chart 
+                  data={analyticsData.vendors.dailyGrowth}
+                  color="#8b5cf6"
+                  height={300}
+                />
+              ) : (
+                <div className="flex items-center justify-center h-[300px] text-muted-foreground">
+                  No vendor data available
                 </div>
               )}
               
-              <div className="mt-6">
-                <h3 className="text-lg font-medium mb-4">Revenue Trend</h3>
-                {analyticsData && (
-                  <SimpleAreaChart 
-                    data={analyticsData.revenue?.dailyRevenue || []} 
-                    label="Revenue" 
-                    color="#8b5cf6" // purple
-                  />
-                )}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+                <div className="bg-muted/50 p-4 rounded-lg">
+                  <div className="text-sm font-medium mb-1">Total Vendors</div>
+                  <div className="text-2xl font-bold">{analyticsData?.vendors?.total?.toLocaleString() || '0'}</div>
+                </div>
+                <div className="bg-muted/50 p-4 rounded-lg">
+                  <div className="text-sm font-medium mb-1">New Today</div>
+                  <div className="text-2xl font-bold">{analyticsData?.vendors?.newToday?.toLocaleString() || '0'}</div>
+                </div>
+                <div className="bg-muted/50 p-4 rounded-lg">
+                  <div className="text-sm font-medium mb-1">New This Week</div>
+                  <div className="text-2xl font-bold">{analyticsData?.vendors?.newThisWeek?.toLocaleString() || '0'}</div>
+                </div>
               </div>
             </CardContent>
           </Card>
         </TabsContent>
-
-        <TabsContent value="promotions">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Active Promotions
-                </CardTitle>
-                <DollarSign className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">
-                  {analyticsData?.promotions?.active || 0}
+        
+        <TabsContent value="engagement" className="mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>User Engagement</CardTitle>
+              <CardDescription>
+                Chat and message activity 
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {analyticsData?.engagement?.dailyMessages ? (
+                <Chart 
+                  data={analyticsData.engagement.dailyMessages}
+                  color="#ec4899"
+                  height={300}
+                />
+              ) : (
+                <div className="flex items-center justify-center h-[300px] text-muted-foreground">
+                  No engagement data available
                 </div>
-                <p className="text-xs text-muted-foreground">
-                  out of {analyticsData?.promotions?.total || 0} total
-                </p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Total Discount Amount
-                </CardTitle>
-                <DollarSign className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">
-                  ${analyticsData?.promotions?.totalDiscountAmount?.toLocaleString() || 0}
+              )}
+              
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+                <div className="bg-muted/50 p-4 rounded-lg">
+                  <div className="text-sm font-medium mb-1">Total Messages</div>
+                  <div className="text-2xl font-bold">{analyticsData?.engagement?.totalMessages?.toLocaleString() || '0'}</div>
                 </div>
-                <p className="text-xs text-muted-foreground">
-                  {analyticsData?.promotions?.discountPercentage || 0}% of revenue
-                </p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Promotion Uses
-                </CardTitle>
-                <DollarSign className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">
-                  {analyticsData?.promotions?.used || 0}
+                <div className="bg-muted/50 p-4 rounded-lg">
+                  <div className="text-sm font-medium mb-1">Active Chats</div>
+                  <div className="text-2xl font-bold">{analyticsData?.engagement?.activeChats?.toLocaleString() || '0'}</div>
                 </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-md font-medium">Top Promotions</CardTitle>
-                <CardDescription>Most used promotion codes</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  {analyticsData?.promotions?.topPromotions?.map((promo, i) => (
-                    <div key={i} className="flex items-center justify-between">
-                      <div className="space-y-0.5">
-                        <p className="text-sm font-medium">{promo._id}</p>
-                        <p className="text-xs text-muted-foreground">
-                          {promo.count} uses · ${promo.totalDiscount.toLocaleString()}
-                        </p>
-                      </div>
-                      <div className="font-medium">
-                        ${(promo.totalDiscount / promo.count).toFixed(2)}
-                        <span className="text-xs text-muted-foreground ml-1">avg</span>
-                      </div>
-                    </div>
-                  ))}
+                <div className="bg-muted/50 p-4 rounded-lg">
+                  <div className="text-sm font-medium mb-1">Sessions</div>
+                  <div className="text-2xl font-bold">{analyticsData?.sessions?.active?.toLocaleString() || '0'} / {analyticsData?.sessions?.total?.toLocaleString() || '0'}</div>
                 </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-md font-medium">Discount Types</CardTitle>
-                <CardDescription>Breakdown by discount type</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-center justify-center h-[200px]">
-                  {analyticsData?.promotions?.discountByType && (
-                    <div className="w-full flex flex-col gap-4">
-                      <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                          <p className="text-sm font-medium">Percentage Discounts</p>
-                          <p className="text-xs text-muted-foreground">
-                            {analyticsData.promotions.discountByType.percentage?.count || 0} uses
-                          </p>
-                        </div>
-                        <div className="font-medium">
-                          ${analyticsData.promotions.discountByType.percentage?.totalDiscount?.toLocaleString() || 0}
-                        </div>
-                      </div>
-                      <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                          <p className="text-sm font-medium">Fixed Amount Discounts</p>
-                          <p className="text-xs text-muted-foreground">
-                            {analyticsData.promotions.discountByType.fixed?.count || 0} uses
-                          </p>
-                        </div>
-                        <div className="font-medium">
-                          ${analyticsData.promotions.discountByType.fixed?.totalDiscount?.toLocaleString() || 0}
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="communication">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Total Chats
-                </CardTitle>
-                <MessageSquare className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">
-                  {analyticsData?.chats?.totalChats || 0}
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  {analyticsData?.chats?.activeChats || 0} active in selected period
-                </p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Total Messages
-                </CardTitle>
-                <MessageSquare className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">
-                  {analyticsData?.chats?.totalMessages?.toLocaleString() || 0}
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  {analyticsData?.chats?.recentMessages?.toLocaleString() || 0} in selected period
-                </p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Avg Response Time
-                </CardTitle>
-                <Clock className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">
-                  {analyticsData?.chats?.avgResponseTimeMin || 0} min
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-md font-medium">Message Volume by Hour</CardTitle>
-                <CardDescription>Chat activity distribution</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="h-[200px]">
-                  {analyticsData?.chats?.messagesByHour && (
-                    <ResponsiveContainer width="100%" height="100%">
-                      <BarChart data={analyticsData.chats.messagesByHour.map((count, hour) => ({ hour, count }))}>
-                        <XAxis dataKey="hour" />
-                        <YAxis />
-                        <Tooltip />
-                        <Bar dataKey="count" fill="#6366f1" />
-                      </BarChart>
-                    </ResponsiveContainer>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-md font-medium">Message Breakdown</CardTitle>
-                <CardDescription>By sender type</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="h-[200px] flex items-center justify-center">
-                  {analyticsData?.chats?.messagesBySender && (
-                    <ResponsiveContainer width="100%" height="100%">
-                      <PieChart>
-                        <Pie
-                          data={[
-                            { name: 'Buyer', value: analyticsData.chats.messagesBySender.buyer || 0 },
-                            { name: 'Vendor', value: analyticsData.chats.messagesBySender.vendor || 0 }
-                          ]}
-                          cx="50%"
-                          cy="50%"
-                          innerRadius={60}
-                          outerRadius={80}
-                          fill="#8884d8"
-                          dataKey="value"
-                          label
-                        >
-                          <Cell fill="#6366f1" />
-                          <Cell fill="#22c55e" />
-                        </Pie>
-                        <Tooltip />
-                        <Legend />
-                      </PieChart>
-                    </ResponsiveContainer>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-md font-medium">Telegram Users</CardTitle>
-                <CardDescription>Bot user statistics</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  <div className="flex items-center justify-between">
-                    <div className="space-y-0.5">
-                      <p className="text-sm font-medium">Total Users</p>
-                    </div>
-                    <div className="font-medium">
-                      {analyticsData?.telegram?.totalUsers || 0}
-                    </div>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <div className="space-y-0.5">
-                      <p className="text-sm font-medium">Store Connections</p>
-                    </div>
-                    <div className="font-medium">
-                      {analyticsData?.telegram?.totalStoreConnections || 0}
-                    </div>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <div className="space-y-0.5">
-                      <p className="text-sm font-medium">Avg Stores per User</p>
-                    </div>
-                    <div className="font-medium">
-                      {analyticsData?.telegram?.avgStoresPerUser?.toFixed(2) || 0}
-                    </div>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <div className="space-y-0.5">
-                      <p className="text-sm font-medium">Multi-Store Users</p>
-                    </div>
-                    <div className="font-medium">
-                      {analyticsData?.telegram?.multiStoreUsers || 0}
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-md font-medium">Security</CardTitle>
-                <CardDescription>Blocked users and security metrics</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  <div className="flex items-center justify-between">
-                    <div className="space-y-0.5">
-                      <p className="text-sm font-medium">Total Blocked Users</p>
-                    </div>
-                    <div className="font-medium">
-                      {analyticsData?.security?.blockedUsers?.total || 0}
-                    </div>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <div className="space-y-0.5">
-                      <p className="text-sm font-medium">Recently Blocked</p>
-                      <p className="text-xs text-muted-foreground">
-                        In selected period
-                      </p>
-                    </div>
-                    <div className="font-medium">
-                      {analyticsData?.security?.blockedUsers?.recentlyBlocked || 0}
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="payments">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Active Escrows
-                </CardTitle>
-                <Landmark className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">
-                  {analyticsData?.escrow?.active || 0}
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  out of {analyticsData?.escrow?.total || 0} total
-                </p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Released Escrows
-                </CardTitle>
-                <Landmark className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">
-                  {analyticsData?.escrow?.released || 0}
-                </div>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Dispute Rate
-                </CardTitle>
-                <Landmark className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">
-                  {analyticsData?.escrow?.disputeRate?.toFixed(1) || 0}%
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  {analyticsData?.escrow?.disputed || 0} disputed escrows
-                </p>
-              </CardContent>
-            </Card>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-md font-medium">Escrow by Currency</CardTitle>
-                <CardDescription>Currently held amounts</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  {analyticsData?.escrow?.heldByCurrency && (
-                    <>
-                      <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                          <p className="text-sm font-medium">Bitcoin (BTC)</p>
-                        </div>
-                        <div className="font-medium">
-                          {analyticsData.escrow.heldByCurrency.btc.toFixed(4)} BTC
-                        </div>
-                      </div>
-                      <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                          <p className="text-sm font-medium">Litecoin (LTC)</p>
-                        </div>
-                        <div className="font-medium">
-                          {analyticsData.escrow.heldByCurrency.ltc.toFixed(2)} LTC
-                        </div>
-                      </div>
-                      <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                          <p className="text-sm font-medium">Monero (XMR)</p>
-                        </div>
-                        <div className="font-medium">
-                          {analyticsData.escrow.heldByCurrency.xmr.toFixed(2)} XMR
-                        </div>
-                      </div>
-                    </>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-md font-medium">Escrow Metrics</CardTitle>
-                <CardDescription>Release time and amounts</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  <div className="flex items-center justify-between">
-                    <div className="space-y-0.5">
-                      <p className="text-sm font-medium">Avg Release Time</p>
-                    </div>
-                    <div className="font-medium">
-                      {analyticsData?.escrow?.avgReleaseTimeHours ? (
-                        <>
-                          {Math.floor(analyticsData.escrow.avgReleaseTimeHours / 24)} days, {analyticsData.escrow.avgReleaseTimeHours % 24} hours
-                        </>
-                      ) : (
-                        "8 days, 0 hours"
-                      )}
-                    </div>
-                  </div>
-                  
-                  {analyticsData?.escrow?.totalByCurrency && (
-                    <div className="pt-4">
-                      <p className="text-sm font-medium mb-2">Total Processed (lifetime)</p>
-                      <div className="space-y-2 pl-2">
-                        <div className="text-xs flex justify-between">
-                          <span>BTC:</span>
-                          <span>{analyticsData.escrow.totalByCurrency.btc.toFixed(4)} BTC</span>
-                        </div>
-                        <div className="text-xs flex justify-between">
-                          <span>LTC:</span>
-                          <span>{analyticsData.escrow.totalByCurrency.ltc.toFixed(2)} LTC</span>
-                        </div>
-                        <div className="text-xs flex justify-between">
-                          <span>XMR:</span>
-                          <span>{analyticsData.escrow.totalByCurrency.xmr.toFixed(2)} XMR</span>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </div>
+              </div>
+            </CardContent>
+          </Card>
         </TabsContent>
       </Tabs>
     </div>