cluster fuck

components/dashboard/promotions/NewPromotionForm.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
@@ -25,6 +25,7 @@ import {
 } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { toast } from '@/components/ui/use-toast';
 import { PromotionFormData } from '@/lib/types/promotion';
 import { fetchClient } from '@/lib/client-service';
@@ -62,6 +63,7 @@ interface NewPromotionFormProps {
 
 export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFormProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [discountType, setDiscountType] = useState<'percentage' | 'fixed'>('percentage');
 
   // Initialize form with default values
   const form = useForm<z.infer<typeof formSchema>>({
@@ -79,6 +81,16 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
     },
   });
 
+  // Keep local state in sync with form
+  useEffect(() => {
+    const subscription = form.watch((value, { name }) => {
+      if (name === 'discountType') {
+        setDiscountType(value.discountType as 'percentage' | 'fixed');
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [form, form.watch]);
+
   // Form submission handler
   async function onSubmit(data: z.infer<typeof formSchema>) {
     setIsSubmitting(true);
@@ -105,22 +117,23 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-        <div className="grid grid-cols-1 gap-4">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <div className="grid grid-cols-1 gap-6">
           <FormField
             control={form.control}
             name="code"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Promotion Code</FormLabel>
+                <FormLabel className="text-sm font-medium">Promotion Code</FormLabel>
                 <FormControl>
                   <Input 
                     placeholder="SUMMER20" 
                     {...field} 
                     onChange={(e) => field.onChange(e.target.value.toUpperCase())}
+                    className="h-10"
                   />
                 </FormControl>
-                <FormDescription>
+                <FormDescription className="text-xs">
                   Enter a unique code for your promotion. Only letters and numbers.
                 </FormDescription>
                 <FormMessage />
@@ -129,33 +142,32 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
           />
         </div>
 
-        <div className="grid grid-cols-3 gap-4">
+        <div className="grid grid-cols-4 gap-6">
           <FormField
             control={form.control}
             name="discountType"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>Discount Type</FormLabel>
-                <Select 
-                  onValueChange={(value) => {
-                    console.log("Selected discount type:", value);
-                    field.onChange(value);
-                  }} 
-                  value={field.value}
-                >
-                  <FormControl>
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a discount type" />
-                    </SelectTrigger>
-                  </FormControl>
-                  <SelectContent>
-                    <SelectItem value="percentage">Percentage (%)</SelectItem>
-                    <SelectItem value="fixed">Fixed Amount (£)</SelectItem>
-                  </SelectContent>
-                </Select>
-                <FormDescription>
-                  Choose between percentage or fixed amount discount
-                </FormDescription>
+              <FormItem className="col-span-1">
+                <FormLabel className="text-sm font-medium">Discount Type</FormLabel>
+                <FormControl>
+                  <RadioGroup
+                    onValueChange={(value) => {
+                      field.onChange(value);
+                      setDiscountType(value as 'percentage' | 'fixed');
+                    }}
+                    value={field.value}
+                    className="flex flex-col space-y-2"
+                  >
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="percentage" id="percentage" />
+                      <label htmlFor="percentage" className="cursor-pointer">Percentage (%)</label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="fixed" id="fixed" />
+                      <label htmlFor="fixed" className="cursor-pointer">Fixed Amount (£)</label>
+                    </div>
+                  </RadioGroup>
+                </FormControl>
                 <FormMessage />
               </FormItem>
             )}
@@ -165,19 +177,20 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
             control={form.control}
             name="discountValue"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>Discount Value</FormLabel>
+              <FormItem className="col-span-1">
+                <FormLabel className="text-sm font-medium">Discount Value</FormLabel>
                 <FormControl>
                   <Input 
                     type="number" 
-                    step={form.watch('discountType') === 'percentage' ? '1' : '0.01'}
+                    step={discountType === 'percentage' ? '1' : '0.01'}
                     min={0}
-                    max={form.watch('discountType') === 'percentage' ? 100 : undefined}
+                    max={discountType === 'percentage' ? 100 : undefined}
+                    className="h-10"
                     {...field}
                   />
                 </FormControl>
-                <FormDescription>
-                  {form.watch('discountType') === 'percentage' 
+                <FormDescription className="text-xs">
+                  {discountType === 'percentage' 
                     ? 'Enter a percentage (1-100%)' 
                     : 'Enter an amount in £'}
                 </FormDescription>
@@ -185,37 +198,36 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
               </FormItem>
             )}
           />
-        
+          
           <FormField
             control={form.control}
             name="minOrderAmount"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>Minimum Order Amount (£)</FormLabel>
+              <FormItem className="col-span-1">
+                <FormLabel className="text-sm font-medium">Minimum Order Amount (£)</FormLabel>
                 <FormControl>
-                  <Input type="number" step="0.01" min="0" {...field} />
+                  <Input type="number" step="0.01" min="0" className="h-10" {...field} />
                 </FormControl>
-                <FormDescription>
+                <FormDescription className="text-xs">
                   Minimum purchase required
                 </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
           />
-        </div>
-
-        <div className="grid grid-cols-3 gap-4">
+          
           <FormField
             control={form.control}
             name="maxUsage"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>Maximum Usage Count</FormLabel>
+              <FormItem className="col-span-1">
+                <FormLabel className="text-sm font-medium">Maximum Usage Count</FormLabel>
                 <FormControl>
                   <Input 
                     type="number" 
                     min="1"
                     placeholder="Unlimited" 
+                    className="h-10"
                     {...field}
                     value={field.value === null ? '' : field.value}
                     onChange={(e) => {
@@ -224,22 +236,24 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
                     }}
                   />
                 </FormControl>
-                <FormDescription>
+                <FormDescription className="text-xs">
                   Leave empty for unlimited usage
                 </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
           />
+        </div>
 
+        <div className="grid grid-cols-2 gap-6">
           <FormField
             control={form.control}
             name="startDate"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Start Date</FormLabel>
+                <FormLabel className="text-sm font-medium">Start Date</FormLabel>
                 <FormControl>
-                  <Input type="date" {...field} />
+                  <Input type="date" className="h-10" {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -251,10 +265,11 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
             name="endDate"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>End Date (Optional)</FormLabel>
+                <FormLabel className="text-sm font-medium">End Date (Optional)</FormLabel>
                 <FormControl>
                   <Input 
                     type="date" 
+                    className="h-10"
                     {...field}
                     value={field.value || ''}
                     onChange={(e) => {
@@ -263,7 +278,7 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
                     }}
                   />
                 </FormControl>
-                <FormDescription>
+                <FormDescription className="text-xs">
                   Leave empty for no expiration
                 </FormDescription>
                 <FormMessage />