create-bluecopa-react-app 1.0.0

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

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

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

@@ -0,0 +1,215 @@
+import React from 'react';
+import { useDatasetSample } from '@bluecopa/react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, LineChart, Line } from 'recharts';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { CategorySalesData, PaymentMethodData, StateAnalytics } from '@/types';
+
+const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8', '#82CA9D'];
+
+export const TransactionCharts: React.FC = () => {
+  const {
+    data: datasetData,
+    isLoading,
+    error,
+  } = useDatasetSample("0UvoE3CHwqYqzrbGdgs1_large_transaction_dataset_csv");
+
+  // Process data for charts
+  const processChartData = () => {
+    if (!datasetData?.data?.data) return { categoryData: [], paymentData: [], stateData: [] };
+
+    const transactions = datasetData.data.data;
+
+    // Category sales data
+    const categoryMap = new Map<string, CategorySalesData>();
+    transactions.forEach(transaction => {
+      const category = transaction.category;
+      if (categoryMap.has(category)) {
+        const existing = categoryMap.get(category)!;
+        existing.totalSales += transaction.total_amount;
+        existing.quantity += transaction.quantity;
+      } else {
+        categoryMap.set(category, {
+          category,
+          totalSales: transaction.total_amount,
+          quantity: transaction.quantity
+        });
+      }
+    });
+
+    // Payment method data
+    const paymentMap = new Map<string, PaymentMethodData>();
+    transactions.forEach(transaction => {
+      const method = transaction.payment_method;
+      if (paymentMap.has(method)) {
+        const existing = paymentMap.get(method)!;
+        existing.count += 1;
+        existing.totalAmount += transaction.total_amount;
+      } else {
+        paymentMap.set(method, {
+          paymentMethod: method,
+          count: 1,
+          totalAmount: transaction.total_amount
+        });
+      }
+    });
+
+    // State analytics data
+    const stateMap = new Map<string, StateAnalytics>();
+    transactions.forEach(transaction => {
+      const state = transaction.state;
+      if (stateMap.has(state)) {
+        const existing = stateMap.get(state)!;
+        existing.totalTransactions += 1;
+        existing.totalAmount += transaction.total_amount;
+        existing.averageOrderValue = existing.totalAmount / existing.totalTransactions;
+      } else {
+        stateMap.set(state, {
+          state,
+          totalTransactions: 1,
+          totalAmount: transaction.total_amount,
+          averageOrderValue: transaction.total_amount
+        });
+      }
+    });
+
+    return {
+      categoryData: Array.from(categoryMap.values()).sort((a, b) => b.totalSales - a.totalSales),
+      paymentData: Array.from(paymentMap.values()).sort((a, b) => b.count - a.count),
+      stateData: Array.from(stateMap.values()).sort((a, b) => b.totalAmount - a.totalAmount)
+    };
+  };
+
+  if (isLoading) {
+    return (
+      <div className="grid gap-4 md:grid-cols-2">
+        {[1, 2, 3, 4].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 Charts</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground">Failed to load chart data. Please try refreshing the page.</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const { categoryData, paymentData, stateData } = processChartData();
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2">
+      {/* Category Sales Chart */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Sales by Category</CardTitle>
+          <CardDescription>Revenue distribution across product categories</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={300}>
+            <BarChart data={categoryData}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="category" />
+              <YAxis />
+              <Tooltip
+                formatter={(value: number, name: string) => [
+                  `₹${value.toLocaleString()}`,
+                  name === 'totalSales' ? 'Total Sales' : name
+                ]}
+              />
+              <Bar dataKey="totalSales" fill="#8884d8" />
+            </BarChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      {/* Payment Method Distribution */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Payment Method Distribution</CardTitle>
+          <CardDescription>Transaction count by payment method</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={300}>
+            <PieChart>
+              <Pie
+                data={paymentData}
+                cx="50%"
+                cy="50%"
+                labelLine={false}
+                label={({ paymentMethod, percent }: any) => `${paymentMethod} ${(percent * 100).toFixed(0)}%`}
+                outerRadius={80}
+                fill="#8884d8"
+                dataKey="count"
+              >
+                {paymentData.map((_, index) => (
+                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                ))}
+              </Pie>
+              <Tooltip formatter={(value: number) => [value, 'Transactions']} />
+            </PieChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      {/* State Analytics */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Revenue by State</CardTitle>
+          <CardDescription>Total revenue and transaction count by state</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={300}>
+            <BarChart data={stateData}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="state" />
+              <YAxis />
+              <Tooltip
+                formatter={(value: number, name: string) => [
+                  name === 'totalAmount' ? `₹${value.toLocaleString()}` : value,
+                  name === 'totalAmount' ? 'Total Revenue' : 'Transactions'
+                ]}
+              />
+              <Bar dataKey="totalAmount" fill="#82ca9d" />
+            </BarChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      {/* Average Order Value Trend */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Average Order Value by State</CardTitle>
+          <CardDescription>AOV comparison across different states</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={300}>
+            <LineChart data={stateData}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="state" />
+              <YAxis />
+              <Tooltip
+                formatter={(value: number) => [`₹${value.toFixed(2)}`, 'Average Order Value']}
+              />
+              <Line type="monotone" dataKey="averageOrderValue" stroke="#8884d8" strokeWidth={2} />
+            </LineChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

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

@@ -0,0 +1,172 @@
+import React from 'react';
+import { useDatasetSample } from '@bluecopa/react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { RefreshCw, Search, Filter } from 'lucide-react';
+
+export const TransactionTable: React.FC = () => {
+  const {
+    data: datasetData,
+    isLoading,
+    error,
+    refetch
+  } = useDatasetSample("0UvoE3CHwqYqzrbGdgs1_large_transaction_dataset_csv");
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('en-IN', {
+      style: 'currency',
+      currency: 'INR',
+    }).format(amount);
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-IN');
+  };
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="h-6 w-48 bg-muted animate-pulse rounded mb-2"></div>
+              <div className="h-4 w-64 bg-muted animate-pulse rounded"></div>
+            </div>
+            <div className="h-10 w-24 bg-muted animate-pulse rounded"></div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {[1, 2, 3, 4, 5].map((i) => (
+              <div key={i} className="flex items-center space-x-4">
+                <div className="h-4 w-20 bg-muted animate-pulse rounded"></div>
+                <div className="h-4 w-32 bg-muted animate-pulse rounded"></div>
+                <div className="h-4 w-24 bg-muted animate-pulse rounded"></div>
+                <div className="h-4 w-28 bg-muted animate-pulse rounded"></div>
+                <div className="h-4 w-20 bg-muted animate-pulse rounded"></div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-red-600">Error Loading Transaction Data</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground mb-4">
+            Failed to load transaction data. Please try refreshing.
+          </p>
+          <Button onClick={() => refetch()} className="flex items-center gap-2">
+            <RefreshCw className="h-4 w-4" />
+            Retry
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const transactions = datasetData?.data?.data || [];
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Transaction Data</CardTitle>
+            <CardDescription>
+              Recent transactions from the BlueCopa dataset ({transactions.length} records)
+            </CardDescription>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" className="flex items-center gap-2">
+              <Search className="h-4 w-4" />
+              Search
+            </Button>
+            <Button variant="outline" size="sm" className="flex items-center gap-2">
+              <Filter className="h-4 w-4" />
+              Filter
+            </Button>
+            <Button onClick={() => refetch()} size="sm" className="flex items-center gap-2">
+              <RefreshCw className="h-4 w-4" />
+              Refresh
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse">
+            <thead>
+              <tr className="border-b">
+                <th className="text-left p-2 font-medium">Transaction ID</th>
+                <th className="text-left p-2 font-medium">Date</th>
+                <th className="text-left p-2 font-medium">City</th>
+                <th className="text-left p-2 font-medium">Category</th>
+                <th className="text-left p-2 font-medium">Product</th>
+                <th className="text-left p-2 font-medium">Quantity</th>
+                <th className="text-left p-2 font-medium">Unit Price</th>
+                <th className="text-left p-2 font-medium">Total Amount</th>
+                <th className="text-left p-2 font-medium">Payment Method</th>
+                <th className="text-left p-2 font-medium">Channel</th>
+                <th className="text-left p-2 font-medium">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {transactions.slice(0, 10).map((transaction, index) => (
+                <tr key={transaction.transaction_id} className={index % 2 === 0 ? 'bg-muted/50' : ''}>
+                  <td className="p-2 font-mono text-sm">{transaction.transaction_id}</td>
+                  <td className="p-2">{formatDate(transaction.transaction_day)}</td>
+                  <td className="p-2">{transaction.city}</td>
+                  <td className="p-2">
+                    <span className="inline-flex items-center px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-800">
+                      {transaction.category}
+                    </span>
+                  </td>
+                  <td className="p-2 font-mono text-sm">{transaction.product_id}</td>
+                  <td className="p-2 text-center">{transaction.quantity}</td>
+                  <td className="p-2">{formatCurrency(transaction.unit_price)}</td>
+                  <td className="p-2 font-semibold">{formatCurrency(transaction.total_amount)}</td>
+                  <td className="p-2">
+                    <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
+                      transaction.payment_method === 'Credit Card' ? 'bg-green-100 text-green-800' :
+                      transaction.payment_method === 'Debit Card' ? 'bg-yellow-100 text-yellow-800' :
+                      transaction.payment_method === 'UPI' ? 'bg-purple-100 text-purple-800' :
+                      'bg-gray-100 text-gray-800'
+                    }`}>
+                      {transaction.payment_method}
+                    </span>
+                  </td>
+                  <td className="p-2">{transaction.channel}</td>
+                  <td className="p-2">
+                    <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
+                      transaction.is_online ? 'bg-green-100 text-green-800' : 'bg-orange-100 text-orange-800'
+                    }`}>
+                      {transaction.is_online ? 'Online' : 'Offline'}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          {transactions.length > 10 && (
+            <div className="mt-4 text-center">
+              <p className="text-muted-foreground text-sm">
+                Showing 10 of {transactions.length} transactions
+              </p>
+              <Button variant="outline" className="mt-2">
+                View All Transactions
+              </Button>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

package/templates/basic/src/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  // Removed unused variable 'Comp'
+    if (asChild) {
+      // Only pass className and children to slot, not button-specific props
+      const { children } = props;
+      return (
+        <slot className={cn(buttonVariants({ variant, size, className }))}>
+          {children}
+        </slot>
+      );
+    }
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/templates/basic/src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }