feat(judge): dedicated judge portal, organizer invitations, completeness gate UX (#550)

* feat: implement judge portal with submission evaluation, invitations, and score calculation workflows

* feat: add countdown banner, support read-only score sliders, and integrate submission disqualification into grading modal

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 0xdevcollins

app/(landing)/hackathons/[slug]/components/header/ActionButtons.tsx

@@ -43,6 +43,18 @@ const ActionButtons = () => {
       )
     : false;
 
+  // Server-derived role for the current viewer. Organizers and assigned
+  // judges cannot join their own hackathon; surfacing the role lets us
+  // show the right copy instead of a broken join button.
+  const viewerRole = (hackathon as any)?.viewerRole as
+    | 'organizer'
+    | 'judge'
+    | 'participant'
+    | 'guest'
+    | undefined;
+  const hasConflictingRole =
+    viewerRole === 'organizer' || viewerRole === 'judge';
+
   const handleJoin = withAuth(async () => {
     try {
       await joinMutation.mutateAsync();
@@ -86,7 +98,13 @@ const ActionButtons = () => {
 
   return (
     <div className='flex w-full flex-col gap-3 md:w-auto md:flex-row md:items-center'>
-      {!isParticipant ? (
+      {hasConflictingRole ? (
+        <div className='flex h-12 w-full items-center justify-center rounded-xl border border-white/10 bg-white/5 px-8 text-sm font-medium text-gray-300 md:w-auto'>
+          {viewerRole === 'organizer'
+            ? 'You are managing this hackathon'
+            : 'You are judging this hackathon'}
+        </div>
+      ) : !isParticipant ? (
         <BoundlessButton
           className='s d bg-primary hover:bg-primary/90 h-12 w-full rounded-xl px-8 font-bold text-black disabled:bg-white/5 disabled:text-white/20 md:w-auto'
           icon={!isRegistrationClosed && <IconUserPlus size={20} />}

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

@@ -88,7 +88,7 @@ const ParticipantsPage: React.FC = () => {
   const [isReviewModalOpen, setIsReviewModalOpen] = useState(false);
   const [isJudgeModalOpen, setIsJudgeModalOpen] = useState(false);
   const [criteria, setCriteria] = useState<
-    Array<{ title: string; weight: number; description?: string }>
+    Array<{ id: string; title: string; weight: number; description?: string }>
   >([]);
   const [isLoadingCriteria, setIsLoadingCriteria] = useState(false);
 
@@ -194,6 +194,9 @@ const ParticipantsPage: React.FC = () => {
       if (response.success) {
         setCriteria(
           response.data?.judgingCriteria?.map(criterion => ({
+            // Persisted criteria always have an id (server enforces it).
+            // Fall back to name only for resilience against historic data.
+            id: criterion.id ?? criterion.name ?? '',
             title: criterion.name || '',
             weight: criterion.weight || 0,
             description: criterion.description || '',

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

@@ -3,11 +3,29 @@
 import { MailIcon } from 'lucide-react';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
 import { BoundlessButton } from '@/components/buttons';
 
+const POST_VERIFY_KEY = 'boundless:postVerifyCallbackUrl';
+
 const CheckEmail = () => {
   const searchParams = useSearchParams();
   const email = searchParams.get('email');
+  const callbackUrl = searchParams.get('callbackUrl');
+
+  // The verification email link Better Auth sends does not preserve query
+  // params, so stash the desired post-verify destination here. The
+  // /auth/verify-email page reads this back after the token is consumed.
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (callbackUrl && callbackUrl.startsWith('/')) {
+      try {
+        window.localStorage.setItem(POST_VERIFY_KEY, callbackUrl);
+      } catch {
+        // ignore quota / private mode errors
+      }
+    }
+  }, [callbackUrl]);
 
   return (
     <div className='flex min-h-screen items-center justify-center p-4'>

app/auth/check-email/page.tsx

@@ -5,6 +5,8 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect } from 'react';
 import { toast } from 'sonner';
 
+const POST_VERIFY_KEY = 'boundless:postVerifyCallbackUrl';
+
 const VerifyEmail = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -16,7 +18,21 @@ const VerifyEmail = () => {
       fetchOptions: {
         onSuccess: () => {
           toast.success('Email verified successfully');
-          router.push('/');
+          // Honor a post-verify destination stashed by the signup flow
+          // (e.g. a judge invitation page). Same-origin paths only.
+          let target = '/';
+          if (typeof window !== 'undefined') {
+            try {
+              const stashed = window.localStorage.getItem(POST_VERIFY_KEY);
+              if (stashed && stashed.startsWith('/')) {
+                target = stashed;
+              }
+              window.localStorage.removeItem(POST_VERIFY_KEY);
+            } catch {
+              // ignore storage errors
+            }
+          }
+          router.push(target);
         },
         onError: () => {
           toast.error('Failed to verify email');

app/auth/verify-email/page.tsx

@@ -618,3 +618,52 @@ input:-webkit-autofill:active {
   -webkit-text-fill-color: white !important; /* Optional: Customize text color */
   transition: background-color 5000s ease-in-out 0s; /* Optional: Smooth transition */
 }
+
+/* Judge portal: score slider */
+.judge-slider {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: 6px;
+  background: linear-gradient(
+    to right,
+    #2eedaa 0%,
+    #2eedaa var(--judge-slider-pct, 0%),
+    rgba(255, 255, 255, 0.08) var(--judge-slider-pct, 0%),
+    rgba(255, 255, 255, 0.08) 100%
+  );
+  border-radius: 9999px;
+  outline: none;
+  cursor: pointer;
+}
+.judge-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 9999px;
+  background: #2eedaa;
+  border: 2px solid #030303;
+  box-shadow:
+    0 0 0 1px rgba(46, 237, 170, 0.4),
+    0 2px 6px rgba(0, 0, 0, 0.6);
+  transition: transform 120ms ease;
+}
+.judge-slider:active::-webkit-slider-thumb,
+.judge-slider:focus-visible::-webkit-slider-thumb {
+  transform: scale(1.1);
+}
+.judge-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 9999px;
+  background: #2eedaa;
+  border: 2px solid #030303;
+  box-shadow:
+    0 0 0 1px rgba(46, 237, 170, 0.4),
+    0 2px 6px rgba(0, 0, 0, 0.6);
+}
+.judge-slider::-moz-range-track {
+  background: transparent;
+  height: 6px;
+}