From 87c38032363700c8a8189ee612499d3ff5abc278 Mon Sep 17 00:00:00 2001
From: William Tso <vitalitymailg@gmail.com>
Date: Tue, 1 Apr 2025 22:40:33 +0800
Subject: [PATCH] add filter

---
 app/(app)/dashboard/page.tsx | 376 ++++++++++++++++++++++-------------
 1 file changed, 237 insertions(+), 139 deletions(-)

diff --git a/app/(app)/dashboard/page.tsx b/app/(app)/dashboard/page.tsx
index 50f73e9..c97c2de 100644
--- a/app/(app)/dashboard/page.tsx
+++ b/app/(app)/dashboard/page.tsx
@@ -8,6 +8,8 @@ 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';
+import { ProjectSelector } from '@/app/components/ui/ProjectSelector';
+import { TagSelector } from '@/app/components/ui/TagSelector';
 
 // 事件类型定义
 interface Event {
@@ -102,6 +104,11 @@ export default function DashboardPage() {
   
   // 添加团队选择状态 - 使用数组支持多选
   const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
+  // 添加项目选择状态 - 使用数组支持多选
+  const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
+  // 添加标签选择状态 - 使用数组支持多选
+  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
+  
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [summary, setSummary] = useState<EventsSummary | null>(null);
@@ -132,6 +139,20 @@ export default function DashboardPage() {
             params.append('teamId', teamId);
           });
         }
