styling friday

app/(auth)/dashboard/page.tsx

@@ -1,15 +1,68 @@
+import EventInfoQuickView from '@/components/EventInfoQuickView'
+import GuestBookQuickView from '@/components/GuestBookQuickView'
+import { prisma } from '@/lib/prisma'
 import { queries } from '@/lib/queries'
+import { getServerSession } from 'next-auth'
 import Link from 'next/link'
 import React from 'react'
 
 export default async function DashboardPage() {
-    const events = await queries.fetchEvents()
+    const events = await queries.fetchEvents();
+    const guestBookEntries = await queries.fetchGuestBookEntries(5);
+    const session = await getServerSession()
+
+    const user = await prisma.user.findUnique({
+        where: { email: session?.user.email }
+    })
     // console.log(events)
 
     return (
-        <div>
-            <h1 className='text-2xl font-bold'>Dashboard</h1>
-            <div className='border rounded-lg max-w-6xl mx-auto p-6 space-y-4'>
+        <div className='max-w-[100rem] mx-auto'>
+            <div className='grid grid-cols-5 grid-rows-5 gap-4'>
+                <div className='row-span-5 bg-[#00000008] rounded-xl p-6'>
+                    <div className='py-4'>
+                        <h2 className='text-lg font-semibold'>Hello, {user?.username}</h2>
+                    </div>
+                    <div className='bg-brand-primary-800 p-4 rounded-lg'>Overview</div>
+                </div>
+                <div className='col-span-3 row-span-3 bg-[#00000008] rounded-xl p-6 relative'>
+                    <div>
+                        <div className='w-full flex items-center justify-between'>
+                            <h2 className='text-lg font-semibold py-4'>Your Events</h2>
+                            <button
+                                className='btn btn-primary h-fit'
+                            >
+                                Create Event
+                            </button>
+                        </div>
+                        <div className='grid grid-cols-3'>
+                            {events.map((item) => (
+                                <EventInfoQuickView key={item.id} {...item} />
+                            ))}
+                        </div>
+                    </div>
+                    <Link href={'/events'} className='absolute bottom-4 right-4 text-sm text-brand-primary-400 hover:underline'>
+                        View all
+                    </Link>
+                </div>
+                <div className='row-span-5 col-start-5 bg-[#00000008] rounded-xl p-6'>
+                    <div className='py-4 flex justify-between'>
+                        <h2 className='text-lg font-semibold'>Guest Book</h2>
+                        <Link 
+                            href={'/guest-book'}
+                            className='hover:cursor-pointer hover:underline text-brand-primary-500'
+                        >
+                            View All
+                        </Link>
+                    </div>
+                    <div className='space-y-2'>
+                        {guestBookEntries.map(entry => (
+                            <GuestBookQuickView key={entry.id} {...entry} />
+                        ))}
+                    </div>
+                </div>
+            </div>
+            {/* <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) => (
                     <Link key={item.id} href={`/events/${item.id}`} >
@@ -30,7 +83,7 @@ export default async function DashboardPage() {
                 >
                     See all events
                 </Link>
-            </div>
+            </div> */}
         </div>
     )
 }

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

