create-bluecopa-react-app 1.0.3 → 1.0.5

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

@@ -0,0 +1,313 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ShoppingCart, TrendingUp } from 'lucide-react';
+import { 
+  ResponsiveContainer,
+  AreaChart as RechartsAreaChart,
+  BarChart as RechartsBarChart,
+  Area,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  Cell
+} from 'recharts';
+import { DonutChart } from '@/components/charts/DonutChart';
+
+interface SalesAnalyticsProps {
+  orderData: any[];
+  totalOrders: number;
+  totalRevenue: number;
+  averageOrderValue: number;
+}
+
+export const SalesAnalytics: React.FC<SalesAnalyticsProps> = ({ 
+  orderData,
+}) => {
+  // Process data for charts
+  const areaChartData = orderData.map((item: any, index: number) => ({
+    category: item.category,
+    revenue: item.total,
+    orders: item.count * 10, // Scale for visualization
+    trend: item.total * (1 + (index * 0.1)) // Mock trend data
+  }));
+
+  const barChartData = orderData.map((item: any) => ({
+    category: item.category,
+    revenue: item.total,
+    orders: item.count,
+    avgOrderValue: Math.round(item.total / item.count),
+    performance: (item.total / orderData.reduce((sum: number, cat: any) => sum + cat.total, 0)) * 100
+  }));
+
+  const donutChartData = orderData.map((item: any) => ({
+    category: item.category,
+    sales: item.total
+  }));
+
+  return (
+    <div className="space-y-6">
+      {/* Sales Analytics Row */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Enhanced Sales by Category */}
+        <Card>
+          <CardHeader className="pb-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-lg font-bold">Sales by Category</CardTitle>
+                <CardDescription className="text-sm text-gray-600">
+                  Performance breakdown by product categories
+                </CardDescription>
+              </div>
+              <Badge variant="outline" className="text-emerald-600 border-emerald-200">
+                {orderData.length} Categories
+              </Badge>
+            </div>
+          </CardHeader>
+          <CardContent>
+            {orderData.length > 0 ? (
+              <div className="space-y-4">
+                {/* Category Trend Overview */}
+                <div className="grid grid-cols-3 gap-4 p-4 bg-gradient-to-r from-emerald-50 to-blue-50 rounded-lg border border-emerald-100">
+                  <div className="text-center">
+                    <div className="text-xl font-bold text-emerald-700">
+                      {orderData.length}
+                    </div>
+                    <div className="text-xs text-emerald-600 font-medium">Categories</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-xl font-bold text-blue-700">
+                      ${Math.max(...orderData.map((item: any) => item.total)).toLocaleString()}
+                    </div>
+                    <div className="text-xs text-blue-600 font-medium">Top Revenue</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-xl font-bold text-violet-700">
+                      {Math.round(orderData.reduce((sum: number, item: any) => sum + item.count, 0) / orderData.length)}
+                    </div>
+                    <div className="text-xs text-violet-600 font-medium">Avg Orders</div>
+                  </div>
+                </div>
+
+                {/* Area Chart for Category Trends */}
+                <div className="h-80">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <RechartsAreaChart
+                      data={areaChartData}
+                      margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
+                    >
+                      <defs>
+                        <linearGradient id="revenueGradient" x1="0" y1="0" x2="0" y2="1">
+                          <stop offset="5%" stopColor="#10B981" stopOpacity={0.8}/>
+                          <stop offset="95%" stopColor="#10B981" stopOpacity={0.1}/>
+                        </linearGradient>
+                        <linearGradient id="ordersGradient" x1="0" y1="0" x2="0" y2="1">
+                          <stop offset="5%" stopColor="#3B82F6" stopOpacity={0.8}/>
+                          <stop offset="95%" stopColor="#3B82F6" stopOpacity={0.1}/>
+                        </linearGradient>
+                      </defs>
+                      <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                      <XAxis 
+                        dataKey="category" 
+                        tick={{ fontSize: 12 }}
+                        angle={-45}
+                        textAnchor="end"
+                        height={80}
+                      />
+                      <YAxis tick={{ fontSize: 12 }} />
+                      <Tooltip 
+                        formatter={(value: any, name: string) => [
+                          name === 'revenue' ? `$${value.toLocaleString()}` : `${Math.round(value / 10)} orders`,
+                          name === 'revenue' ? 'Revenue' : 'Orders'
+                        ]}
+                        labelStyle={{ color: '#374151' }}
+                        contentStyle={{ 
+                          backgroundColor: '#fff',
+                          border: '1px solid #e5e7eb',
+                          borderRadius: '8px',
+                          boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
+                        }}
+                      />
+                      <Legend />
+                      <Area
+                        type="monotone"
+                        dataKey="revenue"
+                        stroke="#10B981"
+                        fillOpacity={1}
+                        fill="url(#revenueGradient)"
+                        strokeWidth={2}
+                      />
+                      <Area
+                        type="monotone"
+                        dataKey="orders"
+                        stroke="#3B82F6"
+                        fillOpacity={1}
+                        fill="url(#ordersGradient)"
+                        strokeWidth={2}
+                      />
+                    </RechartsAreaChart>
+                  </ResponsiveContainer>
+                </div>
+              </div>
+            ) : (
+              <div className="text-center text-gray-500 py-12">
+                <ShoppingCart className="h-12 w-12 mx-auto text-gray-300 mb-4" />
+                <p className="text-lg font-medium">No category data available</p>
+                <p className="text-sm">Start selling to see category breakdown</p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Sales by Category Chart */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Sales by Category</CardTitle>
+            <CardDescription>
+              Revenue breakdown by product category
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <DonutChart
+              className="h-64"
+              data={donutChartData}
+              category="sales"
+              index="category"
+              valueFormatter={(number: number) => 
+                `$${Intl.NumberFormat("us").format(number)}`
+              }
+              colors={["slate", "violet", "indigo", "rose", "cyan", "amber"]}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Top Performing Categories Analytics */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-xl font-bold flex items-center gap-2">
+                <TrendingUp className="h-5 w-5 text-emerald-600" />
+                Top Performing Categories
+              </CardTitle>
+              <CardDescription className="text-sm text-gray-600 mt-1">
+                Comprehensive category performance analysis with revenue and order metrics
+              </CardDescription>
+            </div>
+            <Badge variant="outline" className="text-emerald-600 border-emerald-200">
+              {orderData.length} Active Categories
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {orderData.length > 0 ? (
+            <div className="space-y-6">
+              {/* Category Performance Overview */}
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+                {orderData.slice(0, 4).map((category: any, index: number) => {
+                  const colors = ['bg-emerald-50 text-emerald-700 border-emerald-200', 'bg-blue-50 text-blue-700 border-blue-200', 
+                                 'bg-violet-50 text-violet-700 border-violet-200', 'bg-amber-50 text-amber-700 border-amber-200'];
+                  const iconColors = ['text-emerald-500', 'text-blue-500', 'text-violet-500', 'text-amber-500'];
+                  
+                  return (
+                    <div key={index} className={`p-4 rounded-lg border ${colors[index] || 'bg-gray-50 text-gray-700 border-gray-200'}`}>
+                      <div className="flex items-center justify-between mb-2">
+                        <ShoppingCart className={`h-4 w-4 ${iconColors[index] || 'text-gray-500'}`} />
+                        <span className="text-xs font-medium">#{index + 1}</span>
+                      </div>
+                      <div className="text-lg font-bold">${category.total.toLocaleString()}</div>
+                      <div className="text-xs font-medium mb-1">{category.category}</div>
+                      <div className="text-xs opacity-75">{category.count} orders</div>
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Enhanced Bar Chart for Category Performance */}
+              <div className="bg-gradient-to-r from-slate-50 to-gray-50 p-6 rounded-lg border border-slate-200">
+                <h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
+                  📊 Revenue by Category Performance
+                </h3>
+                <div className="h-80">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <RechartsBarChart
+                      data={barChartData}
+                      margin={{ top: 20, right: 30, left: 20, bottom: 60 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+                      <XAxis 
+                        dataKey="category" 
+                        tick={{ fontSize: 12, fill: '#64748b' }}
+                        angle={-45}
+                        textAnchor="end"
+                        height={80}
+                      />
+                      <YAxis tick={{ fontSize: 12, fill: '#64748b' }} />
+                      <Tooltip 
+                        formatter={(value: any, name: string) => [
+                          name === 'revenue' ? `$${value.toLocaleString()}` : value,
+                          name === 'revenue' ? 'Revenue' : name === 'orders' ? 'Orders' : 'Avg Order Value'
+                        ]}
+                        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 />
+                      <Bar dataKey="revenue" name="Revenue" radius={[4, 4, 0, 0]}>
+                        {orderData.map((_entry: any, index: number) => {
+                          const colors = ['#10B981', '#3B82F6', '#8B5CF6', '#F59E0B', '#F43F5E', '#06B6D4', '#64748B', '#6366F1'];
+                          return <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />;
+                        })}
+                      </Bar>
+                      <Bar dataKey="orders" name="Orders" radius={[4, 4, 0, 0]} fill="#94A3B8" fillOpacity={0.7} />
+                    </RechartsBarChart>
+                  </ResponsiveContainer>
+                </div>
+              </div>
+
+              {/* Category Performance Details */}
+              <div className="space-y-3">
+                <h3 className="text-sm font-semibold text-gray-700">Detailed Performance Breakdown</h3>
+                {orderData.map((category: any, index: number) => {
+                  const percentage = Math.round((category.total / orderData.reduce((sum: number, cat: any) => sum + cat.total, 0)) * 100);
+                  const avgOrder = Math.round(category.total / category.count);
+                  const colors = ['bg-emerald-500', 'bg-blue-500', 'bg-violet-500', 'bg-amber-500', 'bg-rose-500', 'bg-cyan-500', 'bg-indigo-500'];
+                  
+                  return (
+                    <div key={index} className="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-100 hover:shadow-sm transition-shadow">
+                      <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-medium text-gray-900">{category.category}</div>
+                          <div className="text-sm text-gray-500">{category.count} orders • Avg: ${avgOrder}</div>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <div className="font-bold text-gray-900">${category.total.toLocaleString()}</div>
+                        <div className="text-sm text-gray-500">{percentage}% of total</div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ) : (
+            <div className="text-center text-gray-500 py-16">
+              <ShoppingCart className="h-16 w-16 mx-auto text-gray-300 mb-4" />
+              <p className="text-lg font-medium">No category data available</p>
+              <p className="text-sm">Start selling products to see category performance</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

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

@@ -0,0 +1,256 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+
+// Simple table components since they're not in the UI library
+const Table = ({ children, className = "" }: { children: React.ReactNode, className?: string }) => (
+  <div className={`overflow-x-auto ${className}`}>
+    <table className="min-w-full divide-y divide-gray-200">
+      {children}
+    </table>
+  </div>
+);
+
+const TableHead = ({ children }: { children: React.ReactNode }) => (
+  <thead className="bg-gray-50">{children}</thead>
+);
+
+const TableBody = ({ children }: { children: React.ReactNode }) => (
+  <tbody className="bg-white divide-y divide-gray-200">{children}</tbody>
+);
+
+const TableRow = ({ children }: { children: React.ReactNode }) => (
+  <tr className="hover:bg-gray-50">{children}</tr>
+);
+
+const TableHeaderCell = ({ children }: { children: React.ReactNode }) => (
+  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+    {children}
+  </th>
+);
+
+const TableCell = ({ children, className = "" }: { children: React.ReactNode, className?: string }) => (
+  <td className={`px-6 py-4 whitespace-nowrap text-sm text-gray-900 ${className}`}>
+    {children}
+  </td>
+);
+
+interface Transaction {
+  id: string;
+  customer: string;
+  amount: number;
+  category: string;
+  payment_method: string;
+  date: string;
+}
+
+interface TransactionsTableProps {
+  recentTransactions: Transaction[];
+  totalOrders: number;
+}
+
+export const TransactionsTable: React.FC<TransactionsTableProps> = ({ 
+  recentTransactions,
+  totalOrders
+}) => {
+  return (
+    <div className="space-y-6">
+      {/* Enhanced Recent Transactions Table */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-lg font-bold flex items-center gap-2">
+                📋 Recent Transactions
+              </CardTitle>
+              <CardDescription>
+                Latest customer transactions with comprehensive details and analytics
+              </CardDescription>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Badge variant="outline" className="text-blue-600 border-blue-200">
+                {recentTransactions.length} Recent
+              </Badge>
+              <Badge variant="outline" className="text-emerald-600 border-emerald-200">
+                ${recentTransactions.reduce((sum: number, t: any) => sum + t.amount, 0).toLocaleString()} Total
+              </Badge>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {recentTransactions.length > 0 ? (
+            <div className="space-y-4">
+              {/* Transaction Summary Cards */}
+              <div className="grid grid-cols-1 md:grid-cols-4 gap-4 p-4 bg-gradient-to-r from-gray-50 to-slate-50 rounded-lg border border-gray-100">
+                <div className="text-center">
+                  <div className="text-xl font-bold text-gray-700">
+                    {recentTransactions.length}
+                  </div>
+                  <div className="text-xs text-gray-600 font-medium">Total Transactions</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-xl font-bold text-emerald-700">
+                    ${Math.round(recentTransactions.reduce((sum: number, t: any) => sum + t.amount, 0) / recentTransactions.length).toLocaleString()}
+                  </div>
+                  <div className="text-xs text-emerald-600 font-medium">Average Value</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-xl font-bold text-blue-700">
+                    ${Math.max(...recentTransactions.map((t: any) => t.amount)).toLocaleString()}
+                  </div>
+                  <div className="text-xs text-blue-600 font-medium">Highest Transaction</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-xl font-bold text-violet-700">
+                    {new Set(recentTransactions.map((t: any) => t.category)).size}
+                  </div>
+                  <div className="text-xs text-violet-600 font-medium">Categories</div>
+                </div>
+              </div>
+
+              {/* Enhanced Data Table */}
+              <div className="overflow-hidden rounded-lg border border-gray-200 shadow-sm">
+                <Table className="min-w-full">
+                  <TableHead>
+                    <TableRow>
+                      <TableHeaderCell>Transaction ID</TableHeaderCell>
+                      <TableHeaderCell>Customer</TableHeaderCell>
+                      <TableHeaderCell>Category</TableHeaderCell>
+                      <TableHeaderCell>Amount</TableHeaderCell>
+                      <TableHeaderCell>Payment Method</TableHeaderCell>
+                      <TableHeaderCell>Date</TableHeaderCell>
+                      <TableHeaderCell>Status</TableHeaderCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {recentTransactions.map((transaction: any) => (
+                      <TableRow key={transaction.id}>
+                        <TableCell className="font-mono text-sm font-medium text-gray-900">
+                          #{transaction.id}
+                        </TableCell>
+                        <TableCell className="font-medium text-gray-900">
+                          <div className="flex items-center space-x-2">
+                            <div className="w-8 h-8 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center text-white text-xs font-bold">
+                              {transaction.customer.split(' ').map((n: string) => n[0]).join('')}
+                            </div>
+                            <span>{transaction.customer}</span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Badge 
+                            variant="outline" 
+                            className={`text-xs ${
+                              transaction.category === 'Electronics' ? 'text-blue-600 border-blue-200 bg-blue-50' :
+                              transaction.category === 'Clothing' ? 'text-emerald-600 border-emerald-200 bg-emerald-50' :
+                              transaction.category === 'Sports' ? 'text-violet-600 border-violet-200 bg-violet-50' :
+                              transaction.category === 'Books' ? 'text-amber-600 border-amber-200 bg-amber-50' :
+                              'text-rose-600 border-rose-200 bg-rose-50'
+                            }`}
+                          >
+                            {transaction.category}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="font-bold text-right">
+                          <div className={`text-lg ${
+                            transaction.amount > 1500 ? 'text-emerald-600' :
+                            transaction.amount > 1000 ? 'text-blue-600' :
+                            transaction.amount > 500 ? 'text-amber-600' :
+                            'text-gray-600'
+                          }`}>
+                            ${transaction.amount.toLocaleString()}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center space-x-2">
+                            <div className={`w-2 h-2 rounded-full ${
+                              transaction.payment_method === 'Credit Card' ? 'bg-blue-500' :
+                              transaction.payment_method === 'PayPal' ? 'bg-yellow-500' :
+                              transaction.payment_method === 'Debit Card' ? 'bg-emerald-500' :
+                              'bg-gray-500'
+                            }`} />
+                            <span className="text-sm">{transaction.payment_method}</span>
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-gray-500 text-sm">
+                          {transaction.date}
+                        </TableCell>
+                        <TableCell>
+                          <Badge 
+                            variant="outline" 
+                            className="text-xs text-emerald-600 border-emerald-200 bg-emerald-50"
+                          >
+                            Completed
+                          </Badge>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+
+              {/* Table Footer with Pagination Info */}
+              <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-100">
+                <div className="text-sm text-gray-600">
+                  Showing <span className="font-medium">{recentTransactions.length}</span> of <span className="font-medium">{totalOrders}</span> transactions
+                </div>
+                <div className="text-sm text-gray-600">
+                  Total Value: <span className="font-bold text-emerald-600">${recentTransactions.reduce((sum: number, t: any) => sum + t.amount, 0).toLocaleString()}</span>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="text-center text-gray-500 py-12">
+              <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
+                📊
+              </div>
+              <p className="text-lg font-medium">No transaction data available</p>
+              <p className="text-sm">Start processing transactions to see them here</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Advanced Data Table Section */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Transactions</CardTitle>
+          <CardDescription>
+            Latest transaction data with comprehensive details
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeaderCell>Transaction ID</TableHeaderCell>
+                <TableHeaderCell>Customer</TableHeaderCell>
+                <TableHeaderCell>Category</TableHeaderCell>
+                <TableHeaderCell>Amount</TableHeaderCell>
+                <TableHeaderCell>Payment Method</TableHeaderCell>
+                <TableHeaderCell>Date</TableHeaderCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {recentTransactions.map((transaction: any) => (
+                <TableRow key={transaction.id}>
+                  <TableCell className="font-medium">{transaction.id}</TableCell>
+                  <TableCell>{transaction.customer}</TableCell>
+                  <TableCell>
+                    <Badge variant="outline" className="text-xs">
+                      {transaction.category}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="font-semibold text-emerald-600">
+                    ${transaction.amount.toLocaleString()}
+                  </TableCell>
+                  <TableCell>{transaction.payment_method}</TableCell>
+                  <TableCell className="text-gray-500">{transaction.date}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};