Added session data display.

src/components/common/Profile.tsx

@@ -10,9 +10,9 @@ function convertToPastel(hexColor: string, pastelFactor: number = 0.5) {
   hexColor = hexColor.replace(/^#/, '');
 
   // Convert hex to RGB
-  let r = parseInt(hexColor.substr(0, 2), 16);
-  let g = parseInt(hexColor.substr(2, 2), 16);
-  let b = parseInt(hexColor.substr(4, 2), 16);
+  let r = parseInt(hexColor.substring(0, 2), 16);
+  let g = parseInt(hexColor.substring(2, 4), 16);
+  let b = parseInt(hexColor.substring(4, 6), 16);
 
   // Calculate pastel version (mix with white)
   //const pastelFactor = 0.5; // Adjust this value to control pastel intensity

src/components/hooks/index.ts

@@ -6,6 +6,7 @@ export * from './queries/useRealtime';
 export * from './queries/useReport';
 export * from './queries/useReports';
 export * from './queries/useSessionActivity';
+export * from './queries/useSessionData';
 export * from './queries/useWebsiteSession';
 export * from './queries/useWebsiteSessions';
 export * from './queries/useShareToken';

src/components/hooks/queries/useSessionData.ts

@@ -0,0 +1,12 @@
+import { useApi } from './useApi';
+
+export function useSessionData(websiteId: string, sessionId: string) {
+  const { get, useQuery } = useApi();
+
+  return useQuery({
+    queryKey: ['session:data', { websiteId, sessionId }],
+    queryFn: () => {
+      return get(`/sessions/${sessionId}/data`, { websiteId });
+    },
+  });
+}

src/components/messages.ts

@@ -274,6 +274,7 @@ export const labels = defineMessages({
   previousYear: { id: 'label.previous-year', defaultMessage: 'Previous year' },
   lastSeen: { id: 'label.last-seen', defaultMessage: 'Last seen' },
   firstSeen: { id: 'label.first-seen', defaultMessage: 'First seen' },
+  properties: { id: 'label.properties', defaultMessage: 'Properties' },
 });
 
 export const messages = defineMessages({