@@ -8,13 +8,13 @@ export default async function UserPage({ params }: { params: { username: string
     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,
+      where: { username },
+      select: {
+        id: true,
+        email: true,
+        name: true,
+        role: true,
+        createdAt: true,
     },
   })
 

app/globals.css

@@ -2,7 +2,61 @@
 
 @theme {
     --color-background: #fff5eb;
-    --color-text: #141d31;
+
+    --color-brand-text-50: rgb(15, 13, 10);
+    --color-brand-text-100: rgb(30, 27, 21);
+    --color-brand-text-200: rgb(60, 53, 42);
+    --color-brand-text-300: rgb(90, 80, 63);
+    --color-brand-text-400: rgb(120, 106, 84);
+    --color-brand-text-500: rgb(150, 133, 105);
+    --color-brand-text-600: rgb(171, 157, 135);
+    --color-brand-text-700: rgb(192, 182, 165);
+    --color-brand-text-800: rgb(213, 206, 195);
+    --color-brand-text-900: rgb(234, 231, 225);
+    --color-brand-text-950: rgb(245, 243, 240);
+
+    --color-brand-background-50: rgb(9, 14, 17);
+    --color-brand-background-100: rgb(18, 28, 33);
+    --color-brand-background-200: rgb(36, 56, 66);
+    --color-brand-background-300: rgb(54, 84, 99);
+    --color-brand-background-400: rgb(71, 112, 133);
+    --color-brand-background-500: rgb(89, 140, 166);
+    --color-brand-background-600: rgb(122, 163, 184);
+    --color-brand-background-700: rgb(156, 186, 201);
+    --color-brand-background-800: rgb(189, 209, 219);
+    --color-brand-background-900: rgb(222, 232, 237);
+    --color-brand-background-950: rgb(238, 244, 246);
+
+    --color-brand-primary-50: rgb(7, 11, 18);
+    --color-brand-primary-100: rgb(15, 22, 36);
+    --color-brand-primary-200: rgb(29, 44, 73);
+    --color-brand-primary-300: rgb(44, 67, 109);
+    --color-brand-primary-400: rgb(58, 89, 146);
+    --color-brand-primary-500: rgb(73, 111, 182);
+    --color-brand-primary-600: rgb(109, 140, 197);
+    --color-brand-primary-700: rgb(146, 169, 211);
+    --color-brand-primary-800: rgb(182, 197, 226);
+    --color-brand-primary-900: rgb(219, 226, 240);
+    --color-brand-primary-950: rgb(237, 241, 248);
+/* 
+    --color-brand-secondary-50: rgb(9, 17, 9);
+    --color-brand-secondary-100: rgb(18, 33, 18);
+    --color-brand-secondary-200: rgb(35, 67, 36);
+    --color-brand-secondary-300: rgb(53, 100, 54);
+    --color-brand-secondary-400: rgb(70, 134, 72);
+    --color-brand-secondary-500: rgb(88, 167, 91);
+    --color-brand-secondary-600: rgb(121, 185, 123);
+    --color-brand-secondary-700: rgb(155, 202, 156);
+    --color-brand-secondary-800: rgb(188, 220, 189);
+    --color-brand-secondary-900: rgb(222, 237, 222);
+    --color-brand-secondary-950: rgb(238, 246, 239); */
+    
+    --color-brand-text: rgb(87, 77, 61);
+    --color-brand-background: rgb(242, 246, 248);
+    --color-brand-primary:rgb(134, 159, 207);
+    /* --color-brand-secondary: #8ac18c;
+    --color-brand-accent: #e9e154; */
+
 }
 
 /* @theme light {
@@ -13,4 +67,12 @@
 @theme dark {
     --color-background: #141d31;
     --color-text: #fff5eb;
-} */
+} */
+
+.btn {
+    @apply border px-4 py-2 rounded-lg hover:cursor-pointer transition-colors duration-300
+}
+
+.btn-primary{
+    @apply bg-brand-primary text-brand-background border-0 hover:bg-brand-primary-500 transition-colors duration-300
+}

app/layout.tsx

