404 Not Found
9 |Could not find the requested invoice.
10 | 14 | Go Back 15 | 16 |Customers Page
; 9 | } 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Next.js App Router Course - Starter 2 | 3 | This is the starter template for the Next.js App Router Course. It contains the starting code for the dashboard application. 4 | 5 | For more information, see the [course curriculum](https://nextjs.org/learn) on the Next.js Website. 6 | -------------------------------------------------------------------------------- /middleware.ts: -------------------------------------------------------------------------------- 1 | import NextAuth from 'next-auth'; 2 | import { authConfig } from './auth.config'; 3 | 4 | export default NextAuth(authConfig).auth; 5 | 6 | export const config = { 7 | // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher 8 | matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'], 9 | }; 10 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | # Copy from .env.local on the Vercel dashboard 2 | # https://nextjs.org/learn/dashboard-app/setting-up-your-database#create-a-postgres-database 3 | POSTGRES_URL= 4 | POSTGRES_PRISMA_URL= 5 | POSTGRES_URL_NON_POOLING= 6 | POSTGRES_USER= 7 | POSTGRES_HOST= 8 | POSTGRES_PASSWORD= 9 | POSTGRES_DATABASE= 10 | 11 | # `openssl rand -base64 32` 12 | AUTH_SECRET= 13 | AUTH_URL=http://localhost:3000/api/auth -------------------------------------------------------------------------------- /app/ui/global.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | input[type='number'] { 6 | -moz-appearance: textfield; 7 | appearance: textfield; 8 | } 9 | 10 | input[type='number']::-webkit-inner-spin-button { 11 | -webkit-appearance: none; 12 | margin: 0; 13 | } 14 | 15 | input[type='number']::-webkit-outer-spin-button { 16 | -webkit-appearance: none; 17 | margin: 0; 18 | } 19 | -------------------------------------------------------------------------------- /app/ui/acme-logo.tsx: -------------------------------------------------------------------------------- 1 | import { GlobeAltIcon } from '@heroicons/react/24/outline'; 2 | import { lusitana } from '@/app/ui/fonts'; 3 | 4 | export default function AcmeLogo() { 5 | return ( 6 |Acme
11 |Could not find the requested invoice.
10 | 14 | Go Back 15 | 16 |{link.name}
43 | 44 | ); 45 | })} 46 | 47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /app/dashboard/invoices/page.tsx: -------------------------------------------------------------------------------- 1 | import Pagination from '@/app/ui/invoices/pagination'; 2 | import Search from '@/app/ui/search'; 3 | import Table from '@/app/ui/invoices/table'; 4 | import { CreateInvoice } from '@/app/ui/invoices/buttons'; 5 | import { lusitana } from '@/app/ui/fonts'; 6 | import { InvoicesTableSkeleton } from '@/app/ui/skeletons'; 7 | import { Suspense } from 'react'; 8 | import { fetchInvoicesPages } from '@/app/lib/data'; 9 | import { Metadata } from 'next'; 10 | 11 | export const metadata: Metadata = { 12 | title: 'Invoices', 13 | }; 14 | 15 | export default async function Page({ 16 | searchParams, 17 | }: { 18 | searchParams?: { 19 | query?: string; 20 | page?: string; 21 | }; 22 | }) { 23 | const query = searchParams?.query || ''; 24 | const currentPage = Number(searchParams?.page) || 1; 25 | const totalPages = await fetchInvoicesPages(query); 26 | 27 | return ( 28 |62 | {value} 63 |
64 |19 | Welcome to Acme. This is the example for the{' '} 20 | 21 | Next.js Learn Course 22 | 23 | , brought to you by Vercel. 24 |
25 | 29 | Log inNo data available.
; 24 | } 25 | 26 | return ( 27 |{label}
41 | ))} 42 |53 | {month.month} 54 |
55 |42 | {invoice.name} 43 |
44 |45 | {invoice.email} 46 |
47 |52 | {invoice.amount} 53 |
54 |{invoice.name}
37 |{invoice.email}
39 |45 | {formatCurrency(invoice.amount)} 46 |
47 |{formatDateToLocal(invoice.date)}
48 || 61 | Customer 62 | | 63 |64 | Email 65 | | 66 |67 | Amount 68 | | 69 |70 | Date 71 | | 72 |73 | Status 74 | | 75 |76 | Edit 77 | | 78 |
|---|---|---|---|---|---|
|
87 |
88 |
97 | {invoice.name} 96 | |
98 | 99 | {invoice.email} 100 | | 101 |102 | {formatCurrency(invoice.amount)} 103 | | 104 |105 | {formatDateToLocal(invoice.date)} 106 | | 107 |
108 | |
110 |
111 |
112 |
115 | |
116 |
{customer.name}
42 |45 | {customer.email} 46 |
47 |Pending
52 |{customer.total_pending}
53 |Paid
56 |{customer.total_paid}
57 |{customer.total_invoices} invoices
61 || 69 | Name 70 | | 71 |72 | Email 73 | | 74 |75 | Total Invoices 76 | | 77 |78 | Total Pending 79 | | 80 |81 | Total Paid 82 | | 83 |
|---|---|---|---|---|
|
90 |
91 |
100 | {customer.name} 99 | |
101 | 102 | {customer.email} 103 | | 104 |105 | {customer.total_invoices} 106 | | 107 |108 | {customer.total_pending} 109 | | 110 |111 | {customer.total_paid} 112 | | 113 |
| 183 | Customer 184 | | 185 |186 | Email 187 | | 188 |189 | Amount 190 | | 191 |192 | Date 193 | | 194 |195 | Status 196 | | 197 |201 | Edit 202 | | 203 |
|---|