Collins (#321)

* refactor: update project components and API for voting functionality

- Adjust layout and styling in ProjectsPage and ProjectCard components.
- Enhance ProjectSidebar to include crowdfund data and voting logic.
- Implement new API methods for voting, retrieving votes, and removing votes.
- Update types for vote handling in the API.
- Clean up unused code and improve responsiveness across components.

* chore: update project dependencies and enhance project details layout

Author: 0xdevcollins

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>
   );
 };

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

@@ -73,11 +73,11 @@ async function ProjectContent({ id }: { id: string }) {
         response.data.project,
         response.data.crowdfund
       );
+      // Project data loaded successfully
     } else {
       throw new Error(response.message || 'Failed to fetch project');
     }
-  } catch (err) {
-    console.error('Error fetching project:', err);
+  } catch {
     error = 'Failed to fetch project data';
   }
 
@@ -86,7 +86,7 @@ async function ProjectContent({ id }: { id: string }) {
   }
 
   return (
-    <div className='mx-auto flex min-h-screen max-w-[1440px] flex-col space-y-[60px] overflow-x-hidden bg-[#030303] px-5 py-5 md:space-y-[80px] md:px-[50px] lg:px-[100px]'>
+    <div className='mx-auto flex min-h-screen max-w-[1440px] flex-col space-y-[60px] bg-[#030303] px-5 py-5 md:space-y-[80px] md:px-[50px] lg:px-[100px]'>
       <div className='flex-1'>
         <ProjectLayout
           project={projectData.project}

app/(landing)/projects/page.tsx

@@ -3,7 +3,7 @@ import ProjectsClient from '@/components/project/ProjectsPage';
 
 export default function ProjectsPage() {
   return (
-    <div className='relative mx-auto min-h-screen max-w-[1440px] bg-black px-5 py-5 md:px-[50px] lg:px-[100px]'>
+    <div className='relative mx-auto min-h-screen max-w-[1440px] px-5 py-5 md:px-[50px] lg:px-[100px]'>
       <ProjectPageHero />
       <ProjectsClient />
     </div>

app/globals.css

@@ -16,6 +16,45 @@
   --color-gray-700: #787878;
   --color-gray-800: #484848;
   --color-gray-900: #2b2b2b;
+
+  /*  Warning Colors */
+  --color-warning-50: #fef6e7;
+  --color-warning-75: #fbe2b7;
+  --color-warning-100: #f7d394;
+  --color-warning-200: #f7c164;
+  --color-warning-300: #f5b546;
+  --color-warning-400: #dd900d;
+  --color-warning-500: #dd900d;
+  --color-warning-600: #ad6f07;
+  --color-warning-700: #865503;
+  --color-warning-800: #664101;
+  --color-warning-900: #523300;
+
+  /* Secondary Colors */
+  --color-secondary-50: #e3effc;
+  --color-secondary-75: #c6ddf7;
+  --color-secondary-100: #b6d8ff;
+  --color-secondary-200: #80bbff;
+  --color-secondary-300: #3d89df;
+  --color-secondary-400: #1671d9;
+  --color-secondary-500: #0d5eba;
+  --color-secondary-600: #034592;
+  --color-secondary-700: #04326b;
+  --color-secondary-800: #012657;
+  --color-secondary-900: #001633;
+
+  /* Success Colors */
+  --color-success-50: #e7f6ec;
+  --color-success-75: #b5e3c4;
+  --color-success-100: #91d6a8;
+  --color-success-200: #5fc381;
+  --color-success-300: #40b869;
+  --color-success-400: #0f973d;
+  --color-success-500: #099137;
+  --color-success-600: #04802e;
+  --color-success-700: #036b26;
+  --color-success-800: #015b20;
+  --color-success-900: #004617;
 }
 /* Custom scrollbar styles for comment modal */
 .custom-scrollbar {

components/EmptyState.tsx

@@ -83,7 +83,7 @@ const EmptyState: React.FC<EmptyStateProps> = ({
       </p>
 
       {/* Button or custom action */}
-      {action ? (
+      {action === false ? null : action ? (
         action
       ) : (
         <button

components/Project-Page-Hero.tsx

@@ -7,7 +7,7 @@ import Link from 'next/link';
 
 export default function ProjectPageHero() {
   return (
-    <div className='relative min-h-screen overflow-hidden bg-black text-white'>
+    <div className='relative min-h-screen overflow-hidden text-white'>
       <div className='pointer-events-none absolute inset-0'>
         <div className='absolute bottom-1/3 left-[220px] h-[393px] w-[476px] rounded-[476px] border-[20px] border-[#DBFFB7] opacity-[0.30px] mix-blend-overlay blur-[25px] md:block lg:!hidden' />
         <div