create-bluecopa-react-app 1.0.4 → 1.0.5

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>
+  );
+};