bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 8 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({
children,
}: {
@ -5,7 +8,7 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body>{children}</body>
<body className={`${inter.className} antialiased`}>{children}</body>
</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;
};
export type InvoicesTable = {
export type guestsTable = {
id: string;
customer_id: string;
name: string;
@ -60,7 +60,7 @@ export type CustomersTableType = {
name: string;
email: string;
image_url: string;
total_invoices: number;
total_guests: number;
total_pending: number;
total_paid: number;
};
@ -70,7 +70,7 @@ export type FormattedCustomersTable = {
name: string;
email: string;
image_url: string;
total_invoices: number;
total_guests: number;
total_pending: 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,
amount: 15795,
@ -144,4 +144,4 @@ const revenue = [
{ 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 styles from '@/app/ui/home.module.css';
export default function Page() {
return (
<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>
);
}

16
app/seed/route.ts
View File

@ -1,6 +1,6 @@
// import bcrypt from 'bcrypt';
// 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();
@ -29,11 +29,11 @@
// return insertedUsers;
// }
// async function seedInvoices() {
// async function seedguests() {
// await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
// await client.sql`
// CREATE TABLE IF NOT EXISTS invoices (
// CREATE TABLE IF NOT EXISTS guests (
// id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
// customer_id UUID NOT NULL,
// amount INT NOT NULL,
@ -42,17 +42,17 @@
// );
// `;
// const insertedInvoices = await Promise.all(
// invoices.map(
// const insertedguests = await Promise.all(
// guests.map(
// (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})
// ON CONFLICT (id) DO NOTHING;
// `,
// ),
// );
// return insertedInvoices;
// return insertedguests;
// }
// async function seedCustomers() {
@ -110,7 +110,7 @@ export async function GET() {
// await client.sql`BEGIN`;
// await seedUsers();
// await seedCustomers();
// await seedInvoices();
// await seedguests();
// await seedRevenue();
// await client.sql`COMMIT`;

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

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

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

@ -10,7 +10,7 @@ const iconMap = {
collected: BanknotesIcon,
customers: UserGroupIcon,
pending: ClockIcon,
invoices: InboxIcon,
guests: InboxIcon,
};
export default async function CardWrapper() {
@ -18,9 +18,9 @@ export default async function CardWrapper() {
<>
{/* NOTE: Uncomment this code in Chapter 9 */}
{/* <Card title="Collected" value={totalPaidInvoices} type="collected" />
<Card title="Pending" value={totalPendingInvoices} type="pending" />
<Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
{/* <Card title="Collected" value={totalPaidguests} type="collected" />
<Card title="Pending" value={totalPendingguests} type="pending" />
<Card title="Total guests" value={numberOfguests} type="guests" />
<Card
title="Total Customers"
value={numberOfCustomers}
@ -37,7 +37,7 @@ export function Card({
}: {
title: string;
value: number | string;
type: 'invoices' | 'customers' | 'pending' | 'collected';
type: 'guests' | 'customers' | 'pending' | 'collected';
}) {
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 { lusitana } from '@/app/ui/fonts';
import { LatestInvoice } from '@/app/lib/definitions';
export default async function LatestInvoices({
latestInvoices,
export default async function Latestguests({
latestguests,
}: {
latestInvoices: LatestInvoice[];
latestguests: LatestInvoice[];
}) {
return (
<div className="flex w-full flex-col md:col-span-4">
<h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
Latest Invoices
Latest guests
</h2>
<div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
{/* NOTE: Uncomment this code in Chapter 7 */}
{/* <div className="bg-white px-6">
{latestInvoices.map((invoice, i) => {
{latestguests.map((invoice, i) => {
return (
<div
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 {
UserGroupIcon,
HomeIcon,
DocumentDuplicateIcon,
RectangleGroupIcon,
BanknotesIcon,
} 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 = [
{ name: 'Home', href: '/dashboard', icon: HomeIcon },
{
name: 'Invoices',
href: '/dashboard/invoices',
icon: DocumentDuplicateIcon,
},
{ name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
{ name: 'Guests', href: '/dashboard/guests', icon: UserGroupIcon },
{ name: 'Expenses', href: '/dashboard/expenses', icon: BanknotesIcon },
{ name: 'Table distributions', href: '/dashboard/tables', icon: RectangleGroupIcon },
];
export default function NavLinks() {
const pathname = usePathname();
return (
<>
{links.map((link) => {
const LinkIcon = link.icon;
return (
<a
<Link
key={link.name}
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" />
<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 AcmeLogo from '@/app/ui/acme-logo';
import { PowerIcon } from '@heroicons/react/24/outline';
import { gloriaHallelujah } from '@/app/ui/fonts';
export default function SideNav() {
return (
<div className="flex h-full flex-col px-3 py-4 md:px-2">
<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="/"
>
<div className="w-32 text-white md:w-40">
<AcmeLogo />
<div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased` }>
<h1>Wedding Planner</h1>
</div>
</Link>
<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() {
return (
<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"
>
<span className="hidden md:block">Create Invoice</span>{' '}
@ -16,7 +16,7 @@ export function CreateInvoice() {
export function UpdateInvoice({ id }: { id: string }) {
return (
<Link
href="/dashboard/invoices"
href="/dashboard/guests"
className="rounded-md border p-2 hover:bg-gray-100"
>
<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 className="mt-6 flex justify-end gap-4">
<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"
>
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 className="mt-6 flex justify-end gap-4">
<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"
>
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 clsx from 'clsx';
export default function InvoiceStatus({ status }: { status: string }) {
export default function gueststatus({ status }: { status: string }) {
return (
<span
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 { UpdateInvoice, DeleteInvoice } from '@/app/ui/invoices/buttons';
import InvoiceStatus from '@/app/ui/invoices/status';
import { UpdateInvoice, DeleteInvoice } from '@/app/ui/guests/buttons';
import gueststatus from '@/app/ui/guests/status';
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,
currentPage,
}: {
query: string;
currentPage: number;
}) {
const invoices = await fetchFilteredInvoices(query, currentPage);
const guests = await fetchFilteredguests(query, currentPage);
return (
<div className="mt-6 flow-root">
<div className="inline-block min-w-full align-middle">
<div className="rounded-lg bg-gray-50 p-2 md:pt-0">
<div className="md:hidden">
{invoices?.map((invoice) => (
{guests?.map((invoice) => (
<div
key={invoice.id}
className="mb-2 w-full rounded-md bg-white p-4"
@ -37,7 +37,7 @@ export default async function InvoicesTable({
</div>
<p className="text-sm text-gray-500">{invoice.email}</p>
</div>
<InvoiceStatus status={invoice.status} />
<gueststatus status={invoice.status} />
</div>
<div className="flex w-full items-center justify-between pt-4">
<div>
@ -78,7 +78,7 @@ export default async function InvoicesTable({
</tr>
</thead>
<tbody className="bg-white">
{invoices?.map((invoice) => (
{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"
@ -105,7 +105,7 @@ export default async function InvoicesTable({
{formatDateToLocal(invoice.date)}
</td>
<td className="whitespace-nowrap px-3 py-3">
<InvoiceStatus status={invoice.status} />
<gueststatus status={invoice.status} />
</td>
<td className="whitespace-nowrap py-3 pl-6 pr-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';
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 }) {
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 (
<div className="relative flex flex-1 flex-shrink-0">
<label htmlFor="search" className="sr-only">
@ -11,6 +29,10 @@ export default function Search({ placeholder }: { placeholder: string }) {
<input
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}
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" />
</div>

32
app/ui/skeletons.tsx
View File

@ -44,7 +44,7 @@ export function RevenueChartSkeleton() {
);
}
export function InvoiceSkeleton() {
export function guestskeleton() {
return (
<div className="flex flex-row items-center justify-between border-b border-gray-100 py-4">
<div className="flex items-center">
@ -59,7 +59,7 @@ export function InvoiceSkeleton() {
);
}
export function LatestInvoicesSkeleton() {
export function LatestguestsSkeleton() {
return (
<div
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="flex grow flex-col justify-between rounded-xl bg-gray-100 p-4">
<div className="bg-white px-6">
<InvoiceSkeleton />
<InvoiceSkeleton />
<InvoiceSkeleton />
<InvoiceSkeleton />
<InvoiceSkeleton />
<guestskeleton />
<guestskeleton />
<guestskeleton />
<guestskeleton />
<guestskeleton />
</div>
<div className="flex items-center pb-2 pt-6">
<div className="h-5 w-5 rounded-full bg-gray-200" />
@ -96,7 +96,7 @@ export default function DashboardSkeleton() {
</div>
<div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
<RevenueChartSkeleton />
<LatestInvoicesSkeleton />
<LatestguestsSkeleton />
</div>
</>
);
@ -139,7 +139,7 @@ export function TableRowSkeleton() {
);
}
export function InvoicesMobileSkeleton() {
export function guestsMobileSkeleton() {
return (
<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">
@ -163,18 +163,18 @@ export function InvoicesMobileSkeleton() {
);
}
export function InvoicesTableSkeleton() {
export function guestsTableSkeleton() {
return (
<div className="mt-6 flow-root">
<div className="inline-block min-w-full align-middle">
<div className="rounded-lg bg-gray-50 p-2 md:pt-0">
<div className="md:hidden">
<InvoicesMobileSkeleton />
<InvoicesMobileSkeleton />
<InvoicesMobileSkeleton />
<InvoicesMobileSkeleton />
<InvoicesMobileSkeleton />
<InvoicesMobileSkeleton />
<guestsMobileSkeleton />
<guestsMobileSkeleton />
<guestsMobileSkeleton />
<guestsMobileSkeleton />
<guestsMobileSkeleton />
<guestsMobileSkeleton />
</div>
<table className="hidden min-w-full text-gray-900 md:table">
<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
next:
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:
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:
specifier: 8.4.38
version: 8.4.38
@ -1732,13 +1732,13 @@ snapshots:
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:
'@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
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:
'@next/env': 15.0.0-canary.56
'@swc/helpers': 0.5.11
@ -1845,8 +1845,9 @@ snapshots:
postcss-load-config@4.0.2(postcss@8.4.38):
dependencies:
lilconfig: 3.1.1
postcss: 8.4.38
yaml: 2.4.3
optionalDependencies:
postcss: 8.4.38
postcss-nested@6.0.1(postcss@8.4.38):
dependencies:
@ -2131,7 +2132,7 @@ snapshots:
wrappy@1.0.2: {}
ws@8.14.2(bufferutil@4.0.8)(utf-8-validate@6.0.3):
dependencies:
optionalDependencies:
bufferutil: 4.0.8
utf-8-validate: 6.0.3