refactor: update ComingSoon component and enhance NewHackathonTab logic

- Changed the class name in the ComingSoon component for improved styling consistency.
- Refactored the NewHackathonTab to streamline step completion logic and introduced a new method for setting steps from draft data.
- Enhanced the ParticipantTab to normalize initial participant data and added error handling for form submissions.
- Updated participantSchema to allow null values for maxParticipants, improving data validation.
- Improved the transformFromApiFormat function to ensure proper handling of prize tiers and judging criteria.

Author: 0xdevcollins

components/ComingSoon.tsx

@@ -60,7 +60,7 @@ const FeatureBlock = ({
       transition={{ duration: 0.6, delay: index * 0.12 }}
       viewport={{ once: true }}
       whileHover={{ scale: 1.02 }}
-      className='relative overflow-hidden rounded-3xl bg-gradient-to-br from-[#0e0e0e] to-[#1a1a1a] p-10'
+      className='relative overflow-hidden rounded-3xl bg-linear-to-br from-[#0e0e0e] to-[#1a1a1a] p-10'
     >
       <div className='pointer-events-none absolute -top-16 -right-16 opacity-5'>
         <Icon className='h-64 w-64' />

components/organization/hackathons/new/NewHackathonTab.tsx

@@ -50,8 +50,9 @@ export default function NewHackathonTab({
     steps,
     navigateToStep,
     canAccessStep,
-    updateStepCompletion,
+    setStepsFromDraft,
     setActiveTab,
+    updateStepCompletion,
   } = useHackathonSteps('information');
 
   // Use ref to store the callback to avoid circular dependency
@@ -83,74 +84,41 @@ export default function NewHackathonTab({
   const onDraftLoaded = useCallback(
     (formData: any, firstIncompleteStep: StepKey) => {
       setStepData(formData);
-      setActiveTab(firstIncompleteStep);
 
-      // Use the validation helper to determine completion status
-      // This checks if the step data has meaningful values, not just empty objects
-      const newSteps: Record<StepKey, (typeof steps)[StepKey]> = {
-        information: {
-          status: isStepDataValid('information', formData)
-            ? 'completed'
-            : 'active',
-          isCompleted: isStepDataValid('information', formData),
-        },
-        timeline: {
-          status: isStepDataValid('timeline', formData)
-            ? 'completed'
-            : 'pending',
-          isCompleted: isStepDataValid('timeline', formData),
-        },
-        participation: {
-          status: isStepDataValid('participation', formData)
-            ? 'completed'
-            : 'pending',
-          isCompleted: isStepDataValid('participation', formData),
-        },
-        rewards: {
-          status: isStepDataValid('rewards', formData)
-            ? 'completed'
-            : 'pending',
-          isCompleted: isStepDataValid('rewards', formData),
-        },
-        resources: {
-          status: isStepDataValid('resources', formData)
-            ? 'completed'
-            : 'pending',
-          isCompleted: isStepDataValid('resources', formData),
-        },
-        judging: {
-          status: isStepDataValid('judging', formData)
-            ? 'completed'
-            : 'pending',
-          isCompleted: isStepDataValid('judging', formData),
-        },
-        collaboration: {
-          status: isStepDataValid('collaboration', formData)
-            ? 'completed'
-            : 'pending',
-          isCompleted: isStepDataValid('collaboration', formData),
-        },
-        review: {
-          status: 'pending',
-          isCompleted: false,
-        },
-      };
+      // Build step state: completed before active, active for firstIncomplete, pending after
+      const stepOrder = [
+        'information',
+        'timeline',
+        'participation',
+        'rewards',
+        'resources',
+        'judging',
+        'collaboration',
+        'review',
+      ] as StepKey[];
+      const activeIndex = stepOrder.indexOf(firstIncompleteStep);
+      const newSteps: Record<StepKey, (typeof steps)[StepKey]> = {} as Record<
+        StepKey,
+        (typeof steps)[StepKey]
+      >;
 
-      // Set the first incomplete step as active
-      newSteps[firstIncompleteStep] = {
-        ...newSteps[firstIncompleteStep],
-        status: 'active',
-      };
-
-      // Update all step completions
-      Object.keys(newSteps).forEach(key => {
-        updateStepCompletion(
-          key as StepKey,
-          newSteps[key as StepKey].isCompleted
-        );
+      stepOrder.forEach((key, index) => {
+        const isCompleted = isStepDataValid(key, formData);
+        if (index < activeIndex) {
+          newSteps[key] = { status: 'completed', isCompleted: true };
+        } else if (index === activeIndex) {
+          newSteps[key] = { status: 'active', isCompleted };
+        } else {
+          newSteps[key] = {
+            status: 'pending',
+            isCompleted: key === 'review' ? false : isCompleted,
+          };
+        }
       });
+
+      setStepsFromDraft(newSteps, firstIncompleteStep);
     },
-    [setStepData, setActiveTab, updateStepCompletion]
+    [setStepData, setStepsFromDraft]
   );
 
   // Update the ref when the callback changes

components/organization/hackathons/new/tabs/ParticipantTab.tsx

@@ -75,33 +75,67 @@ const tabVisibility = [
   { name: 'rulesTab' as const, label: 'Rules' },
 ];
 
+const defaultParticipantValues: ParticipantFormData = {
+  participantType: 'individual',
+  teamMin: 2,
+  teamMax: 5,
+  maxParticipants: undefined,
+  require_github: true,
+  require_demo_video: true,
+  require_other_links: true,
+  detailsTab: true,
+  participantsTab: true,
+  resourcesTab: true,
+  submissionTab: true,
+  announcementsTab: true,
+  discussionTab: true,
+  winnersTab: true,
+  sponsorsTab: true,
+  joinATeamTab: true,
+  rulesTab: true,
+};
+
+function normalizeParticipantInitialData(
+  data: ParticipantFormData | undefined
+): ParticipantFormData {
+  if (!data) return defaultParticipantValues;
+  const type = data.participantType;
+  const needsTeamSize = type === 'team' || type === 'team_or_individual';
+  return {
+    ...defaultParticipantValues,
+    ...data,
+    teamMin: needsTeamSize
+      ? data.teamMin && data.teamMin >= 1
+        ? data.teamMin
+        : 2
+      : data.teamMin,
+    teamMax: needsTeamSize
+      ? data.teamMax && data.teamMax >= 1
+        ? data.teamMax
+        : 5
+      : data.teamMax,
+    maxParticipants:
+      data.maxParticipants != null && data.maxParticipants >= 1
+        ? data.maxParticipants
+        : undefined,
+  };
+}
+
 export default function ParticipantTab({
+  onContinue,
   onSave,
   initialData,
   isLoading = false,
   isRegistrationClosed = false,
 }: ParticipantTabProps) {
+  const normalizedInitial = React.useMemo(
+    () => normalizeParticipantInitialData(initialData),
+    [initialData]
+  );
+
   const form = useForm<ParticipantFormData>({
     resolver: zodResolver(participantSchema),
-    defaultValues: initialData || {
-      participantType: 'individual',
-      teamMin: 2,
-      teamMax: 5,
-      maxParticipants: undefined,
-      require_github: true,
-      require_demo_video: true,
-      require_other_links: true,
-      detailsTab: true,
-      participantsTab: true,
-      resourcesTab: true,
-      submissionTab: true,
-      announcementsTab: true,
-      discussionTab: true,
-      winnersTab: true,
-      sponsorsTab: true,
-      joinATeamTab: true,
-      rulesTab: true,
-    },
+    defaultValues: normalizedInitial,
   });
 
   const participantType = form.watch('participantType');
@@ -110,16 +144,17 @@ export default function ParticipantTab({
     maxParticipants !== undefined && maxParticipants !== null;
 
   React.useEffect(() => {
-    if (initialData) {
-      form.reset(initialData);
-    }
-  }, [initialData, form]);
+    form.reset(normalizedInitial);
+  }, [normalizedInitial, form]);
 
   const onSubmit = async (data: ParticipantFormData) => {
     try {
       if (onSave) {
         await onSave(data);
       }
+      if (onContinue) {
+        onContinue();
+      }
     } catch (error: unknown) {
       const err = error as {
         response?: { data?: { message?: string | string[] } };
@@ -182,9 +217,23 @@ export default function ParticipantTab({
     </div>
   );
 
+  const handleInvalid = (errors: Record<string, { message?: string }>) => {
+    const firstKey = Object.keys(errors)[0];
+    const firstMessage =
+      firstKey && errors[firstKey]?.message
+        ? errors[firstKey].message
+        : undefined;
+    toast.error('Please fix the errors below before continuing.', {
+      description: firstMessage,
+    });
+  };
+
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-8'>
+      <form
+        onSubmit={form.handleSubmit(onSubmit, handleInvalid)}
+        className='space-y-8'
+      >
         {/* Participant Type */}
         <div className='space-y-4'>
           <div>

components/organization/hackathons/new/tabs/schemas/participantSchema.ts

@@ -7,7 +7,10 @@ export const participantSchema = z
       .default('individual'),
     teamMin: z.number().min(1).max(20).optional(),
     teamMax: z.number().min(1).max(20).optional(),
-    maxParticipants: z.number().int().min(1).optional(),
+    maxParticipants: z
+      .union([z.number().int().min(1), z.null()])
+      .optional()
+      .transform(val => (val === null ? undefined : val)),
     require_github: z.boolean().optional(),
     require_demo_video: z.boolean().optional(),
     require_other_links: z.boolean().optional(),

hooks/use-hackathon-draft.ts

@@ -9,7 +9,11 @@ import type { RewardsFormData } from '@/components/organization/hackathons/new/t
 import type { ResourcesFormData } from '@/components/organization/hackathons/new/tabs/schemas/resourcesSchema';
 import type { JudgingFormData } from '@/components/organization/hackathons/new/tabs/schemas/judgingSchema';
 import type { CollaborationFormData } from '@/components/organization/hackathons/new/tabs/schemas/collaborationSchema';
-import type { StepKey } from '@/components/organization/hackathons/new/constants';
+import {
+  type StepKey,
+  STEP_ORDER,
+} from '@/components/organization/hackathons/new/constants';
+import { isStepDataValid } from '@/lib/utils/hackathon-step-validation';
 
 interface StepData {
   information?: InfoFormData;
@@ -68,7 +72,6 @@ export const useHackathonDraft = ({
     loadDraft();
   }, [initialDraftId, organizationId, fetchDraft]);
 
-  // In hooks/use-hackathon-draft.ts useEffect:
   useEffect(() => {
     if (
       currentDraft &&
@@ -80,8 +83,11 @@ export const useHackathonDraft = ({
       setStepData(formData);
       draftInitializedRef.current = currentDraft.id;
 
+      const firstIncompleteStep =
+        STEP_ORDER.find(key => !isStepDataValid(key, formData)) ?? 'review';
+
       if (onDraftLoaded) {
-        onDraftLoaded(formData, 'information' as StepKey);
+        onDraftLoaded(formData, firstIncompleteStep);
       }
     } else if (currentDraft && currentDraft.id === initialDraftId) {
       console.log('⏭️ Draft already initialized, skipping'); // Debug

hooks/use-hackathon-steps.ts

@@ -10,6 +10,10 @@ interface UseHackathonStepsReturn {
   activeTab: StepKey;
   steps: Record<StepKey, StepData>;
   setActiveTab: (tab: StepKey) => void;
+  setStepsFromDraft: (
+    steps: Record<StepKey, StepData>,
+    activeStep: StepKey
+  ) => void;
   navigateToStep: (stepKey: StepKey, skipAccessCheck?: boolean) => void;
   canAccessStep: (stepKey: StepKey) => boolean;
   updateStepCompletion: (
@@ -91,6 +95,14 @@ export const useHackathonSteps = (
     [canAccessStep, getCurrentStepIndex]
   );
 
+  const setStepsFromDraft = useCallback(
+    (stepsState: Record<StepKey, StepData>, activeStep: StepKey) => {
+      setSteps(stepsState);
+      setActiveTab(activeStep);
+    },
+    []
+  );
+
   const updateStepCompletion = useCallback(
     (stepKey: StepKey, isCompleted: boolean, nextStep?: StepKey) => {
       setSteps(prev => {
@@ -124,6 +136,7 @@ export const useHackathonSteps = (
     activeTab,
     steps,
     setActiveTab,
+    setStepsFromDraft,
     navigateToStep,
     canAccessStep,
     updateStepCompletion,