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

Initial layout

Browse Source
This commit is contained in:
Manuel Bustillo 2024-08-11 12:34:16 +02:00
parent 3d430126e8
commit f571af2c42
29 changed files with 180 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/dashboard/expenses/page.tsx Normal file
View File

@ -0,0 +1,11 @@
import { lusitana } from '@/app/ui/fonts';
export default function Page () {
return (
<div className="w-full">
<div className="flex w-full items-center justify-between">
<h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
</div>
</div>
);
}

11
app/dashboard/guests/page.tsx Normal file
View File

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

12
app/dashboard/layout.tsx Normal file
View File

@ -0,0 +1,12 @@
import SideNav from '@/app/ui/dashboard/sidenav';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav />
</div>
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
);
}

3
app/dashboard/page.tsx Normal file
View File

@ -0,0 +1,3 @@
export default function Page() {
return <p>Dashboard Page</p>;
}

11
app/dashboard/tables/page.tsx Normal file
View File

@ -0,0 +1,11 @@
import { lusitana } from '@/app/ui/fonts';
export default function Page () {
return (
<div className="w-full">
<div className="flex w-full items-center justify-between">
<h1 className={`${lusitana.className} text-2xl`}>Table distributions</h1>
</div>
</div>
);
}

5
app/layout.tsx
View File

@ -1,3 +1,6 @@
import '@/app/ui/global.css'
import { inter } from '@/app/ui/fonts';
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
@ -5,7 +8,7 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body>{children}</body> <body className={`${inter.className} antialiased`}>{children}</body>
</html> </html>
); );
} }

217
app/lib/data.ts
View File

