teodors/vercel_dashboard_example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Teodors
2026-05-12 17:35:38 +03:00
parent d9ffcb4b92
commit e3f3e62482
51 changed files with 882 additions and 3413 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/dashboard/(overview)/loading.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import DashboardSkeleton from '@/app/ui/skeletons';
import DashboardSkeleton from "@/app/ui/skeletons";
export default function Loading() {
return <DashboardSkeleton />;
app/dashboard/(overview)/page.tsx
+12 -10
View File
@@ -1,16 +1,19 @@
import CardWrapper, { Card } from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';
import { Suspense } from 'react';
import { CardSkeleton, LatestInvoicesSkeleton, RevenueChartSkeleton } from '@/app/ui/skeletons';
import { Metadata } from 'next';
import type { Metadata } from "next";
import { Suspense } from "react";
import CardWrapper from "@/app/ui/dashboard/cards";
import LatestInvoices from "@/app/ui/dashboard/latest-invoices";
import RevenueChart from "@/app/ui/dashboard/revenue-chart";
import { lusitana } from "@/app/ui/fonts";
import {
CardSkeleton,
LatestInvoicesSkeleton,
RevenueChartSkeleton,
} from "@/app/ui/skeletons";
export const metadata: Metadata = {
title: 'Dashboard',
title: "Dashboard",
};
export default async function Page() {
return (
<main>
<h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
@@ -22,7 +25,6 @@ export default async function Page() {
</Suspense>
</div>
<div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
<Suspense fallback={<RevenueChartSkeleton />}>
<RevenueChart />
</Suspense>
app/dashboard/customers/page.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
export default function Page() {
return <p>Customers Page</p>;
}
import { Metadata } from 'next';
import type { Metadata } from "next";
export const metadata: Metadata = {
title: 'Customers',
title: "Customers",
};
app/dashboard/invoices/[id]/edit/not-found.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import Link from 'next/link';
import { FaceFrownIcon } from '@heroicons/react/24/outline';
import { FaceFrownIcon } from "@heroicons/react/24/outline";
import Link from "next/link";
export default function NotFound() {
return (
app/dashboard/invoices/[id]/edit/page.tsx
+10 -10
View File
@@ -1,11 +1,11 @@
import Form from '@/app/ui/invoices/edit-form';
import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';
import { notFound } from 'next/navigation';
import { Metadata } from 'next';
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { fetchCustomers, fetchInvoiceById } from "@/app/lib/data";
import Breadcrumbs from "@/app/ui/invoices/breadcrumbs";
import Form from "@/app/ui/invoices/edit-form";
export const metadata: Metadata = {
title: 'Edit invoices',
title: "Edit invoices",
};
export default async function Page(props: { params: Promise<{ id: string }> }) {
@@ -16,17 +16,17 @@ export default async function Page(props: { params: Promise<{ id: string }> }) {
fetchCustomers(),
]);
if (!invoice) {
if (!invoice) {
notFound();
}
}
return (
<main>
<Breadcrumbs
breadcrumbs={[
{ label: 'Invoices', href: '/dashboard/invoices' },
{ label: "Invoices", href: "/dashboard/invoices" },
{
label: 'Edit Invoice',
label: "Edit Invoice",
href: `/dashboard/invoices/${id}/edit`,
active: true,
},
app/dashboard/invoices/create/page.tsx
+8 -8
View File
@@ -1,10 +1,10 @@
import Form from '@/app/ui/invoices/create-form';
import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
import { fetchCustomers } from '@/app/lib/data';
import { Metadata } from 'next';
import type { Metadata } from "next";
import { fetchCustomers } from "@/app/lib/data";
import Breadcrumbs from "@/app/ui/invoices/breadcrumbs";
import Form from "@/app/ui/invoices/create-form";
export const metadata: Metadata = {
title: 'Create invoices',
title: "Create invoices",
};
export default async function Page() {
@@ -14,10 +14,10 @@ export default async function Page() {
<main>
<Breadcrumbs
breadcrumbs={[
{ label: 'Invoices', href: '/dashboard/invoices' },
{ label: "Invoices", href: "/dashboard/invoices" },
{
label: 'Create Invoice',
href: '/dashboard/invoices/create',
label: "Create Invoice",
href: "/dashboard/invoices/create",
active: true,
},
]}
app/dashboard/invoices/error.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
'use client';
"use client";
import { useEffect } from 'react';
import { useEffect } from "react";
export default function Error({
error,
app/dashboard/invoices/page.tsx
+11 -11
View File
@@ -1,15 +1,15 @@
import Pagination from '@/app/ui/invoices/pagination';
import Search from '@/app/ui/search';
import Table from '@/app/ui/invoices/table';
import { CreateInvoice } from '@/app/ui/invoices/buttons';
import { lusitana } from '@/app/ui/fonts';
import { Suspense } from 'react';
import { InvoicesTableSkeleton } from '@/app/ui/skeletons';
import { fetchInvoicesPages } from '@/app/lib/data';
import { Metadata } from 'next';
import type { Metadata } from "next";
import { Suspense } from "react";
import { fetchInvoicesPages } from "@/app/lib/data";
import { lusitana } from "@/app/ui/fonts";
import { CreateInvoice } from "@/app/ui/invoices/buttons";
import Pagination from "@/app/ui/invoices/pagination";
import Table from "@/app/ui/invoices/table";
import Search from "@/app/ui/search";
import { InvoicesTableSkeleton } from "@/app/ui/skeletons";
export const metadata: Metadata = {
title: 'Invoices',
title: "Invoices",
};
export default async function Page(props: {
@@ -19,7 +19,7 @@ export default async function Page(props: {
}>;
}) {
const searchParams = await props.searchParams;
const query = searchParams?.query || '';
const query = searchParams?.query || "";
const currentPage = Number(searchParams?.page) || 1;
const totalPages = await fetchInvoicesPages(query);
app/dashboard/layout.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import SideNav from '@/app/ui/dashboard/sidenav';
import SideNav from "@/app/ui/dashboard/sidenav";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
app/layout.tsx
+7 -7
View File
@@ -1,14 +1,14 @@
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
import { Metadata } from 'next';
import "@/app/ui/global.css";
import type { Metadata } from "next";
import { inter } from "@/app/ui/fonts";
export const metadata: Metadata = {
title: {
template: '%s | Acme Dashboard',
default: 'Acme Dashboard',
template: "%s | Acme Dashboard",
default: "Acme Dashboard",
},
description: 'The official Next.js Learn Dashboard built with App Router.',
metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
description: "The official Next.js Learn Dashboard built with App Router.",
metadataBase: new URL("https://next-learn-dashboard.vercel.sh"),
};
export default function RootLayout({
app/lib/actions.ts
+40 -40
View File
@@ -1,24 +1,24 @@
'use server';
"use server";
import { z } from 'zod';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import postgres from 'postgres';
import { signIn } from '@/auth';
import { AuthError } from 'next-auth';
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { AuthError } from "next-auth";
import postgres from "postgres";
import { z } from "zod";
import { signIn } from "@/auth";
const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });
const sql = postgres(process.env.POSTGRES_URL!, { ssl: "require" });
const FormSchema = z.object({
id: z.string(),
customerId: z.string({
invalid_type_error: 'Please select a customer',
invalid_type_error: "Please select a customer",
}),
amount: z.coerce
.number()
.gt(0, { message: 'Please enter an amount greater than $0.' }),
status: z.enum(['pending', 'paid'], {
invalid_type_error: 'Please select an invoice status. ',
.gt(0, { message: "Please enter an amount greater than $0." }),
status: z.enum(["pending", "paid"], {
invalid_type_error: "Please select an invoice status. ",
}),
date: z.string(),
});
@@ -35,53 +35,53 @@ export type State = {
message?: string | null;
};
export async function createInvoice(prevState: State, formData: FormData) {
export async function createInvoice(_prevState: State, formData: FormData) {
const validateFields = CreateInvoice.safeParse({
customerId: formData.get('customerId'),
amount: formData.get('amount'),
status: formData.get('status'),
customerId: formData.get("customerId"),
amount: formData.get("amount"),
status: formData.get("status"),
});
if (!validateFields.success) {
return {
errors: validateFields.error.flatten().fieldErrors,
message: 'Missing Fields. Failed to Create Invoice. ',
message: "Missing Fields. Failed to Create Invoice. ",
};
}
const { customerId, amount, status } = validateFields.data;
const amountInCents = amount * 100;
const date = new Date().toISOString().split('T')[0];
const date = new Date().toISOString().split("T")[0];
try {
await sql`
INSERT INTO invoices (customer_id, amount, status, date)
VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
`;
} catch (error) {
} catch (_error) {
return {
message: 'Database Error: Failed to Create Invoice.',
message: "Database Error: Failed to Create Invoice.",
};
}
revalidatePath('/dashboard/invoices');
redirect('/dashboard/invoices');
revalidatePath("/dashboard/invoices");
redirect("/dashboard/invoices");
}
export async function updateInvoice(
id: string,
prevState: State,
_prevState: State,
formData: FormData,
) {
const validateFields = UpdateInvoice.safeParse({
customerId: formData.get('customerId'),
amount: formData.get('amount'),
status: formData.get('status'),
customerId: formData.get("customerId"),
amount: formData.get("amount"),
status: formData.get("status"),
});
if (!validateFields.success) {
return {
errors: validateFields.error.flatten().fieldErrors,
message: 'Missing Fields. Failed to update Invoice',
message: "Missing Fields. Failed to update Invoice",
};
}
@@ -93,14 +93,14 @@ export async function updateInvoice(
SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
WHERE id = ${id}
`;
} catch (error) {
} catch (_error) {
return {
message: 'Database Failed: Error while updating the Invoice',
message: "Database Failed: Error while updating the Invoice",
};
}
revalidatePath('/dashboard/invoices');
redirect('/dashboard/invoices');
revalidatePath("/dashboard/invoices");
redirect("/dashboard/invoices");
}
export async function deleteInvoice(id: string) {
@@ -110,28 +110,28 @@ export async function deleteInvoice(id: string) {
DELETE FROM invoices
WHERE id = ${id}
`;
revalidatePath('/dashboard/invoices');
return { message: 'Deleted Invoice. ' };
} catch (error) {
revalidatePath("/dashboard/invoices");
return { message: "Deleted Invoice. " };
} catch (_error) {
return {
message: 'Database Error: Failed while deleting record from Invoice. ',
message: "Database Error: Failed while deleting record from Invoice. ",
};
}
}
export async function authenticate(
prevState: string | undefined,
_prevState: string | undefined,
formData: FormData,
) {
try {
await signIn('credentials', formData);
await signIn("credentials", formData);
} catch (error) {
if (error instanceof AuthError) {
switch (error.type) {
case 'CredentialsSignin':
return 'Invalid credentials';
case "CredentialsSignin":
return "Invalid credentials";
default:
return 'Something went wrong.';
return "Something went wrong.";
}
}
throw error;
app/lib/data.ts
+32 -31
View File
@@ -1,15 +1,16 @@
import postgres from 'postgres';
import {
import postgres from "postgres";
import type {
CustomerField,
CustomersTable,
InvoiceForm,
InvoicesTable,
LatestInvoiceRaw,
User,
Revenue,
} from './definitions';
import { formatCurrency } from './utils';
const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });
User,
} from "./definitions";
import { formatCurrency } from "./utils";
const sql = postgres(process.env.POSTGRES_URL!, { ssl: "require" });
export async function fetchRevenue() {
// Add noStore() here prevent the response from being cached.
// This is equivalent to in fetch(..., {cache: 'no-store'}).
@@ -18,17 +19,17 @@ export async function fetchRevenue() {
// Artificially delay a reponse for demo purposes.
// Don't do this in real life :)
console.log('Fetching revenue data...');
await new Promise((resolve) => setTimeout(resolve, 3000));
console.log("Fetching revenue data...");
await new Promise((resolve) => setTimeout(resolve, 3000));
const data = sql<Revenue[]>`SELECT * FROM revenue`;
const data = sql<Revenue[]>`SELECT * FROM revenue`;
console.log('Data fetch complete after 3 seconds.');
console.log("Data fetch complete after 3 seconds.");
return data;
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch revenue data.');
console.error("Database Error:", error);
throw new Error("Failed to fetch revenue data.");
}
}
@@ -47,8 +48,8 @@ export async function fetchLatestInvoices() {
}));
return latestInvoices;
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch the latest invoices.');
console.error("Database Error:", error);
throw new Error("Failed to fetch the latest invoices.");
}
}
@@ -70,10 +71,10 @@ export async function fetchCardData() {
invoiceStatusPromise,
]);
const numberOfInvoices = Number(data[0][0].count ?? '0');
const numberOfCustomers = Number(data[1][0].count ?? '0');
const totalPaidInvoices = formatCurrency(data[2][0].paid ?? '0');
const totalPendingInvoices = formatCurrency(data[2][0].pending ?? '0');
const numberOfInvoices = Number(data[0][0].count ?? "0");
const numberOfCustomers = Number(data[1][0].count ?? "0");
const totalPaidInvoices = formatCurrency(data[2][0].paid ?? "0");
const totalPendingInvoices = formatCurrency(data[2][0].pending ?? "0");
return {
numberOfCustomers,
@@ -82,8 +83,8 @@ export async function fetchCardData() {
totalPendingInvoices,
};
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to card data.');
console.error("Database Error:", error);
throw new Error("Failed to card data.");
}
}
@@ -118,8 +119,8 @@ export async function fetchFilteredInvoices(
return invoices;
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch invoices.');
console.error("Database Error:", error);
throw new Error("Failed to fetch invoices.");
}
}
@@ -139,8 +140,8 @@ export async function fetchInvoicesPages(query: string) {
const totalPages = Math.ceil(Number(count[0].count) / ITEMS_PER_PAGE);
return totalPages;
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch total number of invoices.');
console.error("Database Error:", error);
throw new Error("Failed to fetch total number of invoices.");
}
}
@@ -165,7 +166,7 @@ export async function fetchInvoiceById(id: string) {
console.log(invoice); // Invoice is an empty array []
return invoice[0];
} catch (error) {
console.error('Database Error:', error);
console.error("Database Error:", error);
}
}
@@ -182,8 +183,8 @@ export async function fetchCustomers() {
const customers = data;
return customers;
} catch (err) {
console.error('Database Error:', err);
throw new Error('Failed to fetch all customers.');
console.error("Database Error:", err);
throw new Error("Failed to fetch all customers.");
}
}
@@ -215,8 +216,8 @@ export async function fetchFilteredCustomers(query: string) {
return customers;
} catch (err) {
console.error('Database Error:', err);
throw new Error('Failed to fetch customer table.');
console.error("Database Error:", err);
throw new Error("Failed to fetch customer table.");
}
}
@@ -225,7 +226,7 @@ export async function getUser(email: string) {
const user = await sql`SELECT * from USERS where email=${email}`;
return user[0] as User;
} catch (error) {
console.error('Failed to fetch user:', error);
throw new Error('Failed to fetch user.');
console.error("Failed to fetch user:", error);
throw new Error("Failed to fetch user.");
}
}
app/lib/definitions.ts
+4 -4
View File
@@ -23,7 +23,7 @@ export type Invoice = {
date: string;
// In TypeScript, this is called a string union type.
// It means that the "status" property can only be one of the two strings: 'pending' or 'paid'.
status: 'pending' | 'paid';
status: "pending" | "paid";
};
export type Revenue = {
@@ -40,7 +40,7 @@ export type LatestInvoice = {
};
// The database returns a number for amount, but we later format it to a string with the formatCurrency function
export type LatestInvoiceRaw = Omit<LatestInvoice, 'amount'> & {
export type LatestInvoiceRaw = Omit<LatestInvoice, "amount"> & {
amount: number;
};
@@ -52,7 +52,7 @@ export type InvoicesTable = {
image_url: string;
date: string;
amount: number;
status: 'pending' | 'paid';
status: "pending" | "paid";
};
export type CustomersTable = {
@@ -84,5 +84,5 @@ export type InvoiceForm = {
id: string;
customer_id: string;
amount: number;
status: 'pending' | 'paid';
status: "pending" | "paid";
};
app/lib/placeholder-data.js
+86 -86
View File
@@ -2,73 +2,73 @@
// https://nextjs.org/learn/dashboard-app/fetching-data
const users = [
{
id: '410544b2-4001-4271-9855-fec4b6a6442a',
name: 'User',
email: 'user@nextmail.com',
password: '123456',
id: "410544b2-4001-4271-9855-fec4b6a6442a",
name: "User",
email: "user@nextmail.com",
password: "123456",
},
];
const customers = [
{
id: '3958dc9e-712f-4377-85e9-fec4b6a6442a',
name: 'Delba de Oliveira',
email: 'delba@oliveira.com',
image_url: '/customers/delba-de-oliveira.png',
id: "3958dc9e-712f-4377-85e9-fec4b6a6442a",
name: "Delba de Oliveira",
email: "delba@oliveira.com",
image_url: "/customers/delba-de-oliveira.png",
},
{
id: '3958dc9e-742f-4377-85e9-fec4b6a6442a',
name: 'Lee Robinson',
email: 'lee@robinson.com',
image_url: '/customers/lee-robinson.png',
id: "3958dc9e-742f-4377-85e9-fec4b6a6442a",
name: "Lee Robinson",
email: "lee@robinson.com",
image_url: "/customers/lee-robinson.png",
},
{
id: '3958dc9e-737f-4377-85e9-fec4b6a6442a',
name: 'Hector Simpson',
email: 'hector@simpson.com',
image_url: '/customers/hector-simpson.png',
id: "3958dc9e-737f-4377-85e9-fec4b6a6442a",
name: "Hector Simpson",
email: "hector@simpson.com",
image_url: "/customers/hector-simpson.png",
},
{
id: '50ca3e18-62cd-11ee-8c99-0242ac120002',
name: 'Steven Tey',
email: 'steven@tey.com',
image_url: '/customers/steven-tey.png',
id: "50ca3e18-62cd-11ee-8c99-0242ac120002",
name: "Steven Tey",
email: "steven@tey.com",
image_url: "/customers/steven-tey.png",
},
{
id: '3958dc9e-787f-4377-85e9-fec4b6a6442a',
name: 'Steph Dietz',
email: 'steph@dietz.com',
image_url: '/customers/steph-dietz.png',
id: "3958dc9e-787f-4377-85e9-fec4b6a6442a",
name: "Steph Dietz",
email: "steph@dietz.com",
image_url: "/customers/steph-dietz.png",
},
{
id: '76d65c26-f784-44a2-ac19-586678f7c2f2',
name: 'Michael Novotny',
email: 'michael@novotny.com',
image_url: '/customers/michael-novotny.png',
id: "76d65c26-f784-44a2-ac19-586678f7c2f2",
name: "Michael Novotny",
email: "michael@novotny.com",
image_url: "/customers/michael-novotny.png",
},
{
id: 'd6e15727-9fe1-4961-8c5b-ea44a9bd81aa',
name: 'Evil Rabbit',
email: 'evil@rabbit.com',
image_url: '/customers/evil-rabbit.png',
id: "d6e15727-9fe1-4961-8c5b-ea44a9bd81aa",
name: "Evil Rabbit",
email: "evil@rabbit.com",
image_url: "/customers/evil-rabbit.png",
},
{
id: '126eed9c-c90c-4ef6-a4a8-fcf7408d3c66',
name: 'Emil Kowalski',
email: 'emil@kowalski.com',
image_url: '/customers/emil-kowalski.png',
id: "126eed9c-c90c-4ef6-a4a8-fcf7408d3c66",
name: "Emil Kowalski",
email: "emil@kowalski.com",
image_url: "/customers/emil-kowalski.png",
},
{
id: 'CC27C14A-0ACF-4F4A-A6C9-D45682C144B9',
name: 'Amy Burns',
email: 'amy@burns.com',
image_url: '/customers/amy-burns.png',
id: "CC27C14A-0ACF-4F4A-A6C9-D45682C144B9",
name: "Amy Burns",
email: "amy@burns.com",
image_url: "/customers/amy-burns.png",
},
{
id: '13D07535-C59E-4157-A011-F8D2EF4E0CBB',
name: 'Balazs Orban',
email: 'balazs@orban.com',
image_url: '/customers/balazs-orban.png',
id: "13D07535-C59E-4157-A011-F8D2EF4E0CBB",
name: "Balazs Orban",
email: "balazs@orban.com",
image_url: "/customers/balazs-orban.png",
},
];
@@ -76,108 +76,108 @@ const invoices = [
{
customer_id: customers[0].id,
amount: 15795,
status: 'pending',
date: '2022-12-06',
status: "pending",
date: "2022-12-06",
},
{
customer_id: customers[1].id,
amount: 20348,
status: 'pending',
date: '2022-11-14',
status: "pending",
date: "2022-11-14",
},
{
customer_id: customers[4].id,
amount: 3040,
status: 'paid',
date: '2022-10-29',
status: "paid",
date: "2022-10-29",
},
{
customer_id: customers[3].id,
amount: 44800,
status: 'paid',
date: '2023-09-10',
status: "paid",
date: "2023-09-10",
},
{
customer_id: customers[5].id,
amount: 34577,
status: 'pending',
date: '2023-08-05',
status: "pending",
date: "2023-08-05",
},
{
customer_id: customers[7].id,
amount: 54246,
status: 'pending',
date: '2023-07-16',
status: "pending",
date: "2023-07-16",
},
{
customer_id: customers[6].id,
amount: 666,
status: 'pending',
date: '2023-06-27',
status: "pending",
date: "2023-06-27",
},
{
customer_id: customers[3].id,
amount: 32545,
status: 'paid',
date: '2023-06-09',
status: "paid",
date: "2023-06-09",
},
{
customer_id: customers[4].id,
amount: 1250,
status: 'paid',
date: '2023-06-17',
status: "paid",
date: "2023-06-17",
},
{
customer_id: customers[5].id,
amount: 8546,
status: 'paid',
date: '2023-06-07',
status: "paid",
date: "2023-06-07",
},
{
customer_id: customers[1].id,
amount: 500,
status: 'paid',
date: '2023-08-19',
status: "paid",
date: "2023-08-19",
},
{
customer_id: customers[5].id,
amount: 8945,
status: 'paid',
date: '2023-06-03',
status: "paid",
date: "2023-06-03",
},
{
customer_id: customers[2].id,
amount: 8945,
status: 'paid',
date: '2023-06-18',
status: "paid",
date: "2023-06-18",
},
{
customer_id: customers[0].id,
amount: 8945,
status: 'paid',
date: '2023-10-04',
status: "paid",
date: "2023-10-04",
},
{
customer_id: customers[2].id,
amount: 1000,
status: 'paid',
date: '2022-06-05',
status: "paid",
date: "2022-06-05",
},
];
const revenue = [
{ month: 'Jan', revenue: 2000 },
{ month: 'Feb', revenue: 1800 },
{ month: 'Mar', revenue: 2200 },
{ month: 'Apr', revenue: 2500 },
{ month: 'May', revenue: 2300 },
{ month: 'Jun', revenue: 3200 },
{ month: 'Jul', revenue: 3500 },
{ month: 'Aug', revenue: 3700 },
{ month: 'Sep', revenue: 2500 },
{ month: 'Oct', revenue: 2800 },
{ month: 'Nov', revenue: 3000 },
{ month: 'Dec', revenue: 4800 },
{ month: "Jan", revenue: 2000 },
{ month: "Feb", revenue: 1800 },
{ month: "Mar", revenue: 2200 },
{ month: "Apr", revenue: 2500 },
{ month: "May", revenue: 2300 },
{ month: "Jun", revenue: 3200 },
{ month: "Jul", revenue: 3500 },
{ month: "Aug", revenue: 3700 },
{ month: "Sep", revenue: 2500 },
{ month: "Oct", revenue: 2800 },
{ month: "Nov", revenue: 3000 },
{ month: "Dec", revenue: 4800 },
];
module.exports = {
app/lib/placeholder-data.ts
+67 -67
View File
@@ -2,49 +2,49 @@
// https://nextjs.org/learn/dashboard-app/fetching-data
const users = [
{
id: '410544b2-4001-4271-9855-fec4b6a6442a',
name: 'User',
email: 'user@nextmail.com',
password: '123456',
id: "410544b2-4001-4271-9855-fec4b6a6442a",
name: "User",
email: "user@nextmail.com",
password: "123456",
},
];
const customers = [
{
id: 'd6e15727-9fe1-4961-8c5b-ea44a9bd81aa',
name: 'Evil Rabbit',
email: 'evil@rabbit.com',
image_url: '/customers/evil-rabbit.png',
id: "d6e15727-9fe1-4961-8c5b-ea44a9bd81aa",
name: "Evil Rabbit",
email: "evil@rabbit.com",
image_url: "/customers/evil-rabbit.png",
},
{
id: '3958dc9e-712f-4377-85e9-fec4b6a6442a',
name: 'Delba de Oliveira',
email: 'delba@oliveira.com',
image_url: '/customers/delba-de-oliveira.png',
id: "3958dc9e-712f-4377-85e9-fec4b6a6442a",
name: "Delba de Oliveira",
email: "delba@oliveira.com",
image_url: "/customers/delba-de-oliveira.png",
},
{
id: '3958dc9e-742f-4377-85e9-fec4b6a6442a',
name: 'Lee Robinson',
email: 'lee@robinson.com',
image_url: '/customers/lee-robinson.png',
id: "3958dc9e-742f-4377-85e9-fec4b6a6442a",
name: "Lee Robinson",
email: "lee@robinson.com",
image_url: "/customers/lee-robinson.png",
},
{
id: '76d65c26-f784-44a2-ac19-586678f7c2f2',
name: 'Michael Novotny',
email: 'michael@novotny.com',
image_url: '/customers/michael-novotny.png',
id: "76d65c26-f784-44a2-ac19-586678f7c2f2",
name: "Michael Novotny",
email: "michael@novotny.com",
image_url: "/customers/michael-novotny.png",
},
{
id: 'CC27C14A-0ACF-4F4A-A6C9-D45682C144B9',
name: 'Amy Burns',
email: 'amy@burns.com',
image_url: '/customers/amy-burns.png',
id: "CC27C14A-0ACF-4F4A-A6C9-D45682C144B9",
name: "Amy Burns",
email: "amy@burns.com",
image_url: "/customers/amy-burns.png",
},
{
id: '13D07535-C59E-4157-A011-F8D2EF4E0CBB',
name: 'Balazs Orban',
email: 'balazs@orban.com',
image_url: '/customers/balazs-orban.png',
id: "13D07535-C59E-4157-A011-F8D2EF4E0CBB",
name: "Balazs Orban",
email: "balazs@orban.com",
image_url: "/customers/balazs-orban.png",
},
];
@@ -52,96 +52,96 @@ const invoices = [
{
customer_id: customers[0].id,
amount: 15795,
status: 'pending',
date: '2022-12-06',
status: "pending",
date: "2022-12-06",
},
{
customer_id: customers[1].id,
amount: 20348,
status: 'pending',
date: '2022-11-14',
status: "pending",
date: "2022-11-14",
},
{
customer_id: customers[4].id,
amount: 3040,
status: 'paid',
date: '2022-10-29',
status: "paid",
date: "2022-10-29",
},
{
customer_id: customers[3].id,
amount: 44800,
status: 'paid',
date: '2023-09-10',
status: "paid",
date: "2023-09-10",
},
{
customer_id: customers[5].id,
amount: 34577,
status: 'pending',
date: '2023-08-05',
status: "pending",
date: "2023-08-05",
},
{
customer_id: customers[2].id,
amount: 54246,
status: 'pending',
date: '2023-07-16',
status: "pending",
date: "2023-07-16",
},
{
customer_id: customers[0].id,
amount: 666,
status: 'pending',
date: '2023-06-27',
status: "pending",
date: "2023-06-27",
},
{
customer_id: customers[3].id,
amount: 32545,
status: 'paid',
date: '2023-06-09',
status: "paid",
date: "2023-06-09",
},
{
customer_id: customers[4].id,
amount: 1250,
status: 'paid',
date: '2023-06-17',
status: "paid",
date: "2023-06-17",
},
{
customer_id: customers[5].id,
amount: 8546,
status: 'paid',
date: '2023-06-07',
status: "paid",
date: "2023-06-07",
},
{
customer_id: customers[1].id,
amount: 500,
status: 'paid',
date: '2023-08-19',
status: "paid",
date: "2023-08-19",
},
{
customer_id: customers[5].id,
amount: 8945,
status: 'paid',
date: '2023-06-03',
status: "paid",
date: "2023-06-03",
},
{
customer_id: customers[2].id,
amount: 1000,
status: 'paid',
date: '2022-06-05',
status: "paid",
date: "2022-06-05",
},
];
const revenue = [
{ month: 'Jan', revenue: 2000 },
{ month: 'Feb', revenue: 1800 },
{ month: 'Mar', revenue: 2200 },
{ month: 'Apr', revenue: 2500 },
{ month: 'May', revenue: 2300 },
{ month: 'Jun', revenue: 3200 },
{ month: 'Jul', revenue: 3500 },
{ month: 'Aug', revenue: 3700 },
{ month: 'Sep', revenue: 2500 },
{ month: 'Oct', revenue: 2800 },
{ month: 'Nov', revenue: 3000 },
{ month: 'Dec', revenue: 4800 },
{ month: "Jan", revenue: 2000 },
{ month: "Feb", revenue: 1800 },
{ month: "Mar", revenue: 2200 },
{ month: "Apr", revenue: 2500 },
{ month: "May", revenue: 2300 },
{ month: "Jun", revenue: 3200 },
{ month: "Jul", revenue: 3500 },
{ month: "Aug", revenue: 3700 },
{ month: "Sep", revenue: 2500 },
{ month: "Oct", revenue: 2800 },
{ month: "Nov", revenue: 3000 },
{ month: "Dec", revenue: 4800 },
];
export { users, customers, invoices, revenue };
export { customers, invoices, revenue, users };
app/lib/utils.ts
+12 -12
View File
@@ -1,21 +1,21 @@
import { Revenue } from './definitions';
import type { Revenue } from "./definitions";
export const formatCurrency = (amount: number) => {
return (amount / 100).toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
return (amount / 100).toLocaleString("en-US", {
style: "currency",
currency: "USD",
});
};
export const formatDateToLocal = (
dateStr: string,
locale: string = 'en-US',
locale: string = "en-US",
) => {
const date = new Date(dateStr);
const options: Intl.DateTimeFormatOptions = {
day: 'numeric',
month: 'short',
year: 'numeric',
day: "numeric",
month: "short",
year: "numeric",
};
const formatter = new Intl.DateTimeFormat(locale, options);
return formatter.format(date);
@@ -45,13 +45,13 @@ export const generatePagination = (currentPage: number, totalPages: number) => {
// If the current page is among the first 3 pages,
// show the first 3, an ellipsis, and the last 2 pages.
if (currentPage <= 3) {
return [1, 2, 3, '...', totalPages - 1, totalPages];
return [1, 2, 3, "...", totalPages - 1, totalPages];
}
// If the current page is among the last 3 pages,
// show the first 2, an ellipsis, and the last 3 pages.
if (currentPage >= totalPages - 2) {
return [1, 2, '...', totalPages - 2, totalPages - 1, totalPages];
return [1, 2, "...", totalPages - 2, totalPages - 1, totalPages];
}
// If the current page is somewhere in the middle,
@@ -59,11 +59,11 @@ export const generatePagination = (currentPage: number, totalPages: number) => {
// another ellipsis, and the last page.
return [
1,
'...',
"...",
currentPage - 1,
currentPage,
currentPage + 1,
'...',
"...",
totalPages,
];
};
app/login/page.tsx
+5 -5
View File
@@ -1,10 +1,10 @@
import AcmeLogo from '@/app/ui/acme-logo';
import LoginForm from '@/app/ui/login-form';
import { Suspense } from 'react';
import { Metadata } from 'next';
import type { Metadata } from "next";
import { Suspense } from "react";
import AcmeLogo from "@/app/ui/acme-logo";
import LoginForm from "@/app/ui/login-form";
export const metadata: Metadata = {
title: 'Login',
title: "Login",
};
export default function LoginPage() {
app/page.tsx
+25 -25
View File
@@ -1,22 +1,22 @@
import AcmeLogo from '@/app/ui/acme-logo';
import styles from '@/app/ui/home.module.css';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import Image from 'next/image';
import Image from "next/image";
import Link from "next/link";
import AcmeLogo from "@/app/ui/acme-logo";
import { lusitana } from "@/app/ui/fonts";
import styles from "@/app/ui/home.module.css";
export default function Page() {
return (
<main className="flex min-h-screen flex-col p-6">
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
<AcmeLogo />
{/* <AcmeLogo /> */}
{/* <AcmeLogo /> */}
</div>
<div className="mt-4 flex grow flex-col gap-4 md:flex-row">
<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
<div className={styles.shape} />
<p
className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}
>
<strong>Welcome to Acme.</strong> This is the example for the{' '}
<div className={styles.shape} />
<p
className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}
>
<strong>Welcome to Acme.</strong> This is the example for the{" "}
<a href="https://nextjs.org/learn/" className="text-blue-500">
Next.js Learn Course
</a>
@@ -30,20 +30,20 @@ export default function Page() {
</Link>
</div>
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
<Image
src="/hero-desktop.png"
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop version"
/>
<Image
src="/hero-mobile.png"
width={560}
height={620}
className="block md:hidden"
alt="Screenshots of the dashboard project showing mobile version"
/>
<Image
src="/hero-desktop.png"
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop version"
/>
<Image
src="/hero-mobile.png"
width={560}
height={620}
className="block md:hidden"
alt="Screenshots of the dashboard project showing mobile version"
/>
</div>
</div>
</main>
app/query/route.ts
+7 -7
View File
@@ -1,20 +1,20 @@
import postgres from 'postgres';
import postgres from "postgres";
const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });
const sql = postgres(process.env.POSTGRES_URL!, { ssl: "require" });
async function listInvoices() {
const data = await sql`
const data = await sql`
SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;
`;
return data;
return data;
}
export async function GET() {
export async function GET() {
try {
return Response.json(await listInvoices());
return Response.json(await listInvoices());
} catch (error) {
return Response.json({ error }, { status: 500 });
return Response.json({ error }, { status: 500 });
}
}
app/seed/route.ts
+6 -6
View File
@@ -1,8 +1,8 @@
import bcrypt from 'bcrypt';
import postgres from 'postgres';
import { invoices, customers, revenue, users } from '../lib/placeholder-data';
import bcrypt from "bcrypt";
import postgres from "postgres";
import { customers, invoices, revenue, users } from "../lib/placeholder-data";
const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });
const sql = postgres(process.env.POSTGRES_URL!, { ssl: "require" });
async function seedUsers() {
await sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
@@ -103,14 +103,14 @@ async function seedRevenue() {
export async function GET() {
try {
const result = await sql.begin((sql) => [
const _result = await sql.begin((_sql) => [
seedUsers(),
seedCustomers(),
seedInvoices(),
seedRevenue(),
]);
return Response.json({ message: 'Database seeded successfully' });
return Response.json({ message: "Database seeded successfully" });
} catch (error) {
return Response.json({ error }, { status: 500 });
}
app/ui/acme-logo.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { GlobeAltIcon } from '@heroicons/react/24/outline';
import { lusitana } from '@/app/ui/fonts';
import { GlobeAltIcon } from "@heroicons/react/24/outline";
import { lusitana } from "@/app/ui/fonts";
export default function AcmeLogo() {
return (
app/ui/button.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import clsx from 'clsx';
import clsx from "clsx";
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
children: React.ReactNode;
@@ -9,7 +9,7 @@ export function Button({ children, className, ...rest }: ButtonProps) {
<button
{...rest}
className={clsx(
'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',
"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",
className,
)}
>
app/ui/customers/table.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
import Image from 'next/image';
import { lusitana } from '@/app/ui/fonts';
import Search from '../search';
import { CustomersTable, FormattedCustomersTable } from '@/app/lib/definitions';
import Image from "next/image";
import type { FormattedCustomersTable } from "@/app/lib/definitions";
import { lusitana } from "@/app/ui/fonts";
import Search from "../search";
export default async function customersTable({
customers,
}: {
app/ui/dashboard/cards.tsx
+5 -5
View File
@@ -1,11 +1,11 @@
import {
BanknotesIcon,
ClockIcon,
UserGroupIcon,
InboxIcon,
} from '@heroicons/react/24/outline';
import { lusitana } from '@/app/ui/fonts';
import { fetchCardData } from '@/app/lib/data';
UserGroupIcon,
} from "@heroicons/react/24/outline";
import { fetchCardData } from "@/app/lib/data";
import { lusitana } from "@/app/ui/fonts";
const iconMap = {
collected: BanknotesIcon,
@@ -43,7 +43,7 @@ export function Card({
}: {
title: string;
value: number | string;
type: 'invoices' | 'customers' | 'pending' | 'collected';
type: "invoices" | "customers" | "pending" | "collected";
}) {
const Icon = iconMap[type];
app/ui/dashboard/latest-invoices.tsx
+46 -44
View File
@@ -1,11 +1,11 @@
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';
import { ArrowPathIcon } from "@heroicons/react/24/outline";
import clsx from "clsx";
import Image from "next/image";
import { fetchLatestInvoices } from "@/app/lib/data";
import { lusitana } from "@/app/ui/fonts";
export default async function LatestInvoices() { // Remove props
export default async function LatestInvoices() {
// Remove props
const latestInvoices = await fetchLatestInvoices();
return (
@@ -16,44 +16,46 @@ export default async function LatestInvoices() { // Remove props
<div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
{/* NOTE: comment in this code when you get to this point in the course */}
{ <div className="bg-white px-6">
{latestInvoices.map((invoice, i) => {
return (
<div
key={invoice.id}
className={clsx(
'flex flex-row items-center justify-between py-4',
{
'border-t': i !== 0,
},
)}
>
<div className="flex items-center">
<Image
src={invoice.image_url}
alt={`${invoice.name}'s profile picture`}
className="mr-4 rounded-full"
width={32}
height={32}
/>
<div className="min-w-0">
<p className="truncate text-sm font-semibold md:text-base">
{invoice.name}
</p>
<p className="hidden text-sm text-gray-500 sm:block">
{invoice.email}
</p>
</div>
</div>
<p
className={`${lusitana.className} truncate text-sm font-medium md:text-base`}
{
<div className="bg-white px-6">
{latestInvoices.map((invoice, i) => {
return (
<div
key={invoice.id}
className={clsx(
"flex flex-row items-center justify-between py-4",
{
"border-t": i !== 0,
},
)}
>
{invoice.amount}
</p>
</div>
);
})}
</div> }
<div className="flex items-center">
<Image
src={invoice.image_url}
alt={`${invoice.name}'s profile picture`}
className="mr-4 rounded-full"
width={32}
height={32}
/>
<div className="min-w-0">
<p className="truncate text-sm font-semibold md:text-base">
{invoice.name}
</p>
<p className="hidden text-sm text-gray-500 sm:block">
{invoice.email}
</p>
</div>
</div>
<p
className={`${lusitana.className} truncate text-sm font-medium md:text-base`}
>
{invoice.amount}
</p>
</div>
);
})}
</div>
}
<div className="flex items-center pb-2 pt-6">
<ArrowPathIcon className="h-5 w-5 text-gray-500" />
<h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>
app/ui/dashboard/nav-links.tsx
+14 -14
View File
@@ -1,29 +1,29 @@
'use client';
"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';
HomeIcon,
UserGroupIcon,
} from "@heroicons/react/24/outline";
import clsx from "clsx";
import Link from "next/link";
import { usePathname } from "next/navigation";
// 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: "Home", href: "/dashboard", icon: HomeIcon },
{
name: 'Invoices',
href: '/dashboard/invoices',
name: "Invoices",
href: "/dashboard/invoices",
icon: DocumentDuplicateIcon,
},
{ name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
{ name: "Customers", href: "/dashboard/customers", icon: UserGroupIcon },
];
export default function NavLinks() {
const pathname = usePathname();
return (
return (
<>
{links.map((link) => {
const LinkIcon = link.icon;
@@ -32,9 +32,9 @@ return (
key={link.name}
href={link.href}
className={clsx(
'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
"flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3",
{
'bg-sky-100 text-blue-600': pathname === link.href,
"bg-sky-100 text-blue-600": pathname === link.href,
},
)}
>
app/ui/dashboard/revenue-chart.tsx
+38 -33
View File
@@ -1,8 +1,7 @@
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';
import { CalendarIcon } from "@heroicons/react/24/outline";
import { fetchRevenue } from "@/app/lib/data";
import { generateYAxis } from "@/app/lib/utils";
import { lusitana } from "@/app/ui/fonts";
// This component is representational only.
// For data visualization UI, check out:
@@ -10,7 +9,8 @@ import { fetchRevenue } from '@/app/lib/data';
// https://www.chartjs.org/
// https://airbnb.io/visx/
export default async function RevenueChart() { // Make component async, remove the props
export default async function RevenueChart() {
// Make component async, remove the props
const revenue = await fetchRevenue(); // Fetch data inside the component
const chartHeight = 350;
@@ -29,36 +29,41 @@ export default async function RevenueChart() { // Make component async, remove t
</h2>
{/* NOTE: comment in this code when you get to this point in the course */}
{ <div className="rounded-xl bg-gray-50 p-4">
<div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
<div
className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
style={{ height: `${chartHeight}px` }}
>
{yAxisLabels.map((label) => (
<p key={label}>{label}</p>
{
<div className="rounded-xl bg-gray-50 p-4">
<div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
<div
className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
style={{ height: `${chartHeight}px` }}
>
{yAxisLabels.map((label) => (
<p key={label}>{label}</p>
))}
</div>
{revenue.map((month) => (
<div
key={month.month}
className="flex flex-col items-center gap-2"
>
<div
className="w-full rounded-md bg-blue-300"
style={{
height: `${(chartHeight / topLabel) * month.revenue}px`,
}}
></div>
<p className="-rotate-90 text-sm text-gray-400 sm:rotate-0">
{month.month}
</p>
</div>
))}
</div>
{revenue.map((month) => (
<div key={month.month} className="flex flex-col items-center gap-2">
<div
className="w-full rounded-md bg-blue-300"
style={{
height: `${(chartHeight / topLabel) * month.revenue}px`,
}}
></div>
<p className="-rotate-90 text-sm text-gray-400 sm:rotate-0">
{month.month}
</p>
</div>
))}
<div className="flex items-center pb-2 pt-6">
<CalendarIcon className="h-5 w-5 text-gray-500" />
<h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
</div>
</div>
<div className="flex items-center pb-2 pt-6">
<CalendarIcon className="h-5 w-5 text-gray-500" />
<h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
</div>
</div> }
}
</div>
);
}
app/ui/dashboard/sidenav.tsx
+11 -10
View File
@@ -1,9 +1,8 @@
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 '@/auth';
import { redirect } from 'next/navigation';
import { PowerIcon } from "@heroicons/react/24/outline";
import Link from "next/link";
import AcmeLogo from "@/app/ui/acme-logo";
import NavLinks from "@/app/ui/dashboard/nav-links";
import { signOut } from "@/auth";
export default function SideNav() {
return (
@@ -19,10 +18,12 @@ export default function SideNav() {
<div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
<NavLinks />
<div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
<form action={async () => {
'use server';
await signOut();
}}>
<form
action={async () => {
"use server";
await signOut();
}}
>
<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">
<PowerIcon className="w-6" />
<div className="hidden md:block">Sign Out</div>
app/ui/fonts.ts
+4 -4
View File
@@ -1,8 +1,8 @@
import { Inter, Lusitana } from 'next/font/google';
import { Inter, Lusitana } from "next/font/google";
export const inter = Inter({ subsets: ['latin'] });
export const inter = Inter({ subsets: ["latin"] });
export const lusitana = Lusitana({
weight: ['400', '700'],
subsets: ['latin'],
weight: ["400", "700"],
subsets: ["latin"],
});
app/ui/global.css
+3 -3
View File
@@ -2,17 +2,17 @@
@tailwind components;
@tailwind utilities;
input[type='number'] {
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button {
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number']::-webkit-outer-spin-button {
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
app/ui/invoices/breadcrumbs.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
import { clsx } from 'clsx';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import { clsx } from "clsx";
import Link from "next/link";
import { lusitana } from "@/app/ui/fonts";
interface Breadcrumb {
label: string;
@@ -15,13 +15,13 @@ export default function Breadcrumbs({
}) {
return (
<nav aria-label="Breadcrumb" className="mb-6 block">
<ol className={clsx(lusitana.className, 'flex text-xl md:text-2xl')}>
<ol className={clsx(lusitana.className, "flex text-xl md:text-2xl")}>
{breadcrumbs.map((breadcrumb, index) => (
<li
key={breadcrumb.href}
aria-current={breadcrumb.active}
className={clsx(
breadcrumb.active ? 'text-gray-900' : 'text-gray-500',
breadcrumb.active ? "text-gray-900" : "text-gray-500",
)}
>
<Link href={breadcrumb.href}>{breadcrumb.label}</Link>
app/ui/invoices/buttons.tsx
+8 -7
View File
@@ -1,13 +1,13 @@
import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { PencilIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
import Link from "next/link";
import { deleteInvoice } from "@/app/lib/actions";
export function CreateInvoice() {
return (
<Link
href="/dashboard/invoices/create"
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"
>
<span className="hidden md:block">Create Invoice</span>{' '}
<span className="hidden md:block">Create Invoice</span>{" "}
<PlusIcon className="h-5 md:ml-4" />
</Link>
);
@@ -16,7 +16,7 @@ export function CreateInvoice() {
export function UpdateInvoice({ id }: { id: string }) {
return (
<Link
href="/dashboard/invoices"
href={`/dashboard/invoices/${id}/edit`}
className="rounded-md border p-2 hover:bg-gray-100"
>
<PencilIcon className="w-5" />
@@ -25,12 +25,13 @@ export function UpdateInvoice({ id }: { id: string }) {
}
export function DeleteInvoice({ id }: { id: string }) {
const deleteInvoiceWithId = deleteInvoice.bind(null, id);
return (
<>
<form action={deleteInvoiceWithId}>
<button className="rounded-md border p-2 hover:bg-gray-100">
<span className="sr-only">Delete</span>
<TrashIcon className="w-5" />
</button>
</>
</form>
);
}
app/ui/invoices/create-form.tsx
+13 -16
View File
@@ -1,25 +1,23 @@
'use client';
"use client";
import { useFormState } from 'react-dom';
import { CustomerField } from '@/app/lib/definitions';
import Link from 'next/link';
import {
CheckIcon,
ClockIcon,
CurrencyDollarIcon,
UserCircleIcon,
} from '@heroicons/react/24/outline';
import { Button } from '../button';
import { createInvoice, State } from '@/app/lib/actions';
import { useActionState } from 'react';
} from "@heroicons/react/24/outline";
import Link from "next/link";
import { useFormState } from "react-dom";
import { createInvoice } from "@/app/lib/actions";
import type { CustomerField } from "@/app/lib/definitions";
import { Button } from "../button";
export default function Form({ customers }: { customers: CustomerField[] }) {
const initialState = { message: '', error: {} };
const [state, dispatch] = useFormState(createInvoice, initialState);
const initialState = { message: "", error: {} };
const [state, dispatch] = useFormState(createInvoice, initialState);
return (
<form action={dispatch}>
<form action={dispatch}>
<div className="rounded-md bg-gray-50 p-4 md:p-6">
{/* Customer Name */}
<div className="mb-4">
@@ -46,11 +44,10 @@ const [state, dispatch] = useFormState(createInvoice, initialState);
<UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
</div>
<div id="customer-error" aria-live="polite" aria-atomic="true">
{state.errors?.customerId &&
state.errors.customerId.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{state.errors?.customerId?.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
</p>
))}
</div>
</div>
app/ui/invoices/edit-form.tsx
+7 -7
View File
@@ -1,14 +1,14 @@
'use client';
"use client";
import { CustomerField, InvoiceForm } from '@/app/lib/definitions';
import {
CheckIcon,
ClockIcon,
CurrencyDollarIcon,
UserCircleIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { Button } from '@/app/ui/button';
} from "@heroicons/react/24/outline";
import Link from "next/link";
import type { CustomerField, InvoiceForm } from "@/app/lib/definitions";
import { Button } from "@/app/ui/button";
export default function EditInvoiceForm({
invoice,
@@ -80,7 +80,7 @@ export default function EditInvoiceForm({
name="status"
type="radio"
value="pending"
defaultChecked={invoice.status === 'pending'}
defaultChecked={invoice.status === "pending"}
className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
/>
<label
@@ -96,7 +96,7 @@ export default function EditInvoiceForm({
name="status"
type="radio"
value="paid"
defaultChecked={invoice.status === 'paid'}
defaultChecked={invoice.status === "paid"}
className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
/>
<label
app/ui/invoices/pagination.tsx
+53 -56
View File
@@ -1,62 +1,59 @@
'use client';
"use client";
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import Link from 'next/link';
import { generatePagination } from '@/app/lib/utils';
import { usePathname, useSearchParams } from 'next/navigation';
import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
import clsx from "clsx";
import Link from "next/link";
import { usePathname, useSearchParams } from "next/navigation";
import { generatePagination } from "@/app/lib/utils";
export default function Pagination({ totalPages }: { totalPages: number }) {
const pathname = usePathname();
const searchParams = useSearchParams();
const currentPage = Number(searchParams.get('page')) || 1;
const currentPage = Number(searchParams.get("page")) || 1;
const createPageURL = (pageNumber: number | string) => {
const params = new URLSearchParams(searchParams);
params.set('page', pageNumber.toString());
params.set("page", pageNumber.toString());
return `${pathname}?${params.toString()}`;
};
const allPages = generatePagination(currentPage, totalPages);
return (
<>
<div className="inline-flex">
<PaginationArrow
direction="left"
href={createPageURL(currentPage - 1)}
isDisabled={currentPage <= 1}
/>
<div className="inline-flex">
<PaginationArrow
direction="left"
href={createPageURL(currentPage - 1)}
isDisabled={currentPage <= 1}
/>
<div className="flex -space-x-px">
{allPages.map((page, index) => {
let position: "first" | "last" | "single" | "middle" | undefined;
<div className="flex -space-x-px">
{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";
if (index === 0) position = 'first';
if (index === allPages.length - 1) position = 'last';
if (allPages.length === 1) position = 'single';
if (page === '...') position = 'middle';
return (
<PaginationNumber
key={page}
href={createPageURL(page)}
page={page}
position={position}
isActive={currentPage === page}
/>
);
})}
</div>
<PaginationArrow
direction="right"
href={createPageURL(currentPage + 1)}
isDisabled={currentPage >= totalPages}
/>
return (
<PaginationNumber
key={page}
href={createPageURL(page)}
page={page}
position={position}
isActive={currentPage === page}
/>
);
})}
</div>
</>
<PaginationArrow
direction="right"
href={createPageURL(currentPage + 1)}
isDisabled={currentPage >= totalPages}
/>
</div>
);
}
@@ -68,21 +65,21 @@ function PaginationNumber({
}: {
page: number | string;
href: string;
position?: 'first' | 'last' | 'middle' | 'single';
position?: "first" | "last" | "middle" | "single";
isActive: boolean;
}) {
const className = clsx(
'flex h-10 w-10 items-center justify-center text-sm border',
"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',
"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' ? (
return isActive || position === "middle" ? (
<div className={className}>{page}</div>
) : (
<Link href={href} className={className}>
@@ -97,21 +94,21 @@ function PaginationArrow({
isDisabled,
}: {
href: string;
direction: 'left' | 'right';
direction: "left" | "right";
isDisabled?: boolean;
}) {
const className = clsx(
'flex h-10 w-10 items-center justify-center rounded-md border',
"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',
"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' ? (
direction === "left" ? (
<ArrowLeftIcon className="w-4" />
) : (
<ArrowRightIcon className="w-4" />
app/ui/invoices/status.tsx
+7 -7
View File
@@ -1,24 +1,24 @@
import { CheckIcon, ClockIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import { CheckIcon, ClockIcon } from "@heroicons/react/24/outline";
import clsx from "clsx";
export default function InvoiceStatus({ status }: { status: string }) {
return (
<span
className={clsx(
'inline-flex items-center rounded-full px-2 py-1 text-xs',
"inline-flex items-center rounded-full px-2 py-1 text-xs",
{
'bg-gray-100 text-gray-500': status === 'pending',
'bg-green-500 text-white': status === 'paid',
"bg-gray-100 text-gray-500": status === "pending",
"bg-green-500 text-white": status === "paid",
},
)}
>
{status === 'pending' ? (
{status === "pending" ? (
<>
Pending
<ClockIcon className="ml-1 w-4 text-gray-500" />
</>
) : null}
{status === 'paid' ? (
{status === "paid" ? (
<>
Paid
<CheckIcon className="ml-1 w-4 text-white" />
app/ui/invoices/table.tsx
+5 -5
View File
@@ -1,8 +1,8 @@
import Image from 'next/image';
import { UpdateInvoice, DeleteInvoice } from '@/app/ui/invoices/buttons';
import InvoiceStatus from '@/app/ui/invoices/status';
import { formatDateToLocal, formatCurrency } from '@/app/lib/utils';
import { fetchFilteredInvoices } from '@/app/lib/data';
import Image from "next/image";
import { fetchFilteredInvoices } from "@/app/lib/data";
import { formatCurrency, formatDateToLocal } from "@/app/lib/utils";
import { DeleteInvoice, UpdateInvoice } from "@/app/ui/invoices/buttons";
import InvoiceStatus from "@/app/ui/invoices/status";
export default async function InvoicesTable({
query,
app/ui/login-form.tsx
+17 -15
View File
@@ -1,19 +1,18 @@
'use client';
"use client";
import { lusitana } from '@/app/ui/fonts';
import { ArrowRightIcon } from "@heroicons/react/20/solid";
import {
AtSymbolIcon,
KeyIcon,
ExclamationCircleIcon,
} from '@heroicons/react/24/outline';
import { ArrowRightIcon } from '@heroicons/react/20/solid';
import { Button } from './button';
import { useFormState, useFormStatus } from 'react-dom';
import { authenticate } from '../lib/actions';
KeyIcon,
} from "@heroicons/react/24/outline";
import { useFormState, useFormStatus } from "react-dom";
import { lusitana } from "@/app/ui/fonts";
import { authenticate } from "../lib/actions";
import { Button } from "./button";
export default function LoginForm() {
const [errorMessage, dispatch] = useFormState(authenticate, undefined)
const [errorMessage, dispatch] = useFormState(authenticate, undefined);
return (
<form action={dispatch} className="space-y-3">
<div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
@@ -62,15 +61,18 @@ export default function LoginForm() {
</div>
</div>
<LoginButton />
<div className="flex h-8 items-end space-x-1" aria-live='polite' aria-atomic='true'>
<div
className="flex h-8 items-end space-x-1"
aria-live="polite"
aria-atomic="true"
>
{/* Add form errors here */}
{errorMessage && (
<>
<ExclamationCircleIcon className='h-5 w-5 text-red-500' />
<p className='text-sm text-red-500'>{errorMessage}</p>
<ExclamationCircleIcon className="h-5 w-5 text-red-500" />
<p className="text-sm text-red-500">{errorMessage}</p>
</>
)}
</div>
</div>
</form>
@@ -78,7 +80,7 @@ export default function LoginForm() {
}
function LoginButton() {
const {pending} = useFormStatus()
const { pending } = useFormStatus();
return (
<Button className="mt-4 w-full" aria-disabled={pending}>
Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
app/ui/search.tsx
+10 -11
View File
@@ -1,10 +1,10 @@
'use client';
"use client";
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { useSearchParams, usePathname, useRouter } from 'next/navigation';
import { useDebouncedCallback } from 'use-debounce';
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useDebouncedCallback } from "use-debounce";
var placeholder = '';
var placeholder = "";
export default function Search() {
const searchParams = useSearchParams();
@@ -12,14 +12,13 @@ export default function Search() {
const { replace } = useRouter();
const handleSearch = useDebouncedCallback((term) => {
console.log(`Searching... ${term}`);
const params = new URLSearchParams(searchParams);
params.set('page', '1');
params.set("page", "1");
if (term) {
params.set('query', term);
params.set("query", term);
} else {
params.delete('query');
params.delete("query");
}
replace(`${pathname}?${params.toString()}`);
}, 300);
@@ -34,8 +33,8 @@ export default function Search() {
onChange={(e) => {
handleSearch(e.target.value);
}}
defaultValue={searchParams.get('query')?.toString()}
/>
defaultValue={searchParams.get("query")?.toString()}
/>
<MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
</div>
);
app/ui/skeletons.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
// 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';
"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 (
auth.config.ts
+4 -4
View File
@@ -1,18 +1,18 @@
import type { NextAuthConfig } from 'next-auth';
import type { NextAuthConfig } from "next-auth";
export const authConfig = {
pages: {
signIn: '/login',
signIn: "/login",
},
callbacks: {
authorized({ auth, request: { nextUrl } }) {
const isLoggedIn = !!auth?.user;
const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');
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 Response.redirect(new URL("/dashboard", nextUrl));
}
return true;
},
auth.ts
+11 -11
View File
@@ -1,20 +1,20 @@
import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { authConfig } from './auth.config';
import { z } from 'zod';
import type { User } from '@/app/lib/definitions';
import bcrypt from 'bcrypt';
import postgres from 'postgres';
import bcrypt from "bcrypt";
import NextAuth from "next-auth";
import Credentials from "next-auth/providers/credentials";
import postgres from "postgres";
import { z } from "zod";
import type { User } from "@/app/lib/definitions";
import { authConfig } from "./auth.config";
const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });
const sql = postgres(process.env.POSTGRES_URL!, { ssl: "require" });
async function getUser(email: string): Promise<User | undefined> {
try {
const user = await sql<User[]>`SELECT * FROM users WHERE email=${email}`;
return user[0];
} catch (error) {
console.error('Failed to fetch user:', error);
throw new Error('Failed to fetch user.');
console.error("Failed to fetch user:", error);
throw new Error("Failed to fetch user.");
}
}
@@ -36,7 +36,7 @@ export const { auth, signIn, signOut } = NextAuth({
if (passwordsMatch) return user;
}
console.log('Invalid credentials');
console.log("Invalid credentials");
return null;
},
}),
biome.json
+42
View File
@@ -0,0 +1,42 @@
{
"$schema": "https://biomejs.dev/schemas/2.4.15/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignoreUnknown": false
},
"formatter": {
"enabled": true,
"indentStyle": "space"
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"style": {
"noNonNullAssertion": "off"
}
}
},
"css": {
"parser": {
"tailwindDirectives": true
}
},
"javascript": {
"formatter": {
"quoteStyle": "double"
}
},
"assist": {
"enabled": true,
"actions": {
"source": {
"organizeImports": "on"
}
}
}
}
eslint.config.mjs
-24
View File
@@ -1,24 +0,0 @@
import { defineConfig, globalIgnores } from 'eslint/config';
import nextVitals from 'eslint-config-next/core-web-vitals';
const eslintConfig = defineConfig([
...nextVitals,
// Override default ignores of eslint-config-next.
globalIgnores([
// Default ignores of eslint-config-next:
'.next/**',
'out/**',
'build/**',
'next-env.d.ts',
]),
{
settings: {
// Fix for ESLint 10+: eslint-plugin-react uses context.getFilename() (legacy API)
// which was removed in ESLint 10 flat config. Declaring the version explicitly
// prevents the plugin from trying to auto-detect it and failing.
react: { version: '19' },
},
},
]);
export default eslintConfig;
next.config.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import type { NextConfig } from 'next';
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
package.json
+1 -2
View File
@@ -24,12 +24,11 @@
"zod": "^3.25.17"
},
"devDependencies": {
"@biomejs/biome": "^2.4.15",
"@types/bcrypt": "^5.0.2",
"@types/node": "22.10.7",
"@types/react": "19.0.7",
"@types/react-dom": "19.0.3",
"eslint": "^10.3.0",
"eslint-config-next": "^16.2.6",
"typescript": "5.7.3"
},
"pnpm": {
pnpm-lock.yaml
Generated
+86 -2633
View File
File diff suppressed because it is too large Load Diff
proxy.ts
+3 -3
View File
@@ -1,9 +1,9 @@
import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
import NextAuth from "next-auth";
import { authConfig } from "./auth.config";
export default NextAuth(authConfig).auth;
export const config = {
// https://nextjs.org/docs/app/api-reference/file-conventions/proxy#matcher
matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
matcher: ["/((?!api|_next/static|_next/image|.*\\.png$).*)"],
};
tailwind.config.ts
+11 -11
View File
@@ -1,32 +1,32 @@
import type { Config } from 'tailwindcss';
import type { Config } from "tailwindcss";
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
gridTemplateColumns: {
'13': 'repeat(13, minmax(0, 1fr))',
"13": "repeat(13, minmax(0, 1fr))",
},
colors: {
blue: {
400: '#2589FE',
500: '#0070F3',
600: '#2F6FEB',
400: "#2589FE",
500: "#0070F3",
600: "#2F6FEB",
},
},
},
keyframes: {
shimmer: {
'100%': {
transform: 'translateX(100%)',
"100%": {
transform: "translateX(100%)",
},
},
},
},
plugins: [require('@tailwindcss/forms')],
plugins: [require("@tailwindcss/forms")],
};
export default config;
tsconfig.json
+3 -11
View File
@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -23,9 +19,7 @@
}
],
"paths": {
"@/*": [
"./*"
]
"@/*": ["./*"]
}
},
"include": [
@@ -37,7 +31,5 @@
"scripts/seed.js",
".next/dev/types/**/*.ts"
],
"exclude": [
"node_modules"
]
"exclude": ["node_modules"]
}