Merge pull request #3265 from Voyager-Ship/voyager-ship/improvements

[feat]: enhance medal components and refactor reward UI layout

Author: Andyvargtz

app/api/projects/export/route.ts

@@ -0,0 +1,33 @@
+import { withAuthRole } from "@/lib/protectedRoute";
+import { exportShowcase } from "@/server/services/exportShowcase";
+import { NextRequest, NextResponse } from "next/server";
+
+export const POST = withAuthRole('hackathonCreator', async (req: NextRequest) => {
+    try {
+        const body = await req.json();
+        const buffer = await exportShowcase(body);
+        if (!buffer) {
+            return NextResponse.json(
+                { message: 'no projects found' },
+                { status: 404 }
+            );
+        }
+        return new NextResponse(buffer, {
+            headers: { 'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
+        });
+    } catch (error: any) {
+        console.error('Error POST /api/projects/export:', error.message);
+        const wrappedError = error as Error;
+        return NextResponse.json(
+            {
+                error: {
+                    message: wrappedError.message,
+                    stack: wrappedError.stack,
+                    cause: wrappedError.cause,
+                    name: wrappedError.name
+                }
+            },
+            { status: wrappedError.cause == 'ValidationError' ? 400 : 500 }
+        );
+    }
+});

components/profile/reward-board/component/auto-rotate-badge.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useFrame } from "@react-three/fiber";
 import * as THREE from "three";
 import { BackFace } from "./back-face";
