jknetl/nextjs-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: jknetl:406cea86a354b4d6f9c99dc513abe39b79592c2f
Branches Tags
jknetl:main
...
compare: jknetl:62b58918d0e638a89e82951af512ada5d7ad4b44
Branches Tags
jknetl:main

10 Commits
406cea86a3 ... 62b58918d0

Author SHA1 Message Date
Jakub Knetl
62b58918d0 Chapter 8 - use dynamic rendering and simulate timeout 2023-12-30 14:57:12 +01:00
Jakub Knetl
48c24de676 Chapter 7 - fetch data from server 2023-12-30 14:57:11 +01:00
Jakub Knetl
938c783e0f Chapter 5 - Highlight navigation 2023-12-27 14:28:32 +01:00
Jakub Knetl
e534c6d727 Chapter 5 - use next Link for navigation 2023-12-27 14:24:09 +01:00
Jakub Knetl
396e81bd41 Chapter 4 - add layout 2023-12-27 14:21:42 +01:00
Jakub Knetl
8b8b67b62c Chapter 4 - add routers for dashboard pages 2023-12-27 14:17:41 +01:00
Jakub Knetl
eb493e7893 Chapter 3 - add responsive image 2023-12-27 14:11:58 +01:00
Jakub Knetl
961cd66754 Chapter 3 - add fonts 2023-12-27 13:04:51 +01:00
Jakub Knetl
982169d4b0 Chapter 2 - add css module 2023-12-27 12:52:00 +01:00
Jakub Knetl
5a2b499001 Chapter 2 - add global CSS styles with tailwind to root layout 2023-12-27 07:35:47 +01:00
14 changed files with 134 additions and 30 deletions
Expand all files Collapse all files

3
app/dashboard/customers/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function CustomersPage() {
return <p>Customers page</p>
}

3
app/dashboard/invoices/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function InvoicesPage() {
return <p>Invoices page</p>
}

12
app/dashboard/layout.tsx Normal file
View File

@@ -0,0 +1,12 @@
import SideNav from '@/app/ui/dashboard/sidenav';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav />
</div>
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
);
}

39
app/dashboard/page.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { Card } from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';
import { fetchRevenue, fetchLatestInvoices, fetchCardData} from "@/app/lib/data";
export default async function Page() {
const revenue = await fetchRevenue();
const latestInvoices = await fetchLatestInvoices();
const {
numberOfInvoices,
numberOfCustomers,
totalPaidInvoices,
totalPendingInvoices,
} = await fetchCardData();
return (
<main>
<h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
Dashboard
</h1>
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<Card title="Collected" value={totalPaidInvoices} type="collected" />
<Card title="Pending" value={totalPendingInvoices} type="pending" />
<Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
<Card
title="Total Customers"
value={numberOfCustomers}
type="customers"
/>
</div>
<div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
<RevenueChart revenue={revenue} />
<LatestInvoices latestInvoices={latestInvoices} />
</div>
</main>
);
}

5
app/layout.tsx
View File

@@ -1,3 +1,6 @@
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
@@ -5,7 +8,7 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body>{children}</body> <body className={`${inter.className} antialiased`}>{children}</body>
</html> </html>
); );
} }

15
app/lib/data.ts
View File

