Collins

app/(landing)/organizations/[id]/grants/page.tsx

@@ -1,18 +1,7 @@
-'use client';
-
-import { useParams } from 'next/navigation';
-import OrganizationHeader from '@/components/organization/OrganizationHeader';
-import OrganizationSidebar from '@/components/organization/OrganizationSidebar';
-
 export default function GrantsPage() {
-  const params = useParams();
-  const organizationId = params.id as string;
-
   return (
     <div className='min-h-screen bg-black text-white'>
-      <OrganizationHeader />
       <div className='flex'>
-        <OrganizationSidebar organizationId={organizationId} />
         <main className='flex-1 p-8'>
           <h1 className='text-2xl font-bold'>Grants</h1>
           <p className='mt-2 text-zinc-400'>Manage your grants here</p>

app/(landing)/organizations/[id]/hackathons/page.tsx

@@ -1,18 +1,9 @@
 'use client';
 
-import { useParams } from 'next/navigation';
-import OrganizationHeader from '@/components/organization/OrganizationHeader';
-import OrganizationSidebar from '@/components/organization/OrganizationSidebar';
-
 export default function HackathonsPage() {
-  const params = useParams();
-  const organizationId = params.id as string;
-
   return (
     <div className='min-h-screen bg-black text-white'>
-      <OrganizationHeader />
       <div className='flex'>
-        <OrganizationSidebar organizationId={organizationId} />
         <main className='flex-1 p-8'>
           <h1 className='text-2xl font-bold'>Hackathons</h1>
           <p className='mt-2 text-zinc-400'>Manage your hackathons here</p>

app/(landing)/organizations/[id]/settings/page.tsx

@@ -1,27 +1,22 @@
 'use client';
 
 import { useParams } from 'next/navigation';
-import OrganizationHeader from '@/components/organization/OrganizationHeader';
-import OrganizationSidebar from '@/components/organization/OrganizationSidebar';
 import OrganizationSettings from '@/components/organization/OrganizationSettings';
 
 export default function OrganizationSettingsPage() {
   const params = useParams();
   const organizationId = params.id as string;
 
-  // TODO: Fetch organization data based on ID
   const mockOrgData = {
-    name: 'Tech Innovators Hub',
+    name: 'Boundless',
     logo: '/tech-company-logo.jpg',
     tagline: 'Building the future of technology',
     about: 'We are a community of innovators...',
   };
 
   return (
     <div className='min-h-screen bg-black text-white'>
-      <OrganizationHeader />
       <div className='flex'>
-        <OrganizationSidebar organizationId={organizationId} />
         <OrganizationSettings
           organizationId={organizationId}
           initialData={mockOrgData}

app/(landing)/organizations/layout.tsx

@@ -5,6 +5,7 @@ import type React from 'react';
 import OrganizationHeader from '@/components/organization/OrganizationHeader';
 import OrganizationSidebar from '@/components/organization/OrganizationSidebar';
 import { usePathname } from 'next/navigation';
+import { OrganizationProvider } from '@/lib/providers';
 
 export default function OrganizationsLayout({
   children,
@@ -14,20 +15,34 @@ export default function OrganizationsLayout({
   const pathname = usePathname();
 
   const showSidebar =
-    pathname.includes('/new') ||
-    (pathname.split('/').length > 4 && pathname !== '/dashboard/organizations');
+    pathname !== '/organizations' && pathname.startsWith('/organizations');
+
+  const getOrgIdFromPath = () => {
+    if (pathname.startsWith('/organizations/')) {
+      const pathParts = pathname.split('/');
+      const orgId = pathParts[2];
+      if (orgId && /^[a-f0-9]{24}$/.test(orgId)) {
+        return orgId;
+      }
+    }
+    return null;
+  };
+
+  const initialOrgId = getOrgIdFromPath();
 
   return (
-    <div className='relative min-h-screen bg-black text-white'>
-      <OrganizationHeader />
-      {showSidebar ? (
-        <div className='relative border-t border-t-zinc-800'>
-          <OrganizationSidebar />
-          <main className='md:ml-[350px]'>{children}</main>
-        </div>
-      ) : (
-        <main>{children}</main>
-      )}
-    </div>
+    <OrganizationProvider initialOrgId={initialOrgId || undefined}>
+      <div className='relative min-h-screen bg-black text-white'>
+        <OrganizationHeader />
+        {showSidebar ? (
+          <div className='relative border-t border-t-zinc-800'>
+            <OrganizationSidebar />
+            <main className='md:ml-[350px]'>{children}</main>
+          </div>
+        ) : (
+          <main>{children}</main>
+        )}
+      </div>
+    </OrganizationProvider>
   );
 }

app/globals.css

@@ -57,8 +57,9 @@
   --color-success-900: #004617;
 
   --color-active-bg: rgba(167, 249, 80, 0.08);
+  --color-active-bg2: rgba(167, 249, 80, 0.32);
 }
-/* Custom scrollbar styles for comment modal */
+
 .custom-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: #4a4a4a #1a1a1a;

components/organization/OrganizationContent.tsx

@@ -5,48 +5,14 @@ import { Input } from '@/components/ui/input';
 import OrganizationCard from './cards/OrganzationCards';
 import Link from 'next/link';
 import { BoundlessButton } from '../buttons';
-
-const mockOrganizations = [
-  {
-    id: '1',
-    name: 'Tech Innovators Hub',
-    logo: '/organization-logo.svg',
-    createdAt: '2 days ago',
-    hackathons: { count: 3, submissions: 1 },
-    grants: { count: 7, applications: 3 },
-  },
-  {
-    id: '2',
-    name: 'Green Energy Initiative',
-    logo: '/organization-logo.svg',
-    createdAt: '1 week ago',
-    hackathons: { count: 5, submissions: 2 },
-    grants: { count: 12, applications: 8 },
-  },
-  {
-    id: '3',
-    name: 'AI Research Collective',
-    logo: '/organization-logo.svg',
-    createdAt: '3 weeks ago',
-    hackathons: { count: 8, submissions: 5 },
-    grants: { count: 15, applications: 10 },
-  },
-  {
-    id: '4',
-    name: 'Community Builders Network',
-    logo: '/organization-logo.svg',
-    createdAt: '1 month ago',
-    hackathons: { count: 2, submissions: 0 },
-    grants: { count: 4, applications: 2 },
-  },
-];
+import { useOrganization } from '@/lib/providers/OrganizationProvider';
 
 export default function OrganizationContent() {
-  const hasorganizations = mockOrganizations.length > 0;
+  const { organizations } = useOrganization();
+  const hasOrganizations = organizations.length > 0;
   return (
     <main className=''>
-      {/* Search and Sort Bar */}
-      {hasorganizations && (
+      {hasOrganizations && (
         <section className='mb-8 hidden border-b border-b-zinc-800 px-8 md:block'>
           <div className='mx-auto flex max-w-5xl items-center gap-4'>
             <div className='relative flex-1'>
@@ -64,7 +30,7 @@ export default function OrganizationContent() {
               <ArrowUpDown className='h-4 w-4' />
               Sort
             </Button>
-            {hasorganizations && (
+            {hasOrganizations && (
               <div className='flex h-23 items-center border-l border-l-zinc-800 pl-4'>
                 <Link href='/organizations/new'>
                   <BoundlessButton
@@ -83,21 +49,27 @@ export default function OrganizationContent() {
       )}
 
       <section className='mx-auto max-w-5xl px-8 py-8 md:px-0'>
-        {/* Add Organization Section */}
-        {hasorganizations && (
+        {hasOrganizations && (
           <div className='grid grid-cols-1 gap-6'>
-            {mockOrganizations.map(org => (
-              <Link href={`/organization/${org.id}`} key={org.id}>
-                <OrganizationCard {...org} />
+            {organizations.map(org => (
+              <Link href={`/organizations/${org._id}/settings`} key={org._id}>
+                <OrganizationCard
+                  id={org._id}
+                  name={org.name}
+                  logo={org.logo || ''}
+                  createdAt={org.createdAt}
+                  hackathons={{ count: 0, submissions: 0 }}
+                  grants={{ count: 0, applications: 0 }}
+                />
               </Link>
             ))}
           </div>
         )}
 
-        {!hasorganizations && (
-          <div className='mx-8 flex items-center justify-center rounded-lg border-1 border-dashed border-green-600 p-32'>
+        {!hasOrganizations && (
+          <div className='border-active-bg2 mx-8 flex items-center justify-center rounded-lg border-1 border-dashed p-32'>
             <Link href='/organizations/new'>
-              <button className='text-primary flex items-center gap-2 font-medium transition-colors hover:text-lime-400'>
+              <button className='text-primary hover:text-primary flex items-center gap-2 font-medium transition-colors'>
                 <span>Add Organization</span>
                 <Plus className='h-5 w-5' size={100} />
               </button>

components/organization/OrganizationHeader.tsx

@@ -14,16 +14,16 @@ import { useAuthActions, useAuthStatus } from '@/hooks/use-auth';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import OrganizationSelector from './cards/OrganizationSelector';
+import { useOrganization } from '@/lib/providers/OrganizationProvider';
 
 export default function OrganizationHeader() {
   const { isLoading, user } = useAuthStatus();
   const { logout } = useAuthActions();
   const pathname = usePathname();
   const isOnOrganizationsPage = pathname === '/dashboard/organizations';
-
+  const { organizations, activeOrg, setActiveOrg } = useOrganization();
   const showOrgSelector =
-    pathname.includes('/new') ||
-    (pathname.split('/').length > 4 && pathname !== '/dashboard/organizations');
+    pathname !== '/organizations' && pathname.startsWith('/organizations');
 
   return (
     <header className='sticky top-0 z-50 flex items-center justify-between border-b-1 border-b-zinc-800 bg-black px-10 py-4'>
@@ -37,18 +37,37 @@ export default function OrganizationHeader() {
           />
         </div>
 
-        {/* Home Link */}
         <Link href='/'>
           <button className='hover:text-primary/80 flex items-center gap-2 text-gray-600 transition-colors'>
             <Building2 className='h-5 w-5' />
             <span className='text-sm font-medium'>Home</span>
           </button>
         </Link>
 
-        {showOrgSelector && <OrganizationSelector />}
+        {showOrgSelector && organizations && organizations.length > 0 && (
+          <OrganizationSelector
+            organizations={organizations}
+            currentOrganization={
+              activeOrg
+                ? {
+                    _id: activeOrg._id,
+                    name: activeOrg.name,
+                    logo: activeOrg.logo,
+                    tagline: activeOrg.tagline,
+                    isProfileComplete: activeOrg.isProfileComplete,
+                    role: 'owner',
+                    memberCount: activeOrg.members.length,
+                    hackathonCount: activeOrg.hackathons.length,
+                    grantCount: activeOrg.grants.length,
+                    createdAt: activeOrg.createdAt,
+                  }
+                : undefined
+            }
+            onOrganizationChange={orgId => setActiveOrg(orgId)}
+          />
+        )}
       </div>
 
-      {/* User Avatar Dropdown */}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <button className='flex items-center space-x-2 rounded-full p-1 transition-colors hover:bg-white/10'>
@@ -58,10 +77,6 @@ export default function OrganizationHeader() {
                 alt={user?.name || user?.profile?.firstName || ''}
               />
               <AvatarFallback>
-                {/* {user?.name?.charAt(0) ||
-                             user?.profile?.firstName?.charAt(0) ||
-                             user?.email?.charAt(0) ||
-                             'U'} */}
                 <Image
                   src={
                     user?.image ||
@@ -115,7 +130,7 @@ export default function OrganizationHeader() {
               asChild
             >
               <Link
-                href='/dashboard/organizations'
+                href='/organizations'
                 className='group-hover:text-primary flex items-center'
               >
                 <Building2 className='group-hover:!text-primary mr-2 h-4 w-4 text-white' />

components/organization/OrganizationPage.tsx

@@ -1,11 +1,9 @@
 'use client';
-// import OrganizationHeader from './OrganizationHeader';
 import OrganizationContent from './OrganizationContent';
 
 export default function OrganizationPage() {
   return (
     <div className='min-h-screen bg-black text-white'>
-      {/* <OrganizationHeader /> */}
       <OrganizationContent />
     </div>
   );

components/organization/OrganizationSidebar.tsx

@@ -16,30 +16,42 @@ export default function OrganizationSidebar({
   const pathname = usePathname();
   const { height } = useWindowSize();
 
+  const derivedOrgId =
+    organizationId ||
+    (() => {
+      if (!pathname) return undefined;
+      const parts = pathname.split('/');
+      if (parts.length >= 3 && parts[1] === 'organizations') {
+        return parts[2];
+      }
+      return undefined;
+    })();
+
+  const normalizedPath =
+    pathname?.endsWith('/') && pathname !== '/'
+      ? pathname.slice(0, -1)
+      : pathname;
+
   const menuItems = [
     {
       icon: Trophy,
       label: 'Hackathons',
-      href: organizationId
-        ? `/organizations/${organizationId}/hackathons`
-        : '#',
+      href: derivedOrgId ? `/organizations/${derivedOrgId}/hackathons` : '#',
     },
     {
       icon: HandCoins,
       label: 'Grants',
-      href: organizationId ? `/organizations/${organizationId}/grants` : '#',
+      href: derivedOrgId ? `/organizations/${derivedOrgId}/grants` : '#',
     },
     {
       icon: Settings,
       label: 'Settings',
-      href: organizationId
-        ? `/organizations/${organizationId}/settings`
+      href: derivedOrgId
+        ? `/organizations/${derivedOrgId}/settings`
         : '/organizations/new',
     },
   ];
 
-  // Calculate the available height (window height minus header height)
-  // Assuming header height is around 64px (4rem), adjust as needed
   const headerHeight = 64;
   const availableHeight = height ? height - headerHeight : 'calc(100vh - 4rem)';
 
@@ -54,8 +66,11 @@ export default function OrganizationSidebar({
         </h3>
         {menuItems.map(item => {
           const Icon = item.icon;
+          const isValidHref = item.href !== '#';
           const isActive =
-            pathname === item.href || pathname?.startsWith(item.href + '/');
+            isValidHref &&
+            (normalizedPath === item.href ||
+              normalizedPath?.startsWith(item.href + '/'));
 
           return (
             <Link