create-bluecopa-react-app 1.0.3 → 1.0.5

package/templates/latest/setup.sh

@@ -42,10 +42,11 @@ else
 fi
 
 echo "🎨 Setting up Tailwind CSS..."
-npx tailwindcss init -p 2>/dev/null || echo "✅ Tailwind already configured"
-
-echo "🔍 Running type check..."
-npm run type-check
+if [ ! -f tailwind.config.js ] && [ ! -f tailwind.config.cjs ]; then
+  npx tailwindcss init -p
+else
+  echo "✅ Tailwind already configured"
+fi
 
 echo "✅ Setup complete!"
 echo ""

package/templates/latest/src/App.tsx

@@ -1,15 +1,19 @@
-import { Routes, Route } from 'react-router-dom'
+import { Routes, Route, Navigate } from 'react-router-dom'
+import { Suspense, lazy } from 'react'
 import QueryProvider from '@/providers/query-provider'
 import Home from '@/pages/Home'
-import Dashboard from '@/pages/Dashboard'
+const Dashboard = lazy(() => import('@/pages/Dashboard'))
 
 export default function App() {
   return (
     <QueryProvider>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/dashboard" element={<Dashboard />} />
-      </Routes>
+      <Suspense fallback={<div className="p-4 text-sm text-muted-foreground">Loading…</div>}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </Suspense>
     </QueryProvider>
   )
-}
+}

package/templates/latest/src/components/charts/AreaChart.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { 
+  ResponsiveContainer,
+  AreaChart as RechartsAreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend
+} from 'recharts';
+
+interface AreaChartProps {
+  data: any[];
+  index: string;
+  categories: string[];
+  colors?: string[];
+  className?: string;
+  valueFormatter?: (value: any) => any;
+  showLegend?: boolean;
+  showGridLines?: boolean;
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  yAxisWidth?: number;
+}
+
+export const AreaChart: React.FC<AreaChartProps> = ({ 
+  data, 
+  index, 
+  categories, 
+  colors = ['#3B82F6'], 
+  className = "h-80",
+  valueFormatter,
+  showLegend = true,
+  showGridLines = true,
+  showXAxis = true,
+  showYAxis = true,
+  yAxisWidth
+}) => {
+  const colorMap: { [key: string]: string } = {
+    blue: '#3B82F6',
+    emerald: '#10B981',
+    violet: '#8B5CF6',
+    rose: '#F43F5E',
+    amber: '#F59E0B',
+    cyan: '#06B6D4',
+    slate: '#64748B',
+    indigo: '#6366F1'
+  };
+
+  const getColor = (color: string, index: number) => {
+    return colorMap[color] || colors[index] || '#3B82F6';
+  };
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <RechartsAreaChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+          {showGridLines && <CartesianGrid strokeDasharray="3 3" />}
+          {showXAxis && <XAxis dataKey={index} />}
+          {showYAxis && <YAxis width={yAxisWidth || 60} />}
+          <Tooltip 
+            formatter={(value: any) => valueFormatter ? valueFormatter(value) : value}
+          />
+          {showLegend && <Legend />}
+          {categories?.map((category: string, idx: number) => (
+            <Area
+              key={category}
+              type="monotone"
+              dataKey={category}
+              stroke={getColor(colors[idx], idx)}
+              fill={getColor(colors[idx], idx)}
+              fillOpacity={0.3}
+            />
+          ))}
+        </RechartsAreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};

