create-bluecopa-react-app 1.0.3 → 1.0.5

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

@@ -0,0 +1,505 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { DollarSign, TrendingUp, Users, ShoppingCart, PieChart } from 'lucide-react';
+import { AreaChart } from '@/components/charts/AreaChart';
+import { DonutChart } from '@/components/charts/DonutChart';
+import { SparkAreaChart } from '@/components/charts/SparkAreaChart';
+
+interface RevenueAnalyticsProps {
+  orderData: any[];
+  monthlyRevenueData: any[];
+  totalOrders: number;
+  totalRevenue: number;
+  averageOrderValue: number;
+}
+
+export const RevenueAnalytics: React.FC<RevenueAnalyticsProps> = ({ 
+  orderData,
+  monthlyRevenueData,
+  totalOrders,
+  totalRevenue,
+  averageOrderValue
+}) => {
+  // Process data for charts
+  const areaChartData = monthlyRevenueData.map((item: any) => ({
+    ...item,
+    growth: monthlyRevenueData.indexOf(item) > 0 ? 
+      ((item.revenue - monthlyRevenueData[monthlyRevenueData.indexOf(item) - 1].revenue) / 
+       monthlyRevenueData[monthlyRevenueData.indexOf(item) - 1].revenue * 100) : 0,
+    cumulative: monthlyRevenueData.slice(0, monthlyRevenueData.indexOf(item) + 1)
+      .reduce((sum: number, month: any) => sum + month.revenue, 0)
+  }));
+
+  const donutChartData = orderData.map((item: any) => ({
+    name: item.category,
+    value: item.total,
+    percentage: Math.round((item.total / orderData.reduce((sum: number, cat: any) => sum + cat.total, 0)) * 100)
+  }));
+
+  return (
+    <div className="space-y-6">
+      {/* Enhanced Sales Analytics */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Top Categories Performance */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Top Performing Categories</CardTitle>
+            <CardDescription>
+              Revenue performance by category
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {orderData.length > 0 ? (
+              <div className="space-y-4">
+                {orderData.slice(0, 5).map((category: any, index: number) => {
+                  const percentage = Math.round((category.total / orderData.reduce((sum: number, cat: any) => sum + cat.total, 0)) * 100);
+                  return (
+                    <div key={index} className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-2">
+                          <div className={`w-3 h-3 rounded-full ${
+                            index === 0 ? 'bg-emerald-500' : 
+                            index === 1 ? 'bg-blue-500' : 
+                            index === 2 ? 'bg-violet-500' : 
+                            index === 3 ? 'bg-amber-500' : 'bg-rose-500'
+                          }`} />
+                          <span className="text-sm font-medium">{category.category}</span>
+                        </div>
+                        <div className="text-right">
+                          <div className="text-sm font-bold">${category.total.toLocaleString()}</div>
+                          <div className="text-xs text-gray-500">{percentage}%</div>
+                        </div>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-2">
+                        <div 
+                          className={`h-2 rounded-full ${
+                            index === 0 ? 'bg-emerald-500' : 
+                            index === 1 ? 'bg-blue-500' : 
+                            index === 2 ? 'bg-violet-500' : 
+                            index === 3 ? 'bg-amber-500' : 'bg-rose-500'
+                          }`}
+                          style={{ width: `${percentage}%` }}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="text-center text-gray-500 py-8">
+                No category data available
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Sales Insights */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Sales Insights</CardTitle>
+            <CardDescription>
+              Key performance indicators
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-6">
+              <div className="text-center">
+                <div className="text-3xl font-bold text-emerald-600">
+                  ${averageOrderValue.toFixed(2)}
+                </div>
+                <div className="text-sm text-gray-500">Average Order Value</div>
+                <div className="mt-2">
+                  <Badge variant="outline" className="text-green-600 border-green-200">
+                    +5.2% vs last month
+                  </Badge>
+                </div>
+              </div>
+              
+              <div className="text-center">
+                <div className="text-3xl font-bold text-blue-600">
+                  {totalOrders > 0 ? Math.round(totalRevenue / totalOrders * 12) : 0}%
+                </div>
+                <div className="text-sm text-gray-500">Conversion Rate</div>
+                <div className="mt-2">
+                  <Badge variant="outline" className="text-blue-600 border-blue-200">
+                    Industry average: 2.3%
+                  </Badge>
+                </div>
+              </div>
+
+              <div className="text-center">
+                <div className="text-3xl font-bold text-violet-600">
+                  {orderData.length}
+                </div>
+                <div className="text-sm text-gray-500">Product Categories</div>
+                <div className="mt-2">
+                  <Badge variant="outline" className="text-violet-600 border-violet-200">
+                    Active categories
+                  </Badge>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Recent Activity */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent Activity</CardTitle>
+            <CardDescription>
+              Latest updates and activities
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="flex items-center space-x-4 p-3 bg-emerald-50 rounded-lg border border-emerald-100">
+                <div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse" />
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-emerald-800">High Revenue Day</p>
+                  <p className="text-xs text-emerald-600">Revenue exceeded daily target by 15%</p>
+                </div>
+                <Badge variant="outline" className="text-emerald-600 border-emerald-200">Live</Badge>
+              </div>
+              
+              <div className="flex items-center space-x-4 p-3 bg-blue-50 rounded-lg border border-blue-100">
+                <ShoppingCart className="h-5 w-5 text-blue-600" />
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-blue-800">New Order Received</p>
+                  <p className="text-xs text-blue-600">Order #ORD-{Date.now().toString().slice(-4)} - ${(Math.random() * 500 + 50).toFixed(2)}</p>
+                </div>
+                <Badge variant="outline" className="text-blue-600 border-blue-200">New</Badge>
+              </div>
+              
+              <div className="flex items-center space-x-4 p-3 bg-violet-50 rounded-lg border border-violet-100">
+                <TrendingUp className="h-5 w-5 text-violet-600" />
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-violet-800">Sales Trending Up</p>
+                  <p className="text-xs text-violet-600">12% increase in last 24 hours</p>
+                </div>
+                <Badge variant="outline" className="text-violet-600 border-violet-200">Trend</Badge>
+              </div>
+
+              <div className="flex items-center space-x-4 p-3 bg-amber-50 rounded-lg border border-amber-100">
+                <Users className="h-5 w-5 text-amber-600" />
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-amber-800">Customer Milestone</p>
+                  <p className="text-xs text-amber-600">Reached 1,000+ customers this month</p>
+                </div>
+                <Badge variant="outline" className="text-amber-600 border-amber-200">Achievement</Badge>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Enhanced Revenue and Analytics Section */}
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+        {/* 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="value"
+              index="name"
+              valueFormatter={(number: number) => 
+                `$${Intl.NumberFormat("us").format(number)}`
+              }
+              colors={["slate", "violet", "indigo", "rose", "cyan", "amber"]}
+            />
+          </CardContent>
+        </Card>
+
+        {/* Revenue Analytics Summary */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Revenue Analytics</CardTitle>
+            <CardDescription>
+              Key performance indicators
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {/* Top Category */}
+              <div className="p-4 bg-gradient-to-r from-emerald-50 to-blue-50 rounded-lg border border-emerald-100">
+                <div className="text-sm text-emerald-600 font-medium">Top Revenue Category</div>
+                <div className="text-xl font-bold text-emerald-800">
+                  {orderData.length > 0 ? orderData.sort((a: any, b: any) => b.total - a.total)[0]?.category || 'N/A' : 'Electronics'}
+                </div>
+                <div className="text-xs text-emerald-600">
+                  ${orderData.length > 0 ? orderData.sort((a: any, b: any) => b.total - a.total)[0]?.total?.toLocaleString() || '0' : '8,750'}
+                </div>
+              </div>
+
+              {/* Average Order Value */}
+              <div className="p-4 bg-gradient-to-r from-blue-50 to-violet-50 rounded-lg border border-blue-100">
+                <div className="text-sm text-blue-600 font-medium">Average Order Value</div>
+                <div className="text-xl font-bold text-blue-800">
+                  ${averageOrderValue.toFixed(0)}
+                </div>
+                <div className="text-xs text-blue-600">
+                  +12% vs last month
+                </div>
+              </div>
+
+              {/* Total Revenue */}
+              <div className="p-4 bg-gradient-to-r from-violet-50 to-purple-50 rounded-lg border border-violet-100">
+                <div className="text-sm text-violet-600 font-medium">Total Revenue</div>
+                <div className="text-xl font-bold text-violet-800">
+                  ${(totalRevenue / 1000).toFixed(1)}K
+                </div>
+                <div className="text-xs text-violet-600">
+                  {monthlyRevenueData.length} active months
+                </div>
+              </div>
+
+              {/* Revenue Growth Trend */}
+              <div className="p-4 bg-gradient-to-r from-amber-50 to-orange-50 rounded-lg border border-amber-100">
+                <div className="text-sm text-amber-600 font-medium">Growth Trend</div>
+                <div className="text-xl font-bold text-amber-800">
+                  +{totalRevenue > 0 ? ((totalRevenue / 50000) * 100).toFixed(1) : 15.3}%
+                </div>
+                <div className="mt-2">
+                  <SparkAreaChart
+                    data={monthlyRevenueData.slice(-6)}
+                    categories={["revenue"]}
+                    colors={["amber"]}
+                    className="h-6 w-full"
+                  />
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Revenue Distribution */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Revenue Distribution</CardTitle>
+            <CardDescription>
+              Breakdown by category
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {orderData.slice(0, 5).map((category: any, index: number) => {
+                const percentage = Math.round((category.total / orderData.reduce((sum: number, cat: any) => sum + cat.total, 0)) * 100);
+                const colors = ['bg-emerald-500', 'bg-blue-500', 'bg-violet-500', 'bg-amber-500', 'bg-rose-500'];
+                const bgColors = ['bg-emerald-50', 'bg-blue-50', 'bg-violet-50', 'bg-amber-50', 'bg-rose-50'];
+                const textColors = ['text-emerald-600', 'text-blue-600', 'text-violet-600', 'text-amber-600', 'text-rose-600'];
+                const borderColors = ['border-emerald-200', 'border-blue-200', 'border-violet-200', 'border-amber-200', 'border-rose-200'];
+                
+                return (
+                  <div key={index} className={`p-3 rounded-lg border ${bgColors[index] || 'bg-gray-50'} ${borderColors[index] || 'border-gray-200'}`}>
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center space-x-2">
+                        <div className={`w-3 h-3 rounded-full ${colors[index] || 'bg-gray-400'}`} />
+                        <span className="text-sm font-medium">{category.category}</span>
+                      </div>
+                      <div className={`text-sm font-bold ${textColors[index] || 'text-gray-600'}`}>
+                        ${category.total.toLocaleString()}
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between mt-1">
+                      <span className="text-xs text-gray-500">{percentage}% of total</span>
+                      <span className="text-xs text-gray-500">{category.count} orders</span>
+                    </div>
+                    <div className="w-full bg-gray-200 rounded-full h-1.5 mt-2">
+                      <div 
+                        className={`h-1.5 rounded-full ${colors[index] || 'bg-gray-400'}`}
+                        style={{ width: `${percentage}%` }}
+                      />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Revenue Analytics Dashboard */}
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+        <Card className="xl:col-span-2">
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-xl font-bold flex items-center gap-2">
+                  <DollarSign className="h-5 w-5 text-blue-600" />
+                  Revenue Analytics
+                </CardTitle>
+                <CardDescription className="text-sm text-gray-600 mt-1">
+                  Comprehensive revenue analysis with trends, forecasting, and performance metrics
+                </CardDescription>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Badge variant="outline" className="text-blue-600 border-blue-200">
+                  ${(totalRevenue / 1000).toFixed(1)}K Total
+                </Badge>
+                <Badge variant="outline" className="text-emerald-600 border-emerald-200">
+                  +{totalRevenue > 0 ? ((totalRevenue / 50000) * 100).toFixed(1) : 15.3}% Growth
+                </Badge>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-6">
+              {/* Revenue Metrics Grid */}
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+                <div className="p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-lg border border-emerald-200">
+                  <div className="flex items-center justify-between mb-2">
+                    <DollarSign className="h-5 w-5 text-emerald-600" />
+                    <TrendingUp className="h-4 w-4 text-emerald-600" />
+                  </div>
+                  <div className="text-2xl font-bold text-emerald-800">${(totalRevenue / 1000).toFixed(1)}K</div>
+                  <div className="text-sm text-emerald-600 font-medium">Total Revenue</div>
+                  <div className="text-xs text-emerald-600">+12.5% vs last month</div>
+                </div>
+
+                <div className="p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg border border-blue-200">
+                  <div className="flex items-center justify-between mb-2">
+                    <TrendingUp className="h-5 w-5 text-blue-600" />
+                    <TrendingUp className="h-4 w-4 text-blue-600" />
+                  </div>
+                  <div className="text-2xl font-bold text-blue-800">${averageOrderValue.toFixed(0)}</div>
+                  <div className="text-sm text-blue-600 font-medium">Avg Order Value</div>
+                  <div className="text-xs text-blue-600">+8.2% vs last month</div>
+                </div>
+
+                <div className="p-4 bg-gradient-to-br from-violet-50 to-violet-100 rounded-lg border border-violet-200">
+                  <div className="flex items-center justify-between mb-2">
+                    <Users className="h-5 w-5 text-violet-600" />
+                    <TrendingUp className="h-4 w-4 text-violet-600" />
+                  </div>
+                  <div className="text-2xl font-bold text-violet-800">{monthlyRevenueData.length}</div>
+                  <div className="text-sm text-violet-600 font-medium">Active Months</div>
+                  <div className="text-xs text-violet-600">Growing steadily</div>
+                </div>
+
+                <div className="p-4 bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg border border-amber-200">
+                  <div className="flex items-center justify-between mb-2">
+                    <ShoppingCart className="h-5 w-5 text-amber-600" />
+                    <TrendingUp className="h-4 w-4 text-amber-600" />
+                  </div>
+                  <div className="text-2xl font-bold text-amber-800">{totalOrders}</div>
+                  <div className="text-sm text-amber-600 font-medium">Total Orders</div>
+                  <div className="text-xs text-amber-600">+15.3% growth</div>
+                </div>
+              </div>
+
+              {/* Revenue Trend Analysis */}
+              {monthlyRevenueData.length > 0 && (
+                <div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-lg border border-blue-200">
+                  <h3 className="text-lg font-semibold text-blue-800 mb-4 flex items-center gap-2">
+                    <TrendingUp className="h-5 w-5 text-blue-600" />
+                    Revenue Trend Analysis
+                  </h3>
+                  <AreaChart
+                    className="h-80"
+                    data={areaChartData}
+                    index="month"
+                    categories={["revenue", "cumulative"]}
+                    colors={["blue", "emerald"]}
+                    valueFormatter={(number: number) => 
+                      `$${Intl.NumberFormat("us").format(number)}`
+                    }
+                    showLegend={true}
+                    showGridLines={true}
+                    showXAxis={true}
+                    showYAxis={true}
+                  />
+                </div>
+              )}
+
+              {/* Revenue Distribution by Category */}
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div className="bg-white p-6 rounded-lg border border-gray-200">
+                  <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                    <PieChart className="h-5 w-5 text-gray-600" />
+                    Revenue Distribution
+                  </h3>
+                  <DonutChart
+                    className="h-64"
+                    data={donutChartData}
+                    category="value"
+                    index="name"
+                    valueFormatter={(number: number) => 
+                      `$${Intl.NumberFormat("us").format(number)}`
+                    }
+                    colors={["emerald", "blue", "violet", "amber", "rose", "cyan"]}
+                  />
+                </div>
+
+                <div className="bg-white p-6 rounded-lg border border-gray-200">
+                  <h3 className="text-lg font-semibold text-gray-800 mb-4">Revenue Insights</h3>
+                  <div className="space-y-4">
+                    {/* Top Revenue Category */}
+                    <div className="p-4 bg-gradient-to-r from-emerald-50 to-emerald-100 rounded-lg border border-emerald-200">
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <div className="text-sm text-emerald-600 font-medium">Top Revenue Category</div>
+                          <div className="text-xl font-bold text-emerald-800">
+                            {orderData.length > 0 ? orderData.sort((a: any, b: any) => b.total - a.total)[0]?.category || 'N/A' : 'Electronics'}
+                          </div>
+                        </div>
+                        <div className="text-right">
+                          <div className="text-lg font-bold text-emerald-700">
+                            ${orderData.length > 0 ? orderData.sort((a: any, b: any) => b.total - a.total)[0]?.total?.toLocaleString() || '0' : '8,750'}
+                          </div>
+                          <div className="text-xs text-emerald-600">
+                            {orderData.length > 0 ? Math.round((orderData.sort((a: any, b: any) => b.total - a.total)[0]?.total || 0) / orderData.reduce((sum: number, cat: any) => sum + cat.total, 0) * 100) : 35}% of total
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Revenue Growth Prediction */}
+                    <div className="p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg border border-blue-200">
+                      <div className="text-sm text-blue-600 font-medium">Projected Growth</div>
+                      <div className="text-xl font-bold text-blue-800">
+                        +{totalRevenue > 0 ? ((totalRevenue / 50000) * 100).toFixed(1) : 18.5}%
+                      </div>
+                      <div className="text-xs text-blue-600">Next quarter forecast</div>
+                      <div className="mt-2">
+                        <SparkAreaChart
+                          data={monthlyRevenueData.slice(-6)}
+                          categories={["revenue"]}
+                          colors={["blue"]}
+                          className="h-8 w-full"
+                        />
+                      </div>
+                    </div>
+
+                    {/* Performance Score */}
+                    <div className="p-4 bg-gradient-to-r from-violet-50 to-violet-100 rounded-lg border border-violet-200">
+                      <div className="text-sm text-violet-600 font-medium">Performance Score</div>
+                      <div className="flex items-center space-x-2">
+                        <div className="text-xl font-bold text-violet-800">
+                          {Math.min(100, Math.round((totalRevenue / 30000) * 100))}%
+                        </div>
+                        <div className="flex-1 bg-violet-200 rounded-full h-2">
+                          <div 
+                            className="bg-violet-500 h-2 rounded-full transition-all duration-1000" 
+                            style={{ width: `${Math.min(100, Math.round((totalRevenue / 30000) * 100))}%` }}
+                          />
+                        </div>
+                      </div>
+                      <div className="text-xs text-violet-600 mt-1">Excellent performance</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};