refactor: update JudgingTab and RewardsTab components

- Removed the Administrators section from JudgingTab for a cleaner interface.
- Enhanced RewardsTab to support real-time updates for prize amounts using the useWatch hook.
- Adjusted platform fee calculation from 2% to 4% and set default prize amounts to 0 for new tiers.
- Improved user experience by ensuring immediate feedback on prize tier changes.

Author: 0xdevcollins

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

@@ -24,8 +24,6 @@ import {
   X,
   Minus,
   GripVertical,
-  Info,
-  LucideArrowUpRight,
   Sparkles,
   ChevronDown,
   ChevronUp,
@@ -46,7 +44,6 @@ import {
 } from '@dnd-kit/sortable';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import Link from 'next/link';
 import { Separator } from '@/components/ui/separator';
 import {
   Collapsible,
@@ -465,37 +462,6 @@ export default function JudgingTab({
     }
   };
 
-  const administrators = [
-    {
-      id: '1',
-      name: 'Brooklyn Simmons',
-      email: 'debbie.baker@example.com',
-      role: 'OWNER',
-      avatar: '/api/placeholder/40/40',
-    },
-    {
-      id: '2',
-      name: 'Annette Black',
-      email: '@verydarkman',
-      role: 'ADMIN',
-      avatar: '/api/placeholder/40/40',
-    },
-    {
-      id: '3',
-      name: 'Cameron Williamson',
-      email: 'cameron@example.com',
-      role: 'ADMIN',
-      avatar: '/api/placeholder/40/40',
-    },
-    {
-      id: '4',
-      name: 'Jane Doe',
-      email: 'jane@example.com',
-      role: 'ADMIN',
-      avatar: '/api/placeholder/40/40',
-    },
-  ];
-
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-8'>
@@ -632,54 +598,6 @@ export default function JudgingTab({
           )}
         </div>
 
-        <div>
-          <h3 className='text-sm'>
-            Administrators <span className='text-error-400'>*</span>
-          </h3>
-          <p className='mt-1 mb-3 text-sm text-gray-500'>
-            The admins and the owner of your organization have full permissions
-            to manage this hackathon. See below.
-          </p>
-          <div className='bg-background-card mt-3 rounded-[12px] border border-gray-900 p-6'>
-            <div className='space-y-4'>
-              {administrators.map(admin => (
-                <div
-                  key={admin.id}
-                  className='flex items-center justify-between py-3'
-                >
-                  <div className='flex items-center gap-3'>
-                    <div className='flex h-10 w-10 items-center justify-center rounded-full bg-gray-800 font-medium text-white'>
-                      {admin.name.charAt(0)}
-                    </div>
-                    <div>
-                      <p className='text-sm font-medium text-white'>
-                        {admin.name}
-                      </p>
-                      <p className='text-xs text-gray-500'>{admin.email}</p>
-                    </div>
-                  </div>
-                  <span className='text-xs font-medium text-gray-400'>
-                    {admin.role}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div className='mt-4 flex items-start gap-2 rounded-[12px] bg-[#DBF936]/12 p-4'>
-            <Info className='mt-0.5 h-4 w-4 flex-shrink-0 text-[#DBF936]' />
-            <p className='flex items-center gap-1 text-xs text-white'>
-              To add, remove, or edit admin, visit your{' '}
-              <Link
-                href='/organization/dashboard'
-                className='flex items-center gap-1 text-[#DBF936] underline'
-              >
-                organization dashboard{' '}
-                <LucideArrowUpRight className='h-4 w-4' />
-              </Link>
-            </p>
-          </div>
-        </div>
-
         <BoundlessButton type='submit' size='xl' disabled={isLoading}>
           {isLoading ? 'Saving...' : 'Continue'}
         </BoundlessButton>

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

@@ -8,7 +8,7 @@ import {
   FormItem,
   FormMessage,
 } from '@/components/ui/form';
-import { useForm, useFieldArray } from 'react-hook-form';
+import { useForm, useFieldArray, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
@@ -149,6 +149,13 @@ const PrizeTierComponent = ({
                         {...field}
                         type='number'
                         placeholder='0'
+                        value={field.value || '0'}
+                        onChange={e => {
+                          const value = e.target.value;
+                          // Update field value immediately for real-time calculation
+                          field.onChange(value === '' ? '0' : value);
+                        }}
+                        onBlur={field.onBlur}
                         className='h-11 border-zinc-800 bg-zinc-900/50 pr-16 pl-7 text-right font-medium text-white placeholder:text-zinc-600'
                       />
                       <div className='absolute top-1/2 right-3 -translate-y-1/2 text-xs text-zinc-500'>
@@ -232,7 +239,7 @@ const PrizeSummary = ({
         </div>
 
         <div className='flex items-center justify-between text-xs'>
-          <span className='text-zinc-500'>Platform Fee (2%)</span>
+          <span className='text-zinc-500'>Platform Fee (4%)</span>
           <span className='text-zinc-400'>${formatCurrency(platformFee)}</span>
         </div>
 
@@ -308,23 +315,23 @@ export default function RewardsTab({
         {
           id: `tier-${Date.now()}-1`,
           place: '1st Place',
-          prizeAmount: '10000',
+          prizeAmount: '0',
           description: '',
           currency: 'USDC',
           passMark: 80,
         },
         {
           id: `tier-${Date.now()}-2`,
           place: '2nd Place',
-          prizeAmount: '5000',
+          prizeAmount: '0',
           description: '',
           currency: 'USDC',
           passMark: 70,
         },
         {
           id: `tier-${Date.now()}-3`,
           place: '3rd Place',
-          prizeAmount: '2500',
+          prizeAmount: '0',
           description: '',
           currency: 'USDC',
           passMark: 50,
@@ -337,20 +344,26 @@ export default function RewardsTab({
     control: form.control,
     name: 'prizeTiers',
   });
-  const prizeTiers = form.watch('prizeTiers');
 
-  // Calculate totals
+  // Watch prizeTiers in real-time for immediate updates using useWatch hook
+  const prizeTiers = useWatch({
+    control: form.control,
+    name: 'prizeTiers',
+    defaultValue: form.getValues('prizeTiers') || [],
+  });
+
+  // Calculate totals - updates in real-time as user types
   const totalPool = useMemo(() => {
     return prizeTiers.reduce((sum, tier) => {
       const amount = parseFloat(
-        String(tier.prizeAmount).replace(/[^\d.-]/g, '')
+        String(tier.prizeAmount || '0').replace(/[^\d.-]/g, '')
       );
       return sum + (isNaN(amount) || amount < 0 ? 0 : amount);
     }, 0);
   }, [prizeTiers]);
 
   const platformFee = useMemo(
-    () => Math.round(totalPool * 0.02 * 100) / 100,
+    () => Math.round(totalPool * 0.04 * 100) / 100,
     [totalPool]
   );
   const totalFunds = useMemo(
@@ -364,7 +377,7 @@ export default function RewardsTab({
 
   const applyPreset = (presetKey: keyof typeof PRIZE_PRESETS) => {
     const preset = PRIZE_PRESETS[presetKey];
-    const baseAmount = totalPool || 10000;
+    const baseAmount = totalPool || 0;
     const newTiers = preset.tiers.map((percentage, idx) => ({
       id: `tier-${Date.now()}-${idx}`,
       place: `${['1st', '2nd', '3rd', '4th', '5th'][idx]} Place`,