SuperAdmin changes

src/components/users/user-form-dialog.tsx

@@ -31,30 +31,37 @@ import {
 } from "@/components/ui/select"
 import { Switch } from "@/components/ui/switch"
 import { User } from "@/types"
+import { toast } from "sonner"
 
-const userFormSchema = z.object({
+const createSchema = z.object({
   name: z.string().min(1, "Name is required"),
   email: z.string().email("Invalid email address"),
+  password: z.string().min(6, "Password must be at least 6 characters"),
   role: z.string().min(1, "Role is required"),
   active: z.boolean(),
 })
 
-type UserFormValues = z.infer<typeof userFormSchema>
+type UserFormValues = z.infer<typeof createSchema>
+
+
 
 interface UserFormDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   user?: User | null
+  onUserCreated?: () => void
 }
 
-export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps) {
+export function UserFormDialog({ open, onOpenChange, user, onUserCreated }: UserFormDialogProps) {
   const isEditing = !!user
+  const [submitting, setSubmitting] = useState(false)
 
   const form = useForm<UserFormValues>({
-    resolver: zodResolver(userFormSchema),
+    resolver: zodResolver(createSchema),
     defaultValues: {
       name: "",
       email: "",
+      password: "",
       role: "sales_user",
       active: true,
     },
@@ -65,17 +72,36 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
       form.reset({
         name: user.name,
         email: user.email,
+        password: "",
         role: user.role,
         active: user.active,
       })
     } else {
-      form.reset({ name: "", email: "", role: "sales_user", active: true })
+      form.reset({ name: "", email: "", password: "", role: "sales_user", active: true })
     }
   }, [user, form])
 
-  function onSubmit(values: UserFormValues) {
-    console.log(values)
-    onOpenChange(false)
+  async function onSubmit(values: UserFormValues) {
+    setSubmitting(true)
+    try {
+      const res = await fetch("/api/users", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(values),
+      })
+      const data = await res.json()
+      if (!res.ok) {
+        toast.error(data.error || "Failed to create user")
+        return
+      }
+      toast.success("User created")
+      onOpenChange(false)
+      onUserCreated?.()
+    } catch {
+      toast.error("Failed to create user")
+    } finally {
+      setSubmitting(false)
+    }
   }
 
   return (
@@ -86,7 +112,7 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
           <DialogDescription>
             {isEditing
               ? "Update the user's information and permissions."
-              : "Create a new user account."}
+              : "Create a new user account that can sign in."}
           </DialogDescription>
         </DialogHeader>
         <Form {...form}>
@@ -111,7 +137,7 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
                 <FormItem>
                   <FormLabel>Email</FormLabel>
                   <FormControl>
-                    <Input placeholder="john@coastalit.com" type="email" {...field} />
+                    <Input placeholder="john@coastit.co.za" type="email" {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -140,20 +166,19 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
                 </FormItem>
               )}
             />
-            {!isEditing && (
-              <FormField
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Password</FormLabel>
-                    <FormControl>
-                      <Input type="password" placeholder="Enter password" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <Input type="password" placeholder={isEditing ? "Leave blank to keep current" : "Enter password"} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
             <FormField
               control={form.control}
               name="active"
@@ -178,8 +203,8 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
               <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
                 Cancel
               </Button>
-              <Button type="submit">
-                {isEditing ? "Save Changes" : "Create User"}
+              <Button type="submit" disabled={submitting}>
+                {submitting ? "Saving..." : isEditing ? "Save Changes" : "Create User"}
               </Button>
             </DialogFooter>
           </form>