15 |
16 |
17 | Welcome to Acme. This is the example for the{' '}
18 |
19 | Next.js Learn Course
20 |
21 | , brought to you by Vercel.
22 |
23 |
25 |
29 |
Log in
30 |
31 |
32 |
33 | {/* Add Hero Images Here */}
34 |
41 |
48 |
49 |
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/app/query/route.ts:
--------------------------------------------------------------------------------
1 | import postgres from 'postgres';
2 |
3 | const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });
4 |
5 | async function listInvoices() {
6 | const data = await sql`
7 | SELECT invoices.amount, customers.name
8 | FROM invoices
9 | JOIN customers ON invoices.customer_id = customers.id
10 | WHERE invoices.amount = 666;
11 | `;
12 |
13 | return data;
14 | }
15 |
16 | export async function GET() {
17 | try {
18 | return Response.json(await listInvoices());
19 | } catch (error) {
20 | return Response.json({ error }, { status: 500 });
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/app/seed/route.ts:
--------------------------------------------------------------------------------
1 | import bcrypt from 'bcrypt';
2 | import postgres from 'postgres';
3 | import { invoices, customers, revenue, users } from '../lib/placeholder-data';
4 |
5 | const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });
6 |
7 | async function seedUsers() {
8 | await sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
9 | await sql`
10 | CREATE TABLE IF NOT EXISTS users (
11 | id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
12 | name VARCHAR(255) NOT NULL,
13 | email TEXT NOT NULL UNIQUE,
14 | password TEXT NOT NULL
15 | );
16 | `;
17 |
18 | const insertedUsers = await Promise.all(
19 | users.map(async (user) => {
20 | const hashedPassword = await bcrypt.hash(user.password, 10);
21 | return sql`
22 | INSERT INTO users (id, name, email, password)
23 | VALUES (${user.id}, ${user.name}, ${user.email}, ${hashedPassword})
24 | ON CONFLICT (id) DO NOTHING;
25 | `;
26 | }),
27 | );
28 |
29 | return insertedUsers;
30 | }
31 |
32 | async function seedInvoices() {
33 | await sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
34 |
35 | await sql`
36 | CREATE TABLE IF NOT EXISTS invoices (
37 | id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
38 | customer_id UUID NOT NULL,
39 | amount INT NOT NULL,
40 | status VARCHAR(255) NOT NULL,
41 | date DATE NOT NULL
42 | );
43 | `;
44 |
45 | const insertedInvoices = await Promise.all(
46 | invoices.map(
47 | (invoice) => sql`
48 | INSERT INTO invoices (customer_id, amount, status, date)
49 | VALUES (${invoice.customer_id}, ${invoice.amount}, ${invoice.status}, ${invoice.date})
50 | ON CONFLICT (id) DO NOTHING;
51 | `,
52 | ),
53 | );
54 |
55 | return insertedInvoices;
56 | }
57 |
58 | async function seedCustomers() {
59 | await sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
60 |
61 | await sql`
62 | CREATE TABLE IF NOT EXISTS customers (
63 | id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
64 | name VARCHAR(255) NOT NULL,
65 | email VARCHAR(255) NOT NULL,
66 | image_url VARCHAR(255) NOT NULL
67 | );
68 | `;
69 |
70 | const insertedCustomers = await Promise.all(
71 | customers.map(
72 | (customer) => sql`
73 | INSERT INTO customers (id, name, email, image_url)
74 | VALUES (${customer.id}, ${customer.name}, ${customer.email}, ${customer.image_url})
75 | ON CONFLICT (id) DO NOTHING;
76 | `,
77 | ),
78 | );
79 |
80 | return insertedCustomers;
81 | }
82 |
83 | async function seedRevenue() {
84 | await sql`
85 | CREATE TABLE IF NOT EXISTS revenue (
86 | month VARCHAR(4) NOT NULL UNIQUE,
87 | revenue INT NOT NULL
88 | );
89 | `;
90 |
91 | const insertedRevenue = await Promise.all(
92 | revenue.map(
93 | (rev) => sql`
94 | INSERT INTO revenue (month, revenue)
95 | VALUES (${rev.month}, ${rev.revenue})
96 | ON CONFLICT (month) DO NOTHING;
97 | `,
98 | ),
99 | );
100 |
101 | return insertedRevenue;
102 | }
103 |
104 | export async function GET() {
105 | try {
106 | const result = await sql.begin((sql) => [
107 | seedUsers(),
108 | seedCustomers(),
109 | seedInvoices(),
110 | seedRevenue(),
111 | ]);
112 |
113 | return Response.json({ message: 'Database seeded successfully' });
114 | } catch (error) {
115 | return Response.json({ error }, { status: 500 });
116 | }
117 | }
118 |
--------------------------------------------------------------------------------
/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 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/app/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 |
3 | interface ButtonProps extends React.ButtonHTMLAttributes
{
4 | children: React.ReactNode;
5 | }
6 |
7 | export function Button({ children, className, ...rest }: ButtonProps) {
8 | return (
9 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/app/ui/customers/table.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 | import { lusitana } from '@/app/ui/fonts';
3 | import Search from '@/app/ui/search';
4 | import {
5 | CustomersTableType,
6 | FormattedCustomersTable,
7 | } from '@/app/lib/definitions';
8 |
9 | export default async function CustomersTable({
10 | customers,
11 | }: {
12 | customers: FormattedCustomersTable[];
13 | }) {
14 | return (
15 |
16 |
17 | Customers
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | {customers?.map((customer) => (
26 |
30 |
31 |
32 |
33 |
34 |
41 |
{customer.name}
42 |
43 |
44 |
45 | {customer.email}
46 |
47 |
48 |
49 |
50 |
51 |
Pending
52 |
{customer.total_pending}
53 |
54 |
55 |
Paid
56 |
{customer.total_paid}
57 |
58 |
59 |
60 |
{customer.total_invoices} invoices
61 |
62 |
63 | ))}
64 |
65 |
66 |
67 |
68 | |
69 | Name
70 | |
71 |
72 | Email
73 | |
74 |
75 | Total Invoices
76 | |
77 |
78 | Total Pending
79 | |
80 |
81 | Total Paid
82 | |
83 |
84 |
85 |
86 |
87 | {customers.map((customer) => (
88 |
89 |
90 |
91 |
98 | {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 |
114 | ))}
115 |
116 |
117 |
118 |
119 |
120 |
121 |
54 |
55 | {Icon ? : null}
56 |
{title}
57 |
58 |
62 | {value}
63 |
64 |
11 |
12 | Latest Invoices
13 |
14 |
15 | {/* NOTE: Uncomment this code in Chapter 7 */}
16 |
17 |
18 | {latestInvoices.map((invoice, i) => {
19 | return (
20 |
29 |
30 |
37 |
38 |
39 | {invoice.name}
40 |
41 |
42 | {invoice.email}
43 |
44 |
45 |
46 |
49 | {invoice.amount}
50 |
51 |
52 | );
53 | })}
54 |
55 |
56 |
57 |
Updated just now
58 |
59 |
60 |
{link.name}
42 |
43 | );
44 | })}
45 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/app/ui/dashboard/revenue-chart.tsx:
--------------------------------------------------------------------------------
1 | import { generateYAxis } from '@/app/lib/utils';
2 | import { CalendarIcon } from '@heroicons/react/24/outline';
3 | import { lusitana } from '@/app/ui/fonts';
4 | import { Revenue } from '@/app/lib/definitions';
5 | import { fetchRevenue } from '@/app/lib/data';
6 |
7 | // This component is representational only.
8 | // For data visualization UI, check out:
9 | // https://www.tremor.so/
10 | // https://www.chartjs.org/
11 | // https://airbnb.io/visx/
12 |
13 | export default async function RevenueChart() {
14 | const revenue =await fetchRevenue();
15 | const chartHeight = 350;
16 | // NOTE: Uncomment this code in Chapter 7
17 |
18 | const { yAxisLabels, topLabel } = generateYAxis(revenue);
19 |
20 | if (!revenue || revenue.length === 0) {
21 | return No data available.
;
22 | }
23 |
24 | return (
25 |
26 |
27 | Recent Revenue
28 |
29 | {/* NOTE: Uncomment this code in Chapter 7 */}
30 |
31 |
32 |
33 |
37 | {yAxisLabels.map((label) => (
38 |
{label}
39 | ))}
40 |
41 |
42 | {revenue.map((month) => (
43 |
44 |
50 |
51 | {month.month}
52 |
53 |
54 | ))}
55 |
56 |
57 |
58 |
Last 12 months
59 |
60 |
61 |
28 |
33 |
34 |
35 | {allPages.map((page, index) => {
36 | let position: 'first' | 'last' | 'single' | 'middle' | undefined;
37 |
38 | if (index === 0) position = 'first';
39 | if (index === allPages.length - 1) position = 'last';
40 | if (allPages.length === 1) position = 'single';
41 | if (page === '...') position = 'middle';
42 |
43 | return (
44 |
51 | );
52 | })}
53 |
54 |
55 |
= totalPages}
59 | />
60 | {page}
89 | ) : (
90 |
91 | {page}
92 |
93 | );
94 | }
95 |
96 | function PaginationArrow({
97 | href,
98 | direction,
99 | isDisabled,
100 | }: {
101 | href: string;
102 | direction: 'left' | 'right';
103 | isDisabled?: boolean;
104 | }) {
105 | const className = clsx(
106 | 'flex h-10 w-10 items-center justify-center rounded-md border',
107 | {
108 | 'pointer-events-none text-gray-300': isDisabled,
109 | 'hover:bg-gray-100': !isDisabled,
110 | 'mr-2 md:mr-4': direction === 'left',
111 | 'ml-2 md:ml-4': direction === 'right',
112 | },
113 | );
114 |
115 | const icon =
116 | direction === 'left' ? (
117 |
118 | ) : (
119 |
120 | );
121 |
122 | return isDisabled ? (
123 | {icon}
124 | ) : (
125 |
126 | {icon}
127 |
128 | );
129 | }
130 |
--------------------------------------------------------------------------------
/app/ui/invoices/status.tsx:
--------------------------------------------------------------------------------
1 | import { CheckIcon, ClockIcon } from '@heroicons/react/24/outline';
2 | import clsx from 'clsx';
3 |
4 | export default function InvoiceStatus({ status }: { status: string }) {
5 | return (
6 |
15 | {status === 'pending' ? (
16 | <>
17 | Pending
18 |
19 |
20 | ) : null}
21 | {status === 'paid' ? (
22 | <>
23 | Paid
24 |
25 |
26 | ) : null}
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/app/ui/invoices/table.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 | import { UpdateInvoice, DeleteInvoice } from '@/app/ui/invoices/buttons';
3 | import InvoiceStatus from '@/app/ui/invoices/status';
4 | import { formatDateToLocal, formatCurrency } from '@/app/lib/utils';
5 | import { fetchFilteredInvoices } from '@/app/lib/data';
6 |
7 | export default async function InvoicesTable({
8 | query,
9 | currentPage,
10 | }: {
11 | query: string;
12 | currentPage: number;
13 | }) {
14 | const invoices = await fetchFilteredInvoices(query, currentPage);
15 |
16 | return (
17 |
18 |
19 |
20 |
21 | {invoices?.map((invoice) => (
22 |
26 |
27 |
28 |
29 |
36 |
{invoice.name}
37 |
38 |
{invoice.email}
39 |
40 |
41 |
42 |
43 |
44 |
45 | {formatCurrency(invoice.amount)}
46 |
47 |
{formatDateToLocal(invoice.date)}
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | ))}
56 |
57 |
58 |
59 |
60 | |
61 | Customer
62 | |
63 |
64 | Email
65 | |
66 |
67 | Amount
68 | |
69 |
70 | Date
71 | |
72 |
73 | Status
74 | |
75 |
76 | Edit
77 | |
78 |
79 |
80 |
81 | {invoices?.map((invoice) => (
82 |
86 |
87 |
88 |
95 | {invoice.name}
96 | |
98 |
99 | {invoice.email}
100 | |
101 |
102 | {formatCurrency(invoice.amount)}
103 | |
104 |
105 | {formatDateToLocal(invoice.date)}
106 | |
107 |
108 |
109 | |
110 |
111 |
112 |
113 |
114 |
115 | |
116 |
117 | ))}
118 |
119 |
120 |
121 |
122 |
26 |
29 | {
33 | handleSearch(e.target.value);
34 | }}
35 | defaultValue={searchParams.get('query')?.toString()}
36 | />
37 |
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/app/ui/skeletons.tsx:
--------------------------------------------------------------------------------
1 | // Loading animation
2 | const shimmer =
3 | 'before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent';
4 |
5 | export function CardSkeleton() {
6 | return (
7 |
18 | );
19 | }
20 |
21 | export function CardsSkeleton() {
22 | return (
23 | <>
24 |
25 |
26 |
27 |
28 |
29 | );
30 | }
31 |
32 | export function RevenueChartSkeleton() {
33 | return (
34 |
44 | );
45 | }
46 |
47 | export function InvoiceSkeleton() {
48 | return (
49 |
59 | );
60 | }
61 |
62 | export function LatestInvoicesSkeleton() {
63 | return (
64 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
80 |
81 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 | );
103 | }
104 |
105 | export function TableRowSkeleton() {
106 | return (
107 |
108 | {/* Customer Name and Image */}
109 | |
110 |
114 | |
115 | {/* Email */}
116 |
117 |
118 | |
119 | {/* Amount */}
120 |
121 |
122 | |
123 | {/* Date */}
124 |
125 |
126 | |
127 | {/* Status */}
128 |
129 |
130 | |
131 | {/* Actions */}
132 |
133 |
137 | |
138 |
139 | );
140 | }
141 |
142 | export function InvoicesMobileSkeleton() {
143 | return (
144 |
163 | );
164 | }
165 |
166 | export function InvoicesTableSkeleton() {
167 | return (
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 | |
183 | Customer
184 | |
185 |
186 | Email
187 | |
188 |
189 | Amount
190 | |
191 |
192 | Date
193 | |
194 |
195 | Status
196 | |
197 |
201 | Edit
202 | |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |