events pages

app/(app)/analytics/page.tsx

@@ -1,126 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { subDays } from 'date-fns';
-import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
-import { TeamSelector } from '@/app/components/ui/TeamSelector';
-import { ProjectSelector } from '@/app/components/ui/ProjectSelector';
-import { TagSelector } from '@/app/components/ui/TagSelector';
-
-export default function AnalyticsPage() {
-  // 默认日期范围为最近7天
-  const today = new Date();
-  const [dateRange, setDateRange] = useState({
-    from: subDays(today, 7), // 7天前
-    to: today // 今天
-  });
-
-  // 添加团队选择状态 - 使用数组支持多选
-  const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
-  
-  // 添加项目选择状态 - 使用数组支持多选
-  const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
-  
-  // 添加标签选择状态 - 使用数组支持多选
-  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
-
-  // 分析是否有任何选择
-  const hasNoSelection = selectedTeamIds.length === 0 && 
-                          selectedProjectIds.length === 0 && 
-                          selectedTagIds.length === 0;
-
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-8">
-        <h1 className="text-xl font-bold text-gray-900">Analytics</h1>
-        
-        <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}
-          />
-        </div>
-      </div>
-
-      {/* 如果没有选择任何项，显示提示信息 */}
-      {hasNoSelection && (
-        <div className="flex items-center justify-center p-8 bg-gray-50 rounded-lg">
-          <p className="text-gray-500">
-            Please select teams, projects, or tags to view analytics
-          </p>
-        </div>
-      )}
-
-      {/* 显示团队相关的分析数据 */}
-      {selectedTeamIds.length > 0 && (
-        <div className="bg-white rounded-lg shadow p-6 mb-6">
-          <h2 className="text-lg font-semibold text-gray-900 mb-4">
-            Team Analytics ({selectedTeamIds.length} selected)
-          </h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {selectedTeamIds.map((teamId) => (
-              <div key={teamId} className="p-4 border rounded-md">
-                <h3 className="font-medium text-gray-800">Team ID: {teamId}</h3>
-                <p className="text-gray-500 mt-2">Team analytics will appear here</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-      
-      {/* 显示项目相关的分析数据 */}
-      {selectedProjectIds.length > 0 && (
-        <div className="bg-white rounded-lg shadow p-6 mb-6">
-          <h2 className="text-lg font-semibold text-gray-900 mb-4">
-            Project Analytics ({selectedProjectIds.length} selected)
-          </h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {selectedProjectIds.map((projectId) => (
-              <div key={projectId} className="p-4 border rounded-md">
-                <h3 className="font-medium text-gray-800">Project ID: {projectId}</h3>
-                <p className="text-gray-500 mt-2">Project analytics will appear here</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-      
-      {/* 显示标签相关的分析数据 */}
-      {selectedTagIds.length > 0 && (
-        <div className="bg-white rounded-lg shadow p-6">
-          <h2 className="text-lg font-semibold text-gray-900 mb-4">
-            Tag Analytics ({selectedTagIds.length} selected)
-          </h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {selectedTagIds.map((tagName) => (
-              <div key={tagName} className="p-4 border rounded-md">
-                <h3 className="font-medium text-gray-800">Tag: {tagName}</h3>
-                <p className="text-gray-500 mt-2">Tag analytics will appear here</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-} 

app/components/ui/ProjectSelector.tsx

@@ -18,6 +18,14 @@ interface Project {
   deleted_at?: string | null;
   schema_version?: number | null;
   creator_id?: string | null;
+  team_name?: string;
+}
+
+// 添加需要的类型定义
+interface ProjectWithTeam {
+  project_id: string;
+  projects: Project;
+  teams?: { name: string };
 }
 
 // ProjectSelector component with multi-select support
@@ -85,14 +93,14 @@ export function ProjectSelector({
         let projectsQuery;
         
         if (teamId) {
-          // If a teamId is provided, fetch projects for that team
+          // 如果提供了teamId，获取该团队的项目
           projectsQuery = supabase
             .from('team_projects')
-            .select('project_id, projects:project_id(*)')
+            .select('project_id, projects:project_id(*), teams:team_id(name)')
             .eq('team_id', teamId)
             .is('projects.deleted_at', null);
         } else {
-          // Otherwise, fetch projects the user is a member of
+          // 否则，获取用户所属的所有项目及其所属团队
           projectsQuery = supabase
             .from('user_projects')
             .select('project_id, projects:project_id(*)')
@@ -109,17 +117,59 @@ export function ProjectSelector({
           return;
         }
 
-        // Extract the project data from the query results
+        // 如果没有提供teamId，需要单独获取每个项目对应的团队信息
-        if (isMounted && projectsData && projectsData.length > 0) {
+        if (!teamId && projectsData.length > 0) {
-          const projectList: Project[] = [];
+          const projectIds = projectsData.map(item => item.project_id);
           
-          for (const item of projectsData) {
+          // 获取项目所属的团队信息
-            if (item.projects && typeof item.projects === 'object' && 'id' in item.projects && 'name' in item.projects) {
+          const { data: teamProjectsData, error: teamProjectsError } = await supabase
-              projectList.push(item.projects as Project);
+            .from('team_projects')
-            }
+            .select('project_id, teams:team_id(name)')
+            .in('project_id', projectIds);
+            
+          if (teamProjectsError) throw teamProjectsError;
+          
+          // 创建项目ID到团队名称的映射
+          const projectTeamMap: Record<string, string> = {};
+          if (teamProjectsData) {
+            teamProjectsData.forEach(item => {
+              if (item.teams && typeof item.teams === 'object' && 'name' in item.teams) {
+                projectTeamMap[item.project_id] = (item.teams as { name: string }).name;
+              }
+            });
           }
           
-          setProjects(projectList);
+          // 提取项目数据，并添加团队名称
+          if (isMounted && projectsData) {
+            const projectList: Project[] = [];
+            
+            for (const item of projectsData) {
+              if (item.projects && typeof item.projects === 'object' && 'id' in item.projects && 'name' in item.projects) {
+                const project = item.projects as Project;
+                project.team_name = projectTeamMap[project.id];
+                projectList.push(project);
+              }
+            }
+            
+            setProjects(projectList);
+          }
+        } else {
+          // 如果提供了teamId，直接从查询结果中提取项目和团队信息
+          if (isMounted && projectsData) {
+            const projectList: Project[] = [];
+            
+            for (const item of projectsData as ProjectWithTeam[]) {
+              if (item.projects && typeof item.projects === 'object' && 'id' in item.projects && 'name' in item.projects) {
+                const project = item.projects as Project;
+                if (item.teams && 'name' in item.teams) {
+                  project.team_name = item.teams.name;
+                }
+                projectList.push(project);
+              }
+            }
+            
+            setProjects(projectList);
+          }
         }
       } catch (err) {
         if (isMounted) {
@@ -274,6 +324,11 @@ export function ProjectSelector({
             >
               <span className="flex flex-col">
                 <span className="font-medium">{project.name}</span>
+                {project.team_name && (
+                  <span className="text-xs text-gray-500">
+                    {project.team_name}
+                  </span>
+                )}
                 {project.description && (
                   <span className="text-xs text-gray-500 truncate max-w-[250px]">
                     {project.description}

app/page.tsx

@@ -36,6 +36,7 @@ interface Event {
   link_id?: string;
   link_slug?: string;
   link_tags?: string;
+  ip_address?: string;
 }
 
 // 格式化日期函数
@@ -98,6 +99,7 @@ const extractEventInfo = (event: Event) => {
     eventType: event.event_type || '-',
     visitorId: event.visitor_id?.substring(0, 8) || '-',
     referrer: eventAttrs?.referrer || '-',
+    ipAddress: event.ip_address || '-',
     location: event.country ? (event.city ? `${event.city}, ${event.country}` : event.country) : '-',
     device: event.device_type || '-',
     browser: event.browser || '-',
@@ -124,6 +126,11 @@ export default function HomePage() {
   // 添加标签选择状态 - 使用数组支持多选
   const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
   
+  // 添加分页状态
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(10);
+  const [totalEvents, setTotalEvents] = useState<number>(0);
+  
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [summary, setSummary] = useState<EventsSummary | null>(null);
@@ -145,7 +152,9 @@ export default function HomePage() {
         const baseUrl = '/api/events';
         const params = new URLSearchParams({
           startTime,
-          endTime
+          endTime,
+          page: currentPage.toString(),
+          pageSize: pageSize.toString()
         });
         
         // 添加团队ID参数 - 支持多个团队
@@ -197,6 +206,15 @@ export default function HomePage() {
         setGeoData(geoData.data);
         setDeviceData(deviceData.data);
         setEvents(eventsData.data || []);
+        
+        // 设置总事件数量用于分页
+        if (eventsData.meta) {
+          // 确保将total转换为数字，无论它是字符串还是数字
+          const totalCount = parseInt(String(eventsData.meta.total), 10);
+          if (!isNaN(totalCount)) {
+            setTotalEvents(totalCount);
+          }
+        }
       } catch (err) {
         setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
       } finally {
@@ -205,7 +223,7 @@ export default function HomePage() {
     };
 
     fetchData();
-  }, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagIds]);
+  }, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagIds, currentPage, pageSize]);
 
   if (loading) {
     return (
@@ -345,8 +363,38 @@ export default function HomePage() {
         </div>
       )}
 
-      {/* 事件列表部分 - 现在放在最上面 */}
+      {/* 仪表板内容 - 现在放在事件列表之后 */}
-      <div className="bg-white rounded-lg shadow overflow-hidden mb-8">
+      <>
+        {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 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>
@@ -376,6 +424,9 @@ export default function HomePage() {
                 <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">
+                  IP/Location
+                </th>
                 <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                   Device Info
                 </th>
@@ -433,6 +484,18 @@ export default function HomePage() {
                       <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">IP:</span> 
+                          <span className="ml-1">{info.ipAddress}</span>
+                        </span>
+                        <span className="text-xs inline-flex items-center">
+                          <span className="font-medium">Location:</span> 
+                          <span className="ml-1">{info.location}</span>
+                        </span>
+                      </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">
@@ -462,38 +525,217 @@ export default function HomePage() {
             No events found
           </div>
         )}
-      </div>
+        
-
+        {/* 分页控件 - 删除totalEvents > 0条件，改为events.length > 0 */}
-      {/* 仪表板内容 - 现在放在事件列表之后 */}
+        {!loading && events.length > 0 && (
-      <>
+          <div className="px-6 py-4 flex items-center justify-between border-t border-gray-200">
-        {summary && (
+            <div className="flex-1 flex justify-between sm:hidden">
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+              <button
-            <div className="bg-white rounded-lg shadow p-6">
+                onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
-              <h3 className="text-sm font-medium text-gray-500">Total Events</h3>
+                disabled={currentPage === 1}
-              <p className="text-2xl font-semibold text-gray-900">
+                className={`relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md ${
-                {typeof summary.totalEvents === 'number' ? summary.totalEvents.toLocaleString() : summary.totalEvents}
+                  currentPage === 1 
-              </p>
+                    ? 'text-gray-300 bg-gray-50' 
-                  </div>
+                    : 'text-gray-700 bg-white hover:bg-gray-50'
-            <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">
+                Previous
-                {typeof summary.uniqueVisitors === 'number' ? summary.uniqueVisitors.toLocaleString() : summary.uniqueVisitors}
+              </button>
-              </p>
+              <button
-                </div>
+                onClick={() => setCurrentPage(prev => (currentPage < Math.ceil(totalEvents / pageSize)) ? prev + 1 : prev)}
-            <div className="bg-white rounded-lg shadow p-6">
+                disabled={currentPage >= Math.ceil(totalEvents / pageSize) || events.length < pageSize}
-              <h3 className="text-sm font-medium text-gray-500">Total Conversions</h3>
+                className={`ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md ${
-              <p className="text-2xl font-semibold text-gray-900">
+                  currentPage >= Math.ceil(totalEvents / pageSize) || events.length < pageSize
-                {typeof summary.totalConversions === 'number' ? summary.totalConversions.toLocaleString() : summary.totalConversions}
+                    ? 'text-gray-300 cursor-not-allowed' 
-              </p>
+                    : 'text-gray-700 bg-white hover:bg-gray-50'
+                }`}
+              >
+                Next
+              </button>
+            </div>
+            <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+              <div>
+                <p className="text-sm text-gray-700">
+                  Showing <span className="font-medium">{events.length > 0 ? ((currentPage - 1) * pageSize) + 1 : 0}</span> to <span className="font-medium">{events.length > 0 ? ((currentPage - 1) * pageSize) + events.length : 0}</span> of{' '}
+                  <span className="font-medium">{totalEvents}</span> results
+                </p>
+              </div>
+              <div className="flex items-center">
+                <div className="mr-4">
+                  <select
+                    className="px-3 py-1 border border-gray-300 rounded-md text-sm"
+                    value={pageSize}
+                    onChange={(e) => {
+                      setPageSize(Number(e.target.value));
+                      setCurrentPage(1); // 重置到第一页
+                    }}
+                  >
+                    <option value="5">5 / page</option>
+                    <option value="10">10 / page</option>
+                    <option value="20">20 / page</option>
+                    <option value="50">50 / page</option>
+                  </select>
+                </div>
+                
+                {/* 添加直接跳转到指定页的输入框 */}
+                <div className="mr-4 flex items-center">
+                  <span className="text-sm text-gray-700 mr-2">Go to:</span>
+                  <input
+                    type="number"
+                    min="1"
+                    max={Math.max(1, Math.ceil(totalEvents / pageSize))}
+                    value={currentPage}
+                    onChange={(e) => {
+                      const page = parseInt(e.target.value);
+                      if (!isNaN(page) && page >= 1 && page <= Math.ceil(totalEvents / pageSize)) {
+                        setCurrentPage(page);
+                      }
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        const input = e.target as HTMLInputElement;
+                        const page = parseInt(input.value);
+                        if (!isNaN(page) && page >= 1 && page <= Math.ceil(totalEvents / pageSize)) {
+                          setCurrentPage(page);
+                        }
+                      }
+                    }}
+                    className="w-16 px-3 py-1 border border-gray-300 rounded-md text-sm"
+                  />
+                  <span className="text-sm text-gray-700 ml-2">
+                    of {Math.max(1, Math.ceil(totalEvents / pageSize))}
+                  </span>
+                </div>
+                
+                <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                  {/* 首页按钮 */}
+                  <button
+                    onClick={() => setCurrentPage(1)}
+                    disabled={currentPage === 1}
+                    className={`relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium ${
+                      currentPage === 1 
+                        ? 'text-gray-300 cursor-not-allowed' 
+                        : 'text-gray-500 hover:bg-gray-50'
+                    }`}
+                  >
+                    <span className="sr-only">First</span>
+                    <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
+                    </svg>
+                  </button>
+                  
+                  {/* 上一页按钮 */}
+                  <button
+                    onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
+                    disabled={currentPage === 1}
+                    className={`relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium ${
+                      currentPage === 1 
+                        ? 'text-gray-300 cursor-not-allowed' 
+                        : 'text-gray-500 hover:bg-gray-50'
+                    }`}
+                  >
+                    <span className="sr-only">Previous</span>
+                    <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                  </button>
+                  
+                  {/* 页码按钮 */}
+                  {(() => {
+                    const totalPages = Math.max(1, Math.ceil(totalEvents / pageSize));
+                    const pageNumbers = [];
+                    
+                    // 如果总页数小于等于7，显示所有页码
+                    if (totalPages <= 7) {
+                      for (let i = 1; i <= totalPages; i++) {
+                        pageNumbers.push(i);
+                      }
+                    } else {
+                      // 总是显示首页
+                      pageNumbers.push(1);
+                      
+                      // 根据当前页显示中间页码
+                      if (currentPage <= 3) {
+                        // 当前页靠近开始
+                        pageNumbers.push(2, 3, 4);
+                        pageNumbers.push('ellipsis1');
+                      } else if (currentPage >= totalPages - 2) {
+                        // 当前页靠近结束
+                        pageNumbers.push('ellipsis1');
+                        pageNumbers.push(totalPages - 3, totalPages - 2, totalPages - 1);
+                      } else {
+                        // 当前页在中间
+                        pageNumbers.push('ellipsis1');
+                        pageNumbers.push(currentPage - 1, currentPage, currentPage + 1);
+                        pageNumbers.push('ellipsis2');
+                      }
+                      
+                      // 总是显示尾页
+                      pageNumbers.push(totalPages);
+                    }
+                    
+                    return pageNumbers.map((pageNum, idx) => {
+                      if (pageNum === 'ellipsis1' || pageNum === 'ellipsis2') {
+                        return (
+                          <div key={`ellipsis-${idx}`} className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
+                            ...
+                          </div>
+                        );
+                      }
+                      
+                      return (
+                        <button
+                          key={pageNum}
+                          onClick={() => setCurrentPage(Number(pageNum))}
+                          className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
+                            currentPage === pageNum
+                              ? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
+                              : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
+                          }`}
+                        >
+                          {pageNum}
+                        </button>
+                      );
+                    });
+                  })()}
+                  
+                  {/* 下一页按钮 */}
+                  <button
+                    onClick={() => setCurrentPage(prev => (currentPage < Math.ceil(totalEvents / pageSize)) ? prev + 1 : prev)}
+                    disabled={currentPage >= Math.ceil(totalEvents / pageSize) || events.length < pageSize}
+                    className={`relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium ${
+                      currentPage >= Math.ceil(totalEvents / pageSize) || events.length < pageSize
+                        ? 'text-gray-300 cursor-not-allowed' 
+                        : 'text-gray-500 hover:bg-gray-50'
+                    }`}
+                  >
+                    <span className="sr-only">Next</span>
+                    <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+                    </svg>
+                  </button>
+                  
+                  {/* 尾页按钮 */}
+                  <button
+                    onClick={() => setCurrentPage(Math.ceil(totalEvents / pageSize))}
+                    disabled={currentPage >= Math.ceil(totalEvents / pageSize) || events.length < pageSize}
+                    className={`relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium ${
+                      currentPage >= Math.ceil(totalEvents / pageSize) || events.length < pageSize 
+                        ? 'text-gray-300 cursor-not-allowed' 
+                        : 'text-gray-500 hover:bg-gray-50'
+                    }`}
+                  >
+                    <span className="sr-only">Last</span>
+                    <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M4.293 15.707a1 1 0 001.414 0l5-5a1 1 0 000-1.414l-5-5a1 1 0 00-1.414 1.414L8.586 10 4.293 14.293a1 1 0 000 1.414zm6 0a1 1 0 001.414 0l5-5a1 1 0 000-1.414l-5-5a1 1 0 00-1.414 1.414L15.586 10l-4.293 4.293a1 1 0 000 1.414z" clipRule="evenodd" />
+                    </svg>
+                  </button>
+                </nav>
               </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>

lib/analytics.ts

@@ -73,7 +73,7 @@ export async function getEventsSummary(params: {
   const baseQuery = `
     SELECT
       count() as totalEvents,
-      uniq(visitor_id) as uniqueVisitors,
+      uniq(ip_address) as uniqueVisitors,
       countIf(event_type = 'conversion') as totalConversions,
       avg(time_spent_sec) as averageTimeSpent,
       
@@ -196,7 +196,7 @@ export async function getTimeSeriesData(params: {
     SELECT
       toStartOfInterval(event_time, INTERVAL ${interval}) as timestamp,
       count() as events,
-      uniq(visitor_id) as visitors,
+      uniq(ip_address) as visitors,
       countIf(event_type = 'conversion') as conversions
     FROM events
     ${filter}
@@ -221,7 +221,7 @@ export async function getGeoAnalytics(params: {
     SELECT
       ${groupByField} as location,
       count() as visits,
-      uniq(visitor_id) as visitors,
+      uniq(ip_address) as visitors,
       count() * 100.0 / sum(count()) OVER () as percentage
     FROM events
     ${filter}