+ Dashboard +
+
+
+
+
+
+ }>
+
+ } >
+
+
+ Could not find the requested invoice.
+ + Go Back + +Invoices Page
; + +import Pagination from '@/app/ui/invoices/pagination'; +import Search from '@/app/ui/search'; +import Table from '@/app/ui/invoices/table'; + + +import { CreateInvoice } from '@/app/ui/invoices/buttons'; +import { fetchInvoicesPages } from '@/app/lib/data'; +import { lusitana } from '@/app/ui/fonts'; +import { InvoicesTableSkeleton } from '@/app/ui/skeletons'; +import { Suspense } from 'react'; + +export default async function Page({ + searchParams, +}: { + searchParams?: { + query?: string; + page?: string; + }; +}) { + + const query = searchParams?.query || ''; + const currentPage = Number(searchParams?.page) || 1; + const totalPages = await fetchInvoicesPages(query); + + + return ( +Dashboard Page
; -} \ No newline at end of file diff --git a/app/lib/actions.ts b/app/lib/actions.ts new file mode 100644 index 0000000..8cc337a --- /dev/null +++ b/app/lib/actions.ts @@ -0,0 +1,146 @@ +'use server'; +import { z } from 'zod'; +import { sql } from '@vercel/postgres'; +import { revalidatePath } from 'next/cache'; +import { redirect } from 'next/navigation'; +import { signIn } from '@/auth'; +import { AuthError } from 'next-auth'; + + +export async function authenticate( + prevState: string | undefined, + formData: FormData, +) { + try { + await signIn('credentials', FormData); + } catch (error) { + if (error instanceof AuthError) { + switch (error.type) { + case 'CredentialsSignin': + return 'Invalid credentials.'; + default: + return 'Something went wrong.'; + } + } + throw error; + } +} + +const FormSchema = z.object({ + id: z.string(), + customerId: z.string({ + invalid_type_error: 'Please select a customer.' + }), + amount: z.coerce + .number() + .gt(0, { message: 'Amount must be greater than 0.' }) + , + status: z.enum(['pending', 'paid'], { + invalid_type_error: 'Please select an invoice status.' + }), + date: z.string(), +}); + + + +export type State = { + errors?: { + customerId?: string[]; + amount?: string[]; + status?: string[]; + }; + message?: string | null; +}; + + +// Use Zod to update the expected types +const UpdateInvoice = FormSchema.omit({ id: true, date: true }); +const CreateInvoice = FormSchema.omit({ id: true, data: true }) + +// ... +export async function createInvoice(prevState: State, formData: FormData) { + const date = new Date().toISOString().split('T')[0]; + // Validate form using Zod + const validatedFields = CreateInvoice.safeParse({ + customerId: formData.get('customerId'), + amount: formData.get('amount'), + status: formData.get('status'), + date: date, + }); + + // If form validation fails, return errors early. Otherwise, continue. + if (!validatedFields.success) { + return { + errors: validatedFields.error.flatten().fieldErrors, + message: 'Missing Fields. Failed to Create Invoice.', + }; + } + + // Prepare data for insertion into the database + const { customerId, amount, status } = validatedFields.data; + const amountInCents = amount * 100; + + // Insert data into the database + try { + await sql` + INSERT INTO invoices (customer_id, amount, status, date) + VALUES (${customerId}, ${amountInCents}, ${status}, ${date}) + `; + } catch (error) { + // If a database error occurs, return a more specific error. + return { + message: 'Database Error: Failed to Create Invoice.', + }; + } + + // Revalidate the cache for the invoices page and redirect the user. + revalidatePath('/dashboard/invoices'); + redirect('/dashboard/invoices'); +} + +export async function updateInvoice( + id: string, + prevState: State, + formData: FormData, +) { + const validatedFields = UpdateInvoice.safeParse({ + customerId: formData.get('customerId'), + amount: formData.get('amount'), + status: formData.get('status'), + }); + + if (!validatedFields.success) { + return { + errors: validatedFields.error.flatten().fieldErrors, + message: 'Missing Fields. Failed to Update Invoice.', + }; + } + + const { customerId, amount, status } = validatedFields.data; + const amountInCents = amount * 100; + + try { + await sql` + UPDATE invoices + SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status} + WHERE id = ${id} + `; + } catch (error) { + return { message: 'Database Error: Failed to Update Invoice.' }; + } + + revalidatePath('/dashboard/invoices'); + redirect('/dashboard/invoices'); +} + + +export async function deleteInvoice(id: string) { + + try { + await sql`DELETE FROM invoices WHERE id = ${id}`; + } catch (error) { + return { message: 'Database Error: Failed to delete invoice.' } + } + + revalidatePath('/dashboard/invoices'); +} diff --git a/app/lib/data.ts b/app/lib/data.ts index 3e32426..f987b5e 100644 --- a/app/lib/data.ts +++ b/app/lib/data.ts @@ -1,4 +1,5 @@ import { sql } from '@vercel/postgres'; + import { CustomerField, CustomersTableType, @@ -11,6 +12,7 @@ import { import { formatCurrency } from './utils'; export async function fetchRevenue() { + await new Promise((resolve) => setTimeout(resolve, 3000)); // Add noStore() here to prevent the response from being cached. // This is equivalent to in fetch(..., {cache: 'no-store'}). @@ -34,6 +36,7 @@ export async function fetchRevenue() { export async function fetchLatestInvoices() { try { + await new Promise((resolve) => setTimeout(resolve, 5000)); const data = await sqlNo data available.
; - // } + if (!revenue || revenue.length === 0) { + returnNo data available.
; + } return (+ {error} +
+ ))} ++ {error} +
+ ))} ++ {state.message} +
+ ) + } +