Sessions page.

src/components/common/Profile.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import { createAvatar } from '@dicebear/core';
+import { lorelei } from '@dicebear/collection';
+import md5 from 'md5';
+
+const lib = lorelei;
+
+function convertToPastel(hexColor: string, pastelFactor: number = 0.5) {
+  // Remove the # if present
+  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);
+
+  // Calculate pastel version (mix with white)
+  //const pastelFactor = 0.5; // Adjust this value to control pastel intensity
+
+  r = Math.floor((r + 255 * pastelFactor) / (1 + pastelFactor));
+  g = Math.floor((g + 255 * pastelFactor) / (1 + pastelFactor));
+  b = Math.floor((b + 255 * pastelFactor) / (1 + pastelFactor));
+
+  // Convert back to hex
+  return `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)}`;
+}
+
+function Profile({ seed, size = 128, ...props }: { seed: string; size?: number }) {
+  const avatar = useMemo(() => {
+    return createAvatar(lib, {
+      ...props,
+      seed,
+      size,
+      backgroundColor: [convertToPastel(md5(seed).substring(0, 6), 2).replace(/^#/, '')],
+    }).toDataUri();
+  }, []);
+
+  return <img src={avatar} alt="Avatar" style={{ borderRadius: '100%' }} />;
+}
+
+export default Profile;

src/components/hooks/index.ts

@@ -5,6 +5,7 @@ export * from './queries/useLogin';
 export * from './queries/useRealtime';
 export * from './queries/useReport';
 export * from './queries/useReports';
+export * from './queries/useSession';
 export * from './queries/useSessions';
 export * from './queries/useShareToken';
 export * from './queries/useTeam';

src/components/hooks/queries/useSession.ts

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

src/components/hooks/queries/useSessions.ts

@@ -4,7 +4,7 @@ import useModified from '../useModified';
 
 export function useSessions(websiteId: string, params?: { [key: string]: string | number }) {
   const { get } = useApi();
-  const { modified } = useModified(`websites`);
+  const { modified } = useModified(`sessions`);
 
   return useFilterQuery({
     queryKey: ['sessions', { websiteId, modified, ...params }],