team filter

app/(app)/dashboard/page.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { useState, useEffect } from 'react';
-import { format } from 'date-fns';
+import { format, subDays } from 'date-fns';
 import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
 import TimeSeriesChart from '@/app/components/charts/TimeSeriesChart';
 import GeoAnalytics from '@/app/components/analytics/GeoAnalytics';
 import DevicePieCharts from '@/app/components/charts/DevicePieCharts';
 import { EventsSummary, TimeSeriesData, GeoData, DeviceAnalytics as DeviceAnalyticsType } from '@/app/api/types';
+import { TeamSelector } from '@/app/components/ui/TeamSelector';
 
 // 事件类型定义
 interface Event {
@@ -24,36 +25,6 @@ interface Event {
   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 '';
@@ -65,11 +36,15 @@ const formatDate = (dateString: string) => {
 };
 
 export default function DashboardPage() {
+  // 默认日期范围为最近7天
+  const today = new Date();
   const [dateRange, setDateRange] = useState({
-    from: new Date('2024-02-01'),
+    from: subDays(today, 7), // 7天前
-    to: new Date('2025-03-05')
+    to: today // 今天
   });
-
+  
+  // 添加团队选择状态 - 使用数组支持多选
+  const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [summary, setSummary] = useState<EventsSummary | null>(null);
@@ -88,32 +63,49 @@ export default function DashboardPage() {
         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'");
 
+        // 构建基础URL和查询参数
+        const baseUrl = '/api/events';
+        const params = new URLSearchParams({
+          startTime,
+          endTime,
+          ...(urlFilter && { urlId: urlFilter })
+        });
+        
+        // 添加团队ID参数 - 支持多个团队
+        if (selectedTeamIds.length > 0) {
+          selectedTeamIds.forEach(teamId => {
+            params.append('teamId', teamId);
+          });
+        }
+
         // 并行获取所有数据
         const [summaryRes, timeSeriesRes, geoRes, deviceRes, eventsRes] = await Promise.all([
-          fetch(`/api/events/summary?startTime=${startTime}&endTime=${endTime}`),
+          fetch(`${baseUrl}/summary?${params.toString()}`),
-          fetch(`/api/events/time-series?startTime=${startTime}&endTime=${endTime}`),
+          fetch(`${baseUrl}/time-series?${params.toString()}`),
-          fetch(`/api/events/geo?startTime=${startTime}&endTime=${endTime}`),
+          fetch(`${baseUrl}/geo?${params.toString()}`),
-          fetch(`/api/events/devices?startTime=${startTime}&endTime=${endTime}`),
+          fetch(`${baseUrl}/devices?${params.toString()}`),
-          fetchEvents(startTime, endTime, urlFilter || undefined)
+          fetch(`${baseUrl}?${params.toString()}`)
         ]);
 
-        const [summaryData, timeSeriesData, geoData, deviceData] = await Promise.all([
+        const [summaryData, timeSeriesData, geoData, deviceData, eventsData] = await Promise.all([
           summaryRes.json(),
           timeSeriesRes.json(),
           geoRes.json(),
-          deviceRes.json()
+          deviceRes.json(),
+          eventsRes.json()
         ]);
 
         if (!summaryRes.ok) throw new Error(summaryData.error || 'Failed to fetch summary data');
         if (!timeSeriesRes.ok) throw new Error(timeSeriesData.error || 'Failed to fetch time series data');
         if (!geoRes.ok) throw new Error(geoData.error || 'Failed to fetch geo data');
         if (!deviceRes.ok) throw new Error(deviceData.error || 'Failed to fetch device data');
+        if (!eventsRes.ok) throw new Error(eventsData.error || 'Failed to fetch events data');
 
         setSummary(summaryData.data);
         setTimeSeriesData(timeSeriesData.data);
         setGeoData(geoData.data);
         setDeviceData(deviceData.data);
-        setEvents(eventsRes || []);
+        setEvents(eventsData.data || []);
       } catch (err) {
         setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
       } finally {
@@ -122,7 +114,7 @@ export default function DashboardPage() {
     };
 
     fetchData();
-  }, [dateRange, urlFilter]);
+  }, [dateRange, urlFilter, selectedTeamIds]);
 
   if (loading) {
     return (
@@ -144,12 +136,50 @@ export default function DashboardPage() {
     <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">Analytics Dashboard</h1>
-        <DateRangePicker
+        <div className="flex items-center space-x-4">
-          value={dateRange}
+          <TeamSelector
-          onChange={setDateRange}
+            value={selectedTeamIds}
-        />
+            onChange={(value) => setSelectedTeamIds(Array.isArray(value) ? value : [value])}
+            className="w-[250px]"
+            multiple={true}
+          />
+          <DateRangePicker
+            value={dateRange}
+            onChange={setDateRange}
+          />
+        </div>
       </div>
 
+      {/* 显示团队选择信息 */}
+      {selectedTeamIds.length > 0 && (
+        <div className="bg-blue-50 rounded-lg p-3 mb-6 flex items-center">
+          <span className="text-blue-700 font-medium mr-2">
+            {selectedTeamIds.length === 1 ? 'Team filter:' : 'Teams filter:'}
+          </span>
+          <div className="flex flex-wrap gap-2">
+            {selectedTeamIds.map(teamId => (
+              <span key={teamId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                {teamId}
+                <button
+                  onClick={() => setSelectedTeamIds(selectedTeamIds.filter(id => id !== teamId))}
+                  className="ml-1 text-blue-600 hover:text-blue-800"
+                >
+                  ×
+                </button>
+              </span>
+            ))}
+            {selectedTeamIds.length > 0 && (
+              <button
+                onClick={() => setSelectedTeamIds([])}
+                className="text-xs text-gray-500 hover:text-gray-700 underline"
+              >
+                Clear all
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
       {summary && (
         <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
           <div className="bg-white rounded-lg shadow p-6">