merge to prod

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

app/(landing)/layout.tsx

@@ -12,7 +12,7 @@ interface LandingLayoutProps {
 
 export default function LandingLayout({ children }: LandingLayoutProps) {
   return (
-    <div className='bg-background relative flex min-h-screen flex-col pt-5 md:pt-11'>
+    <div className='bg-background relative flex min-h-screen flex-col'>
       <Navbar />
       <main className='flex-1'>{children}</main>
       <Footer />

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

@@ -0,0 +1,23 @@
+'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>
+        </main>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,23 @@
+'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>
+        </main>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+'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',
+    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}
+        />
+      </div>
+    </div>
+  );
+}

app/(landing)/organizations/layout.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import type React from 'react';
+
+import OrganizationHeader from '@/components/organization/OrganizationHeader';
+import OrganizationSidebar from '@/components/organization/OrganizationSidebar';
+import { usePathname } from 'next/navigation';
+
+export default function OrganizationsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+
+  const showSidebar =
+    pathname.includes('/new') ||
+    (pathname.split('/').length > 4 && pathname !== '/dashboard/organizations');
+
+  return (
+    <div className='min-h-screen bg-black text-white'>
+      <OrganizationHeader />
+      {showSidebar ? (
+        <div className='flex border-t border-t-zinc-800'>
+          <OrganizationSidebar />
+          <main className='flex-1'>{children}</main>
+        </div>
+      ) : (
+        <main>{children}</main>
+      )}
+    </div>
+  );
+}

app/(landing)/organizations/new/page.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import OrganizationSettings from '@/components/organization/OrganizationSettings';
+
+export default function NewOrganizationPage() {
+  return (
+    <OrganizationSettings
+      initialData={{
+        name: 'Organization 1',
+        logo: '',
+        tagline: '',
+        about: '',
+      }}
+    />
+  );
+}

app/(landing)/organizations/page.tsx

@@ -0,0 +1,12 @@
+import OrganizationPage from '@/components/organization/OrganizationPage';
+import React from 'react';
+
+const page = () => {
+  return (
+    <div>
+      <OrganizationPage />
+    </div>
+  );
+};
+
+export default page;

app/(landing)/projects/[id]/milestone/[milestoneId]/page.tsx

@@ -3,22 +3,64 @@ import MilstoneOverview from '@/components/project-details/project-milestone/mil
 import MilestoneDetails from '@/components/project-details/project-milestone/milestone-details/MilestoneDetails';
 import MilestoneLinks from '@/components/project-details/project-milestone/milestone-details/MilestoneLinks';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { getProjects } from '@/lib/api/project';
+import { CrowdfundingProject } from '@/lib/api/types';
 
 interface MilestonePageProps {
   params: Promise<{
-    milestoneId: string; // This will be the milestone ID
+    id: string; // Project ID
+    milestoneId: string; // Milestone ID
   }>;
 }
 
 const MilestonePage = async ({ params }: MilestonePageProps) => {
-  const { milestoneId } = await params;
+  const { id: projectId, milestoneId } = await params;
+
+  // Fetch project data
+  let project: CrowdfundingProject | null = null;
+  let milestone = null;
+
+  try {
+    const projectResponse = await getProjects();
+    if (projectResponse.projects) {
+      // Find the specific project
+      const foundProject = projectResponse.projects.find(
+        (p: { id: string }) => p.id === projectId
+      );
+      project = foundProject
+        ? (foundProject as unknown as CrowdfundingProject)
+        : null;
+
+      // Find the specific milestone
+      milestone = project?.milestones?.find(
+        (m: { _id: string }) => m._id === milestoneId
+      );
+    }
+  } catch {
+    // Handle error silently
+  }
+
+  // If milestone not found, show error state
+  if (!milestone) {
+    return (
+      <section className='mx-auto mt-5 flex max-w-[1440px] flex-col justify-center gap-5 px-5 py-5 md:flex-row md:justify-between md:gap-18 md:px-[50px] lg:px-[100px]'>
+        <div className='w-full py-12 text-center'>
+          <h1 className='mb-4 text-2xl font-bold text-white'>
+            Milestone Not Found
+          </h1>
+          <p className='text-gray-400'>
+            The requested milestone could not be found.
+          </p>
+        </div>
+      </section>
+    );
+  }
 
   return (
     <section className='mx-auto mt-5 flex max-w-[1440px] flex-col justify-center gap-5 px-5 py-5 md:flex-row md:justify-between md:gap-18 md:px-[50px] lg:px-[100px]'>
       <div className='w-full md:max-w-[500px]'>
-        <MilstoneOverview />
+        <MilstoneOverview project={project} milestone={milestone} />
       </div>
-      {/* <div className=''> */}
       <Tabs defaultValue='details' className='w-full'>
         <div className='border-b border-gray-800 py-0'>
           <TabsList className='mb-0 h-auto w-fit justify-start gap-6 rounded-none bg-transparent p-0'>
@@ -37,13 +79,16 @@ const MilestonePage = async ({ params }: MilestonePageProps) => {
           </TabsList>
         </div>
         <TabsContent value='details'>
-          <MilestoneDetails milestoneId={milestoneId} />
+          <MilestoneDetails
+            milestoneId={milestoneId}
+            project={project}
+            milestone={milestone}
+          />
         </TabsContent>
         <TabsContent value='links'>
-          <MilestoneLinks />
+          <MilestoneLinks project={project} milestone={milestone} />
         </TabsContent>
       </Tabs>
-      {/* </div> */}
     </section>
   );
 };