front

2025-03-25 20:54:02 +08:00
parent 92d82b18a0
commit efdfe8bf8e
17 changed files with 1553 additions and 235 deletions
--- a/app/analytics/conversions/page.tsx
+++ b/app/analytics/conversions/page.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { addDays, format } from 'date-fns';
+import { DateRangePicker } from '../../components/ui/DateRangePicker';
+import TimeSeriesChart from '../../components/charts/TimeSeriesChart';
+import { TimeSeriesData } from '../../api/types';
+
+interface ConversionStats {
+  totalConversions: number;
+  conversionRate: number;
+  averageValue: number;
+  conversionsByType: {
+    type: string;
+    count: number;
+    value: number;
+    percentage: number;
+  }[];
+}
+
+export default function ConversionsPage() {
+  const [dateRange, setDateRange] = useState({
+    from: new Date('2024-02-01'),
+    to: new Date('2025-03-05')
+  });
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [stats, setStats] = useState<ConversionStats | null>(null);
+  const [timeSeriesData, setTimeSeriesData] = useState<TimeSeriesData[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const startTime = format(dateRange.from, "yyyy-MM-dd'T'HH:mm:ss'Z'");
+        const endTime = format(dateRange.to, "yyyy-MM-dd'T'HH:mm:ss'Z'");
+
+        const [statsRes, timeSeriesRes] = await Promise.all([
+          fetch(`/api/events/conversions/stats?startTime=${startTime}&endTime=${endTime}`),
+          fetch(`/api/events/conversions/time-series?startTime=${startTime}&endTime=${endTime}`)
+        ]);
+
+        const [statsData, timeSeriesData] = await Promise.all([
+          statsRes.json(),
+          timeSeriesRes.json()
+        ]);
+
+        if (!statsRes.ok) throw new Error(statsData.error || 'Failed to fetch conversion stats');
+        if (!timeSeriesRes.ok) throw new Error(timeSeriesData.error || 'Failed to fetch time series data');
+
+        setStats(statsData);
+        setTimeSeriesData(timeSeriesData.data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [dateRange]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-red-500">{error}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="flex justify-between items-center mb-8">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Conversion Analytics</h1>
+        <DateRangePicker
+          value={dateRange}
+          onChange={setDateRange}
+        />
+      </div>
+
+      {stats && (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Total Conversions</h3>
+            <p className="text-2xl font-semibold text-gray-900 dark:text-gray-100">{stats.totalConversions.toLocaleString()}</p>
+          </div>
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Conversion Rate</h3>
+            <p className="text-2xl font-semibold text-gray-900 dark:text-gray-100">{stats.conversionRate.toFixed(2)}%</p>
+          </div>
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Average Value</h3>
+            <p className="text-2xl font-semibold text-gray-900 dark:text-gray-100">${stats.averageValue.toFixed(2)}</p>
+          </div>
+        </div>
+      )}
+
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Conversion Trends</h2>
+        <div className="h-96">
+          <TimeSeriesChart data={timeSeriesData} />
+        </div>
+      </div>
+
+      {stats && (
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Conversion Types</h2>
+          <div className="space-y-6">
+            {stats.conversionsByType.map((item, index) => (
+              <div key={index}>
+                <div className="flex justify-between items-center mb-2">
+                  <div>
+                    <span className="text-gray-900 dark:text-gray-100 font-medium">{item.type}</span>
+                    <span className="text-gray-500 dark:text-gray-400 text-sm ml-2">
+                      {item.count.toLocaleString()} conversions
+                    </span>
+                  </div>
+                  <div className="text-right">
+                    <span className="text-gray-900 dark:text-gray-100 font-medium">
+                      ${item.value.toFixed(2)}
+                    </span>
+                    <span className="text-gray-500 dark:text-gray-400 text-sm ml-2">
+                      ({item.percentage.toFixed(1)}%)
+                    </span>
+                  </div>
+                </div>
+                <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                  <div
+                    className="bg-blue-500 h-2 rounded-full"
+                    style={{ width: `${item.percentage}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}