refactor: update organization handling in layout and dashboard components

- Modified the Header component to accept organizationId as a prop, improving flexibility.
- Updated DashboardPage to retrieve organizationId from params and handle onboarding redirection.
- Adjusted MainMenu and MobileMenu components to accept organizationId as an optional prop, enhancing compatibility with various use cases.
- Refactored related components to ensure consistent handling of organizationId across the application.

Author: Marfuen

apps/app/src/app/(app)/[orgId]/frameworks/page.tsx

@@ -15,27 +15,23 @@ export async function generateMetadata() {
   };
 }
 
-export default async function DashboardPage() {
+export default async function DashboardPage({ params }: { params: Promise<{ orgId: string }> }) {
+  const { orgId: organizationId } = await params;
+
   const session = await auth.api.getSession({
     headers: await headers(),
   });
 
-  const organizationId = session?.session.activeOrganizationId;
-
-  if (!organizationId) {
-    redirect('/');
-  }
-
   const org = await db.organization.findUnique({
     where: { id: organizationId },
     select: { onboardingCompleted: true },
   });
+
   if (org && org.onboardingCompleted === false) {
     redirect(`/onboarding/${organizationId}`);
   }
 
-  // Fetch current user's member information
-  const currentMember = await db.member.findFirst({
+  const member = await db.member.findFirst({
     where: {
       userId: session.user.id,
       organizationId,
@@ -69,7 +65,7 @@ export default async function DashboardPage() {
       organizationId={organizationId}
       publishedPoliciesScore={publishedPoliciesScore}
       doneTasksScore={doneTasksScore}
-      currentMember={currentMember}
+      currentMember={member}
     />
   );
 }

apps/app/src/app/(app)/[orgId]/layout.tsx

@@ -87,7 +87,7 @@ export default async function Layout({
       <SidebarProvider initialIsCollapsed={isCollapsed}>
         <AnimatedLayout sidebar={<Sidebar organization={organization} />} isCollapsed={isCollapsed}>
           {onboarding?.triggerJobId && <OnboardingTracker onboarding={onboarding} />}
-          <Header />
+          <Header organizationId={organization.id} />
           <DynamicMinHeight>{children}</DynamicMinHeight>
           <AssistantSheet />
           <Suspense fallback={null}>

apps/app/src/components/header.tsx

@@ -1,29 +1,16 @@
 import { UserMenu } from '@/components/user-menu';
 import { getOrganizations } from '@/data/getOrganizations';
-import { auth } from '@/utils/auth';
 import { Skeleton } from '@comp/ui/skeleton';
-import { headers } from 'next/headers';
-import { redirect } from 'next/navigation';
 import { Suspense } from 'react';
 import { AssistantButton } from './ai/chat-button';
 import { MobileMenu } from './mobile-menu';
 
-export async function Header() {
-  const session = await auth.api.getSession({
-    headers: await headers(),
-  });
-
-  const currentOrganizationId = session?.session.activeOrganizationId;
-
-  if (!currentOrganizationId) {
-    redirect('/');
-  }
-
+export async function Header({ organizationId }: { organizationId?: string }) {
   const { organizations } = await getOrganizations();
 
   return (
     <header className="border/40 sticky top-0 z-10 flex items-center justify-between border-b px-4 py-2 backdrop-blur-sm bg-card">
-      <MobileMenu organizationId={currentOrganizationId} organizations={organizations} />
+      <MobileMenu organizations={organizations} organizationId={organizationId} />
 
       <AssistantButton />
 

apps/app/src/components/main-menu.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { env } from '@/env.mjs';
 import { Badge } from '@comp/ui/badge';
 import { Button } from '@comp/ui/button';
 import { cn } from '@comp/ui/cn';
@@ -36,7 +35,7 @@ type MenuItem = {
 };
 
 interface ItemProps {
-  organizationId: string;
+  organizationId?: string;
   item: MenuItem;
   isActive: boolean;
   disabled: boolean;
@@ -49,7 +48,6 @@ export function MainMenu({ organizationId, isCollapsed = false, onItemClick }: P
   const pathname = usePathname();
   const [activeStyle, setActiveStyle] = useState({ top: '0px', height: '0px' });
   const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const isDubEnabled = env.NEXT_PUBLIC_IS_DUB_ENABLED === 'true';
 
   const items: MenuItem[] = [
     {
@@ -242,7 +240,7 @@ const Item = ({
 }: ItemProps) => {
   const Icon = item.icon;
   const linkDisabled = disabled || item.disabled;
-  const itemPath = item.path.replace(':organizationId', organizationId);
+  const itemPath = item.path.replace(':organizationId', organizationId ?? '');
 
   if (linkDisabled) {
     return (
@@ -315,7 +313,7 @@ const Item = ({
 };
 
 type Props = {
-  organizationId: string;
+  organizationId?: string;
   isCollapsed?: boolean;
   onItemClick?: () => void;
 };

apps/app/src/components/mobile-menu.tsx

@@ -11,7 +11,7 @@ import { OrganizationSwitcher } from './organization-switcher';
 interface MobileMenuProps {
   organizations: Organization[];
   isCollapsed?: boolean;
-  organizationId: string;
+  organizationId?: string;
 }
 
 export function MobileMenu({ organizationId, organizations }: MobileMenuProps) {