chore: upgrade dependencies, restructure shared libs, and fix UI

- Upgrade Nx 22.1.1 → 22.6.3 and all patch/minor dependencies
- Restructure shared libs: move business logic from utils to service
- Consolidate shadcn-ui into ui lib with atomic design pattern
- Fix container centering for landing app (Tailwind v4 compatibility)
- Fix button styling by updating @source directive in globals.css
- Fix SiCss3 → SiCss rename in react-icons 5.6
- Fix duplicate useSession export conflict
- Remove dead code, comments, and unused files

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/hackathon/src/app/auth/callback/page.tsx

@@ -18,56 +18,45 @@ const CallbackPage: FC = (): ReactElement => {
       hasRunRef.current = true;
 
       try {
-        // Check URL hash for Supabase email confirmation callback
         const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
         const urlParams = new URLSearchParams(globalThis.location.search);
 
         const type = hashParams.get('type') || urlParams.get('type');
         const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
 
-        // Debug: log what we received
         console.log('[Callback] Params:', { type, accessToken: !!accessToken, hash: globalThis.location.hash, search: globalThis.location.search });
 
-        // Handle Supabase email callbacks (has access_token in hash or query)
-        // This includes: signup confirmation, email confirmation, password recovery
         if (accessToken) {
           setIsProcessing(false);
 
-          // Password recovery - type is 'recovery' or we have access_token from reset email
           if (type === 'recovery' || type === 'magiclink') {
             toast.success('Email verified! Please set your new password.');
             navigate('/auth/reset-password?access_token=' + accessToken);
             return;
           }
 
-          // Signup/Email confirmation
           if (type === 'signup' || type === 'email_confirmation') {
             toast.success('Email verified successfully! Please log in to continue.');
             navigate('/auth/login');
             return;
           }
 
-          // If we have access_token but unknown type, assume it's password recovery
-          // (Supabase sometimes sends without explicit type)
           toast.success('Email verified! Please set your new password.');
           navigate('/auth/reset-password?access_token=' + accessToken);
           return;
         }
 
-        // Get the code from URL query params (GitHub OAuth)
         const code = urlParams.get('code');
 
         if (!code) {
           throw new Error('No authorization code received');
         }
 
-        // Exchange the code for tokens using backend API (GitHub OAuth)
         const result = await exchangeGitHubCode({ code });
 
         toast.success('Login successful!');
         setIsProcessing(false);
 
-        // Check if user has completed onboarding (has location)
         if (result.user.location) {
           globalThis.location.replace('/dashboard');
         } else {
@@ -90,7 +79,6 @@ const CallbackPage: FC = (): ReactElement => {
   }, []);
 
   if (error) {
-    // Check if error is related to private email
     const isPrivateEmailError =
       error.toLowerCase().includes('failed to create user') ||
       error.toLowerCase().includes('email') ||

apps/hackathon/src/app/auth/login/page.tsx

@@ -19,7 +19,6 @@ export default function LoginPage() {
   const [error, setError] = useState<string | null>(null);
   const [showPassword, setShowPassword] = useState(false);
 
-  // Check for password reset tokens in URL and redirect to reset-password page
   useEffect(() => {
     const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
     const urlParams = new URLSearchParams(globalThis.location.search);
@@ -27,11 +26,9 @@ export default function LoginPage() {
     const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
     const type = hashParams.get('type') || urlParams.get('type');
 
-    // If we have an access_token, this is likely a password reset redirect that landed on the wrong page
     if (accessToken) {
       console.log('[Login] Detected access_token, redirecting to reset-password page');
 
-      // Check if it's a password recovery
       if (type === 'recovery' || type === 'magiclink' || !type) {
         toast.info('Redirecting to password reset...');
         navigate('/auth/reset-password?access_token=' + accessToken);
@@ -53,7 +50,6 @@ export default function LoginPage() {
 
       toast.success('Login successful!');
 
-      // Redirect based on onboarding status
       if (result.user.location) {
         navigate('/dashboard');
       } else {
@@ -71,7 +67,6 @@ export default function LoginPage() {
 
       const result = await signInWithGitHub();
 
-      // Check if we got a redirect URL
       if (result?.url) {
         globalThis.location.href = result.url;
       } else {

apps/hackathon/src/app/auth/reset-password/page.tsx

@@ -15,8 +15,6 @@ export default function ResetPasswordPage() {
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   useEffect(() => {
-    // Get the access_token from URL hash (Supabase sends it as hash fragment)
-    // or from query params (when redirected from callback page)
     const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
     const queryParams = new URLSearchParams(globalThis.location.search);
     const token = hashParams.get('access_token') || queryParams.get('access_token');
@@ -55,7 +53,6 @@ export default function ResetPasswordPage() {
 
       toast.success('Password updated successfully!');
 
-      // Clear session and redirect to login
       clearSession();
       navigate('/auth/login');
     } catch (err) {

apps/hackathon/src/app/auth/signup/page.tsx

@@ -32,13 +32,11 @@ const signupSchema = z
 
 type SignupFormData = z.infer<typeof signupSchema>;
 
-// Registration deadline: 2025-11-30 23:29:00 WIB (UTC+7)
 const REGISTRATION_DEADLINE = new Date('2025-11-30T16:29:00Z');
 
 export default function SignupPage() {
   const navigate = useNavigate();
 
-  // Check if registration is closed
   const isRegistrationClosed = new Date() >= REGISTRATION_DEADLINE;
   const { signInWithGitHub } = useGitHubAuth();
   const signupMutation = useSignup();
@@ -76,7 +74,6 @@ export default function SignupPage() {
     }
   };
 
-  // Show closed registration screen
   if (isRegistrationClosed) {
     return (
       <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
@@ -119,7 +116,6 @@ export default function SignupPage() {
     );
   }
 
-  // Show success screen after registration
   if (registrationSuccess) {
     return (
       <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">

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

@@ -41,14 +41,11 @@ const CertificatePage: FC = (): ReactElement => {
     }
   }, [certId]);
 
-  // Fetch certificate data using the new endpoint
   const { data: certificateData, isLoading: isLoadingCertificate } =
     useCertificatePublicData(decodedInfo?.userId || '', !!decodedInfo?.userId);
 
-  // Generate QR Code
   useEffect(() => {
     if (certId) {
-      // Use encodeURIComponent to properly encode the certId for the URL
       const encodedCertId = encodeURIComponent(certId);
       const certificateUrl = `${window.location.origin}/certificate/${encodedCertId}`;
       QRCode.toDataURL(certificateUrl, {
@@ -71,13 +68,10 @@ const CertificatePage: FC = (): ReactElement => {
 
   const isLoading = (!decodedInfo && !error) || isLoadingCertificate;
 
-  // Certificate name from the user data
   const certificateName = certificateUser?.fullname;
 
-  // Check if current user is viewing their own certificate (team member)
   const isTeamMember = session?.user?.id === decodedInfo?.userId;
 
-  // Dynamic font sizing: shrink by 2px if height exceeds 80px
   useEffect(() => {
     const adjustFontSize = (
       element: HTMLElement | null,
@@ -106,14 +100,12 @@ const CertificatePage: FC = (): ReactElement => {
     return () => clearTimeout(timer);
   }, [team?.name, certificateName]);
 
-  // Generate certificate canvas screenshot
   useEffect(() => {
     const generateCertificate = async () => {
       if (!certificateRef.current || !team || !submission || !qrCodeUrl) return;
 
       setIsGenerating(true);
       try {
-        // Wait longer for fonts and images to load properly
         await new Promise((resolve) => setTimeout(resolve, 1500));
 
         const canvas = await html2canvas(certificateRef.current, {
@@ -141,7 +133,6 @@ const CertificatePage: FC = (): ReactElement => {
     generateCertificate();
   }, [team, submission, qrCodeUrl]);
 
-  // Download certificate
   const handleDownloadCertificate = () => {
     if (!certificateImage) return;
 
@@ -151,7 +142,6 @@ const CertificatePage: FC = (): ReactElement => {
     link.click();
   };
 
-  // Print certificate
   const handlePrintCertificate = () => {
     if (!certificateImage) return;
 
@@ -228,7 +218,6 @@ const CertificatePage: FC = (): ReactElement => {
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
-      {/* Print Styles */}
       <style>{`
         @media print {
           @page {
@@ -267,7 +256,6 @@ const CertificatePage: FC = (): ReactElement => {
           }
         }
 
-        /* Mobile responsive - zoom out to fit */
         @media (max-width: 768px) {
           #certificate-container {
             transform-origin: top center;
@@ -275,7 +263,6 @@ const CertificatePage: FC = (): ReactElement => {
         }
       `}</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">
@@ -299,12 +286,10 @@ const CertificatePage: FC = (): ReactElement => {
         </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' }}
@@ -321,7 +306,6 @@ const CertificatePage: FC = (): ReactElement => {
               height: `${(1000 * 2480) / 3508}px`,
             }}
           >
-            {/* Team Name - positioned in middle between "Diberikan Kepada" and "Telah Berpartisipasi" */}
             <div
               style={{
                 position: 'absolute',
@@ -347,7 +331,6 @@ const CertificatePage: FC = (): ReactElement => {
               </h3>
             </div>
 
-            {/* User Name - positioned below team name */}
             <div
               style={{
                 position: 'absolute',
@@ -373,7 +356,6 @@ const CertificatePage: FC = (): ReactElement => {
               </h3>
             </div>
 
-            {/* QR Code - positioned in the white box area */}
             <div
               style={{
                 position: 'absolute',
@@ -397,7 +379,6 @@ const CertificatePage: FC = (): ReactElement => {
           </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">
@@ -419,7 +400,6 @@ const CertificatePage: FC = (): ReactElement => {
             />
           )}
 
-          {/* Actions */}
           {isTeamMember && (
             <div className="bg-gray-50 dark:bg-gray-900 p-6 grid grid-cols-2 xl:grid-cols-3 gap-3 justify-center no-print">
               <Button
@@ -451,7 +431,6 @@ const CertificatePage: FC = (): ReactElement => {
           )}
         </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

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

@@ -38,17 +38,11 @@ const formatOrdinalRank = (rank: number): string => {
   }
 };
 
-// Keep the template size aligned with the SVG native size (842x595) using an integer multiplier.
-// This reduces sub-pixel scaling artifacts (blur) on thin lines when rasterizing with html2canvas.
 const CERT_WIDTH = 842 * 2;
 const CERT_HEIGHT = 595 * 2;
 
-// Balance between output sharpness and file size.
-// Output resolution will be (CERT_WIDTH * EXPORT_SCALE) x (CERT_HEIGHT * EXPORT_SCALE).
 const EXPORT_SCALE = 2;
 
-// The original layout was tuned around a ~1000px-wide template.
-// We keep the same visual proportions by scaling fixed pixel values.
 const LAYOUT_BASE_WIDTH = 1000;
 const LAYOUT_SCALE = CERT_WIDTH / LAYOUT_BASE_WIDTH;
 const s = (px: number) => Math.round(px * LAYOUT_SCALE);
@@ -122,7 +116,6 @@ const CertificateWinnerPage: FC = (): ReactElement => {
       (t) => (t as { id?: string } | null | undefined)?.id === decodedTeamId
     );
 
-  // Generate QR Code (public link)
   useEffect(() => {
     if (!certId) return;
 
@@ -141,7 +134,6 @@ const CertificateWinnerPage: FC = (): ReactElement => {
       .catch((err) => console.error('QR Code generation failed:', err));
   }, [certId]);
 
-  // Generate certificate canvas screenshot
   useEffect(() => {
     const generateCertificate = async () => {
       if (!certificateRef.current) return;
@@ -311,7 +303,6 @@ const CertificateWinnerPage: FC = (): ReactElement => {
 
   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 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">
@@ -339,7 +330,6 @@ const CertificateWinnerPage: FC = (): ReactElement => {
         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' }}
@@ -363,7 +353,6 @@ const CertificateWinnerPage: FC = (): ReactElement => {
               }
             `}</style>
 
-            {/* Team Name */}
             <div
               style={{
                 position: 'absolute',
@@ -388,7 +377,6 @@ const CertificateWinnerPage: FC = (): ReactElement => {
               </h3>
             </div>
 
-            {/* Members list */}
             <div
               style={{
                 position: 'absolute',
@@ -416,7 +404,6 @@ const CertificateWinnerPage: FC = (): ReactElement => {
               </ul>
             </div>
 
-            {/* Award text */}
             <div
               style={{
                 position: 'absolute',
@@ -445,7 +432,6 @@ const CertificateWinnerPage: FC = (): ReactElement => {
               </p>
             </div>
 
-            {/* Rank badge */}
             {!!rankLabel && (
               <div
                 style={{
@@ -476,7 +462,6 @@ const CertificateWinnerPage: FC = (): ReactElement => {
               </div>
             )}
 
-            {/* QR Code (same placement as existing certificate page) */}
             <div
               style={{
                 position: 'absolute',
@@ -504,7 +489,6 @@ const CertificateWinnerPage: FC = (): ReactElement => {
           </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">
@@ -526,7 +510,6 @@ const CertificateWinnerPage: FC = (): ReactElement => {
             />
           )}
 
-          {/* Actions */}
           {isTeamMember && (
             <div className="bg-gray-50 dark:bg-gray-900 p-6 grid grid-cols-2 xl:grid-cols-3 gap-3 justify-center no-print">
               <Button
@@ -588,7 +571,6 @@ const CertificateWinnerPage: FC = (): ReactElement => {
           )}
         </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

apps/hackathon/src/app/dashboard/layout.tsx

@@ -10,7 +10,7 @@ const DashboardLayout: FC = (): ReactElement => {
       <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 
       <div className="flex-1 flex flex-col">
-        {/* Mobile Header with Hamburger */}
+
         <div className="lg:hidden sticky top-0 bg-white dark:bg-gray-900 border-b dark:border-gray-700 px-4 py-3 flex items-center">
           <button
             onClick={() => setSidebarOpen(true)}

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

@@ -13,10 +13,8 @@ import { Icon } from '@iconify/react';
 import ProfilePage from '../profile/page';
 import { encodeWinnerCertificateId } from '../../utils/certificate';
 
-// Team features deadline: 2025-11-30 23:59:00 WIB (UTC+7)
 const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
 
-// Submission deadline: 2025-12-07 23:59:00 WIB (UTC+7)
 const SUBMISSION_DEADLINE = new Date('2025-12-07T16:59:00Z');
 
 type Invitation = {
@@ -50,13 +48,10 @@ const DashboardPage: FC = (): ReactElement => {
     seconds: number;
   } | null>(null);
 
-  // Check if team features are closed
   const isTeamFeaturesClosed = new Date() >= TEAM_FEATURES_DEADLINE;
 
-  // Check if submission deadline passed
   const isSubmissionDeadlinePassed = new Date() >= SUBMISSION_DEADLINE;
 
-  // Countdown timer
   useEffect(() => {
     if (isSubmissionDeadlinePassed) return;
 
@@ -83,7 +78,6 @@ const DashboardPage: FC = (): ReactElement => {
     return () => clearInterval(timer);
   }, [isSubmissionDeadlinePassed]);
 
-  // Lock background scroll when profile modal is open
   useEffect(() => {
     if (showProfileModal) {
       const originalOverflow = document.body.style.overflow;
@@ -145,7 +139,6 @@ const DashboardPage: FC = (): ReactElement => {
           )}
         </div>
 
-        {/* Winner Banner */}
         {winnerEntry && myTeams.length > 0 && (
           <div className="mb-8 bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-400 dark:border-amber-500 rounded-lg p-6">
             <div className="flex items-center justify-between flex-wrap gap-4">
@@ -176,7 +169,6 @@ const DashboardPage: FC = (): ReactElement => {
           </div>
         )}
 
-        {/* Countdown Timer */}
         {timeLeft && !isSubmissionDeadlinePassed && (
           <div className="mb-8 bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-500 rounded-lg p-6">
             <div className="flex items-start space-x-3">

apps/hackathon/src/app/layout.tsx

@@ -7,7 +7,6 @@ import {
 import { useEffect, useState } from 'react';
 import { useAuthStore, useUserMe } from '@imphnen-frontend-service/service';
 
-// Define onboarding routes
 const ONBOARDING_ROUTES = new Set(['/onboarding/user']);
 
 export default function RootLayout() {
@@ -21,56 +20,46 @@ export default function RootLayout() {
     const checkAuth = async () => {
       const pathname = location.pathname;
 
-      // Allow hackathon pages without checks
       if (pathname.startsWith('/hackathons')) {
         setIsChecking(false);
         return;
       }
 
-      // Allow auth callback without checks
       if (pathname === '/auth/callback') {
         setIsChecking(false);
         return;
       }
 
-      // Public auth pages - allow unauthenticated access
       if (pathname.startsWith('/auth')) {
-        // If already authenticated and not on password reset pages, redirect to dashboard
         if (session && pathname !== '/auth/reset-password') {
           navigate('/dashboard', { replace: true });
           setIsChecking(false);
           return;
         }
-        // Allow unauthenticated access to auth pages
         setIsChecking(false);
         return;
       }
 
-      // Home page - allow everyone to view the landing page
       if (pathname === '/') {
         setIsChecking(false);
         return;
       }
 
-      // Certificate page - allow public access
       if (pathname.startsWith('/certificate/')) {
         setIsChecking(false);
         return;
       }
 
-      // Require authentication for all other routes
       if (!session) {
         navigate('/auth/login', { replace: true });
         setIsChecking(false);
         return;
       }
 
-      // Wait for user data to load before checking onboarding
       if (isUserLoading) {
         return;
       }
 
-      // Check if user has completed onboarding (skip for onboarding routes)
       if (!ONBOARDING_ROUTES.has(pathname)) {
         const hasLocation = !!userData?.data?.location || !!session?.user?.location;
 
@@ -87,7 +76,6 @@ export default function RootLayout() {
     checkAuth();
   }, [location.pathname, navigate, session, userData, isUserLoading]);
 
-  // Show loading state while checking auth
   if (isChecking) {
     return (
       <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-neutral-950">

apps/hackathon/src/app/onboarding/user/page.tsx

@@ -50,7 +50,6 @@ const UserOnboardingPage: FC = (): ReactElement => {
     },
   });
 
-  // Set initial avatar preview from GitHub avatar if available
   useEffect(() => {
     if (session?.user?.avatar && !avatarPreview) {
       setAvatarPreview(session.user.avatar);
@@ -60,14 +59,12 @@ const UserOnboardingPage: FC = (): ReactElement => {
   const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
-      // Validate file size (max 2MB)
       if (file.size > 2 * 1024 * 1024) {
         toast.error('The file is too large. Maximum size is 2MB.');
         e.target.value = '';
         return;
       }
 
-      // Validate file type
       if (!file.type.startsWith('image/')) {
         toast.error('The file must be an image');
         e.target.value = '';
@@ -87,13 +84,11 @@ const UserOnboardingPage: FC = (): ReactElement => {
     try {
       let avatarUrl = session?.user?.avatar || null;
 
-      // Upload avatar if a new file was selected
       if (avatarFile) {
         const uploadResult = await uploadAvatar(avatarFile);
         avatarUrl = uploadResult.data.url;
       }
 
-      // Update user in Supabase
       await updateUser({
         fullname: data.fullname,
         avatar: avatarUrl,
@@ -102,11 +97,8 @@ const UserOnboardingPage: FC = (): ReactElement => {
         skills: data.skills,
       });
 
-      // Wait a bit for the onSuccess handler to update localStorage
-      // The updateUser mutation's onSuccess handler updates the Zustand store and localStorage
       await new Promise((resolve) => setTimeout(resolve, 100));
 
-      // Use window.location for a full page reload to ensure middleware sees updated localStorage
       globalThis.location.href = '/dashboard';
     } catch (error) {
       toast.error(
@@ -130,7 +122,6 @@ const UserOnboardingPage: FC = (): ReactElement => {
         </div>
 
         <form onSubmit={onSubmit} className="space-y-6">
-          {/* Avatar Upload */}
           <div className="flex flex-col items-center space-y-4">
             <div className="relative">
               {avatarPreview ? (
@@ -169,7 +160,6 @@ const UserOnboardingPage: FC = (): ReactElement => {
             </div>
           </div>
 
-          {/* Full Name */}
           <ControlledInputField
             control={form.control}
             label="Full Name"
@@ -180,7 +170,6 @@ const UserOnboardingPage: FC = (): ReactElement => {
             isRequired={true}
           />
 
-          {/* City */}
           <div className="space-y-2">
             <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
               City <span className="text-red-500">*</span>
@@ -199,7 +188,6 @@ const UserOnboardingPage: FC = (): ReactElement => {
             />
           </div>
 
-          {/* Role/Skills */}
           <div className="space-y-2">
             <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
               Role / Skills
@@ -237,7 +225,6 @@ const UserOnboardingPage: FC = (): ReactElement => {
             />
           </div>
 
-          {/* Bio */}
           <div className="space-y-2">
             <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
               Bio{' '}

apps/hackathon/src/app/page.tsx

@@ -67,7 +67,7 @@ export default function HomePage() {
 
   return (
     <main className="min-h-screen bg-white dark:bg-gray-950">
-      {/* Navigation */}
+
       <div id="#top" className="hidden"></div>
       <nav className="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 sticky top-0 z-50">
         <div className="flex items-center justify-between max-w-7xl mx-auto px-4 md:px-8 py-4">
@@ -82,7 +82,7 @@ export default function HomePage() {
               Hackathon
             </a>
           </div>
-          {/* Desktop Menu */}
+
           <div className="hidden md:flex text-label1 items-center gap-4 lg:gap-8">
             <a
               href="#timeline"
@@ -131,7 +131,7 @@ export default function HomePage() {
               </>
             )}
           </div>
-          {/* Mobile Menu Button */}
+
           <div className="flex items-center gap-2 md:hidden">
             <ThemeToggle />
             <button
@@ -156,7 +156,6 @@ export default function HomePage() {
         </div>
       </nav>
 
-      {/* Mobile Menu */}
       {mobileMenuOpen && (
         <nav className="md:hidden sticky top-18 border-b border-gray-200 dark:border-gray-800 bg-white z-40 dark:bg-gray-900">
           <div className="flex flex-col items-start gap-4 px-4 py-4">
@@ -205,7 +204,6 @@ export default function HomePage() {
         </nav>
       )}
 
-      {/* Hero Section */}
       <section className="relative w-full overflow-hidden py-20">
         <div className="absolute inset-0 overflow-hidden">
           <div
@@ -219,7 +217,7 @@ export default function HomePage() {
           <div className="absolute inset-0 bg-[linear-gradient(rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.05)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(59,130,246,0.1)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.1)_1px,transparent_1px)] bg-size-[40px_40px]"></div>
         </div>
         <div className="mx-auto container px-4 relative flex flex-col items-center">
-          {/* Logos */}
+
           <div className="flex items-center gap-4 md:gap-8 lg:gap-12 mb-8 md:mb-12 lg:mb-16 flex-wrap justify-center">
             <div className="flex items-center">
               <img
@@ -239,20 +237,20 @@ export default function HomePage() {
               />
             </div>
           </div>
-          {/* Title */}
+
           <h1 className="text-h1 font-bold text-gray-900 dark:text-white mb-4 text-center">
             Hackathon
           </h1>
-          {/* Subtitle */}
+
           <p className="text-p1 text-primary-500 font-semibold mb-6 md:mb-8 text-center px-4">
             "Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
           </p>
-          {/* Description */}
+
           <p className="text-p3 text-gray-600 dark:text-gray-200 max-w-lg md:max-w-xl text-center mb-8 md:mb-12 px-4 font-sans">
             Kompetisi pengembangan teknologi untuk menciptakan solusi inovatif
             yang menghadirkan dampak nyata
           </p>
-          {/* Status */}
+
           <div className="flex flex-col md:flex-row items-center gap-4 md:gap-8 mb-10 md:mb-16 text-base text-gray-600 dark:text-gray-200">
             <div className="flex items-center gap-2 md:gap-3">
               <Icon icon="streamline-plump:web" className="w-4 h-4" />
@@ -263,7 +261,7 @@ export default function HomePage() {
               <span>Pendaftaran hingga 30 November 2025</span>
             </div>
           </div>
-          {/* CTA Buttons */}
+
           <div className="flex flex-col md:flex-row items-center gap-4 px-4">
             <Button
               onClick={() => navigate('/auth/signup')}
@@ -280,7 +278,7 @@ export default function HomePage() {
               Gabung Grup WA Hackathon
             </a>
           </div>
-          {/* Scroll indicator */}
+
           <div className="mt-12 md:mt-20">
             <svg
               className="w-6 h-6 text-gray-400 dark:text-gray-500 animate-bounce"
@@ -299,7 +297,6 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* About Section */}
       <section className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-gray-950">
         <div className="max-w-4xl mx-auto text-center">
           <h2 className="text-3xl md:text-5xl font-bold mb-10 dark:text-white">
@@ -322,7 +319,6 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* Prizes Section */}
       <section
         id="hadiah"
         className="py-16 md:py-24 px-4 md:px-8 bg-gray-50 dark:bg-linear-to-b dark:from-gray-950 dark:to-gray-900"
@@ -338,7 +334,7 @@ export default function HomePage() {
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {/* Prize 1 */}
+
             <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-primary-500 dark:hover:border-primary-500 transition-colors">
               <div className="flex justify-center mb-4">
                 <div className="w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center">
@@ -356,7 +352,6 @@ export default function HomePage() {
               </p>
             </div>
 
-            {/* Prize 2 */}
             <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500 transition-colors">
               <div className="flex justify-center mb-4">
                 <div className="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
@@ -374,7 +369,6 @@ export default function HomePage() {
               </p>
             </div>
 
-            {/* Prize 3 */}
             <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-orange-300 dark:hover:border-orange-500 transition-colors">
               <div className="flex justify-center mb-4">
                 <div className="w-16 h-16 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center">
@@ -392,7 +386,6 @@ export default function HomePage() {
               </p>
             </div>
 
-            {/* Special Prize */}
             <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500 transition-colors">
               <div className="flex justify-center mb-4">
                 <div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
@@ -413,7 +406,6 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* Timeline Section */}
       <section
         id="timeline"
         className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-gray-950"
@@ -429,7 +421,7 @@ export default function HomePage() {
           </div>
 
           <div>
-            {/* Timeline Item 1 */}
+
             <div className="flex gap-6">
               <div className="flex flex-col items-center">
                 <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
@@ -448,7 +440,6 @@ export default function HomePage() {
               </div>
             </div>
 
-            {/* Timeline Item 2 */}
             <div className="flex gap-6">
               <div className="flex flex-col items-center">
                 <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
@@ -468,7 +459,6 @@ export default function HomePage() {
               </div>
             </div>
 
-            {/* Timeline Item 3 */}
             <div className="flex gap-6">
               <div className="flex flex-col items-center">
                 <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
@@ -487,7 +477,6 @@ export default function HomePage() {
               </div>
             </div>
 
-            {/* Timeline Item 4 */}
             <div className="flex gap-6">
               <div className="flex flex-col items-center">
                 <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
@@ -506,7 +495,6 @@ export default function HomePage() {
               </div>
             </div>
 
-            {/* Timeline Item 5 */}
             <div className="flex gap-6">
               <div className="flex flex-col items-center">
                 <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
@@ -527,7 +515,6 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* Judges Section */}
       <section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50 dark:bg-gray-900 font-sans">
         <div className="md:max-w-6xl mx-auto">
           <div className="text-center mb-12 font-bai-jamjuree">
@@ -540,7 +527,7 @@ export default function HomePage() {
           </div>
 
           <div className="w-full max-w-md md:max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
-            {/* Judge 1 */}
+
             <div className="flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-8 shadow-lg text-center">
               <h3 className="text-p3 font-bold mb-1 dark:text-white">
                 Alifais Farrel Ramdhani
@@ -551,7 +538,6 @@ export default function HomePage() {
               </div>
             </div>
 
-            {/* Judge 2 */}
             <div className="flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-8 shadow-lg text-center">
               <h3 className="text-p3 font-bold mb-1 dark:text-white">
                 Muhammad Alif Ramadhan
@@ -562,7 +548,6 @@ export default function HomePage() {
               </div>
             </div>
 
-            {/* Judge 3 */}
             <div className="flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-8 shadow-lg text-center">
               <h3 className="text-p3 font-bold mb-1 dark:text-white">
                 Hafid Nur
@@ -576,7 +561,6 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* FAQ Section */}
       <section
         id="faq"
         className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-gray-950"
@@ -631,7 +615,6 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* Sponsors Section */}
       <section className="py-20 md:py-28 px-4 md:px-8 bg-gray-50 dark:bg-gray-900">
         <div className="max-w-6xl mx-auto text-center">
           <h2 className="text-3xl md:text-5xl font-bold mb-4 dark:text-white">
@@ -658,7 +641,6 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* CTA Section */}
       <section
         id="masuk"
         className="py-20 md:py-28 px-4 md:px-8 bg-linear-to-b from-white to-blue-50 dark:from-gray-950 dark:to-gray-900"
@@ -700,11 +682,10 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* Footer */}
       <footer className="bg-gray-950 text-white py-12 px-4 md:px-8 font-sans">
         <div className="max-w-6xl mx-auto">
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
-            {/* Brand */}
+
             <div>
               <div className="flex items-center gap-2 mb-4 font-bai-jamjuree">
                 <span className="text-2xl font-bold">IMPHNEN</span>
@@ -768,7 +749,6 @@ export default function HomePage() {
               </div>
             </div>
 
-            {/* Quick Links */}
             <div>
               <h3 className="font-bold text-lg mb-4 font-bai-jamjuree">
                 Quick Links
@@ -806,7 +786,6 @@ export default function HomePage() {
               </ul>
             </div>
 
-            {/* Contact */}
             <div>
               <h3 className="font-bold text-lg mb-4 font-bai-jamjuree">
                 Contact

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

@@ -54,7 +54,6 @@ const ProfilePage: FC<ProfileModalProps> = ({
     },
   });
 
-  // Set initial avatar preview from current user avatar
   useEffect(() => {
     if (session?.user?.avatar && !avatarPreview) {
       setAvatarPreview(session.user.avatar);
@@ -84,14 +83,12 @@ const ProfilePage: FC<ProfileModalProps> = ({
   const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
-      // Validate file size (max 2MB)
       if (file.size > 2 * 1024 * 1024) {
         toast.error('The file is too large. Maximum size is 2MB.');
         e.target.value = '';
         return;
       }
 
-      // Validate file type
       if (!file.type.startsWith('image/')) {
         toast.error('The file must be an image');
         e.target.value = '';
@@ -111,13 +108,11 @@ const ProfilePage: FC<ProfileModalProps> = ({
     try {
       let avatarUrl = session?.user?.avatar || null;
 
-      // Upload avatar if a new file was selected
       if (avatarFile) {
         const uploadResult = await uploadAvatar(avatarFile);
         avatarUrl = uploadResult.data.url;
       }
 
-      // Update user profile
       await updateUser({
         fullname: data.fullname,
         avatar: avatarUrl,
@@ -128,10 +123,8 @@ const ProfilePage: FC<ProfileModalProps> = ({
 
       toast.success('Profile updated successfully!');
 
-      // Wait a bit for the onSuccess handler to update localStorage
       await new Promise((resolve) => setTimeout(resolve, 100));
 
-      // Close modal
       onClose();
     } catch (error) {
       console.error('Profile update failed:', error);
@@ -181,7 +174,6 @@ const ProfilePage: FC<ProfileModalProps> = ({
           </div>
 
           <form onSubmit={onSubmit} className="space-y-6">
-            {/* Avatar Upload */}
             <div className="flex flex-col items-center space-y-4">
               <div className="relative group">
                 {avatarPreview ? (
@@ -200,7 +192,6 @@ const ProfilePage: FC<ProfileModalProps> = ({
                     />
                   </div>
                 )}
-                {/* Camera overlay */}
                 <label
                   htmlFor="avatar"
                   className="absolute bottom-0 right-0 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600 transition-colors shadow-lg"
@@ -241,7 +232,6 @@ const ProfilePage: FC<ProfileModalProps> = ({
               </p>
             </div>
 
-            {/* Full Name */}
             <ControlledInputField
               control={form.control}
               label="Full Name"
@@ -250,7 +240,6 @@ const ProfilePage: FC<ProfileModalProps> = ({
               size="lg"
             />
 
-            {/* City */}
             <div className="space-y-2">
               <label className="block text-label1 font-medium text-neutral-800 dark:text-neutral-300">
                 City
@@ -269,7 +258,6 @@ const ProfilePage: FC<ProfileModalProps> = ({
               />
             </div>
 
-            {/* Role/Skills */}
             <div className="space-y-2">
               <label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
                 Role / Skills
@@ -307,7 +295,6 @@ const ProfilePage: FC<ProfileModalProps> = ({
               />
             </div>
 
-            {/* Bio */}
             <div className="space-y-2">
               <label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
                 Bio{' '}
@@ -337,7 +324,6 @@ const ProfilePage: FC<ProfileModalProps> = ({
               />
             </div>
 
-            {/* Action Buttons */}
             <div className="flex space-x-3 pt-4">
               <Button
                 type="button"

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

@@ -28,7 +28,6 @@ const TeamChatPage: FC = (): ReactElement => {
   const team = teamData?.data;
   const currentUserId = session?.user?.id;
 
-  // Message type used for UI rendering
   interface ChatMessage {
     id: string;
     user_id: string;
@@ -40,10 +39,8 @@ const TeamChatPage: FC = (): ReactElement => {
     created_at: string;
   }
 
-  // Inline delete confirmation UI state
   const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
 
-  // Prepare messages: de-duplicate by id and sort by created_at
   const displayMessages = useMemo(() => {
     const raw: ChatMessage[] = Array.isArray(messages)
       ? (messages as ChatMessage[])
@@ -64,7 +61,6 @@ const TeamChatPage: FC = (): ReactElement => {
     return dedup;
   }, [messages]);
 
-  // Auto-scroll to bottom when new messages arrive
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [displayMessages]);
@@ -108,7 +104,6 @@ const TeamChatPage: FC = (): ReactElement => {
 
   return (
     <div className="flex flex-col h-screen bg-gray-50 dark:bg-gray-950">
-      {/* Header */}
       <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700 shadow-sm dark:shadow-gray-950/50">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
           <div className="flex items-center justify-between">
@@ -130,7 +125,6 @@ const TeamChatPage: FC = (): ReactElement => {
         </div>
       </div>
 
-      {/* Messages Container */}
       <div className="flex-1 overflow-y-auto">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
           {isLoading ? (
@@ -156,7 +150,6 @@ const TeamChatPage: FC = (): ReactElement => {
                         isOwnMessage ? 'flex-row-reverse' : 'flex-row'
                       }`}
                     >
-                      {/* Avatar */}
                       <div className="shrink-0">
                         {msg.user?.avatar ? (
                           <img
@@ -171,7 +164,6 @@ const TeamChatPage: FC = (): ReactElement => {
                         )}
                       </div>
 
-                      {/* Message Bubble */}
                       <div className={`flex-1 text-left`}>
                         <div
                           className={`inline-block ${
@@ -197,7 +189,6 @@ const TeamChatPage: FC = (): ReactElement => {
                               {msg.message}
                             </p>
 
-                            {/* Delete button */}
                             {canDelete && (
                               <button
                                 onClick={() =>
@@ -214,7 +205,6 @@ const TeamChatPage: FC = (): ReactElement => {
                                 }`}
                                 title="Delete message"
                               >
-                                {/* Icon trash */}
                                 <Icon
                                   icon="mdi:trash-can-outline"
                                   className="w-4 h-4"
@@ -267,7 +257,6 @@ const TeamChatPage: FC = (): ReactElement => {
         </div>
       </div>
 
-      {/* Message Input */}
       <div className="bg-white dark:bg-gray-900 border-t dark:border-gray-700 shadow-lg dark:shadow-gray-950/50">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
           <form onSubmit={handleSendMessage} className="flex gap-3">

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

@@ -18,7 +18,7 @@ import { CitySelect } from '../../../../components/city-select';
 import { Icon } from '@iconify/react';
 import { toast } from 'sonner';
 
-const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
+const MAX_FILE_SIZE = 2 * 1024 * 1024;
 
 const EditTeamPage: FC = (): ReactElement => {
   const { teamId } = useParams<{ teamId: string }>();
@@ -162,7 +162,6 @@ const EditTeamPage: FC = (): ReactElement => {
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-8">
           <form onSubmit={onSubmit} className="space-y-6">
-            {/* Banner Upload */}
             <div>
               <label className="block text-label1 font-medium text-gray-700 dark:text-gray-300 mb-2">
                 Team Banner
@@ -209,7 +208,6 @@ const EditTeamPage: FC = (): ReactElement => {
               )}
             </div>
 
-            {/* Logo Upload */}
             <div>
               <label className="block text-label1 font-medium text-gray-700 dark:text-gray-300 mb-2">
                 Team Logo
@@ -261,7 +259,6 @@ const EditTeamPage: FC = (): ReactElement => {
               </div>
             </div>
 
-            {/* Team Name */}
             <ControlledInputField
               control={form.control}
               label="Team Name"
@@ -271,7 +268,6 @@ const EditTeamPage: FC = (): ReactElement => {
               isRequired={true}
             />
 
-            {/* City */}
             <div className="space-y-2">
               <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                 City
@@ -290,7 +286,6 @@ const EditTeamPage: FC = (): ReactElement => {
               />
             </div>
 
-            {/* Description */}
             <div className="space-y-2">
               <label className="block text-label1 font-medium text-gray-700 dark:text-gray-300">
                 Description
@@ -318,7 +313,6 @@ const EditTeamPage: FC = (): ReactElement => {
               />
             </div>
 
-            {/* Visibility */}
             <div className="space-y-2">
               <label className="block text-label1 font-medium text-gray-700 dark:text-gray-300">
                 Team Visibility
@@ -367,7 +361,6 @@ const EditTeamPage: FC = (): ReactElement => {
               />
             </div>
 
-            {/* Submit Button */}
             <div className="flex space-x-3 pt-4">
               <Button
                 type="button"

apps/hackathon/src/app/teams/[teamId]/layout.tsx

@@ -10,7 +10,7 @@ const TeamDetailLayout: FC = (): ReactElement => {
       <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 
       <div className="flex-1 flex flex-col">
-        {/* Mobile Header with Hamburger */}
+
         <div className="lg:hidden sticky top-0 z-30 bg-white dark:bg-gray-900 border-b dark:border-gray-700 px-4 py-3 flex items-center">
           <button
             onClick={() => setSidebarOpen(true)}

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

@@ -54,7 +54,6 @@ const ManageMembersPage: FC = (): ReactElement => {
     mode: 'all',
   });
 
-  // Show loading state while fetching team data
   if (isLoadingTeam) {
     return (
       <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
@@ -153,7 +152,6 @@ const ManageMembersPage: FC = (): ReactElement => {
       </div>
 
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
-        {/* Submission Lock Warning */}
         {hasSubmission && (
           <div className="bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-500 rounded-lg p-4">
             <div className="flex items-start space-x-3">
@@ -170,7 +168,6 @@ const ManageMembersPage: FC = (): ReactElement => {
           </div>
         )}
 
-        {/* Join Requests */}
         {joinRequests.length > 0 && (
           <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-6">
             <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
@@ -239,7 +236,6 @@ const ManageMembersPage: FC = (): ReactElement => {
           </div>
         )}
 
-        {/* Current Members */}
         <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-6">
           <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
             Current Members ({members.length})
@@ -311,7 +307,6 @@ const ManageMembersPage: FC = (): ReactElement => {
           )}
         </div>
 
-        {/* Warning */}
         {!hasSubmission && (
           <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
             <p className="text-sm text-yellow-800 dark:text-yellow-200">
@@ -322,7 +317,6 @@ const ManageMembersPage: FC = (): ReactElement => {
         )}
       </div>
 
-      {/* Invite Member Modal */}
       {showInviteModal && (
         <div className="fixed inset-0 bg-black/20 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
           <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl dark:shadow-gray-950/50 max-w-md w-full p-6">

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

@@ -17,10 +17,8 @@ import { Icon } from '@iconify/react';
 
 const MAX_TEAM_MEMBERS = 5;
 
-// Team features deadline: 2025-11-30 23:59:00 WIB (UTC+7)
 const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
 
-// Image component with loading state
 const ImageWithLoader: FC<{
   src: string;
   alt: string;
@@ -56,7 +54,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
   const navigate = useNavigate();
   const { session } = useAuthStore();
 
-  // Check if team features are closed
   const isTeamFeaturesClosed = new Date() >= TEAM_FEATURES_DEADLINE;
   const [showInviteModal, setShowInviteModal] = useState(false);
   const [showJoinRequestsModal, setShowJoinRequestsModal] = useState(false);
@@ -67,8 +64,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
   const [imagesLoaded, setImagesLoaded] = useState(false);
   const [imageLoadCount, setImageLoadCount] = useState(0);
 
-  // Calculate total images to load (banner + logo + member avatars)
-  const totalImagesToLoad = 0; // Simplified - disable image loading overlay
+  const totalImagesToLoad = 0;
 
   const handleImageLoad = () => {
     setImageLoadCount((prev) => {
@@ -81,11 +77,9 @@ const TeamDashboardPage: FC = (): ReactElement => {
   };
 
   const handleImageError = () => {
-    // Treat error as loaded to not block the UI
     handleImageLoad();
   };
 
-  // Set images as loaded immediately since we disabled the loading overlay
   useEffect(() => {
     setImagesLoaded(true);
   }, []);
@@ -102,7 +96,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
   const currentUserId = session?.user?.id;
   const isLeader = currentUserId === team?.leader_id;
 
-  // Only fetch join requests if user is the team leader
   const { data: joinRequestsData } = useTeamJoinRequests(
     teamId || '',
     !!teamId && isLeader
@@ -183,7 +176,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
   if (isLoadingTeam || isLoadingMembers) {
     return (
       <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
-        {/* Skeleton Header */}
         <div className="bg-white dark:bg-gray-950 border-b">
           <div className="w-full h-48 bg-gray-200 dark:bg-gray-800 animate-pulse" />
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@@ -202,7 +194,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
 
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
           <div className="grid gap-6 lg:grid-cols-3">
-            {/* Main Content Skeleton */}
             <div className="lg:col-span-2 space-y-6">
               <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6">
                 <div className="h-6 w-32 bg-gray-300 dark:bg-gray-700 rounded animate-pulse mb-4" />
@@ -214,7 +205,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
               </div>
             </div>
 
-            {/* Sidebar Skeleton */}
             <div className="space-y-6">
               <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6">
                 <div className="h-6 w-40 bg-gray-300 dark:bg-gray-700 rounded animate-pulse mb-4" />
@@ -234,7 +224,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
           </div>
         </div>
 
-        {/* Loading Overlay */}
         <div className="fixed inset-0 bg-white/60 dark:bg-black/50 flex items-center justify-center z-50">
           <div className="text-center">
             <div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
@@ -262,7 +251,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
 
   return (
     <div className="min-h-screen bg-gray-50 relative dark:bg-gray-950">
-      {/* Loading overlay while images are loading */}
       {!imagesLoaded && totalImagesToLoad > 0 && (
         <div className="fixed inset-0 bg-white/80 flex items-center justify-center z-50">
           <div className="text-center">
@@ -275,7 +263,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
         </div>
       )}
 
-      {/* Header with Banner */}
       <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
         {team.banner && (
           <div className="relative w-full aspect-3/1 overflow-hidden">
@@ -356,9 +343,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8">
         <div className="grid gap-4 md:gap-6 xl:grid-cols-3">
-          {/* Main Content */}
           <div className="lg:col-span-2 space-y-4 md:space-y-6">
-            {/* Team Description */}
             <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
               <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
                 About Team
@@ -368,14 +353,12 @@ const TeamDashboardPage: FC = (): ReactElement => {
               </p>
             </div>
 
-            {/* Team Actions - Only for Leader */}
             {isLeader && (
               <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
                 <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
                   Team Management
                 </h2>
                 <div className="grid gap-3 sm:grid-cols-2">
-                  {/* Hide invite/join management after submission or deadline */}
                   {!team.has_submission && !isTeamFeaturesClosed && (
                     <>
                       <Button
@@ -447,7 +430,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
                     Maximum team size reached ({MAX_TEAM_MEMBERS} members)
                   </p>
                 )}
-                {/* Danger Zone - Only show when leader is alone, no submission, and features not closed */}
                 {members.length === 1 && !team.has_submission && !isTeamFeaturesClosed && (
                   <div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
                     <h3 className="text-sm font-medium text-red-600 dark:text-red-400 mb-3">
@@ -465,7 +447,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
               </div>
             )}
 
-            {/* Quick Actions for Members (non-leaders) */}
             {!isLeader && isMember && (
               <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
                 <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
@@ -499,7 +480,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
               </div>
             )}
 
-            {/* Warning for single member teams */}
             {members.length === 1 && !team.has_submission && isMember && (
               <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 md:p-6">
                 <div className="flex items-center space-x-3">
@@ -516,7 +496,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
               </div>
             )}
 
-            {/* Submission Status - Only show to members */}
             {team.has_submission && isMember && (
               <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 md:p-6">
                 <div className="flex items-center space-x-3">
@@ -539,9 +518,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
             )}
           </div>
 
-          {/* Sidebar */}
           <div className="space-y-4 md:space-y-6">
-            {/* Team Leader */}
             <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
               <h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
                 Team Leader
@@ -576,7 +553,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
               )}
             </div>
 
-            {/* Team Members */}
             <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
               <h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
                 Members ({members.length})
@@ -621,7 +597,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
         </div>
       </div>
 
-      {/* Invite Member Modal */}
       {showInviteModal && (
         <div className="fixed inset-0 bg-black/20 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
           <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">
@@ -684,7 +659,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
         </div>
       )}
 
-      {/* Join Requests Modal */}
       {showJoinRequestsModal && (
         <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
           <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-2xl w-full p-6 max-h-[80vh] overflow-y-auto">
@@ -797,7 +771,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
         </div>
       )}
 
-      {/* Leave Team Confirmation Modal */}
       {showLeaveModal && (
         <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
           <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">
@@ -841,7 +814,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
         </div>
       )}
 
-      {/* Delete Team Confirmation Modal */}
       {showDeleteModal && (
         <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
           <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">

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

@@ -61,7 +61,7 @@ const SubmissionViewPage: FC = (): ReactElement => {
       </div>
 
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Status Banner */}
+
         {submission.status === 'submitted' ? (
           <div className="bg-green-50 dark:bg-green-900/20 border border-green-500 rounded-lg p-6 mb-6">
             <div className="flex items-center space-x-3">
@@ -103,7 +103,6 @@ const SubmissionViewPage: FC = (): ReactElement => {
           </div>
         )}
 
-        {/* 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">
@@ -136,15 +135,14 @@ const SubmissionViewPage: FC = (): ReactElement => {
         )}
 
         <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 overflow-hidden">
-          {/* Project Header */}
+
           <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>
 
-          {/* Project Details */}
           <div className="p-8 space-y-6">
-            {/* 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-gray-800 rounded-lg p-4">
@@ -152,9 +150,8 @@ const SubmissionViewPage: FC = (): ReactElement => {
               </div>
             </div>
 
-            {/* Links */}
             <div className="grid gap-6 md:grid-cols-2">
-              {/* Repository */}
+
               <div>
                 <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Repository</h3>
                 <a
@@ -168,7 +165,6 @@ const SubmissionViewPage: FC = (): ReactElement => {
                 </a>
               </div>
 
-              {/* Demo URL */}
               {submission.demo_url && (
                 <div>
                   <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Live Demo</h3>
@@ -186,7 +182,6 @@ const SubmissionViewPage: FC = (): ReactElement => {
 
             </div>
 
-            {/* Screenshots */}
             {submission.screenshots && submission.screenshots.length > 0 && (
               <div>
                 <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">
@@ -212,7 +207,6 @@ const SubmissionViewPage: FC = (): ReactElement => {
               </div>
             )}
 
-            {/* Submission Info */}
             <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">
@@ -245,7 +239,6 @@ const SubmissionViewPage: FC = (): ReactElement => {
               </div>
             </div>
 
-            {/* Read-only Notice */}
             <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
               <p className="text-sm text-yellow-800 dark:text-yellow-200">
                 <strong>Note:</strong> This submission is now locked and cannot be edited or deleted.

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

@@ -16,10 +16,9 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
 import { Icon } from '@iconify/react';
 
-const MIN_TEAM_MEMBERS = 2; // Minimum members required to submit (including leader)
-const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
+const MIN_TEAM_MEMBERS = 2;
+const MAX_FILE_SIZE = 2 * 1024 * 1024;
 
-// Submission deadline: 2025-12-07 23:59:00 WIB (UTC+7)
 const SUBMISSION_DEADLINE = new Date('2025-12-07T16:59:00Z');
 
 const SubmitProjectPage: FC = (): ReactElement => {
@@ -36,10 +35,8 @@ const SubmitProjectPage: FC = (): ReactElement => {
     seconds: number;
   } | null>(null);
 
-  // Check if deadline passed
   const isDeadlinePassed = new Date() >= SUBMISSION_DEADLINE;
 
-  // Countdown timer
   useEffect(() => {
     if (isDeadlinePassed) return;
 
@@ -125,7 +122,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
     );
   }
 
-  // Show deadline passed screen
   if (isDeadlinePassed) {
     return (
       <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
@@ -175,7 +171,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
     const files = e.target.files;
     if (!files) return;
 
-    // Validate file sizes
     const oversizedFiles = Array.from(files).filter(file => file.size > MAX_FILE_SIZE);
     if (oversizedFiles.length > 0) {
       toast.error(`${oversizedFiles.length} file(s) are too large. Maximum size is 2MB per file.`);
@@ -222,7 +217,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
       </div>
 
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Countdown Timer */}
         {timeLeft && (
           <div className="bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-500 rounded-lg p-6 mb-6">
             <div className="flex items-start space-x-3">
@@ -273,7 +267,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
           </div>
         )}
 
-        {/* Minimum Members Warning */}
         {!hasEnoughMembers && (
           <div className="bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-500 rounded-lg p-6 mb-6">
             <div className="flex items-start space-x-3">
@@ -292,7 +285,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
           </div>
         )}
 
-        {/* Warning Banner */}
         <div className="bg-red-50 dark:bg-red-900/20 border-2 border-red-500 rounded-lg p-6 mb-6">
           <div className="flex items-start space-x-3">
             <span className="text-3xl">⚠️</span>
@@ -320,7 +312,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
             }}
             className="space-y-6"
           >
-            {/* Project Name */}
             <ControlledInputField
               control={form.control}
               label="Project Name"
@@ -330,7 +321,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
               isRequired={true}
             />
 
-            {/* Description */}
             <div className="space-y-2">
               <label className="block text-[15px] font-medium text-gray-700 dark:text-gray-300">
                 Project Description <span className="text-red-500">*</span>
@@ -360,7 +350,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
               />
             </div>
 
-            {/* Repository URL */}
             <ControlledInputField
               control={form.control}
               label="Repository URL (GitHub, GitLab, etc.)"
@@ -371,7 +360,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
               isRequired={true}
             />
 
-            {/* Demo URL */}
             <ControlledInputField
               control={form.control}
               label="Demo URL (Optional)"
@@ -381,7 +369,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
               size="lg"
             />
 
-            {/* Screenshots */}
             <div>
               <label className="block text-label1 font-medium text-neutral-800 dark:text-gray-300">
                 Project Screenshots (Optional)
@@ -424,7 +411,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
               </label>
             </div>
 
-            {/* Submit Button */}
             <div className="flex space-x-3 pt-4">
               <Button
                 type="button"
@@ -451,7 +437,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
         </div>
       </div>
 
-      {/* Confirmation Modal */}
       {showConfirmModal && (
         <div className="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center z-50 p-4">
           <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl dark:shadow-gray-950/50 max-w-md w-full p-6">

apps/hackathon/src/app/teams/browse/page.tsx

@@ -17,10 +17,8 @@ import { Icon } from '@iconify/react';
 const DEFAULT_PER_PAGE = 12;
 const PER_PAGE_OPTIONS = [6, 12, 24, 48];
 
-// Team features deadline: 2025-11-30 23:59:00 WIB (UTC+7)
 const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
 
-// Member filter options
 const MEMBER_FILTER_OPTIONS = [
   { label: 'All Teams', value: '', minMembers: undefined, maxMembers: undefined },
   { label: 'Looking for Members (1-4)', value: 'looking', minMembers: 1, maxMembers: 4 },
@@ -31,14 +29,12 @@ const MEMBER_FILTER_OPTIONS = [
   { label: '5 Members (Full)', value: '5', minMembers: 5, maxMembers: 5 },
 ];
 
-// Submission status filter options
 const SUBMISSION_FILTER_OPTIONS = [
   { label: 'All Teams', value: '' },
   { label: 'Submitted', value: 'true' },
   { label: 'Not Submitted', value: 'false' },
 ];
 
-// Skeleton card component for loading state
 const TeamCardSkeleton: FC = () => (
   <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden flex flex-col border dark:border-gray-800 animate-pulse">
     <div className="w-full aspect-3/1 bg-gray-200 dark:bg-gray-700" />
@@ -67,10 +63,8 @@ const BrowseTeamsPage: FC = (): ReactElement => {
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
 
-  // Check if team features are closed
   const isTeamFeaturesClosed = new Date() >= TEAM_FEATURES_DEADLINE;
 
-  // Initialize state from URL params
   const initialPage = parseInt(searchParams.get('page') || '1', 10);
   const initialPerPage = parseInt(
     searchParams.get('per_page') || String(DEFAULT_PER_PAGE),
@@ -95,7 +89,6 @@ const BrowseTeamsPage: FC = (): ReactElement => {
     PER_PAGE_OPTIONS.includes(initialPerPage) ? initialPerPage : DEFAULT_PER_PAGE
   );
 
-  // Update URL when pagination state changes
   const updateUrlParams = useCallback(
     (params: {
       page?: number;
@@ -160,7 +153,6 @@ const BrowseTeamsPage: FC = (): ReactElement => {
     [searchParams, setSearchParams]
   );
 
-  // Debounce search term and reset page
   useEffect(() => {
     const timer = setTimeout(() => {
       setDebouncedSearch(searchTerm);
@@ -172,7 +164,6 @@ const BrowseTeamsPage: FC = (): ReactElement => {
     return () => clearTimeout(timer);
   }, [searchTerm]);
 
-  // Update URL when city filter changes
   useEffect(() => {
     if (selectedCity !== initialCity) {
       setCurrentPage(1);
@@ -180,12 +171,10 @@ const BrowseTeamsPage: FC = (): ReactElement => {
     }
   }, [selectedCity]);
 
-  // Get member filter values
   const memberFilter = MEMBER_FILTER_OPTIONS.find(
     (opt) => opt.value === selectedMembers
   );
 
-  // Convert submission filter value to boolean
   const hasSubmissionFilter = selectedSubmission === 'true' ? true : selectedSubmission === 'false' ? false : undefined;
 
   const {
@@ -216,7 +205,6 @@ const BrowseTeamsPage: FC = (): ReactElement => {
   const total = teamsData?.total || 0;
   const myTeams = myTeamsData?.data || [];
 
-  // Helper function to check if user is a member of a team
   const isMyTeam = (teamId: string) => {
     return myTeams.some((team: any) => team.id === teamId);
   };
@@ -239,25 +227,21 @@ const BrowseTeamsPage: FC = (): ReactElement => {
     }
   });
 
-  // Generate page numbers to display
   const getPageNumbers = () => {
     const pages: (number | string)[] = [];
     const maxVisible = 5;
 
     if (totalPages <= maxVisible + 2) {
-      // Show all pages if total is small
       for (let i = 1; i <= totalPages; i++) {
         pages.push(i);
       }
     } else {
-      // Always show first page
       pages.push(1);
 
       if (currentPage > 3) {
         pages.push('...');
       }
 
-      // Show pages around current
       const start = Math.max(2, currentPage - 1);
       const end = Math.min(totalPages - 1, currentPage + 1);
 
@@ -269,7 +253,6 @@ const BrowseTeamsPage: FC = (): ReactElement => {
         pages.push('...');
       }
 
-      // Always show last page
       pages.push(totalPages);
     }
 
@@ -278,7 +261,6 @@ const BrowseTeamsPage: FC = (): ReactElement => {
 
   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-800">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
           <div className="flex items-center justify-between">
@@ -297,7 +279,6 @@ const BrowseTeamsPage: FC = (): ReactElement => {
         </div>
       </div>
 
-      {/* Filters */}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         <div className="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-sm mb-6 border dark:border-gray-800">
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
@@ -366,7 +347,6 @@ const BrowseTeamsPage: FC = (): ReactElement => {
           </div>
         </div>
 
-        {/* Teams Count */}
         {!isLoading && total > 0 && (
           <div className="mb-4 text-sm text-gray-600 dark:text-gray-400">
             Showing {(currentPage - 1) * perPage + 1}-
@@ -374,7 +354,6 @@ const BrowseTeamsPage: FC = (): ReactElement => {
           </div>
         )}
 
-        {/* Teams List */}
         {isLoading || isFetching ? (
           <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
             {Array.from({ length: perPage }).map((_, index) => (
@@ -488,7 +467,6 @@ const BrowseTeamsPage: FC = (): ReactElement => {
               ))}
             </div>
 
-            {/* Pagination */}
             {(totalPages > 1 || total > 6) && (
               <div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
                 {totalPages > 1 && (
@@ -583,7 +561,6 @@ const BrowseTeamsPage: FC = (): ReactElement => {
         )}
       </div>
 
-      {/* Join Request Modal */}
       {showJoinModal && (
         <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
           <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">

apps/hackathon/src/app/teams/create/page.tsx

@@ -10,15 +10,13 @@ import { Icon } from '@iconify/react';
 
 import { CitySelect } from '../../../components/city-select';
 
-const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
+const MAX_FILE_SIZE = 2 * 1024 * 1024;
 
-// Team features deadline: 2025-11-30 23:59:00 WIB (UTC+7)
 const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
 
 const CreateTeamPage: FC = (): ReactElement => {
   const navigate = useNavigate();
 
-  // Check if team features are closed
   const isTeamFeaturesClosed = new Date() >= TEAM_FEATURES_DEADLINE;
 
   const [logoFile, setLogoFile] = useState<File | null>(null);
@@ -99,7 +97,6 @@ const CreateTeamPage: FC = (): ReactElement => {
     } catch (error: any) {
       console.error('Failed to create team:', error);
 
-      // Handle specific error messages
       const message = error?.message || '';
       if (message.includes('413') || message.includes('length limit') || message.includes('too large')) {
         toast.error('Image file is too large. Please use smaller images (max 2MB each).');
@@ -111,7 +108,6 @@ const CreateTeamPage: FC = (): ReactElement => {
     }
   });
 
-  // Show closed screen if team features are closed
   if (isTeamFeaturesClosed) {
     return (
       <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
@@ -157,7 +153,6 @@ const CreateTeamPage: FC = (): ReactElement => {
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-neutral-950">
-      {/* Header */}
       <div className="bg-white dark:bg-neutral-900 border-b dark:border-neutral-700">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
           <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Create Your Team</h1>
@@ -168,7 +163,6 @@ const CreateTeamPage: FC = (): ReactElement => {
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-900/50 p-8">
           <form onSubmit={onSubmit} className="space-y-6">
-            {/* Banner Upload */}
             <div>
               <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-2">
                 Team Banner <span className="text-gray-400 dark:text-neutral-500">(Optional)</span>
@@ -207,7 +201,6 @@ const CreateTeamPage: FC = (): ReactElement => {
               )}
             </div>
 
-            {/* Logo Upload */}
             <div>
               <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-2">
                 Team Logo <span className="text-gray-400 dark:text-neutral-500">(Optional, but highly recommended)</span>
@@ -256,7 +249,6 @@ const CreateTeamPage: FC = (): ReactElement => {
               </div>
             </div>
 
-            {/* Team Name */}
             <ControlledInputField
               control={form.control}
               label="Team Name"
@@ -264,7 +256,6 @@ const CreateTeamPage: FC = (): ReactElement => {
               name="name"
             />
 
-            {/* City */}
             <div className="space-y-2">
               <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300">
                 City <span className="text-red-500">*</span>
@@ -283,7 +274,6 @@ const CreateTeamPage: FC = (): ReactElement => {
               />
             </div>
 
-            {/* Description */}
             <div className="space-y-2">
               <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300">
                 Description <span className="text-red-500">*</span>
@@ -307,7 +297,6 @@ const CreateTeamPage: FC = (): ReactElement => {
               />
             </div>
 
-            {/* Visibility */}
             <div className="space-y-2">
               <label className="block text-sm font-medium text-gray-700 dark:text-neutral-300">
                 Team Visibility <span className="text-red-500">*</span>
@@ -352,14 +341,12 @@ const CreateTeamPage: FC = (): ReactElement => {
               />
             </div>
 
-            {/* Warning */}
             <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
               <p className="text-sm text-yellow-800 dark:text-yellow-200">
                 <strong>Note:</strong> As team leader, you cannot leave or join another team after creating this team.
               </p>
             </div>
 
-            {/* Submit Button */}
             <div className="flex space-x-3 pt-4">
               <Button
                 type="button"

apps/hackathon/src/app/teams/layout.tsx

@@ -10,7 +10,7 @@ const TeamsLayout: FC = (): ReactElement => {
       <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 
       <div className="flex-1 flex flex-col">
-        {/* Mobile Header with Hamburger */}
+
         <div className="lg:hidden sticky top-0 bg-white dark:bg-gray-900 border-b dark:border-gray-700 px-4 py-3 z-10">
           <div className="flex items-center">
             <button

apps/hackathon/src/app/users/[userId]/layout.tsx

@@ -10,7 +10,7 @@ const UserDetailLayout: FC = (): ReactElement => {
       <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 
       <div className="flex-1 flex flex-col overflow-auto">
-        {/* Mobile Header with Hamburger */}
+
         <div className="lg:hidden bg-white dark:bg-gray-900 border-b dark:border-neutral-700 px-4 py-3 flex items-center">
           <button
             onClick={() => setSidebarOpen(true)}

apps/hackathon/src/app/users/[userId]/page.tsx

@@ -44,7 +44,7 @@ const UserProfilePage: FC = (): ReactElement => {
 
   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-4 md:py-6">
           <div className="flex items-start justify-between">
@@ -91,9 +91,9 @@ const UserProfilePage: FC = (): ReactElement => {
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8">
         <div className="grid gap-4 md:gap-6 lg:grid-cols-3">
-          {/* Main Content */}
+
           <div className="lg:col-span-2 space-y-4 md:space-y-6">
-            {/* About Section */}
+
             {user.bio && (
               <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6 overflow-hidden">
                 <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
@@ -105,7 +105,6 @@ const UserProfilePage: FC = (): ReactElement => {
               </div>
             )}
 
-            {/* Skills Section */}
             {user.skills && user.skills.length > 0 && (
               <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
                 <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
@@ -124,7 +123,6 @@ const UserProfilePage: FC = (): ReactElement => {
               </div>
             )}
 
-            {/* Team Section */}
             {userTeams.length > 0 ? (
               <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
                 <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
@@ -202,9 +200,8 @@ const UserProfilePage: FC = (): ReactElement => {
             )}
           </div>
 
-          {/* Sidebar */}
           <div className="space-y-4 md:space-y-6">
-            {/* Contact Info */}
+
             <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
               <h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
                 Contact Information

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

@@ -35,10 +35,8 @@ const WinnerPage: FC = (): ReactElement => {
     );
   }
 
-  // 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:
@@ -52,7 +50,6 @@ const WinnerPage: FC = (): ReactElement => {
     }
   };
 
-  // Get rank color
   const getRankColor = (rank: number) => {
     switch (rank) {
       case 1:
@@ -68,7 +65,6 @@ const WinnerPage: FC = (): ReactElement => {
 
   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">
@@ -83,7 +79,6 @@ const WinnerPage: FC = (): ReactElement => {
         </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">
@@ -97,7 +92,6 @@ const WinnerPage: FC = (): ReactElement => {
           </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];
@@ -148,7 +142,6 @@ const WinnerPage: FC = (): ReactElement => {
               })}
             </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];
@@ -160,7 +153,6 @@ const WinnerPage: FC = (): ReactElement => {
                   >
                     <div className="text-5xl">{getMedalEmoji(winner.rank)}</div>
 
-                    {/* Team Logo */}
                     {winner.team.logo && (
                       <img
                         src={winner.team.logo}
@@ -178,7 +170,6 @@ const WinnerPage: FC = (): ReactElement => {
                       </p>
                     </div>
 
-                    {/* Podium */}
                     <div
                       className={`${
                         winner.rank === 1
@@ -197,7 +188,6 @@ const WinnerPage: FC = (): ReactElement => {
               })}
             </div>
 
-            {/* Ranks 4-23: Prize Winners */}
             {sortedWinners.filter((w) => w.rank >= 4 && w.rank <= 23).length >
               0 && (
               <div className="mt-12">
@@ -247,7 +237,6 @@ const WinnerPage: FC = (): ReactElement => {
               </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">
@@ -296,7 +285,6 @@ const WinnerPage: FC = (): ReactElement => {
         )}
       </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">

apps/hackathon/src/components/city-select.tsx

@@ -19,12 +19,10 @@ export const CitySelect: FC<CitySelectProps> = ({
   const dropdownRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  // Filter cities based on search query
   const filteredCities = INDONESIAN_CITIES.filter((city) =>
     city.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
-  // Close dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (

apps/hackathon/src/components/navigation.tsx

@@ -1,7 +1,7 @@
 import { FC, useState } from 'react';
 import { Link, useNavigate } from 'react-router';
 import { useUserMe, useMyTeams } from '@imphnen-frontend-service/service';
-import { useSession } from '@imphnen-frontend-service/utils';
+import { useSession } from '@imphnen-frontend-service/service';
 
 export const Navigation: FC = () => {
   const navigate = useNavigate();
@@ -23,13 +23,12 @@ export const Navigation: FC = () => {
     <nav className="bg-white border-b shadow-sm">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
-          {/* Logo */}
+
           <Link to="/dashboard" className="flex items-center space-x-2">
             <span className="text-2xl">🏆</span>
             <span className="text-xl font-bold text-gray-900">Hackathon</span>
           </Link>
 
-          {/* Navigation Links */}
           <div className="hidden md:flex items-center space-x-6">
             <Link
               to="/dashboard"
@@ -53,7 +52,6 @@ export const Navigation: FC = () => {
             )}
           </div>
 
-          {/* User Menu */}
           <div className="relative">
             <button
               onClick={() => setShowUserMenu(!showUserMenu)}
@@ -88,7 +86,6 @@ export const Navigation: FC = () => {
               </svg>
             </button>
 
-            {/* Dropdown Menu */}
             {showUserMenu && (
               <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
                 <div className="px-4 py-2 border-b border-gray-200">
@@ -132,7 +129,6 @@ export const Navigation: FC = () => {
         </div>
       </div>
 
-      {/* Close dropdown when clicking outside */}
       {showUserMenu && (
         <div
           className="fixed inset-0 z-40"

apps/hackathon/src/components/sidebar.tsx

@@ -32,7 +32,6 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
   const myTeams = teamsData?.data || [];
   const hasTeam = myTeams.length > 0;
 
-  // Close sidebar on route change (mobile)
   useEffect(() => {
     if (onClose) {
       onClose();
@@ -159,7 +158,6 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
 
   const sidebarContent = (
     <div className="w-64 bg-white dark:bg-gray-900 border-r dark:border-gray-800 min-h-screen flex flex-col">
-      {/* Logo / Brand with Close Button */}
       <div className="p-6 flex items-center justify-between border-b dark:border-gray-800">
         <h1 className="text-xl font-bold text-gray-900 dark:text-white">
           Hackathon
@@ -186,7 +184,6 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
         )}
       </div>
 
-      {/* User Info */}
       <div className="p-4 border-b dark:border-gray-800">
         <div className="flex items-center space-x-3">
           {user?.avatar ? (
@@ -216,7 +213,6 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
         </div>
       </div>
 
-      {/* Navigation */}
       <nav className="flex-1 p-4">
         <ul className="space-y-2">
           {navItems
@@ -242,7 +238,6 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
         </ul>
       </nav>
 
-      {/* Theme Toggle & Logout */}
       <div className="p-4 border-t dark:border-gray-800 space-y-2">
         <button
           onClick={cycleTheme}
@@ -267,20 +262,16 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
 
   return (
     <>
-      {/* Desktop Sidebar - Always visible on lg+, sticky position */}
       <div className="hidden lg:block sticky top-0 h-screen overflow-y-auto">
         {sidebarContent}
       </div>
 
-      {/* Mobile Sidebar - Overlay */}
       {isOpen && (
         <div className="lg:hidden fixed inset-0 z-50">
-          {/* Backdrop */}
           <div
             className="fixed inset-0 bg-black/50 transition-opacity"
             onClick={onClose}
           />
-          {/* Sidebar */}
           <div className="fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out">
             {sidebarContent}
           </div>

apps/hackathon/src/components/theme-provider.tsx

@@ -48,11 +48,9 @@ export const ThemeProvider: FC<ThemeProviderProps> = ({ children, defaultTheme =
   useEffect(() => {
     const root = document.documentElement;
 
-    // Calculate the resolved theme
     const resolved = theme === 'system' ? getSystemTheme() : theme;
     setResolvedTheme(resolved);
 
-    // Apply dark class to root
     if (resolved === 'dark') {
       root.classList.add('dark');
     } else {
@@ -60,7 +58,6 @@ export const ThemeProvider: FC<ThemeProviderProps> = ({ children, defaultTheme =
     }
   }, [theme]);
 
-  // Listen for system theme changes
   useEffect(() => {
     if (theme !== 'system') return;
 

apps/hackathon/src/components/theme-toggle.tsx

@@ -5,7 +5,6 @@ interface ThemeToggleProps {
   className?: string;
 }
 
-// Sun icon for light mode
 const SunIcon = () => (
   <svg
     className="w-5 h-5"
@@ -22,7 +21,6 @@ const SunIcon = () => (
   </svg>
 );
 
-// Moon icon for dark mode
 const MoonIcon = () => (
   <svg
     className="w-5 h-5"
@@ -39,7 +37,6 @@ const MoonIcon = () => (
   </svg>
 );
 
-// System icon (monitor)
 const SystemIcon = () => (
   <svg
     className="w-5 h-5"

apps/hackathon/src/hooks/use-team-guards.ts

@@ -1,8 +1,5 @@
 import { useTeamById, useTeamMembers, useUserMe, useTeamSubmission } from '@imphnen-frontend-service/service';
 
-/**
- * Hook to check if current user is a member of the team
- */
 export const useTeamMembership = (teamId: string) => {
   const { data: userData } = useUserMe();
   const { data: membersData } = useTeamMembers(teamId);
@@ -21,9 +18,6 @@ export const useTeamMembership = (teamId: string) => {
   };
 };
 
-/**
- * Hook to check if current user is the team leader
- */
 export const useIsTeamLeader = (teamId: string) => {
   const { data: teamData } = useTeamById(teamId);
   const { data: userData } = useUserMe();
@@ -39,9 +33,6 @@ export const useIsTeamLeader = (teamId: string) => {
   };
 };
 
-/**
- * Hook to get team submission status
- */
 export const useTeamSubmissionStatus = (teamId: string) => {
   const { data: submissionData, isLoading } = useTeamSubmission(teamId, !!teamId);
 
@@ -57,9 +48,6 @@ export const useTeamSubmissionStatus = (teamId: string) => {
   };
 };
 
-/**
- * Hook to check if current user can perform team actions
- */
 export const useTeamPermissions = (teamId: string) => {
   const { isLeader } = useIsTeamLeader(teamId);
   const { isMember } = useTeamMembership(teamId);

apps/hackathon/src/main.tsx

@@ -24,10 +24,6 @@ add404PageToRoutesChildren(notFoundFiles, routes);
 const router = createBrowserRouter([
   {
     ...routes,
-    // MIDDLEWARE TEMPORARILY DISABLED - causing infinite loops with React Router v7
-    // TODO: Implement auth checks at component level or use different pattern
-    // loader: middleware,
-    // shouldRevalidate: () => false,
   },
 ]);
 

apps/hackathon/src/middleware.ts

@@ -1,4 +1,4 @@
-import { SessionUser } from '@imphnen-frontend-service/utils';
+import { SessionUser } from '@imphnen-frontend-service/service';
 import { hackathonApi, SessionToken } from '@imphnen-frontend-service/service';
 import { LoaderFunctionArgs, redirect } from 'react-router';
 
@@ -29,47 +29,38 @@ const mappingPublicPrefixRoutes = [
   '/hackathons',
 ];
 
-// Cache to prevent redundant checks (cache for 5 seconds)
 const onboardingCache = new Map<string, { hasLocation: boolean; timestamp: number }>();
-const CACHE_DURATION = 5000; // 5 seconds
+const CACHE_DURATION = 5000;
 
 export const middleware = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
   const pathname = url.pathname;
 
-  // Get token from cookies and user from local storage
   const tokenData = SessionToken.get();
   const user = SessionUser.get();
   const isAuthenticated = !!tokenData?.token?.access_token;
 
-  // Allow to access the hackathon pages without authentication
   if (mappingPublicPrefixRoutes.some((prefix) => pathname.startsWith(prefix))) {
     return null;
   }
 
-  // Public routes - allow everyone to view the landing page
   if (mappingPublicRoutes.includes(pathname)) {
     return null;
   }
 
-  // Auth callback - allow without authentication check (for OAuth callback)
   if (pathname === '/auth/callback') {
     return null;
   }
 
-  // Auth routes (all /auth/* paths) - redirect to dashboard if already authenticated
   if (pathname.startsWith('/auth')) {
     if (isAuthenticated) return redirect('/dashboard');
     return null;
   }
 
-  // Require authentication for all other routes
   if (!isAuthenticated) {
     return redirect('/auth/login');
   }
 
-  // Check if user has completed onboarding
-  // Skip onboarding check for onboarding routes themselves
   if (!mappingOnboardingRoutes.includes(pathname)) {
     try {
       const userId = user?.id;
@@ -79,28 +70,23 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
 
       const now = Date.now();
 
-      // Check cache first
       const cached = onboardingCache.get(userId);
       let hasLocation = false;
 
       if (cached && (now - cached.timestamp) < CACHE_DURATION) {
         hasLocation = cached.hasLocation;
       } else {
-        // First check user data (faster)
         if (user?.location) {
           hasLocation = true;
         } else {
-          // Fetch from backend API
           try {
             const response = await hackathonApi.get('/users/me');
             hasLocation = !!response.data?.data?.location;
           } catch {
-            // If API fails, check user data as fallback
             hasLocation = !!user?.location;
           }
         }
 
-        // Update cache
         onboardingCache.set(userId, { hasLocation, timestamp: now });
       }
 
@@ -109,12 +95,10 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
       }
     } catch (error) {
       console.error('[Middleware] Unexpected error checking onboarding:', error);
-      // On error, allow access (fail open)
       return null;
     }
   }
 
-  // Check route permissions using user data
   const userPermissions =
     user?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
 

apps/hackathon/src/utils/aesclient.ts

@@ -44,12 +44,9 @@ async function deriveKeyFromPassphrase(passphrase: string, salt: Uint8Array, ite
   );
 }
 
-/**
- * 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 salt = randBytes(16);
+  const iv = randBytes(12);
   const key = await deriveKeyFromPassphrase(passphrase, salt);
 
   const cipher = await crypto.subtle.encrypt(
@@ -58,7 +55,6 @@ export async function encryptText(plaintext: string, passphrase: string) {
     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);
@@ -67,9 +63,6 @@ export async function encryptText(plaintext: string, passphrase: string) {
   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);

apps/hackathon/src/utils/certificate.ts

@@ -2,40 +2,21 @@ import { decryptText, encryptText } from "./aesclient";
 
 const SECRET_KEY = 'imphnen-hackathon-2025';
 
-/**
- * Encode teamId, submissionId, and userId into a certificate ID
- * Uses AES encryption for secure encoding
- * @param teamId - The team ID
- * @param submissionId - The submission ID
- * @param userId - The user ID (team member)
- * @returns Encoded certificate ID
- */
 export const encodeCertificateId = async (teamId: string, submissionId: string, userId: string): Promise<string> => {
   const combined = `${teamId}::${submissionId}::${userId}`;
   return encryptText(combined, SECRET_KEY);
 };
 
-/**
- * Encode winner certificate ID (team-based)
- * @param teamId - Winner team ID
- * @returns Encoded winner certificate ID
- */
 export const encodeWinnerCertificateId = async (teamId: string): Promise<string> => {
   const combined = `winner::${teamId}`;
   return encryptText(combined, SECRET_KEY);
 };
 
-/**
- * Decode certificate ID back to teamId, submissionId, and userId
- * @param certId - The encoded certificate ID
- * @returns Object containing teamId, submissionId, and userId
- */
 export const decodeCertificateId = async (certId: string): Promise<{ teamId: string; submissionId: string; userId: string }> => {
   try {
     const decoded = await decryptText(certId, SECRET_KEY);
     const parts = decoded.split('::');
 
-    // Handle both old format (teamId::submissionId) and new format (teamId::submissionId::userId)
     if (parts.length === 2) {
       const [teamId, submissionId] = parts;
       return { teamId, submissionId, userId: '' };
@@ -50,17 +31,11 @@ export const decodeCertificateId = async (certId: string): Promise<{ teamId: str
   }
 };
 
-/**
- * Decode winner certificate ID back to teamId
- * @param certId - The encoded winner certificate ID
- * @returns Object containing teamId
- */
 export const decodeWinnerCertificateId = async (certId: string): Promise<{ teamId: string }> => {
   try {
     const decoded = await decryptText(certId, SECRET_KEY);
     const parts = decoded.split('::');
 
-    // winner::teamId
     if (parts.length === 2 && parts[0] === 'winner') {
       return { teamId: parts[1] };
     }
@@ -71,12 +46,6 @@ export const decodeWinnerCertificateId = async (certId: string): Promise<{ teamI
   }
 };
 
-/**
- * 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');