rm dack

app/(app)/events/page.tsx

@@ -1,227 +1,222 @@
 "use client";
 
 import { useState, useEffect } from 'react';
-import { addDays, format } from 'date-fns';
-import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
-import { Event } from '@/app/api/types';
+import { format } from 'date-fns';
+
+// 更复杂的事件类型定义
+interface Event {
+  event_id?: string;
+  url_id: string;
+  url: string;
+  event_type: string;
+  visitor_id: string;
+  created_at: string;
+  referrer?: string;
+  browser?: string;
+  os?: string;
+  device_type?: string;
+  country?: string;
+  city?: string;
+}
+
+// 创建获取事件的函数
+const fetchEvents = async (
+  startTime?: string, 
+  endTime?: string, 
+  urlId?: string, 
+  eventType?: string
+): Promise<Event[]> => {
+  try {
+    // 构建查询参数
+    const params = new URLSearchParams();
+    if (startTime) params.append('startTime', startTime);
+    if (endTime) params.append('endTime', endTime);
+    if (urlId) params.append('urlId', urlId);
+    if (eventType) params.append('eventType', eventType);
+    
+    // 发送请求
+    const response = await fetch(`/api/events?${params.toString()}`);
+    
+    if (!response.ok) {
+      throw new Error('Failed to fetch events');
+    }
+    
+    const data = await response.json();
+    return data.data || [];
+  } catch (error) {
+    console.error('Error fetching events:', error);
+    return [];
+  }
+};
+
+const formatDate = (dateString: string) => {
+  if (!dateString) return '';
+  try {
+    return format(new Date(dateString), 'yyyy-MM-dd HH:mm:ss');
+  } catch {
+    return dateString;
+  }
+};
 
 export default function EventsPage() {
-  const [dateRange, setDateRange] = useState({
-    from: new Date('2024-02-01'),
-    to: new Date('2025-03-05')
-  });
-
+  // 状态定义
+  const [events, setEvents] = useState<Event[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [events, setEvents] = useState<Event[]>([]);
-  const [page, setPage] = useState(1);
-  const [hasMore, setHasMore] = useState(true);
-  const [filter, setFilter] = useState({
-    eventType: '',
-    linkId: '',
-    linkSlug: ''
-  });
-
   const [filters, setFilters] = useState({
-    startTime: format(new Date('2024-02-01'), "yyyy-MM-dd'T'HH:mm:ss'Z'"),
-    endTime: format(new Date('2025-03-05'), "yyyy-MM-dd'T'HH:mm:ss'Z'"),
-    page: 1,
-    pageSize: 20
+    startDate: format(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), 'yyyy-MM-dd'),
+    endDate: format(new Date(), 'yyyy-MM-dd'),
+    urlId: '',
+    eventType: ''
   });
-
-  const [summary, setSummary] = useState<any>(null);
-
-  const fetchEvents = async (pageNum: number) => {
-    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 params = new URLSearchParams({
-        startTime,
-        endTime,
-        page: pageNum.toString(),
-        pageSize: '50'
-      });
-
-      if (filter.eventType) params.append('eventType', filter.eventType);
-      if (filter.linkId) params.append('linkId', filter.linkId);
-      if (filter.linkSlug) params.append('linkSlug', filter.linkSlug);
-
-      const response = await fetch(`/api/events?${params.toString()}`);
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || 'Failed to fetch events');
-      }
-
-      const eventsData = data.data || data.events || [];
-      
-      if (pageNum === 1) {
-        setEvents(eventsData);
-      } else {
-        setEvents(prev => [...prev, ...eventsData]);
-      }
-
-      setHasMore(Array.isArray(eventsData) && eventsData.length === 50);
-    } catch (err) {
-      console.error("Error fetching events:", err);
-      setError(err instanceof Error ? err.message : 'An error occurred while fetching events');
-      setEvents([]);
-    } finally {
-      setLoading(false);
-    }
-  };
-
+  
+  // 加载事件数据
   useEffect(() => {
-    setPage(1);
-    setEvents([]);
-    setLoading(true);
-    fetchEvents(1);
-  }, [dateRange, filter]);
-
-  const loadMore = () => {
-    if (!loading && hasMore) {
-      const nextPage = page + 1;
-      setPage(nextPage);
-      fetchEvents(nextPage);
-    }
+    const loadEvents = async () => {
+      setLoading(true);
+      setError(null);
+      
+      try {
+        const startTime = `${filters.startDate}T00:00:00Z`;
+        const endTime = `${filters.endDate}T23:59:59Z`;
+        
+        const eventsData = await fetchEvents(
+          startTime,
+          endTime,
+          filters.urlId || undefined,
+          filters.eventType || undefined
+        );
+        
+        setEvents(eventsData);
+      } catch (err) {
+        setError('Failed to load events');
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    
+    loadEvents();
+  }, [filters]);
+  
+  // 处理筛选条件变化
+  const handleFilterChange = (name: string, value: string) => {
+    setFilters(prev => ({
+      ...prev,
+      [name]: value
+    }));
   };
-
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleString();
-  };
-
-  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">Events</h1>
-        <DateRangePicker
-          value={dateRange}
-          onChange={setDateRange}
-        />
+      {/* 页面标题 */}
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">Events</h1>
+        <p className="mt-2 text-gray-600">View and analyze all events for your URLs</p>
       </div>
