migrate to app dir and ssr

apps/web/src/components/navbar/Breadcrumbs.tsx

@@ -1,5 +1,5 @@
+import { api } from '@/app/_trpc/client';
 import { useOrganizationParams } from '@/hooks/useOrganizationParams';
-import { api } from '@/utils/api';
 import { ChevronRight, HomeIcon } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -11,30 +11,30 @@ export function Breadcrumbs() {
 
   const org = api.organization.get.useQuery(
     {
-      slug: params.organization,
+      id: params.organizationId,
     },
     {
-      enabled: !!params.organization,
+      enabled: !!params.organizationId,
       staleTime: Infinity,
     }
   );
 
   const pro = api.project.get.useQuery(
     {
-      slug: params.project,
+      id: params.projectId,
     },
     {
-      enabled: !!params.project,
+      enabled: !!params.projectId,
       staleTime: Infinity,
     }
   );
 
   const dashboard = api.dashboard.get.useQuery(
     {
-      slug: params.dashboard,
+      id: params.dashboardId,
     },
     {
-      enabled: !!params.dashboard,
+      enabled: !!params.dashboardId,
       staleTime: Infinity,
     }
   );
@@ -48,7 +48,7 @@ export function Breadcrumbs() {
         {org.data && (
           <>
             <HomeIcon size={14} />
-            <Link shallow href={`/${org.data.slug}`}>
+            <Link shallow href={`/${org.data.id}`}>
               {org.data.name}
             </Link>
           </>
@@ -57,7 +57,7 @@ export function Breadcrumbs() {
         {org.data && pro.data && (
           <>
             <ChevronRight size={10} />
-            <Link shallow href={`/${org.data.slug}/${pro.data.slug}`}>
+            <Link shallow href={`/${org.data.id}/${pro.data.id}`}>
               {pro.data.name}
             </Link>
           </>
@@ -68,7 +68,7 @@ export function Breadcrumbs() {
             <ChevronRight size={10} />
             <Link
               shallow
-              href={`/${org.data.slug}/${pro.data.slug}/${dashboard.data.slug}`}
+              href={`/${org.data.id}/${pro.data.id}/${dashboard.data.id}`}
             >
               {dashboard.data.name}
             </Link>

apps/web/src/components/navbar/NavbarCreate.tsx

@@ -25,7 +25,7 @@ export function NavbarCreate() {
           <DropdownMenuItem asChild>
             <Link
               shallow
-              href={`/${params.organization}/${params.project}/reports`}
+              href={`/${params.organizationId}/${params.projectId}/reports`}
             >
               <LineChart className="mr-2 h-4 w-4" />
               <span>Create a report</span>

apps/web/src/components/navbar/NavbarMenu.tsx

@@ -26,27 +26,27 @@ export function NavbarMenu() {
   const params = useOrganizationParams();
   return (
     <div className={cn('flex gap-1 items-center text-sm', 'max-sm:flex-col')}>
-      {params.project && (
-        <Item href={`/${params.organization}/${params.project}`}>
+      {params.projectId && (
+        <Item href={`/${params.organizationId}/${params.projectId}`}>
           Dashboards
         </Item>
       )}
-      {params.project && (
-        <Item href={`/${params.organization}/${params.project}/events`}>
+      {params.projectId && (
+        <Item href={`/${params.organizationId}/${params.projectId}/events`}>
           Events
         </Item>
       )}
-      {params.project && (
-        <Item href={`/${params.organization}/${params.project}/profiles`}>
+      {params.projectId && (
+        <Item href={`/${params.organizationId}/${params.projectId}/profiles`}>
           Profiles
         </Item>
       )}
-      {params.project && (
+      {params.projectId && (
         <Item
           href={{
-            pathname: `/${params.organization}/${params.project}/reports`,
+            pathname: `/${params.organizationId}/${params.projectId}/reports`,
             query: strip({
-              dashboard: params.dashboard,
+              dashboardId: params.dashboardId,
             }),
           }}
         >

apps/web/src/components/navbar/NavbarUserDropdown.tsx

@@ -28,7 +28,7 @@ export function NavbarUserDropdown() {
         <DropdownMenuGroup>
           <DropdownMenuItem asChild className="cursor-pointer">
             <Link
-              href={`/${params.organization}/settings/organization`}
+              href={`/${params.organizationId}/settings/organization`}
               shallow
             >
               <User className="mr-2 h-4 w-4" />
@@ -36,19 +36,19 @@ export function NavbarUserDropdown() {
             </Link>
           </DropdownMenuItem>
           <DropdownMenuItem asChild className="cursor-pointer">
-            <Link href={`/${params.organization}/settings/projects`} shallow>
+            <Link href={`/${params.organizationId}/settings/projects`} shallow>
               <User className="mr-2 h-4 w-4" />
               Projects
             </Link>
           </DropdownMenuItem>
           <DropdownMenuItem asChild className="cursor-pointer">
-            <Link href={`/${params.organization}/settings/clients`} shallow>
+            <Link href={`/${params.organizationId}/settings/clients`} shallow>
               <User className="mr-2 h-4 w-4" />
               Clients
             </Link>
           </DropdownMenuItem>
           <DropdownMenuItem asChild className="cursor-pointer">
-            <Link href={`/${params.organization}/settings/profile`} shallow>
+            <Link href={`/${params.organizationId}/settings/profile`} shallow>
               <User className="mr-2 h-4 w-4" />
               Profile
             </Link>