create-bluecopa-react-app 1.0.0

package/templates/basic/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "bluecopa-dashboard",
+  "version": "1.0.0",
+  "description": "BlueCopa Dashboard Template with TanStack Query and shadcn/ui",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@bluecopa/react": "^0.1.3",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-aspect-ratio": "^1.0.3",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.0.4",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "axios": "^1.6.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "date-fns": "^2.30.0",
+    "lucide-react": "^0.292.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "recharts": "^2.8.0",
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.1.1",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
+  }
+}

package/templates/basic/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/basic/setup.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+
+# BlueCopa React Dashboard Template Setup Script
+# This script sets up the BlueCopa React dashboard template
+
+set -e
+
+PROJECT_NAME=${1:-bluecopa-dashboard}
+TEMPLATE_DIR="$(dirname "$0")"
+
+echo "🚀 Setting up BlueCopa React Dashboard: $PROJECT_NAME"
+
+# Create project directory
+if [ -d "$PROJECT_NAME" ]; then
+    echo "❌ Directory $PROJECT_NAME already exists"
+    exit 1
+fi
+
+# Copy template files
+echo "📁 Creating project structure..."
+cp -r "$TEMPLATE_DIR" "$PROJECT_NAME"
+cd "$PROJECT_NAME"
+
+# Remove setup script from the new project
+rm -f setup.sh
+
+# Create .env file from example
+if [ -f ".env.example" ]; then
+    cp .env.example .env
+    echo "📝 Created .env file from template"
+fi
+
+# Initialize git repository
+echo "🔧 Initializing git repository..."
+git init
+git add .
+git commit -m "Initial commit: BlueCopa React Dashboard template"
+
+echo "✅ Project setup complete!"
+echo ""
+echo "Next steps:"
+echo "1. cd $PROJECT_NAME"
+echo "2. npm install"
+echo "3. npm run dev"
+echo ""
+echo "🎉 Happy coding with BlueCopa!"

package/templates/basic/src/App.tsx