@ -1,217 +0,0 @@
import { sql } from '@vercel/postgres';
import {
CustomerField,
CustomersTableType,
InvoiceForm,
InvoicesTable,
LatestInvoiceRaw,
Revenue,
} from './definitions';
import { formatCurrency } from './utils';
export async function fetchRevenue() {
try {
// Artificially delay a response for demo purposes.
// Don't do this in production :)
// console.log('Fetching revenue data...');
// await new Promise((resolve) => setTimeout(resolve, 3000));
const data = await sql<Revenue>`SELECT * FROM revenue`;
// console.log('Data fetch completed after 3 seconds.');
return data.rows;
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch revenue data.');
}
}
export async function fetchLatestInvoices() {
try {
const data = await sql<LatestInvoiceRaw>`
SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
ORDER BY invoices.date DESC
LIMIT 5`;
const latestInvoices = data.rows.map((invoice) => ({
...invoice,
amount: formatCurrency(invoice.amount),
}));
return latestInvoices;
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch the latest invoices.');
}
}
export async function fetchCardData() {
try {
// You can probably combine these into a single SQL query
// However, we are intentionally splitting them to demonstrate
// how to initialize multiple queries in parallel with JS.
const invoiceCountPromise = sql`SELECT COUNT(*) FROM invoices`;
const customerCountPromise = sql`SELECT COUNT(*) FROM customers`;
const invoiceStatusPromise = sql`SELECT
SUM(CASE WHEN status = 'paid' THEN amount ELSE 0 END) AS "paid",
SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) AS "pending"
FROM invoices`;
const data = await Promise.all([
invoiceCountPromise,
customerCountPromise,
invoiceStatusPromise,
]);
const numberOfInvoices = Number(data[0].rows[0].count ?? '0');
const numberOfCustomers = Number(data[1].rows[0].count ?? '0');
const totalPaidInvoices = formatCurrency(data[2].rows[0].paid ?? '0');
const totalPendingInvoices = formatCurrency(data[2].rows[0].pending ?? '0');
return {
numberOfCustomers,
numberOfInvoices,
totalPaidInvoices,
totalPendingInvoices,
};
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch card data.');
}
}
const ITEMS_PER_PAGE = 6;
export async function fetchFilteredInvoices(
query: string,
currentPage: number,
) {
const offset = (currentPage - 1) * ITEMS_PER_PAGE;
try {
const invoices = await sql<InvoicesTable>`
SELECT
invoices.id,
invoices.amount,
invoices.date,
invoices.status,
customers.name,
customers.email,
customers.image_url
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE
customers.name ILIKE ${`%${query}%`} OR
customers.email ILIKE ${`%${query}%`} OR
invoices.amount::text ILIKE ${`%${query}%`} OR
invoices.date::text ILIKE ${`%${query}%`} OR
invoices.status ILIKE ${`%${query}%`}
ORDER BY invoices.date DESC
LIMIT ${ITEMS_PER_PAGE} OFFSET ${offset}
`;
return invoices.rows;
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch invoices.');
}
}
export async function fetchInvoicesPages(query: string) {
try {
const count = await sql`SELECT COUNT(*)
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE
customers.name ILIKE ${`%${query}%`} OR
customers.email ILIKE ${`%${query}%`} OR
invoices.amount::text ILIKE ${`%${query}%`} OR
invoices.date::text ILIKE ${`%${query}%`} OR
invoices.status ILIKE ${`%${query}%`}
`;
const totalPages = Math.ceil(Number(count.rows[0].count) / ITEMS_PER_PAGE);
return totalPages;
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch total number of invoices.');
}
}
export async function fetchInvoiceById(id: string) {
try {
const data = await sql<InvoiceForm>`
SELECT
invoices.id,
invoices.customer_id,
invoices.amount,
invoices.status
FROM invoices
WHERE invoices.id = ${id};
`;
const invoice = data.rows.map((invoice) => ({
...invoice,
// Convert amount from cents to dollars
amount: invoice.amount / 100,
}));
return invoice[0];
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch invoice.');
}
}
export async function fetchCustomers() {
try {
const data = await sql<CustomerField>`
SELECT
id,
name
FROM customers
ORDER BY name ASC
`;
const customers = data.rows;
return customers;
} catch (err) {
console.error('Database Error:', err);
throw new Error('Failed to fetch all customers.');
}
}
export async function fetchFilteredCustomers(query: string) {
try {
const data = await sql<CustomersTableType>`
SELECT
customers.id,
customers.name,
customers.email,
customers.image_url,
COUNT(invoices.id) AS total_invoices,
SUM(CASE WHEN invoices.status = 'pending' THEN invoices.amount ELSE 0 END) AS total_pending,
SUM(CASE WHEN invoices.status = 'paid' THEN invoices.amount ELSE 0 END) AS total_paid
FROM customers
LEFT JOIN invoices ON customers.id = invoices.customer_id
WHERE
customers.name ILIKE ${`%${query}%`} OR
customers.email ILIKE ${`%${query}%`}
GROUP BY customers.id, customers.name, customers.email, customers.image_url
ORDER BY customers.name ASC
`;
const customers = data.rows.map((customer) => ({
...customer,
total_pending: formatCurrency(customer.total_pending),
total_paid: formatCurrency(customer.total_paid),
}));
return customers;
} catch (err) {
console.error('Database Error:', err);
throw new Error('Failed to fetch customer table.');
}
}

6
app/lib/definitions.ts
View File

@ -44,7 +44,7 @@ export type LatestInvoiceRaw = Omit<LatestInvoice, 'amount'> & {
amount: number; amount: number;
}; };
export type InvoicesTable = { export type guestsTable = {
id: string; id: string;
customer_id: string; customer_id: string;
name: string; name: string;
@ -60,7 +60,7 @@ export type CustomersTableType = {
name: string; name: string;
email: string; email: string;
image_url: string; image_url: string;
total_invoices: number; total_guests: number;
total_pending: number; total_pending: number;
total_paid: number; total_paid: number;
}; };
@ -70,7 +70,7 @@ export type FormattedCustomersTable = {
name: string; name: string;
email: string; email: string;
image_url: string; image_url: string;
total_invoices: number; total_guests: number;
total_pending: string; total_pending: string;
total_paid: string; total_paid: string;
}; };

4
app/lib/placeholder-data.ts
View File

