user creation and invites

app/(auth)/admin/create-user/page.tsx

@@ -0,0 +1,31 @@
+'use client'
+import { useState } from 'react'
+
+export default function CreateUserPage() {
+    const [form, setForm] = useState({ username: '', password: '', role: 'GUEST' })
+    const [success, setSuccess] = useState(false)
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault()
+        await fetch('/api/admin/create-user', {
+            method: 'POST',
+            body: JSON.stringify(form),
+        })
+        setSuccess(true)
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className="max-w-sm mx-auto mt-10 space-y-4">
+            <h1 className="text-xl font-bold">Create Local User</h1>
+            <input placeholder="Username" onChange={e => setForm({ ...form, username: e.target.value })} />
+            <input placeholder="Password" type="password" onChange={e => setForm({ ...form, password: e.target.value })} />
+            <select onChange={e => setForm({ ...form, role: e.target.value })}>
+                <option value="COUPLE">COUPLE</option>
+                <option value="PLANNER">PLANNER</option>
+                <option value="GUEST">GUEST</option>
+            </select>
+            <button className="btn">Create</button>
+            {success && <p className="text-green-600">User created</p>}
+        </form>
+    )
+}

app/(auth)/dashboard/page.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 
 export default async function DashboardPage() {
     const events = await queries.fetchEvents()
-    console.log(events)
+    // console.log(events)
 
     return (
         <div>
@@ -12,15 +12,17 @@ export default async function DashboardPage() {
             <div className='border rounded-lg max-w-6xl mx-auto p-6 space-y-4'>
                 <h2 className='text-xl font-bold'>Your Events</h2>
                 {events.map((item) => (
-                    <div key={item.id}>
-                        <p>ID: {item.id}</p>
-                        <p>Name: {item.name}</p>
-                        <p>Date: {item.date ? item.date.toISOString() : 'null'}</p>
-                        <p>Location: {item.location ? item.location : 'null'}</p>
-                        <p>Creator ID:{item.creatorId}</p>
-                        <p>Created At:{item.createdAt.toISOString()}</p>
-                        
-                    </div>
+                    <Link key={item.id} href={`/events/${item.id}`} >
+                        <div className='hover:cursor-pointer border rounded-xl p-2'>
+                            <p>ID: {item.id}</p>
+                            <p>Name: <strong>{item.name}</strong></p>
+                            <p>Date: {item.date ? item.date.toISOString() : 'null'}</p>
+                            <p>Location: {item.location ? item.location : 'null'}</p>
+                            <p>Creator ID:{item.creatorId}</p>
+                            <p>Created At:{item.createdAt.toISOString()}</p>
+                            
+                        </div>
+                    </Link>
                 ))}
                 <Link
                     href={'/events'}

app/(auth)/events/[eventId]/page.tsx

@@ -1,9 +1,15 @@
+import { queries } from '@/lib/queries'
 import React from 'react'
 
-export default function SingleEventPage() {
+export default async function SingleEventPage({ params }: { params: { eventId: string }}) {
+    console.log(params)
+    const data = await queries.singleEvent(params.eventId)
+    
     return (
         <div>
-            SINGLE EVENT PAGE
+            <h1 className='text-4xl font-bold'>
+                {data?.name}
+            </h1>
         </div>
     )
 }

app/(auth)/events/page.tsx

@@ -10,10 +10,32 @@ export default async function EventsPage() {
         <div>
             Events
             <div>
-                {allEvents.length == 0 && (
+                {allEvents.length == 0 ? (
                     <>
                         You don't have any events yet. <Link href={'/events/create'} className='underline'>Create One!</Link>
                     </>
+                ) : (
+                    <table className='table-auto w-full'>
+                        <thead>
+                            <tr>
+                                <th>Event Name</th>
+                                <th>Event Date</th>
+                                <th>Created by</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {allEvents.map((item) => (
+                                <tr 
+                                    key={item.id}
+                                    className='text-center'
+                                >
+                                    <td className=''><Link href={`/events/${item.id}`}>{item.name}</Link></td>
+                                    <td className=''>{item.date?.toDateString()}</td>
+                                    <td className=''>{item.creatorId}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
                 )}
             </div>
         </div>

app/(auth)/user/[username]/page.tsx

@@ -0,0 +1,35 @@
+import SendInviteForm from '@/components/SendInviteForm';
+import { prisma } from '@/lib/prisma';
+import { notFound } from 'next/navigation';
+import React from 'react'
+
+export default async function UserPage({ params }: { params: { username: string } }) {
+    const raw = params.username
+    const username = raw.startsWith('@') ? raw.slice(1) : raw
+    
+    const user = await prisma.user.findUnique({
+    where: { username },
+    select: {
+      id: true,
+      email: true,
+      name: true,
+      role: true,
+      createdAt: true,
+    },
+  })
+
+  if (!user) notFound()
+
+  return (
+    <>
+      <div className="max-w-2xl mx-auto py-10">
+        <h1 className="text-3xl font-bold mb-2">@{username}</h1>
+        <p className="text-gray-600">Email: {user.email}</p>
+        <p className="text-gray-600">Role: {user.role}</p>
+        <p className="text-gray-500 text-sm">Joined: {user.createdAt.toDateString()}</p>
+      </div>
+      <h2 className='text-xl font-bold'>Invite More People</h2>
+      <SendInviteForm />
+    </>
+  )
+}