@@ -15,7 +15,7 @@ export default async function RootLayout({
   return (
     <html lang="en">
       <body
-        className="bg-background text-text"
+        className="bg-brand-background text-brand-text"
       >
         {children}
       </body>

components/EventInfoQuickView.tsx

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import React from 'react'
+
+export default function EventInfoQuickView(props: EventProps) {
+    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 : 'null'}</p>
+                <p className='text-xs mt-2'>Created By: {props.creator.username}</p>                                    
+            </div>
+        </Link>
+    )
+}

components/GuestBookList.tsx

@@ -13,7 +13,7 @@ interface GuestBookEntry {
     notes?: string | null
 }
 
-export default function GuestBookList({ entries }: { entries: GuestBookEntry[] }) {
+export default function GuestBookList({ entries, view }: { entries: GuestBookEntry[], view: 'TABLE' | 'CARD' }) {
     const [editingEntry, setEditingEntry] = useState<GuestBookEntry | null>(null)
 
     function handleModalClose() {
@@ -59,51 +59,57 @@ export default function GuestBookList({ entries }: { entries: GuestBookEntry[] }
 
     return (
         <div className='space-y-4'>
-            <div className='overflow-hidden rounded-xl'>
-                <table className='table-auto w-full mb-16 p-4'>
-                    <thead className='bg-text text-background'>
-                        <tr className='text-left'>
-                            <th className='px-4 py-2'>Name</th>
-                            <th className='px-4 py-2'>Email</th>
-                            <th className='px-4 py-2'>Phone</th>
-                            <th className='px-4 py-2'>Address</th>
-                            <th className='px-4 py-2'>Notes</th>
-                        </tr>
-                    </thead>
-                    <tbody className=''>
-                        {entries.map(entry => (
-                            <tr
-                                key={entry.id}
-                                className=''
-                            >
-                                <td className='border border-gray-300 px-4 py-2'>{entry.fName + ' ' + entry.lName} <span className='text-sm text-gray-600'>(Side: {entry.side})</span></td>
-                                <td className='border border-gray-300 px-4 py-2'>{entry.email || 'N/A'}</td>
-                                <td className='border border-gray-300 px-4 py-2'>{entry.phone || 'N/A'}</td>
-                                <td className='border border-gray-300 px-4 py-2'>{entry.address || 'N/A'}</td>
-                                <td className='border border-gray-300 px-4 py-2'>{entry.notes || 'N/A'}</td>
+            {view === 'TABLE' ? (
+                <div className='overflow-hidden rounded-xl'>
+                    <table className='table-auto w-full mb-16 p-4'>
+                        <thead className='bg-brand-primary text-brand-background border border-brand-primary'>
+                            <tr className='text-left'>
+                                <th className='px-4 py-2'>Name</th>
+                                <th className='px-4 py-2'>Email</th>
+                                <th className='px-4 py-2'>Phone</th>
+                                <th className='px-4 py-2'>Address</th>
+                                <th className='px-4 py-2'>Notes</th>
                             </tr>
+                        </thead>
+                        <tbody className=''>
+                            {entries.map(entry => (
+                                <tr
+                                    key={entry.id}
+                                    className='odd:bg-brand-primary-900 even:bg-brand-primary-950 hover:cursor-pointer hover:bg-brand-primary-700 hover:text-brand-background transition-colors duration-50'
+                                    onClick={() => setEditingEntry(entry)}
+                                >
+                                    <td className='border border-brand-primary px-4 py-2'>{entry.fName + ' ' + entry.lName} <span className='text-sm'>(Side: {entry.side})</span></td>
+                                    <td className='border border-brand-primary px-4 py-2'>{entry.email || 'N/A'}</td>
+                                    <td className='border border-brand-primary px-4 py-2'>{entry.phone || 'N/A'}</td>
+                                    <td className='border border-brand-primary px-4 py-2'>{entry.address || 'N/A'}</td>
+                                    <td className='border border-brand-primary px-4 py-2'>{entry.notes || 'N/A'}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            ) : (
+                <div className='space-y-4 mx-auto'>
+                    <div className='grid grid-cols-3 gap-4 w-full'>
+                        {entries.map(entry => (
+                            <div key={entry.id} className='p-4 bg-[#00000008] rounded-lg shadow-sm'>
+                                <h2 className='font-semibold text-lg'>{entry.fName} {entry.lName}</h2>
+                                <p className='text-sm text-brand-primary-400'>Side: {entry.side}</p>
+                                <p>Email: {entry.email || 'N/A'}</p>
+                                <p>Phone: {entry.phone || 'N/A'}</p>
+                                <p>Address: {entry.address || 'N/A'}</p>
+                                <p>Notes: {entry.notes || 'N/A'}</p>
+                                <button
+                                    className='text-brand-primary underline text-sm mt-2'
+                                    onClick={() => setEditingEntry(entry)}
+                                >
+                                    Edit
+                                </button>
+                            </div>
                         ))}
-                    </tbody>
-                </table>
-            </div>
-            <div className='max-w-3xl space-y-4 mx-auto'>
-                {entries.map(entry => (
-                    <div key={entry.id} className='p-4 border rounded shadow-sm'>
-                        <h2 className='font-semibold text-lg'>{entry.fName} {entry.lName}</h2>
-                        <p className='text-sm text-gray-600'>Side: {entry.side}</p>
-                        <p>Email: {entry.email || 'N/A'}</p>
-                        <p>Phone: {entry.phone || 'N/A'}</p>
-                        <p>Address: {entry.address || 'N/A'}</p>
-                        <p>Notes: {entry.notes || 'N/A'}</p>
-                        <button
-                            className='text-blue-600 underline text-sm mt-2'
-                            onClick={() => setEditingEntry(entry)}
-                        >
-                            Edit
-                        </button>
                     </div>
-                ))}
-            </div>
+                </div>
+            )}
 
             {editingEntry && (
                 <EditGuestBookEntryModal

components/GuestBookPageClient.tsx

@@ -3,6 +3,8 @@
 import { useState } from 'react'
 import AddGuestBookEntryModal from '@/components/AddGuestBookEntryModal'
 import GuestBookList from '@/components/GuestBookList'
+import TableIcon from './icons/TableIcon'
+import GuestCardIcon from './icons/GuestCardIcon'
 
 interface GuestBookEntry {
     id: string
@@ -16,7 +18,8 @@ interface GuestBookEntry {
 }
 
 export default function GuestBookPageClient({ entries }: { entries: GuestBookEntry[] }) {
-    const [isOpen, setIsOpen] = useState(false)
+    const [isOpen, setIsOpen] = useState(false);
+    const [view, setView] = useState<'CARD' | 'TABLE'>('TABLE')
 
     async function handleAddGuest(data: {
         fName: string
@@ -48,11 +51,21 @@ export default function GuestBookPageClient({ entries }: { entries: GuestBookEnt
     return (
         <div className='max-w-6xl mx-auto mt-8 space-y-4'>
             <div className="flex justify-between items-center">
-                <h1 className='text-2xl font-bold'>Guest Book</h1>
+                <div className='flex gap-5'>
+                    <h1 className='text-2xl font-bold'>Guest Book</h1>
+                    <div className='flex gap-2'>
+                        <button onClick={() => setView('TABLE')}>
+                            <TableIcon />
+                        </button>
+                        <button onClick={() => setView('CARD')}>
+                            <GuestCardIcon />
+                        </button>
+                    </div>
+                </div>
                 <button onClick={() => setIsOpen(true)} className="btn btn-primary">Add Guest</button>
             </div>
 
-            <GuestBookList entries={entries} />
+            <GuestBookList view={view} entries={entries} />
 
             <AddGuestBookEntryModal
                 isOpen={isOpen}

components/GuestBookQuickView.tsx

@@ -0,0 +1,52 @@
+'use client'
+import { Transition } from '@headlessui/react';
+import React, { Fragment, useState } from 'react'
+
+export default function GuestBookQuickView(props: GuestBookEntry) {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const handleOpenView = () => setIsOpen(true);
+    const handleCloseView = () => setIsOpen(false);
+
+    return (
+        <>
+            <div
+                className='p-4 bg-brand-primary-900 rounded-lg hover:cursor-pointer hover:bg-brand-background-950 transition-colors duration-200'
+                onClick={handleOpenView}
+            >   
+                <p>{props.fName + " " + props.lName}</p>
+                <p className='text-xs'>Added on: {new Date(props.createdAt).toDateString()}</p>
+            </div>
+
+            <Transition
+                as={Fragment}
+                show={isOpen}
+                enter="transition duration-200 ease-out"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="transition duration-150 ease-in"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+            >
+                <div className="absolute right-4 top-4 bg-white border shadow-lg rounded-lg p-6 w-[350px] max-w-full z-30">
+                    <div className="flex justify-between items-center mb-2">
+                        <h2 className="text-lg font-bold">Guest Details</h2>
+                        <button onClick={handleCloseView} className="text-sm text-gray-600 hover:text-red-500">
+                        ✕
+                        </button>
+                    </div>
+
+                    <div className="space-y-2 text-sm">
+                        <p><strong>Name:</strong> {props.fName} {props.lName}</p>
+                        <p><strong>Side:</strong> {props.side}</p>
+                        <p><strong>Email:</strong> {props.email || 'N/A'}</p>
+                        <p><strong>Phone:</strong> {props.phone || 'N/A'}</p>
+                        <p><strong>Address:</strong> {props.address || 'N/A'}</p>
+                        <p><strong>Notes:</strong> {props.notes || 'None'}</p>
+                        <p className='text-xs text-gray-500 pt-2'>Created: {new Date(props.createdAt).toLocaleString()}</p>
+                    </div>
+                </div>
+            </Transition>
+        </>
+    )
+}

components/Navbar.tsx

@@ -11,7 +11,7 @@ export default function Navbar() {
     if (!session?.user) return null
     
     return (
-        <nav className="flex justify-between items-center p-4 bg-background border-b">
+        <nav className="flex justify-between items-center p-4 border-b">
             <div className="flex items-center space-x-2">
                 <div className="font-semibold">Wedding Planner</div>
                 {session.user && (

components/icons/GuestCardIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function GuestCardIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-6">
+            <path fillRule="evenodd" d="M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z" clipRule="evenodd" />
+        </svg>
+    )
+}

components/icons/TableIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function TableIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-6">
+            <path fillRule="evenodd" d="M1.5 5.625c0-1.036.84-1.875 1.875-1.875h17.25c1.035 0 1.875.84 1.875 1.875v12.75c0 1.035-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 18.375V5.625ZM21 9.375A.375.375 0 0 0 20.625 9h-7.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h7.5a.375.375 0 0 0 .375-.375v-1.5Zm0 3.75a.375.375 0 0 0-.375-.375h-7.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h7.5a.375.375 0 0 0 .375-.375v-1.5Zm0 3.75a.375.375 0 0 0-.375-.375h-7.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h7.5a.375.375 0 0 0 .375-.375v-1.5ZM10.875 18.75a.375.375 0 0 0 .375-.375v-1.5a.375.375 0 0 0-.375-.375h-7.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h7.5ZM3.375 15h7.5a.375.375 0 0 0 .375-.375v-1.5a.375.375 0 0 0-.375-.375h-7.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375Zm0-3.75h7.5a.375.375 0 0 0 .375-.375v-1.5A.375.375 0 0 0 10.875 9h-7.5A.375.375 0 0 0 3 9.375v1.5c0 .207.168.375.375.375Z" clipRule="evenodd" />
+        </svg>
+    )
+}

lib/queries.ts

@@ -29,12 +29,12 @@ export const queries = {
         return event
     },
 
-    async fetchGuestBookEntries() {
+    async fetchGuestBookEntries(amount?: number) {
         return await prisma.guestBookEntry.findMany({
-            orderBy: [
-                { lName: 'asc' },
-                { fName: 'asc' }
-            ],
+            orderBy: amount 
+                ? { createdAt: 'desc'}
+                : [{ lName: 'asc' }, { fName: 'asc' }],
+            ...(amount ? {take: amount} : {})
         })
     },
 }

types.d.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+interface GuestBookEntry {
+    id: string
+    fName: string
+    lName: string
+    side: string
+    email?: string | null
+    phone?: string | null
+    address?: string | null
+    notes?: string | null
+    createdAt: Date
+}
+
+interface EventProps {
+    id: string
+    name: string
+    date?: Date | null
+    location?: string | null
+    creator: { id: string; username: string; }
+    createdAt: Date; date: Date | null;
+    creatorId: string; 
+    key: string;
+}