@@ -20,6 +20,14 @@ export function AutoRotateMedal({
   speed?: number;
 }) {
   const groupRef = useRef<THREE.Group | null>(null);
+  const badgeDefaultImage = "/wolfie/wolfie-hack.png";
+  const [badgeImage, setBadgeImage] = useState(badgeDefaultImage);
+
+  useEffect(() => {
+    if (image && image !== '') {
+      setBadgeImage(image);
+    }
+  }, [image]);
 
   useFrame((state, delta) => {
     const g = groupRef.current;
@@ -32,7 +40,7 @@ export function AutoRotateMedal({
   return (
     <group ref={groupRef}>
       <CircularFrame color="#999B9B" />
-      <ImageDisc url={image} isUnlocked={!!is_unlocked} Disc={Disc} />
+      <ImageDisc url={badgeImage} isUnlocked={!!is_unlocked} Disc={Disc} />
       <BackFace name={name} description={description} DISC={Disc} />
     </group>
   );

components/profile/reward-board/component/requirement-panel.tsx

@@ -29,7 +29,7 @@ export function RequirementsPanel({
             </h3>
           </div>
 
-          <div className="px-6 pb-6 h-35 overflow-y-auto">
+          <div className="px-6 pb-6 ">
             <ul className="text-left ">
               {requirements.map((requirement) => (
                 <li

components/profile/reward-board/component/reward-board.tsx

@@ -6,17 +6,18 @@ import { getRewardBoard } from "@/server/services/rewardBoard";
 import { Separator } from "@/components/ui/separator";
 import { Badge, UserBadge } from "@/types/badge";
 import { getAllBadges } from "@/server/services/badge";
+import Link from "next/link";
 
 export default async function RewardBoard() {
   const session = await getAuthSession();
   const user_id = session?.user.id;
   if (!user_id) {
     return <div>Loading...</div>;
   }
-  const userBadges:UserBadge[] = await getRewardBoard(user_id);
+  const userBadges: UserBadge[] = await getRewardBoard(user_id);
   const badges = await getAllBadges();
-  const academyBadges = badges.filter((badge) => badge.category == "academy");
-  const hackathonBadges:Badge[] = badges.filter((badge) => badge.category == "hackathon");
+  const academyBadges = badges.filter((badge) => badge.category == "academy")?.sort((a, b) => a.id.localeCompare(b.id));
+  const hackathonBadges: Badge[] = badges.filter((badge) => badge.category == "hackathon")?.sort((a, b) => a.id.localeCompare(b.id));
   const totalPoints = userBadges.reduce((acc, userBadge) => acc + userBadge.points, 0);
   const hackathonBadgesUnlocked = hackathonBadges.map((badge) => {
     const userBadge = userBadges.find((userBadge) => userBadge.badge_id == badge.id);
@@ -25,16 +26,16 @@ export default async function RewardBoard() {
       is_unlocked: !!userBadge,
       requirements: userBadge?.requirements || badge.requirements,
     };
-  }).sort(element=>element.is_unlocked ? -1 : 1);
-  
+  });
+
   const academyBadgesUnlocked = academyBadges.map((badge) => {
     const userBadge = userBadges.find((userBadge) => userBadge.badge_id == badge.id);
     return {
       ...badge,
       is_unlocked: !!userBadge,
       requirements: userBadge?.requirements || badge.requirements,
     };
-  }).sort(element=>element.is_unlocked ? -1 : 1);
+  }).sort(element => element.is_unlocked ? -1 : 1);
   const rewards = hackathonBadgesUnlocked.map((reward) => (
     <RewardCard
       key={reward.name}
@@ -50,7 +51,7 @@ export default async function RewardBoard() {
     />
   ));
   const academyRewards = academyBadgesUnlocked.map((reward) => (
-    
+
     <RewardCard
       key={reward.name}
       icon={reward.image_path}
@@ -61,14 +62,14 @@ export default async function RewardBoard() {
       requirements={reward.requirements}
       id={reward.id}
       is_unlocked={reward.is_unlocked}
-  
+
     />
   ));
 
   return (
     <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
       <div>
-  
+
 
         <div className="flex flex-col gap-4 sm:gap-6 mb-2 sm:mb-4">
           <div className="flex justify-between items-center">
@@ -86,7 +87,8 @@ export default async function RewardBoard() {
         {rewards.length === 0 ? (
           <div className="text-center py-12">
             <div className="text-gray-500 dark:text-gray-400 text-lg">
-              No rewards available yet. Keep contributing to earn rewards!
+
+              <Link href="/hackathons" className="text-blue-500 hover:text-blue-700">   Your contributions matter. Explore our dev events here </Link>
             </div>
           </div>
         ) : (
@@ -96,7 +98,7 @@ export default async function RewardBoard() {
         )}
       </div>
 
-      <div className="flex flex-col gap-4 sm:gap-6 mb-2 mt-8 ">
+      <div className="flex flex-col gap-4 sm:gap-6 mb-2 mt-3 ">
         <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white">
           Academy Badges
         </h1>
@@ -105,7 +107,7 @@ export default async function RewardBoard() {
       {academyRewards.length === 0 ? (
         <div className="text-center py-12">
           <div className="text-gray-500 dark:text-gray-400 text-lg">
-          Your contributions matter. Keep going to start earning rewards!
+            <Link href="/hackathons" className="text-blue-500 hover:text-blue-700">   Your contributions matter. Explore our dev events here </Link>
           </div>
         </div>
       ) : (

components/profile/reward-board/component/reward-card.tsx

@@ -30,7 +30,6 @@ export const RewardCard = ({
         <div
           style={{ width: "100%", height: 300, cursor: "pointer" }}
           onClick={() => setOpen(true)}
-          title="details"
         >
           <Canvas
             shadows={false}
@@ -94,7 +93,7 @@ export const RewardCard = ({
           </div>
 
           {requirements && requirements.length > 0 && (
-            <div className="w-full">
+            <div >
               <RequirementsPanel requirements={requirements as any} />
             </div>
           )}

components/profile/reward-board/component/static-metal.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, {  } from "react";
+import React, { useEffect, useState } from "react";
 import { CircularFrame } from "./circular-frame";
 import { ImageDisc } from "./image-disc";
 
@@ -13,10 +13,19 @@ export function StaticMedal({
     is_unlocked?: boolean;
     Disc: { radius: number; segments: number }
   }) {
+    const badgeDefaultImage = "/wolfie/wolfie-hack.png";
+    const [badgeImage, setBadgeImage] = useState(badgeDefaultImage);
+
+    useEffect(() => {
+      if (image && image !== '') {
+        setBadgeImage(image);
+      }
+    }, [image]);
+
     return (
       <group rotation={[0,0,0]}>
         <CircularFrame color="#999B9B" />
-        <ImageDisc url={image} isUnlocked={!!is_unlocked} Disc={Disc} />
+        <ImageDisc url={badgeImage} isUnlocked={!!is_unlocked} Disc={Disc} />
       </group>
     );
   }

components/showcase/ShowCaseCard.tsx

@@ -25,10 +25,12 @@ import {
 } from '../ui/pagination';
 import React from 'react';
 import { ProjectCard } from './ProjectCard';
-import Link from 'next/link';
 import { ProjectFilters } from '@/types/project';
 import { useRouter } from 'next/navigation';
 import { HackathonHeader } from '@/types/hackathons';
+import { useExports } from './hooks/useExports';
+import { LoadingButton } from '../ui/loading-button';
+import { useSession } from 'next-auth/react';
 const tracks = ['AI', 'DeFi', 'RWA', 'Gaming', 'SocialFi', 'Tooling'];
 
 type Props = {
@@ -47,16 +49,45 @@ export default function ShowCaseCard({
   const [searchValue, setSearchValue] = useState('');
   const [filters, setFilters] = useState<ProjectFilters>(initialFilters);
   const [currentPage, setCurrentPage] = useState(initialFilters.page ?? 1);
+  const { data: session } = useSession();
   const [recordsByPage, setRecordsByPage] = useState(
     initialFilters.recordsByPage ?? 12
   );
   const [totalPages, setTotalPages] = useState<number>(
     Math.ceil(totalProjects / recordsByPage) || 1
   );
+  const [isExporting, setIsExporting] = useState(false);
   const router = useRouter();
-
+  const { exportToExcel, isLoading, error } = useExports();
   const selectedHackathon = events.find(event => event.id === filters.event);
   const availableTracks = selectedHackathon?.content?.tracks?.map(track => track.name) ?? [];
+  const [hasRole, setHasRole] = useState(false);
+  const handleExport = async () => {
+    try {
+      setIsExporting(true);
+      await exportToExcel({
+        event: 'hackathon-2024',
+        track: 'DeFi',
+        winningProjects: true
+      });
+    } catch (err) {
+      console.error('Error exporting:', error);
+    }
+    finally {
+      setIsExporting(false);
+    }
+  };
+
+  useEffect(() => {
+    if(session?.user) {
+      if (session?.user?.custom_attributes?.includes('hackathonCreator')) {
+        setHasRole(true);
+      }
+    }
+    else {
+      setHasRole(false);
+    }
+  }, [session]);
 
 
   const handleFilterChange = (type: keyof ProjectFilters, value: string) => {
@@ -112,6 +143,14 @@ export default function ShowCaseCard({
         </CardDescription>
       </CardHeader>
       <Separator className='mt-6 bg-zinc-300 dark:bg-zinc-800 h-[2px]' />
+      <div className='flex justify-end'>
+        {hasRole && <LoadingButton variant={'outline'}
+        isLoading={isExporting}
+        onClick={handleExport}
+          className='bg-zinc-50 dark:bg-zinc-950 border border-zinc-300 dark:border-zinc-800 text-zinc-900 dark:text-zinc-50'>
+          Export Projects
+        </LoadingButton>}
+      </div>
       <div className='grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mt-6'>
         <div className='w-full'>
           <Tabs
@@ -146,6 +185,7 @@ export default function ShowCaseCard({
             </TabsList>
           </Tabs>
         </div>
+
         <div className='relative w-full'>
           <Search className='absolute left-3 top-1/2 transform -translate-y-1/2 h-[40px] w-5 text-zinc-400 stroke-zinc-700' />
           <Input