├── public
    ├── favicon.ico
    ├── hero-desktop.png
    ├── hero-mobile.png
    ├── opengraph-image.png
    └── customers
    │   ├── amy-burns.png
    │   ├── balazs-orban.png
    │   ├── evil-rabbit.png
    │   ├── lee-robinson.png
    │   ├── michael-novotny.png
    │   └── delba-de-oliveira.png
├── app
    ├── dashboard
    │   ├── customers
    │   │   └── page.tsx
    │   ├── (overview)
    │   │   ├── loading.tsx
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   └── invoices
    │   │   ├── create
    │   │       └── page.tsx
    │   │   ├── [id]
    │   │       └── edit
    │   │       │   ├── not-found.tsx
    │   │       │   └── page.tsx
    │   │   └── page.tsx
    ├── ui
    │   ├── home.module.css
    │   ├── fonts.ts
    │   ├── global.css
    │   ├── acme-logo.tsx
    │   ├── button.tsx
    │   ├── invoices
    │   │   ├── status.tsx
    │   │   ├── edit-form.tsx
    │   │   ├── error.tsx
    │   │   ├── breadcrumbs.tsx
    │   │   ├── buttons.tsx
    │   │   ├── pagination.tsx
    │   │   ├── create-form.tsx
    │   │   └── table.tsx
    │   ├── dashboard
    │   │   ├── sidenav.tsx
    │   │   ├── nav-links.tsx
    │   │   ├── cards.tsx
    │   │   ├── revenue-chart.tsx
    │   │   └── latest-invoices.tsx
    │   ├── search.tsx
    │   ├── login-form.tsx
    │   ├── customers
    │   │   └── table.tsx
    │   └── skeletons.tsx
    ├── login
    │   └── page.tsx
    ├── layout.tsx
    ├── auth.ts
    ├── page.tsx
    ├── lib
    │   ├── utils.ts
    │   ├── definitions.ts
    │   ├── placeholder-data.ts
    │   ├── actions.ts
    │   └── data.ts
    └── seed
    │   └── route.ts
├── postcss.config.js
├── .eslintrc.json
├── next.config.mjs
├── README.md
├── middleware.ts
├── .gitignore
├── auth.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/nextjs-dashboard/main/public/favicon.ico


--------------------------------------------------------------------------------
/app/dashboard/customers/page.tsx:
--------------------------------------------------------------------------------
1 | export default function Page() {
2 |   return <p>Customers Page</p>;
3 | }
4 | 


--------------------------------------------------------------------------------
/public/hero-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/nextjs-dashboard/main/public/hero-desktop.png


--------------------------------------------------------------------------------
/public/hero-mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/nextjs-dashboard/main/public/hero-mobile.png


--------------------------------------------------------------------------------
/public/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/nextjs-dashboard/main/public/opengraph-image.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/public/customers/amy-burns.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/nextjs-dashboard/main/public/customers/amy-burns.png


--------------------------------------------------------------------------------
/public/customers/balazs-orban.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/nextjs-dashboard/main/public/customers/balazs-orban.png


--------------------------------------------------------------------------------
/public/customers/evil-rabbit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/nextjs-dashboard/main/public/customers/evil-rabbit.png


--------------------------------------------------------------------------------
/public/customers/lee-robinson.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/nextjs-dashboard/main/public/customers/lee-robinson.png


--------------------------------------------------------------------------------
/public/customers/michael-novotny.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/nextjs-dashboard/main/public/customers/michael-novotny.png


--------------------------------------------------------------------------------
/public/customers/delba-de-oliveira.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/nextjs-dashboard/main/public/customers/delba-de-oliveira.png


