added data table

app/(auth)/locations/page.tsx

@@ -0,0 +1,13 @@
+import LocationsTable from '@/components/tables/LocationsTable'
+import { queries } from '@/lib/queries'
+import React from 'react'
+
+export default async function LocationsPage() {
+    const eventLocations = await queries.fetchAllLocations()
+
+    return (
+        <div>
+            <LocationsTable eventLocations={eventLocations} />
+        </div>
+    )
+}

components/GuestBookList.tsx

@@ -1,6 +1,7 @@
 'use client'
 import React, { useState } from 'react'
 import EditGuestBookEntryModal from './EditGuestBookEntryModal'
+// import GuestBookTable from './tables/GuestBookTable'
 
 interface GuestBookEntry {
     id: string
@@ -63,36 +64,39 @@ export default function GuestBookList({ entries, view }: { entries: GuestBookEnt
     return (
         <div className='space-y-4'>
             {view === 'TABLE' ? (
-                <div className='overflow-hidden rounded-xl'>
+                <>
-                    <table className='table-auto w-full mb-16 p-4'>
+                    <div className='overflow-hidden rounded-xl'>
-                        <thead className='bg-brand-primary text-brand-background border border-brand-primary'>
+                        <table className='table-auto w-full mb-16 p-4'>
-                            <tr className='text-left'>
+                            <thead className='bg-brand-primary text-brand-background border border-brand-primary'>
-                                <th className='px-4 py-2'>Name</th>
+                                <tr className='text-left'>
-                                <th className='px-4 py-2'>Email</th>
+                                    <th className='px-4 py-2'>Name</th>
-                                <th className='px-4 py-2'>Phone</th>
+                                    <th className='px-4 py-2'>Email</th>
-                                <th className='px-4 py-2'>Address</th>
+                                    <th className='px-4 py-2'>Phone</th>
-                                <th className='px-4 py-2'>Congratulated Engagement</th>
+                                    <th className='px-4 py-2'>Address</th>
-                                <th className='px-4 py-2'>Notes</th>
+                                    <th className='px-4 py-2'>Congratulated Engagement</th>
-                            </tr>
+                                    <th className='px-4 py-2'>Notes</th>
-                        </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.congratulated == true ? 'Yes' : "No"}</td>
-                                    <td className='border border-brand-primary px-4 py-2'>{entry.notes || 'N/A'}</td>
                                 </tr>
-                            ))}
+                            </thead>
-                        </tbody>
+                            <tbody className=''>
-                    </table>
+                                {entries.map(entry => (
-                </div>
+                                    <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.congratulated == true ? 'Yes' : "No"}</td>
+                                        <td className='border border-brand-primary px-4 py-2'>{entry.notes || 'N/A'}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                    {/* <GuestBookTable guestBookEntries={entries} /> */}
+                </>
             ) : (
                 <div className='space-y-4 mx-auto'>
                     <div className='grid grid-cols-3 gap-4 w-full'>

components/app-sidebar.tsx

@@ -2,14 +2,10 @@
 
 import * as React from "react"
 import {
-  IconCamera,
+  IconBuildingArch,
-  IconChartBar,
   IconDashboard,
   IconDatabase,
-  IconFileAi,
-  IconFileDescription,
   IconFileWord,
-  IconFolder,
   IconHelp,
   IconInnerShadowTop,
   IconListDetails,
@@ -50,6 +46,11 @@ const data = {
       url: "/guest-book",
       icon: IconUsers,
     },
+    {
+      title: "Locations",
+      url: "/locations",
+      icon: IconBuildingArch,
+    },
   ],
   // navClouds: [
   //   {

components/tables/DataTable.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    SortingState,
+    getSortedRowModel
+} from '@tanstack/react-table'
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+} from '../ui/table'
+
+import { useState } from 'react'
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+    className?: string
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+    className
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = useState<SortingState>([])
+
+    const table = useReactTable({
+        data,
+        columns,
+        state: { sorting },
+        onSortingChange: setSorting,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel()
+    })
+
+    return (
+        <div className={`rounded-md border ${className || ''}`}>
+            <Table>
+                <TableHeader>
+                    {table.getHeaderGroups().map(headerGroup => (
+                        <TableRow key={headerGroup.id} >
+                            {headerGroup.headers.map(header => (
+                                <TableHead key={header.id} className="whitespace-nowrap">
+                                    {header.isPlaceholder
+                                        ? null
+                                        : flexRender(
+                                            header.column.columnDef.header,
+                                            header.getContext()
+                                        )}
+                                </TableHead>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+
+                <TableBody>
+                    {table.getRowModel().rows.length ? (
+                        table.getRowModel().rows.map(row => (
+                            <TableRow key={row.id}>
+                                {row.getVisibleCells().map(cell => (
+                                    <TableCell key={cell.id}>
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell colSpan={columns.length} className="text-center">
+                                No results
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}

components/tables/GuestBookTable.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { ColumnDef } from '@tanstack/react-table'
+import { DataTable } from './DataTable'
+
+interface GuestBookEntryRow {
+  id: string
+  fName: string
+  lName: string
+  side: string
+  address: string
+  notes?: string | null
+  phone?: string | null
+  email?: string | null
+  congratulated?: boolean | null
+}
+
+interface Props {
+  guestBookEntries: GuestBookEntryRow[]
+}
+
+const columns: ColumnDef<GuestBookEntryRow>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    cell: ({ row }) => row.original.fName + " " + row.original.lName
+  },
+  {
+    accessorKey: 'side',
+    header: 'Side'
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    cell: ({ row }) => row.original.email || '—'
+  },
+  {
+    accessorKey: 'phone',
+    header: 'Phone',
+    cell: ({ row }) => row.original.phone || '—'
+  },
+  {
+    accessorKey: 'address',
+    header: 'Address',
+    cell: ({ row }) => row.original.address || '—'
+  },
+  {
+    accessorKey: 'congratulated',
+    header: 'Congratulated Engagement',
+    cell: ({ row }) => row.original.congratulated == true ? "Yes" : 'No'
+  },
+  {
+    accessorKey: 'notes',
+    header: 'Notes',
+    cell: ({ row }) => row.original.notes || '—'
+  },
+
+]
+
+export default function GuestBookTable({ guestBookEntries }: Props) {
+  return (
+    <div className="mt-4">
+      <DataTable columns={columns} data={guestBookEntries} />
+    </div>
+  )
+}

components/tables/LocationsTable.tsx

@@ -0,0 +1,65 @@
+'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>
+  )
+}

lib/mutations.ts

@@ -192,5 +192,29 @@ export const mutations = {
         });
     },
 
+    async createEventLocation(data: {
+        name: string,
+        address: string,
+        city: string,
+        state: string,
+        postalCode: string,
+        country: string,
+        phone?: string,
+        email?: string,
+    }) {
+        return await prisma.location.create({
+            data: {
+                name: data.name,
+                address: data.address,
+                city: data.city,
+                state: data.state,
+                postalCode: data.postalCode,
+                country: data.country || 'United States',
+                phone: data.phone,
+                email: data.email
+            }
+        })
+    }
+
 
 };

lib/queries.ts

@@ -133,6 +133,10 @@ export const queries = {
         return await prisma.user.findUnique({
             where: { id },
         })
-    }
+    },
+
+    async fetchAllLocations() {
+        return await prisma.location.findMany()
+    },
 
 }