create-bluecopa-react-app 1.0.3 → 1.0.5

package/templates/latest/src/components/page/dashboard/dashboard-utils.ts

@@ -0,0 +1,147 @@
+// Helper function to render query state
+export const renderQueryState = (query: any, title: string) => {
+  if (query.isLoading) {
+    return {
+      status: 'loading',
+      message: `${title}: Loading...`
+    };
+  }
+  
+  if (query.isError) {
+    return {
+      status: 'error',
+      message: `${title}: Error`
+    };
+  }
+  
+  if (query.isSuccess) {
+    return {
+      status: 'success',
+      message: `${title}: Success`
+    };
+  }
+  
+  return {
+    status: 'idle',
+    message: `${title}: Idle`
+  };
+};
+
+// Process data for ecommerce metrics and charts
+export const processOrderData = (rawData: any[]) => {
+  return rawData.reduce((acc: any, transaction: any) => {
+    const existing = acc.find((item: any) => item.category === transaction.category);
+    if (existing) {
+      existing.total += transaction.total_amount;
+      existing.count += 1;
+    } else {
+      acc.push({
+        category: transaction.category,
+        total: transaction.total_amount,
+        count: 1
+      });
+    }
+    return acc;
+  }, []);
+};
+
+export const processPaymentMethodData = (rawData: any[]) => {
+  return rawData.reduce((acc: any, transaction: any) => {
+    const existing = acc.find((item: any) => item.method === transaction.payment_method);
+    if (existing) {
+      existing.total += transaction.total_amount;
+      existing.count += 1;
+    } else {
+      acc.push({
+        method: transaction.payment_method,
+        total: transaction.total_amount,
+        count: 1
+      });
+    }
+    return acc;
+  }, []);
+};
+
+export const processMonthlyRevenueData = (rawData: any[]) => {
+  return rawData.reduce((acc: any, transaction: any) => {
+    if (!transaction.transaction_date) return acc;
+    
+    const date = new Date(transaction.transaction_date);
+    const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+    
+    const existing = acc.find((item: any) => item.month === monthKey);
+    if (existing) {
+      existing.revenue += transaction.total_amount;
+      existing.orders += 1;
+    } else {
+      acc.push({
+        month: monthKey,
+        revenue: transaction.total_amount,
+        orders: 1
+      });
+    }
+    return acc;
+  }, []).sort((a: any, b: any) => a.month.localeCompare(b.month));
+};
+
+export const processRecentTransactions = (rawData: any[]) => {
+  return rawData
+    .slice(0, 10)
+    .map((transaction: any) => ({
+      id: transaction.transaction_id,
+      customer: transaction.customer_name || 'N/A',
+      amount: transaction.total_amount,
+      category: transaction.category,
+      payment_method: transaction.payment_method,
+      date: transaction.transaction_date ? new Date(transaction.transaction_date).toLocaleDateString() : 'N/A'
+    }));
+};
+
+export const calculateMetrics = (rawData: any[]) => {
+  const totalOrders = rawData.length || 0;
+  const totalRevenue = rawData.reduce((sum: number, t: any) => sum + t.total_amount, 0);
+  const averageOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0;
+  
+  return {
+    totalOrders,
+    totalRevenue,
+    averageOrderValue
+  };
+};
+
+export const createEcommerceMetrics = (totalRevenue: number, totalOrders: number, averageOrderValue: number) => {
+  return [
+    {
+      title: 'Total Revenue',
+      value: `$${totalRevenue.toLocaleString()}`,
+      change: '+12.5%',
+      trend: 'up' as const,
+      icon: 'DollarSign',
+      color: 'text-green-600'
+    },
+    {
+      title: 'Orders',
+      value: totalOrders.toLocaleString(),
+      change: '+8.2%',
+      trend: 'up' as const,
+      icon: 'ShoppingCart',
+      color: 'text-blue-600'
+    },
+    {
+      title: 'Average Order Value',
+      value: `$${averageOrderValue.toFixed(2)}`,
+      change: '+3.1%',
+      trend: 'up' as const,
+      icon: 'TrendingUp',
+      color: 'text-purple-600'
+    },
+    {
+      title: 'Total Customers',
+      value: '2,847',
+      change: '+15.3%',
+      trend: 'up' as const,
+      icon: 'Users',
+      color: 'text-orange-600'
+    }
+  ];
+};