@@ -0,0 +1,95 @@
+import { reactQuery, ReactQueryDevtools, copaSetConfig } from '@bluecopa/react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Dashboard from './pages/Dashboard';
+import './index.css';
+import { useEffect } from 'react';
+
+const {QueryClient, QueryClientProvider} = reactQuery
+// Create a client
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+  // cacheTime: 1000 * 60 * 10, // 10 minutes (removed, not a valid property)
+    },
+  },
+});
+
+function App() {
+
+  useEffect(() => {
+    let config = {} as any;
+		try {
+			config = JSON.parse(
+				atob(
+					'eyJhY2Nlc3NUb2tlbiI6ImV5SnJhV1FpT2lJd1pHSXpNemRoWXkwek9EVm1MVFJpT0RndFltWm1NQzFrTURJek5HUTFNamMxWlRnaUxDSmhiR2NpT2lKU1V6STFOaUo5LmV5SnpkV0lpT2lJd1ZFOXNiVlZ4ZURCVVMzTmxWRzQ0VnpablZ5SXNJbk4xWW1wbFkzUmZkSGx3WlNJNklsVnpaWElpTENKcGMzTWlPaUpvZEhSd2N6b3ZMMkpzZFdWamIzQmhMbU52YlNJc0lteGhjM1JmYm1GdFpTSTZJblJsYzNScGJtZGtaWFpBWW14MVpXTnZjR0V1WTI5dElpd2lkRzlyWlc1ZmRIbHdaU0k2SWtGalkyVnpjMVJ2YTJWdUlpd2liM0puWDJsa0lqb2lNRlJQYkd4VE9HY3pNa04xYmpoaVdsaDNXR3NpTENKcFpIQmZZV05qWlhOelgzUnZhMlZ1SWpvaU1ERkxORU0wVXpSSFJEWkRVVGhPVFUxR1JsTkJXbFpDUVRnaUxDSmxlSEFpT2pFM05UY3dPVE16T0RJc0ltbGhkQ0k2TVRjMU56QTROakU0TWl3aVptbHljM1JmYm1GdFpTSTZJblJsYzNScGJtZGtaWFpBWW14MVpXTnZjR0V1WTI5dElpd2lhblJwSWpvaU1GVjJkMEZaVUhwTU1VTm5NVlpUUkRKWFNqY2lMQ0psYldGcGJDSTZJblJsYzNScGJtZGtaWFpBWW14MVpXTnZjR0V1WTI5dEluMC51V2p3cHBCeExCNm95Q1JrSVdacUhmNGllTmVGQlFKXzdkRVRpelNCT0lwZUw2N1BKVzE1SUJhZFlPaTBnUm1PS3F2ZTlqXy00a2pUaFhBZnJxSTZ3M01ZUXkxT2pfV09NbS1LdEVNZDFxWDRoQmVhcDZJdWdWOURXNkpuT01lZ19iZUZhU3pfLTNDWWd4dlgxc3hna3BQUm9hZkpvdjZhMXU5VmV2aDlibTdabjFTbzZFeGp6RDZDa2toX0JDbkVyM1hmcWd0TGdvOHRlXzVuVVlFa1ZRdk5TSW9SNFFNWEFCbk9mTDA0WEp2VHBXS05DY1ZGTUJVYkxsNnZHNUpxUEhmbjNzTU5YbTdMTVN3OFdTaWV6elFQa2NnS0hvNy1XRk5HSUZYdmgwRFhtUEwzeloxVkljVE9senAyZWI5NWFiMnBfdEN5NUt0QjhrbFMyUzVheThKLTExcDRfYzlPYkxFZGJoWmZJRWpYbmlNMUhvWmtHcDhTN1VadG5fUDBtcFBYQlRmQVNob29YbEEwaDZqcVg0am5XaktsaDBPY1lNTlRLbWFfYk84Y2lHb2xxdkU0enljaGdZTEs5a2FWN0Jrcm9wbXJpTGlEMnNULU0tMlY5X0ZRbDZRdFdnMnllRl9SSUdqOGl3b194MUFxWjlDWjFTamZVVmFoSDFVWXQ0NlhOWkYyX0pjdnhEZ19tcE9vRU9kbjRQSDJRWlVSZS1xX0ZUdXdmN284TEg2R3IwdmNOWVpVWXBuMTBWaFRPbFFRZWlRYlQycmZySDVhallmaTY1RVBUZFQ2b1RNdjFxalo4ZTRTRzV2SVFsWkRYVW5fUE1GNlgtTk04NDZBWkd3M092TWtGMlNvdFR0S0Fvb1MxX0dMRDExd3ltZWNaSk96c2FyVF96ZyIsInJlZnJlc2hUb2tlbiI6IkFRSUNBSGd5VlBZaGhhUkFnU29PUk5CbjBBR205WmF4WktUakxVNHBXY3NiMGVyU0NRSDJYYm12MHU2Qk5DMVlTUVA3Z0dnOEFBQUIvRENDQWZnR0NTcUdTSWIzRFFFSEJxQ0NBZWt3Z2dIbEFnRUFNSUlCM2dZSktvWklodmNOQVFjQk1CNEdDV0NHU0FGbEF3UUJMakFSQkF6bk9HSGhjOFdKYXpPdUFQc0NBUkNBZ2dHdlBsYnNieEYwVlNSMllVc1F0bWZ5OWdiVmZaS1NTMU04ZUJCaXdjRU9NdjZzS0lZQzFtZGdtM21rZkJWY3pMb0Z0WThYTjIrQlpoREdWN0dBSmkzeDJOZFJKVmpWMHN4MmN4RWlDNmFOZll1cWFHbnFFZW5oN3VycFhIS1dnVjRMcUxLQi9TVmtnV2pNWWxnYjVXY2FOM0ZucjN5d0VEV0psaDRXYjB4NmJjVFFyRTdnb3lpRm9jN3VTb0VkNzh0YkdsdW1GdXNNSXhMTzR2R2x4UG96UThxYS8wSVZ0dThrYUJVamNhbU9uVHQ5UHUvUHBwV0xHeEN1M24xUzVBa21VZmxzRkFvMkNOM3kwNklyb0oxYmdWTEpRdFhZN0dab0VYQjhwWUY1UWpJMUVCZ1BzQ0N1eTZ0VldrMnk3YzRIYzdlUHBiMm9KRVMycE53WEZqNUtZU1MzaC85cVVLM284Z3didHkzeEtac290dGVJc2N3S21hVGJBWitVN2srM2Nkb3dUUVZ1b0tKSk9HeXdEM1piYkNSVkhKYjQrQUZ4aWc0ZG5YUW1PTU5aNTZaeVhQQTFqSmNOc1Izc0pRWWNGWCtQY1lOcXdYRmdYTjl6czZleTkxRU9lcUV1WGNCR2xjMVhSRlBCaEE3bUw2NEQ0VjE5UXVJMm0ySkkybkNwMzh6bmtaMVpDZlhSQnVLdE5HWmpWU2wzMit4N3VjUDlsQ2QxSnlDNzY2YS96TVQ4YjJPeGtPbHdISnVoa2pBPSIsIm9yZ0lkIjoib3JnXzAxR0U2Rzk3RUVaNU5LQlhTV0VZRUdaSEVLIiwiZW1haWwiOiJ0ZXN0aW5nZGV2QGJsdWVjb3BhLmNvbSIsIndvcmtzcGFjZUlkIjoicHJvZCIsInVzZXJJZCI6IjBUT2xtVXF4MFRLc2VUbjhXNmdXIiwidXNlck5hbWUiOiJ0ZXN0aW5nZGV2QGJsdWVjb3BhLmNvbSB0ZXN0aW5nZGV2QGJsdWVjb3BhLmNvbSIsIndlYlVybCI6Imh0dHA6Ly9sb2NhbGhvc3Q6MzAwMC9zZXR0aW5ncy9kZXZpY2VzIiwiZGF0YVBsYW5lIjoiaHR0cHM6Ly9hcGktZGV2ZWxvcC5ibHVlY29wYS5jb20vZGF0YS1wbGFuZS1hcGkiLCJkZngiOiJodHRwczovL2FwaS1kZXZlbG9wLmJsdWVjb3BhLmNvbS9kZngiLCJhdXRoeiI6Imh0dHBzOi8vZGV2YXBpLmJsdWVjb3BhLmNvbS9hdXRoei1hcGkiLCJjb25uZWN0b3JBdXRoeiI6Imh0dHBzOi8vZGV2YXBpLmJsdWVjb3BhLmNvbS9hdXRoei1hcGkifQ=='
+				)
+			);
+		} catch (error) {
+			console.log(error);
+		}
+		copaSetConfig({
+			apiBaseUrl: "http://localhost:3000/api/v1",
+			accessToken: config.accessToken,
+			workspaceId: config.workspaceId
+		});
+  }, []);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Router>
+        <div className="min-h-screen bg-background">
+          <header className="border-b">
+            <div className="container mx-auto px-4 py-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-4">
+                  <h1 className="text-2xl font-bold text-primary">BlueCopa</h1>
+                  <span className="text-sm text-muted-foreground">Analytics Dashboard</span>
+                </div>
+                <nav className="flex items-center space-x-6">
+                  <a href="/" className="text-sm font-medium text-foreground hover:text-primary">
+                    Dashboard
+                  </a>
+                  <a href="/analytics" className="text-sm font-medium text-muted-foreground hover:text-primary">
+                    Analytics
+                  </a>
+                  <a href="/reports" className="text-sm font-medium text-muted-foreground hover:text-primary">
+                    Reports
+                  </a>
+                </nav>
+              </div>
+            </div>
+          </header>
+
+          <main className="container mx-auto px-4 py-8">
+            <Routes>
+              <Route path="/" element={<Dashboard />} />
+              <Route path="/dashboard" element={<Dashboard />} />
+            </Routes>
+          </main>
+
+          <footer className="border-t mt-auto">
+            <div className="container mx-auto px-4 py-6">
+              <div className="flex items-center justify-between">
+                <p className="text-sm text-muted-foreground">
+                  © 2025 BlueCopa. Built with React, TanStack Query, and shadcn/ui.
+                </p>
+                <div className="flex items-center space-x-4">
+                  <a href="#" className="text-sm text-muted-foreground hover:text-primary">
+                    Documentation
+                  </a>
+                  <a href="#" className="text-sm text-muted-foreground hover:text-primary">
+                    Support
+                  </a>
+                </div>
+              </div>
+            </div>
+          </footer>
+        </div>
+      </Router>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
+
+export default App;

package/templates/basic/src/components/dashboard/AdvancedAnalytics.tsx

@@ -0,0 +1,351 @@
+import React, { useMemo } from 'react';
+import { useDatasetSample } from '@bluecopa/react';
+import { ComposedChart, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+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 { RefreshCw, TrendingUp, Calendar, Filter } from 'lucide-react';
+import { format, parseISO } from 'date-fns';
+
+interface AdvancedAnalyticsData {
+  month: string;
+  revenue: number;
+  transactions: number;
+  averageOrderValue: number;
+  onlinePercentage: number;
+}
+
+export const AdvancedAnalytics: React.FC = () => {
+  const {
+    data: datasetData,
+    isLoading,
+    error,
+    refetch
+  } = useDatasetSample("0UvoE3CHwqYqzrbGdgs1_large_transaction_dataset_csv");
+
+  // Process data for advanced analytics
+  const analyticsData = useMemo<AdvancedAnalyticsData[]>(() => {
+    if (!datasetData?.data?.data) return [];
+
+    const transactions = datasetData.data.data;
+
+    // Group by month
+    const monthlyData = new Map<string, {
+      revenue: number;
+      transactions: number;
+      onlineTransactions: number;
+    }>();
+
+    transactions.forEach(transaction => {
+      const date = parseISO(transaction.transaction_day);
+      const monthKey = format(date, 'yyyy-MM');
+
+      if (monthlyData.has(monthKey)) {
+        const existing = monthlyData.get(monthKey)!;
+        existing.revenue += transaction.total_amount;
+        existing.transactions += 1;
+        if (transaction.is_online) {
+          existing.onlineTransactions += 1;
+        }
+      } else {
+        monthlyData.set(monthKey, {
+          revenue: transaction.total_amount,
+          transactions: 1,
+          onlineTransactions: transaction.is_online ? 1 : 0
+        });
+      }
+    });
+
+    // Convert to array and calculate metrics
+    return Array.from(monthlyData.entries())
+      .map(([month, data]) => ({
+        month: format(parseISO(`${month}-01`), 'MMM yyyy'),
+        revenue: Math.round(data.revenue),
+        transactions: data.transactions,
+        averageOrderValue: Math.round(data.revenue / data.transactions),
+        onlinePercentage: Math.round((data.onlineTransactions / data.transactions) * 100)
+      }))
+      .sort((a, b) => a.month.localeCompare(b.month));
+  }, [datasetData]);
+
+  // Calculate growth metrics
+  const growthMetrics = useMemo(() => {
+    if (analyticsData.length < 2) return null;
+
+    const current = analyticsData[analyticsData.length - 1];
+    const previous = analyticsData[analyticsData.length - 2];
+
+    return {
+      revenueGrowth: ((current.revenue - previous.revenue) / previous.revenue) * 100,
+      transactionGrowth: ((current.transactions - previous.transactions) / previous.transactions) * 100,
+      aovGrowth: ((current.averageOrderValue - previous.averageOrderValue) / previous.averageOrderValue) * 100
+    };
+  }, [analyticsData]);
+
+  // Top performing categories
+  const categoryPerformance = useMemo(() => {
+    if (!datasetData?.data?.data) return [];
+
+    const categoryMap = new Map<string, { revenue: number; transactions: number }>();
+
+    datasetData.data.data.forEach(transaction => {
+      const category = transaction.category;
+      if (categoryMap.has(category)) {
+        const existing = categoryMap.get(category)!;
+        existing.revenue += transaction.total_amount;
+        existing.transactions += 1;
+      } else {
+        categoryMap.set(category, {
+          revenue: transaction.total_amount,
+          transactions: 1
+        });
+      }
+    });
+
+    return Array.from(categoryMap.entries())
+      .map(([category, data]) => ({
+        category,
+        revenue: Math.round(data.revenue),
+        transactions: data.transactions,
+        averageOrderValue: Math.round(data.revenue / data.transactions)
+      }))
+      .sort((a, b) => b.revenue - a.revenue)
+      .slice(0, 5);
+  }, [datasetData]);
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        {[1, 2, 3].map((i) => (
+          <Card key={i}>
+            <CardHeader>
+              <div className="h-6 w-48 bg-muted animate-pulse rounded"></div>
+            </CardHeader>
+            <CardContent>
+              <div className="h-64 bg-muted animate-pulse rounded"></div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-red-600">Error Loading Analytics</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground mb-4">
+            Failed to load analytics data. Please try refreshing.
+          </p>
+          <Button onClick={() => refetch()} className="flex items-center gap-2">
+            <RefreshCw className="h-4 w-4" />
+            Retry
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Growth Metrics Header */}
+      {growthMetrics && (
+        <div className="grid gap-4 md:grid-cols-3">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Revenue Growth</CardTitle>
+              <TrendingUp className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className={`text-2xl font-bold ${growthMetrics.revenueGrowth >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+                {growthMetrics.revenueGrowth >= 0 ? '+' : ''}{growthMetrics.revenueGrowth.toFixed(1)}%
+              </div>
+              <p className="text-xs text-muted-foreground">vs previous month</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Transaction Growth</CardTitle>
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className={`text-2xl font-bold ${growthMetrics.transactionGrowth >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+                {growthMetrics.transactionGrowth >= 0 ? '+' : ''}{growthMetrics.transactionGrowth.toFixed(1)}%
+              </div>
+              <p className="text-xs text-muted-foreground">vs previous month</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">AOV Growth</CardTitle>
+              <Filter className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className={`text-2xl font-bold ${growthMetrics.aovGrowth >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+                {growthMetrics.aovGrowth >= 0 ? '+' : ''}{growthMetrics.aovGrowth.toFixed(1)}%
+              </div>
+              <p className="text-xs text-muted-foreground">vs previous month</p>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Advanced Charts */}
+      <Tabs defaultValue="trends" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="trends">Revenue Trends</TabsTrigger>
+          <TabsTrigger value="performance">Category Performance</TabsTrigger>
+          <TabsTrigger value="insights">Business Insights</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="trends" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Revenue & Transaction Trends</CardTitle>
+              <CardDescription>
+                Monthly revenue, transaction count, and average order value over time
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ResponsiveContainer width="100%" height={400}>
+                <ComposedChart data={analyticsData}>
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="month" />
+                  <YAxis yAxisId="left" />
+                  <YAxis yAxisId="right" orientation="right" />
+                  <Tooltip
+                    formatter={(value: number, name: string) => {
+                      if (name === 'revenue') return [`₹${value.toLocaleString()}`, 'Revenue'];
+                      if (name === 'averageOrderValue') return [`₹${value}`, 'AOV'];
+                      if (name === 'onlinePercentage') return [`${value}%`, 'Online %'];
+                      return [value, name];
+                    }}
+                  />
+                  <Legend />
+                  <Bar yAxisId="left" dataKey="revenue" fill="#8884d8" name="Revenue" />
+                  <Line yAxisId="right" type="monotone" dataKey="averageOrderValue" stroke="#82ca9d" name="Average Order Value" />
+                  <Line yAxisId="right" type="monotone" dataKey="onlinePercentage" stroke="#ffc658" name="Online %" />
+                </ComposedChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="performance" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Top Performing Categories</CardTitle>
+              <CardDescription>
+                Revenue and transaction metrics by product category
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {categoryPerformance.map((category, index) => (
+                  <div key={category.category} className="flex items-center justify-between p-4 border rounded-lg">
+                    <div className="flex items-center space-x-4">
+                      <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
+                        <span className="text-sm font-bold text-primary">#{index + 1}</span>
+                      </div>
+                      <div>
+                        <h4 className="font-medium">{category.category}</h4>
+                        <p className="text-sm text-muted-foreground">
+                          {category.transactions} transactions
+                        </p>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <div className="font-bold">₹{category.revenue.toLocaleString()}</div>
+                      <div className="text-sm text-muted-foreground">
+                        ₹{category.averageOrderValue} AOV
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="insights" className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle>Key Insights</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex items-start space-x-3">
+                  <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
+                  <div>
+                    <h4 className="font-medium">Strong Online Growth</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Online transactions showing consistent upward trend across all categories
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-start space-x-3">
+                  <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
+                  <div>
+                    <h4 className="font-medium">Electronics Leading</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Electronics category driving highest revenue with premium pricing
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-start space-x-3">
+                  <div className="w-2 h-2 bg-yellow-500 rounded-full mt-2"></div>
+                  <div>
+                    <h4 className="font-medium">Seasonal Patterns</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Clear seasonal trends visible in transaction volume and AOV
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Recommendations</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex items-start space-x-3">
+                  <div className="w-2 h-2 bg-purple-500 rounded-full mt-2"></div>
+                  <div>
+                    <h4 className="font-medium">Optimize Mobile Experience</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Focus on mobile app optimization to capture growing online segment
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-start space-x-3">
+                  <div className="w-2 h-2 bg-orange-500 rounded-full mt-2"></div>
+                  <div>
+                    <h4 className="font-medium">Category Expansion</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Consider expanding grocery and furniture offerings
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-start space-x-3">
+                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
+                  <div>
+                    <h4 className="font-medium">Payment Incentives</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Promote UPI payments with targeted incentives
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};