@ -48,7 +48,7 @@ const customers = [
}, },
]; ];
const invoices = [ const guests = [
{ {
customer_id: customers[0].id, customer_id: customers[0].id,
amount: 15795, amount: 15795,
@ -144,4 +144,4 @@ const revenue = [
{ month: 'Dec', revenue: 4800 }, { month: 'Dec', revenue: 4800 },
]; ];
export { users, customers, invoices, revenue }; export { users, customers, guests, revenue };

27
app/page.tsx
View File

@ -1,33 +1,10 @@
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link'; import Link from 'next/link';
import styles from '@/app/ui/home.module.css';
export default function Page() { export default function Page() {
return ( return (
<main className="flex min-h-screen flex-col p-6"> <main className="flex min-h-screen flex-col p-6">
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
{/* <AcmeLogo /> */}
</div>
<div className="mt-4 flex grow flex-col gap-4 md:flex-row">
<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
<p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
<strong>Welcome to Acme.</strong> This is the example for the{' '}
<a href="https://nextjs.org/learn/" className="text-blue-500">
Next.js Learn Course
</a>
, brought to you by Vercel.
</p>
<Link
href="/login"
className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
>
<span>Log in</span> <ArrowRightIcon className="w-5 md:w-6" />
</Link>
</div>
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
{/* Add Hero Images Here */}
</div>
</div>
</main> </main>
); );
} }

16
app/seed/route.ts
View File

@ -1,6 +1,6 @@
// import bcrypt from 'bcrypt'; // import bcrypt from 'bcrypt';
// import { db } from '@vercel/postgres'; // import { db } from '@vercel/postgres';
// import { invoices, customers, revenue, users } from '../lib/placeholder-data'; // import { guests, customers, revenue, users } from '../lib/placeholder-data';
// const client = await db.connect(); // const client = await db.connect();
@ -29,11 +29,11 @@
// return insertedUsers; // return insertedUsers;
// } // }
// async function seedInvoices() { // async function seedguests() {
// await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`; // await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
// await client.sql` // await client.sql`
// CREATE TABLE IF NOT EXISTS invoices ( // CREATE TABLE IF NOT EXISTS guests (
// id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, // id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
// customer_id UUID NOT NULL, // customer_id UUID NOT NULL,
// amount INT NOT NULL, // amount INT NOT NULL,
@ -42,17 +42,17 @@
// ); // );
// `; // `;
// const insertedInvoices = await Promise.all( // const insertedguests = await Promise.all(
// invoices.map( // guests.map(
// (invoice) => client.sql` // (invoice) => client.sql`
// INSERT INTO invoices (customer_id, amount, status, date) // INSERT INTO guests (customer_id, amount, status, date)
// VALUES (${invoice.customer_id}, ${invoice.amount}, ${invoice.status}, ${invoice.date}) // VALUES (${invoice.customer_id}, ${invoice.amount}, ${invoice.status}, ${invoice.date})
// ON CONFLICT (id) DO NOTHING; // ON CONFLICT (id) DO NOTHING;
// `, // `,
// ), // ),
// ); // );
// return insertedInvoices; // return insertedguests;
// } // }
// async function seedCustomers() { // async function seedCustomers() {
@ -110,7 +110,7 @@ export async function GET() {
// await client.sql`BEGIN`; // await client.sql`BEGIN`;
// await seedUsers(); // await seedUsers();
// await seedCustomers(); // await seedCustomers();
// await seedInvoices(); // await seedguests();
// await seedRevenue(); // await seedRevenue();
// await client.sql`COMMIT`; // await client.sql`COMMIT`;

6
app/ui/customers/table.tsx
View File

@ -57,7 +57,7 @@ export default async function CustomersTable({
</div> </div>
</div> </div>
<div className="pt-4 text-sm"> <div className="pt-4 text-sm">
<p>{customer.total_invoices} invoices</p> <p>{customer.total_guests} guests</p>
</div> </div>
</div> </div>
))} ))}
@ -72,7 +72,7 @@ export default async function CustomersTable({
Email Email
</th> </th>
<th scope="col" className="px-3 py-5 font-medium"> <th scope="col" className="px-3 py-5 font-medium">
Total Invoices Total guests
</th> </th>
<th scope="col" className="px-3 py-5 font-medium"> <th scope="col" className="px-3 py-5 font-medium">
Total Pending Total Pending
@ -102,7 +102,7 @@ export default async function CustomersTable({
{customer.email} {customer.email}
</td> </td>
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm"> <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
{customer.total_invoices} {customer.total_guests}
</td> </td>
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm"> <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
{customer.total_pending} {customer.total_pending}

10
app/ui/dashboard/cards.tsx
View File

@ -10,7 +10,7 @@ const iconMap = {
collected: BanknotesIcon, collected: BanknotesIcon,
customers: UserGroupIcon, customers: UserGroupIcon,
pending: ClockIcon, pending: ClockIcon,
invoices: InboxIcon, guests: InboxIcon,
}; };
export default async function CardWrapper() { export default async function CardWrapper() {
@ -18,9 +18,9 @@ export default async function CardWrapper() {
<> <>
{/* NOTE: Uncomment this code in Chapter 9 */} {/* NOTE: Uncomment this code in Chapter 9 */}
{/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> {/* <Card title="Collected" value={totalPaidguests} type="collected" />
<Card title="Pending" value={totalPendingInvoices} type="pending" /> <Card title="Pending" value={totalPendingguests} type="pending" />
<Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> <Card title="Total guests" value={numberOfguests} type="guests" />
<Card <Card
title="Total Customers" title="Total Customers"
value={numberOfCustomers} value={numberOfCustomers}
@ -37,7 +37,7 @@ export function Card({
}: { }: {
title: string; title: string;
value: number | string; value: number | string;
type: 'invoices' | 'customers' | 'pending' | 'collected'; type: 'guests' | 'customers' | 'pending' | 'collected';
}) { }) {
const Icon = iconMap[type]; const Icon = iconMap[type];

10
app/ui/dashboard/latest-invoices.tsx
View File

@ -3,21 +3,21 @@ import clsx from 'clsx';
import Image from 'next/image'; import Image from 'next/image';
import { lusitana } from '@/app/ui/fonts'; import { lusitana } from '@/app/ui/fonts';
import { LatestInvoice } from '@/app/lib/definitions'; import { LatestInvoice } from '@/app/lib/definitions';
export default async function LatestInvoices({ export default async function Latestguests({
latestInvoices, latestguests,
}: { }: {
latestInvoices: LatestInvoice[]; latestguests: LatestInvoice[];
}) { }) {
return ( return (
<div className="flex w-full flex-col md:col-span-4"> <div className="flex w-full flex-col md:col-span-4">
<h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}> <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
Latest Invoices Latest guests
</h2> </h2>
<div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4"> <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
{/* NOTE: Uncomment this code in Chapter 7 */} {/* NOTE: Uncomment this code in Chapter 7 */}
{/* <div className="bg-white px-6"> {/* <div className="bg-white px-6">
{latestInvoices.map((invoice, i) => { {latestguests.map((invoice, i) => {
return ( return (
<div <div
key={invoice.id} key={invoice.id}

3
app/ui/dashboard/loading.tsx Normal file
View File

@ -0,0 +1,3 @@
export default function Loading() {
return <div>Loading...</div>;
}

35
app/ui/dashboard/nav-links.tsx
View File

@ -1,35 +1,42 @@
'use client'
import { import {
UserGroupIcon, UserGroupIcon,
HomeIcon, RectangleGroupIcon,
DocumentDuplicateIcon, BanknotesIcon,
} from '@heroicons/react/24/outline'; } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
// Map of links to display in the side navigation.
// Depending on the size of the application, this would be stored in a database.
const links = [ const links = [
{ name: 'Home', href: '/dashboard', icon: HomeIcon }, { name: 'Guests', href: '/dashboard/guests', icon: UserGroupIcon },
{ { name: 'Expenses', href: '/dashboard/expenses', icon: BanknotesIcon },
name: 'Invoices', { name: 'Table distributions', href: '/dashboard/tables', icon: RectangleGroupIcon },
href: '/dashboard/invoices',
icon: DocumentDuplicateIcon,
},
{ name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
]; ];
export default function NavLinks() { export default function NavLinks() {
const pathname = usePathname();
return ( return (
<> <>
{links.map((link) => { {links.map((link) => {
const LinkIcon = link.icon; const LinkIcon = link.icon;
return ( return (
<a <Link
key={link.name} key={link.name}
href={link.href} href={link.href}
className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3" className={clsx(
'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
{
'bg-sky-100 text-blue-600': pathname === link.href,
},
)}
> >
<LinkIcon className="w-6" /> <LinkIcon className="w-6" />
<p className="hidden md:block">{link.name}</p> <p className="hidden md:block">{link.name}</p>
</a> </Link>
); );
})} })}
</> </>

7
app/ui/dashboard/sidenav.tsx
View File

@ -2,16 +2,17 @@ import Link from 'next/link';
import NavLinks from '@/app/ui/dashboard/nav-links'; import NavLinks from '@/app/ui/dashboard/nav-links';
import AcmeLogo from '@/app/ui/acme-logo'; import AcmeLogo from '@/app/ui/acme-logo';
import { PowerIcon } from '@heroicons/react/24/outline'; import { PowerIcon } from '@heroicons/react/24/outline';
import { gloriaHallelujah } from '@/app/ui/fonts';
export default function SideNav() { export default function SideNav() {
return ( return (
<div className="flex h-full flex-col px-3 py-4 md:px-2"> <div className="flex h-full flex-col px-3 py-4 md:px-2">
<Link <Link
className="mb-2 flex h-20 items-end justify-start rounded-md bg-blue-600 p-4 md:h-40" className="mb-2 flex h-20 items-center justify-start rounded-md bg-blue-600 p-4 md:h-20"
href="/" href="/"
> >
<div className="w-32 text-white md:w-40"> <div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased` }>
<AcmeLogo /> <h1>Wedding Planner</h1>
</div> </div>
</Link> </Link>
<div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2"> <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">

5
app/ui/fonts.ts Normal file
View File

@ -0,0 +1,5 @@
import { Inter, Lusitana, Gloria_Hallelujah} from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });
export const lusitana = Lusitana({ subsets: ['latin'], weight: '400' });
export const gloriaHallelujah = Gloria_Hallelujah({ subsets: ['latin'], weight: '400' });

0
app/ui/invoices/breadcrumbs.tsx → app/ui/guests/breadcrumbs.tsx
View File

4
app/ui/invoices/buttons.tsx → app/ui/guests/buttons.tsx
View File

@ -4,7 +4,7 @@ import Link from 'next/link';
export function CreateInvoice() { export function CreateInvoice() {
return ( return (
<Link <Link
href="/dashboard/invoices/create" href="/dashboard/guests/create"
className="flex h-10 items-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" className="flex h-10 items-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
> >
<span className="hidden md:block">Create Invoice</span>{' '} <span className="hidden md:block">Create Invoice</span>{' '}
@ -16,7 +16,7 @@ export function CreateInvoice() {
export function UpdateInvoice({ id }: { id: string }) { export function UpdateInvoice({ id }: { id: string }) {
return ( return (
<Link <Link
href="/dashboard/invoices" href="/dashboard/guests"
className="rounded-md border p-2 hover:bg-gray-100" className="rounded-md border p-2 hover:bg-gray-100"
> >
<PencilIcon className="w-5" /> <PencilIcon className="w-5" />

2
app/ui/invoices/create-form.tsx → app/ui/guests/create-form.tsx
View File

@ -100,7 +100,7 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
</div> </div>
<div className="mt-6 flex justify-end gap-4"> <div className="mt-6 flex justify-end gap-4">
<Link <Link
href="/dashboard/invoices" href="/dashboard/guests"
className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200" className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
> >
Cancel Cancel

2
app/ui/invoices/edit-form.tsx → app/ui/guests/edit-form.tsx
View File

@ -111,7 +111,7 @@ export default function EditInvoiceForm({
</div> </div>
<div className="mt-6 flex justify-end gap-4"> <div className="mt-6 flex justify-end gap-4">
<Link <Link
href="/dashboard/invoices" href="/dashboard/guests"
className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200" className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
> >
Cancel Cancel

0
app/ui/invoices/pagination.tsx → app/ui/guests/pagination.tsx
View File

2
app/ui/invoices/status.tsx → app/ui/guests/status.tsx
View File

@ -1,7 +1,7 @@
import { CheckIcon, ClockIcon } from '@heroicons/react/24/outline'; import { CheckIcon, ClockIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx'; import clsx from 'clsx';
export default function InvoiceStatus({ status }: { status: string }) { export default function gueststatus({ status }: { status: string }) {
return ( return (
<span <span
className={clsx( className={clsx(

18
app/ui/invoices/table.tsx → app/ui/guests/table.tsx
View File

@ -1,24 +1,24 @@
import Image from 'next/image'; import Image from 'next/image';
import { UpdateInvoice, DeleteInvoice } from '@/app/ui/invoices/buttons'; import { UpdateInvoice, DeleteInvoice } from '@/app/ui/guests/buttons';
import InvoiceStatus from '@/app/ui/invoices/status'; import gueststatus from '@/app/ui/guests/status';
import { formatDateToLocal, formatCurrency } from '@/app/lib/utils'; import { formatDateToLocal, formatCurrency } from '@/app/lib/utils';
import { fetchFilteredInvoices } from '@/app/lib/data'; import { fetchFilteredguests } from '@/app/lib/data';
export default async function InvoicesTable({ export default async function guestsTable({
query, query,
currentPage, currentPage,
}: { }: {
query: string; query: string;
currentPage: number; currentPage: number;
}) { }) {
const invoices = await fetchFilteredInvoices(query, currentPage); const guests = await fetchFilteredguests(query, currentPage);
return ( return (
<div className="mt-6 flow-root"> <div className="mt-6 flow-root">
<div className="inline-block min-w-full align-middle"> <div className="inline-block min-w-full align-middle">
<div className="rounded-lg bg-gray-50 p-2 md:pt-0"> <div className="rounded-lg bg-gray-50 p-2 md:pt-0">
<div className="md:hidden"> <div className="md:hidden">
{invoices?.map((invoice) => ( {guests?.map((invoice) => (
<div <div
key={invoice.id} key={invoice.id}
className="mb-2 w-full rounded-md bg-white p-4" className="mb-2 w-full rounded-md bg-white p-4"
@ -37,7 +37,7 @@ export default async function InvoicesTable({
</div> </div>
<p className="text-sm text-gray-500">{invoice.email}</p> <p className="text-sm text-gray-500">{invoice.email}</p>
</div> </div>
<InvoiceStatus status={invoice.status} /> <gueststatus status={invoice.status} />
</div> </div>
<div className="flex w-full items-center justify-between pt-4"> <div className="flex w-full items-center justify-between pt-4">
<div> <div>
@ -78,7 +78,7 @@ export default async function InvoicesTable({
</tr> </tr>
</thead> </thead>
<tbody className="bg-white"> <tbody className="bg-white">
{invoices?.map((invoice) => ( {guests?.map((invoice) => (
<tr <tr
key={invoice.id} 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" 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"
@ -105,7 +105,7 @@ export default async function InvoicesTable({
{formatDateToLocal(invoice.date)} {formatDateToLocal(invoice.date)}
</td> </td>
<td className="whitespace-nowrap px-3 py-3"> <td className="whitespace-nowrap px-3 py-3">
<InvoiceStatus status={invoice.status} /> <gueststatus status={invoice.status} />
</td> </td>
<td className="whitespace-nowrap py-3 pl-6 pr-3"> <td className="whitespace-nowrap py-3 pl-6 pr-3">
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">

7
app/ui/home.module.css Normal file
View File

@ -0,0 +1,7 @@
.shape {
height: 0;
width: 0;
border-bottom: 30px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}

22
app/ui/search.tsx
View File

@ -1,8 +1,26 @@
'use client'; 'use client';
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { useSearchParams, usePathname, useRouter } from 'next/navigation';
import { useDebouncedCallback } from 'use-debounce';
export default function Search({ placeholder }: { placeholder: string }) { export default function Search({ placeholder }: { placeholder: string }) {
const searchParams = useSearchParams();
const pathname = usePathname();
const { replace } = useRouter();
const handleSearch = useDebouncedCallback((term) => {
const params = new URLSearchParams(searchParams);
if (term) {
params.set('query', term);
} else {
params.delete('query');
}
replace(`${pathname}?${params.toString()}`);
}, 300);
return ( return (
<div className="relative flex flex-1 flex-shrink-0"> <div className="relative flex flex-1 flex-shrink-0">
<label htmlFor="search" className="sr-only"> <label htmlFor="search" className="sr-only">
@ -11,6 +29,10 @@ export default function Search({ placeholder }: { placeholder: string }) {
<input <input
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500" className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
placeholder={placeholder} placeholder={placeholder}
onChange={(e) => {
handleSearch(e.target.value)
}}
defaultValue={searchParams.get('query')?.toString()}
/> />
<MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" /> <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
</div> </div>

32
app/ui/skeletons.tsx
View File

@ -44,7 +44,7 @@ export function RevenueChartSkeleton() {
); );
} }
export function InvoiceSkeleton() { export function guestskeleton() {
return ( return (
<div className="flex flex-row items-center justify-between border-b border-gray-100 py-4"> <div className="flex flex-row items-center justify-between border-b border-gray-100 py-4">
<div className="flex items-center"> <div className="flex items-center">
@ -59,7 +59,7 @@ export function InvoiceSkeleton() {
); );
} }
export function LatestInvoicesSkeleton() { export function LatestguestsSkeleton() {
return ( return (
<div <div
className={`${shimmer} relative flex w-full flex-col overflow-hidden md:col-span-4`} className={`${shimmer} relative flex w-full flex-col overflow-hidden md:col-span-4`}
@ -67,11 +67,11 @@ export function LatestInvoicesSkeleton() {
<div className="mb-4 h-8 w-36 rounded-md bg-gray-100" /> <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
<div className="flex grow flex-col justify-between rounded-xl bg-gray-100 p-4"> <div className="flex grow flex-col justify-between rounded-xl bg-gray-100 p-4">
<div className="bg-white px-6"> <div className="bg-white px-6">
<InvoiceSkeleton /> <guestskeleton />
<InvoiceSkeleton /> <guestskeleton />
<InvoiceSkeleton /> <guestskeleton />
<InvoiceSkeleton /> <guestskeleton />
<InvoiceSkeleton /> <guestskeleton />
</div> </div>
<div className="flex items-center pb-2 pt-6"> <div className="flex items-center pb-2 pt-6">
<div className="h-5 w-5 rounded-full bg-gray-200" /> <div className="h-5 w-5 rounded-full bg-gray-200" />
@ -96,7 +96,7 @@ export default function DashboardSkeleton() {
</div> </div>
<div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8"> <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
<RevenueChartSkeleton /> <RevenueChartSkeleton />
<LatestInvoicesSkeleton /> <LatestguestsSkeleton />
</div> </div>
</> </>
); );
@ -139,7 +139,7 @@ export function TableRowSkeleton() {
); );
} }
export function InvoicesMobileSkeleton() { export function guestsMobileSkeleton() {
return ( return (
<div className="mb-2 w-full rounded-md bg-white p-4"> <div className="mb-2 w-full rounded-md bg-white p-4">
<div className="flex items-center justify-between border-b border-gray-100 pb-8"> <div className="flex items-center justify-between border-b border-gray-100 pb-8">
@ -163,18 +163,18 @@ export function InvoicesMobileSkeleton() {
); );
} }
export function InvoicesTableSkeleton() { export function guestsTableSkeleton() {
return ( return (
<div className="mt-6 flow-root"> <div className="mt-6 flow-root">
<div className="inline-block min-w-full align-middle"> <div className="inline-block min-w-full align-middle">
<div className="rounded-lg bg-gray-50 p-2 md:pt-0"> <div className="rounded-lg bg-gray-50 p-2 md:pt-0">
<div className="md:hidden"> <div className="md:hidden">
<InvoicesMobileSkeleton /> <guestsMobileSkeleton />
<InvoicesMobileSkeleton /> <guestsMobileSkeleton />
<InvoicesMobileSkeleton /> <guestsMobileSkeleton />
<InvoicesMobileSkeleton /> <guestsMobileSkeleton />
<InvoicesMobileSkeleton /> <guestsMobileSkeleton />
<InvoicesMobileSkeleton /> <guestsMobileSkeleton />
</div> </div>
<table className="hidden min-w-full text-gray-900 md:table"> <table className="hidden min-w-full text-gray-900 md:table">
<thead className="rounded-lg text-left text-sm font-normal"> <thead className="rounded-lg text-left text-sm font-normal">

15
pnpm-lock.yaml generated
View File

@ -28,10 +28,10 @@ importers:
version: 2.1.1 version: 2.1.1
next: next:
specifier: 15.0.0-canary.56 specifier: 15.0.0-canary.56
version: 15.0.0-canary.56(react-dom@19.0.0-rc-f38c22b244-20240704)(react@19.0.0-rc-f38c22b244-20240704) version: 15.0.0-canary.56(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
next-auth: next-auth:
specifier: 5.0.0-beta.19 specifier: 5.0.0-beta.19
version: 5.0.0-beta.19(next@15.0.0-canary.56)(react@19.0.0-rc-f38c22b244-20240704) version: 5.0.0-beta.19(next@15.0.0-canary.56(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
postcss: postcss:
specifier: 8.4.38 specifier: 8.4.38
version: 8.4.38 version: 8.4.38
@ -1732,13 +1732,13 @@ snapshots:
nanoid@3.3.7: {} nanoid@3.3.7: {}
next-auth@5.0.0-beta.19(next@15.0.0-canary.56)(react@19.0.0-rc-f38c22b244-20240704): next-auth@5.0.0-beta.19(next@15.0.0-canary.56(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
dependencies: dependencies:
'@auth/core': 0.32.0 '@auth/core': 0.32.0
next: 15.0.0-canary.56(react-dom@19.0.0-rc-f38c22b244-20240704)(react@19.0.0-rc-f38c22b244-20240704) next: 15.0.0-canary.56(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
react: 19.0.0-rc-f38c22b244-20240704 react: 19.0.0-rc-f38c22b244-20240704
next@15.0.0-canary.56(react-dom@19.0.0-rc-f38c22b244-20240704)(react@19.0.0-rc-f38c22b244-20240704): next@15.0.0-canary.56(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
dependencies: dependencies:
'@next/env': 15.0.0-canary.56 '@next/env': 15.0.0-canary.56
'@swc/helpers': 0.5.11 '@swc/helpers': 0.5.11
@ -1845,8 +1845,9 @@ snapshots:
postcss-load-config@4.0.2(postcss@8.4.38): postcss-load-config@4.0.2(postcss@8.4.38):
dependencies: dependencies:
lilconfig: 3.1.1 lilconfig: 3.1.1
postcss: 8.4.38
yaml: 2.4.3 yaml: 2.4.3
optionalDependencies:
postcss: 8.4.38
postcss-nested@6.0.1(postcss@8.4.38): postcss-nested@6.0.1(postcss@8.4.38):
dependencies: dependencies:
@ -2131,7 +2132,7 @@ snapshots:
wrappy@1.0.2: {} wrappy@1.0.2: {}
ws@8.14.2(bufferutil@4.0.8)(utf-8-validate@6.0.3): ws@8.14.2(bufferutil@4.0.8)(utf-8-validate@6.0.3):
dependencies: optionalDependencies:
bufferutil: 4.0.8 bufferutil: 4.0.8
utf-8-validate: 6.0.3 utf-8-validate: 6.0.3