package/templates/latest/src/components/charts/DonutChart.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { 
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend
+} from 'recharts';
+
+interface DonutChartProps {
+  data: any[];
+  category: string;
+  index: string;
+  colors?: string[];
+  className?: string;
+  valueFormatter?: (value: any) => any;
+  variant?: "donut" | "pie";
+}
+
+export const DonutChart: React.FC<DonutChartProps> = ({ 
+  data, 
+  category, 
+  index, 
+  colors = ['#3B82F6'], 
+  className = "h-64",
+  valueFormatter,
+  variant = "donut"
+}) => {
+  const colorMap: { [key: string]: string } = {
+    blue: '#3B82F6',
+    emerald: '#10B981',
+    violet: '#8B5CF6',
+    rose: '#F43F5E',
+    amber: '#F59E0B',
+    cyan: '#06B6D4',
+    slate: '#64748B',
+    indigo: '#6366F1'
+  };
+
+  const getColor = (color: string, index: number) => {
+    return colorMap[color] || colors[index] || '#3B82F6';
+  };
+
+  const COLORS = colors.map((color: string, idx: number) => getColor(color, idx));
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          <Pie
+            data={data}
+            cx="50%"
+            cy="50%"
+            innerRadius={variant === "donut" ? 60 : 0}
+            outerRadius={80}
+            paddingAngle={5}
+            dataKey={category}
+            nameKey={index}
+          >
+            {data.map((_entry: any, index: number) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+          <Tooltip 
+            formatter={(value: any) => valueFormatter ? valueFormatter(value) : value}
+          />
+          <Legend />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};

package/templates/latest/src/components/charts/SparkAreaChart.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { 
+  ResponsiveContainer,
+  AreaChart as RechartsAreaChart,
+  Area
+} from 'recharts';
+
+interface SparkAreaChartProps {
+  data: any[];
+  categories: string[];
+  colors?: string[];
+  className?: string;
+}
+
+export const SparkAreaChart: React.FC<SparkAreaChartProps> = ({ 
+  data, 
+  categories, 
+  colors = ['#3B82F6'], 
+  className = "h-10"
+}) => {
+  const colorMap: { [key: string]: string } = {
+    blue: '#3B82F6',
+    emerald: '#10B981',
+    violet: '#8B5CF6',
+    rose: '#F43F5E',
+    amber: '#F59E0B',
+    cyan: '#06B6D4'
+  };
+
+  const getColor = (color: string, index: number) => {
+    return colorMap[color] || colors[index] || '#3B82F6';
+  };
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <RechartsAreaChart data={data} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+          {categories?.map((category: string, idx: number) => (
+            <Area
+              key={category}
+              type="monotone"
+              dataKey={category}
+              stroke={getColor(colors[idx], idx)}
+              fill={getColor(colors[idx], idx)}
+              fillOpacity={0.6}
+            />
+          ))}
+        </RechartsAreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};

package/templates/latest/src/components/layout/dashboard-header.tsx

@@ -87,7 +87,7 @@ export default function DashboardHeader({ title, subtitle }: DashboardHeaderProp
           </div>
 
           {/* Notifications */}
-          <Button variant="ghost" size="sm" className="relative">
+          <Button variant="ghost" size="sm" className="relative" aria-label="Open notifications, 3 unread">
             <Bell className="h-5 w-5" />
             <span className="absolute -top-1 -right-1 h-4 w-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
               3

package/templates/latest/src/components/layout/dashboard-layout.tsx

@@ -1,29 +1,37 @@
-import { ReactNode } from 'react'
-import Sidebar from './sidebar'
-import DashboardHeader from './dashboard-header'
+import { ReactNode } from "react";
+import Sidebar from "./sidebar";
+import DashboardHeader from "./dashboard-header";
 
 interface DashboardLayoutProps {
-  children: ReactNode
-  title?: string
-  subtitle?: string
+  children: ReactNode;
+  title?: string;
+  subtitle?: string;
 }
 
-export default function DashboardLayout({ children, title, subtitle }: DashboardLayoutProps) {
+export default function DashboardLayout({
+  children,
+  title,
+  subtitle,
+}: DashboardLayoutProps) {
   return (
     <div className="flex h-screen bg-gray-50">
       {/* Sidebar */}
       <Sidebar />
-      
+
       {/* Main content area */}
       <div className="flex-1 flex flex-col overflow-hidden">
         {/* Header */}
         <DashboardHeader title={title} subtitle={subtitle} />
-        
+
         {/* Main content */}
-        <main className="flex-1 overflow-y-auto p-6">
+        <main
+          id="main-content"
+          role="main"
+          className="flex-1 overflow-y-auto p-6"
+        >
           {children}
         </main>
       </div>
     </div>
-  )
+  );
 }

package/templates/latest/src/components/{page → layout}/navbar.tsx

@@ -60,6 +60,8 @@ export default function Navbar() {
               type="button"
               className="inline-flex items-center justify-center p-2 rounded-md text-blue-200 hover:text-white hover:bg-blue-700"
               onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
+              aria-expanded={mobileMenuOpen}
             >
               {mobileMenuOpen ? (
                 <X className="h-6 w-6" />

package/templates/latest/src/components/layout/sidebar.tsx

@@ -22,7 +22,7 @@ export default function Sidebar() {
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 space-y-1 px-3 py-4">
+      <nav className="flex-1 space-y-1 px-3 py-4" aria-label="Main navigation">
         {navigation.map((item) => {
           const isActive = location.pathname === item.href;
           return (
@@ -35,6 +35,7 @@ export default function Sidebar() {
                   ? "bg-blue-50 text-blue-700 border-r-2 border-blue-600"
                   : "text-gray-700 hover:bg-gray-50 hover:text-gray-900"
               )}
+              aria-current={isActive ? "page" : undefined}
             >
               <item.icon
                 className={cn(

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
+import { ArrowUpRight, ArrowDownRight } from 'lucide-react';
+import { SparkAreaChart } from '@/components/charts/SparkAreaChart';
+
+interface Metric {
+  title: string;
+  value: string;
+  change: string;
+  trend: 'up' | 'down';
+  icon: string;
+  color: string;
+}
+
+interface DashboardMetricsProps {
+  ecommerceMetrics: Metric[];
+  monthlyRevenueData: any[];
+}
+
+const iconMap: { [key: string]: React.ElementType } = {
+  DollarSign: ({ className }: { className?: string }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <line x1="12" y1="1" x2="12" y2="23"></line>
+      <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
+    </svg>
+  ),
+  ShoppingCart: ({ className }: { className?: string }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="9" cy="21" r="1"></circle>
+      <circle cx="20" cy="21" r="1"></circle>
+      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+    </svg>
+  ),
+  TrendingUp: ({ className }: { className?: string }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+      <polyline points="17 6 23 6 23 12"></polyline>
+    </svg>
+  ),
+  Users: ({ className }: { className?: string }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+      <circle cx="9" cy="7" r="4"></circle>
+      <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+      <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+    </svg>
+  )
+};
+
+export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({
+  ecommerceMetrics,
+  monthlyRevenueData
+}) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      {ecommerceMetrics.map((metric, index) => {
+        const IconComponent = iconMap[metric.icon];
+        return (
+          <Card key={index}>
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-gray-600">
+                  {metric.title}
+                </CardTitle>
+                {IconComponent && <IconComponent className={`h-4 w-4 ${metric.color}`} />}
+              </div>
+              <div className="flex items-center space-x-2">
+                <div className="text-2xl font-bold">{metric.value}</div>
+                <div className={`flex items-center text-sm ${
+                  metric.trend === 'up' ? 'text-green-600' : 'text-red-600'
+                }`}>
+                  {metric.trend === 'up' ? (
+                    <ArrowUpRight className="h-4 w-4" />
+                  ) : (
+                    <ArrowDownRight className="h-4 w-4" />
+                  )}
+                  {metric.change}
+                </div>
+              </div>
+              {/* Mini trend chart */}
+              {monthlyRevenueData.length > 0 && (
+                <div className="mt-4">
+                  <SparkAreaChart
+                    data={monthlyRevenueData.slice(-6)} // Last 6 months
+                    categories={[index === 0 ? "revenue" : "orders"]}
+                    colors={[index === 0 ? "emerald" : index === 1 ? "blue" : index === 2 ? "violet" : "amber"]}
+                    className="h-10 w-full"
+                  />
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -0,0 +1,182 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { DollarSign } from 'lucide-react';
+import { 
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend
+} from 'recharts';
+import { DonutChart } from '@/components/charts/DonutChart';
+
+interface PaymentMethodsAnalysisProps {
+  paymentMethodData: any[];
+}
+
+export const PaymentMethodsAnalysis: React.FC<PaymentMethodsAnalysisProps> = ({ 
+  paymentMethodData
+}) => {
+  // Process data for charts
+  const donutChartData = paymentMethodData.map((item: any) => ({
+    method: item.method,
+    count: item.count
+  }));
+
+  const pieChartData = paymentMethodData.map((item: any) => ({
+    name: item.method,
+    value: item.total,
+    count: item.count,
+    percentage: Math.round((item.total / paymentMethodData.reduce((sum: number, m: any) => sum + m.total, 0)) * 100)
+  }));
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      {/* Enhanced Payment Method Distribution */}
+      <Card>
+        <CardHeader className="pb-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-lg font-bold">Payment Methods</CardTitle>
+              <CardDescription className="text-sm text-gray-600">
+                Transaction distribution by payment type
+              </CardDescription>
+            </div>
+            <Badge variant="outline" className="text-blue-600 border-blue-200">
+              {paymentMethodData.length} Methods
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {paymentMethodData.length > 0 ? (
+            <div className="space-y-6">
+              {/* Enhanced Payment Method Donut Chart */}
+              <div className="relative bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-lg border border-blue-100">
+                <h3 className="text-sm font-semibold text-blue-800 mb-4 text-center">Payment Distribution</h3>
+                <div className="h-80">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <defs>
+                        <filter id="shadow" height="130%">
+                          <feDropShadow dx="2" dy="2" stdDeviation="3" floodOpacity="0.2"/>
+                        </filter>
+                      </defs>
+                      <Pie
+                        data={pieChartData}
+                        cx="50%"
+                        cy="50%"
+                        labelLine={false}
+                        label={({ name, percentage }: any) => `${name}: ${percentage}%`}
+                        outerRadius={100}
+                        innerRadius={60}
+                        paddingAngle={5}
+                        dataKey="value"
+                        filter="url(#shadow)"
+                      >
+                        {paymentMethodData.map((_entry: any, index: number) => {
+                          const colors = ['#3B82F6', '#10B981', '#8B5CF6', '#F59E0B', '#F43F5E', '#06B6D4'];
+                          return (
+                            <Cell 
+                              key={`cell-${index}`} 
+                              fill={colors[index % colors.length]}
+                              stroke="#fff"
+                              strokeWidth={2}
+                            />
+                          );
+                        })}
+                      </Pie>
+                      <Tooltip 
+                        formatter={(value: any, name: string, props: any) => [
+                          `$${value.toLocaleString()}`,
+                          `${name} (${props.payload.count} transactions)`
+                        ]}
+                        labelStyle={{ color: '#374151', fontWeight: 'bold' }}
+                        contentStyle={{ 
+                          backgroundColor: '#fff',
+                          border: '1px solid #e5e7eb',
+                          borderRadius: '8px',
+                          boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
+                        }}
+                      />
+                      <Legend 
+                        verticalAlign="bottom" 
+                        height={36}
+                        iconType="circle"
+                        wrapperStyle={{ fontSize: '12px', paddingTop: '20px' }}
+                      />
+                    </PieChart>
+                  </ResponsiveContainer>
+                </div>
+              </div>
+              
+              {/* Enhanced Payment Method Details */}
+              <div className="space-y-3">
+                <h3 className="text-sm font-semibold text-gray-700">Payment Method Breakdown</h3>
+                {paymentMethodData.map((method: any, index: number) => {
+                  const colors = ['bg-blue-500', 'bg-emerald-500', 'bg-violet-500', 'bg-amber-500', 'bg-rose-500', 'bg-cyan-500'];
+                  const textColors = ['text-blue-600', 'text-emerald-600', 'text-violet-600', 'text-amber-600', 'text-rose-600', 'text-cyan-600'];
+                  const bgColors = ['bg-blue-50', 'bg-emerald-50', 'bg-violet-50', 'bg-amber-50', 'bg-rose-50', 'bg-cyan-50'];
+                  const percentage = Math.round((method.total / paymentMethodData.reduce((sum: number, m: any) => sum + m.total, 0)) * 100);
+                  
+                  return (
+                    <div key={index} className={`flex items-center justify-between p-4 rounded-lg border hover:shadow-sm transition-all ${bgColors[index] || 'bg-gray-50'}`}>
+                      <div className="flex items-center space-x-4">
+                        <div className={`w-4 h-4 rounded-full ${colors[index] || 'bg-gray-400'}`} />
+                        <div>
+                          <div className="font-semibold text-gray-900">{method.method}</div>
+                          <div className="text-sm text-gray-500">{method.count} transactions</div>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <div className={`text-lg font-bold ${textColors[index] || 'text-gray-600'}`}>
+                          ${method.total.toLocaleString()}
+                        </div>
+                        <div className="text-sm text-gray-500">{percentage}% of total</div>
+                        <div className="w-20 bg-gray-200 rounded-full h-1.5 mt-1">
+                          <div 
+                            className={`h-1.5 rounded-full ${colors[index] || 'bg-gray-400'}`}
+                            style={{ width: `${percentage}%` }}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ) : (
+            <div className="text-center text-gray-500 py-12">
+              <DollarSign className="h-12 w-12 mx-auto text-gray-300 mb-4" />
+              <p className="text-lg font-medium">No payment data available</p>
+              <p className="text-sm">Process payments to see distribution</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Payment Method Distribution */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Payment Method Distribution</CardTitle>
+          <CardDescription>
+            Transaction count by payment method
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <DonutChart
+            className="h-64"
+            data={donutChartData}
+            category="count"
+            index="method"
+            valueFormatter={(number: number) => 
+              `${number} transactions`
+            }
+            colors={["emerald", "blue", "violet", "rose", "amber"]}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+};