create-bluecopa-react-app 1.0.5 → 1.0.7

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

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

@@ -1,185 +0,0 @@
-'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>
-  )
-}