Add IP address support to user info and display on user page

goldflag · goldflag · commit 45c63551295a · 2025-09-22T22:59:06.000-07:00
- Updated UserInfo type to include an optional IP address field.
- Enhanced UserPage component to conditionally display the user's IP address using a Badge component.
- Modified getUserInfo API to retrieve and return the user's IP address, ensuring comprehensive analytics data is available.
diff --git a/client/src/api/analytics/userInfo.ts b/client/src/api/analytics/userInfo.ts
@@ -19,6 +19,7 @@ export type UserInfo = {
   first_seen: string;
   pageviews: number;
   events: number;
+  ip?: string;
 };
 
 export function useUserInfo(siteId: number, userId: string) {
diff --git a/client/src/app/[site]/user/[userId]/page.tsx b/client/src/app/[site]/user/[userId]/page.tsx
@@ -29,6 +29,7 @@ import { OperatingSystem } from "../../components/shared/icons/OperatingSystem";
 import { VisitCalendar } from "./components/Calendar";
 import { Avatar } from "../../../../components/Avatar";
 import { MobileSidebar } from "../../components/Sidebar/MobileSidebar";
+import { Badge } from "../../../../components/ui/badge";
 
 export default function UserPage() {
   useSetPageTitle("Rybbit · User");
@@ -54,12 +55,20 @@ export default function UserPage() {
         Back to Users
       </Button>
       <div className="mb-4">
-        <h1 className="text-2xl font-bold mb-4 flex items-center gap-2">
-          <div>
-            <MobileSidebar />
+        <h1 className="mb-4 flex items-center gap-2 justify-between">
+          <div className="text-2xl font-bold flex items-center gap-2">
+            <div>
+              <MobileSidebar />
+            </div>
+
+            <Avatar size={40} name={userId as string} />
+            {userId?.slice(0, 10)}
           </div>
-          <Avatar size={40} name={userId as string} />
-          {userId?.slice(0, 10)}
+          {data?.ip && (
+            <Badge variant="outline" className="flex gap-1 text-neutral-300">
+              IP: <span className="text-neutral-100">{data?.ip}</span>
+            </Badge>
+          )}
         </h1>
         <div className="bg-neutral-900 p-3 rounded-lg flex flex-col gap-1 border border-neutral-750 text-sm mb-3">
           {isLoading ? (
@@ -124,7 +133,7 @@ export default function UserPage() {
                   {data?.operating_system}
                   {data?.operating_system_version && <span className="ml-1">v{data?.operating_system_version}</span>}
                 </div>
-                <span className="text-neutral-100">Screen Size:</span>
+                <span className="text-neutral-100">Screen:</span>
                 <div className="flex gap-1 text-neutral-300">
                   {data?.screen_width} x {data?.screen_height}
                 </div>
diff --git a/server/src/api/analytics/getUserInfo.ts b/server/src/api/analytics/getUserInfo.ts
@@ -20,6 +20,7 @@ interface UserPageviewData {
   first_seen: string;
   pageviews: number;
   events: number;
+  ip: string;
 }
 
 export async function getUserInfo(
@@ -58,7 +59,8 @@ export async function getUserInfo(
             argMinIf(pathname, timestamp, type = 'pageview') AS entry_page,
             argMaxIf(pathname, timestamp, type = 'pageview') AS exit_page,
             countIf(type = 'pageview') AS pageviews,
-            countIf(type = 'custom_event') AS events
+            countIf(type = 'custom_event') AS events,
+            argMax(ip, timestamp) AS ip
         FROM
             events
         WHERE
@@ -87,7 +89,8 @@ export async function getUserInfo(
         MAX(session_end) AS last_seen,
         MIN(session_start) AS first_seen,
         SUM(pageviews) AS pageviews,
-        SUM(events) AS events
+        SUM(events) AS events,
+        any(ip) AS ip
     FROM
         sessions
       `,