@@ -9,21 +9,23 @@ import {
Revenue, Revenue,
} from './definitions'; } from './definitions';
import { formatCurrency } from './utils'; import { formatCurrency } from './utils';
import {unstable_noStore as noStore} from "next/cache";
export async function fetchRevenue() { export async function fetchRevenue() {
// Add noStore() here prevent the response from being cached. // Add noStore() here prevent the response from being cached.
// This is equivalent to in fetch(..., {cache: 'no-store'}). // This is equivalent to in fetch(..., {cache: 'no-store'}).
noStore()
try { try {
// Artificially delay a response for demo purposes. // Artificially delay a response for demo purposes.
// Don't do this in production :) // Don't do this in production :)
// console.log('Fetching revenue data...'); console.log('Fetching revenue data...');
// await new Promise((resolve) => setTimeout(resolve, 3000)); await new Promise((resolve) => setTimeout(resolve, 3000));
const data = await sql<Revenue>`SELECT * FROM revenue`; const data = await sql<Revenue>`SELECT * FROM revenue`;
// console.log('Data fetch completed after 3 seconds.'); console.log('Data fetch completed after 3 seconds.');
return data.rows; return data.rows;
} catch (error) { } catch (error) {
@@ -33,6 +35,7 @@ export async function fetchRevenue() {
} }
export async function fetchLatestInvoices() { export async function fetchLatestInvoices() {
noStore();
try { try {
const data = await sql<LatestInvoiceRaw>` const data = await sql<LatestInvoiceRaw>`
SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id
@@ -53,6 +56,7 @@ export async function fetchLatestInvoices() {
} }
export async function fetchCardData() { export async function fetchCardData() {
noStore();
try { try {
// You can probably combine these into a single SQL query // You can probably combine these into a single SQL query
// However, we are intentionally splitting them to demonstrate // However, we are intentionally splitting them to demonstrate
@@ -92,6 +96,7 @@ export async function fetchFilteredInvoices(
query: string, query: string,
currentPage: number, currentPage: number,
) { ) {
noStore();
const offset = (currentPage - 1) * ITEMS_PER_PAGE; const offset = (currentPage - 1) * ITEMS_PER_PAGE;
try { try {
@@ -124,6 +129,7 @@ export async function fetchFilteredInvoices(
} }
export async function fetchInvoicesPages(query: string) { export async function fetchInvoicesPages(query: string) {
noStore();
try { try {
const count = await sql`SELECT COUNT(*) const count = await sql`SELECT COUNT(*)
FROM invoices FROM invoices
@@ -145,6 +151,7 @@ export async function fetchInvoicesPages(query: string) {
} }
export async function fetchInvoiceById(id: string) { export async function fetchInvoiceById(id: string) {
noStore();
try { try {
const data = await sql<InvoiceForm>` const data = await sql<InvoiceForm>`
SELECT SELECT
@@ -170,6 +177,7 @@ export async function fetchInvoiceById(id: string) {
} }
export async function fetchCustomers() { export async function fetchCustomers() {
noStore();
try { try {
const data = await sql<CustomerField>` const data = await sql<CustomerField>`
SELECT SELECT
@@ -188,6 +196,7 @@ export async function fetchCustomers() {
} }
export async function fetchFilteredCustomers(query: string) { export async function fetchFilteredCustomers(query: string) {
noStore();
try { try {
const data = await sql<CustomersTableType>` const data = await sql<CustomersTableType>`
SELECT SELECT

18
app/page.tsx
View File

@@ -1,16 +1,21 @@
import styles from '@/app/ui/home.module.css';
import AcmeLogo from '@/app/ui/acme-logo'; import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline'; import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link'; import Link from 'next/link';
import {lusitana} from "@/app/ui/fonts";
import Image from 'next/image';
export default function Page() { export default function Page() {
return ( return (
<main className="flex min-h-screen flex-col p-6"> <main className="flex min-h-screen flex-col p-6">
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52"> <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
{/* <AcmeLogo /> */} <AcmeLogo />
</div> </div>
<div className="mt-4 flex grow flex-col gap-4 md:flex-row"> <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20"> <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
<p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}> <div className="h-0 w-0 border-b-[30px] border-l-[20px] border-r-[20px] border-b-black border-l-transparent border-r-transparent"/>
<div className={styles.shape}></div>
<p className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}>
<strong>Welcome to Acme.</strong> This is the example for the{' '} <strong>Welcome to Acme.</strong> This is the example for the{' '}
<a href="https://nextjs.org/learn/" className="text-blue-500"> <a href="https://nextjs.org/learn/" className="text-blue-500">
Next.js Learn Course Next.js Learn Course
@@ -21,11 +26,18 @@ export default function Page() {
href="/login" 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" 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> <ArrowRightIcon className="w-5 md:w-6" /> <span>Log in</span> <ArrowRightIcon className="w-5 md:w-6"/>
</Link> </Link>
</div> </div>
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12"> <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
{/* Add Hero Images Here */} {/* Add Hero Images Here */}
<Image
src="/hero-desktop.png"
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop version"
/>
</div> </div>
</div> </div>
</main> </main>

4
app/ui/dashboard/latest-invoices.tsx
View File

@@ -16,7 +16,7 @@ export default async function LatestInvoices({
<div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4"> <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
{/* NOTE: comment in this code when you get to this point in the course */} {/* NOTE: comment in this code when you get to this point in the course */}
{/* <div className="bg-white px-6"> <div className="bg-white px-6">
{latestInvoices.map((invoice, i) => { {latestInvoices.map((invoice, i) => {
return ( return (
<div <div
@@ -53,7 +53,7 @@ export default async function LatestInvoices({
</div> </div>
); );
})} })}
</div> */} </div>
<div className="flex items-center pb-2 pt-6"> <div className="flex items-center pb-2 pt-6">
<ArrowPathIcon className="h-5 w-5 text-gray-500" /> <ArrowPathIcon className="h-5 w-5 text-gray-500" />
<h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3> <h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>

18
app/ui/dashboard/nav-links.tsx
View File

@@ -1,9 +1,14 @@
'use client'
import { import {
UserGroupIcon, UserGroupIcon,
HomeIcon, HomeIcon,
DocumentDuplicateIcon, DocumentDuplicateIcon,
} from '@heroicons/react/24/outline'; } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
// Map of links to display in the side navigation. // Map of links to display in the side navigation.
// Depending on the size of the application, this would be stored in a database. // Depending on the size of the application, this would be stored in a database.
const links = [ const links = [
@@ -17,19 +22,24 @@ const links = [
]; ];
export default function NavLinks() { export default function NavLinks() {
const pathname = usePathname();
return ( return (
<> <>
{links.map((link) => { {links.map((link) => {
const LinkIcon = link.icon; const LinkIcon = link.icon;
return ( return (
<a <Link
key={link.name} key={link.name}
href={link.href} href={link.href}
className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3" className={clsx(
> 'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
{
'bg-sky-100 text-blue-600': pathname === link.href,
},
)} >
<LinkIcon className="w-6" /> <LinkIcon className="w-6" />
<p className="hidden md:block">{link.name}</p> <p className="hidden md:block">{link.name}</p>
</a> </Link>
); );
})} })}
</> </>

12
app/ui/dashboard/revenue-chart.tsx
View File

@@ -17,11 +17,11 @@ export default async function RevenueChart({
const chartHeight = 350; const chartHeight = 350;
// NOTE: comment in this code when you get to this point in the course // NOTE: comment in this code when you get to this point in the course
// const { yAxisLabels, topLabel } = generateYAxis(revenue); const { yAxisLabels, topLabel } = generateYAxis(revenue);
// if (!revenue || revenue.length === 0) { if (!revenue || revenue.length === 0) {
// return <p className="mt-4 text-gray-400">No data available.</p>; return <p className="mt-4 text-gray-400">No data available.</p>;
// } }
return ( return (
<div className="w-full md:col-span-4"> <div className="w-full md:col-span-4">
@@ -30,7 +30,7 @@ export default async function RevenueChart({
</h2> </h2>
{/* NOTE: comment in this code when you get to this point in the course */} {/* NOTE: comment in this code when you get to this point in the course */}
{/* <div className="rounded-xl bg-gray-50 p-4"> <div className="rounded-xl bg-gray-50 p-4">
<div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4"> <div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
<div <div
className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex" className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
@@ -59,7 +59,7 @@ export default async function RevenueChart({
<CalendarIcon className="h-5 w-5 text-gray-500" /> <CalendarIcon className="h-5 w-5 text-gray-500" />
<h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3> <h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
</div> </div>
</div> */} </div>
</div> </div>
); );
} }

5
app/ui/fonts.ts Normal file
View File

@@ -0,0 +1,5 @@
import { Inter, Lusitana } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });
export const lusitana = Lusitana({weight: "400", subsets: ['latin']});

7
app/ui/home.module.css Normal file
View File

@@ -0,0 +1,7 @@
.shape {
height: 0;
width: 0;
border-bottom: 30px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}

16
package-lock.json generated
View File

@@ -1,5 +1,5 @@
{ {
"name": "nextjs-dashboard2", "name": "nextjs-dashboard",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
@@ -1534,12 +1534,12 @@
"dev": true "dev": true
}, },
"node_modules/@vercel/postgres": { "node_modules/@vercel/postgres": {
"version": "0.5.0", "version": "0.5.1",
"resolved": "https://registry.npmjs.org/@vercel/postgres/-/postgres-0.5.0.tgz", "resolved": "https://registry.npmjs.org/@vercel/postgres/-/postgres-0.5.1.tgz",
"integrity": "sha512-MFWp9SZmADqBe2x2mzEvwmGLiwOd8PVkUxYeBZx/RqdHl0bd8/1BH0zBR+zSimGyi9P/MVtZoJLdf5dkWw9m5Q==", "integrity": "sha512-JKl8QOBIDnifhkxAhIKtY0A5Tb8oWBf2nzZhm0OH7Ffjsl0hGVnDL2w1/FCfpX8xna3JAWM034NGuhZfTFdmiw==",
"dependencies": { "dependencies": {
"@neondatabase/serverless": "0.6.0", "@neondatabase/serverless": "0.6.0",
"bufferutil": "4.0.7", "bufferutil": "4.0.8",
"utf-8-validate": "6.0.3", "utf-8-validate": "6.0.3",
"ws": "8.14.2" "ws": "8.14.2"
}, },
@@ -2037,9 +2037,9 @@
} }
}, },
"node_modules/bufferutil": { "node_modules/bufferutil": {
"version": "4.0.7", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz", "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz",
"integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==", "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==",
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
"node-gyp-build": "^4.3.0" "node-gyp-build": "^4.3.0"

3
package.json
View File

@@ -5,7 +5,8 @@
"dev": "next dev", "dev": "next dev",
"prettier": "prettier --write --ignore-unknown .", "prettier": "prettier --write --ignore-unknown .",
"prettier:check": "prettier --check --ignore-unknown .", "prettier:check": "prettier --check --ignore-unknown .",
"start": "next start" "start": "next start",
"seed": "node -r dotenv/config ./scripts/seed.js"
}, },
"dependencies": { "dependencies": {
"@heroicons/react": "^2.0.18", "@heroicons/react": "^2.0.18",