From bdae5c164cc91391fff18218e7f2469171072454 Mon Sep 17 00:00:00 2001
From: William Tso <vitalitymailg@gmail.com>
Date: Tue, 1 Apr 2025 23:04:15 +0800
Subject: [PATCH] move events pos

---
 app/(app)/dashboard/page.tsx     | 238 ++++++++++++++++++-------------
 app/(app)/geo-analytics/page.tsx |   1 +
 types/react-simple-maps.d.ts     |   1 +
 3 files changed, 138 insertions(+), 102 deletions(-)
 create mode 100644 app/(app)/geo-analytics/page.tsx
 create mode 100644 types/react-simple-maps.d.ts

diff --git a/app/(app)/dashboard/page.tsx b/app/(app)/dashboard/page.tsx
index c97c2de..e58b2be 100644
--- a/app/(app)/dashboard/page.tsx
+++ b/app/(app)/dashboard/page.tsx
@@ -35,6 +35,7 @@ interface Event {
   project_name?: string;
   link_id?: string;
   link_slug?: string;
+  link_tags?: string;
 }
 
 // 格式化日期函数
@@ -77,6 +78,19 @@ const extractEventInfo = (event: Event) => {
   // 解析用户属性
   const userAttrs = parseJsonSafely(event.user_attributes || '{}');
   
+  // 解析标签信息
+  let tags: string[] = [];
+  try {
+    if (event.link_tags) {
+      const parsedTags = JSON.parse(event.link_tags);
+      if (Array.isArray(parsedTags)) {
+        tags = parsedTags;
+      }
+    }
+  } catch {
+    // 解析失败则保持空数组
+  }
+  
   return {
     eventTime: event.created_at || event.event_time,
     linkName: event.link_label || linkAttrs?.name || eventAttrs?.link_name || event.link_slug || '-',
@@ -90,7 +104,8 @@ const extractEventInfo = (event: Event) => {
     os: event.os || '-',
     userInfo: getUserDisplayName(userAttrs),
     teamName: event.team_name || '-',
-    projectName: event.project_name || '-'
+    projectName: event.project_name || '-',
+    tags: tags
   };
 };
 
@@ -330,7 +345,126 @@ export default function DashboardPage() {
         </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">
+                  Tags
+                </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="flex flex-wrap gap-1">
+                        {info.tags && info.tags.length > 0 ? (
+                          info.tags.map((tag, idx) => (
+                            <span 
+                              key={idx} 
+                              className="bg-gray-100 text-gray-800 text-xs px-2 py-0.5 rounded"
+                            >
+                              {tag}
+                            </span>
+                          ))
+                        ) : (
+                          <span className="text-gray-400">-</span>
+                        )}
+                      </div>
+                    </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>
+
+      {/* 仪表板内容 - 现在放在事件列表之后 */}
       <>
         {summary && (
           <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
@@ -377,106 +511,6 @@ export default function DashboardPage() {
           <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>
   );
diff --git a/app/(app)/geo-analytics/page.tsx b/app/(app)/geo-analytics/page.tsx
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/app/(app)/geo-analytics/page.tsx
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/types/react-simple-maps.d.ts b/types/react-simple-maps.d.ts
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/types/react-simple-maps.d.ts
@@ -0,0 +1 @@
+ 
\ No newline at end of file