fix: handle profiles which are not identified but the event has profile_id

apps/start/src/components/profiles/profile-properties.tsx

@@ -5,6 +5,7 @@ import { formatDateTime } from '@/utils/date';
 import { parseAsStringEnum, useQueryState } from 'nuqs';
 
 import type { IServiceEvent, IServiceProfile } from '@openpanel/db';
+import { FullPageEmptyState } from '../full-page-empty-state';
 import { WidgetButtons, WidgetHead } from '../overview/overview-widget';
 
 type Props = {
@@ -44,7 +45,7 @@ export const ProfileProperties = ({ profile }: Props) => {
         </WidgetButtons>
       </WidgetHead>
 
-      {tab === 'profile' && (
+      {tab === 'profile' && profile && (
         <KeyValueGrid
           copyable
           className="border-0"
@@ -92,7 +93,7 @@ export const ProfileProperties = ({ profile }: Props) => {
         />
       )}
 
-      {tab === 'properties' && (
+      {tab === 'properties' && profile && (
         <KeyValueGrid
           copyable
           className="border-0"
@@ -109,6 +110,9 @@ export const ProfileProperties = ({ profile }: Props) => {
             }))}
         />
       )}
+      {(!profile || !profile.properties) && (
+        <FullPageEmptyState title="No properties found" />
+      )}
     </Widget>
   );
 };

apps/start/src/routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs.index.tsx

@@ -41,12 +41,6 @@ export const Route = createFileRoute(
           projectId: params.projectId,
         }),
       ),
-      context.queryClient.prefetchQuery(
-        context.trpc.event.events.queryOptions({
-          profileId: params.profileId,
-          projectId: params.projectId,
-        }),
-      ),
     ]);
   },
   pendingComponent: FullPageLoadingState,
@@ -56,7 +50,6 @@ function Component() {
   const { profileId, projectId, organizationId } = Route.useParams();
   const trpc = useTRPC();
 
-  // Get profile data from parent route
   const profile = useSuspenseQuery(
     trpc.profile.byId.queryOptions({
       profileId,

apps/start/src/routes/_app.$organizationId.$projectId_.profiles.$profileId._tabs.tsx

@@ -6,12 +6,9 @@ import { SerieIcon } from '@/components/report-chart/common/serie-icon';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { usePageTabs } from '@/hooks/use-page-tabs';
 import { useTRPC } from '@/integrations/trpc/react';
-import { cn } from '@/utils/cn';
 import { getProfileName } from '@/utils/getters';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { Outlet, createFileRoute, useRouter } from '@tanstack/react-router';
-import { CheckIcon, CopyIcon } from 'lucide-react';
-import { useState } from 'react';
 
 export const Route = createFileRoute(
   '/_app/$organizationId/$projectId_/profiles/$profileId/_tabs',
@@ -62,7 +59,9 @@ function Component() {
           <div className="row items-center gap-4 min-w-0">
             <ProfileAvatar {...profile.data} />
             <span className="truncate">
-              {getProfileName(profile.data, false)}
+              {profile.data
+                ? getProfileName(profile.data, false)
+                : 'User not identified'}
             </span>
           </div>
         }