package/templates/latest/src/components/page/dashboard/dashboard.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { useMetricDataDemo, useDatasetDataDemo, useUserData } from '@/hooks/use-api'
+import {
+  RefreshCw,
+  Loader2,
+  AlertCircle,
+  CheckCircle,
+  Clock
+} from 'lucide-react'
+import { DashboardMetrics } from './DashboardMetrics'
+import { SalesAnalytics } from './SalesAnalytics'
+import { PaymentMethodsAnalysis } from './PaymentMethodsAnalysis'
+import { TransactionsTable } from './TransactionsTable'
+import { RevenueAnalytics } from './RevenueAnalytics'
+import {
+  processOrderData,
+  processPaymentMethodData,
+  processMonthlyRevenueData,
+  processRecentTransactions,
+  calculateMetrics,
+  createEcommerceMetrics,
+  renderQueryState as renderQueryStateUtil
+} from './dashboard-utils'
+
+
+export default function Dashboard() {
+  const metricQuery = useMetricDataDemo()
+  const datasetQuery = useDatasetDataDemo()
+  const userQuery = useUserData()
+
+  // Process data for ecommerce metrics and charts
+  const rawApiData = datasetQuery.data?.data?.data || []
+  
+  // Fallback sample data when API returns empty data
+  const sampleTransactionData = [
+    { transaction_id: '001', customer_name: 'John Doe', total_amount: 1250, category: 'Electronics', payment_method: 'Credit Card', transaction_date: '2024-01-15', state: 'CA' },
+    { transaction_id: '002', customer_name: 'Jane Smith', total_amount: 780, category: 'Clothing', payment_method: 'PayPal', transaction_date: '2024-01-18', state: 'NY' },
+    { transaction_id: '003', customer_name: 'Mike Johnson', total_amount: 2100, category: 'Electronics', payment_method: 'Credit Card', transaction_date: '2024-02-02', state: 'TX' },
+    { transaction_id: '004', customer_name: 'Sarah Wilson', total_amount: 450, category: 'Books', payment_method: 'Debit Card', transaction_date: '2024-02-05', state: 'FL' },
+    { transaction_id: '005', customer_name: 'David Brown', total_amount: 890, category: 'Sports', payment_method: 'Credit Card', transaction_date: '2024-02-10', state: 'CA' },
+    { transaction_id: '006', customer_name: 'Lisa Garcia', total_amount: 1650, category: 'Electronics', payment_method: 'PayPal', transaction_date: '2024-02-15', state: 'WA' },
+    { transaction_id: '007', customer_name: 'Robert Lee', total_amount: 320, category: 'Books', payment_method: 'Cash', transaction_date: '2024-02-20', state: 'OR' },
+    { transaction_id: '008', customer_name: 'Emily Davis', total_amount: 950, category: 'Clothing', payment_method: 'Credit Card', transaction_date: '2024-03-01', state: 'NY' },
+    { transaction_id: '009', customer_name: 'Alex Rodriguez', total_amount: 1480, category: 'Sports', payment_method: 'Debit Card', transaction_date: '2024-03-05', state: 'TX' },
+    { transaction_id: '010', customer_name: 'Maria Martinez', total_amount: 670, category: 'Beauty', payment_method: 'PayPal', transaction_date: '2024-03-08', state: 'FL' },
+    { transaction_id: '011', customer_name: 'Chris Anderson', total_amount: 2200, category: 'Electronics', payment_method: 'Credit Card', transaction_date: '2024-03-12', state: 'CA' },
+    { transaction_id: '012', customer_name: 'Amanda White', total_amount: 520, category: 'Clothing', payment_method: 'Debit Card', transaction_date: '2024-03-15', state: 'WA' },
+    { transaction_id: '013', customer_name: 'James Taylor', total_amount: 1100, category: 'Sports', payment_method: 'Credit Card', transaction_date: '2024-03-18', state: 'OR' },
+    { transaction_id: '014', customer_name: 'Jennifer Moore', total_amount: 380, category: 'Books', payment_method: 'Cash', transaction_date: '2024-03-22', state: 'NY' },
+    { transaction_id: '015', customer_name: 'Kevin Jackson', total_amount: 1850, category: 'Electronics', payment_method: 'PayPal', transaction_date: '2024-03-25', state: 'TX' },
+    { transaction_id: '016', customer_name: 'Nicole Thompson', total_amount: 760, category: 'Beauty', payment_method: 'Credit Card', transaction_date: '2024-04-01', state: 'FL' },
+    { transaction_id: '017', customer_name: 'Brian Wilson', total_amount: 1320, category: 'Sports', payment_method: 'Debit Card', transaction_date: '2024-04-05', state: 'CA' },
+    { transaction_id: '018', customer_name: 'Jessica Clark', total_amount: 590, category: 'Clothing', payment_method: 'Credit Card', transaction_date: '2024-04-08', state: 'WA' },
+    { transaction_id: '019', customer_name: 'Michael Lewis', total_amount: 2400, category: 'Electronics', payment_method: 'PayPal', transaction_date: '2024-04-12', state: 'OR' },
+    { transaction_id: '020', customer_name: 'Ashley Hall', total_amount: 450, category: 'Books', payment_method: 'Cash', transaction_date: '2024-04-15', state: 'NY' }
+  ]
+  
+  // Use real data if available, otherwise use sample data
+  const rawData = rawApiData.length > 0 ? rawApiData : sampleTransactionData
+  
+  const orderData = processOrderData(rawData)
+  const paymentMethodData = processPaymentMethodData(rawData)
+  const monthlyRevenueData = processMonthlyRevenueData(rawData)
+  const recentTransactions = processRecentTransactions(rawData)
+  const { totalOrders, totalRevenue, averageOrderValue } = calculateMetrics(rawData)
+  const ecommerceMetrics = createEcommerceMetrics(totalRevenue, totalOrders, averageOrderValue)
+
+  // Helper function to render query state
+  const renderQueryState = (query: any, title: string) => {
+    const result = renderQueryStateUtil(query, title)
+    
+    if (result.status === 'loading') {
+      return (
+        <div className="flex items-center gap-2 text-blue-600">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <span className="text-sm">{result.message}</span>
+        </div>
+      )
+    }
+    
+    if (result.status === 'error') {
+      return (
+        <div className="flex items-center gap-2 text-red-600">
+          <AlertCircle className="h-4 w-4" />
+          <span className="text-sm">{result.message}</span>
+        </div>
+      )
+    }
+    
+    if (result.status === 'success') {
+      return (
+        <div className="flex items-center gap-2 text-green-600">
+          <CheckCircle className="h-4 w-4" />
+          <span className="text-sm">{result.message}</span>
+        </div>
+      )
+    }
+
+    return (
+      <div className="flex items-center gap-2 text-gray-500">
+        <Clock className="h-4 w-4" />
+        <span className="text-sm">{result.message}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* API Status */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          {renderQueryState(metricQuery, 'Metrics API')}
+          {renderQueryState(datasetQuery, 'Dataset API')}
+          {renderQueryState(userQuery, 'User API')}
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            metricQuery.refetch()
+            datasetQuery.refetch()
+            userQuery.refetch()
+          }}
+          disabled={metricQuery.isLoading || datasetQuery.isLoading || userQuery.isLoading || 
+                   metricQuery.isFetching || datasetQuery.isFetching || userQuery.isFetching}
+        >
+          {(metricQuery.isFetching || datasetQuery.isFetching || userQuery.isFetching) ? (
+            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+          ) : (
+            <RefreshCw className="h-4 w-4 mr-2" />
+          )}
+          Refresh Data
+        </Button>
+      </div>
+
+      {/* Key Metrics */}
+      <DashboardMetrics
+        ecommerceMetrics={ecommerceMetrics}
+        monthlyRevenueData={monthlyRevenueData}
+      />
+
+      {/* Sales Analytics */}
+      <SalesAnalytics
+        orderData={orderData}
+        totalOrders={totalOrders}
+        totalRevenue={totalRevenue}
+        averageOrderValue={averageOrderValue}
+      />
+
+      {/* Payment Methods Analysis */}
+      <PaymentMethodsAnalysis
+        paymentMethodData={paymentMethodData}
+      />
+
+      {/* Recent Transactions */}
+      <TransactionsTable
+        recentTransactions={recentTransactions}
+        totalOrders={totalOrders}
+      />
+
+      {/* Revenue Analytics */}
+      <RevenueAnalytics
+        orderData={orderData}
+        monthlyRevenueData={monthlyRevenueData}
+        totalOrders={totalOrders}
+        totalRevenue={totalRevenue}
+        averageOrderValue={averageOrderValue}
+      />
+
+      {/* Data Source Info */}
+      {userQuery.data?.user && (
+        <Alert>
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            Data is being fetched from Copa-lib APIs. Current user: {userQuery.data.user.name}
+            ({userQuery.data.user.organization || 'No organization'})
+          </AlertDescription>
+        </Alert>
+      )}
+    </div>
+  )
+}

