Merge branch 'main' into fix/button-import

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

@@ -229,7 +229,7 @@ export async function fetchFilteredCustomers(query: string) {
 
 export async function getUser(email: string) {
   try {
-    const user = await sql`SELECT * from USERS where email=${email}`;
+    const user = await sql`SELECT * FROM users WHERE email=${email}`;
     return user.rows[0] as User;
   } catch (error) {
     console.error('Failed to fetch user:', error);

dashboard/final-example/app/page.tsx

@@ -34,7 +34,7 @@ export default function Page() {
             src="/hero-desktop.png"
             width={1000}
             height={760}
-            alt="Screenshots of the dashboard project showing desktop and mobile versions"
+            alt="Screenshots of the dashboard project showing desktop version"
             className="hidden md:block"
           />
           <Image

dashboard/final-example/app/ui/login-form.tsx

@@ -12,11 +12,10 @@ import { Button } from './button';
 import { useFormState, useFormStatus } from 'react-dom';
 
 export default function LoginForm() {
-  const [code, action] = useFormState(authenticate, undefined);
-  const { pending } = useFormStatus();
+  const [state, dispatch] = useFormState(authenticate, undefined);
 
   return (
-    <form action={action} className="space-y-3">
+    <form action={dispatch} className="space-y-3">
       <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
         <h1 className={`${lusitana.className} mb-3 text-2xl`}>
           Please log in to continue.
@@ -64,7 +63,7 @@ export default function LoginForm() {
         </div>
         <LoginButton />
         <div className="flex h-8 items-end space-x-1">
-          {code === 'CredentialsSignin' && (
+          {state === 'CredentialsSignin' && (
             <>
               <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
               <p aria-live="polite" className="text-sm text-red-500">

dashboard/final-example/auth.ts

@@ -8,7 +8,7 @@ import { authConfig } from './auth.config';
 
 async function getUser(email: string): Promise<User | undefined> {
   try {
-    const user = await sql<User>`SELECT * from USERS where email=${email}`;
+    const user = await sql<User>`SELECT * FROM users WHERE email=${email}`;
     return user.rows[0];
   } catch (error) {
     console.error('Failed to fetch user:', error);

dashboard/final-example/package.json

@@ -15,7 +15,7 @@
     "autoprefixer": "10.4.15",
     "bcrypt": "^5.1.1",
     "clsx": "^2.0.0",
-    "next": "^14.0.0",
+    "next": "^14.0.2",
     "next-auth": "^5.0.0-beta.3",
     "postcss": "8.4.31",
     "react": "18.2.0",

dashboard/final-example/scripts/seed.js

@@ -10,7 +10,7 @@ const bcrypt = require('bcrypt');
 async function seedUsers(client) {
   try {
     await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
-    // Create the "invoices" table if it doesn't exist
+    // Create the "users" table if it doesn't exist
     const createTable = await client.sql`
       CREATE TABLE IF NOT EXISTS users (
         id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,

dashboard/starter-example/app/lib/data.ts

@@ -165,6 +165,7 @@ export async function fetchInvoiceById(id: string) {
     return invoice[0];
   } catch (error) {
     console.error('Database Error:', error);
+    throw new Error('Failed to fetch invoice.');
   }
 }
 
@@ -221,7 +222,7 @@ export async function fetchFilteredCustomers(query: string) {
 
 export async function getUser(email: string) {
   try {
-    const user = await sql`SELECT * from USERS where email=${email}`;
+    const user = await sql`SELECT * FROM users WHERE email=${email}`;
     return user.rows[0] as User;
   } catch (error) {
     console.error('Failed to fetch user:', error);

dashboard/starter-example/app/page.tsx

@@ -1,4 +1,5 @@
 import AcmeLogo from '@/app/ui/acme-logo';
+import { ArrowRightIcon } from '@heroicons/react/24/outline';
 
 import Link from 'next/link';
 export default function Page() {
@@ -20,7 +21,7 @@ export default function Page() {
             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>
+            <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">

dashboard/starter-example/app/ui/invoices/create-form.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { CustomerField } from '@/app/lib/definitions';
 import Link from 'next/link';
 import {

dashboard/starter-example/app/ui/invoices/table.tsx

@@ -31,7 +31,6 @@ export default async function InvoicesTable({
                         className="mr-2 rounded-full"
                         width={28}
                         height={28}
-                        alt={`${invoice.name}'s profile picture`}
                       />
                       <p>{invoice.name}</p>
                     </div>
@@ -90,7 +89,6 @@ export default async function InvoicesTable({
                         className="rounded-full"
                         width={28}
                         height={28}
-                        alt={`${invoice.name}'s profile picture`}
                       />
                       <p>{invoice.name}</p>
                     </div>