Feat/certificate (#68)

* feat: implement certificate encoding and decoding functionality with AES encryption

* feat: blank cert

* Refactor code structure for improved readability and maintainability

apps/hackathon/src/app/certificate/[certId]/page.tsx

@@ -0,0 +1,517 @@
+import { FC, ReactElement, useState, useEffect, useRef } from 'react';
+import { useParams, useNavigate } from 'react-router';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { decodeCertificateId } from '../../../utils/certificate';
+import {
+  useTeamById,
+  useTeamSubmission,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
+import QRCode from 'qrcode';
+import html2canvas from 'html2canvas';
+
+interface DecodedCert {
+  teamId: string;
+  submissionId: string;
+}
+
+const CertificatePage: FC = (): ReactElement => {
+  const { certId } = useParams<{ certId: string }>();
+  const navigate = useNavigate();
+  const { session } = useAuthStore();
+  const [decodedInfo, setDecodedInfo] = useState<DecodedCert | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const teamNameRef = useRef<HTMLHeadingElement>(null);
+  const userNameRef = useRef<HTMLHeadingElement>(null);
+  const [teamNameFontSize, setTeamNameFontSize] = useState('2.25rem');
+  const [userNameFontSize, setUserNameFontSize] = useState('2.25rem');
+  const [qrCodeUrl, setQrCodeUrl] = useState<string>('');
+  const certificateRef = useRef<HTMLDivElement>(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [certificateImage, setCertificateImage] = useState<string>('');
+  const [showTemplate, setShowTemplate] = useState(true);
+
+  useEffect(() => {
+    if (certId) {
+      decodeCertificateId(certId)
+        .then(setDecodedInfo)
+        .catch(() => {
+          setError('Invalid certificate ID');
+        });
+    }
+  }, [certId]);
+
+  // Generate QR Code
+  useEffect(() => {
+    if (certId) {
+      const certificateUrl = `${window.location.origin}/certificate/${certId}`;
+      QRCode.toDataURL(certificateUrl, {
+        width: 200,
+        margin: 1,
+        color: {
+          dark: '#000000',
+          light: '#ffffff',
+        },
+      })
+        .then(setQrCodeUrl)
+        .catch((err) => console.error('QR Code generation failed:', err));
+    }
+  }, [certId]);
+
+  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(
+    decodedInfo?.teamId || '',
+    !!decodedInfo?.teamId
+  );
+  const { data: submissionData, isLoading: isLoadingSubmission } =
+    useTeamSubmission(decodedInfo?.teamId || '', !!decodedInfo?.teamId);
+
+  const team = teamData?.data;
+  const submission = submissionData?.data;
+
+  const isLoading =
+    (!decodedInfo && !error) || isLoadingTeam || isLoadingSubmission;
+
+  // Dynamic font sizing: shrink by 2px if height exceeds 80px
+  useEffect(() => {
+    const adjustFontSize = (
+      element: HTMLElement | null,
+      maxHeight: number,
+      startSize: number,
+      setter: (size: string) => void
+    ) => {
+      if (!element) return;
+
+      let currentSize = startSize;
+      element.style.fontSize = `${currentSize}px`;
+
+      while (element.offsetHeight > maxHeight && currentSize > 1) {
+        currentSize -= 2;
+        element.style.fontSize = `${currentSize}px`;
+      }
+
+      setter(`${currentSize}px`);
+    };
+
+    const timer = setTimeout(() => {
+      adjustFontSize(teamNameRef.current, 80, 20, setTeamNameFontSize);
+      adjustFontSize(userNameRef.current, 80, 36, setUserNameFontSize);
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [team?.name, session?.user?.fullname]);
+
+  // Generate certificate canvas screenshot
+  useEffect(() => {
+    const generateCertificate = async () => {
+      if (!certificateRef.current || !team || !submission || !qrCodeUrl) return;
+
+      setIsGenerating(true);
+      try {
+        // Wait a bit for fonts and images to load
+        await new Promise((resolve) => setTimeout(resolve, 500));
+
+        const canvas = await html2canvas(certificateRef.current, {
+          scale: 2,
+          useCORS: true,
+          backgroundColor: '#ffffff',
+          logging: false,
+          width: 1000,
+          height: (1000 * 2480) / 3508,
+        });
+
+        const imageUrl = canvas.toDataURL('image/png');
+        setCertificateImage(imageUrl);
+        setShowTemplate(false);
+      } catch (error) {
+        console.error('Failed to generate certificate:', error);
+      } finally {
+        setIsGenerating(false);
+      }
+    };
+
+    generateCertificate();
+  }, [team, submission, qrCodeUrl, session?.user?.fullname]);
+
+  // Download certificate
+  const handleDownloadCertificate = () => {
+    if (!certificateImage) return;
+
+    const link = document.createElement('a');
+    link.href = certificateImage;
+    link.download = `certificate-${team?.name || 'hackathon'}.png`;
+    link.click();
+  };
+
+  // Print certificate
+  const handlePrintCertificate = () => {
+    if (!certificateImage) return;
+
+    const printWindow = window.open('', '_blank');
+    if (printWindow) {
+      printWindow.document.write(`
+        <html>
+          <head>
+            <title>Certificate - ${team?.name}</title>
+            <style>
+              body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
+              img { max-width: 100%; height: auto; }
+              @media print {
+                @page { size: A4 landscape; margin: 0; }
+                body { margin: 0; }
+                img { width: 100%; height: auto; }
+              }
+            </style>
+          </head>
+          <body>
+            <img src="${certificateImage}" />
+          </body>
+        </html>
+      `);
+      printWindow.document.close();
+      printWindow.onload = () => {
+        printWindow.print();
+      };
+    }
+  };
+
+  if (error || !certId) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-6xl mb-4">❌</div>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Invalid Certificate
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          {error || 'The certificate ID is invalid or malformed.'}
+        </p>
+        <Button onClick={() => navigate('/')}>Back to Home</Button>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <div className="text-gray-600 dark:text-gray-400">
+            Loading certificate...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!submission || submission.id !== decodedInfo?.submissionId) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-6xl mb-4">📄</div>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Certificate Not Found
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          The submission associated with this certificate could not be found.
+        </p>
+        <Button onClick={() => navigate('/')}>Back to Home</Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      {/* Print Styles */}
+      <style>{`
+        @media print {
+          @page {
+            size: A4 landscape;
+            margin: 0;
+          }
+          body {
+            margin: 0;
+            padding: 0;
+          }
+          body * {
+            visibility: hidden;
+          }
+          #certificate-wrapper {
+            visibility: visible;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: white;
+          }
+          #certificate, #certificate * {
+            visibility: visible;
+          }
+          #certificate {
+            position: relative;
+            max-width: 100%;
+            page-break-after: avoid;
+          }
+          .no-print {
+            display: none !important;
+          }
+        }
+
+        /* Mobile responsive - zoom out to fit */
+        @media (max-width: 768px) {
+          #certificate-container {
+            transform-origin: top center;
+          }
+        }
+      `}</style>
+
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700 no-print">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+                Certificate
+              </h1>
+              <p className="text-gray-600 dark:text-gray-400 mt-1">
+                {team?.name}
+              </p>
+            </div>
+            <Button
+              variant="secondary"
+              onClick={() =>
+                navigate(`/teams/${decodedInfo?.teamId}/submission`)
+              }
+            >
+              Back to Submission
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Certificate Content */}
+      <div
+        className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12"
+        id="certificate-wrapper"
+      >
+        {/* Hidden Template for Canvas Generation */}
+        <div
+          className={showTemplate ? 'block' : 'hidden'}
+          style={{ position: 'absolute', left: '-9999px' }}
+        >
+          <div
+            ref={certificateRef}
+            id="certificate-template"
+            style={{
+              position: 'relative',
+              backgroundImage: 'url(/images/blank_cert.png)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              width: '1000px',
+              height: `${(1000 * 2480) / 3508}px`,
+            }}
+          >
+            {/* User Name (from session) */}
+            <div
+              style={{
+                position: 'absolute',
+                top: '40%',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                width: '80%',
+              }}
+            >
+              <h3
+                ref={userNameRef}
+                style={{
+                  fontWeight: 'bold',
+                  color: '#111827',
+                  textAlign: 'center',
+                  fontSize: userNameFontSize,
+                  lineHeight: '1.2',
+                  wordBreak: 'break-word',
+                  textShadow: '0 1px 2px rgba(0,0,0,0.1)',
+                  margin: 0,
+                }}
+              >
+                {session?.user?.fullname || 'N/A'}
+              </h3>
+            </div>
+
+            {/* Team Name */}
+            <div
+              style={{
+                position: 'absolute',
+                top: '46%',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                width: '70%',
+              }}
+            >
+              <h3
+                ref={teamNameRef}
+                style={{
+                  fontWeight: '600',
+                  color: '#1f2937',
+                  textAlign: 'center',
+                  fontSize: teamNameFontSize,
+                  lineHeight: '1.2',
+                  wordBreak: 'break-word',
+                  margin: 0,
+                }}
+              >
+                {team?.name}
+              </h3>
+            </div>
+
+            {/* Participation Text */}
+            <div
+              style={{
+                position: 'absolute',
+                top: '60%',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                width: '70%',
+              }}
+            >
+              <p
+                style={{
+                  textAlign: 'center',
+                  color: '#374151',
+                  fontSize: '18px',
+                  fontWeight: '500',
+                  margin: 0,
+                }}
+              >
+                <span style={{ fontWeight: 'bold' }}>
+                  Peserta Hackathon IMPHNEN x KOLOSAL AI
+                </span>
+              </p>
+            </div>
+
+            {/* QR Code */}
+            <div
+              style={{
+                position: 'absolute',
+                bottom: '8%',
+                left: '8%',
+              }}
+            >
+              {qrCodeUrl && (
+                <div
+                  style={{
+                    backgroundColor: '#ffffff',
+                    padding: '8px',
+                    borderRadius: '4px',
+                    boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+                  }}
+                >
+                  <img
+                    src={qrCodeUrl}
+                    alt="Certificate QR Code"
+                    style={{ width: '96px', height: '96px' }}
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Date */}
+            <div
+              style={{
+                position: 'absolute',
+                bottom: '8%',
+                right: '8%',
+              }}
+            >
+              <p
+                style={{
+                  fontSize: '14px',
+                  color: '#374151',
+                  margin: 0,
+                }}
+              >
+                {submission.submitted_at
+                  ? new Date(submission.submitted_at).toLocaleDateString(
+                      'id-ID',
+                      {
+                        day: 'numeric',
+                        month: 'long',
+                        year: 'numeric',
+                      }
+                    )
+                  : 'N/A'}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Display Certificate Image */}
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl dark:shadow-gray-950/50 overflow-hidden p-2">
+          {isGenerating && (
+            <div className="flex items-center justify-center p-12">
+              <div className="text-center">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+                <div className="text-gray-600 dark:text-gray-400">
+                  Generating certificate...
+                </div>
+              </div>
+            </div>
+          )}
+
+          {certificateImage && !isGenerating && (
+            <img
+              src={certificateImage}
+              alt="Certificate"
+              className="w-full h-auto"
+              style={{ maxWidth: '100%', height: 'auto' }}
+            />
+          )}
+
+          {/* Actions */}
+          <div className="bg-gray-50 dark:bg-gray-800 p-6 grid grid-cols-2 xl:grid-cols-3 gap-3 justify-center no-print">
+            <Button
+              variant="secondary"
+              onClick={handleDownloadCertificate}
+              className="flex items-center gap-2"
+              disabled={isGenerating}
+            >
+              {isGenerating ? '⏳ Generating...' : '📥 Download'}
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={handlePrintCertificate}
+              className="flex items-center gap-2"
+              disabled={isGenerating}
+            >
+              {isGenerating ? '⏳ Generating...' : '🖨️ Print'}
+            </Button>
+            <Button
+              onClick={() =>
+                navigate(`/teams/${decodedInfo?.teamId}/submission`)
+              }
+              variant="secondary"
+              className="col-span-2 flex items-center gap-2 xl:col-span-1"
+            >
+              View Submission
+            </Button>
+          </div>
+        </div>
+
+        {/* Info Box */}
+        <div className="mt-8 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6 no-print">
+          <h3 className="font-bold text-blue-900 dark:text-blue-100 mb-2">
+            Certificate Information
+          </h3>
+          <p className="text-sm text-blue-800 dark:text-blue-200">
+            This certificate is a digital record of your hackathon participation
+            and project submission. You can print or save this page as a PDF for
+            your records.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CertificatePage;

apps/hackathon/src/app/teams/[teamId]/submission/page.tsx

@@ -2,6 +2,7 @@ import { FC, ReactElement } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { useNavigate, useParams } from 'react-router';
 import { useTeamById, useTeamSubmission } from '@imphnen-frontend-service/service';
+import { encodeCertificateId } from '../../../../utils/certificate';
 
 const SubmissionViewPage: FC = (): ReactElement => {
   const { teamId } = useParams<{ teamId: string }>();
@@ -15,18 +16,18 @@ const SubmissionViewPage: FC = (): ReactElement => {
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
-        <div className="text-gray-600 dark:text-neutral-400">Loading submission...</div>
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-gray-600 dark:text-gray-400">Loading submission...</div>
       </div>
     );
   }
 
   if (!submission) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
         <div className="text-6xl mb-4">📄</div>
         <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">No Submission Yet</h2>
-        <p className="text-gray-600 dark:text-neutral-400 mb-4">Your team hasn't submitted a project</p>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">Your team hasn't submitted a project</p>
         <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
       </div>
     );
@@ -43,13 +44,13 @@ const SubmissionViewPage: FC = (): ReactElement => {
     : 'Not submitted';
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-neutral-950">
-      <div className="bg-white dark:bg-neutral-900 border-b dark:border-neutral-700">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
           <div className="flex items-center justify-between">
             <div>
               <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Project Submission</h1>
-              <p className="text-gray-600 dark:text-neutral-400 mt-1">{team?.name}</p>
+              <p className="text-gray-600 dark:text-gray-400 mt-1">{team?.name}</p>
             </div>
             <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
               Back to Team
@@ -101,9 +102,37 @@ const SubmissionViewPage: FC = (): ReactElement => {
           </div>
         )}
 
-        <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 overflow-hidden">
+        {/* Certificate Banner - Only show when submission is submitted */}
+        {submission.status === 'submitted' && (
+          <div className="bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-400 dark:border-amber-500 rounded-lg p-6 mb-6">
+            <div className="flex items-center justify-between flex-wrap gap-4">
+              <div className="flex items-center space-x-3 flex-1 min-w-0">
+                <span className="text-4xl shrink-0">🏆</span>
+                <div className="min-w-0">
+                  <h3 className="font-bold text-amber-900 dark:text-amber-100 text-lg">
+                    View Your Certificate
+                  </h3>
+                  <p className="text-amber-700 dark:text-amber-300 text-sm">
+                    Congratulations! Your certificate is ready to download and share.
+                  </p>
+                </div>
+              </div>
+              <button
+                onClick={async () => {
+                  const certId = await encodeCertificateId(teamId || '', submission.id);
+                  navigate(`/certificate/${encodeURIComponent(certId)}`);
+                }}
+                className="shrink-0 px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
+              >
+                Get Certificate
+              </button>
+            </div>
+          </div>
+        )}
+
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 overflow-hidden">
           {/* Project Header */}
-          <div className="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-8">
+          <div className="bg-linear-to-r from-blue-600 to-blue-800 text-white p-8">
             <h2 className="text-3xl font-bold mb-2">{submission.project_name}</h2>
             <p className="text-blue-100">Team: {team?.name}</p>
           </div>
@@ -113,8 +142,8 @@ const SubmissionViewPage: FC = (): ReactElement => {
             {/* Description */}
             <div>
               <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Project Description</h3>
-              <div className="bg-gray-50 dark:bg-neutral-800 rounded-lg p-4">
-                <p className="text-gray-700 dark:text-neutral-300 whitespace-pre-wrap">{submission.description}</p>
+              <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
+                <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{submission.description}</p>
               </div>
             </div>
 
@@ -170,7 +199,7 @@ const SubmissionViewPage: FC = (): ReactElement => {
                       <img
                         src={url}
                         alt={`Screenshot ${index + 1}`}
-                        className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 dark:border-neutral-700 hover:border-blue-500 dark:hover:border-primary-500 transition-colors cursor-pointer"
+                        className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-primary-500 transition-colors cursor-pointer"
                       />
                     </a>
                   ))}
@@ -179,11 +208,11 @@ const SubmissionViewPage: FC = (): ReactElement => {
             )}
 
             {/* Submission Info */}
-            <div className="bg-gray-50 dark:bg-neutral-800 rounded-lg p-4 border-t-4 border-blue-600 dark:border-primary-500">
+            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border-t-4 border-blue-600 dark:border-primary-500">
               <h3 className="text-sm font-bold text-gray-900 dark:text-white mb-2">Submission Information</h3>
               <div className="grid gap-2 text-sm">
                 <div className="flex justify-between">
-                  <span className="text-gray-600 dark:text-neutral-400">Status:</span>
+                  <span className="text-gray-600 dark:text-gray-400">Status:</span>
                   <span className={`font-medium ${
                     submission.status === 'submitted'
                       ? 'text-green-600 dark:text-green-400'
@@ -199,11 +228,11 @@ const SubmissionViewPage: FC = (): ReactElement => {
                   </span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-gray-600 dark:text-neutral-400">Submitted:</span>
+                  <span className="text-gray-600 dark:text-gray-400">Submitted:</span>
                   <span className="font-medium text-gray-900 dark:text-white">{submittedDate}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-gray-600 dark:text-neutral-400">Submission ID:</span>
+                  <span className="text-gray-600 dark:text-gray-400">Submission ID:</span>
                   <span className="font-medium text-gray-900 dark:text-white font-mono text-xs">
                     {submission.id}
                   </span>

apps/hackathon/src/app/winners/page.tsx

@@ -0,0 +1,318 @@
+import { FC, ReactElement } from 'react';
+import { useNavigate } from 'react-router';
+import { useWinners } from '@imphnen-frontend-service/service';
+
+const WinnerPage: FC = (): ReactElement => {
+  const navigate = useNavigate();
+  const { data, isLoading, error } = useWinners();
+
+  const winners = data?.data ?? [];
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <div className="text-gray-600 dark:text-gray-400">
+            Loading winners...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-6xl mb-4">⚠️</div>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Error Loading Winners
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          Unable to load winners at this time. Please try again later.
+        </p>
+      </div>
+    );
+  }
+
+  // Sort winners by rank
+  const sortedWinners = [...winners].sort((a, b) => a.rank - b.rank);
+
+  // Medal emojis for top 3
+  const getMedalEmoji = (rank: number) => {
+    switch (rank) {
+      case 1:
+        return '🥇';
+      case 2:
+        return '🥈';
+      case 3:
+        return '🥉';
+      default:
+        return '🏆';
+    }
+  };
+
+  // Get rank color
+  const getRankColor = (rank: number) => {
+    switch (rank) {
+      case 1:
+        return 'from-yellow-400 to-yellow-600';
+      case 2:
+        return 'from-gray-300 to-gray-500';
+      case 3:
+        return 'from-amber-600 to-amber-800';
+      default:
+        return 'from-blue-500 to-blue-700';
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="text-center">
+            <div className="text-6xl mb-4">🏆</div>
+            <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
+              Hackathon Winners
+            </h1>
+            <p className="text-gray-600 dark:text-gray-400">
+              Congratulations to all the winning teams!
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Winners List */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {winners.length === 0 ? (
+          <div className="text-center py-16">
+            <div className="text-6xl mb-4">🎯</div>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+              No Winners Announced Yet
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400">
+              Winners will be announced here once the hackathon concludes.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-8">
+            {/* Top 3 Winners - Mobile View */}
+            <div className="md:hidden space-y-6">
+              {[1, 2, 3].map((position) => {
+                const winner = sortedWinners[position - 1];
+
+                if(!winner) return null;
+
+                return (
+                  <div
+                    key={winner.id}
+                    className={`bg-white dark:bg-gray-800 rounded-lg p-3 shadow-lg ${
+                      getRankColor(winner.rank).includes('yellow')
+                        ? 'border-4 border-yellow-400 dark:border-yellow-600'
+                        : getRankColor(winner.rank).includes('gray')
+                        ? 'border-4 border-gray-400 dark:border-gray-600'
+                        : 'border-4 border-amber-600 dark:border-amber-500'
+                    }}`}
+                  >
+                    <div className="flex items-center gap-4">
+                      <div
+                        className={`aspect-square p-1 rounded-full bg-linear-to-br ${getRankColor(
+                          winner.rank
+                        )} flex items-center justify-center text-white font-bold text-2xl`}
+                      >
+                        <div className="text-4xl">
+                          {getMedalEmoji(winner.rank)}
+                        </div>
+                      </div>
+
+                      {winner.team.logo && (
+                        <img
+                          src={winner.team.logo}
+                          alt={`${winner.team.name} logo`}
+                          className="w-20 h-20 rounded-full object-cover border-3 border-white dark:border-gray-700 shadow-lg"
+                        />
+                      )}
+
+                      <div className="flex-1">
+                        <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+                          {winner.team.name}
+                        </h2>
+                        <p className="text-sm text-gray-600 dark:text-gray-400">
+                          {winner.team.city}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Top 3 Winners - Tablet/Desktop Podium View */}
+            <div className="hidden md:flex gap-8 items-end justify-center w-full">
+              {[2, 1, 3].map((position) => {
+                const winner = sortedWinners[position - 1];
+                if(!winner) return null;
+                return (
+                  <div
+                    key={winner.id}
+                    className="w-full max-w-xs flex flex-col items-center space-y-4"
+                  >
+                    <div className="text-5xl">{getMedalEmoji(winner.rank)}</div>
+
+                    {/* Team Logo */}
+                    {winner.team.logo && (
+                      <img
+                        src={winner.team.logo}
+                        alt={`${winner.team.name} logo`}
+                        className="w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-lg"
+                      />
+                    )}
+
+                    <div className="text-center px-2">
+                      <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+                        {winner.team.name}
+                      </h2>
+                      <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                        {winner.team.city}
+                      </p>
+                    </div>
+
+                    {/* Podium */}
+                    <div
+                      className={`${
+                        winner.rank === 1
+                          ? 'h-42 bg-yellow-500'
+                          : winner.rank === 2
+                          ? 'h-32 bg-gray-400'
+                          : 'h-16 bg-amber-600'
+                      } w-full flex items-end justify-center rounded-t-lg shadow-lg`}
+                    >
+                      <div className="text-white font-bold text-3xl pb-4">
+                        #{winner.rank}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Ranks 4-23: Prize Winners */}
+            {sortedWinners.filter((w) => w.rank >= 4 && w.rank <= 23).length >
+              0 && (
+              <div className="mt-12">
+                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">
+                  Favorite
+                </h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {sortedWinners
+                    .filter((w) => w.rank >= 4 && w.rank <= 23)
+                    .map((winner) => (
+                      <div
+                        key={winner.id}
+                        className="bg-white dark:bg-gray-800 border-2 border-gray-400 dark:border-gray-600 rounded-lg p-4 hover:shadow-lg transition-shadow"
+                      >
+                        <div className="flex items-center gap-4">
+                          <div className="shrink-0">
+                            <div className="w-12 h-12 rounded-full bg-linear-to-br from-gray-400 to-gray-600 flex items-center justify-center text-white font-bold text-lg">
+                              #{winner.rank}
+                            </div>
+                          </div>
+
+                          {winner.team.logo && (
+                            <img
+                              src={winner.team.logo}
+                              alt={`${winner.team.name} logo`}
+                              className="w-16 h-16 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700"
+                            />
+                          )}
+
+                          <div className="flex-1 min-w-0">
+                            <h3 className="font-bold text-gray-900 dark:text-white truncate">
+                              {winner.team.name}
+                            </h3>
+                            <p className="text-sm text-gray-600 dark:text-gray-400">
+                              {winner.team.city}
+                            </p>
+                            <div className="flex items-center gap-1 mt-1">
+                              <span className="text-xs bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 px-2 py-1 rounded-full">
+                                🎁 Prize Winner
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            )}
+
+            {/* Rank 24+: Remaining Participants */}
+            {sortedWinners.filter((w) => w.rank >= 24).length > 0 && (
+              <div className="mt-12">
+                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">
+                  All Participants
+                </h2>
+                <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+                  <div className="divide-y divide-gray-200 dark:divide-gray-700">
+                    {sortedWinners
+                      .filter((w) => w.rank >= 24)
+                      .map((participant) => (
+                        <div
+                          key={participant.id}
+                          className="p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+                        >
+                          <div className="flex items-center gap-4">
+                            <div className="shrink-0 w-10 text-center">
+                              <span className="text-sm font-semibold text-gray-600 dark:text-gray-400">
+                                #{participant.rank}
+                              </span>
+                            </div>
+
+                            {participant.team.logo && (
+                              <img
+                                src={participant.team.logo}
+                                alt={`${participant.team.name} logo`}
+                                className="w-12 h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700"
+                              />
+                            )}
+
+                            <div className="flex-1 min-w-0">
+                              <h3 className="font-semibold text-gray-900 dark:text-white">
+                                {participant.team.name}
+                              </h3>
+                              <p className="text-sm text-gray-600 dark:text-gray-400">
+                                {participant.team.city}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Footer Info */}
+      {winners.length > 0 && (
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8">
+          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
+            <h3 className="font-bold text-blue-900 dark:text-blue-100 mb-2">
+              Congratulations! 🎉
+            </h3>
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              Thank you to all participants for making this hackathon a success.
+              Every project and idea contributed to an incredible showcase of
+              innovation and creativity.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default WinnerPage;

apps/hackathon/src/utils/aesclient.ts

@@ -0,0 +1,86 @@
+const enc = new TextEncoder();
+const dec = new TextDecoder();
+
+function randBytes(len: number): Uint8Array {
+  const b = new Uint8Array(len);
+  crypto.getRandomValues(b);
+  return b;
+}
+
+function bufToBase64(buf: ArrayBuffer): string {
+  const bytes = new Uint8Array(buf);
+  let s = '';
+  for (let i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+  return btoa(s);
+}
+
+function base64ToBuf(b64: string): ArrayBuffer {
+  const s = atob(b64);
+  const arr = new Uint8Array(s.length);
+  for (let i = 0; i < s.length; i++) arr[i] = s.charCodeAt(i);
+  return arr.buffer;
+}
+
+async function deriveKeyFromPassphrase(passphrase: string, salt: Uint8Array, iterations = 100_000) {
+  const passKey = await crypto.subtle.importKey(
+    'raw',
+    enc.encode(passphrase),
+    { name: 'PBKDF2' },
+    false,
+    ['deriveKey']
+  );
+
+  return crypto.subtle.deriveKey(
+    {
+      name: 'PBKDF2',
+      salt,
+      iterations,
+      hash: 'SHA-256'
+    },
+    passKey,
+    { name: 'AES-GCM', length: 256 },
+    false,
+    ['encrypt', 'decrypt']
+  );
+}
+
+/**
+ * Encrypts plaintext with passphrase -> returns base64(salt||iv||ciphertext)
+ */
+export async function encryptText(plaintext: string, passphrase: string) {
+  const salt = randBytes(16); // 128-bit salt
+  const iv = randBytes(12);   // 96-bit IV recommended for GCM
+  const key = await deriveKeyFromPassphrase(passphrase, salt);
+
+  const cipher = await crypto.subtle.encrypt(
+    { name: 'AES-GCM', iv },
+    key,
+    enc.encode(plaintext)
+  );
+
+  // concat salt + iv + ciphertext
+  const out = new Uint8Array(salt.length + iv.length + cipher.byteLength);
+  out.set(salt, 0);
+  out.set(iv, salt.length);
+  out.set(new Uint8Array(cipher), salt.length + iv.length);
+
+  return bufToBase64(out.buffer);
+}
+
+/**
+ * Decrypts base64(salt||iv||ciphertext) with passphrase -> plaintext
+ */
+export async function decryptText(b64combined: string, passphrase: string) {
+  const combined = new Uint8Array(base64ToBuf(b64combined));
+  const salt = combined.slice(0, 16);
+  const iv = combined.slice(16, 28);
+  const cipher = combined.slice(28);
+
+  const key = await deriveKeyFromPassphrase(passphrase, salt);
+  const plainBuf = await crypto.subtle.decrypt(
+    { name: 'AES-GCM', iv },
+    key,
+    cipher
+  );
+  return dec.decode(plainBuf);
+}

apps/hackathon/src/utils/certificate.ts

@@ -0,0 +1,41 @@
+import { decryptText, encryptText } from "./aesclient";
+
+const SECRET_KEY = 'imphnen-hackathon-2025';
+
+/**
+ * Encode teamId and submissionId into a certificate ID
+ * Uses base64 encoding for simple obfuscation
+ * @param teamId - The team ID
+ * @param submissionId - The submission ID
+ * @returns Encoded certificate ID
+ */
+export const encodeCertificateId = async (teamId: string, submissionId: string): Promise<string> => {
+  const combined = `${teamId}::${submissionId}`;
+  return encryptText(combined, SECRET_KEY);
+};
+
+/**
+ * Decode certificate ID back to teamId and submissionId
+ * @param certId - The encoded certificate ID
+ * @returns Object containing teamId and submissionId
+ */
+export const decodeCertificateId = async (certId: string): Promise<{ teamId: string; submissionId: string }> => {
+  try {
+    const decoded = await decryptText(certId, SECRET_KEY);
+    const [teamId, submissionId] = decoded.split('::');
+    return { teamId, submissionId };
+  } catch {
+    throw new Error('Invalid certificate ID');
+  }
+};
+
+/**
+ * For development: Create a certId using created_at timestamp
+ * @param teamId - The team ID
+ * @param createdAt - The creation timestamp
+ * @returns Encoded certificate ID
+ */
+export const encodeCertificateIdWithTimestamp = (teamId: string, createdAt: string): string => {
+  const combined = `${teamId}::${createdAt}`;
+  return Buffer.from(combined).toString('base64');
+};

libs/service/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './mentors';
 export * from './upload';
 export * from './teams';
 export * from './messages';
+export * from './winners';

libs/service/src/hooks/winners/index.ts

@@ -0,0 +1,43 @@
+import { useQuery } from '@tanstack/react-query';
+import { hackathonApi, HackathonApiResponse } from '../../api/hackathon';
+
+// Query keys
+export const winnerKeys = {
+  all: ['winners'] as const,
+  lists: () => [...winnerKeys.all, 'list'] as const,
+};
+
+// API response types
+interface Team {
+  id: string;
+  name: string;
+  description: string;
+  city: string;
+  visibility: string;
+  logo: string;
+  banner: string;
+  leader_id: string;
+  created_at: string;
+  updated_at: string;
+}
+
+interface Winner {
+  id: string;
+  team_id: string;
+  team: Team;
+  rank: number;
+  prize: string;
+  announced_at: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export const useWinners = () => {
+  return useQuery<HackathonApiResponse<Winner[]>>({
+    queryKey: winnerKeys.lists(),
+    queryFn: async () => {
+      const response = await hackathonApi.get('/winners');
+      return response.data;
+    },
+  });
+};

package.json

@@ -49,11 +49,13 @@
     "dayjs": "^1.11.13",
     "framer-motion": "^12.9.2",
     "graphql": "^16.11.0",
+    "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
     "next": "~16.0.3",
     "next-themes": "^0.4.6",
     "openapi-fetch": "^0.15.0",
     "openapi-react-query": "^0.5.0",
+    "qrcode": "^1.5.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.56.4",
@@ -96,6 +98,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.12.0",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.2.0",