bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 7 Actions Packages Projects Releases Wiki Activity

Create a draft of the guests list

Browse Source
This commit is contained in:
Manuel Bustillo 2024-08-11 13:12:03 +02:00
parent f945f08088
commit 025ed094e7
4 changed files with 57 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/dashboard/guests/page.tsx
View File

@ -1,10 +1,12 @@
import { lusitana } from '@/app/ui/fonts'; import { lusitana } from '@/app/ui/fonts';
import GuestsTable from '@/app/ui/guests/table';
export default function Page () {
export default function Page() {
return ( return (
<div className="w-full"> <div className="w-full">
<h1 className={`${lusitana.className} text-2xl py-4`}>Guests</h1>
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<h1 className={`${lusitana.className} text-2xl`}>Guests</h1> <GuestsTable />
</div> </div>
</div> </div>
); );

6
app/lib/definitions.ts
View File

@ -16,6 +16,12 @@ export type Customer = {
image_url: string; image_url: string;
}; };
export type Guest = {
id: string;
name: string;
email: string;
}
export type Invoice = { export type Invoice = {
id: string; id: string;
customer_id: string; customer_id: string;

159
app/ui/guests/table.tsx
View File

@ -2,123 +2,54 @@ import Image from 'next/image';
import { UpdateInvoice, DeleteInvoice } from '@/app/ui/guests/buttons'; import { UpdateInvoice, DeleteInvoice } from '@/app/ui/guests/buttons';
import gueststatus from '@/app/ui/guests/status'; import gueststatus from '@/app/ui/guests/status';
import { formatDateToLocal, formatCurrency } from '@/app/lib/utils'; import { formatDateToLocal, formatCurrency } from '@/app/lib/utils';
import { fetchFilteredguests } from '@/app/lib/data'; import { Guest } from '@/app/lib/definitions';
export default async function guestsTable({ export default async function guestsTable() {
query, const guests: Guest[] = [
currentPage, {
}: { id: '1',
query: string; name: 'John Doe',
currentPage: number; email: 'foo@bar.com'
}) { },
const guests = await fetchFilteredguests(query, currentPage); {
id: '2',
name: 'Jane Doe',
email: 'jane@bar.com',
},
];
return ( return (
<div className="mt-6 flow-root"> <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
<div className="inline-block min-w-full align-middle"> <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<div className="rounded-lg bg-gray-50 p-2 md:pt-0"> <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<div className="md:hidden"> <tr>
{guests?.map((invoice) => ( <th scope="col" className="px-6 py-3">
<div Name
key={invoice.id} </th>
className="mb-2 w-full rounded-md bg-white p-4" <th scope="col" className="px-6 py-3">
> Email
<div className="flex items-center justify-between border-b pb-4"> </th>
<div> <th scope="col" className="px-6 py-3">
<div className="mb-2 flex items-center"> Status
<Image </th>
src={invoice.image_url} </tr>
className="mr-2 rounded-full" </thead>
width={28} <tbody>
height={28} {guests.map((guest) => (
alt={`${invoice.name}'s profile picture`} <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
/> <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<p>{invoice.name}</p> {guest.name}
</div> </th>
<p className="text-sm text-gray-500">{invoice.email}</p> <td className="px-6 py-4">
</div> {guest.email}
<gueststatus status={invoice.status} /> </td>
</div> <td className="px-6 py-4">
<div className="flex w-full items-center justify-between pt-4"> Confirmed
<div> </td>
<p className="text-xl font-medium"> </tr>
{formatCurrency(invoice.amount)} ))}
</p> </tbody>
<p>{formatDateToLocal(invoice.date)}</p> </table>
</div>
<div className="flex justify-end gap-2">
<UpdateInvoice id={invoice.id} />
<DeleteInvoice id={invoice.id} />
</div>
</div>
</div>
))}
</div>
<table className="hidden min-w-full text-gray-900 md:table">
<thead className="rounded-lg text-left text-sm font-normal">
<tr>
<th scope="col" className="px-4 py-5 font-medium sm:pl-6">
Customer
</th>
<th scope="col" className="px-3 py-5 font-medium">
Email
</th>
<th scope="col" className="px-3 py-5 font-medium">
Amount
</th>
<th scope="col" className="px-3 py-5 font-medium">
Date
</th>
<th scope="col" className="px-3 py-5 font-medium">
Status
</th>
<th scope="col" className="relative py-3 pl-6 pr-3">
<span className="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody className="bg-white">
{guests?.map((invoice) => (
<tr
key={invoice.id}
className="w-full border-b py-3 text-sm last-of-type:border-none [&:first-child>td:first-child]:rounded-tl-lg [&:first-child>td:last-child]:rounded-tr-lg [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg"
>
<td className="whitespace-nowrap py-3 pl-6 pr-3">
<div className="flex items-center gap-3">
<Image
src={invoice.image_url}
className="rounded-full"
width={28}
height={28}
alt={`${invoice.name}'s profile picture`}
/>
<p>{invoice.name}</p>
</div>
</td>
<td className="whitespace-nowrap px-3 py-3">
{invoice.email}
</td>
<td className="whitespace-nowrap px-3 py-3">
{formatCurrency(invoice.amount)}
</td>
<td className="whitespace-nowrap px-3 py-3">
{formatDateToLocal(invoice.date)}
</td>
<td className="whitespace-nowrap px-3 py-3">
<gueststatus status={invoice.status} />
</td>
<td className="whitespace-nowrap py-3 pl-6 pr-3">
<div className="flex justify-end gap-3">
<UpdateInvoice id={invoice.id} />
<DeleteInvoice id={invoice.id} />
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div> </div>
); );
} }

1
tailwind.config.ts
View File

@ -6,6 +6,7 @@ const config: Config = {
'./components/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}',
], ],
darkMode: 'selector',
theme: { theme: {
extend: { extend: {
gridTemplateColumns: { gridTemplateColumns: {