create-bluecopa-react-app 1.0.0 → 1.0.2

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

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

@@ -1,172 +0,0 @@
-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/tabs.tsx

@@ -1,53 +0,0 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-
-import { cn } from "@/lib/utils"
-
-const Tabs = TabsPrimitive.Root
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    )}
-    {...props}
-  />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }

package/templates/basic/src/pages/Dashboard.tsx

@@ -1,135 +0,0 @@
-import React from 'react';
-import { useUser } from '@bluecopa/react';
-import { MetricsOverview } from '@/components/dashboard/MetricsOverview';
-import { TransactionCharts } from '@/components/dashboard/TransactionCharts';
-import { TransactionTable } from '@/components/dashboard/TransactionTable';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { RefreshCw, User, Building } from 'lucide-react';
-
-const Dashboard: React.FC = () => {
-  const {
-    data: userData,
-    isLoading: userLoading,
-    error: userError,
-    refetch: refetchUser
-  } = useUser();
-
-  return (
-    <div className="space-y-8">
-      {/* Header Section */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
-          <p className="text-muted-foreground">
-            Welcome to your BlueCopa analytics dashboard
-          </p>
-        </div>
-        <Button onClick={() => refetchUser()} className="flex items-center gap-2">
-          <RefreshCw className="h-4 w-4" />
-          Refresh All
-        </Button>
-      </div>
-
-      {/* User Info Section */}
-      {userLoading ? (
-        <Card>
-          <CardHeader>
-            <div className="flex items-center space-x-4">
-              <div className="h-12 w-12 bg-muted animate-pulse rounded-full"></div>
-              <div>
-                <div className="h-5 w-48 bg-muted animate-pulse rounded mb-2"></div>
-                <div className="h-4 w-32 bg-muted animate-pulse rounded"></div>
-              </div>
-            </div>
-          </CardHeader>
-        </Card>
-      ) : userError ? (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-red-600">Error Loading User Data</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-muted-foreground">Failed to load user information.</p>
-          </CardContent>
-        </Card>
-      ) : userData ? (
-        <Card>
-          <CardHeader>
-            <div className="flex items-center space-x-4">
-              <div className="h-12 w-12 bg-primary/10 rounded-full flex items-center justify-center">
-                <User className="h-6 w-6 text-primary" />
-              </div>
-              <div>
-                <CardTitle className="text-xl">
-                  {userData.user.firstName} {userData.user.lastName}
-                </CardTitle>
-                <CardDescription className="flex items-center gap-2">
-                  <Building className="h-4 w-4" />
-                  {userData.organization.name} • {userData.user.email}
-                </CardDescription>
-              </div>
-            </div>
-          </CardHeader>
-        </Card>
-      ) : null}
-
-      {/* Query States Overview */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Copa-lib Demo with TanStack Query</CardTitle>
-          <CardDescription>
-            Query States Overview - Real-time data fetching status
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="grid gap-4 md:grid-cols-3">
-            <div className="space-y-2">
-              <h4 className="font-medium">User Query</h4>
-              <div className="flex items-center gap-2">
-                <div className={`h-2 w-2 rounded-full ${userLoading ? 'bg-yellow-500' : userError ? 'bg-red-500' : 'bg-green-500'}`}></div>
-                <span className="text-sm text-muted-foreground">
-                  {userLoading ? 'Loading...' : userError ? 'Error' : 'Success'}
-                </span>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <h4 className="font-medium">Metrics Query</h4>
-              <div className="flex items-center gap-2">
-                <div className="h-2 w-2 rounded-full bg-green-500"></div>
-                <span className="text-sm text-muted-foreground">Success</span>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <h4 className="font-medium">Dataset Query</h4>
-              <div className="flex items-center gap-2">
-                <div className="h-2 w-2 rounded-full bg-green-500"></div>
-                <span className="text-sm text-muted-foreground">Success</span>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Metrics Overview */}
-      <div>
-        <h2 className="text-2xl font-semibold mb-6">Key Metrics</h2>
-        <MetricsOverview />
-      </div>
-
-      {/* Charts Section */}
-      <div>
-        <h2 className="text-2xl font-semibold mb-6">Analytics Charts</h2>
-        <TransactionCharts />
-      </div>
-
-      {/* Transaction Table */}
-      <div>
-        <h2 className="text-2xl font-semibold mb-6">Transaction Data</h2>
-        <TransactionTable />
-      </div>
-    </div>
-  );
-};
-
-export default Dashboard;

package/templates/basic/vite.config.ts

@@ -1,13 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import path from 'path'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-})