--------------------------------------------------------------------------------
/app/dashboard/(overview)/loading.tsx:
--------------------------------------------------------------------------------
1 | import DashboardSkeleton from '@/app/ui/skeletons';
2 | 
3 | export default function Loading() {
4 |   return <DashboardSkeleton />;
5 | }
6 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "next/core-web-vitals",
 4 |     "next/typescript"
 5 |   ],
 6 |   "rules": {
 7 |     "@typescript-eslint/no-unused-vars": "off"
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/app/ui/home.module.css:
--------------------------------------------------------------------------------
1 | .shape {
2 |   height: 0;
3 |   width: 0;
4 |   border-bottom: 30px solid black;
5 |   border-left: 20px solid transparent;
6 |   border-right: 20px solid transparent;
7 | }
8 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | 
 3 | const nextConfig = {
 4 |   experimental: {
 5 |     ppr: 'incremental',
 6 |   },
 7 | };
 8 | 
 9 | export default nextConfig;
10 | 


--------------------------------------------------------------------------------
/app/ui/fonts.ts:
--------------------------------------------------------------------------------
1 | import { Inter } from 'next/font/google';
2 | import { Lusitana } from 'next/font/google';
3 |  
4 | export const inter = Inter({ subsets: ['latin'] });
5 | export const lusitana = Lusitana({ subsets: ['latin'], weight: '400' });
6 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 |     <div
 7 |       className={`${lusitana.className} flex flex-row items-center leading-none text-white`}
 8 |     >
 9 |       <GlobeAltIcon className="h-12 w-12 rotate-[15deg]" />
10 |       <p className="text-[44px]">Acme</p>
11 |     </div>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/app/dashboard/layout.tsx:
--------------------------------------------------------------------------------
 1 | import SideNav from '@/app/ui/dashboard/sidenav';
 2 | 
 3 | export const experimental_ppr = true;
 4 | 
 5 | export default function Layout({ children }: { children: React.ReactNode }) {
 6 |   return (
 7 |     <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
 8 |       <div className="w-full flex-none md:w-64">
 9 |         <SideNav />
10 |       </div>
11 |       <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
12 |     </div>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | .env
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/app/login/page.tsx:
--------------------------------------------------------------------------------
 1 | import AcmeLogo from '@/app/ui/acme-logo';
 2 | import LoginForm from '@/app/ui/login-form';
 3 |  
 4 | export default function LoginPage() {
 5 |   return (
 6 |     <main className="flex items-center justify-center md:h-screen">
 7 |       <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
 8 |         <div className="flex h-20 w-full items-end rounded-lg bg-blue-500 p-3 md:h-36">
 9 |           <div className="w-32 text-white md:w-36">
10 |             <AcmeLogo />
11 |           </div>
12 |         </div>
13 |         <LoginForm />
14 |       </div>
15 |     </main>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import '@/app/ui/global.css';
 2 | import { inter } from '@/app/ui/fonts';
 3 | import { Metadata } from 'next';
 4 | 
 5 | export const metadata: Metadata = {
 6 |   title: {
 7 |     template: '%s | Acme Dashboard',
 8 |     default: 'Acme Dashboard',
 9 |   },
10 |   description: 'The official Next.js Course Dashboard, built with App Router.',
11 |   metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
12 | };
13 | 
14 | export default function RootLayout({
15 |   children,
16 | }: {
17 |   children: React.ReactNode;
18 | }) {
19 |   return (
20 |     <html lang="en">
21 |       <body className={`${inter.className} antialiased`}>{children}</body>
22 |     </html>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/app/dashboard/invoices/create/page.tsx:
--------------------------------------------------------------------------------
 1 | import Form from '@/app/ui/invoices/create-form';
 2 | import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
 3 | import { fetchCustomers } from '@/app/lib/data';
 4 |  
 5 | export default async function Page() {
 6 |   const customers = await fetchCustomers();
 7 |  
 8 |   return (
 9 |     <main>
10 |       <Breadcrumbs
11 |         breadcrumbs={[
12 |           { label: 'Invoices', href: '/dashboard/invoices' },
13 |           {
14 |             label: 'Create Invoice',
15 |             href: '/dashboard/invoices/create',
16 |             active: true,
17 |           },
18 |         ]}
19 |       />
20 |       <Form customers={customers} />
21 |     </main>
22 |   );
23 | }


--------------------------------------------------------------------------------
/app/dashboard/invoices/[id]/edit/not-found.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import { FaceFrownIcon } from '@heroicons/react/24/outline';
 3 |  
 4 | export default function NotFound() {
 5 |   return (
 6 |     <main className="flex h-full flex-col items-center justify-center gap-2">
 7 |       <FaceFrownIcon className="w-10 text-gray-400" />
 8 |       <h2 className="text-xl font-semibold">404 Not Found</h2>
 9 |       <p>Could not find the requested invoice.</p>
10 |       <Link
11 |         href="/dashboard/invoices"
12 |         className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
13 |       >
14 |         Go Back
15 |       </Link>
16 |     </main>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/app/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx';
 2 | 
 3 | interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 4 |   children: React.ReactNode;
 5 | }
 6 | 
 7 | export function Button({ children, className, ...rest }: ButtonProps) {
 8 |   return (
 9 |     <button
10 |       {...rest}
11 |       className={clsx(
12 |         'flex h-10 items-center rounded-lg bg-blue-500 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:bg-blue-600 aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
13 |         className,
14 |       )}
15 |     >
16 |       {children}
17 |     </button>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/auth.config.ts:
--------------------------------------------------------------------------------
 1 | import type { NextAuthConfig } from 'next-auth';
 2 |  
 3 | export const authConfig = {
 4 |   pages: {
 5 |     signIn: '/login',
 6 |   },
 7 |   callbacks: {
 8 |     authorized({ auth, request: { nextUrl } }) {
 9 |       const isLoggedIn = !!auth?.user;
10 |       const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');
11 |       if (isOnDashboard) {
12 |         if (isLoggedIn) return true;
13 |         return false; // Redirect unauthenticated users to login page
14 |       } else if (isLoggedIn) {
15 |         return Response.redirect(new URL('/dashboard', nextUrl));
16 |       }
17 |       return true;
18 |     },
19 |   },
20 |   providers: [], // Add providers with an empty array for now
21 | } satisfies NextAuthConfig;
22 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss';
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     './pages/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './components/**/*.{js,ts,jsx,tsx,mdx}',
 7 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       gridTemplateColumns: {
12 |         '13': 'repeat(13, minmax(0, 1fr))',
13 |       },
14 |       colors: {
15 |         blue: {
16 |           400: '#2589FE',
17 |           500: '#0070F3',
18 |           600: '#2F6FEB',
19 |         },
20 |       },
21 |     },
22 |     keyframes: {
23 |       shimmer: {
24 |         '100%': {
25 |           transform: 'translateX(100%)',
26 |         },
27 |       },
28 |     },
29 |   },
30 |   plugins: [require('@tailwindcss/forms')],
31 | };
32 | export default config;
33 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "baseUrl": ".",
22 |     "paths": {
23 |       "@/*": ["./*"]
24 |     }
25 |   },
26 |   "include": [
27 |     "next-env.d.ts",
28 |     "**/*.ts",
29 |     "**/*.tsx",
30 |     ".next/types/**/*.ts",
31 |     "app/lib/placeholder-data.ts",
32 |     "scripts/seed.js"
33 |   ],
34 |   "exclude": ["node_modules"]
35 | }
36 | 


--------------------------------------------------------------------------------
/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 |     <span
 7 |       className={clsx(
 8 |         'inline-flex items-center rounded-full px-2 py-1 text-xs',
 9 |         {
10 |           'bg-gray-100 text-gray-500': status === 'pending',
11 |           'bg-green-500 text-white': status === 'paid',
12 |         },
13 |       )}
14 |     >
15 |       {status === 'pending' ? (
16 |         <>
17 |           Pending
18 |           <ClockIcon className="ml-1 w-4 text-gray-500" />
19 |         </>
20 |       ) : null}
21 |       {status === 'paid' ? (
22 |         <>
23 |           Paid
24 |           <CheckIcon className="ml-1 w-4 text-white" />
25 |         </>
26 |       ) : null}
27 |     </span>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/app/ui/invoices/edit-form.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { updateInvoice, State } from '@/app/lib/actions';
 4 | import { useActionState } from 'react';
 5 | import { CustomerField, InvoiceForm } from '@/app/lib/definitions';
 6 | import {
 7 |   CheckIcon,
 8 |   ClockIcon,
 9 |   CurrencyDollarIcon,
10 |   UserCircleIcon,
11 | } from '@heroicons/react/24/outline';
12 | import Link from 'next/link';
13 | import { Button } from '@/app/ui/button';
14 | 
15 | export default function EditInvoiceForm({
16 |   invoice,
17 |   customers,
18 | }: {
19 |   invoice: InvoiceForm;
20 |   customers: CustomerField[];
21 | }) {
22 |   const initialState: State = { message: null, errors: {} };
23 |   const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);
24 |   const [state, formAction] = useActionState(updateInvoiceWithId, initialState);
25 |  
26 |   return <form action={formAction}></form>;
27 | }
28 | 


--------------------------------------------------------------------------------
/app/ui/invoices/error.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 |  
 3 | import { useEffect } from 'react';
 4 |  
 5 | export default function Error({
 6 |   error,
 7 |   reset,
 8 | }: {
 9 |   error: Error & { digest?: string };
10 |   reset: () => void;
11 | }) {
12 |   useEffect(() => {
13 |     // Optionally log the error to an error reporting service
14 |     console.error(error);
15 |   }, [error]);
16 |  
17 |   return (
18 |     <main className="flex h-full flex-col items-center justify-center">
19 |       <h2 className="text-center">Something went wrong!</h2>
20 |       <button
21 |         className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
22 |         onClick={
23 |           // Attempt to recover by trying to re-render the invoices route
24 |           () => reset()
25 |         }
26 |       >
27 |         Try again
28 |       </button>
29 |     </main>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/app/dashboard/invoices/[id]/edit/page.tsx:
--------------------------------------------------------------------------------
 1 | import Form from '@/app/ui/invoices/edit-form';
 2 | import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
 3 | import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';
 4 | import { notFound } from 'next/navigation';
 5 | 
 6 | export default async function Page({ params }: { params: { id: string } }) {
 7 |   const id = params.id;
 8 |   const [invoice, customers] = await Promise.all([
 9 |     fetchInvoiceById(id),
10 |     fetchCustomers(),
11 |   ]);
12 | 
13 |   if (!invoice) {
14 |     notFound();
15 |   }
16 | 
17 |   return (
18 |     <main>
19 |       <Breadcrumbs
20 |         breadcrumbs={[
21 |           { label: 'Invoices', href: '/dashboard/invoices' },
22 |           {
23 |             label: 'Edit Invoice',
24 |             href: `/dashboard/invoices/${id}/edit`,
25 |             active: true,
26 |           },
27 |         ]}
28 |       />
29 |       <Form invoice={invoice} customers={customers} />
30 |     </main>
31 |   );
32 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "next build",
 5 |     "dev": "next dev",
 6 |     "start": "next start",
 7 |     "lint": "next lint"
 8 |   },
 9 |   "dependencies": {
10 |     "@heroicons/react": "^2.1.4",
11 |     "@tailwindcss/forms": "^0.5.7",
12 |     "@vercel/postgres": "^0.8.0",
13 |     "autoprefixer": "10.4.19",
14 |     "bcrypt": "^5.1.1",
15 |     "clsx": "^2.1.1",
16 |     "next": "15.0.0-canary.56",
17 |     "next-auth": "5.0.0-beta.22",
18 |     "postcss": "8.4.38",
19 |     "react": "19.0.0-rc-f38c22b244-20240704",
20 |     "react-dom": "19.0.0-rc-f38c22b244-20240704",
21 |     "tailwindcss": "3.4.4",
22 |     "typescript": "5.5.2",
23 |     "use-debounce": "^10.0.1",
24 |     "zod": "^3.23.8"
25 |   },
26 |   "devDependencies": {
27 |     "@types/bcrypt": "^5.0.2",
28 |     "@types/node": "20.14.8",
29 |     "@types/react": "18.3.3",
30 |     "@types/react-dom": "18.3.0",
31 |     "eslint": "^8",
32 |     "eslint-config-next": "14.2.15"
33 |   },
34 |   "engines": {
35 |     "node": ">=20.12.0"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/app/ui/invoices/breadcrumbs.tsx:
--------------------------------------------------------------------------------
 1 | import { clsx } from 'clsx';
 2 | import Link from 'next/link';
 3 | import { lusitana } from '@/app/ui/fonts';
 4 | 
 5 | interface Breadcrumb {
 6 |   label: string;
 7 |   href: string;
 8 |   active?: boolean;
 9 | }
10 | 
11 | export default function Breadcrumbs({
12 |   breadcrumbs,
13 | }: {
14 |   breadcrumbs: Breadcrumb[];
15 | }) {
16 |   return (
17 |     <nav aria-label="Breadcrumb" className="mb-6 block">
18 |       <ol className={clsx(lusitana.className, 'flex text-xl md:text-2xl')}>
19 |         {breadcrumbs.map((breadcrumb, index) => (
20 |           <li
21 |             key={breadcrumb.href}
22 |             aria-current={breadcrumb.active}
23 |             className={clsx(
24 |               breadcrumb.active ? 'text-gray-900' : 'text-gray-500',
25 |             )}
26 |           >
27 |             <Link href={breadcrumb.href}>{breadcrumb.label}</Link>
28 |             {index < breadcrumbs.length - 1 ? (
29 |               <span className="mx-3 inline-block">/</span>
30 |             ) : null}
31 |           </li>
32 |         ))}
33 |       </ol>
34 |     </nav>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/app/ui/dashboard/sidenav.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import NavLinks from '@/app/ui/dashboard/nav-links';
 3 | import AcmeLogo from '@/app/ui/acme-logo';
 4 | import { PowerIcon } from '@heroicons/react/24/outline';
 5 | import { signOut } from '@/app/auth';
 6 | 
 7 | export default function SideNav() {
 8 |   return (
 9 |     <div className="flex h-full flex-col px-3 py-4 md:px-2">
10 |       <Link
11 |         className="mb-2 flex h-20 items-end justify-start rounded-md bg-blue-600 p-4 md:h-40"
12 |         href="/"
13 |       >
14 |         <div className="w-32 text-white md:w-40">
15 |           <AcmeLogo />
16 |         </div>
17 |       </Link>
18 |       <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
19 |         <NavLinks />
20 |         <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
21 |         <form action={async () => {
22 |             'use server';
23 |             await signOut();
24 |           }}
25 |         >
26 |           <button className="flex h-[48px] w-full 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">
27 |             <PowerIcon className="w-6" />
28 |             <div className="hidden md:block">Sign Out</div>
29 |           </button>
30 |         </form>
31 |       </div>
32 |     </div>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/app/ui/invoices/buttons.tsx:
--------------------------------------------------------------------------------
 1 | import { deleteInvoice } from '@/app/lib/actions';
 2 | import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
 3 | import Link from 'next/link';
 4 | 
 5 | export function CreateInvoice() {
 6 |   return (
 7 |     <Link
 8 |       href="/dashboard/invoices/create"
 9 |       className="flex h-10 items-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
10 |     >
11 |       <span className="hidden md:block">Create Invoice</span>{' '}
12 |       <PlusIcon className="h-5 md:ml-4" />
13 |     </Link>
14 |   );
15 | }
16 | 
17 | export function UpdateInvoice({ id }: { id: string }) {
18 |   return (
19 |     <Link
20 |       href={`/dashboard/invoices/${id}/edit`}
21 |       className="rounded-md border p-2 hover:bg-gray-100"
22 |     >
23 |       <PencilIcon className="w-5" />
24 |     </Link>
25 |   );
26 | }
27 | 
28 | export function DeleteInvoice({ id }: { id: string }) {
29 |   const deleteInvoiceWithId = deleteInvoice.bind(null, id);
30 | 
31 |   return (
32 |     <>
33 |       <form action={deleteInvoiceWithId}>
34 |         <button className="rounded-md border p-2 hover:bg-gray-100">
35 |           <span className="sr-only">Delete</span>
36 |           <TrashIcon className="w-5" />
37 |         </button>
38 |       </form>
39 |     </>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/app/auth.ts:
--------------------------------------------------------------------------------
 1 | import NextAuth from 'next-auth';
 2 | import Credentials from 'next-auth/providers/credentials';
 3 | import { authConfig } from 'auth.config';
 4 | import { z } from 'zod';
 5 | import { sql } from '@vercel/postgres';
 6 | import type { User } from '@/app/lib/definitions';
 7 | import bcrypt from 'bcrypt';
 8 |  
 9 | async function getUser(email: string): Promise<User | undefined> {
10 |   try {
11 |     const user = await sql<User>`SELECT * FROM users WHERE email=${email}`;
12 |     return user.rows[0];
13 |   } catch (error) {
14 |     console.error('Failed to fetch user:', error);
15 |     throw new Error('Failed to fetch user.');
16 |   }
17 | }
18 |  
19 | export const { auth, signIn, signOut } = NextAuth({
20 |   ...authConfig,
21 |   providers: [
22 |     Credentials({
23 |       async authorize(credentials) {
24 |         const parsedCredentials = z
25 |           .object({ email: z.string().email(), password: z.string().min(6) })
26 |           .safeParse(credentials);
27 |  
28 |         if (parsedCredentials.success) {
29 |           const { email, password } = parsedCredentials.data;
30 |           const user = await getUser(email);
31 |           if (!user) return null;
32 |           const passwordsMatch = await bcrypt.compare(password, user.password);
33 |  
34 |           if (passwordsMatch) return user;
35 |         }
36 |  
37 |         console.log('Invalid credentials');
38 |         return null;
39 |       },
40 |     }),
41 |   ],
42 | });


--------------------------------------------------------------------------------
/app/dashboard/(overview)/page.tsx:
--------------------------------------------------------------------------------
 1 | import CardWrapper from '@/app/ui/dashboard/cards';
 2 | import RevenueChart from '@/app/ui/dashboard/revenue-chart';
 3 | import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
 4 | import { lusitana } from '@/app/ui/fonts';
 5 | import { fetchLatestInvoices, fetchCardData } from '@/app/lib/data'; // remove fetchRevenue
 6 | import { Suspense } from 'react';
 7 | import {
 8 |   RevenueChartSkeleton, 
 9 |   LatestInvoicesSkeleton,
10 |   CardsSkeleton,
11 |  } from '@/app/ui/skeletons';
12 |  
13 | export default async function Page() {
14 |   const latestInvoices = await fetchLatestInvoices();
15 |   const {
16 |     numberOfInvoices,
17 |     numberOfCustomers,
18 |     totalPaidInvoices,
19 |     totalPendingInvoices,
20 |   } = await fetchCardData();
21 | 
22 |   return (
23 |     <main>
24 |       <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
25 |         Dashboard
26 |       </h1>
27 |       <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
28 |         <Suspense fallback={<CardsSkeleton />}>
29 |           <CardWrapper />
30 |         </Suspense>
31 |       </div>
32 |       <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
33 |         <Suspense fallback={<RevenueChartSkeleton />}>
34 |           <RevenueChart />
35 |         </Suspense>
36 |         <Suspense fallback={<LatestInvoicesSkeleton />}>
37 |           <LatestInvoices />
38 |         </Suspense>
39 |       </div>
40 |     </main>
41 |   );
42 | }
43 | 


--------------------------------------------------------------------------------
/app/ui/search.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 4 | import { useSearchParams, usePathname, useRouter } from 'next/navigation';
 5 | import { useDebouncedCallback } from 'use-debounce';
 6 | 
 7 | export default function Search({ placeholder }: { placeholder: string }) {
 8 |   const searchParams = useSearchParams();
 9 |   const pathname = usePathname();
10 |   const { replace } = useRouter();
11 | 
12 |   const handleSearch = useDebouncedCallback((term) => {
13 |     console.log(`Searching... ${term}`);
14 |     const params = new URLSearchParams(searchParams);
15 |     params.set('page', '1');
16 |     if (term) {
17 |       params.set('query', term);
18 |     } else {
19 |       params.delete('query');
20 |     }
21 |     replace(`${pathname}?${params.toString()}`);
22 |   }, 300);
23 |   return (
24 |     <div className="relative flex flex-1 flex-shrink-0">
25 |       <label htmlFor="search" className="sr-only">
26 |         Search
27 |       </label>
28 |       <input
29 |         className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
30 |         placeholder={placeholder}
31 |         onChange={(e) => {
32 |           handleSearch(e.target.value);
33 |         }}
34 |         defaultValue={searchParams.get('query')?.toString()}
35 |       />
36 |       <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
37 |     </div>
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/app/ui/dashboard/nav-links.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import {
 4 |   UserGroupIcon,
 5 |   HomeIcon,
 6 |   DocumentDuplicateIcon,
 7 | } from '@heroicons/react/24/outline';
 8 | import Link from 'next/link';
 9 | import { usePathname } from 'next/navigation';
10 | import clsx from 'clsx';
11 | 
12 | // Map of links to display in the side navigation.
13 | // Depending on the size of the application, this would be stored in a database.
14 | const links = [
15 |   { name: 'Home', href: '/dashboard', icon: HomeIcon },
16 |   {
17 |     name: 'Invoices',
18 |     href: '/dashboard/invoices',
19 |     icon: DocumentDuplicateIcon,
20 |   },
21 |   { name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
22 | ];
23 | 
24 | export default function NavLinks() {
25 |   const pathname = usePathname();
26 |   return (
27 |     <>
28 |       {links.map((link) => {
29 |         const LinkIcon = link.icon;
30 |         return (
31 |           <Link
32 |             key={link.name}
33 |             href={link.href}
34 |             className={clsx(
35 |               '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',
36 |               {
37 |                 'bg-sky-100 text-blue-600': pathname === link.href,
38 |               },
39 |             )}
40 |           >
41 |             <LinkIcon className="w-6" />
42 |             <p className="hidden md:block">{link.name}</p>
43 |           </Link>
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 | 
26 |   const totalPages = await fetchInvoicesPages(query);
27 |   
28 |   return (
29 |     <div className="w-full">
30 |       <div className="flex w-full items-center justify-between">
31 |         <h1 className={`${lusitana.className} text-2xl`}>Invoices</h1>
32 |       </div>
33 |       <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
34 |         <Search placeholder="Search invoices..." />
35 |         <CreateInvoice />
36 |       </div>
37 |        <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
38 |         <Table query={query} currentPage={currentPage} />
39 |       </Suspense>
40 |       <div className="mt-5 flex w-full justify-center">
41 |         <Pagination totalPages={totalPages} />
42 |       </div>
43 |     </div>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/app/ui/dashboard/cards.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   BanknotesIcon,
 3 |   ClockIcon,
 4 |   UserGroupIcon,
 5 |   InboxIcon,
 6 | } from '@heroicons/react/24/outline';
 7 | import { lusitana } from '@/app/ui/fonts';
 8 | import { fetchCardData } from '@/app/lib/data';
 9 | 
10 | const iconMap = {
11 |   collected: BanknotesIcon,
12 |   customers: UserGroupIcon,
13 |   pending: ClockIcon,
14 |   invoices: InboxIcon,
15 | };
16 | 
17 | export default async function CardWrapper() {
18 |     const {
19 |     numberOfInvoices,
20 |     numberOfCustomers,
21 |     totalPaidInvoices,
22 |     totalPendingInvoices,
23 |   } = await fetchCardData();
24 |   return (
25 |     <>
26 |       {/* NOTE: Uncomment this code in Chapter 9 */}
27 | 
28 |       <Card title="Collected" value={totalPaidInvoices} type="collected" />
29 |       <Card title="Pending" value={totalPendingInvoices} type="pending" />
30 |       <Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
31 |       <Card
32 |         title="Total Customers"
33 |         value={numberOfCustomers}
34 |         type="customers"
35 |       />
36 |     </>
37 |   );
38 | }
39 | 
40 | export function Card({
41 |   title,
42 |   value,
43 |   type,
44 | }: {
45 |   title: string;
46 |   value: number | string;
47 |   type: 'invoices' | 'customers' | 'pending' | 'collected';
48 | }) {
49 |   const Icon = iconMap[type];
50 | 
51 |   return (
52 |     <div className="rounded-xl bg-gray-50 p-2 shadow-sm">
53 |       <div className="flex p-4">
54 |         {Icon ? <Icon className="h-5 w-5 text-gray-700" /> : null}
55 |         <h3 className="ml-2 text-sm font-medium">{title}</h3>
56 |       </div>
57 |       <p
58 |         className={`${lusitana.className}
59 |           truncate rounded-xl bg-white px-4 py-8 text-center text-2xl`}
60 |       >
61 |         {value}
62 |       </p>
63 |     </div>
64 |   );
65 | }
66 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import AcmeLogo from '@/app/ui/acme-logo';
 2 | import { ArrowRightIcon } from '@heroicons/react/24/outline';
 3 | import Link from 'next/link';
 4 | import styles from '@/app/ui/home.module.css';
 5 | import Image from 'next/image';
 6 | 
 7 | export default function Page() {
 8 |   return (
 9 |     <main className="flex min-h-screen flex-col p-6">
10 |       <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
11 |         <AcmeLogo />
12 |       </div>
13 |       <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
14 |         <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">
15 |         <div
16 |           className={styles.shape}
17 |         />
18 |           <p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
19 |             <strong>Welcome to Acme.</strong> This is the example for the{' '}
20 |             <a href="https://nextjs.org/learn/" className="text-blue-500">
21 |               Next.js Learn Course
22 |             </a>
23 |             , brought to you by Vercel.
24 |           </p>
25 |           <Link
26 |             href="/login"
27 |             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"
28 |           >
29 |             <span>Log in</span> <ArrowRightIcon className="w-5 md:w-6" />
30 |           </Link>
31 |         </div>
32 |         <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
33 |           <Image 
34 |             src="/hero-desktop.png"
35 |             width={1000}
36 |             height={760}
37 |             className="hidden md:block"
38 |             alt="Screenshots of the dashboard project showing desktop version"
39 |           />
40 |           <Image
41 |             src="/hero-mobile.png"
42 |             width={560}
43 |             height={620}
44 |             className="block md:hidden"
45 |             alt="Screenshots of the dashboard project showing mobile version"
46 |           />
47 |         </div>
48 |       </div>
49 |     </main>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/app/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { Revenue } from './definitions';
 2 | 
 3 | export const formatCurrency = (amount: number) => {
 4 |   return (amount / 100).toLocaleString('en-US', {
 5 |     style: 'currency',
 6 |     currency: 'USD',
 7 |   });
 8 | };
 9 | 
10 | export const formatDateToLocal = (
11 |   dateStr: string,
12 |   locale: string = 'en-US',
13 | ) => {
14 |   const date = new Date(dateStr);
15 |   const options: Intl.DateTimeFormatOptions = {
16 |     day: 'numeric',
17 |     month: 'short',
18 |     year: 'numeric',
19 |   };
20 |   const formatter = new Intl.DateTimeFormat(locale, options);
21 |   return formatter.format(date);
22 | };
23 | 
24 | export const generateYAxis = (revenue: Revenue[]) => {
25 |   // Calculate what labels we need to display on the y-axis
26 |   // based on highest record and in 1000s
27 |   const yAxisLabels = [];
28 |   const highestRecord = Math.max(...revenue.map((month) => month.revenue));
29 |   const topLabel = Math.ceil(highestRecord / 1000) * 1000;
30 | 
31 |   for (let i = topLabel; i >= 0; i -= 1000) {
32 |     yAxisLabels.push(`$${i / 1000}K`);
33 |   }
34 | 
35 |   return { yAxisLabels, topLabel };
36 | };
37 | 
38 | export const generatePagination = (currentPage: number, totalPages: number) => {
39 |   // If the total number of pages is 7 or less,
40 |   // display all pages without any ellipsis.
41 |   if (totalPages <= 7) {
42 |     return Array.from({ length: totalPages }, (_, i) => i + 1);
43 |   }
44 | 
45 |   // If the current page is among the first 3 pages,
46 |   // show the first 3, an ellipsis, and the last 2 pages.
47 |   if (currentPage <= 3) {
48 |     return [1, 2, 3, '...', totalPages - 1, totalPages];
49 |   }
50 | 
51 |   // If the current page is among the last 3 pages,
52 |   // show the first 2, an ellipsis, and the last 3 pages.
53 |   if (currentPage >= totalPages - 2) {
54 |     return [1, 2, '...', totalPages - 2, totalPages - 1, totalPages];
55 |   }
56 | 
57 |   // If the current page is somewhere in the middle,
58 |   // show the first page, an ellipsis, the current page and its neighbors,
59 |   // another ellipsis, and the last page.
60 |   return [
61 |     1,
62 |     '...',
63 |     currentPage - 1,
64 |     currentPage,
65 |     currentPage + 1,
66 |     '...',
67 |     totalPages,
68 |   ];
69 | };
70 | 


--------------------------------------------------------------------------------
/app/lib/definitions.ts:
--------------------------------------------------------------------------------
 1 | // This file contains type definitions for your data.
 2 | // It describes the shape of the data, and what data type each property should accept.
 3 | // For simplicity of teaching, we're manually defining these types.
 4 | // However, these types are generated automatically if you're using an ORM such as Prisma.
 5 | export type User = {
 6 |   id: string;
 7 |   name: string;
 8 |   email: string;
 9 |   password: string;
10 | };
11 | 
12 | export type Customer = {
13 |   id: string;
14 |   name: string;
15 |   email: string;
16 |   image_url: string;
17 | };
18 | 
19 | export type Invoice = {
20 |   id: string;
21 |   customer_id: string;
22 |   amount: number;
23 |   date: string;
24 |   // In TypeScript, this is called a string union type.
25 |   // It means that the "status" property can only be one of the two strings: 'pending' or 'paid'.
26 |   status: 'pending' | 'paid';
27 | };
28 | 
29 | export type Revenue = {
30 |   month: string;
31 |   revenue: number;
32 | };
33 | 
34 | export type LatestInvoice = {
35 |   id: string;
36 |   name: string;
37 |   image_url: string;
38 |   email: string;
39 |   amount: string;
40 | };
41 | 
42 | // The database returns a number for amount, but we later format it to a string with the formatCurrency function
43 | export type LatestInvoiceRaw = Omit<LatestInvoice, 'amount'> & {
44 |   amount: number;
45 | };
46 | 
47 | export type InvoicesTable = {
48 |   id: string;
49 |   customer_id: string;
50 |   name: string;
51 |   email: string;
52 |   image_url: string;
53 |   date: string;
54 |   amount: number;
55 |   status: 'pending' | 'paid';
56 | };
57 | 
58 | export type CustomersTableType = {
59 |   id: string;
60 |   name: string;
61 |   email: string;
62 |   image_url: string;
63 |   total_invoices: number;
64 |   total_pending: number;
65 |   total_paid: number;
66 | };
67 | 
68 | export type FormattedCustomersTable = {
69 |   id: string;
70 |   name: string;
71 |   email: string;
72 |   image_url: string;
73 |   total_invoices: number;
74 |   total_pending: string;
75 |   total_paid: string;
76 | };
77 | 
78 | export type CustomerField = {
79 |   id: string;
80 |   name: string;
81 | };
82 | 
83 | export type InvoiceForm = {
84 |   id: string;
85 |   customer_id: string;
86 |   amount: number;
87 |   status: 'pending' | 'paid';
88 | };
89 | 


--------------------------------------------------------------------------------
/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 { fetchRevenue } from '@/app/lib/data';
 5 | 
 6 | // This component is representational only.
 7 | // For data visualization UI, check out:
 8 | // https://www.tremor.so/
 9 | // https://www.chartjs.org/
10 | // https://airbnb.io/visx/
11 | 
12 | export default async function RevenueChart() { // Make component async, remove the props
13 |   const revenue = await fetchRevenue(); // Fetch data inside the component
14 |   const chartHeight = 350;
15 |   // NOTE: Uncomment this code in Chapter 7
16 | 
17 |   const { yAxisLabels, topLabel } = generateYAxis(revenue);
18 | 
19 |   if (!revenue || revenue.length === 0) {
20 |     return <p className="mt-4 text-gray-400">No data available.</p>;
21 |   }
22 | 
23 |   return (
24 |     <div className="w-full md:col-span-4">
25 |       <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
26 |         Recent Revenue
27 |       </h2>
28 |       {/* NOTE: Uncomment this code in Chapter 7 */}
29 | 
30 |       <div className="rounded-xl bg-gray-50 p-4">
31 |         <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">
32 |           <div
33 |             className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
34 |             style={{ height: `${chartHeight}px` }}
35 |           >
36 |             {yAxisLabels.map((label) => (
37 |               <p key={label}>{label}</p>
38 |             ))}
39 |           </div>
40 | 
41 |           {revenue.map((month) => (
42 |             <div key={month.month} className="flex flex-col items-center gap-2">
43 |               <div
44 |                 className="w-full rounded-md bg-blue-300"
45 |                 style={{
46 |                   height: `${(chartHeight / topLabel) * month.revenue}px`,
47 |                 }}
48 |               ></div>
49 |               <p className="-rotate-90 text-sm text-gray-400 sm:rotate-0">
50 |                 {month.month}
51 |               </p>
52 |             </div>
53 |           ))}
54 |         </div>
55 |         <div className="flex items-center pb-2 pt-6">
56 |           <CalendarIcon className="h-5 w-5 text-gray-500" />
57 |           <h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
58 |         </div>
59 |       </div>
60 |     </div>
61 |   );
62 | }
63 | 


--------------------------------------------------------------------------------
/app/ui/dashboard/latest-invoices.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowPathIcon } from '@heroicons/react/24/outline';
 2 | import clsx from 'clsx';
 3 | import Image from 'next/image';
 4 | import { lusitana } from '@/app/ui/fonts';
 5 | import { fetchLatestInvoices } from '@/app/lib/data';
 6 | 
 7 | // import { LatestInvoice } from '@/app/lib/definitions';
 8 | 
 9 | export default async function LatestInvoices() {
10 |   const latestInvoices = await fetchLatestInvoices();
11 | 
12 |   return (
13 |     <div className="flex w-full flex-col md:col-span-4">
14 |       <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
15 |         Latest Invoices
16 |       </h2>
17 |       <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
18 |         {/* NOTE: Uncomment this code in Chapter 7 */}
19 | 
20 |         <div className="bg-white px-6">
21 |           {latestInvoices.map((invoice, i) => {
22 |             return (
23 |               <div
24 |                 key={invoice.id}
25 |                 className={clsx(
26 |                   'flex flex-row items-center justify-between py-4',
27 |                   {
28 |                     'border-t': i !== 0,
29 |                   },
30 |                 )}
31 |               >
32 |                 <div className="flex items-center">
33 |                   <Image
34 |                     src={invoice.image_url}
35 |                     alt={`${invoice.name}'s profile picture`}
36 |                     className="mr-4 rounded-full"
37 |                     width={32}
38 |                     height={32}
39 |                   />
40 |                   <div className="min-w-0">
41 |                     <p className="truncate text-sm font-semibold md:text-base">
42 |                       {invoice.name}
43 |                     </p>
44 |                     <p className="hidden text-sm text-gray-500 sm:block">
45 |                       {invoice.email}
46 |                     </p>
47 |                   </div>
48 |                 </div>
49 |                 <p
50 |                   className={`${lusitana.className} truncate text-sm font-medium md:text-base`}
51 |                 >
52 |                   {invoice.amount}
53 |                 </p>
54 |               </div>
55 |             );
56 |           })}
57 |         </div>
58 |         <div className="flex items-center pb-2 pt-6">
59 |           <ArrowPathIcon className="h-5 w-5 text-gray-500" />
60 |           <h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>
61 |         </div>
62 |       </div>
63 |     </div>
64 |   );
65 | }
66 | 


--------------------------------------------------------------------------------
/app/ui/login-form.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { lusitana } from '@/app/ui/fonts';
 4 | import {
 5 |   AtSymbolIcon,
 6 |   KeyIcon,
 7 |   ExclamationCircleIcon,
 8 | } from '@heroicons/react/24/outline';
 9 | import { ArrowRightIcon } from '@heroicons/react/20/solid';
10 | import { Button } from './button';
11 | import { useActionState } from 'react';
12 | import { authenticate } from '@/app/lib/actions';
13 | 
14 | export default function LoginForm() {
15 |   const [errorMessage, formAction, isPending] = useActionState(
16 |     authenticate,
17 |     undefined,
18 |   );
19 |   return (
20 |     <form action={formAction} className="space-y-3">
21 |       <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
22 |         <h1 className={`${lusitana.className} mb-3 text-2xl`}>
23 |           Please log in to continue.
24 |         </h1>
25 |         <div className="w-full">
26 |           <div>
27 |             <label
28 |               className="mb-3 mt-5 block text-xs font-medium text-gray-900"
29 |               htmlFor="email"
30 |             >
31 |               Email
32 |             </label>
33 |             <div className="relative">
34 |               <input
35 |                 className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
36 |                 id="email"
37 |                 type="email"
38 |                 name="email"
39 |                 placeholder="Enter your email address"
40 |                 required
41 |               />
42 |               <AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
43 |             </div>
44 |           </div>
45 |           <div className="mt-4">
46 |             <label
47 |               className="mb-3 mt-5 block text-xs font-medium text-gray-900"
48 |               htmlFor="password"
49 |             >
50 |               Password
51 |             </label>
52 |             <div className="relative">
53 |               <input
54 |                 className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
55 |                 id="password"
56 |                 type="password"
57 |                 name="password"
58 |                 placeholder="Enter password"
59 |                 required
60 |                 minLength={6}
61 |               />
62 |               <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
63 |             </div>
64 |           </div>
65 |         </div>
66 |         <Button className="mt-4 w-full" aria-disabled={isPending}>
67 |           Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
68 |         </Button>
69 |         <div
70 |           className="flex h-8 items-end space-x-1"
71 |           aria-live="polite"
72 |           aria-atomic="true"
73 |         >
74 |           {errorMessage && (
75 |             <>
76 |               <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
77 |               <p className="text-sm text-red-500">{errorMessage}</p>
78 |             </>
79 |           )}
80 |         </div>
81 |       </div>
82 |     </form>
83 |   );
84 | }
85 | 


--------------------------------------------------------------------------------
/app/seed/route.ts:
--------------------------------------------------------------------------------
  1 | import bcrypt from 'bcrypt';
  2 | import { db } from '@vercel/postgres';
  3 | import { invoices, customers, revenue, users } from '../lib/placeholder-data';
  4 | 
  5 | const client = await db.connect();
  6 | 
  7 | async function seedUsers() {
  8 |   await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
  9 |   await client.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 client.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 client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
 34 | 
 35 |   await client.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) => client.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 client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
 60 | 
 61 |   await client.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) => client.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 client.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) => client.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 |     await client.sql`BEGIN`;
107 |     await seedUsers();
108 |     await seedCustomers();
109 |     await seedInvoices();
110 |     await seedRevenue();
111 |     await client.sql`COMMIT`;
112 | 
113 |     return Response.json({ message: 'Database seeded successfully' });
114 |   } catch (error) {
115 |     await client.sql`ROLLBACK`;
116 |     return Response.json({ error }, { status: 500 });
117 |   }
118 | }
119 | 


--------------------------------------------------------------------------------
/app/lib/placeholder-data.ts:
--------------------------------------------------------------------------------
  1 | // This file contains placeholder data that you'll be replacing with real data in the Data Fetching chapter:
  2 | // https://nextjs.org/learn/dashboard-app/fetching-data
  3 | const users = [
  4 |   {
  5 |     id: '410544b2-4001-4271-9855-fec4b6a6442a',
  6 |     name: 'User',
  7 |     email: 'user@nextmail.com',
  8 |     password: '123456',
  9 |   },
 10 | ];
 11 | 
 12 | const customers = [
 13 |   {
 14 |     id: 'd6e15727-9fe1-4961-8c5b-ea44a9bd81aa',
 15 |     name: 'Evil Rabbit',
 16 |     email: 'evil@rabbit.com',
 17 |     image_url: '/customers/evil-rabbit.png',
 18 |   },
 19 |   {
 20 |     id: '3958dc9e-712f-4377-85e9-fec4b6a6442a',
 21 |     name: 'Delba de Oliveira',
 22 |     email: 'delba@oliveira.com',
 23 |     image_url: '/customers/delba-de-oliveira.png',
 24 |   },
 25 |   {
 26 |     id: '3958dc9e-742f-4377-85e9-fec4b6a6442a',
 27 |     name: 'Lee Robinson',
 28 |     email: 'lee@robinson.com',
 29 |     image_url: '/customers/lee-robinson.png',
 30 |   },
 31 |   {
 32 |     id: '76d65c26-f784-44a2-ac19-586678f7c2f2',
 33 |     name: 'Michael Novotny',
 34 |     email: 'michael@novotny.com',
 35 |     image_url: '/customers/michael-novotny.png',
 36 |   },
 37 |   {
 38 |     id: 'CC27C14A-0ACF-4F4A-A6C9-D45682C144B9',
 39 |     name: 'Amy Burns',
 40 |     email: 'amy@burns.com',
 41 |     image_url: '/customers/amy-burns.png',
 42 |   },
 43 |   {
 44 |     id: '13D07535-C59E-4157-A011-F8D2EF4E0CBB',
 45 |     name: 'Balazs Orban',
 46 |     email: 'balazs@orban.com',
 47 |     image_url: '/customers/balazs-orban.png',
 48 |   },
 49 | ];
 50 | 
 51 | const invoices = [
 52 |   {
 53 |     customer_id: customers[0].id,
 54 |     amount: 15795,
 55 |     status: 'pending',
 56 |     date: '2022-12-06',
 57 |   },
 58 |   {
 59 |     customer_id: customers[1].id,
 60 |     amount: 20348,
 61 |     status: 'pending',
 62 |     date: '2022-11-14',
 63 |   },
 64 |   {
 65 |     customer_id: customers[4].id,
 66 |     amount: 3040,
 67 |     status: 'paid',
 68 |     date: '2022-10-29',
 69 |   },
 70 |   {
 71 |     customer_id: customers[3].id,
 72 |     amount: 44800,
 73 |     status: 'paid',
 74 |     date: '2023-09-10',
 75 |   },
 76 |   {
 77 |     customer_id: customers[5].id,
 78 |     amount: 34577,
 79 |     status: 'pending',
 80 |     date: '2023-08-05',
 81 |   },
 82 |   {
 83 |     customer_id: customers[2].id,
 84 |     amount: 54246,
 85 |     status: 'pending',
 86 |     date: '2023-07-16',
 87 |   },
 88 |   {
 89 |     customer_id: customers[0].id,
 90 |     amount: 666,
 91 |     status: 'pending',
 92 |     date: '2023-06-27',
 93 |   },
 94 |   {
 95 |     customer_id: customers[3].id,
 96 |     amount: 32545,
 97 |     status: 'paid',
 98 |     date: '2023-06-09',
 99 |   },
100 |   {
101 |     customer_id: customers[4].id,
102 |     amount: 1250,
103 |     status: 'paid',
104 |     date: '2023-06-17',
105 |   },
106 |   {
107 |     customer_id: customers[5].id,
108 |     amount: 8546,
109 |     status: 'paid',
110 |     date: '2023-06-07',
111 |   },
112 |   {
113 |     customer_id: customers[1].id,
114 |     amount: 500,
115 |     status: 'paid',
116 |     date: '2023-08-19',
117 |   },
118 |   {
119 |     customer_id: customers[5].id,
120 |     amount: 8945,
121 |     status: 'paid',
122 |     date: '2023-06-03',
123 |   },
124 |   {
125 |     customer_id: customers[2].id,
126 |     amount: 1000,
127 |     status: 'paid',
128 |     date: '2022-06-05',
129 |   },
130 | ];
131 | 
132 | const revenue = [
133 |   { month: 'Jan', revenue: 2000 },
134 |   { month: 'Feb', revenue: 1800 },
135 |   { month: 'Mar', revenue: 2200 },
136 |   { month: 'Apr', revenue: 2500 },
137 |   { month: 'May', revenue: 2300 },
138 |   { month: 'Jun', revenue: 3200 },
139 |   { month: 'Jul', revenue: 3500 },
140 |   { month: 'Aug', revenue: 3700 },
141 |   { month: 'Sep', revenue: 2500 },
142 |   { month: 'Oct', revenue: 2800 },
143 |   { month: 'Nov', revenue: 3000 },
144 |   { month: 'Dec', revenue: 4800 },
145 | ];
146 | 
147 | export { users, customers, invoices, revenue };
148 | 


--------------------------------------------------------------------------------
/app/lib/actions.ts:
--------------------------------------------------------------------------------
  1 | 'use server';
  2 | 
  3 | import { z } from 'zod';
  4 | import { sql } from '@vercel/postgres';
  5 | import { revalidatePath } from 'next/cache';
  6 | import { redirect } from 'next/navigation';
  7 | import { signIn } from '../auth';
  8 | import { AuthError } from 'next-auth';
  9 | 
 10 | export async function authenticate(
 11 |   prevState: string | undefined,
 12 |   formData: FormData,
 13 | ) {
 14 |   try {
 15 |     await signIn('credentials', formData);
 16 |   } catch (error) {
 17 |     if (error instanceof AuthError) {
 18 |       switch (error.type) {
 19 |         case 'CredentialsSignin':
 20 |           return 'Invalid credentials.';
 21 |         default:
 22 |           return 'Something went wrong.';
 23 |       }
 24 |     }
 25 |     throw error;
 26 |   }
 27 | }
 28 | 
 29 | const FormSchema = z.object({
 30 |   id: z.string(),
 31 |   customerId: z.string({
 32 |     invalid_type_error: 'Please select a customer.',
 33 |   }),
 34 |   amount: z.coerce.number()
 35 |   .gt(0, { message: 'Please enter an amount greater than $0.' }),
 36 |   status: z.enum(['pending', 'paid'], {
 37 |     invalid_type_error: 'Please select an invoice status.',
 38 |   }),
 39 |   date: z.string(),
 40 | });
 41 |  
 42 | const CreateInvoice = FormSchema.omit({ id: true, date: true });
 43 | const UpdateInvoice = FormSchema.omit({ id: true, date: true });
 44 | 
 45 | export async function deleteInvoice(id: string) {
 46 |   try {
 47 |     await sql`DELETE FROM invoices WHERE id = ${id}`;
 48 |     revalidatePath('/dashboard/invoices');
 49 |   } catch(error) {
 50 |     return { message: 'Database Error: Failed to Delete Invoice.' };
 51 |   }
 52 | }
 53 | 
 54 | export async function updateInvoice(
 55 |   id: string,
 56 |   prevState: State,
 57 |   formData: FormData,
 58 | ) {
 59 |   const validatedFields = UpdateInvoice.safeParse({
 60 |     customerId: formData.get('customerId'),
 61 |     amount: formData.get('amount'),
 62 |     status: formData.get('status'),
 63 |   });
 64 |  
 65 |   if (!validatedFields.success) {
 66 |     return {
 67 |       errors: validatedFields.error.flatten().fieldErrors,
 68 |       message: 'Missing Fields. Failed to Update Invoice.',
 69 |     };
 70 |   }
 71 |  
 72 |   const { customerId, amount, status } = validatedFields.data;
 73 |   const amountInCents = amount * 100;
 74 |  
 75 |   try {
 76 |     await sql`
 77 |       UPDATE invoices
 78 |       SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
 79 |       WHERE id = ${id}
 80 |     `;
 81 |   } catch (error) {
 82 |     return { message: 'Database Error: Failed to Update Invoice.' };
 83 |   }
 84 |  
 85 |   revalidatePath('/dashboard/invoices');
 86 |   redirect('/dashboard/invoices');
 87 | }
 88 | 
 89 | export type State = {
 90 |   errors?: {
 91 |     customerId?: string[];
 92 |     amount?: string[];
 93 |     status?: string[];
 94 |   };
 95 |   message?: string | null;
 96 | };
 97 | 
 98 | export async function createInvoice(prevState: State, formData: FormData) {
 99 |   const validatedFields = CreateInvoice.safeParse({
100 |     customerId: formData.get('customerId'),
101 |     amount: formData.get('amount'),
102 |     status: formData.get('status'),
103 |   });
104 | 
105 |   if (!validatedFields.success) {
106 |     return {
107 |       errors: validatedFields.error.flatten().fieldErrors,
108 |       message: 'Missing Fields. Failed to Create Invoice.',
109 |     };
110 |   }
111 |   
112 |   const { customerId, amount, status } = validatedFields.data;
113 |   const amountInCents = amount * 100;
114 |   const date = new Date().toISOString().split('T')[0];
115 | 
116 |   try {
117 |   await sql`
118 |     INSERT INTO invoices (customer_id, amount, status, date)
119 |     VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
120 |   `;
121 |   } catch(error) {
122 |     return {
123 |       message: 'Database Error: Failed to Create Invoice.',
124 |     };
125 |   }
126 | 
127 |   revalidatePath('/dashboard/invoices');
128 |   redirect('/dashboard/invoices');
129 | }
130 | 


--------------------------------------------------------------------------------
/app/ui/invoices/pagination.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
  4 | import clsx from 'clsx';
  5 | import Link from 'next/link';
  6 | import { generatePagination } from '@/app/lib/utils';
  7 | import { usePathname, useSearchParams } from 'next/navigation';
  8 | 
  9 | export default function Pagination({ totalPages }: { totalPages: number }) {
 10 |   const pathname = usePathname();
 11 |   const searchParams = useSearchParams();
 12 |   const currentPage = Number(searchParams.get('page')) || 1;
 13 | 
 14 |   const createPageURL = (pageNumber: number | string) => {
 15 |     const params = new URLSearchParams(searchParams);
 16 |     params.set('page', pageNumber.toString());
 17 |     return `${pathname}?${params.toString()}`;
 18 |   };
 19 | 
 20 |   const allPages = generatePagination(currentPage, totalPages);
 21 | 
 22 |   return (
 23 |     <>
 24 |       {/*  NOTE: Uncomment this code in Chapter 11 */}
 25 | 
 26 |       <div className="inline-flex">
 27 |         <PaginationArrow
 28 |           direction="left"
 29 |           href={createPageURL(currentPage - 1)}
 30 |           isDisabled={currentPage <= 1}
 31 |         />
 32 | 
 33 |         <div className="flex -space-x-px">
 34 |           {allPages.map((page, index) => {
 35 |             let position: 'first' | 'last' | 'single' | 'middle' | undefined;
 36 | 
 37 |             if (index === 0) position = 'first';
 38 |             if (index === allPages.length - 1) position = 'last';
 39 |             if (allPages.length === 1) position = 'single';
 40 |             if (page === '...') position = 'middle';
 41 | 
 42 |             return (
 43 |               <PaginationNumber
 44 |                 key={page}
 45 |                 href={createPageURL(page)}
 46 |                 page={page}
 47 |                 position={position}
 48 |                 isActive={currentPage === page}
 49 |               />
 50 |             );
 51 |           })}
 52 |         </div>
 53 | 
 54 |         <PaginationArrow
 55 |           direction="right"
 56 |           href={createPageURL(currentPage + 1)}
 57 |           isDisabled={currentPage >= totalPages}
 58 |         />
 59 |       </div>
 60 |     </>
 61 |   );
 62 | }
 63 | 
 64 | function PaginationNumber({
 65 |   page,
 66 |   href,
 67 |   isActive,
 68 |   position,
 69 | }: {
 70 |   page: number | string;
 71 |   href: string;
 72 |   position?: 'first' | 'last' | 'middle' | 'single';
 73 |   isActive: boolean;
 74 | }) {
 75 |   const className = clsx(
 76 |     'flex h-10 w-10 items-center justify-center text-sm border',
 77 |     {
 78 |       'rounded-l-md': position === 'first' || position === 'single',
 79 |       'rounded-r-md': position === 'last' || position === 'single',
 80 |       'z-10 bg-blue-600 border-blue-600 text-white': isActive,
 81 |       'hover:bg-gray-100': !isActive && position !== 'middle',
 82 |       'text-gray-300': position === 'middle',
 83 |     },
 84 |   );
 85 | 
 86 |   return isActive || position === 'middle' ? (
 87 |     <div className={className}>{page}</div>
 88 |   ) : (
 89 |     <Link href={href} className={className}>
 90 |       {page}
 91 |     </Link>
 92 |   );
 93 | }
 94 | 
 95 | function PaginationArrow({
 96 |   href,
 97 |   direction,
 98 |   isDisabled,
 99 | }: {
100 |   href: string;
101 |   direction: 'left' | 'right';
102 |   isDisabled?: boolean;
103 | }) {
104 |   const className = clsx(
105 |     'flex h-10 w-10 items-center justify-center rounded-md border',
106 |     {
107 |       'pointer-events-none text-gray-300': isDisabled,
108 |       'hover:bg-gray-100': !isDisabled,
109 |       'mr-2 md:mr-4': direction === 'left',
110 |       'ml-2 md:ml-4': direction === 'right',
111 |     },
112 |   );
113 | 
114 |   const icon =
115 |     direction === 'left' ? (
116 |       <ArrowLeftIcon className="w-4" />
117 |     ) : (
118 |       <ArrowRightIcon className="w-4" />
119 |     );
120 | 
121 |   return isDisabled ? (
122 |     <div className={className}>{icon}</div>
123 |   ) : (
124 |     <Link className={className} href={href}>
125 |       {icon}
126 |     </Link>
127 |   );
128 | }
129 | 


--------------------------------------------------------------------------------
/app/ui/invoices/create-form.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { useActionState } from 'react';
  4 | import { CustomerField } from '@/app/lib/definitions';
  5 | import Link from 'next/link';
  6 | import {
  7 |   CheckIcon,
  8 |   ClockIcon,
  9 |   CurrencyDollarIcon,
 10 |   UserCircleIcon,
 11 | } from '@heroicons/react/24/outline';
 12 | import { Button } from '@/app/ui/button';
 13 | import { createInvoice, State } from '@/app/lib/actions';
 14 | 
 15 | export default function Form({ customers }: { customers: CustomerField[] }) {
 16 |   const initialState: State = { message: null, errors: {} };
 17 |   const [state, formAction] = useActionState(createInvoice, initialState);
 18 | 
 19 |   return (
 20 |     <form action={formAction}>
 21 |       <div className="rounded-md bg-gray-50 p-4 md:p-6">
 22 |         {/* Customer Name */}
 23 |         <div className="mb-4">
 24 |           <label htmlFor="customer" className="mb-2 block text-sm font-medium">
 25 |             Choose customer
 26 |           </label>
 27 |           <div className="relative">
 28 |             <select
 29 |               id="customer"
 30 |               name="customerId"
 31 |               className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
 32 |               defaultValue=""
 33 |               aria-describedby="customer-error"
 34 |             >
 35 |               <option value="" disabled>
 36 |                 Select a customer
 37 |               </option>
 38 |               {customers.map((customer) => (
 39 |                 <option key={customer.id} value={customer.id}>
 40 |                   {customer.name}
 41 |                 </option>
 42 |               ))}
 43 |             </select>
 44 |             <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
 45 |           </div>
 46 |           <div id="customer-error" aria-live="polite" aria-atomic="true">
 47 |             {state.errors?.customerId &&
 48 |               state.errors.customerId.map((error: string) => (
 49 |                 <p className="mt-2 text-sm text-red-500" key={error}>
 50 |                   {error}
 51 |                 </p>
 52 |               ))}
 53 |           </div>
 54 |         </div>
 55 | 
 56 |         {/* Invoice Amount */}
 57 |         <div className="mb-4">
 58 |           <label htmlFor="amount" className="mb-2 block text-sm font-medium">
 59 |             Choose an amount
 60 |           </label>
 61 |           <div className="relative mt-2 rounded-md">
 62 |             <div className="relative">
 63 |               <input
 64 |                 id="amount"
 65 |                 name="amount"
 66 |                 type="number"
 67 |                 step="0.01"
 68 |                 placeholder="Enter USD amount"
 69 |                 className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
 70 |               />
 71 |               <CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
 72 |             </div>
 73 |           </div>
 74 |         </div>
 75 | 
 76 |         {/* Invoice Status */}
 77 |         <fieldset>
 78 |           <legend className="mb-2 block text-sm font-medium">
 79 |             Set the invoice status
 80 |           </legend>
 81 |           <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
 82 |             <div className="flex gap-4">
 83 |               <div className="flex items-center">
 84 |                 <input
 85 |                   id="pending"
 86 |                   name="status"
 87 |                   type="radio"
 88 |                   value="pending"
 89 |                   className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
 90 |                 />
 91 |                 <label
 92 |                   htmlFor="pending"
 93 |                   className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600"
 94 |                 >
 95 |                   Pending <ClockIcon className="h-4 w-4" />
 96 |                 </label>
 97 |               </div>
 98 |               <div className="flex items-center">
 99 |                 <input
100 |                   id="paid"
101 |                   name="status"
102 |                   type="radio"
103 |                   value="paid"
104 |                   className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
105 |                 />
106 |                 <label
107 |                   htmlFor="paid"
108 |                   className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white"
109 |                 >
110 |                   Paid <CheckIcon className="h-4 w-4" />
111 |                 </label>
112 |               </div>
113 |             </div>
114 |           </div>
115 |         </fieldset>
116 |       </div>
117 |       <div className="mt-6 flex justify-end gap-4">
118 |         <Link
119 |           href="/dashboard/invoices"
120 |           className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
121 |         >
122 |           Cancel
123 |         </Link>
124 |         <Button type="submit">Create Invoice</Button>
125 |       </div>
126 |     </form>
127 |   );
128 | }
129 | 


--------------------------------------------------------------------------------
/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 |     <div className="mt-6 flow-root">
 18 |       <div className="inline-block min-w-full align-middle">
 19 |         <div className="rounded-lg bg-gray-50 p-2 md:pt-0">
 20 |           <div className="md:hidden">
 21 |             {invoices?.map((invoice) => (
 22 |               <div
 23 |                 key={invoice.id}
 24 |                 className="mb-2 w-full rounded-md bg-white p-4"
 25 |               >
 26 |                 <div className="flex items-center justify-between border-b pb-4">
 27 |                   <div>
 28 |                     <div className="mb-2 flex items-center">
 29 |                       <Image
 30 |                         src={invoice.image_url}
 31 |                         className="mr-2 rounded-full"
 32 |                         width={28}
 33 |                         height={28}
 34 |                         alt={`${invoice.name}'s profile picture`}
 35 |                       />
 36 |                       <p>{invoice.name}</p>
 37 |                     </div>
 38 |                     <p className="text-sm text-gray-500">{invoice.email}</p>
 39 |                   </div>
 40 |                   <InvoiceStatus status={invoice.status} />
 41 |                 </div>
 42 |                 <div className="flex w-full items-center justify-between pt-4">
 43 |                   <div>
 44 |                     <p className="text-xl font-medium">
 45 |                       {formatCurrency(invoice.amount)}
 46 |                     </p>
 47 |                     <p>{formatDateToLocal(invoice.date)}</p>
 48 |                   </div>
 49 |                   <div className="flex justify-end gap-2">
 50 |                     <UpdateInvoice id={invoice.id} />
 51 |                     <DeleteInvoice id={invoice.id} />
 52 |                   </div>
 53 |                 </div>
 54 |               </div>
 55 |             ))}
 56 |           </div>
 57 |           <table className="hidden min-w-full text-gray-900 md:table">
 58 |             <thead className="rounded-lg text-left text-sm font-normal">
 59 |               <tr>
 60 |                 <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
 61 |                   Customer
 62 |                 </th>
 63 |                 <th scope="col" className="px-3 py-5 font-medium">
 64 |                   Email
 65 |                 </th>
 66 |                 <th scope="col" className="px-3 py-5 font-medium">
 67 |                   Amount
 68 |                 </th>
 69 |                 <th scope="col" className="px-3 py-5 font-medium">
 70 |                   Date
 71 |                 </th>
 72 |                 <th scope="col" className="px-3 py-5 font-medium">
 73 |                   Status
 74 |                 </th>
 75 |                 <th scope="col" className="relative py-3 pl-6 pr-3">
 76 |                   <span className="sr-only">Edit</span>
 77 |                 </th>
 78 |               </tr>
 79 |             </thead>
 80 |             <tbody className="bg-white">
 81 |               {invoices?.map((invoice) => (
 82 |                 <tr
 83 |                   key={invoice.id}
 84 |                   className="w-full border-b py-3 text-sm last-of-type:border-none [&:first-child>td:first-child]:rounded-tl-lg [&:first-child>td:last-child]:rounded-tr-lg [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg"
 85 |                 >
 86 |                   <td className="whitespace-nowrap py-3 pl-6 pr-3">
 87 |                     <div className="flex items-center gap-3">
 88 |                       <Image
 89 |                         src={invoice.image_url}
 90 |                         className="rounded-full"
 91 |                         width={28}
 92 |                         height={28}
 93 |                         alt={`${invoice.name}'s profile picture`}
 94 |                       />
 95 |                       <p>{invoice.name}</p>
 96 |                     </div>
 97 |                   </td>
 98 |                   <td className="whitespace-nowrap px-3 py-3">
 99 |                     {invoice.email}
100 |                   </td>
101 |                   <td className="whitespace-nowrap px-3 py-3">
102 |                     {formatCurrency(invoice.amount)}
103 |                   </td>
104 |                   <td className="whitespace-nowrap px-3 py-3">
105 |                     {formatDateToLocal(invoice.date)}
106 |                   </td>
107 |                   <td className="whitespace-nowrap px-3 py-3">
108 |                     <InvoiceStatus status={invoice.status} />
109 |                   </td>
110 |                   <td className="whitespace-nowrap py-3 pl-6 pr-3">
111 |                     <div className="flex justify-end gap-3">
112 |                       <UpdateInvoice id={invoice.id} />
113 |                       <DeleteInvoice id={invoice.id} />
114 |                     </div>
115 |                   </td>
116 |                 </tr>
117 |               ))}
118 |             </tbody>
119 |           </table>
120 |         </div>
121 |       </div>
122 |     </div>
123 |   );
124 | }
125 | 


--------------------------------------------------------------------------------
/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 |     <div className="w-full">
 16 |       <h1 className={`${lusitana.className} mb-8 text-xl md:text-2xl`}>
 17 |         Customers
 18 |       </h1>
 19 |       <Search placeholder="Search customers..." />
 20 |       <div className="mt-6 flow-root">
 21 |         <div className="overflow-x-auto">
 22 |           <div className="inline-block min-w-full align-middle">
 23 |             <div className="overflow-hidden rounded-md bg-gray-50 p-2 md:pt-0">
 24 |               <div className="md:hidden">
 25 |                 {customers?.map((customer) => (
 26 |                   <div
 27 |                     key={customer.id}
 28 |                     className="mb-2 w-full rounded-md bg-white p-4"
 29 |                   >
 30 |                     <div className="flex items-center justify-between border-b pb-4">
 31 |                       <div>
 32 |                         <div className="mb-2 flex items-center">
 33 |                           <div className="flex items-center gap-3">
 34 |                             <Image
 35 |                               src={customer.image_url}
 36 |                               className="rounded-full"
 37 |                               alt={`${customer.name}'s profile picture`}
 38 |                               width={28}
 39 |                               height={28}
 40 |                             />
 41 |                             <p>{customer.name}</p>
 42 |                           </div>
 43 |                         </div>
 44 |                         <p className="text-sm text-gray-500">
 45 |                           {customer.email}
 46 |                         </p>
 47 |                       </div>
 48 |                     </div>
 49 |                     <div className="flex w-full items-center justify-between border-b py-5">
 50 |                       <div className="flex w-1/2 flex-col">
 51 |                         <p className="text-xs">Pending</p>
 52 |                         <p className="font-medium">{customer.total_pending}</p>
 53 |                       </div>
 54 |                       <div className="flex w-1/2 flex-col">
 55 |                         <p className="text-xs">Paid</p>
 56 |                         <p className="font-medium">{customer.total_paid}</p>
 57 |                       </div>
 58 |                     </div>
 59 |                     <div className="pt-4 text-sm">
 60 |                       <p>{customer.total_invoices} invoices</p>
 61 |                     </div>
 62 |                   </div>
 63 |                 ))}
 64 |               </div>
 65 |               <table className="hidden min-w-full rounded-md text-gray-900 md:table">
 66 |                 <thead className="rounded-md bg-gray-50 text-left text-sm font-normal">
 67 |                   <tr>
 68 |                     <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
 69 |                       Name
 70 |                     </th>
 71 |                     <th scope="col" className="px-3 py-5 font-medium">
 72 |                       Email
 73 |                     </th>
 74 |                     <th scope="col" className="px-3 py-5 font-medium">
 75 |                       Total Invoices
 76 |                     </th>
 77 |                     <th scope="col" className="px-3 py-5 font-medium">
 78 |                       Total Pending
 79 |                     </th>
 80 |                     <th scope="col" className="px-4 py-5 font-medium">
 81 |                       Total Paid
 82 |                     </th>
 83 |                   </tr>
 84 |                 </thead>
 85 | 
 86 |                 <tbody className="divide-y divide-gray-200 text-gray-900">
 87 |                   {customers.map((customer) => (
 88 |                     <tr key={customer.id} className="group">
 89 |                       <td className="whitespace-nowrap bg-white py-5 pl-4 pr-3 text-sm text-black group-first-of-type:rounded-md group-last-of-type:rounded-md sm:pl-6">
 90 |                         <div className="flex items-center gap-3">
 91 |                           <Image
 92 |                             src={customer.image_url}
 93 |                             className="rounded-full"
 94 |                             alt={`${customer.name}'s profile picture`}
 95 |                             width={28}
 96 |                             height={28}
 97 |                           />
 98 |                           <p>{customer.name}</p>
 99 |                         </div>
100 |                       </td>
101 |                       <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
102 |                         {customer.email}
103 |                       </td>
104 |                       <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
105 |                         {customer.total_invoices}
106 |                       </td>
107 |                       <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
108 |                         {customer.total_pending}
109 |                       </td>
110 |                       <td className="whitespace-nowrap bg-white px-4 py-5 text-sm group-first-of-type:rounded-md group-last-of-type:rounded-md">
111 |                         {customer.total_paid}
112 |                       </td>
113 |                     </tr>
114 |                   ))}
115 |                 </tbody>
116 |               </table>
117 |             </div>
118 |           </div>
119 |         </div>
120 |       </div>
121 |     </div>
122 |   );
123 | }
124 | 


--------------------------------------------------------------------------------
/app/lib/data.ts:
--------------------------------------------------------------------------------
  1 | import { sql } from '@vercel/postgres';
  2 | import {
  3 |   CustomerField,
  4 |   CustomersTableType,
  5 |   InvoiceForm,
  6 |   InvoicesTable,
  7 |   LatestInvoiceRaw,
  8 |   Revenue,
  9 | } from './definitions';
 10 | import { formatCurrency } from './utils';
 11 | import { notFound } from 'next/navigation';
 12 | 
 13 | export async function fetchRevenue() {
 14 |   try {
 15 |     // Artificially delay a response for demo purposes.
 16 |     // Don't do this in production :)
 17 | 
 18 |     console.log('Fetching revenue data...');
 19 |     await new Promise((resolve) => setTimeout(resolve, 3000));
 20 | 
 21 |     const data = await sql<Revenue>`SELECT * FROM revenue`;
 22 | 
 23 |     console.log('Data fetch completed after 3 seconds.');
 24 | 
 25 |     return data.rows;
 26 |   } catch (error) {
 27 |     console.error('Database Error:', error);
 28 |     throw new Error('Failed to fetch revenue data.');
 29 |   }
 30 | }
 31 | 
 32 | export async function fetchLatestInvoices() {
 33 |   try {
 34 |     const data = await sql<LatestInvoiceRaw>`
 35 |       SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id
 36 |       FROM invoices
 37 |       JOIN customers ON invoices.customer_id = customers.id
 38 |       ORDER BY invoices.date DESC
 39 |       LIMIT 5`;
 40 | 
 41 |     const latestInvoices = data.rows.map((invoice) => ({
 42 |       ...invoice,
 43 |       amount: formatCurrency(invoice.amount),
 44 |     }));
 45 |     return latestInvoices;
 46 |   } catch (error) {
 47 |     console.error('Database Error:', error);
 48 |     throw new Error('Failed to fetch the latest invoices.');
 49 |   }
 50 | }
 51 | 
 52 | export async function fetchCardData() {
 53 |   try {
 54 |     // You can probably combine these into a single SQL query
 55 |     // However, we are intentionally splitting them to demonstrate
 56 |     // how to initialize multiple queries in parallel with JS.
 57 |     const invoiceCountPromise = sql`SELECT COUNT(*) FROM invoices`;
 58 |     const customerCountPromise = sql`SELECT COUNT(*) FROM customers`;
 59 |     const invoiceStatusPromise = sql`SELECT
 60 |          SUM(CASE WHEN status = 'paid' THEN amount ELSE 0 END) AS "paid",
 61 |          SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) AS "pending"
 62 |          FROM invoices`;
 63 | 
 64 |     const data = await Promise.all([
 65 |       invoiceCountPromise,
 66 |       customerCountPromise,
 67 |       invoiceStatusPromise,
 68 |     ]);
 69 | 
 70 |     const numberOfInvoices = Number(data[0].rows[0].count ?? '0');
 71 |     const numberOfCustomers = Number(data[1].rows[0].count ?? '0');
 72 |     const totalPaidInvoices = formatCurrency(data[2].rows[0].paid ?? '0');
 73 |     const totalPendingInvoices = formatCurrency(data[2].rows[0].pending ?? '0');
 74 | 
 75 |     return {
 76 |       numberOfCustomers,
 77 |       numberOfInvoices,
 78 |       totalPaidInvoices,
 79 |       totalPendingInvoices,
 80 |     };
 81 |   } catch (error) {
 82 |     console.error('Database Error:', error);
 83 |     throw new Error('Failed to fetch card data.');
 84 |   }
 85 | }
 86 | 
 87 | const ITEMS_PER_PAGE = 6;
 88 | export async function fetchFilteredInvoices(
 89 |   query: string,
 90 |   currentPage: number,
 91 | ) {
 92 |   const offset = (currentPage - 1) * ITEMS_PER_PAGE;
 93 | 
 94 |   try {
 95 |     const invoices = await sql<InvoicesTable>`
 96 |       SELECT
 97 |         invoices.id,
 98 |         invoices.amount,
 99 |         invoices.date,
100 |         invoices.status,
101 |         customers.name,
102 |         customers.email,
103 |         customers.image_url
104 |       FROM invoices
105 |       JOIN customers ON invoices.customer_id = customers.id
106 |       WHERE
107 |         customers.name ILIKE ${`%${query}%`} OR
108 |         customers.email ILIKE ${`%${query}%`} OR
109 |         invoices.amount::text ILIKE ${`%${query}%`} OR
110 |         invoices.date::text ILIKE ${`%${query}%`} OR
111 |         invoices.status ILIKE ${`%${query}%`}
112 |       ORDER BY invoices.date DESC
113 |       LIMIT ${ITEMS_PER_PAGE} OFFSET ${offset}
114 |     `;
115 | 
116 |     return invoices.rows;
117 |   } catch (error) {
118 |     console.error('Database Error:', error);
119 |     throw new Error('Failed to fetch invoices.');
120 |   }
121 | }
122 | 
123 | export async function fetchInvoicesPages(query: string) {
124 |   try {
125 |     const count = await sql`SELECT COUNT(*)
126 |     FROM invoices
127 |     JOIN customers ON invoices.customer_id = customers.id
128 |     WHERE
129 |       customers.name ILIKE ${`%${query}%`} OR
130 |       customers.email ILIKE ${`%${query}%`} OR
131 |       invoices.amount::text ILIKE ${`%${query}%`} OR
132 |       invoices.date::text ILIKE ${`%${query}%`} OR
133 |       invoices.status ILIKE ${`%${query}%`}
134 |   `;
135 | 
136 |     const totalPages = Math.ceil(Number(count.rows[0].count) / ITEMS_PER_PAGE);
137 |     return totalPages;
138 |   } catch (error) {
139 |     console.error('Database Error:', error);
140 |     throw new Error('Failed to fetch total number of invoices.');
141 |   }
142 | }
143 | 
144 | export async function fetchInvoiceById(id: string) {
145 |   try {
146 |     const data = await sql<InvoiceForm>`
147 |       SELECT
148 |         invoices.id,
149 |         invoices.customer_id,
150 |         invoices.amount,
151 |         invoices.status
152 |       FROM invoices
153 |       WHERE invoices.id = ${id};
154 |     `;
155 | 
156 |     const invoice = data.rows.map((invoice) => ({
157 |       ...invoice,
158 |       // Convert amount from cents to dollars
159 |       amount: invoice.amount / 100,
160 |     }));
161 | 
162 |     console.log(invoice); // Invoice is an empty array []
163 |     return invoice[0];
164 |   } catch (error) {
165 |     console.error('Database Error:', error);
166 |     throw new Error('Failed to fetch invoice.');
167 |   }
168 | }
169 | 
170 | export async function fetchCustomers() {
171 |   try {
172 |     const data = await sql<CustomerField>`
173 |       SELECT
174 |         id,
175 |         name
176 |       FROM customers
177 |       ORDER BY name ASC
178 |     `;
179 | 
180 |     const customers = data.rows;
181 |     return customers;
182 |   } catch (err) {
183 |     console.error('Database Error:', err);
184 |     throw new Error('Failed to fetch all customers.');
185 |   }
186 | }
187 | 
188 | export async function fetchFilteredCustomers(query: string) {
189 |   try {
190 |     const data = await sql<CustomersTableType>`
191 | 		SELECT
192 | 		  customers.id,
193 | 		  customers.name,
194 | 		  customers.email,
195 | 		  customers.image_url,
196 | 		  COUNT(invoices.id) AS total_invoices,
197 | 		  SUM(CASE WHEN invoices.status = 'pending' THEN invoices.amount ELSE 0 END) AS total_pending,
198 | 		  SUM(CASE WHEN invoices.status = 'paid' THEN invoices.amount ELSE 0 END) AS total_paid
199 | 		FROM customers
200 | 		LEFT JOIN invoices ON customers.id = invoices.customer_id
201 | 		WHERE
202 | 		  customers.name ILIKE ${`%${query}%`} OR
203 |         customers.email ILIKE ${`%${query}%`}
204 | 		GROUP BY customers.id, customers.name, customers.email, customers.image_url
205 | 		ORDER BY customers.name ASC
206 | 	  `;
207 | 
208 |     const customers = data.rows.map((customer) => ({
209 |       ...customer,
210 |       total_pending: formatCurrency(customer.total_pending),
211 |       total_paid: formatCurrency(customer.total_paid),
212 |     }));
213 | 
214 |     return customers;
215 |   } catch (err) {
216 |     console.error('Database Error:', err);
217 |     throw new Error('Failed to fetch customer table.');
218 |   }
219 | }
220 | 


--------------------------------------------------------------------------------
/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 |     <div
  8 |       className={`${shimmer} relative overflow-hidden rounded-xl bg-gray-100 p-2 shadow-sm`}
  9 |     >
 10 |       <div className="flex p-4">
 11 |         <div className="h-5 w-5 rounded-md bg-gray-200" />
 12 |         <div className="ml-2 h-6 w-16 rounded-md bg-gray-200 text-sm font-medium" />
 13 |       </div>
 14 |       <div className="flex items-center justify-center truncate rounded-xl bg-white px-4 py-8">
 15 |         <div className="h-7 w-20 rounded-md bg-gray-200" />
 16 |       </div>
 17 |     </div>
 18 |   );
 19 | }
 20 | 
 21 | export function CardsSkeleton() {
 22 |   return (
 23 |     <>
 24 |       <CardSkeleton />
 25 |       <CardSkeleton />
 26 |       <CardSkeleton />
 27 |       <CardSkeleton />
 28 |     </>
 29 |   );
 30 | }
 31 | 
 32 | export function RevenueChartSkeleton() {
 33 |   return (
 34 |     <div className={`${shimmer} relative w-full overflow-hidden md:col-span-4`}>
 35 |       <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
 36 |       <div className="rounded-xl bg-gray-100 p-4">
 37 |         <div className="mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md bg-white p-4 sm:grid-cols-13 md:gap-4" />
 38 |         <div className="flex items-center pb-2 pt-6">
 39 |           <div className="h-5 w-5 rounded-full bg-gray-200" />
 40 |           <div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
 41 |         </div>
 42 |       </div>
 43 |     </div>
 44 |   );
 45 | }
 46 | 
 47 | export function InvoiceSkeleton() {
 48 |   return (
 49 |     <div className="flex flex-row items-center justify-between border-b border-gray-100 py-4">
 50 |       <div className="flex items-center">
 51 |         <div className="mr-2 h-8 w-8 rounded-full bg-gray-200" />
 52 |         <div className="min-w-0">
 53 |           <div className="h-5 w-40 rounded-md bg-gray-200" />
 54 |           <div className="mt-2 h-4 w-12 rounded-md bg-gray-200" />
 55 |         </div>
 56 |       </div>
 57 |       <div className="mt-2 h-4 w-12 rounded-md bg-gray-200" />
 58 |     </div>
 59 |   );
 60 | }
 61 | 
 62 | export function LatestInvoicesSkeleton() {
 63 |   return (
 64 |     <div
 65 |       className={`${shimmer} relative flex w-full flex-col overflow-hidden md:col-span-4`}
 66 |     >
 67 |       <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
 68 |       <div className="flex grow flex-col justify-between rounded-xl bg-gray-100 p-4">
 69 |         <div className="bg-white px-6">
 70 |           <InvoiceSkeleton />
 71 |           <InvoiceSkeleton />
 72 |           <InvoiceSkeleton />
 73 |           <InvoiceSkeleton />
 74 |           <InvoiceSkeleton />
 75 |         </div>
 76 |         <div className="flex items-center pb-2 pt-6">
 77 |           <div className="h-5 w-5 rounded-full bg-gray-200" />
 78 |           <div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
 79 |         </div>
 80 |       </div>
 81 |     </div>
 82 |   );
 83 | }
 84 | 
 85 | export default function DashboardSkeleton() {
 86 |   return (
 87 |     <>
 88 |       <div
 89 |         className={`${shimmer} relative mb-4 h-8 w-36 overflow-hidden rounded-md bg-gray-100`}
 90 |       />
 91 |       <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
 92 |         <CardSkeleton />
 93 |         <CardSkeleton />
 94 |         <CardSkeleton />
 95 |         <CardSkeleton />
 96 |       </div>
 97 |       <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
 98 |         <RevenueChartSkeleton />
 99 |         <LatestInvoicesSkeleton />
100 |       </div>
101 |     </>
102 |   );
103 | }
104 | 
105 | export function TableRowSkeleton() {
106 |   return (
107 |     <tr className="w-full border-b border-gray-100 last-of-type:border-none [&:first-child>td:first-child]:rounded-tl-lg [&:first-child>td:last-child]:rounded-tr-lg [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg">
108 |       {/* Customer Name and Image */}
109 |       <td className="relative overflow-hidden whitespace-nowrap py-3 pl-6 pr-3">
110 |         <div className="flex items-center gap-3">
111 |           <div className="h-8 w-8 rounded-full bg-gray-100"></div>
112 |           <div className="h-6 w-24 rounded bg-gray-100"></div>
113 |         </div>
114 |       </td>
115 |       {/* Email */}
116 |       <td className="whitespace-nowrap px-3 py-3">
117 |         <div className="h-6 w-32 rounded bg-gray-100"></div>
118 |       </td>
119 |       {/* Amount */}
120 |       <td className="whitespace-nowrap px-3 py-3">
121 |         <div className="h-6 w-16 rounded bg-gray-100"></div>
122 |       </td>
123 |       {/* Date */}
124 |       <td className="whitespace-nowrap px-3 py-3">
125 |         <div className="h-6 w-16 rounded bg-gray-100"></div>
126 |       </td>
127 |       {/* Status */}
128 |       <td className="whitespace-nowrap px-3 py-3">
129 |         <div className="h-6 w-16 rounded bg-gray-100"></div>
130 |       </td>
131 |       {/* Actions */}
132 |       <td className="whitespace-nowrap py-3 pl-6 pr-3">
133 |         <div className="flex justify-end gap-3">
134 |           <div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
135 |           <div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
136 |         </div>
137 |       </td>
138 |     </tr>
139 |   );
140 | }
141 | 
142 | export function InvoicesMobileSkeleton() {
143 |   return (
144 |     <div className="mb-2 w-full rounded-md bg-white p-4">
145 |       <div className="flex items-center justify-between border-b border-gray-100 pb-8">
146 |         <div className="flex items-center">
147 |           <div className="mr-2 h-8 w-8 rounded-full bg-gray-100"></div>
148 |           <div className="h-6 w-16 rounded bg-gray-100"></div>
149 |         </div>
150 |         <div className="h-6 w-16 rounded bg-gray-100"></div>
151 |       </div>
152 |       <div className="flex w-full items-center justify-between pt-4">
153 |         <div>
154 |           <div className="h-6 w-16 rounded bg-gray-100"></div>
155 |           <div className="mt-2 h-6 w-24 rounded bg-gray-100"></div>
156 |         </div>
157 |         <div className="flex justify-end gap-2">
158 |           <div className="h-10 w-10 rounded bg-gray-100"></div>
159 |           <div className="h-10 w-10 rounded bg-gray-100"></div>
160 |         </div>
161 |       </div>
162 |     </div>
163 |   );
164 | }
165 | 
166 | export function InvoicesTableSkeleton() {
167 |   return (
168 |     <div className="mt-6 flow-root">
169 |       <div className="inline-block min-w-full align-middle">
170 |         <div className="rounded-lg bg-gray-50 p-2 md:pt-0">
171 |           <div className="md:hidden">
172 |             <InvoicesMobileSkeleton />
173 |             <InvoicesMobileSkeleton />
174 |             <InvoicesMobileSkeleton />
175 |             <InvoicesMobileSkeleton />
176 |             <InvoicesMobileSkeleton />
177 |             <InvoicesMobileSkeleton />
178 |           </div>
179 |           <table className="hidden min-w-full text-gray-900 md:table">
180 |             <thead className="rounded-lg text-left text-sm font-normal">
181 |               <tr>
182 |                 <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
183 |                   Customer
184 |                 </th>
185 |                 <th scope="col" className="px-3 py-5 font-medium">
186 |                   Email
187 |                 </th>
188 |                 <th scope="col" className="px-3 py-5 font-medium">
189 |                   Amount
190 |                 </th>
191 |                 <th scope="col" className="px-3 py-5 font-medium">
192 |                   Date
193 |                 </th>
194 |                 <th scope="col" className="px-3 py-5 font-medium">
195 |                   Status
196 |                 </th>
197 |                 <th
198 |                   scope="col"
199 |                   className="relative pb-4 pl-3 pr-6 pt-2 sm:pr-6"
200 |                 >
201 |                   <span className="sr-only">Edit</span>
202 |                 </th>
203 |               </tr>
204 |             </thead>
205 |             <tbody className="bg-white">
206 |               <TableRowSkeleton />
207 |               <TableRowSkeleton />
208 |               <TableRowSkeleton />
209 |               <TableRowSkeleton />
210 |               <TableRowSkeleton />
211 |               <TableRowSkeleton />
212 |             </tbody>
213 |           </table>
214 |         </div>
215 |       </div>
216 |     </div>
217 |   );
218 | }
219 | 


--------------------------------------------------------------------------------