Update error page styles

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/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/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(),
 });
 
@@ -61,7 +63,7 @@ export async function createInvoice(prevState: State, formData: FormData) {
   } 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.',
     };
   }
 
@@ -95,14 +97,16 @@ export async function updateInvoice(prevState: State, formData: FormData) {
       WHERE id = ${id}
     `;
   } 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'),
   });
@@ -112,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.' };
   }
 }