create-bluecopa-react-app 1.0.0 → 1.0.1

package/templates/basic/setup.sh

@@ -1,46 +0,0 @@
-#!/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

@@ -1,95 +0,0 @@
-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

@@ -1,351 +0,0 @@
-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>
-  );
-};

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

@@ -1,150 +0,0 @@
-import React from 'react';
-import { useMetric, useDatasetSample } from '@bluecopa/react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { RefreshCw, TrendingUp, Package, CreditCard, Users } from 'lucide-react';
-
-interface MetricCardProps {
-  title: string;
-  value: string | number;
-  description?: string;
-  icon?: React.ReactNode;
-  trend?: {
-    value: number;
-    isPositive: boolean;
-  };
-}
-
-const MetricCard: React.FC<MetricCardProps> = ({ title, value, description, icon, trend }) => {
-  return (
-    <Card>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">{title}</CardTitle>
-        {icon}
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">{typeof value === 'number' ? value.toLocaleString() : value}</div>
-        {description && (
-          <p className="text-xs text-muted-foreground">{description}</p>
-        )}
-        {trend && (
-          <div className={`flex items-center text-xs ${trend.isPositive ? 'text-green-600' : 'text-red-600'}`}>
-            <TrendingUp className="mr-1 h-3 w-3" />
-            {trend.isPositive ? '+' : ''}{trend.value}% from last month
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};
-
-export const MetricsOverview: React.FC = () => {
-  const {
-    data: metricData,
-    isLoading: metricLoading,
-    error: metricError,
-    refetch: refetchMetric
-  } = useMetric("0UbwCn75pym1N47D89uS");
-
-  const {
-    data: datasetData,
-    isLoading: datasetLoading,
-    error: datasetError,
-  } = useDatasetSample("0UvoE3CHwqYqzrbGdgs1_large_transaction_dataset_csv");
-
-  // Calculate metrics from transaction data
-  const calculateMetrics = () => {
-    if (!datasetData?.data?.data) return null;
-
-    const transactions = datasetData.data.data;
-    const totalTransactions = transactions.length;
-    const totalRevenue = transactions.reduce((sum, t) => sum + t.total_amount, 0);
-    const avgOrderValue = totalRevenue / totalTransactions;
-    const uniqueProducts = new Set(transactions.map(t => t.product_id)).size;
-
-    return {
-      totalTransactions,
-      totalRevenue,
-      avgOrderValue,
-      uniqueProducts
-    };
-  };
-
-  const metrics = calculateMetrics();
-
-  if (metricLoading || datasetLoading) {
-    return (
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        {[1, 2, 3, 4].map((i) => (
-          <Card key={i}>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <div className="h-4 w-20 bg-muted animate-pulse rounded"></div>
-              <div className="h-4 w-4 bg-muted animate-pulse rounded"></div>
-            </CardHeader>
-            <CardContent>
-              <div className="h-8 w-24 bg-muted animate-pulse rounded mb-2"></div>
-              <div className="h-3 w-32 bg-muted animate-pulse rounded"></div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    );
-  }
-
-  if (metricError || datasetError) {
-    return (
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <Card className="md:col-span-2 lg:col-span-4">
-          <CardHeader>
-            <CardTitle className="text-red-600">Error Loading Metrics</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-muted-foreground mb-4">
-              Failed to load dashboard metrics. Please try refreshing.
-            </p>
-            <Button onClick={() => refetchMetric()} className="flex items-center gap-2">
-              <RefreshCw className="h-4 w-4" />
-              Retry
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-      <MetricCard
-        title="Total Revenue"
-        value={`₹${metricData?.data[0]?.TotalAmount?.toLocaleString() || 0}`}
-        description="Total amount from all transactions"
-        icon={<TrendingUp className="h-4 w-4 text-muted-foreground" />}
-        trend={{ value: 12.5, isPositive: true }}
-      />
-
-      <MetricCard
-        title="Total Transactions"
-        value={metrics?.totalTransactions || 0}
-        description="Number of completed transactions"
-        icon={<CreditCard className="h-4 w-4 text-muted-foreground" />}
-        trend={{ value: 8.2, isPositive: true }}
-      />
-
-      <MetricCard
-        title="Average Order Value"
-        value={`₹${metrics?.avgOrderValue?.toFixed(2) || 0}`}
-        description="Average transaction amount"
-        icon={<Package className="h-4 w-4 text-muted-foreground" />}
-        trend={{ value: -2.1, isPositive: false }}
-      />
-
-      <MetricCard
-        title="Unique Products"
-        value={metrics?.uniqueProducts || 0}
-        description="Number of different products sold"
-        icon={<Users className="h-4 w-4 text-muted-foreground" />}
-        trend={{ value: 5.7, isPositive: true }}
-      />
-    </div>
-  );
-};