From 8ea692eda21b7d7bb988e073e5663519ab5999ae Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Sat, 8 Mar 2025 05:14:50 +0000
Subject: [PATCH] cluster fuck

---
 .../promotions/EditPromotionForm.tsx          | 116 ++++++++++--------
 .../dashboard/promotions/NewPromotionForm.tsx | 113 +++++++++--------
 .../dashboard/promotions/PromotionsList.tsx   |  32 ++---
 3 files changed, 144 insertions(+), 117 deletions(-)

diff --git a/components/dashboard/promotions/EditPromotionForm.tsx b/components/dashboard/promotions/EditPromotionForm.tsx
index 83f0558..01dbfa1 100644
--- a/components/dashboard/promotions/EditPromotionForm.tsx
+++ b/components/dashboard/promotions/EditPromotionForm.tsx
@@ -16,13 +16,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { 
-  Select, 
-  SelectContent, 
-  SelectItem, 
-  SelectTrigger, 
-  SelectValue 
-} from '@/components/ui/select';
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { toast } from '@/components/ui/use-toast';
@@ -63,6 +57,7 @@ interface EditPromotionFormProps {
 
 export default function EditPromotionForm({ promotion, onSuccess, onCancel }: EditPromotionFormProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [discountType, setDiscountType] = useState<'percentage' | 'fixed'>(promotion.discountType);
 
   // Format dates from ISO to YYYY-MM-DD for input elements
   const formatDateForInput = (dateString: string | null) => {
@@ -86,6 +81,16 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
     },
   });
 
+  // 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);
@@ -112,22 +117,23 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
 
   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 />
@@ -136,33 +142,32 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
           />
         </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="edit-percentage" />
+                      <label htmlFor="edit-percentage" className="cursor-pointer">Percentage (%)</label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="fixed" id="edit-fixed" />
+                      <label htmlFor="edit-fixed" className="cursor-pointer">Fixed Amount (£)</label>
+                    </div>
+                  </RadioGroup>
+                </FormControl>
                 <FormMessage />
               </FormItem>
             )}
@@ -172,19 +177,20 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
             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>
@@ -197,32 +203,31 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
             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) => {
@@ -231,22 +236,24 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
                     }}
                   />
                 </FormControl>
-                <FormDescription>
+                <FormDescription className="text-xs">
                   Leave empty for unlimited usage (currently used: {promotion.usageCount} times)
                 </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>
@@ -258,10 +265,11 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
             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) => {
@@ -270,7 +278,7 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
                     }}
                   />
                 </FormControl>
-                <FormDescription>
+                <FormDescription className="text-xs">
                   Leave empty for no expiration
                 </FormDescription>
                 <FormMessage />
diff --git a/components/dashboard/promotions/NewPromotionForm.tsx b/components/dashboard/promotions/NewPromotionForm.tsx
index 6fb7d63..ea5dda8 100644
--- a/components/dashboard/promotions/NewPromotionForm.tsx
+++ b/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 />
diff --git a/components/dashboard/promotions/PromotionsList.tsx b/components/dashboard/promotions/PromotionsList.tsx
index d2399fa..426684c 100644
--- a/components/dashboard/promotions/PromotionsList.tsx
+++ b/components/dashboard/promotions/PromotionsList.tsx
@@ -224,33 +224,37 @@ export default function PromotionsList() {
 
       {/* New Promotion Dialog */}
       <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>Create New Promotion</DialogTitle>
+        <DialogContent className="max-w-4xl">
+          <DialogHeader className="pb-4">
+            <DialogTitle className="text-xl">Create New Promotion</DialogTitle>
             <DialogDescription>
               Add a promotional code to offer discounts to your customers.
             </DialogDescription>
           </DialogHeader>
-          <NewPromotionForm onSuccess={handleCreateComplete} onCancel={() => setShowNewDialog(false)} />
+          <div className="max-h-[70vh] overflow-y-auto pr-1">
+            <NewPromotionForm onSuccess={handleCreateComplete} onCancel={() => setShowNewDialog(false)} />
+          </div>
         </DialogContent>
       </Dialog>
 
       {/* Edit Promotion Dialog */}
       <Dialog open={!!editingPromotion} onOpenChange={() => editingPromotion && handleCloseEditDialog()}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>Edit Promotion</DialogTitle>
+        <DialogContent className="max-w-4xl">
+          <DialogHeader className="pb-4">
+            <DialogTitle className="text-xl">Edit Promotion</DialogTitle>
             <DialogDescription>
               Modify this promotional code's details.
             </DialogDescription>
           </DialogHeader>
-          {editingPromotion && (
-            <EditPromotionForm 
-              promotion={editingPromotion} 
-              onSuccess={handleEditComplete} 
-              onCancel={handleCloseEditDialog} 
-            />
-          )}
+          <div className="max-h-[70vh] overflow-y-auto pr-1">
+            {editingPromotion && (
+              <EditPromotionForm 
+                promotion={editingPromotion} 
+                onSuccess={handleEditComplete} 
+                onCancel={handleCloseEditDialog} 
+              />
+            )}
+          </div>
         </DialogContent>
       </Dialog>