Analytics

frontend/web/src/app/admin/(protected)/dashboard/page.tsx

@@ -1,11 +1,29 @@
+'use client';
+
 import ActivePromotions from '@/src/components/admin/dashboard/ActivePromotions';
 import CustomerInsights from '@/src/components/admin/dashboard/CustomerInsights';
 import QuickActionCard from '@/src/components/admin/dashboard/QuickActionCard';
 import SalesChart from '@/src/components/admin/dashboard/SalesChart';
 import StatCard from '@/src/components/admin/dashboard/StatCard';
+import { analyticsService } from '@/src/services/analytics.service';
+import { DashboardSummary } from '@/src/types/api/analytics.api';
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
 
 export default function Home() {
+  const [stats, setStats] = useState<DashboardSummary | null>(null);
+
+  useEffect(() => {
+    const loadDashboard = async () => {
+      const data = await analyticsService.getDashboardSummary();
+      setStats(data);
+    };
+
+    loadDashboard();
+  }, []);
+
+  if (!stats) return <div>Loading...</div>;
+
   return (
     <div className="flex flex-col gap-8 pt-2">
       <div className="flex justify-between items-center max-md:flex-col max-md:items-start max-md:gap-4">
@@ -52,39 +70,44 @@ export default function Home() {
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             <StatCard
               title="Total Sales"
-              value="$54,890"
-              trend={12.5}
-              trendLabel="This month"
+              value={`₹${stats.revenue}`}
+              trend={0}
+              trendLabel="Total revenue"
             />
+
             <StatCard
               title="Orders"
-              value="1,429"
-              trend={8.2}
-              trendLabel="This month"
+              value={stats.orders.toString()}
+              trend={0}
+              trendLabel="Total orders"
             />
+
             <StatCard
               title="Average Order Value"
-              value="$38.42"
-              trend={3.1}
-              trendLabel="This month"
+              value={`₹${stats.avgOrderValue.toFixed(2)}`}
+              trend={0}
+              trendLabel="Per order"
             />
+            {/* 
             <StatCard
               title="Returning Customers"
-              value="68%"
-              trend={2.4}
-              trendLabel="This month"
-            />
+              value={`${stats.returningCustomers}%`}
+              trend={0}
+              trendLabel="Repeat buyers"
+            /> */}
+
             <StatCard
               title="Cart Abandonment"
-              value="23.8%"
-              trend={-1.8}
-              trendLabel="This month"
+              value={`${stats.cartAbandonment.toFixed(1)}%`}
+              trend={0}
+              trendLabel="Abandonment rate"
             />
+
             <StatCard
               title="Product Views"
-              value="45,210"
-              trend={15.3}
-              trendLabel="This month"
+              value={stats.productViews.toString()}
+              trend={0}
+              trendLabel="Total views"
             />
           </div>
 

frontend/web/src/components/admin/analytics/AnalyticsStats.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import {
   DollarSign,
   ShoppingCart,
@@ -9,42 +10,65 @@ import {
   ArrowDownRight,
 } from 'lucide-react';
 
-const stats = [
-  {
-    title: 'Total Revenue',
-    value: '$54,239',
-    change: '+12.5%',
-    trend: 'up',
-    icon: DollarSign,
-    color: 'bg-emerald-100 text-emerald-600',
-  },
-  {
-    title: 'Total Orders',
-    value: '1,253',
-    change: '+8.2%',
-    trend: 'up',
-    icon: ShoppingCart,
-    color: 'bg-blue-100 text-blue-600',
-  },
-  {
-    title: 'Avg. Order Value',
-    value: '$43.28',
-    change: '-2.1%',
-    trend: 'down',
-    icon: CreditCard,
-    color: 'bg-purple-100 text-purple-600',
-  },
-  {
-    title: 'Refund Rate',
-    value: '1.2%',
-    change: '+0.4%',
-    trend: 'down', // down is bad for refund rate usually, but visually down arrow red is consistent
-    icon: TrendingUp, // Maybe iterate on icon
-    color: 'bg-amber-100 text-amber-600',
-  },
-];
+import { analyticsService } from '@/src/services/analytics.service';
+import { OverviewStats, GrowthStats } from '@/src/types/api/analytics.api';
+
+interface StatsState {
+  overview: OverviewStats;
+  growth: GrowthStats;
+}
 
 export default function AnalyticsStats() {
+  const [data, setData] = useState<StatsState | null>(null);
+
+  useEffect(() => {
+    const loadStats = async () => {
+      const overview = await analyticsService.getOverview();
+      const growth = await analyticsService.getGrowthStats();
+
+      setData({ overview, growth });
+    };
+
+    loadStats();
+  }, []);
+
+  if (!data) return null;
+
+  const stats = [
+    {
+      title: 'Total Revenue',
+      value: `₹${data.overview.revenue.toLocaleString()}`,
+      change: `${data.growth.revenueGrowth.toFixed(1)}%`,
+      trend: data.growth.revenueGrowth >= 0 ? 'up' : 'down',
+      icon: DollarSign,
+      color: 'bg-emerald-100 text-emerald-600',
+    },
+    {
+      title: 'Total Orders',
+      value: data.overview.orders.toString(),
+      change: `${data.growth.orderGrowth.toFixed(1)}%`,
+      trend: data.growth.orderGrowth >= 0 ? 'up' : 'down',
+      icon: ShoppingCart,
+      color: 'bg-blue-100 text-blue-600',
+    },
+    {
+      title: 'Avg. Order Value',
+      value: `₹${data.overview.avgOrderValue.toFixed(2)}`,
+      change: '—',
+      trend: 'up',
+      icon: CreditCard,
+      color: 'bg-purple-100 text-purple-600',
+    },
+    {
+      title: 'Refund Rate',
+      value: `${data.overview.refundRate.toFixed(1)}%`,
+      change: '—',
+      trend: 'down',
+      icon: TrendingUp,
+      color: 'bg-amber-100 text-amber-600',
+    },
+  ];
+
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
       {stats.map((stat, index) => (
@@ -56,6 +80,7 @@ export default function AnalyticsStats() {
             <div className={`p-3 rounded-xl ${stat.color}`}>
               <stat.icon size={22} />
             </div>
+
             <div
               className={`flex items-center gap-1 text-xs font-semibold px-2 py-1 rounded-lg ${
                 stat.trend === 'up'
@@ -71,8 +96,10 @@ export default function AnalyticsStats() {
               {stat.change}
             </div>
           </div>
+
           <div>
             <p className="text-gray-500 text-sm font-medium">{stat.title}</p>
+
             <h3 className="text-2xl font-bold text-gray-900 mt-1">
               {stat.value}
             </h3>

frontend/web/src/components/admin/analytics/RevenueChart.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import {
   AreaChart,
   Area,
@@ -10,22 +11,36 @@ import {
   ResponsiveContainer,
 } from 'recharts';
 
-const data = [
-  { name: 'Jan', revenue: 4000, profit: 2400 },
-  { name: 'Feb', revenue: 3000, profit: 1398 },
-  { name: 'Mar', revenue: 2000, profit: 9800 },
-  { name: 'Apr', revenue: 2780, profit: 3908 },
-  { name: 'May', revenue: 1890, profit: 4800 },
-  { name: 'Jun', revenue: 2390, profit: 3800 },
-  { name: 'Jul', revenue: 3490, profit: 4300 },
-  { name: 'Aug', revenue: 4200, profit: 5100 },
-  { name: 'Sep', revenue: 5100, profit: 5900 },
-  { name: 'Oct', revenue: 6200, profit: 6500 },
-  { name: 'Nov', revenue: 5800, profit: 5400 },
-  { name: 'Dec', revenue: 7500, profit: 6800 },
-];
+import { analyticsService } from '@/src/services/analytics.service';
+import { RevenueChartPoint } from '@/src/types/api/analytics.api';
+
+interface ChartPoint {
+  name: string;
+  revenue: number;
+  profit: number;
+}
 
 export default function RevenueChart() {
+  const [data, setData] = useState<ChartPoint[]>([]);
+
+  useEffect(() => {
+    const loadRevenue = async () => {
+      const res: RevenueChartPoint[] =
+        await analyticsService.getRevenueChart(365);
+
+      const chartData: ChartPoint[] = res.map((item) => ({
+        name: new Date(item.date).toLocaleDateString('en-US', {
+          month: 'short',
+        }),
+        revenue: item.revenue,
+        profit: Math.round(item.revenue * 0.3), // placeholder profit calc
+      }));
+
+      setData(chartData);
+    };
+
+    loadRevenue();
+  }, []);
   return (
     <div className="bg-white p-6 rounded-[20px] shadow-sm border border-gray-100 flex flex-col h-full">
       <div className="flex justify-between items-center mb-8">

frontend/web/src/components/admin/dashboard/SalesChart.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import {
   BarChart,
   Bar,
@@ -10,22 +11,34 @@ import {
   ResponsiveContainer,
 } from 'recharts';
 
-const data = [
-  { name: 'Jan', sales: 2500 },
-  { name: 'Feb', sales: 7500 },
-  { name: 'Mar', sales: 6000 },
-  { name: 'Apr', sales: 9000 },
-  { name: 'May', sales: 7800 },
-  { name: 'Jun', sales: 5500 },
-  { name: 'Jul', sales: 3000 },
-  { name: 'Aug', sales: 8500 },
-  { name: 'Sep', sales: 7000 },
-  { name: 'Oct', sales: 10000 },
-  { name: 'Nov', sales: 6500 },
-  { name: 'Dec', sales: 3500 },
-];
+import { analyticsService } from '@/src/services/analytics.service';
+import { RevenueChartPoint } from '@/src/types/api/analytics.api';
+
+interface ChartPoint {
+  name: string;
+  sales: number;
+}
 
 export default function SalesChart() {
+  const [data, setData] = useState<ChartPoint[]>([]);
+
+  useEffect(() => {
+    const loadRevenue = async () => {
+      const res: RevenueChartPoint[] =
+        await analyticsService.getRevenueChart(30);
+
+      const chartData: ChartPoint[] = res.map((item) => ({
+        name: new Date(item.date).toLocaleDateString('en-US', {
+          month: 'short',
+        }),
+        sales: item.revenue,
+      }));
+
+      setData(chartData);
+    };
+
+    loadRevenue();
+  }, []);
   return (
     <div className="bg-white rounded-[20px] p-6 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.02)] h-full flex flex-col">
       <div className="flex justify-between items-center mb-8 max-[500px]:flex-col max-[500px]:items-start max-[500px]:gap-4">