wip: clerk auth

apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/page.tsx

@@ -1,10 +1,10 @@
 import PageLayout from '@/app/(app)/page-layout';
-import { getSession } from '@/server/auth';
 import {
   createRecentDashboard,
   getDashboardById,
 } from '@/server/services/dashboard.service';
 import { getReportsByDashboardId } from '@/server/services/reports.service';
+import { auth } from '@clerk/nextjs';
 import { revalidateTag } from 'next/cache';
 
 import { ListReports } from './list-reports';
@@ -20,10 +20,10 @@ interface PageProps {
 export default async function Page({
   params: { organizationId, projectId, dashboardId },
 }: PageProps) {
-  const session = await getSession();
+  const { userId } = auth();
+
   const dashboard = await getDashboardById(dashboardId);
   const reports = await getReportsByDashboardId(dashboardId);
-  const userId = session?.user.id;
   if (userId && dashboard) {
     await createRecentDashboard({
       userId,
@@ -35,7 +35,7 @@ export default async function Page({
   }
 
   return (
-    <PageLayout title={dashboard.name} organizationId={organizationId}>
+    <PageLayout title={dashboard.name}>
       <ListReports reports={reports} />
     </PageLayout>
   );

apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/page.tsx

@@ -6,18 +6,15 @@ import { ListDashboards } from './list-dashboards';
 
 interface PageProps {
   params: {
-    organizationId: string;
     projectId: string;
   };
 }
 
-export default async function Page({
-  params: { organizationId, projectId },
-}: PageProps) {
+export default async function Page({ params: { projectId } }: PageProps) {
   const dashboards = await getDashboardsByProjectId(projectId);
 
   return (
-    <PageLayout title="Dashboards" organizationId={organizationId}>
+    <PageLayout title="Dashboards">
       <HeaderDashboards projectId={projectId} />
       <ListDashboards dashboards={dashboards} />
     </PageLayout>

apps/web/src/app/(app)/[organizationId]/[projectId]/events/page.tsx

@@ -4,15 +4,12 @@ import { ListEvents } from './list-events';
 
 interface PageProps {
   params: {
-    organizationId: string;
     projectId: string;
   };
 }
-export default function Page({
-  params: { organizationId, projectId },
-}: PageProps) {
+export default function Page({ params: { projectId } }: PageProps) {
   return (
-    <PageLayout title="Events" organizationId={organizationId}>
+    <PageLayout title="Events">
       <ListEvents projectId={projectId} />
     </PageLayout>
   );

apps/web/src/app/(app)/[organizationId]/[projectId]/page.tsx

@@ -2,16 +2,9 @@ import PageLayout from '@/app/(app)/page-layout';
 
 import OverviewMetrics from './overview-metrics';
 
-interface PageProps {
-  params: {
-    organizationId: string;
-    projectId: string;
-  };
-}
-
-export default function Page({ params: { organizationId } }: PageProps) {
+export default function Page() {
   return (
-    <PageLayout title="Overview" organizationId={organizationId}>
+    <PageLayout title="Overview">
       <OverviewMetrics />
     </PageLayout>
   );

apps/web/src/app/(app)/[organizationId]/[projectId]/profiles/[profileId]/page.tsx

@@ -1,7 +1,6 @@
 import PageLayout from '@/app/(app)/page-layout';
 import { ListProperties } from '@/components/events/ListProperties';
 import { ProfileAvatar } from '@/components/profiles/ProfileAvatar';
-import { Avatar } from '@/components/ui/avatar';
 import { Widget, WidgetBody, WidgetHead } from '@/components/Widget';
 import {
   getProfileById,
@@ -14,14 +13,13 @@ import ListProfileEvents from './list-profile-events';
 
 interface PageProps {
   params: {
-    organizationId: string;
     projectId: string;
     profileId: string;
   };
 }
 
 export default async function Page({
-  params: { organizationId, projectId, profileId },
+  params: { projectId, profileId },
 }: PageProps) {
   const profile = await getProfileById(profileId);
   const profiles = (
@@ -35,7 +33,6 @@ export default async function Page({
           {getProfileName(profile)}
         </div>
       }
-      organizationId={organizationId}
     >
       <div className="p-4">
         <div className="grid gap-4 grid-cols-1 md:grid-cols-2 mb-8">

apps/web/src/app/(app)/[organizationId]/[projectId]/profiles/page.tsx

@@ -12,7 +12,7 @@ export default function Page({
   params: { organizationId, projectId },
 }: PageProps) {
   return (
-    <PageLayout title="Events" organizationId={organizationId}>
+    <PageLayout title="Events">
       <ListProfiles projectId={projectId} organizationId={organizationId} />
     </PageLayout>
   );

apps/web/src/app/(app)/[organizationId]/[projectId]/reports/[reportId]/page.tsx

@@ -6,15 +6,12 @@ import ReportEditor from '../report-editor';
 
 interface PageProps {
   params: {
-    organizationId: string;
     projectId: string;
     reportId: string;
   };
 }
 
-export default async function Page({
-  params: { organizationId, reportId },
-}: PageProps) {
+export default async function Page({ params: { reportId } }: PageProps) {
   const report = await getReportById(reportId);
   return (
     <PageLayout
@@ -24,7 +21,6 @@ export default async function Page({
           <Pencil size={16} />
         </div>
       }
-      organizationId={organizationId}
     >
       <ReportEditor report={report} />
     </PageLayout>

apps/web/src/app/(app)/[organizationId]/[projectId]/reports/page.tsx

@@ -19,7 +19,6 @@ export default function Page({ params: { organizationId } }: PageProps) {
           <Pencil size={16} />
         </div>
       }
-      organizationId={organizationId}
     >
       <ReportEditor reportId={null} />
     </PageLayout>

apps/web/src/app/(app)/[organizationId]/page.tsx

@@ -1,6 +1,8 @@
 import { getProjectWithMostEvents } from '@/server/services/project.service';
 import { redirect } from 'next/navigation';
 
+import PageLayout from '../page-layout';
+
 interface PageProps {
   params: {
     organizationId: string;
@@ -14,5 +16,11 @@ export default async function Page({ params: { organizationId } }: PageProps) {
     return redirect(`/${organizationId}/${project.id}`);
   }
 
-  return null;
+  return (
+    <PageLayout title="Projects">
+      <div className="p-4">
+        <h1>Create your first project</h1>
+      </div>
+    </PageLayout>
+  );
 }

apps/web/src/app/(app)/[organizationId]/settings/clients/page.tsx

@@ -13,7 +13,7 @@ export default async function Page({ params: { organizationId } }: PageProps) {
   const clients = await getClientsByOrganizationId(organizationId);
 
   return (
-    <PageLayout title="Clients" organizationId={organizationId}>
+    <PageLayout title="Clients">
       <ListClients clients={clients} />
     </PageLayout>
   );

apps/web/src/app/(app)/[organizationId]/settings/organization/edit-organization.tsx

@@ -5,7 +5,7 @@ import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
 import { toast } from '@/components/ui/use-toast';
 import { Widget, WidgetBody, WidgetHead } from '@/components/Widget';
-import type { getOrganizationById } from '@/server/services/organization.service';
+import type { getOrganizationBySlug } from '@/server/services/organization.service';
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -17,7 +17,7 @@ const validator = z.object({
 
 type IForm = z.infer<typeof validator>;
 interface EditOrganizationProps {
-  organization: Awaited<ReturnType<typeof getOrganizationById>>;
+  organization: Awaited<ReturnType<typeof getOrganizationBySlug>>;
 }
 export default function EditOrganization({
   organization,
@@ -64,10 +64,3 @@ export default function EditOrganization({
     </form>
   );
 }
-
-// <ContentSection
-//   title="Invite user"
-//   text="Invite users to this organization. You can invite several users with (,)"
-// >
-
-// </ContentSection>

apps/web/src/app/(app)/[organizationId]/settings/organization/page.tsx

@@ -1,6 +1,5 @@
 import PageLayout from '@/app/(app)/page-layout';
-import { getOrganizationById } from '@/server/services/organization.service';
-import { getInvitesByOrganizationId } from '@/server/services/user.service';
+import { getOrganizationBySlug } from '@/server/services/organization.service';
 
 import EditOrganization from './edit-organization';
 import InvitedUsers from './invited-users';
@@ -12,11 +11,11 @@ interface PageProps {
 }
 
 export default async function Page({ params: { organizationId } }: PageProps) {
-  const organization = await getOrganizationById(organizationId);
-  const invites = await getInvitesByOrganizationId(organizationId);
+  const organization = await getOrganizationBySlug(organizationId);
+  const invites = [];
 
   return (
-    <PageLayout title={organization.name} organizationId={organizationId}>
+    <PageLayout title={organization.name}>
       <div className="p-4 grid grid-cols-1 lg:grid-cols-2 gap-4">
         <EditOrganization organization={organization} />
         <InvitedUsers invites={invites} organizationId={organizationId} />

apps/web/src/app/(app)/[organizationId]/settings/profile/edit-profile.tsx

@@ -1,15 +1,10 @@
 'use client';
 
 import { api, handleError } from '@/app/_trpc/client';
-import { ContentHeader, ContentSection } from '@/components/Content';
-import { InputError } from '@/components/forms/InputError';
 import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { toast } from '@/components/ui/use-toast';
 import { Widget, WidgetBody, WidgetHead } from '@/components/Widget';
-import type { getOrganizationById } from '@/server/services/organization.service';
-import type { getProfileById } from '@/server/services/profile.service';
 import type { getUserById } from '@/server/services/user.service';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
@@ -17,7 +12,8 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 const validator = z.object({
-  name: z.string().min(2),
+  firstName: z.string().min(2),
+  lastName: z.string().min(2),
   email: z.string().email(),
 });
 
@@ -31,7 +27,8 @@ export default function EditProfile({ profile }: EditProfileProps) {
   const { register, handleSubmit, reset, formState } = useForm<IForm>({
     resolver: zodResolver(validator),
     defaultValues: {
-      name: profile.name ?? '',
+      firstName: profile.firstName ?? '',
+      lastName: profile.lastName ?? '',
       email: profile.email ?? '',
     },
   });
@@ -63,12 +60,19 @@ export default function EditProfile({ profile }: EditProfileProps) {
         </WidgetHead>
         <WidgetBody className="flex flex-col gap-4">
           <InputWithLabel
-            label="Name"
-            placeholder="Your name"
-            defaultValue={profile.name ?? ''}
-            {...register('name')}
+            label="First name"
+            placeholder="Your first name"
+            defaultValue={profile.firstName ?? ''}
+            {...register('firstName')}
           />
           <InputWithLabel
+            label="Last name"
+            placeholder="Your last name"
+            defaultValue={profile.lastName ?? ''}
+            {...register('lastName')}
+          />
+          <InputWithLabel
+            disabled
             label="Email"
             placeholder="Your email"
             defaultValue={profile.email ?? ''}

apps/web/src/app/(app)/[organizationId]/settings/profile/page.tsx

@@ -1,22 +1,16 @@
 import PageLayout from '@/app/(app)/page-layout';
-import { getSession } from '@/server/auth';
 import { getUserById } from '@/server/services/user.service';
+import { auth } from '@clerk/nextjs';
 
 import EditProfile from './edit-profile';
 import { Logout } from './logout';
 
-interface PageProps {
-  params: {
-    organizationId: string;
-  };
-}
-
-export default async function Page({ params: { organizationId } }: PageProps) {
-  const session = await getSession();
-  const profile = await getUserById(session?.user.id!);
+export default async function Page() {
+  const { userId } = auth();
+  const profile = await getUserById(userId!);
 
   return (
-    <PageLayout title={profile.name} organizationId={organizationId}>
+    <PageLayout title={profile.lastName}>
       <div className="p-4 flex flex-col gap-4">
         <EditProfile profile={profile} />
         <Logout />

apps/web/src/app/(app)/[organizationId]/settings/projects/page.tsx

@@ -1,5 +1,5 @@
 import PageLayout from '@/app/(app)/page-layout';
-import { getProjectsByOrganizationId } from '@/server/services/project.service';
+import { getProjectsByOrganizationSlug } from '@/server/services/project.service';
 
 import ListProjects from './list-projects';
 
@@ -10,10 +10,10 @@ interface PageProps {
 }
 
 export default async function Page({ params: { organizationId } }: PageProps) {
-  const projects = await getProjectsByOrganizationId(organizationId);
+  const projects = await getProjectsByOrganizationSlug(organizationId);
 
   return (
-    <PageLayout title="Projects" organizationId={organizationId}>
+    <PageLayout title="Projects">
       <ListProjects projects={projects} />
     </PageLayout>
   );