+        
+        // 添加项目ID参数 - 支持多个项目
+        if (selectedProjectIds.length > 0) {
+          selectedProjectIds.forEach(projectId => {
+            params.append('projectId', projectId);
+          });
+        }
+        
+        // 添加标签ID参数 - 支持多个标签
+        if (selectedTagIds.length > 0) {
+          selectedTagIds.forEach(tagId => {
+            params.append('tagId', tagId);
+          });
+        }
 
         // 并行获取所有数据
         const [summaryRes, timeSeriesRes, geoRes, deviceRes, eventsRes] = await Promise.all([
@@ -169,7 +190,7 @@ export default function DashboardPage() {
     };
 
     fetchData();
-  }, [dateRange, selectedTeamIds]);
+  }, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagIds]);
 
   if (loading) {
     return (
@@ -191,13 +212,27 @@ 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>
-        <div className="flex items-center space-x-4">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center">
           <TeamSelector
             value={selectedTeamIds}
             onChange={(value) => setSelectedTeamIds(Array.isArray(value) ? value : [value])}
             className="w-[250px]"
             multiple={true}
           />
+          <ProjectSelector
+            value={selectedProjectIds}
+            onChange={(value) => setSelectedProjectIds(Array.isArray(value) ? value : [value])}
+            className="w-[250px]"
+            multiple={true}
+            teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
+          />
+          <TagSelector
+            value={selectedTagIds}
+            onChange={(value) => setSelectedTagIds(Array.isArray(value) ? value : [value])}
+            className="w-[250px]"
+            multiple={true}
+            teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
+          />
           <DateRangePicker
             value={dateRange}
             onChange={setDateRange}
@@ -235,151 +270,214 @@ export default function DashboardPage() {
         </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">
-            <h3 className="text-sm font-medium text-gray-500">Total Events</h3>
-            <p className="text-2xl font-semibold text-gray-900">
-              {typeof summary.totalEvents === 'number' ? summary.totalEvents.toLocaleString() : summary.totalEvents}
-            </p>
-          </div>
-          <div className="bg-white rounded-lg shadow p-6">
-            <h3 className="text-sm font-medium text-gray-500">Unique Visitors</h3>
-            <p className="text-2xl font-semibold text-gray-900">
-              {typeof summary.uniqueVisitors === 'number' ? summary.uniqueVisitors.toLocaleString() : summary.uniqueVisitors}
-            </p>
-          </div>
-          <div className="bg-white rounded-lg shadow p-6">
-            <h3 className="text-sm font-medium text-gray-500">Total Conversions</h3>
-            <p className="text-2xl font-semibold text-gray-900">
-              {typeof summary.totalConversions === 'number' ? summary.totalConversions.toLocaleString() : summary.totalConversions}
-            </p>
-          </div>
-          <div className="bg-white rounded-lg shadow p-6">
-            <h3 className="text-sm font-medium text-gray-500">Avg. Time Spent</h3>
-            <p className="text-2xl font-semibold text-gray-900">
-              {summary.averageTimeSpent?.toFixed(1) || '0'}s
-            </p>
+      {/* 显示项目选择信息 */}
+      {selectedProjectIds.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">
+            {selectedProjectIds.length === 1 ? 'Project filter:' : 'Projects filter:'}
+          </span>
+          <div className="flex flex-wrap gap-2">
+            {selectedProjectIds.map(projectId => (
+              <span key={projectId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                {projectId}
+                <button
+                  onClick={() => setSelectedProjectIds(selectedProjectIds.filter(id => id !== projectId))}
+                  className="ml-1 text-blue-600 hover:text-blue-800"
+                >
+                  ×
+                </button>
+              </span>
+            ))}
+            {selectedProjectIds.length > 0 && (
+              <button
+                onClick={() => setSelectedProjectIds([])}
+                className="text-xs text-gray-500 hover:text-gray-700 underline"
+              >
+                Clear all
+              </button>
+            )}
           </div>
         </div>
       )}
 
-      <div className="bg-white rounded-lg shadow p-6 mb-8">
-        <h2 className="text-lg font-semibold text-gray-900 mb-4">Event Trends</h2>
-        <div className="h-96">
-          <TimeSeriesChart data={timeSeriesData} />
+      {/* 显示标签选择信息 */}
+      {selectedTagIds.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">
+            {selectedTagIds.length === 1 ? 'Tag filter:' : 'Tags filter:'}
+          </span>
+          <div className="flex flex-wrap gap-2">
+            {selectedTagIds.map(tagId => (
+              <span key={tagId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                {tagId}
+                <button
+                  onClick={() => setSelectedTagIds(selectedTagIds.filter(id => id !== tagId))}
+                  className="ml-1 text-blue-600 hover:text-blue-800"
+                >
+                  ×
+                </button>
+              </span>
+            ))}
+            {selectedTagIds.length > 0 && (
+              <button
+                onClick={() => setSelectedTagIds([])}
+                className="text-xs text-gray-500 hover:text-gray-700 underline"
+              >
+                Clear all
+              </button>
+            )}
+          </div>
         </div>
-      </div>
+      )}
 
-      <div className="mb-8">
-        <h2 className="text-lg font-semibold text-gray-900 mb-4">Device Analytics</h2>
-        {deviceData && <DevicePieCharts data={deviceData} />}
-      </div>
-
-      <div className="bg-white rounded-lg shadow p-6 mb-8">
-        <h2 className="text-lg font-semibold text-gray-900 mb-4">Geographic Distribution</h2>
-        <GeoAnalytics data={geoData} />
-      </div>
-
-      {/* 事件列表部分 */}
-      <div className="bg-white rounded-lg shadow overflow-hidden mb-8">
-        <div className="p-6 border-b border-gray-200">
-          <h2 className="text-lg font-semibold text-gray-900 mb-4">Recent Events</h2>
-        </div>
-        
-        <div className="overflow-x-auto">
-          <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 uppercase tracking-wider">
-                  Time
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Link Name
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Original URL
-                </th>
-                <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 uppercase tracking-wider">
-                  User
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Team/Project
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Device Info
-                </th>
-              </tr>
-            </thead>
-            <tbody className="bg-white divide-y divide-gray-200">
-              {events.map((event, index) => {
-                const info = extractEventInfo(event);
-                return (
-                  <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(info.eventTime)}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                      <span className="font-medium">{info.linkName}</span>
-                      <div className="text-xs text-gray-500 mt-1 truncate max-w-xs">
-                        ID: {event.link_id?.substring(0, 8) || '-'}
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-blue-600">
-                      <a href={info.originalUrl} className="hover:underline truncate max-w-xs block" target="_blank" rel="noopener noreferrer">
-                        {info.originalUrl}
-                      </a>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm">
-                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
-                        info.eventType === 'click' 
-                          ? 'bg-green-100 text-green-800' 
-                          : 'bg-blue-100 text-blue-800'
-                      }`}>
-                        {info.eventType}
-                      </span>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      <div className="font-medium">{info.userInfo}</div>
-                      <div className="text-xs text-gray-400 mt-1">{info.visitorId}...</div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      <div className="font-medium">{info.teamName}</div>
-                      <div className="text-xs text-gray-400 mt-1">{info.projectName}</div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      <div className="flex flex-col">
-                        <span className="text-xs inline-flex items-center mb-1">
-                          <span className="font-medium">Device:</span> 
-                          <span className="ml-1">{info.device}</span>
-                        </span>
-                        <span className="text-xs inline-flex items-center mb-1">
-                          <span className="font-medium">Browser:</span> 
-                          <span className="ml-1">{info.browser}</span>
-                        </span>
-                        <span className="text-xs inline-flex items-center">
-                          <span className="font-medium">OS:</span> 
-                          <span className="ml-1">{info.os}</span>
-                        </span>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-
-        {/* 表格为空状态 */}
-        {!loading && events.length === 0 && (
-          <div className="flex justify-center items-center p-8 text-gray-500">
-            No events found
+      {/* 仪表板内容 */}
+      <>
+        {summary && (
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+            <div className="bg-white rounded-lg shadow p-6">
+              <h3 className="text-sm font-medium text-gray-500">Total Events</h3>
+              <p className="text-2xl font-semibold text-gray-900">
+                {typeof summary.totalEvents === 'number' ? summary.totalEvents.toLocaleString() : summary.totalEvents}
+              </p>
+            </div>
+            <div className="bg-white rounded-lg shadow p-6">
+              <h3 className="text-sm font-medium text-gray-500">Unique Visitors</h3>
+              <p className="text-2xl font-semibold text-gray-900">
+                {typeof summary.uniqueVisitors === 'number' ? summary.uniqueVisitors.toLocaleString() : summary.uniqueVisitors}
+              </p>
+            </div>
+            <div className="bg-white rounded-lg shadow p-6">
+              <h3 className="text-sm font-medium text-gray-500">Total Conversions</h3>
+              <p className="text-2xl font-semibold text-gray-900">
+                {typeof summary.totalConversions === 'number' ? summary.totalConversions.toLocaleString() : summary.totalConversions}
+              </p>
+            </div>
+            <div className="bg-white rounded-lg shadow p-6">
+              <h3 className="text-sm font-medium text-gray-500">Avg. Time Spent</h3>
+              <p className="text-2xl font-semibold text-gray-900">
+                {summary.averageTimeSpent?.toFixed(1) || '0'}s
+              </p>
+            </div>
           </div>
         )}
-      </div>
+
+        <div className="bg-white rounded-lg shadow p-6 mb-8">
+          <h2 className="text-lg font-semibold text-gray-900 mb-4">Event Trends</h2>
+          <div className="h-96">
+            <TimeSeriesChart data={timeSeriesData} />
+          </div>
+        </div>
+
+        <div className="mb-8">
+          <h2 className="text-lg font-semibold text-gray-900 mb-4">Device Analytics</h2>
+          {deviceData && <DevicePieCharts data={deviceData} />}
+        </div>
+
+        <div className="bg-white rounded-lg shadow p-6 mb-8">
+          <h2 className="text-lg font-semibold text-gray-900 mb-4">Geographic Distribution</h2>
+          <GeoAnalytics data={geoData} />
+        </div>
+
+        {/* 事件列表部分 */}
+        <div className="bg-white rounded-lg shadow overflow-hidden mb-8">
+          <div className="p-6 border-b border-gray-200">
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">Recent Events</h2>
+          </div>
+          
+          <div className="overflow-x-auto">
+            <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 uppercase tracking-wider">
+                    Time
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Link Name
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Original URL
+                  </th>
+                  <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 uppercase tracking-wider">
+                    User
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Team/Project
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Device Info
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {events.map((event, index) => {
+                  const info = extractEventInfo(event);
+                  return (
+                    <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(info.eventTime)}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                        <span className="font-medium">{info.linkName}</span>
+                        <div className="text-xs text-gray-500 mt-1 truncate max-w-xs">
+                          ID: {event.link_id?.substring(0, 8) || '-'}
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-blue-600">
+                        <a href={info.originalUrl} className="hover:underline truncate max-w-xs block" target="_blank" rel="noopener noreferrer">
+                          {info.originalUrl}
+                        </a>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm">
+                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                          info.eventType === 'click' 
+                            ? 'bg-green-100 text-green-800' 
+                            : 'bg-blue-100 text-blue-800'
+                        }`}>
+                          {info.eventType}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <div className="font-medium">{info.userInfo}</div>
+                        <div className="text-xs text-gray-400 mt-1">{info.visitorId}...</div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <div className="font-medium">{info.teamName}</div>
+                        <div className="text-xs text-gray-400 mt-1">{info.projectName}</div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <div className="flex flex-col">
+                          <span className="text-xs inline-flex items-center mb-1">
+                            <span className="font-medium">Device:</span> 
+                            <span className="ml-1">{info.device}</span>
+                          </span>
+                          <span className="text-xs inline-flex items-center mb-1">
+                            <span className="font-medium">Browser:</span> 
+                            <span className="ml-1">{info.browser}</span>
+                          </span>
+                          <span className="text-xs inline-flex items-center">
+                            <span className="font-medium">OS:</span> 
+                            <span className="ml-1">{info.os}</span>
+                          </span>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {/* 表格为空状态 */}
+          {!loading && events.length === 0 && (
+            <div className="flex justify-center items-center p-8 text-gray-500">
+              No events found
+            </div>
+          )}
+        </div>
+      </>
     </div>
   );
 } 
\ No newline at end of file