Merge branch 'main' of https://github.com/vercel/next-learn into update

dashboard/15-final/app/dashboard/customers/page.tsx

@@ -4,12 +4,10 @@ import CustomersTable from '@/app/ui/customers/table';
 export default async function Page({
   searchParams,
 }: {
-  searchParams:
-    | {
-        query: string | undefined;
-        page: string | undefined;
-      }
-    | undefined;
+  searchParams?: {
+    query?: string;
+    page?: string;
+  };
 }) {
   const query = searchParams?.query || '';
   const customers = await fetchFilteredCustomers(query);

dashboard/15-final/app/dashboard/invoices/[id]/edit/not-found.tsx

@@ -4,12 +4,12 @@ import { FaceFrownIcon } from '@heroicons/react/24/outline';
 export default function NotFound() {
   return (
     <main className="flex h-full flex-col items-center justify-center gap-2">
-      <FaceFrownIcon className="w-12 text-gray-400" />
-      <h2 className="text-lg font-semibold">Not Found</h2>
+      <FaceFrownIcon className="w-10 text-gray-400" />
+      <h2 className="text-xl font-semibold">404 Not Found</h2>
       <p>Could not find the requested invoice.</p>
       <Link
         href="/dashboard/invoices"
-        className="mt-4 rounded-md bg-black px-4 py-2 text-sm text-white"
+        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
       >
         Go Back
       </Link>

dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx

@@ -1,11 +1,12 @@
-import { fetchInvoiceById, fetchCustomerNames } from '@/app/lib/data';
-import { notFound } from 'next/navigation';
 import Form from '@/app/ui/invoices/edit-form';
+import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
+import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';
+import { notFound } from 'next/navigation';
 
 export default async function Page({ params }: { params: { id: string } }) {
   const id = params.id;
   const invoice = await fetchInvoiceById(id);
-  const customerNames = await fetchCustomerNames();
+  const customers = await fetchCustomers();
 
   if (!invoice) {
     notFound();
@@ -13,7 +14,17 @@ export default async function Page({ params }: { params: { id: string } }) {
 
   return (
     <main>
-      <Form invoice={invoice} customerNames={customerNames} id={id} />
+      <Breadcrumbs
+        breadcrumbs={[
+          { label: 'Invoices', href: '/dashboard/invoices' },
+          {
+            label: 'Edit Invoice',
+            href: `/dashboard/invoices/${id}/edit`,
+            active: true,
+          },
+        ]}
+      />
+      <Form invoice={invoice} customers={customers} />
     </main>
   );
 }

dashboard/15-final/app/dashboard/invoices/create/page.tsx

@@ -1,12 +1,23 @@
-import { fetchCustomerNames } from '@/app/lib/data';
+import { fetchCustomers } from '@/app/lib/data';
 import Form from '@/app/ui/invoices/create-form';
+import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
 
 export default async function Page() {
-  const customerNames = await fetchCustomerNames();
+  const customers = await fetchCustomers();
 
   return (
     <main>
-      <Form customerNames={customerNames} />
+      <Breadcrumbs
+        breadcrumbs={[
+          { label: 'Invoices', href: '/dashboard/invoices' },
+          {
+            label: 'Create Invoice',
+            href: '/dashboard/invoices/create',
+            active: true,
+          },
+        ]}
+      />
+      <Form customers={customers} />
     </main>
   );
 }

dashboard/15-final/app/dashboard/invoices/error.tsx

@@ -18,7 +18,7 @@ export default function Error({
     <main className="flex h-full flex-col items-center justify-center">
       <h2 className="text-center">Something went wrong!</h2>
       <button
-        className="mt-4 rounded-md bg-black px-4 py-2 text-sm text-white"
+        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
         onClick={
           // Attempt to recover by trying to re-render the invoices route
           () => reset()

dashboard/15-final/app/dashboard/invoices/page.tsx

@@ -1,27 +1,24 @@
 import Pagination from '@/app/ui/invoices/pagination';
 import Search from '@/app/ui/search';
-import { CreateInvoice } from '@/app/ui/invoices/buttons';
 import Table from '@/app/ui/invoices/table';
-import { fetchFilteredInvoices } from '@/app/lib/data';
+import { CreateInvoice } from '@/app/ui/invoices/buttons';
 import { lusitana } from '@/app/ui/fonts';
+import { InvoicesTableSkeleton } from '@/app/ui/dashboard/skeletons';
+import { Suspense } from 'react';
+import { fetchInvoicesPages } from '@/app/lib/data';
 
 export default async function Page({
   searchParams,
 }: {
-  searchParams:
-    | {
-        query: string | undefined;
-        page: string | undefined;
-      }
-    | undefined;
+  searchParams?: {
+    query?: string;
+    page?: string;
+  };
 }) {
   const query = searchParams?.query || '';
-  const currentPage = query ? 1 : Number(searchParams?.page || '1');
+  const currentPage = Number(searchParams?.page) || 1;
 
-  const { invoices, totalPages } = await fetchFilteredInvoices(
-    query,
-    currentPage,
-  );
+  const totalPages = await fetchInvoicesPages(query);
 
   return (
     <div className="w-full">
@@ -32,9 +29,11 @@ export default async function Page({
         <Search placeholder="Search invoices..." />
         <CreateInvoice />
       </div>
-      <Table invoices={invoices} />
+      <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
+        <Table query={query} currentPage={currentPage} />
+      </Suspense>
       <div className="mt-5 flex w-full justify-center">
-        <Pagination totalPages={totalPages} currentPage={currentPage} />
+        <Pagination totalPages={totalPages} />
       </div>
     </div>
   );

dashboard/15-final/app/lib/actions.ts

@@ -13,7 +13,9 @@ const FormSchema = z.object({
   amount: z.coerce
     .number()
     .gt(0, { message: 'Please enter an amount greater than $0.' }),
-  status: z.enum(['pending', 'paid']),
+  status: z.enum(['pending', 'paid'], {
+    invalid_type_error: 'Please select an invoice status.',
+  }),
   date: z.string(),
 });
 
@@ -58,15 +60,16 @@ export async function createInvoice(prevState: State, formData: FormData) {
       INSERT INTO invoices (customer_id, amount, status, date)
       VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
     `;
-
-    revalidatePath('/dashboard/invoices');
-    redirect('/dashboard/invoices');
   } catch (error) {
     // If a database error occurs, return a more specific error.
     return {
-      message: 'Database error: Failed to create invoice.',
+      message: 'Database Error: Failed to Create Invoice.',
     };
   }
+
+  // Revalidate cache and redirect user to invoices page
+  revalidatePath('/dashboard/invoices');
+  redirect('/dashboard/invoices');
 }
 
 export async function updateInvoice(prevState: State, formData: FormData) {
@@ -93,15 +96,17 @@ export async function updateInvoice(prevState: State, formData: FormData) {
       SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
       WHERE id = ${id}
     `;
-
-    revalidatePath('/dashboard/invoices');
-    redirect('/dashboard/invoices');
   } catch (error) {
-    return { message: 'Database error: Failed to update invoice.' };
+    return { message: 'Database Error: Failed to Update Invoice.' };
   }
+
+  revalidatePath('/dashboard/invoices');
+  redirect('/dashboard/invoices');
 }
 
 export async function deleteInvoice(formData: FormData) {
+  throw new Error('Failed to Delete Invoice');
+
   const { id } = DeleteInvoice.parse({
     id: formData.get('id'),
   });
@@ -111,6 +116,6 @@ export async function deleteInvoice(formData: FormData) {
     revalidatePath('/dashboard/invoices');
     return { message: 'Deleted Invoice' };
   } catch (error) {
-    return { message: 'Database error: Failed to delete invoice.' };
+    return { message: 'Database Error: Failed to Delete Invoice.' };
   }
 }

dashboard/15-final/app/lib/data.ts

@@ -1,13 +1,13 @@
 import { sql } from '@vercel/postgres';
-import { formatCurrency } from './utils';
 import {
-  Revenue,
-  InvoicesTable,
+  CustomerField,
   CustomersTable,
   InvoiceForm,
-  CustomerName,
+  InvoicesTable,
   LatestInvoiceRaw,
+  Revenue,
 } from './definitions';
+import { formatCurrency } from './utils';
 
 export async function fetchRevenue() {
   try {
@@ -93,7 +93,7 @@ export async function fetchInvoices() {
   }
 }
 
-export async function fetchCustomers() {
+export async function fetchCustomersCount() {
   try {
     const data = await sql`SELECT COUNT(*) FROM customers`;
     const numberOfCustomers = Number(data.rows[0].count ?? '0');
@@ -127,15 +127,16 @@ export async function fetchInvoiceStatus() {
   }
 }
 
+const ITEMS_PER_PAGE = 6;
+
 export async function fetchFilteredInvoices(
   query: string,
   currentPage: number,
 ) {
-  const itemsPerPage = 6;
-  const offset = (currentPage - 1) * itemsPerPage;
+  const offset = (currentPage - 1) * ITEMS_PER_PAGE;
 
   try {
-    const data = await sql<InvoicesTable>`
+    const invoices = await sql<InvoicesTable>`
       SELECT
         invoices.id,
         invoices.amount,
@@ -153,44 +154,46 @@ export async function fetchFilteredInvoices(
         invoices.date::text ILIKE ${`%${query}%`} OR
         invoices.status ILIKE ${`%${query}%`}
       ORDER BY invoices.date DESC
-      LIMIT ${itemsPerPage} OFFSET ${offset}
+      LIMIT ${ITEMS_PER_PAGE} OFFSET ${offset}
     `;
 
-    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 totalRecords = Number(count.rows[0].count);
-    const totalPages = Math.ceil(totalRecords / itemsPerPage);
-
-    return {
-      invoices: data.rows,
-      totalPages,
-    };
+    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,
-        customers.name
+        invoices.status
       FROM invoices
-      JOIN customers ON invoices.customer_id = customers.id
       WHERE invoices.id = ${id};
     `;
 
@@ -207,9 +210,9 @@ export async function fetchInvoiceById(id: string) {
   }
 }
 
-export async function fetchCustomerNames() {
+export async function fetchCustomers() {
   try {
-    const data = await sql<CustomerName>`
+    const data = await sql<CustomerField>`
       SELECT
         id,
         name

dashboard/15-final/app/lib/definitions.ts

@@ -75,14 +75,14 @@ export type FormattedCustomersTable = {
   total_paid: string;
 };
 
-export type CustomerName = {
+export type CustomerField = {
   id: string;
   name: string;
 };
 
 export type InvoiceForm = {
   id: string;
-  name: string;
+  customer_id: string;
   amount: number;
   status: 'pending' | 'paid';
 };

dashboard/15-final/app/lib/utils.ts

@@ -34,3 +34,36 @@ export const generateYAxis = (revenue: Revenue[]) => {
 
   return { yAxisLabels, topLabel };
 };
+
+export const generatePagination = (currentPage: number, totalPages: number) => {
+  // If the total number of pages is 7 or less,
+  // display all pages without any ellipsis.
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  // If the current page is among the first 3 pages,
+  // show the first 3, an ellipsis, and the last 2 pages.
+  if (currentPage <= 3) {
+    return [1, 2, 3, '...', totalPages - 1, totalPages];
+  }
+
+  // If the current page is among the last 3 pages,
+  // show the first 2, an ellipsis, and the last 3 pages.
+  if (currentPage >= totalPages - 2) {
+    return [1, 2, '...', totalPages - 2, totalPages - 1, totalPages];
+  }
+
+  // If the current page is somewhere in the middle,
+  // show the first page, an ellipsis, the current page and its neighbors,
+  // another ellipsis, and the last page.
+  return [
+    1,
+    '...',
+    currentPage - 1,
+    currentPage,
+    currentPage + 1,
+    '...',
+    totalPages,
+  ];
+};

dashboard/15-final/app/ui/dashboard/skeletons.tsx

@@ -90,3 +90,118 @@ export default function DashboardSkeleton() {
     </>
   );
 }
+
+export function TableRowSkeleton() {
+  return (
+    <tr className="w-full border-b border-gray-100 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">
+      {/* Customer Name and Image */}
+      <td className="relative overflow-hidden whitespace-nowrap py-3 pl-6 pr-3">
+        <div className="flex items-center gap-3">
+          <div className="h-8 w-8 rounded-full bg-gray-100"></div>
+          <div className="h-6 w-24 rounded bg-gray-100"></div>
+        </div>
+      </td>
+      {/* Email */}
+      <td className="whitespace-nowrap px-3 py-3">
+        <div className="h-6 w-32 rounded bg-gray-100"></div>
+      </td>
+      {/* Amount */}
+      <td className="whitespace-nowrap px-3 py-3">
+        <div className="h-6 w-16 rounded bg-gray-100"></div>
+      </td>
+      {/* Date */}
+      <td className="whitespace-nowrap px-3 py-3">
+        <div className="h-6 w-16 rounded bg-gray-100"></div>
+      </td>
+      {/* Status */}
+      <td className="whitespace-nowrap px-3 py-3">
+        <div className="h-6 w-16 rounded bg-gray-100"></div>
+      </td>
+      {/* Actions */}
+      <td className="whitespace-nowrap py-3 pl-6 pr-3">
+        <div className="flex justify-end gap-3">
+          <div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
+          <div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+export function InvoicesMobileSkeleton() {
+  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">
+        <div className="flex items-center">
+          <div className="mr-2 h-8 w-8 rounded-full bg-gray-100"></div>
+          <div className="h-6 w-16 rounded bg-gray-100"></div>
+        </div>
+        <div className="h-6 w-16 rounded bg-gray-100"></div>
+      </div>
+      <div className="flex w-full items-center justify-between pt-4">
+        <div>
+          <div className="h-6 w-16 rounded bg-gray-100"></div>
+          <div className="mt-2 h-6 w-24 rounded bg-gray-100"></div>
+        </div>
+        <div className="flex justify-end gap-2">
+          <div className="h-10 w-10 rounded bg-gray-100"></div>
+          <div className="h-10 w-10 rounded bg-gray-100"></div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function InvoicesTableSkeleton() {
+  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 />
+          </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 pb-4 pl-3 pr-6 pt-2 sm:pr-6"
+                >
+                  <span className="sr-only">Edit</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white">
+              <TableRowSkeleton />
+              <TableRowSkeleton />
+              <TableRowSkeleton />
+              <TableRowSkeleton />
+              <TableRowSkeleton />
+              <TableRowSkeleton />
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/15-final/app/ui/invoices/breadcrumbs.tsx

@@ -8,7 +8,11 @@ interface Breadcrumb {
   active?: boolean;
 }
 
-export function Breadcrumbs({ breadcrumbs }: { breadcrumbs: Breadcrumb[] }) {
+export default function Breadcrumbs({
+  breadcrumbs,
+}: {
+  breadcrumbs: Breadcrumb[];
+}) {
   return (
     <nav aria-label="Breadcrumb" className="mb-6 block">
       <ol className={clsx(lusitana.className, 'flex text-xl md:text-2xl')}>

dashboard/15-final/app/ui/invoices/create-form.tsx

@@ -1,10 +1,7 @@
 'use client';
 
-import { createInvoice } from '@/app/lib/actions';
-import { CustomerName } from '@/app/lib/definitions';
+import { CustomerField } from '@/app/lib/definitions';
 import Link from 'next/link';
-// @ts-ignore React types do not yet include useFormState
-import { experimental_useFormState as useFormState } from 'react-dom';
 import {
   CheckIcon,
   ClockIcon,
@@ -12,172 +9,156 @@ import {
   UserCircleIcon,
 } from '@heroicons/react/24/outline';
 import { Button } from '../button';
-import { Breadcrumbs } from './breadcrumbs';
+import { createInvoice } from '@/app/lib/actions';
+// @ts-ignore React types do not yet include useFormState
+import { experimental_useFormState as useFormState } from 'react-dom';
 
-export default function Form({
-  customerNames,
-}: {
-  customerNames: CustomerName[];
-}) {
+export default function Form({ customers }: { customers: CustomerField[] }) {
   const initialState = { message: null, errors: [] };
   const [state, dispatch] = useFormState(createInvoice, initialState);
 
   return (
-    <div>
-      <Breadcrumbs
-        breadcrumbs={[
-          { label: 'Invoices', href: '/dashboard/invoices' },
-          {
-            label: 'Create Invoice',
-            href: '/dashboard/invoices/create',
-            active: true,
-          },
-        ]}
-      />
-      <form action={dispatch}>
-        <div className="rounded-md bg-gray-50 p-4 md:p-6">
-          {/* Customer Name */}
-          <div className="mb-4">
-            <label
-              htmlFor="customer"
-              className="mb-2 block text-sm font-medium"
+    <form action={dispatch}>
+      <div className="rounded-md bg-gray-50 p-4 md:p-6">
+        {/* Customer Name */}
+        <div className="mb-4">
+          <label htmlFor="customer" className="mb-2 block text-sm font-medium">
+            Choose customer
+          </label>
+          <div className="relative">
+            <select
+              id="customer"
+              name="customerId"
+              className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+              defaultValue=""
+              aria-describedby="customer-error"
             >
-              Choose customer
-            </label>
-            <div className="relative">
-              <select
-                id="customer"
-                name="customerId"
-                className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
-                defaultValue=""
-                aria-describedby="customer-error"
-              >
-                <option value="" disabled>
-                  Select a customer
+              <option value="" disabled>
+                Select a customer
+              </option>
+              {customers.map((customer) => (
+                <option key={customer.id} value={customer.id}>
+                  {customer.name}
                 </option>
-                {customerNames.map((name) => (
-                  <option key={name.id} value={name.id}>
-                    {name.name}
-                  </option>
-                ))}
-              </select>
-              <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
-            </div>
-
-            {state.errors?.customerId ? (
-              <div
-                id="customer-error"
-                aria-live="polite"
-                className="mt-2 text-sm text-red-500"
-              >
-                {state.errors.customerId.map((error: string) => (
-                  <p key={error}>{error}</p>
-                ))}
-              </div>
-            ) : null}
+              ))}
+            </select>
+            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
           </div>
 
-          {/* Invoice Amount */}
-          <div className="mb-4">
-            <label htmlFor="amount" className="mb-2 block text-sm font-medium">
-              Choose an amount
-            </label>
-            <div className="relative mt-2 rounded-md">
-              <div className="relative">
-                <input
-                  id="amount"
-                  name="amount"
-                  type="number"
-                  placeholder="Enter USD amount"
-                  className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
-                  aria-describedby="amount-error"
-                  style={{ MozAppearance: 'textfield' } as React.CSSProperties}
-                />
-                <CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
-              </div>
-            </div>
-
-            {state.errors?.amount ? (
-              <div
-                id="amount-error"
-                aria-live="polite"
-                className="mt-2 text-sm text-red-500"
-              >
-                {state.errors.amount.map((error: string) => (
-                  <p key={error}>{error}</p>
-                ))}
-              </div>
-            ) : null}
-          </div>
-
-          {/* Invoice Status */}
-          <div>
-            <label htmlFor="status" className="mb-2 block text-sm font-medium">
-              Set the invoice status
-            </label>
-            <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
-              <div className="flex gap-4">
-                <div className="flex items-center">
-                  <input
-                    id="pending"
-                    name="status"
-                    type="radio"
-                    value="pending"
-                    className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
-                  />
-                  <label
-                    htmlFor="pending"
-                    className="ml-2 flex items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300"
-                  >
-                    Pending <ClockIcon className="h-4 w-4" />
-                  </label>
-                </div>
-                <div className="flex items-center">
-                  <input
-                    id="paid"
-                    name="status"
-                    type="radio"
-                    value="paid"
-                    className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
-                  />
-                  <label
-                    htmlFor="paid"
-                    className="ml-2 flex items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white dark:text-gray-300"
-                  >
-                    Paid <CheckIcon className="h-4 w-4" />
-                  </label>
-                </div>
-              </div>
-            </div>
-            {state.errors?.status ? (
-              <div
-                aria-describedby="status-error"
-                aria-live="polite"
-                className="mt-2 text-sm text-red-500"
-              >
-                {state.errors.status.map((error: string) => (
-                  <p key={error}>{error}</p>
-                ))}
-              </div>
-            ) : null}
-          </div>
-
-          {state.message ? (
-            <div aria-live="polite" className="my-2 text-sm text-red-500">
-              <p>{state.message}</p>
+          {state.errors?.customerId ? (
+            <div
+              id="customer-error"
+              aria-live="polite"
+              className="mt-2 text-sm text-red-500"
+            >
+              {state.errors.customerId.map((error: string) => (
+                <p key={error}>{error}</p>
+              ))}
             </div>
           ) : null}
         </div>
-        <div className="mt-6 flex justify-end gap-4">
-          <Link
-            href="/dashboard/invoices"
-            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
-          </Link>
-          <Button type="submit">Create Invoice</Button>
+
+        {/* Invoice Amount */}
+        <div className="mb-4">
+          <label htmlFor="amount" className="mb-2 block text-sm font-medium">
+            Choose an amount
+          </label>
+          <div className="relative mt-2 rounded-md">
+            <div className="relative">
+              <input
+                id="amount"
+                name="amount"
+                type="number"
+                step="0.01"
+                placeholder="Enter USD amount"
+                className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+                aria-describedby="amount-error"
+                style={{ MozAppearance: 'textfield' } as React.CSSProperties}
+              />
+              <CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
+            </div>
+          </div>
+
+          {state.errors?.amount ? (
+            <div
+              id="amount-error"
+              aria-live="polite"
+              className="mt-2 text-sm text-red-500"
+            >
+              {state.errors.amount.map((error: string) => (
+                <p key={error}>{error}</p>
+              ))}
+            </div>
+          ) : null}
         </div>
-      </form>
-    </div>
+
+        {/* Invoice Status */}
+        <div>
+          <label htmlFor="status" className="mb-2 block text-sm font-medium">
+            Set the invoice status
+          </label>
+          <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
+            <div className="flex gap-4">
+              <div className="flex items-center">
+                <input
+                  id="pending"
+                  name="status"
+                  type="radio"
+                  value="pending"
+                  className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
+                />
+                <label
+                  htmlFor="pending"
+                  className="ml-2 flex items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300"
+                >
+                  Pending <ClockIcon className="h-4 w-4" />
+                </label>
+              </div>
+              <div className="flex items-center">
+                <input
+                  id="paid"
+                  name="status"
+                  type="radio"
+                  value="paid"
+                  className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
+                />
+                <label
+                  htmlFor="paid"
+                  className="ml-2 flex items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white dark:text-gray-300"
+                >
+                  Paid <CheckIcon className="h-4 w-4" />
+                </label>
+              </div>
+            </div>
+          </div>
+          {state.errors?.status ? (
+            <div
+              aria-describedby="status-error"
+              aria-live="polite"
+              className="mt-2 text-sm text-red-500"
+            >
+              {state.errors.status.map((error: string) => (
+                <p key={error}>{error}</p>
+              ))}
+            </div>
+          ) : null}
+        </div>
+
+        {state.message ? (
+          <div aria-live="polite" className="my-2 text-sm text-red-500">
+            <p>{state.message}</p>
+          </div>
+        ) : null}
+      </div>
+      <div className="mt-6 flex justify-end gap-4">
+        <Link
+          href="/dashboard/invoices"
+          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
+        </Link>
+        <Button type="submit">Create Invoice</Button>
+      </div>
+    </form>
   );
 }

dashboard/15-final/app/ui/invoices/edit-form.tsx

@@ -1,194 +1,174 @@
 'use client';
 
-import { CustomerName, InvoiceForm } from '@/app/lib/definitions';
-import { updateInvoice } from '@/app/lib/actions';
-// @ts-ignore React types do not yet include useFormState
-import { experimental_useFormState as useFormState } from 'react-dom';
-import Link from 'next/link';
-import { lusitana } from '@/app/ui/fonts';
-import { clsx } from 'clsx';
+import { CustomerField, InvoiceForm } from '@/app/lib/definitions';
 import {
   CheckIcon,
   ClockIcon,
   CurrencyDollarIcon,
   UserCircleIcon,
 } from '@heroicons/react/24/outline';
+import Link from 'next/link';
 import { Button } from '../button';
-import { Breadcrumbs } from './breadcrumbs';
+import { updateInvoice } from '@/app/lib/actions';
+// @ts-ignore React types do not yet include useFormState
+import { experimental_useFormState as useFormState } from 'react-dom';
 
 export default function EditInvoiceForm({
-  id,
   invoice,
-  customerNames,
+  customers,
 }: {
-  id: string;
   invoice: InvoiceForm;
-  customerNames: CustomerName[];
+  customers: CustomerField[];
 }) {
   const initialState = { message: null, errors: [] };
   const [state, dispatch] = useFormState(updateInvoice, initialState);
 
   return (
-    <div>
-      <Breadcrumbs
-        breadcrumbs={[
-          { label: 'Invoices', href: '/dashboard/invoices' },
-          {
-            label: 'Edit Invoice',
-            href: `/dashboard/invoices/${id}/edit`,
-            active: true,
-          },
-        ]}
-      />
-      <form action={dispatch}>
-        <div className="rounded-md bg-gray-50 p-4 md:p-6">
-          {/* Customer Name */}
-          <div className="mb-4">
-            <label
-              htmlFor="customer"
-              className="mb-2 block text-sm font-medium"
+    <form action={dispatch}>
+      <div className="rounded-md bg-gray-50 p-4 md:p-6">
+        {/* Invoice ID */}
+        <input type="hidden" name="id" value={invoice.id} />
+        {/* Customer Name */}
+        <div className="mb-4">
+          <label htmlFor="customer" className="mb-2 block text-sm font-medium">
+            Choose customer
+          </label>
+          <div className="relative">
+            <select
+              id="customer"
+              name="customerId"
+              className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+              defaultValue={invoice.customer_id}
+              aria-describedby="customer-error"
             >
-              Choose customer
-            </label>
-            <div className="relative">
-              <select
-                id="customer"
-                name="customerId"
-                className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
-                defaultValue={invoice.name}
-                aria-describedby="customer-error"
-              >
-                <option value="" disabled>
-                  Select a customer
+              <option value="" disabled>
+                Select a customer
+              </option>
+              {customers.map((customer) => (
+                <option key={customer.id} value={customer.id}>
+                  {customer.name}
                 </option>
-                {customerNames.map((name) => (
-                  <option key={name.id} value={name.id}>
-                    {name.name}
-                  </option>
-                ))}
-              </select>
-              <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
-            </div>
-
-            {state.errors?.customerId ? (
-              <div
-                id="customer-error"
-                aria-live="polite"
-                className="mt-2 text-sm text-red-500"
-              >
-                {state.errors.customerId.map((error: string) => (
-                  <p key={error}>{error}</p>
-                ))}
-              </div>
-            ) : null}
+              ))}
+            </select>
+            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
           </div>
 
-          {/* Invoice Amount */}
-          <div className="mb-4">
-            <label htmlFor="amount" className="mb-2 block text-sm font-medium">
-              Choose an amount
-            </label>
-            <div className="relative mt-2 rounded-md">
-              <div className="relative">
-                <input
-                  id="amount"
-                  name="amount"
-                  type="number"
-                  defaultValue={invoice.amount}
-                  placeholder="Enter USD amount"
-                  className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
-                  aria-describedby="amount-error"
-                  style={
-                    { '-moz-appearance': 'textfield' } as React.CSSProperties
-                  }
-                />
-                <CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
-              </div>
-            </div>
-
-            {state.errors?.amount ? (
-              <div
-                id="amount-error"
-                aria-live="polite"
-                className="mt-2 text-sm text-red-500"
-              >
-                {state.errors.amount.map((error: string) => (
-                  <p key={error}>{error}</p>
-                ))}
-              </div>
-            ) : null}
-          </div>
-
-          {/* Invoice Status */}
-          <div>
-            <label htmlFor="status" className="mb-2 block text-sm font-medium">
-              Set the invoice status
-            </label>
-            <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
-              <div className="flex gap-4">
-                <div className="flex items-center">
-                  <input
-                    id="pending"
-                    name="status"
-                    type="radio"
-                    value="pending"
-                    defaultChecked={invoice.status === 'pending'}
-                    className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
-                  />
-                  <label
-                    htmlFor="pending"
-                    className="ml-2 flex items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300"
-                  >
-                    Pending <ClockIcon className="h-4 w-4" />
-                  </label>
-                </div>
-                <div className="flex items-center">
-                  <input
-                    id="paid"
-                    name="status"
-                    type="radio"
-                    value="paid"
-                    defaultChecked={invoice.status === 'paid'}
-                    className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
-                  />
-                  <label
-                    htmlFor="paid"
-                    className="ml-2 flex items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white dark:text-gray-300"
-                  >
-                    Paid <CheckIcon className="h-4 w-4" />
-                  </label>
-                </div>
-              </div>
-            </div>
-            {state.errors?.status ? (
-              <div
-                aria-describedby="status-error"
-                aria-live="polite"
-                className="mt-2 text-sm text-red-500"
-              >
-                {state.errors.status.map((error: string) => (
-                  <p key={error}>{error}</p>
-                ))}
-              </div>
-            ) : null}
-          </div>
-
-          {state.message ? (
-            <div aria-live="polite" className="my-2 text-sm text-red-500">
-              <p>{state.message}</p>
+          {state.errors?.customerId ? (
+            <div
+              id="customer-error"
+              aria-live="polite"
+              className="mt-2 text-sm text-red-500"
+            >
+              {state.errors.customerId.map((error: string) => (
+                <p key={error}>{error}</p>
+              ))}
             </div>
           ) : null}
         </div>
-        <div className="mt-6 flex justify-end gap-4">
-          <Link
-            href="/dashboard/invoices"
-            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
-          </Link>
-          <Button type="submit">Edit Invoice</Button>
+
+        {/* Invoice Amount */}
+        <div className="mb-4">
+          <label htmlFor="amount" className="mb-2 block text-sm font-medium">
+            Choose an amount
+          </label>
+          <div className="relative mt-2 rounded-md">
+            <div className="relative">
+              <input
+                id="amount"
+                name="amount"
+                type="number"
+                defaultValue={invoice.amount}
+                placeholder="Enter USD amount"
+                className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+                aria-describedby="amount-error"
+                style={{ MozAppearance: 'textfield' } as React.CSSProperties}
+              />
+              <CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
+            </div>
+          </div>
+
+          {state.errors?.amount ? (
+            <div
+              id="amount-error"
+              aria-live="polite"
+              className="mt-2 text-sm text-red-500"
+            >
+              {state.errors.amount.map((error: string) => (
+                <p key={error}>{error}</p>
+              ))}
+            </div>
+          ) : null}
         </div>
-      </form>
-    </div>
+
+        {/* Invoice Status */}
+        <div>
+          <label htmlFor="status" className="mb-2 block text-sm font-medium">
+            Set the invoice status
+          </label>
+          <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
+            <div className="flex gap-4">
+              <div className="flex items-center">
+                <input
+                  id="pending"
+                  name="status"
+                  type="radio"
+                  value="pending"
+                  defaultChecked={invoice.status === 'pending'}
+                  className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
+                />
+                <label
+                  htmlFor="pending"
+                  className="ml-2 flex items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300"
+                >
+                  Pending <ClockIcon className="h-4 w-4" />
+                </label>
+              </div>
+              <div className="flex items-center">
+                <input
+                  id="paid"
+                  name="status"
+                  type="radio"
+                  value="paid"
+                  defaultChecked={invoice.status === 'paid'}
+                  className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
+                />
+                <label
+                  htmlFor="paid"
+                  className="ml-2 flex items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white dark:text-gray-300"
+                >
+                  Paid <CheckIcon className="h-4 w-4" />
+                </label>
+              </div>
+            </div>
+          </div>
+          {state.errors?.status ? (
+            <div
+              aria-describedby="status-error"
+              aria-live="polite"
+              className="mt-2 text-sm text-red-500"
+            >
+              {state.errors.status.map((error: string) => (
+                <p key={error}>{error}</p>
+              ))}
+            </div>
+          ) : null}
+        </div>
+
+        {state.message ? (
+          <div aria-live="polite" className="my-2 text-sm text-red-500">
+            <p>{state.message}</p>
+          </div>
+        ) : null}
+      </div>
+      <div className="mt-6 flex justify-end gap-4">
+        <Link
+          href="/dashboard/invoices"
+          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
+        </Link>
+        <Button type="submit">Edit Invoice</Button>
+      </div>
+    </form>
   );
 }

dashboard/15-final/app/ui/invoices/pagination.tsx

@@ -1,77 +1,124 @@
 'use client';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
-import { usePathname, useSearchParams } from 'next/navigation';
 import clsx from 'clsx';
 import Link from 'next/link';
+import { generatePagination } from '@/app/lib/utils';
+import { usePathname, useSearchParams } from 'next/navigation';
 
-export default function Pagination({
-  currentPage,
-  totalPages,
-}: {
-  currentPage: number;
-  totalPages: number;
-}) {
+export default function Pagination({ totalPages }: { totalPages: number }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const currentPage = Number(searchParams.get('page')) || 1;
 
-  const allPages = Array.from({ length: totalPages }, (_, i) => i + 1);
-  const PreviousPageTag = Link;
-  const NextPageTag = Link;
-
-  const createPageUrl = (pageNumber: number) => {
+  const createPageURL = (pageNumber: number | string) => {
     const params = new URLSearchParams(searchParams);
     params.set('page', pageNumber.toString());
     return `${pathname}?${params.toString()}`;
   };
 
+  const allPages = generatePagination(currentPage, totalPages);
+
   return (
     <div className="inline-flex">
-      <PreviousPageTag
-        href={createPageUrl(currentPage - 1)}
-        className={clsx(
-          'mr-4 flex h-10 w-10 items-center justify-center rounded-md ring-1 ring-inset ring-gray-300 hover:bg-gray-100',
-          {
-            'pointer-events-none text-gray-300 hover:bg-transparent':
-              currentPage === 1,
-          },
-        )}
-      >
-        <ArrowLeftIcon className="w-4" />
-      </PreviousPageTag>
-      <div className="flex -space-x-px ">
-        {allPages.map((page, i) => {
-          const PageTag = page === currentPage ? 'p' : Link;
+      <PaginationArrow
+        direction="left"
+        href={createPageURL(currentPage - 1)}
+        isDisabled={currentPage <= 1}
+      />
+
+      <div className="flex -space-x-px">
+        {allPages.map((page, index) => {
+          let position: 'first' | 'last' | 'single' | 'middle' | undefined;
+
+          if (index === 0) position = 'first';
+          if (index === allPages.length - 1) position = 'last';
+          if (allPages.length === 1) position = 'single';
+          if (page === '...') position = 'middle';
+
           return (
-            <PageTag
+            <PaginationNumber
               key={page}
-              href={createPageUrl(page)}
-              className={clsx(
-                i === 0 && 'rounded-l-md',
-                i === allPages.length - 1 && 'rounded-r-md',
-                'flex h-10 w-10 items-center justify-center text-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100',
-                {
-                  'z-10 bg-blue-600 text-white ring-blue-600':
-                    currentPage === page,
-                },
-              )}
-            >
-              {page}
-            </PageTag>
+              href={createPageURL(page)}
+              page={page}
+              position={position}
+              isActive={currentPage === page}
+            />
           );
         })}
       </div>
-      <NextPageTag
-        href={createPageUrl(currentPage + 1)}
-        className={clsx(
-          'ml-4 flex h-10 w-10 items-center justify-center rounded-md ring-1 ring-inset ring-gray-300 hover:bg-gray-100',
-          {
-            'text-gray-300': currentPage === totalPages,
-          },
-        )}
-      >
-        <ArrowRightIcon className="w-4" />
-      </NextPageTag>
+
+      <PaginationArrow
+        direction="right"
+        href={createPageURL(currentPage + 1)}
+        isDisabled={currentPage >= totalPages}
+      />
     </div>
   );
 }
+
+function PaginationNumber({
+  page,
+  href,
+  isActive,
+  position,
+}: {
+  page: number | string;
+  href: string;
+  position?: 'first' | 'last' | 'middle' | 'single';
+  isActive: boolean;
+}) {
+  const className = clsx(
+    'flex h-10 w-10 items-center justify-center text-sm border',
+    {
+      'rounded-l-md': position === 'first' || position === 'single',
+      'rounded-r-md': position === 'last' || position === 'single',
+      'z-10 bg-blue-600 border-blue-600 text-white': isActive,
+      'hover:bg-gray-100': !isActive && position !== 'middle',
+      'text-gray-300': position === 'middle',
+    },
+  );
+
+  return isActive || position === 'middle' ? (
+    <div className={className}>{page}</div>
+  ) : (
+    <Link href={href} className={className}>
+      {page}
+    </Link>
+  );
+}
+
+function PaginationArrow({
+  href,
+  direction,
+  isDisabled,
+}: {
+  href: string;
+  direction: 'left' | 'right';
+  isDisabled?: boolean;
+}) {
+  const className = clsx(
+    'flex h-10 w-10 items-center justify-center rounded-md border',
+    {
+      'pointer-events-none text-gray-300': isDisabled,
+      'hover:bg-gray-100': !isDisabled,
+      'mr-2 md:mr-4': direction === 'left',
+      'ml-2 md:ml-4': direction === 'right',
+    },
+  );
+
+  const icon =
+    direction === 'left' ? (
+      <ArrowLeftIcon className="w-4" />
+    ) : (
+      <ArrowRightIcon className="w-4" />
+    );
+
+  return isDisabled ? (
+    <div className={className}>{icon}</div>
+  ) : (
+    <Link className={className} href={href}>
+      {icon}
+    </Link>
+  );
+}

dashboard/15-final/app/ui/invoices/table.tsx

@@ -2,138 +2,121 @@ import Image from 'next/image';
 import { UpdateInvoice, DeleteInvoice } from '@/app/ui/invoices/buttons';
 import InvoiceStatus from '@/app/ui/invoices/status';
 import { formatDateToLocal, formatCurrency } from '@/app/lib/utils';
-import { InvoicesTable } from '@/app/lib/definitions';
+import { fetchFilteredInvoices } from '@/app/lib/data';
 
 export default async function InvoicesTable({
-  invoices,
+  query,
+  currentPage,
 }: {
-  invoices: InvoicesTable[];
+  query: string;
+  currentPage: number;
 }) {
-  const styles = `
-    /* Round top-left and top-right corners of the first row in tbody */
-    tbody tr:first-child td:first-child {
-        border-top-left-radius: 8px;
-    }
-    tbody tr:first-child td:last-child {
-        border-top-right-radius: 8px;
-    }
+  const invoices = await fetchFilteredInvoices(query, currentPage);
 
-    /* Round bottom-left and bottom-right corners of the last row in tbody */
-    tbody tr:last-child td:first-child {
-        border-bottom-left-radius: 8px;
-    }
-    tbody tr:last-child td:last-child {
-        border-bottom-right-radius: 8px;
-    }
-  `;
   return (
     <div className="mt-6 flow-root">
-      <style>{styles}</style>
-      <div>
-        <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) => (
-                <div
-                  key={invoice.id}
-                  className="mb-2 w-full rounded-md bg-white p-4"
-                >
-                  <div className="flex items-center justify-between border-b pb-4">
-                    <div>
-                      <div className="mb-2 flex items-center">
-                        <Image
-                          src={invoice.image_url}
-                          className="mr-2 rounded-full"
-                          width={28}
-                          height={28}
-                          alt={`${invoice.name}'s profile picture`}
-                        />
-                        <p>{invoice.name}</p>
-                      </div>
-                      <p className="text-sm text-gray-500">{invoice.email}</p>
+      <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) => (
+              <div
+                key={invoice.id}
+                className="mb-2 w-full rounded-md bg-white p-4"
+              >
+                <div className="flex items-center justify-between border-b pb-4">
+                  <div>
+                    <div className="mb-2 flex items-center">
+                      <Image
+                        src={invoice.image_url}
+                        className="mr-2 rounded-full"
+                        width={28}
+                        height={28}
+                        alt={`${invoice.name}'s profile picture`}
+                      />
+                      <p>{invoice.name}</p>
                     </div>
-                    <InvoiceStatus status={invoice.status} />
+                    <p className="text-sm text-gray-500">{invoice.email}</p>
                   </div>
-                  <div className="flex w-full items-center justify-between pt-4">
-                    <div>
-                      <p className="text-xl font-medium">
-                        {formatCurrency(invoice.amount)}
-                      </p>
-                      <p>{formatDateToLocal(invoice.date)}</p>
-                    </div>
-                    <div className="flex justify-end gap-2">
-                      <UpdateInvoice id={invoice.id} />
-                      <DeleteInvoice id={invoice.id} />
-                    </div>
+                  <InvoiceStatus status={invoice.status} />
+                </div>
+                <div className="flex w-full items-center justify-between pt-4">
+                  <div>
+                    <p className="text-xl font-medium">
+                      {formatCurrency(invoice.amount)}
+                    </p>
+                    <p>{formatDateToLocal(invoice.date)}</p>
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <UpdateInvoice id={invoice.id} />
+                    <DeleteInvoice id={invoice.id} />
                   </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 pb-4 pl-3 pr-6 pt-2 sm:pr-6"
-                  >
-                    <span className="sr-only">Edit</span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="bg-white">
-                {invoices?.map((invoice) => (
-                  <tr
-                    key={invoice.id}
-                    className="w-full border-b text-sm last-of-type:border-none"
-                  >
-                    <td className="whitespace-nowrap px-6 py-5">
-                      <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">
-                      <InvoiceStatus status={invoice.status} />
-                    </td>
-                    <td className="flex justify-end gap-2 whitespace-nowrap px-6 py-3">
+              </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">
+              {invoices?.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">
+                    <InvoiceStatus 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} />
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
         </div>
       </div>
     </div>

dashboard/15-final/app/ui/search.tsx

@@ -13,6 +13,9 @@ export default function Search({ placeholder }: { placeholder: string }) {
     console.log(`Searching... ${term}`);
 
     const params = new URLSearchParams(searchParams);
+
+    params.set('page', '1');
+
     if (term) {
       params.set('query', term);
     } else {