creavte venue inside create event

components/dashboard/DashboardEvents.tsx

@@ -1,8 +1,11 @@
-import React from 'react'
+'use client'
+import React, { useState } from 'react'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '../ui/card'
 import { Button } from '../ui/button'
 import Link from 'next/link'
 import EventInfoQuickView from '../EventInfoQuickView'
+import DialogWrapper from '../dialogs/DialogWrapper'
+import CreateEventForm from '../forms/CreateEventForm'
 
 interface EventsProps {
     events: {
@@ -20,32 +23,50 @@ interface EventsProps {
 }
 
 export default function DashboardEvents({events}: EventsProps) {
+    const [isDialogOpen, setIsDialogOpen] = useState(false)
+
     return (
-        <Card className='md:col-span-5 pb-3'>
-            <CardHeader>
-                <div className='flex justify-between items-center'>
-                    <CardTitle>
-                        Your Events
-                    </CardTitle>
-                    <Button
-                        className='bg-brand-primary-600 hover:bg-brand-primary-400'
-                    >
-                        Create Event
-                    </Button>
-                </div>
-            </CardHeader>
-            <CardContent>
-                <div className='grid md:grid-cols-3'>
-                    {events.map((item) => (
-                        <EventInfoQuickView key={item.id} {...item} />
-                    ))}
-                </div>
-            </CardContent>
-            <CardFooter>
-                <div className='text-right w-full text-sm'>
-                    <Link href={'/events'}>View all</Link>
-                </div>
-            </CardFooter>
-        </Card>
+        <>
+            <Card className='md:col-span-5 pb-3'>
+                <CardHeader>
+                    <div className='flex justify-between items-center'>
+                        <CardTitle>
+                            Your Events
+                        </CardTitle>
+                        <Button
+                            className='bg-brand-primary-600 hover:bg-brand-primary-400'
+                            onClick={() => setIsDialogOpen(true)}
+                        >
+                            Create Event
+                        </Button>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <div className='grid md:grid-cols-3 gap-3'>
+                        {events.map((item) => (
+                            <EventInfoQuickView key={item.id} {...item} />
+                        ))}
+                    </div>
+                </CardContent>
+                <CardFooter>
+                    <div className='text-right w-full text-sm'>
+                        <Link href={'/events'}>View all</Link>
+                    </div>
+                </CardFooter>
+            </Card>
+            <DialogWrapper
+                open={isDialogOpen}
+                onOpenChange={setIsDialogOpen}
+                title="Create Event"
+                description="Add new event"
+                form={
+                    <CreateEventForm onSuccess={async () => {
+                            // await refreshEventData(event.id)
+                            setIsDialogOpen(false)
+                        }} 
+                    />
+                }
+            />
+        </>
     )
 }

components/dialogs/DialogWrapper.tsx

@@ -18,7 +18,7 @@ export default function DialogWrapper({
 }) {
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
+            <DialogContent onOpenAutoFocus={(e) => e.preventDefault()} className="max-h-[90vh] overflow-y-auto w-full max-w-3xl">
                 <DialogHeader>
                     <DialogTitle>{title}</DialogTitle>
                     <DialogDescription>{description}</DialogDescription>

components/forms/CreateEventForm.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import { Label } from '../ui/label'
+import { Input } from '../ui/input'
+import { Button } from '../ui/button'
+import CreateVenueForm from './CreateVenueForm'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog'
+
+interface CreateEventFormProps {
+    onSuccess?: () => void
+}
+
+export default function CreateEventForm({ onSuccess }: CreateEventFormProps) {
+    const [formData, setFormData] = useState({
+        name: '',
+        date: '',
+        venueId: '' 
+    })
+
+    const [venues, setVenues] = useState<{ id: string; name: string }[]>([])
+    // const [showVenueForm, setShowVenueForm] = useState(false)
+    const [venueDialogOpen, setVenueDialogOpen] = useState(false)
+
+    useEffect(() => {
+        async function fetchVenues() {
+            const res = await fetch('/api/venues/fetch')
+            const data = await res.json()
+            setVenues(data)
+        }
+        fetchVenues()
+    }, [])
+
+    function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
+        const { name, value } = e.target
+        setFormData(prev => ({ ...prev, [name]: value }))
+    }
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault()
+        if (!formData.name || !formData.date) {
+            toast.error('Event Name and Date are required')
+            return
+        }
+
+        try {
+            const res = await fetch('/api/events/create', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                name: formData.name,
+                date: formData.date,
+                venueId: formData.venueId || null
+                })
+            })
+
+            if (!res.ok) throw new Error('Failed to create event')
+
+            toast.success('Event created!')
+            if (onSuccess) onSuccess()
+        } catch (err) {
+            toast.error('Something went wrong')
+            console.error(err)
+        }
+    }
+
+    return (
+        <>
+            <form onSubmit={handleSubmit} className="space-y-6">
+
+                {/* Event Details */}
+                <div className="space-y-4">
+                    <div>
+                        <Label htmlFor="name">Event Name *</Label>
+                        <Input
+                            id="name"
+                            name="name"
+                            value={formData.name}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+
+                    <div>
+                        <Label htmlFor="date">Event Date *</Label>
+                        <Input
+                            id="date"
+                            name="date"
+                            type="date"
+                            value={formData.date}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                </div>
+
+                {/* Venue Selection */}
+                <div className="space-y-2">
+                    <Label htmlFor="venueId">Choose a Venue</Label>
+                    <select
+                        name="venueId"
+                        id="venueId"
+                        value={formData.venueId}
+                        onChange={handleChange}
+                        className="input input-bordered w-full"
+                    >
+                        <option value="">— Select a venue —</option>
+                        {venues.map(v => (
+                            <option key={v.id} value={v.id}>
+                            {v.name}
+                            </option>
+                        ))}
+                    </select>
+                    <Button type="button" variant="outline" onClick={() => setVenueDialogOpen(true)}>
+                        Or create new venue
+                    </Button>
+                </div>
+
+                {/* Submit */}
+                <Button type="submit" className="w-full">
+                    Create Event
+                </Button>
+            </form>
+            <Dialog open={venueDialogOpen} onOpenChange={setVenueDialogOpen}>
+                <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
+                    <DialogHeader>
+                    <DialogTitle>Create New Venue</DialogTitle>
+                    <DialogDescription>Fill in venue details</DialogDescription>
+                    </DialogHeader>
+                    <CreateVenueForm
+                        onSuccess={async (newVenueId) => {
+                            // 1. Close the dialog
+                            setVenueDialogOpen(false)
+
+                            // 2. Refresh venues list
+                            const res = await fetch('/api/venues/fetch')
+                            const updated = await res.json()
+                            setVenues(updated)
+
+                            // 3. Update formData with new venue
+                            setFormData(prev => ({ 
+                                ...prev, 
+                                venueId: newVenueId || ''
+                            }))
+                        }}
+                    />
+                </DialogContent>
+            </Dialog>
+
+        </>
+    )
+}

components/forms/CreateVenueForm.tsx

@@ -7,7 +7,7 @@ import { Label } from '../ui/label'
 import { toast } from 'sonner'
 
 interface CreateVenueFormProps {
-    onSuccess?: () => void
+    onSuccess?: (newVenueId?: string) => void
 }
 
 export default function CreateVenueForm({ onSuccess }: CreateVenueFormProps) {
@@ -38,7 +38,7 @@ export default function CreateVenueForm({ onSuccess }: CreateVenueFormProps) {
         }
 
         setLoading(true)
-            try {
+        try {
             const res = await fetch('/api/venues/create', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -47,6 +47,9 @@ export default function CreateVenueForm({ onSuccess }: CreateVenueFormProps) {
 
             if (!res.ok) throw new Error('Failed to create venue')
 
+            const data = await res.json()
+            const newVenueId = data?.id
+
             toast.success('Venue created!')
             setFormData({
                 name: '',
@@ -59,7 +62,7 @@ export default function CreateVenueForm({ onSuccess }: CreateVenueFormProps) {
                 email: ''
             })
 
-            if (onSuccess) onSuccess()
+            if (onSuccess) onSuccess(newVenueId)
         } catch (err) {
             console.error(err)
             toast.error('Something went wrong')