+ Dashboard +
+
+ {/*
+
+ {/*
+
+
+
+
+
+
+
+
+ This is use the lusitana font
*/} + {/*This is use the inter font
*/} + {/*
*/}
+ {/* */}
+ {/* */}
+
+
+
+
+
+
+ + Welcome to Acme. This is the example for the{" "} + + Next.js Learn Course + + , brought to you by Vercel. +
+ + Log in
+ {/* Add Hero Images Here */}
+
+
+
+ );
+}
diff --git a/app/ui/button.tsx b/app/ui/button.tsx
new file mode 100644
index 0000000..af8f627
--- /dev/null
+++ b/app/ui/button.tsx
@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+
+interface ButtonProps extends React.ButtonHTMLAttributesAcme
+
+
+ );
+}
diff --git a/app/ui/dashboard/cards.tsx b/app/ui/dashboard/cards.tsx
new file mode 100644
index 0000000..ea0936b
--- /dev/null
+++ b/app/ui/dashboard/cards.tsx
@@ -0,0 +1,60 @@
+import {
+ BanknotesIcon,
+ ClockIcon,
+ UserGroupIcon,
+ InboxIcon,
+} from '@heroicons/react/24/outline';
+import { lusitana } from '@/app/ui/fonts';
+import { fetchCardData } from '@/app/lib/data';
+
+const iconMap = {
+ collected: BanknotesIcon,
+ customers: UserGroupIcon,
+ pending: ClockIcon,
+ invoices: InboxIcon,
+};
+
+export default async function CardWrapper() {
+ const { numberOfInvoices, numberOfCustomers, totalPaidInvoices, totalPendingInvoices } = await fetchCardData();
+ return (
+ <>
+ {/* NOTE: Uncomment this code in Chapter 9 */}
+
+ + Customers +
+
+
+
+
+
+
+
+
+
+
+
+
+ {customers?.map((customer) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ {customer.name}
++ {customer.email} +
+
+
+
+
+ Pending
+{customer.total_pending}
+
+
+ Paid
+{customer.total_paid}
+
+
+ {customer.total_invoices} invoices
+| + Name + | ++ Email + | ++ Total Invoices + | ++ Total Pending + | ++ Total Paid + | +
|---|---|---|---|---|
|
+
+
+ {customer.name} + |
+ + {customer.email} + | ++ {customer.total_invoices} + | ++ {customer.total_pending} + | ++ {customer.total_paid} + | +
+
+ );
+}
diff --git a/app/ui/dashboard/latest-invoices.tsx b/app/ui/dashboard/latest-invoices.tsx
new file mode 100644
index 0000000..ea96283
--- /dev/null
+++ b/app/ui/dashboard/latest-invoices.tsx
@@ -0,0 +1,62 @@
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+import Image from 'next/image';
+import { lusitana } from '@/app/ui/fonts';
+import { LatestInvoice } from '@/app/lib/definitions';
+import { fetchLatestInvoices } from '@/app/lib/data';
+export default async function LatestInvoices() {
+ const latestInvoices = await fetchLatestInvoices();
+ return (
+
+ {Icon ?
+ {title}
++ {value} +
+
+
+ );
+}
diff --git a/app/ui/dashboard/nav-links.tsx b/app/ui/dashboard/nav-links.tsx
new file mode 100644
index 0000000..694cbb0
--- /dev/null
+++ b/app/ui/dashboard/nav-links.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import {
+ UserGroupIcon,
+ HomeIcon,
+ DocumentDuplicateIcon,
+} from "@heroicons/react/24/outline";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import clsx from "clsx";
+
+// Map of links to display in the side navigation.
+// Depending on the size of the application, this would be stored in a database.
+const links = [
+ { name: "Home", href: "/dashboard", icon: HomeIcon },
+ {
+ name: "Invoices",
+ href: "/dashboard/invoices",
+ icon: DocumentDuplicateIcon,
+ },
+ { name: "Customers", href: "/dashboard/customers", icon: UserGroupIcon },
+];
+
+export default function NavLinks() {
+ const pathname = usePathname();
+ return (
+ <>
+ {links.map((link) => {
+ const LinkIcon = link.icon;
+ return (
+
+ + Latest Invoices +
+
+ {/* NOTE: Uncomment this code in Chapter 7 */}
+
+
+
+ {latestInvoices.map((invoice, i) => {
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+ + {invoice.name} +
++ {invoice.email} +
++ {invoice.amount} +
+
+
+ Updated just now
+{link.name}
+ + ); + })} + + ); +} diff --git a/app/ui/dashboard/revenue-chart.tsx b/app/ui/dashboard/revenue-chart.tsx new file mode 100644 index 0000000..a52d67b --- /dev/null +++ b/app/ui/dashboard/revenue-chart.tsx @@ -0,0 +1,64 @@ +import { generateYAxis } from '@/app/lib/utils'; +import { CalendarIcon } from '@heroicons/react/24/outline'; +import { lusitana } from '@/app/ui/fonts'; +import { Revenue } from '@/app/lib/definitions'; +import { fetchRevenue } from '@/app/lib/data'; + +// This component is representational only. +// For data visualization UI, check out: +// https://www.tremor.so/ +// https://www.chartjs.org/ +// https://airbnb.io/visx/ + +export default async function RevenueChart() { + const revenue = await fetchRevenue(); + + const chartHeight = 350; + // NOTE: Uncomment this code in Chapter 7 + + const { yAxisLabels, topLabel } = generateYAxis(revenue); + + if (!revenue || revenue.length === 0) { + returnNo data available.
; + } + + return ( +
+
+ );
+}
diff --git a/app/ui/dashboard/sidenav.tsx b/app/ui/dashboard/sidenav.tsx
new file mode 100644
index 0000000..a8f5143
--- /dev/null
+++ b/app/ui/dashboard/sidenav.tsx
@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import NavLinks from '@/app/ui/dashboard/nav-links';
+import AcmeLogo from '@/app/ui/acme-logo';
+import { PowerIcon } from '@heroicons/react/24/outline';
+import { signOut } from 'next-auth/react';
+
+export default function SideNav() {
+ return (
+ + Recent Revenue +
+ {/* NOTE: Uncomment this code in Chapter 7 */} + +
+
+
+
+
+ {yAxisLabels.map((label) => (
+
+
+ {revenue.map((month) => (
+ {label}
+ ))} +
+
+
+ ))}
+ + {month.month} +
+
+
+ Last 12 months
+
+
+
+ );
+}
diff --git a/app/ui/fonts.ts b/app/ui/fonts.ts
new file mode 100644
index 0000000..dac64ba
--- /dev/null
+++ b/app/ui/fonts.ts
@@ -0,0 +1,5 @@
+import { Inter, Lusitana } from 'next/font/google'
+
+export const inter = Inter({ subsets: ['latin'] })
+
+export const lusitana = Lusitana({ weight: ['400', '700'], subsets: ['latin'] })
\ No newline at end of file
diff --git a/app/ui/global.css b/app/ui/global.css
new file mode 100644
index 0000000..c06d6d6
--- /dev/null
+++ b/app/ui/global.css
@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+input[type='number'] {
+ -moz-appearance: textfield;
+ appearance: textfield;
+}
+
+input[type='number']::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type='number']::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
diff --git a/app/ui/home.module.css b/app/ui/home.module.css
new file mode 100644
index 0000000..9e584f9
--- /dev/null
+++ b/app/ui/home.module.css
@@ -0,0 +1,7 @@
+.shape {
+ height: 0;
+ width: 0;
+ border-bottom: 30px solid black;
+ border-left: 20px solid transparent;
+ border-right: 20px solid transparent;
+}
\ No newline at end of file
diff --git a/app/ui/invoices/breadcrumbs.tsx b/app/ui/invoices/breadcrumbs.tsx
new file mode 100644
index 0000000..cd9e226
--- /dev/null
+++ b/app/ui/invoices/breadcrumbs.tsx
@@ -0,0 +1,36 @@
+import { clsx } from 'clsx';
+import Link from 'next/link';
+import { lusitana } from '@/app/ui/fonts';
+
+interface Breadcrumb {
+ label: string;
+ href: string;
+ active?: boolean;
+}
+
+export default function Breadcrumbs({
+ breadcrumbs,
+}: {
+ breadcrumbs: Breadcrumb[];
+}) {
+ return (
+
+ );
+}
diff --git a/app/ui/invoices/buttons.tsx b/app/ui/invoices/buttons.tsx
new file mode 100644
index 0000000..ef87e80
--- /dev/null
+++ b/app/ui/invoices/buttons.tsx
@@ -0,0 +1,39 @@
+import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
+import Link from 'next/link';
+import { deleteInvoice } from '@/app/lib/actions';
+
+export function CreateInvoice() {
+ return (
+
+ Create Invoice{' '}
+
+
+
+
+
+
+ = totalPages}
+ />
+
+
+ );
+}
+
+function PaginationNumber({
+ page,
+ href,
+ isActive,
+ position,
+}: {
+ page: number | string;
+ href: string;
+ position?: 'first' | 'last' | 'middle' | 'single';
+ isActive: boolean;
+}) {
+ const className = clsx(
+ 'flex h-10 w-10 items-center justify-center text-sm border',
+ {
+ 'rounded-l-md': position === 'first' || position === 'single',
+ 'rounded-r-md': position === 'last' || position === 'single',
+ 'z-10 bg-blue-600 border-blue-600 text-white': isActive,
+ 'hover:bg-gray-100': !isActive && position !== 'middle',
+ 'text-gray-300': position === 'middle',
+ },
+ );
+
+ return isActive || position === 'middle' ? (
+
+ {allPages.map((page, index) => {
+ let position: 'first' | 'last' | 'single' | 'middle' | undefined;
+
+ if (index === 0) position = 'first';
+ if (index === allPages.length - 1) position = 'last';
+ if (allPages.length === 1) position = 'single';
+ if (page === '...') position = 'middle';
+
+ return (
+
+
+ {page}
+ ) : (
+
+ {page}
+
+ );
+}
+
+function PaginationArrow({
+ href,
+ direction,
+ isDisabled,
+}: {
+ href: string;
+ direction: 'left' | 'right';
+ isDisabled?: boolean;
+}) {
+ const className = clsx(
+ 'flex h-10 w-10 items-center justify-center rounded-md border',
+ {
+ 'pointer-events-none text-gray-300': isDisabled,
+ 'hover:bg-gray-100': !isDisabled,
+ 'mr-2 md:mr-4': direction === 'left',
+ 'ml-2 md:ml-4': direction === 'right',
+ },
+ );
+
+ const icon =
+ direction === 'left' ? (
+ {icon}
+ ) : (
+
+ {icon}
+
+ );
+}
diff --git a/app/ui/invoices/status.tsx b/app/ui/invoices/status.tsx
new file mode 100644
index 0000000..108bda5
--- /dev/null
+++ b/app/ui/invoices/status.tsx
@@ -0,0 +1,29 @@
+import { CheckIcon, ClockIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+
+export default function InvoiceStatus({ status }: { status: string }) {
+ return (
+
+ {status === 'pending' ? (
+ <>
+ Pending
+
+
+ );
+}
diff --git a/app/ui/login-form.tsx b/app/ui/login-form.tsx
new file mode 100644
index 0000000..3115f19
--- /dev/null
+++ b/app/ui/login-form.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { lusitana } from '@/app/ui/fonts';
+import {
+ AtSymbolIcon,
+ KeyIcon,
+ ExclamationCircleIcon,
+} from '@heroicons/react/24/outline';
+import { ArrowRightIcon } from '@heroicons/react/20/solid';
+import { Button } from './button';
+import { useActionState } from 'react';
+import { authenticate } from '@/app/lib/actions';
+import { useSearchParams } from 'next/navigation';
+
+export default function LoginForm() {
+ const searchParams = useSearchParams();
+ const callbackUrl = searchParams.get('callbackUrl') || '/dashboard';
+ const [errorMessage, formAction, isPending] = useActionState(
+ authenticate,
+ undefined,
+ );
+ return (
+
+ );
+}
diff --git a/app/ui/search.tsx b/app/ui/search.tsx
new file mode 100644
index 0000000..56cb764
--- /dev/null
+++ b/app/ui/search.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { useSearchParams, usePathname, useRouter } from 'next/navigation';
+import { useDebouncedCallback }from 'use-debounce';
+
+export default function Search({ placeholder }: { placeholder: string }) {
+ const searchParams = useSearchParams();
+ const pathname = usePathname();
+ const { replace } = useRouter();
+ const handleSearch = useDebouncedCallback((term) => {
+ console.log(`Searching... ${term}`);
+ const params = new URLSearchParams(searchParams);
+ params.set('page', '1')
+ if (term) {
+ params.set('query', term);
+ } else {
+ params.delete('query');
+ }
+ replace(`${pathname}?${params.toString()}`);
+ }, 300);
+
+ return (
+
+
+
+
+
+
+
+
+ {invoices?.map((invoice) => (
+
+
+
+ ))}
+
+
+
+
+
+
+ {invoice.name}
+{invoice.email}
+
+
+
+
+ + {formatCurrency(invoice.amount)} +
+{formatDateToLocal(invoice.date)}
+
+
+ | + Customer + | ++ Email + | ++ Amount + | ++ Date + | ++ Status + | ++ Edit + | +
|---|---|---|---|---|---|
|
+
+
+ {invoice.name} + |
+ + {invoice.email} + | ++ {formatCurrency(invoice.amount)} + | ++ {formatDateToLocal(invoice.date)} + | +
+ |
+
+
+
+ |
+
+
+ handleSearch(e.target.value)}
+ defaultValue={searchParams.get('query')?.toString()}
+ />
+
+ );
+}
diff --git a/app/ui/skeletons.tsx b/app/ui/skeletons.tsx
new file mode 100644
index 0000000..74816c4
--- /dev/null
+++ b/app/ui/skeletons.tsx
@@ -0,0 +1,218 @@
+// Loading animation
+const shimmer =
+ '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';
+
+export function CardSkeleton() {
+ return (
+
+
+ );
+}
+
+export function CardsSkeleton() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function InvoiceSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function LatestInvoicesSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default function DashboardSkeleton() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function TableRowSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function InvoicesTableSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/auth.config.ts b/auth.config.ts
new file mode 100644
index 0000000..b480147
--- /dev/null
+++ b/auth.config.ts
@@ -0,0 +1,21 @@
+import type { NextAuthConfig } from 'next-auth';
+
+export const authConfig = {
+ pages: {
+ signIn: '/login',
+ },
+ callbacks: {
+ authorized({ auth, request: { nextUrl } }) {
+ const isLoggedIn = !!auth?.user;
+ const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');
+ if (isOnDashboard) {
+ if (isLoggedIn) return true;
+ return false; // Redirect unauthenticated users to login page
+ } else if (isLoggedIn) {
+ return Response.redirect(new URL('/dashboard', nextUrl));
+ }
+ return true;
+ },
+ },
+ providers: [], // Add providers with an empty array for now
+} satisfies NextAuthConfig;
\ No newline at end of file
diff --git a/auth.ts b/auth.ts
new file mode 100644
index 0000000..724a869
--- /dev/null
+++ b/auth.ts
@@ -0,0 +1,43 @@
+import NextAuth from "next-auth";
+import { authConfig } from "./auth.config";
+import Credentials from "next-auth/providers/credentials";
+import z from "zod";
+import type { User } from "@/app/lib/definitions";
+import bcrypt from "bcrypt";
+import postgres from "postgres";
+
+const sql = postgres(process.env.DATABASE_URL!, { ssl: "require" });
+
+async function getUser(email: string): Promise
+
+
+
+
+
+
+
+
+ | + Customer + | ++ Email + | ++ Amount + | ++ Date + | ++ Status + | ++ Edit + | +
|---|