package/templates/latest/src/components/ui/bluecopa-logo.tsx

@@ -20,6 +20,9 @@ export const BluecopaLogo: React.FC<BluecopaLogoProps> = ({
       width={width}
       height={height}
       className={className}
+      role="img"
+      aria-hidden="true"
+      focusable="false"
     >
       <defs>
         <style>

package/templates/latest/src/components/ui/label.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { cn } from "@/lib/utils"
 

package/templates/latest/src/components/ui/select.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { ChevronDown } from "lucide-react"
 import { cn } from "@/lib/utils"

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

@@ -1,5 +1,5 @@
 import DashboardLayout from '@/components/layout/dashboard-layout'
-import Dashboard from '@/components/page/dashboard'
+import Dashboard from '@/components/page/dashboard/dashboard'
 
 export default function DashboardPage() {
   return (

package/templates/latest/src/single-spa.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { createRoot, Root } from 'react-dom/client';
-import singleSpaReact from 'single-spa-react';
-import { MemoryRouter, BrowserRouter } from 'react-router-dom';
-import App from './App';
+import React from "react";
+import { createRoot, Root } from "react-dom/client";
+import singleSpaReact from "single-spa-react";
+import { MemoryRouter, BrowserRouter } from "react-router-dom";
+import App from "./App";
+import { AppProps } from "single-spa";
 
 // Single-spa lifecycle props interface
 interface LifecycleProps {
@@ -18,15 +19,15 @@ interface LifecycleProps {
 let root: Root | null = null;
 
 // Root component wrapper that handles routing
-const PnLExplorerRoot: React.FC<{ basename?: string; isMicroFrontend?: boolean }> = ({ 
-  basename = '/', 
-  isMicroFrontend = false 
-}) => {
+const MicrofrontendRoot: React.FC<{
+  basename?: string;
+  isMicroFrontend?: boolean;
+}> = ({ basename = "/", isMicroFrontend = false }) => {
   // Use MemoryRouter for micro-frontend to avoid conflicts with host routing
   // Use BrowserRouter for standalone mode
   const Router = isMicroFrontend ? MemoryRouter : BrowserRouter;
   const routerProps = isMicroFrontend ? {} : { basename };
-  
+
   return (
     <Router {...routerProps}>
       <App />
@@ -38,13 +39,22 @@ const PnLExplorerRoot: React.FC<{ basename?: string; isMicroFrontend?: boolean }
 const lifecycles = singleSpaReact({
   React,
   ReactDOMClient: { createRoot },
-  rootComponent: (props) => <PnLExplorerRoot isMicroFrontend={true} basename={props.basename} />,
-  errorBoundary: (err, info, props) => {
-    console.error('PnL Explorer Single-spa Error:', err, info);
-    return <div>Something went wrong loading PnL Explorer</div>;
+  rootComponent: (props: AppProps & { basename: string }) => (
+    <MicrofrontendRoot isMicroFrontend={true} basename={props.basename} />
+  ),
+  errorBoundary: (err, info) => {
+    console.error("Microfrontend Single-spa Error:", err, info);
+    return <div>Something went wrong loading Microfrontend</div>;
+  },
+  renderType: "createRoot",
+  domElementGetter: () => {
+    const el = document.getElementById("single-spa-application:pnl-explorer");
+    if (!el)
+      throw new Error(
+        "Mount target #single-spa-application:pnl-explorer not found"
+      );
+    return el;
   },
-  renderType: 'createRoot',
-  domElementGetter: () => document.getElementById('single-spa-application:pnl-explorer') || document.body
 });
 
 // Export the single-spa lifecycle functions
@@ -53,7 +63,7 @@ export const { mount, unmount, bootstrap } = lifecycles;
 // Export a manual mount function for direct usage
 export const manualMount = async (props: LifecycleProps) => {
   if (!props.domElement) {
-    throw new Error('domElement is required for mounting PnL Explorer');
+    throw new Error("domElement is required for mounting the application");
   }
 
   try {
@@ -65,20 +75,20 @@ export const manualMount = async (props: LifecycleProps) => {
 
     // Create new root
     root = createRoot(props.domElement);
-    
+
     // Mount the application with the provided basename as micro-frontend
     root.render(
-      <PnLExplorerRoot 
+      <MicrofrontendRoot
         isMicroFrontend={true}
-        basename={props.basename || '/app/external/pnl-explorer'} 
+        basename={props.basename || "/app/external/microfrontend"}
       />
     );
 
-    console.log('PnL Explorer mounted successfully');
-    return Promise.resolve();
+    console.log("Microfrontend mounted successfully");
+    return;
   } catch (error) {
-    console.error('Failed to mount PnL Explorer:', error);
-    return Promise.reject(error);
+    console.error("Failed to mount Microfrontend:", error);
+    throw error;
   }
 };
 
@@ -89,10 +99,10 @@ export const manualUnmount = async () => {
       root.unmount();
       root = null;
     }
-    console.log('PnL Explorer unmounted successfully');
+    console.log("Microfrontend unmounted successfully");
     return Promise.resolve();
   } catch (error) {
-    console.error('Failed to unmount PnL Explorer:', error);
+    console.error("Failed to unmount Microfrontend:", error);
     return Promise.reject(error);
   }
 };
@@ -101,5 +111,5 @@ export const manualUnmount = async () => {
 export default {
   mount: manualMount,
   unmount: manualUnmount,
-  bootstrap: () => Promise.resolve()
-};
+  bootstrap: () => Promise.resolve(),
+};

package/templates/latest/tailwind.config.js

@@ -2,8 +2,7 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    './src/**/*.{ts,tsx}',
-    './node_modules/@tremor/**/*.{js,ts,jsx,tsx}',
+    './src/**/*.{ts,tsx}'
   ],
   prefix: "",
   theme: {

package/templates/latest/tsconfig.app.json

@@ -14,6 +14,12 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,

package/templates/latest/tsconfig.json

@@ -9,11 +9,11 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "noImplicitAny": false,
-    "noUnusedParameters": false,
-    "skipLibCheck": true,
-    "allowJs": true,
-    "noUnusedLocals": false,
-    "strictNullChecks": false
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true
   }
 }

package/templates/latest/tsconfig.node.json

@@ -4,7 +4,11 @@
     "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["vite.config.ts"]
 }

package/templates/latest/vite.config.ts

@@ -29,7 +29,7 @@ export default defineConfig(({ mode }) => {
         },
         shared: ["react", "react-dom"],
       }),
-    ].filter(Boolean),
+    ],
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),