create-bluecopa-react-app 1.0.0

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

@@ -0,0 +1,53 @@
+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/index.css

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.75rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 94.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/basic/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/templates/basic/src/main.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

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

@@ -0,0 +1,135 @@
+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/src/types/index.ts

@@ -0,0 +1,94 @@
+// Transaction Data Types based on BlueCopa dataset
+export interface TransactionRecord {
+  transaction_id: string;
+  transaction_day: string;
+  payment_end: string;
+  city_id: string;
+  city: string;
+  state: string;
+  product_id: string;
+  category: string;
+  sub_categories: string;
+  quantity: number;
+  unit_price: number;
+  total_amount: number;
+  is_online: boolean;
+  payment_method: string;
+  is_weekend: boolean;
+  is_holiday: boolean;
+  is_working_day: boolean;
+  channel: string;
+  delivery_partner: string | null;
+  copa_uploaded_at: string;
+  copa_source_name: string;
+}
+
+export interface DatasetResponse {
+  data: {
+    schema: Array<{
+      name: string;
+      data_type: string;
+    }>;
+    data: TransactionRecord[];
+  };
+}
+
+export interface MetricResponse {
+  data: Array<{
+    TotalAmount: number;
+  }>;
+}
+
+export interface User {
+  email: string;
+  firstName: string;
+  lastName: string;
+  externalId: string;
+  metadata: Record<string, any>;
+  organizationExternalId: string;
+  active: boolean;
+  createdBy: string | null;
+  createdDate: string | null;
+  lastModifiedBy: string | null;
+  lastModifiedDate: string | null;
+  id: string;
+  entityVersion: number;
+  organizationId: string;
+}
+
+export interface Organization {
+  name: string;
+  externalId: string;
+  active: boolean;
+  createdBy: string | null;
+  createdDate: string | null;
+  lastModifiedBy: string | null;
+  lastModifiedDate: string | null;
+  id: string;
+  entityVersion: number;
+}
+
+export interface UserResponse {
+  user: User;
+  organization: Organization;
+}
+
+// Chart data types
+export interface CategorySalesData {
+  category: string;
+  totalSales: number;
+  quantity: number;
+}
+
+export interface PaymentMethodData {
+  paymentMethod: string;
+  count: number;
+  totalAmount: number;
+}
+
+export interface StateAnalytics {
+  state: string;
+  totalTransactions: number;
+  totalAmount: number;
+  averageOrderValue: number;
+}

package/templates/basic/tailwind.config.js

@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}

package/templates/basic/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/basic/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/basic/vite.config.ts

@@ -0,0 +1,13 @@
+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"),
+    },
+  },
+})