venues and ui changes

components/EventInfoQuickView.tsx

@@ -1,15 +1,22 @@
 import Link from 'next/link'
 import React from 'react'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './ui/card'
 
-export default function EventInfoQuickView(props: EventProps) {
+export default function EventInfoQuickView(props: QucikEventProps) {
     return (
-        <Link href={`/events/${props.id}`} >
-            <div className='hover:cursor-pointer rounded-lg p-2 bg-brand-primary-900 hover:bg-brand-primary-800 transition-colors duration-200'>
-                <h3 className='text-md font-semibold'>{props.name}</h3>
-                <p>Date: {props.date ? props.date.toDateString() : 'null'}</p>
-                <p>Location: {props.location ? props.location.name : 'null'}</p>
-                <p className='text-xs mt-2'>Created By: {props.creator.username}</p>                                    
-            </div>
+        <Link href={`/events/${props.id}`}>
+            <Card className='bg-brand-primary-900 hover:bg-brand-primary-800 transition-colors duration-200'>
+                <CardHeader>
+                    <CardTitle>{props.name}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <p>Date: {props.date ? props.date.toDateString() : 'null'}</p>
+                    <p>Location: {props.venue ? props.venue.name : 'null'}</p>
+                </CardContent>
+                <CardFooter>
+                    <p className='text-xs mt-2'>Created By: {props.creator.username}</p>
+                </CardFooter>
+            </Card>
         </Link>
     )
 }

components/app-sidebar.tsx

@@ -48,7 +48,7 @@ const data = {
     },
     {
       title: "Locations",
-      url: "/locations",
+      url: "/venues",
       icon: IconBuildingArch,
     },
   ],

components/dashboard/DashboardEvents.tsx

@@ -0,0 +1,51 @@
+import React 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'
+
+interface EventsProps {
+    events: {
+        id: string
+        name: string
+        date?: Date | null
+        creator: {
+            id: string,
+            username: string
+        },
+        venue?: {
+            name: string
+        } | null
+    }[]
+}
+
+export default function DashboardEvents({events}: EventsProps) {
+    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>
+    )
+}

components/dashboard/DashboardGuestBook.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
+import Link from 'next/link'
+import AddFirstGuestBookEntryClient from '../AddFirstGuestBookEntryClient'
+import GuestBookQuickView from '../GuestBookQuickView'
+
+interface GuestBookEntryProps {
+    guestBookEntries: {
+        id: string
+        fName: string
+        lName: string
+        email?: string | null
+        phone?: string | null
+        address?: string | null
+        notes?: string | null
+        side: string
+        congratulated?: boolean | null
+        createdAt: Date
+    }[]
+}
+
+export default function DashboardGuestBook(guestBookEntries: GuestBookEntryProps) {
+    return (
+        <Card className='md:col-start-6 col-span-2 row-span-2'>
+            <CardHeader>
+                <div className='flex justify-between items-center'>
+                    <CardTitle>
+                        Guest Book
+                    </CardTitle>
+                    <Link href={'/guest-book'}>View All</Link>
+                </div>
+            </CardHeader>
+            <CardContent className='space-y-2'>
+                {!guestBookEntries.guestBookEntries.length && <AddFirstGuestBookEntryClient />}
+                {guestBookEntries.guestBookEntries.map(entry => (
+                    <GuestBookQuickView key={entry.id} {...entry} />
+                ))}
+            </CardContent>
+        </Card>
+    )
+}

components/dialogs/DialogWrapper.tsx

@@ -0,0 +1,30 @@
+'use client'
+import React from 'react'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog'
+
+export default function DialogWrapper({
+    title,
+    description,
+    form,
+    open,
+    onOpenChange,
+
+}: {
+    title: string,
+    description?: string,
+    form: React.ReactNode,
+    open: boolean,
+    onOpenChange: (open: boolean) => void
+}) {
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
+                <DialogHeader>
+                    <DialogTitle>{title}</DialogTitle>
+                    <DialogDescription>{description}</DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4">{form}</div>
+            </DialogContent>            
+        </Dialog>
+    )
+}