-
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      
+      {/* 过滤器面板 */}
+      <div className="bg-white rounded-lg shadow p-6 mb-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
           <div>
-            <label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
-              Event Type
-            </label>
-            <select
-              value={filter.eventType}
-              onChange={e => setFilter(prev => ({ ...prev, eventType: e.target.value }))}
-              className="block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-900 dark:text-gray-100"
-            >
-              <option value="">All Types</option>
-              <option value="click">Click</option>
-              <option value="conversion">Conversion</option>
-            </select>
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
-              Link ID
+            <label className="block text-sm font-medium text-gray-500 mb-1">
+              Start Date
             </label>
             <input
-              type="text"
-              value={filter.linkId}
-              onChange={e => setFilter(prev => ({ ...prev, linkId: e.target.value }))}
-              placeholder="Enter Link ID"
-              className="block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-900 dark:text-gray-100"
+              type="date"
+              value={filters.startDate}
+              onChange={e => handleFilterChange('startDate', e.target.value)}
+              className="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm text-gray-900"
             />
           </div>
+          
           <div>
-            <label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
-              Link Slug
+            <label className="block text-sm font-medium text-gray-500 mb-1">
+              End Date
+            </label>
+            <input
+              type="date"
+              value={filters.endDate}
+              onChange={e => handleFilterChange('endDate', e.target.value)}
+              className="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm text-gray-900"
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-gray-500 mb-1">
+              URL ID
             </label>
             <input
               type="text"
-              value={filter.linkSlug}
-              onChange={e => setFilter(prev => ({ ...prev, linkSlug: e.target.value }))}
-              placeholder="Enter Link Slug"
-              className="block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-900 dark:text-gray-100"
+              value={filters.urlId}
+              onChange={e => handleFilterChange('urlId', e.target.value)}
+              className="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm text-gray-900"
+              placeholder="Filter by URL ID"
             />
           </div>
         </div>
       </div>
-
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
+      
+      {/* 事件表格 */}
+      <div className="bg-white rounded-lg shadow overflow-hidden">
         <div className="overflow-x-auto">
-          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-            <thead className="bg-gray-50 dark:bg-gray-900">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50">
               <tr>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                   Time
                 </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                  Type
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  URL ID
                 </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                  Link
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  URL
                 </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                  Visitor
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Event Type
                 </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                  Location
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Visitor ID
                 </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                   Referrer
                 </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                  Conversion
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Location
                 </th>
               </tr>
             </thead>
-            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-              {Array.isArray(events) && events.map((event, index) => (
-                <tr key={event.event_id || index} className={index % 2 === 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-900'}>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                    {event.event_time && formatDate(event.event_time)}
+            <tbody className="bg-white divide-y divide-gray-200">
+              {events.map((event, index) => (
+                <tr key={event.event_id || index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {formatDate(event.created_at)}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {event.url_id}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <a href={event.url} className="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">
+                      {event.url}
+                    </a>
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap text-sm">
-                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                      event.event_type === 'conversion' ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100' : 'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100'
+                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                      event.event_type === 'click' 
+                        ? 'bg-green-100 text-green-800' 
+                        : 'bg-blue-100 text-blue-800'
                     }`}>
-                      {event.event_type || 'unknown'}
+                      {event.event_type}
                     </span>
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                    <div>
-                      <div className="font-medium">{event.link_slug || '-'}</div>
-                      <div className="text-gray-500 dark:text-gray-400 text-xs">{event.link_original_url || '-'}</div>
-                    </div>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {event.visitor_id.substring(0, 8)}...
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                    <div>
-                      <div>{event.browser || '-'}</div>
-                      <div className="text-gray-500 dark:text-gray-400 text-xs">{event.os || '-'} / {event.device_type || '-'}</div>
-                    </div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                    <div>
-                      <div>{event.city || '-'}</div>
-                      <div className="text-gray-500 dark:text-gray-400 text-xs">{event.country || '-'}</div>
-                    </div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                     {event.referrer || '-'}
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                    <div>
-                      <div>{event.conversion_type || '-'}</div>
-                      {event.conversion_value > 0 && (
-                        <div className="text-gray-500 dark:text-gray-400 text-xs">Value: {event.conversion_value}</div>
-                      )}
-                    </div>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {event.country && event.city ? `${event.city}, ${event.country}` : (event.country || '-')}
                   </td>
                 </tr>
               ))}
@@ -229,25 +224,23 @@ export default function EventsPage() {
           </table>
         </div>
 
+        {/* 加载状态 */}
         {loading && (
-          <div className="flex justify-center p-4">
-            <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500" />
+          <div className="flex justify-center items-center p-8">
+            <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
           </div>
         )}
 
-        {!loading && hasMore && (
-          <div className="flex justify-center p-4">
-            <button
-              onClick={loadMore}
-              className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
-            >
-              Load More
-            </button>
+        {/* 错误状态 */}
+        {error && (
+          <div className="flex justify-center items-center p-8 text-red-500">
+            {error}
           </div>
         )}
 
-        {!loading && Array.isArray(events) && events.length === 0 && (
-          <div className="flex justify-center p-8 text-gray-500 dark:text-gray-400">
+        {/* 空状态 */}
+        {!loading && !error && events.length === 0 && (
+          <div className="flex justify-center items-center p-8 text-gray-500">
             No events found
           </div>
         )}