components/events/EventDashboard.tsx

@@ -13,7 +13,7 @@ interface Props {
 export default function EventDashboard({ event }: Props) {
     const [todos, setTodos] = useState(event.todos)
 
-     async function refreshTodos() {
+    async function refreshTodos() {
         try {
             const data = await fetchEventTodos(event.id)
             setTodos(data)
@@ -22,8 +22,6 @@ export default function EventDashboard({ event }: Props) {
         }
     }
 
-    console.log(todos)
-
     return (
         <div className='grid grid-cols-1 lg:grid-cols-3 gap-6'>
             <EventInfo event={event} />

components/events/EventInfo.tsx

@@ -4,6 +4,8 @@ import { Card, CardContent } from '../ui/card'
 import { getDaysUntilEvent } from '@/lib/helper/getDaysUntilEvent'
 import { Button } from '../ui/button'
 import EventNotesEditor from '../EventNotesEditor'
+import DialogWrapper from '../dialogs/DialogWrapper'
+import EditEventForm from '../forms/EditEventForm'
 
 interface EventProps {
     event: EventData
@@ -11,6 +13,7 @@ interface EventProps {
 
 export default function EventInfo({ event }: EventProps) {
     const [daysLeft, setDaysLeft] = useState<number | null>(null)
+    const [isDialogOpen, setIsDialogOpen] = useState(false)
 
     useEffect(() => {
         if (event.date) {
@@ -19,6 +22,19 @@ export default function EventInfo({ event }: EventProps) {
         }
     }, [event.date])
 
+    async function refreshEventData(eventId: string) {
+        try {
+            const res = await fetch(`/api/events/${eventId}/fetch`)
+            if (!res.ok) throw new Error('Failed to fetch event data')
+            const data = await res.json()
+            return data
+        } catch (err) {
+            console.error('Failed to refresh event data:', err)
+            return null
+        }
+    }
+
+
     return (
         <div className='lg:col-span-1 space-y-4'>
             <Card className='py-0'>
@@ -26,13 +42,18 @@ export default function EventInfo({ event }: EventProps) {
                     <h2 className='text-xl font-semibold'>Event Info</h2>
                     <p className='text-sm mt-2'>Name: {event.name}</p>
                     <p className='text-sm'>Date: {event.date ? event.date.toDateString() : 'Upcoming'}</p>
-                    <p className='text-sm'>Location: {event.location ? event.location.name : 'No location yet'}</p>
+                    <p className='text-sm'>Venue: {event.venue ? event.venue.name : 'No location yet'}</p>
                     {daysLeft !== null && (
                         <p className='text-sm mt-2 font-medium text-brand-primary-400'>
                             {daysLeft} days until this event!
                         </p>
                     )}
-                    <Button className="mt-4 w-full bg-brand-primary-600 hover:bg-brand-primary-400">Edit Event</Button>
+                    <Button 
+                        className="mt-4 w-full bg-brand-primary-600 hover:bg-brand-primary-400"
+                        onClick={() => setIsDialogOpen(true)}
+                    >
+                        Edit Event
+                    </Button>
                 </CardContent>
             </Card>
             <Card className='py-0'>
@@ -45,6 +66,20 @@ export default function EventInfo({ event }: EventProps) {
                     />
                 </CardContent>
             </Card>
+
+            <DialogWrapper
+                open={isDialogOpen}
+                onOpenChange={setIsDialogOpen}
+                title="Edit Event"
+                description="Update the event details"
+                form={
+                    <EditEventForm event={event} onSuccess={async () => {
+                            await refreshEventData(event.id)
+                            setIsDialogOpen(false)
+                        }} 
+                    />
+                }
+            />
         </div>
     )
 }

components/forms/CreateVenueForm.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Input } from '../ui/input'
+import { Button } from '../ui/button'
+import { Label } from '../ui/label'
+import { toast } from 'sonner'
+
+interface CreateVenueFormProps {
+    onSuccess?: () => void
+}
+
+export default function CreateVenueForm({ onSuccess }: CreateVenueFormProps) {
+    const [formData, setFormData] = useState({
+        name: '',
+        address: '',
+        city: '',
+        state: '',
+        postalCode: '',
+        country: 'United States',
+        phone: '',
+        email: ''
+    })
+
+    const [loading, setLoading] = useState(false)
+
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+        const { name, value } = e.target
+        setFormData(prev => ({ ...prev, [name]: value }))
+    }
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault()
+
+        if (!formData.name || !formData.address || !formData.city || !formData.state || !formData.postalCode) {
+            toast.error('Please fill in all required fields')
+            return
+        }
+
+        setLoading(true)
+            try {
+            const res = await fetch('/api/venues/create', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(formData)
+            })
+
+            if (!res.ok) throw new Error('Failed to create venue')
+
+            toast.success('Venue created!')
+            setFormData({
+                name: '',
+                address: '',
+                city: '',
+                state: '',
+                postalCode: '',
+                country: 'United States',
+                phone: '',
+                email: ''
+            })
+
+            if (onSuccess) onSuccess()
+        } catch (err) {
+            console.error(err)
+            toast.error('Something went wrong')
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className="space-y-4">
+            {[
+                { label: 'Name', name: 'name', required: true },
+                { label: 'Address', name: 'address', required: true },
+                { label: 'City', name: 'city', required: true },
+                { label: 'State', name: 'state', required: true },
+                { label: 'Postal Code', name: 'postalCode', required: true },
+                { label: 'Country', name: 'country', required: false },
+                { label: 'Phone', name: 'phone', required: false },
+                { label: 'Email', name: 'email', required: false }
+            ].map(field => (
+                <div key={field.name} className="space-y-1">
+                    <Label htmlFor={field.name}>
+                        {field.label}{field.required && ' *'}
+                    </Label>
+                    <Input
+                        id={field.name}
+                        name={field.name}
+                        value={formData[field.name as keyof typeof formData]}
+                        onChange={handleChange}
+                        required={field.required}
+                    />
+                </div>
+            ))}
+            {/* <div className="space-y-1">
+                <Label htmlFor='name'>
+                    Name *
+                </Label>
+                <Input
+                    id='name'
+                    name='name'
+                    value={formData[field.name as keyof typeof formData]}
+                    onChange={handleChange}
+                    required={field.required}
+                />
+            </div> */}
+            <Button type="submit" disabled={loading}>
+                {loading ? 'Creating...' : 'Create Venue'}
+            </Button>
+        </form>
+    )
+}

components/forms/EditEventForm.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Button } from '../ui/button'
+import { toast } from 'sonner'
+
+interface EditEventFormProps {
+    event: EventData
+    onSuccess?: () => void
+}
+
+export default function EditEventForm({ event, onSuccess }: EditEventFormProps) {
+    const [formData, setFormData] = useState({
+        name: event.name,
+        date: event.date?.toISOString().substring(0, 10) || '',
+        venueId: event.venue?.id || ''
+    })
+
+    const [venues, setVenues] = useState<{ id: string; name: string }[]>([])
+    const [loading, setLoading] = 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()
+        setLoading(true)
+
+        try {
+            const res = await fetch(`/api/events/${event.id}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(formData)
+            })
+
+            if (!res.ok) throw new Error('Failed to update event')
+            toast.success('Event updated!')
+
+            if (onSuccess) onSuccess()
+        } catch (err) {
+            console.error(err)
+            toast.error('Something went wrong')
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <form onSubmit={handleSubmit} 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} />
+            </div>
+            <div>
+                <Label htmlFor="venueId">Venue</Label>
+                <select
+                    id="venueId"
+                    name="venueId"
+                    className="input input-bordered w-full"
+                    value={formData.venueId}
+                    onChange={handleChange}
+                    >
+                    <option value="">No venue</option>
+                    {venues.map(v => (
+                        <option key={v.id} value={v.id}>
+                        {v.name}
+                        </option>
+                    ))}
+                </select>
+            </div>
+            <Button type="submit" disabled={loading}>
+                {loading ? 'Saving...' : 'Save Changes'}
+            </Button>
+        </form>
+    )
+}

components/tables/LocationsTable.tsx

@@ -1,65 +0,0 @@
-'use client'
-
-import { ColumnDef } from '@tanstack/react-table'
-import { DataTable } from './DataTable'
-
-interface LocationRow {
-  id: string
-  name: string
-  address: string
-  city: string
-  state: string
-  postalCode: string
-  country: string
-  phone?: string | null
-  email?: string | null
-}
-
-interface Props {
-  eventLocations: LocationRow[]
-}
-
-const columns: ColumnDef<LocationRow>[] = [
-  {
-    accessorKey: 'name',
-    header: 'Name'
-  },
-  {
-    accessorKey: 'address',
-    header: 'Address'
-  },
-  {
-    accessorKey: 'city',
-    header: 'City'
-  },
-  {
-    accessorKey: 'state',
-    header: 'State'
-  },
-  {
-    accessorKey: 'postalCode',
-    header: 'Postal Code'
-  },
-  {
-    accessorKey: 'country',
-    header: 'Country'
-  },
-  {
-    accessorKey: 'phone',
-    header: 'Phone',
-    cell: ({ row }) => row.original.phone || '—'
-  },
-  {
-    accessorKey: 'email',
-    header: 'Email',
-    cell: ({ row }) => row.original.email || '—'
-  }
-]
-
-export default function LocationsTable({ eventLocations }: Props) {
-  return (
-    <div className="mt-4">
-      <DataTable columns={columns} data={eventLocations} />
-    </div>
-  )
-}

components/tables/VenuesTable.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import { ColumnDef } from '@tanstack/react-table'
+import { DataTable } from './DataTable'
+import { Button } from '../ui/button'
+import DialogWrapper from '../dialogs/DialogWrapper'
+import CreateVenueForm from '../forms/CreateVenueForm'
+import { useState } from 'react'
+import { fetchVenuesClient } from '@/lib/helper/fetchVenues'
+
+interface LocationRow {
+  id: string
+  name: string
+  address: string
+  city: string
+  state: string
+  postalCode: string
+  country: string
+  phone?: string | null
+  email?: string | null
+}
+
+interface Props {
+  eventLocations: LocationRow[]
+}
+
+const columns: ColumnDef<LocationRow>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name'
+  },
+  {
+    accessorKey: 'address',
+    header: 'Address'
+  },
+  {
+    accessorKey: 'city',
+    header: 'City'
+  },
+  {
+    accessorKey: 'state',
+    header: 'State'
+  },
+  {
+    accessorKey: 'postalCode',
+    header: 'Postal Code'
+  },
+  {
+    accessorKey: 'country',
+    header: 'Country'
+  },
+  {
+    accessorKey: 'phone',
+    header: 'Phone',
+    cell: ({ row }) => row.original.phone || '—'
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    cell: ({ row }) => row.original.email || '—'
+  }
+]
+
+export default function VenuesTable({ eventLocations }: Props) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [venues, setVenues] = useState<LocationRow[]>(eventLocations)
+
+  async function refreshVenues() {
+    try {
+      const updated = await fetchVenuesClient()
+      setVenues(updated)
+    } catch (err) {
+      console.error('Failed to refresh venues:', err)
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <Button 
+        variant={'outline'}
+        onClick={() => setIsDialogOpen(true)}
+      >
+        Create Venue
+      </Button>
+      <DataTable columns={columns} data={venues} />
+      <DialogWrapper
+        title="Create a New Venue"
+        description="Enter the Venue information below"
+        open={isDialogOpen}
+        onOpenChange={setIsDialogOpen}
+        form={<CreateVenueForm onSuccess={async () => {
+            await refreshVenues()
+            setIsDialogOpen(false)
+          }} 
+        />}
+      />
+    </div>
+  )
+}