wy
2 years ago
commit
a1044b7d48
51 changed files with 9599 additions and 0 deletions
@ -0,0 +1,36 @@ |
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. |
|||
|
|||
# dependencies |
|||
/node_modules |
|||
/.pnp |
|||
.pnp.js |
|||
|
|||
# testing |
|||
/coverage |
|||
|
|||
# next.js |
|||
/.next/ |
|||
/out/ |
|||
|
|||
# production |
|||
/build |
|||
|
|||
# misc |
|||
.DS_Store |
|||
*.pem |
|||
|
|||
# debug |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
|
|||
# local env files |
|||
.env*.local |
|||
.env |
|||
|
|||
# vercel |
|||
.vercel |
|||
|
|||
# typescript |
|||
*.tsbuildinfo |
|||
next-env.d.ts |
|||
@ -0,0 +1,5 @@ |
|||
## Next.js App Router Course - Starter |
|||
|
|||
This is the starter template for the Next.js App Router Course. It contains the starting code for the dashboard application. |
|||
|
|||
For more information, see the [course curriculum](https://nextjs.org/learn) on the Next.js Website. |
|||
@ -0,0 +1,11 @@ |
|||
export default function RootLayout({ |
|||
children, |
|||
}: { |
|||
children: React.ReactNode; |
|||
}) { |
|||
return ( |
|||
<html lang="en"> |
|||
<body>{children}</body> |
|||
</html> |
|||
); |
|||
} |
|||
@ -0,0 +1,231 @@ |
|||
import { sql } from '@vercel/postgres'; |
|||
import { |
|||
CustomerField, |
|||
CustomersTableType, |
|||
InvoiceForm, |
|||
InvoicesTable, |
|||
LatestInvoiceRaw, |
|||
User, |
|||
Revenue, |
|||
} from './definitions'; |
|||
import { formatCurrency } from './utils'; |
|||
|
|||
export async function fetchRevenue() { |
|||
// Add noStore() here to prevent the response from being cached.
|
|||
// This is equivalent to in fetch(..., {cache: 'no-store'}).
|
|||
|
|||
try { |
|||
// Artificially delay a response for demo purposes.
|
|||
// Don't do this in production :)
|
|||
|
|||
// console.log('Fetching revenue data...');
|
|||
// await new Promise((resolve) => setTimeout(resolve, 3000));
|
|||
|
|||
const data = await sql<Revenue>`SELECT * FROM revenue`; |
|||
|
|||
// console.log('Data fetch completed after 3 seconds.');
|
|||
|
|||
return data.rows; |
|||
} catch (error) { |
|||
console.error('Database Error:', error); |
|||
throw new Error('Failed to fetch revenue data.'); |
|||
} |
|||
} |
|||
|
|||
export async function fetchLatestInvoices() { |
|||
try { |
|||
const data = await sql<LatestInvoiceRaw>` |
|||
SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id |
|||
FROM invoices |
|||
JOIN customers ON invoices.customer_id = customers.id |
|||
ORDER BY invoices.date DESC |
|||
LIMIT 5`;
|
|||
|
|||
const latestInvoices = data.rows.map((invoice) => ({ |
|||
...invoice, |
|||
amount: formatCurrency(invoice.amount), |
|||
})); |
|||
return latestInvoices; |
|||
} catch (error) { |
|||
console.error('Database Error:', error); |
|||
throw new Error('Failed to fetch the latest invoices.'); |
|||
} |
|||
} |
|||
|
|||
export async function fetchCardData() { |
|||
try { |
|||
// You can probably combine these into a single SQL query
|
|||
// However, we are intentionally splitting them to demonstrate
|
|||
// how to initialize multiple queries in parallel with JS.
|
|||
const invoiceCountPromise = sql`SELECT COUNT(*) FROM invoices`; |
|||
const customerCountPromise = sql`SELECT COUNT(*) FROM customers`; |
|||
const invoiceStatusPromise = sql`SELECT
|
|||
SUM(CASE WHEN status = 'paid' THEN amount ELSE 0 END) AS "paid", |
|||
SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) AS "pending" |
|||
FROM invoices`;
|
|||
|
|||
const data = await Promise.all([ |
|||
invoiceCountPromise, |
|||
customerCountPromise, |
|||
invoiceStatusPromise, |
|||
]); |
|||
|
|||
const numberOfInvoices = Number(data[0].rows[0].count ?? '0'); |
|||
const numberOfCustomers = Number(data[1].rows[0].count ?? '0'); |
|||
const totalPaidInvoices = formatCurrency(data[2].rows[0].paid ?? '0'); |
|||
const totalPendingInvoices = formatCurrency(data[2].rows[0].pending ?? '0'); |
|||
|
|||
return { |
|||
numberOfCustomers, |
|||
numberOfInvoices, |
|||
totalPaidInvoices, |
|||
totalPendingInvoices, |
|||
}; |
|||
} catch (error) { |
|||
console.error('Database Error:', error); |
|||
throw new Error('Failed to fetch card data.'); |
|||
} |
|||
} |
|||
|
|||
const ITEMS_PER_PAGE = 6; |
|||
export async function fetchFilteredInvoices( |
|||
query: string, |
|||
currentPage: number, |
|||
) { |
|||
const offset = (currentPage - 1) * ITEMS_PER_PAGE; |
|||
|
|||
try { |
|||
const invoices = await sql<InvoicesTable>` |
|||
SELECT |
|||
invoices.id, |
|||
invoices.amount, |
|||
invoices.date, |
|||
invoices.status, |
|||
customers.name, |
|||
customers.email, |
|||
customers.image_url |
|||
FROM invoices |
|||
JOIN customers ON invoices.customer_id = customers.id |
|||
WHERE |
|||
customers.name ILIKE ${`%${query}%`} OR |
|||
customers.email ILIKE ${`%${query}%`} OR |
|||
invoices.amount::text ILIKE ${`%${query}%`} OR |
|||
invoices.date::text ILIKE ${`%${query}%`} OR |
|||
invoices.status ILIKE ${`%${query}%`} |
|||
ORDER BY invoices.date DESC |
|||
LIMIT ${ITEMS_PER_PAGE} OFFSET ${offset} |
|||
`;
|
|||
|
|||
return invoices.rows; |
|||
} catch (error) { |
|||
console.error('Database Error:', error); |
|||
throw new Error('Failed to fetch invoices.'); |
|||
} |
|||
} |
|||
|
|||
export async function fetchInvoicesPages(query: string) { |
|||
try { |
|||
const count = await sql`SELECT COUNT(*)
|
|||
FROM invoices |
|||
JOIN customers ON invoices.customer_id = customers.id |
|||
WHERE |
|||
customers.name ILIKE ${`%${query}%`} OR |
|||
customers.email ILIKE ${`%${query}%`} OR |
|||
invoices.amount::text ILIKE ${`%${query}%`} OR |
|||
invoices.date::text ILIKE ${`%${query}%`} OR |
|||
invoices.status ILIKE ${`%${query}%`} |
|||
`;
|
|||
|
|||
const totalPages = Math.ceil(Number(count.rows[0].count) / ITEMS_PER_PAGE); |
|||
return totalPages; |
|||
} catch (error) { |
|||
console.error('Database Error:', error); |
|||
throw new Error('Failed to fetch total number of invoices.'); |
|||
} |
|||
} |
|||
|
|||
export async function fetchInvoiceById(id: string) { |
|||
try { |
|||
const data = await sql<InvoiceForm>` |
|||
SELECT |
|||
invoices.id, |
|||
invoices.customer_id, |
|||
invoices.amount, |
|||
invoices.status |
|||
FROM invoices |
|||
WHERE invoices.id = ${id}; |
|||
`;
|
|||
|
|||
const invoice = data.rows.map((invoice) => ({ |
|||
...invoice, |
|||
// Convert amount from cents to dollars
|
|||
amount: invoice.amount / 100, |
|||
})); |
|||
|
|||
return invoice[0]; |
|||
} catch (error) { |
|||
console.error('Database Error:', error); |
|||
throw new Error('Failed to fetch invoice.'); |
|||
} |
|||
} |
|||
|
|||
export async function fetchCustomers() { |
|||
try { |
|||
const data = await sql<CustomerField>` |
|||
SELECT |
|||
id, |
|||
name |
|||
FROM customers |
|||
ORDER BY name ASC |
|||
`;
|
|||
|
|||
const customers = data.rows; |
|||
return customers; |
|||
} catch (err) { |
|||
console.error('Database Error:', err); |
|||
throw new Error('Failed to fetch all customers.'); |
|||
} |
|||
} |
|||
|
|||
export async function fetchFilteredCustomers(query: string) { |
|||
try { |
|||
const data = await sql<CustomersTableType>` |
|||
SELECT |
|||
customers.id, |
|||
customers.name, |
|||
customers.email, |
|||
customers.image_url, |
|||
COUNT(invoices.id) AS total_invoices, |
|||
SUM(CASE WHEN invoices.status = 'pending' THEN invoices.amount ELSE 0 END) AS total_pending, |
|||
SUM(CASE WHEN invoices.status = 'paid' THEN invoices.amount ELSE 0 END) AS total_paid |
|||
FROM customers |
|||
LEFT JOIN invoices ON customers.id = invoices.customer_id |
|||
WHERE |
|||
customers.name ILIKE ${`%${query}%`} OR |
|||
customers.email ILIKE ${`%${query}%`} |
|||
GROUP BY customers.id, customers.name, customers.email, customers.image_url |
|||
ORDER BY customers.name ASC |
|||
`;
|
|||
|
|||
const customers = data.rows.map((customer) => ({ |
|||
...customer, |
|||
total_pending: formatCurrency(customer.total_pending), |
|||
total_paid: formatCurrency(customer.total_paid), |
|||
})); |
|||
|
|||
return customers; |
|||
} catch (err) { |
|||
console.error('Database Error:', err); |
|||
throw new Error('Failed to fetch customer table.'); |
|||
} |
|||
} |
|||
|
|||
export async function getUser(email: string) { |
|||
try { |
|||
const user = await sql`SELECT * FROM users WHERE email=${email}`; |
|||
return user.rows[0] as User; |
|||
} catch (error) { |
|||
console.error('Failed to fetch user:', error); |
|||
throw new Error('Failed to fetch user.'); |
|||
} |
|||
} |
|||
@ -0,0 +1,88 @@ |
|||
// This file contains type definitions for your data.
|
|||
// It describes the shape of the data, and what data type each property should accept.
|
|||
// For simplicity of teaching, we're manually defining these types.
|
|||
// However, these types are generated automatically if you're using an ORM such as Prisma.
|
|||
export type User = { |
|||
id: string; |
|||
name: string; |
|||
email: string; |
|||
password: string; |
|||
}; |
|||
|
|||
export type Customer = { |
|||
id: string; |
|||
name: string; |
|||
email: string; |
|||
image_url: string; |
|||
}; |
|||
|
|||
export type Invoice = { |
|||
id: string; |
|||
customer_id: string; |
|||
amount: number; |
|||
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'; |
|||
}; |
|||
|
|||
export type Revenue = { |
|||
month: string; |
|||
revenue: number; |
|||
}; |
|||
|
|||
export type LatestInvoice = { |
|||
id: string; |
|||
name: string; |
|||
image_url: string; |
|||
email: string; |
|||
amount: string; |
|||
}; |
|||
|
|||
// 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'> & { |
|||
amount: number; |
|||
}; |
|||
|
|||
export type InvoicesTable = { |
|||
id: string; |
|||
customer_id: string; |
|||
name: string; |
|||
email: string; |
|||
image_url: string; |
|||
date: string; |
|||
amount: number; |
|||
status: 'pending' | 'paid'; |
|||
}; |
|||
|
|||
export type CustomersTableType = { |
|||
id: string; |
|||
name: string; |
|||
email: string; |
|||
image_url: string; |
|||
total_invoices: number; |
|||
total_pending: number; |
|||
total_paid: number; |
|||
}; |
|||
|
|||
export type FormattedCustomersTable = { |
|||
id: string; |
|||
name: string; |
|||
email: string; |
|||
image_url: string; |
|||
total_invoices: number; |
|||
total_pending: string; |
|||
total_paid: string; |
|||
}; |
|||
|
|||
export type CustomerField = { |
|||
id: string; |
|||
name: string; |
|||
}; |
|||
|
|||
export type InvoiceForm = { |
|||
id: string; |
|||
customer_id: string; |
|||
amount: number; |
|||
status: 'pending' | 'paid'; |
|||
}; |
|||
@ -0,0 +1,188 @@ |
|||
// This file contains placeholder data that you'll be replacing with real data in the Data Fetching chapter:
|
|||
// https://nextjs.org/learn/dashboard-app/fetching-data
|
|||
const users = [ |
|||
{ |
|||
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-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: '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: '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: '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: '13D07535-C59E-4157-A011-F8D2EF4E0CBB', |
|||
name: 'Balazs Orban', |
|||
email: 'balazs@orban.com', |
|||
image_url: '/customers/balazs-orban.png', |
|||
}, |
|||
]; |
|||
|
|||
const invoices = [ |
|||
{ |
|||
customer_id: customers[0].id, |
|||
amount: 15795, |
|||
status: 'pending', |
|||
date: '2022-12-06', |
|||
}, |
|||
{ |
|||
customer_id: customers[1].id, |
|||
amount: 20348, |
|||
status: 'pending', |
|||
date: '2022-11-14', |
|||
}, |
|||
{ |
|||
customer_id: customers[4].id, |
|||
amount: 3040, |
|||
status: 'paid', |
|||
date: '2022-10-29', |
|||
}, |
|||
{ |
|||
customer_id: customers[3].id, |
|||
amount: 44800, |
|||
status: 'paid', |
|||
date: '2023-09-10', |
|||
}, |
|||
{ |
|||
customer_id: customers[5].id, |
|||
amount: 34577, |
|||
status: 'pending', |
|||
date: '2023-08-05', |
|||
}, |
|||
{ |
|||
customer_id: customers[7].id, |
|||
amount: 54246, |
|||
status: 'pending', |
|||
date: '2023-07-16', |
|||
}, |
|||
{ |
|||
customer_id: customers[6].id, |
|||
amount: 666, |
|||
status: 'pending', |
|||
date: '2023-06-27', |
|||
}, |
|||
{ |
|||
customer_id: customers[3].id, |
|||
amount: 32545, |
|||
status: 'paid', |
|||
date: '2023-06-09', |
|||
}, |
|||
{ |
|||
customer_id: customers[4].id, |
|||
amount: 1250, |
|||
status: 'paid', |
|||
date: '2023-06-17', |
|||
}, |
|||
{ |
|||
customer_id: customers[5].id, |
|||
amount: 8546, |
|||
status: 'paid', |
|||
date: '2023-06-07', |
|||
}, |
|||
{ |
|||
customer_id: customers[1].id, |
|||
amount: 500, |
|||
status: 'paid', |
|||
date: '2023-08-19', |
|||
}, |
|||
{ |
|||
customer_id: customers[5].id, |
|||
amount: 8945, |
|||
status: 'paid', |
|||
date: '2023-06-03', |
|||
}, |
|||
{ |
|||
customer_id: customers[2].id, |
|||
amount: 8945, |
|||
status: 'paid', |
|||
date: '2023-06-18', |
|||
}, |
|||
{ |
|||
customer_id: customers[0].id, |
|||
amount: 8945, |
|||
status: 'paid', |
|||
date: '2023-10-04', |
|||
}, |
|||
{ |
|||
customer_id: customers[2].id, |
|||
amount: 1000, |
|||
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 }, |
|||
]; |
|||
|
|||
module.exports = { |
|||
users, |
|||
customers, |
|||
invoices, |
|||
revenue, |
|||
}; |
|||
@ -0,0 +1,69 @@ |
|||
import { Revenue } from './definitions'; |
|||
|
|||
export const formatCurrency = (amount: number) => { |
|||
return (amount / 100).toLocaleString('en-US', { |
|||
style: 'currency', |
|||
currency: 'USD', |
|||
}); |
|||
}; |
|||
|
|||
export const formatDateToLocal = ( |
|||
dateStr: string, |
|||
locale: string = 'en-US', |
|||
) => { |
|||
const date = new Date(dateStr); |
|||
const options: Intl.DateTimeFormatOptions = { |
|||
day: 'numeric', |
|||
month: 'short', |
|||
year: 'numeric', |
|||
}; |
|||
const formatter = new Intl.DateTimeFormat(locale, options); |
|||
return formatter.format(date); |
|||
}; |
|||
|
|||
export const generateYAxis = (revenue: Revenue[]) => { |
|||
// Calculate what labels we need to display on the y-axis
|
|||
// based on highest record and in 1000s
|
|||
const yAxisLabels = []; |
|||
const highestRecord = Math.max(...revenue.map((month) => month.revenue)); |
|||
const topLabel = Math.ceil(highestRecord / 1000) * 1000; |
|||
|
|||
for (let i = topLabel; i >= 0; i -= 1000) { |
|||
yAxisLabels.push(`$${i / 1000}K`); |
|||
} |
|||
|
|||
return { yAxisLabels, topLabel }; |
|||
}; |
|||
|
|||
export const generatePagination = (currentPage: number, totalPages: number) => { |
|||
// If the total number of pages is 7 or less,
|
|||
// display all pages without any ellipsis.
|
|||
if (totalPages <= 7) { |
|||
return Array.from({ length: totalPages }, (_, i) => i + 1); |
|||
} |
|||
|
|||
// 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]; |
|||
} |
|||
|
|||
// 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]; |
|||
} |
|||
|
|||
// If the current page is somewhere in the middle,
|
|||
// show the first page, an ellipsis, the current page and its neighbors,
|
|||
// another ellipsis, and the last page.
|
|||
return [ |
|||
1, |
|||
'...', |
|||
currentPage - 1, |
|||
currentPage, |
|||
currentPage + 1, |
|||
'...', |
|||
totalPages, |
|||
]; |
|||
}; |
|||
@ -0,0 +1,33 @@ |
|||
import AcmeLogo from '@/app/ui/acme-logo'; |
|||
import { ArrowRightIcon } from '@heroicons/react/24/outline'; |
|||
import Link from 'next/link'; |
|||
|
|||
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 /> */} |
|||
</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"> |
|||
<p 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> |
|||
, brought to you by Vercel. |
|||
</p> |
|||
<Link |
|||
href="/login" |
|||
className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base" |
|||
> |
|||
<span>Log in</span> <ArrowRightIcon className="w-5 md:w-6" /> |
|||
</Link> |
|||
</div> |
|||
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12"> |
|||
{/* Add Hero Images Here */} |
|||
</div> |
|||
</div> |
|||
</main> |
|||
); |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
import { GlobeAltIcon } from '@heroicons/react/24/outline'; |
|||
import { lusitana } from '@/app/ui/fonts'; |
|||
|
|||
export default function AcmeLogo() { |
|||
return ( |
|||
<div |
|||
className={`${lusitana.className} flex flex-row items-center leading-none text-white`} |
|||
> |
|||
<GlobeAltIcon className="h-12 w-12 rotate-[15deg]" /> |
|||
<p className="text-[44px]">Acme</p> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
import clsx from 'clsx'; |
|||
|
|||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export function Button({ children, className, ...rest }: ButtonProps) { |
|||
return ( |
|||
<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', |
|||
className, |
|||
)} |
|||
> |
|||
{children} |
|||
</button> |
|||
); |
|||
} |
|||
@ -0,0 +1,123 @@ |
|||
import Image from 'next/image'; |
|||
import { lusitana } from '@/app/ui/fonts'; |
|||
import Search from '@/app/ui/search'; |
|||
import { |
|||
CustomersTableType, |
|||
FormattedCustomersTable, |
|||
} from '@/app/lib/definitions'; |
|||
|
|||
export default async function CustomersTable({ |
|||
customers, |
|||
}: { |
|||
customers: FormattedCustomersTable[]; |
|||
}) { |
|||
return ( |
|||
<div className="w-full"> |
|||
<h1 className={`${lusitana.className} mb-8 text-xl md:text-2xl`}> |
|||
Customers |
|||
</h1> |
|||
<Search placeholder="Search customers..." /> |
|||
<div className="mt-6 flow-root"> |
|||
<div className="overflow-x-auto"> |
|||
<div className="inline-block min-w-full align-middle"> |
|||
<div className="overflow-hidden rounded-md bg-gray-50 p-2 md:pt-0"> |
|||
<div className="md:hidden"> |
|||
{customers?.map((customer) => ( |
|||
<div |
|||
key={customer.id} |
|||
className="mb-2 w-full rounded-md bg-white p-4" |
|||
> |
|||
<div className="flex items-center justify-between border-b pb-4"> |
|||
<div> |
|||
<div className="mb-2 flex items-center"> |
|||
<div className="flex items-center gap-3"> |
|||
<Image |
|||
src={customer.image_url} |
|||
className="rounded-full" |
|||
alt={`${customer.name}'s profile picture`} |
|||
width={28} |
|||
height={28} |
|||
/> |
|||
<p>{customer.name}</p> |
|||
</div> |
|||
</div> |
|||
<p className="text-sm text-gray-500"> |
|||
{customer.email} |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<div className="flex w-full items-center justify-between border-b py-5"> |
|||
<div className="flex w-1/2 flex-col"> |
|||
<p className="text-xs">Pending</p> |
|||
<p className="font-medium">{customer.total_pending}</p> |
|||
</div> |
|||
<div className="flex w-1/2 flex-col"> |
|||
<p className="text-xs">Paid</p> |
|||
<p className="font-medium">{customer.total_paid}</p> |
|||
</div> |
|||
</div> |
|||
<div className="pt-4 text-sm"> |
|||
<p>{customer.total_invoices} invoices</p> |
|||
</div> |
|||
</div> |
|||
))} |
|||
</div> |
|||
<table className="hidden min-w-full rounded-md text-gray-900 md:table"> |
|||
<thead className="rounded-md bg-gray-50 text-left text-sm font-normal"> |
|||
<tr> |
|||
<th scope="col" className="px-4 py-5 font-medium sm:pl-6"> |
|||
Name |
|||
</th> |
|||
<th scope="col" className="px-3 py-5 font-medium"> |
|||
Email |
|||
</th> |
|||
<th scope="col" className="px-3 py-5 font-medium"> |
|||
Total Invoices |
|||
</th> |
|||
<th scope="col" className="px-3 py-5 font-medium"> |
|||
Total Pending |
|||
</th> |
|||
<th scope="col" className="px-4 py-5 font-medium"> |
|||
Total Paid |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
|
|||
<tbody className="divide-y divide-gray-200 text-gray-900"> |
|||
{customers.map((customer) => ( |
|||
<tr key={customer.id} className="group"> |
|||
<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"> |
|||
<div className="flex items-center gap-3"> |
|||
<Image |
|||
src={customer.image_url} |
|||
className="rounded-full" |
|||
alt={`${customer.name}'s profile picture`} |
|||
width={28} |
|||
height={28} |
|||
/> |
|||
<p>{customer.name}</p> |
|||
</div> |
|||
</td> |
|||
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm"> |
|||
{customer.email} |
|||
</td> |
|||
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm"> |
|||
{customer.total_invoices} |
|||
</td> |
|||
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm"> |
|||
{customer.total_pending} |
|||
</td> |
|||
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm group-first-of-type:rounded-md group-last-of-type:rounded-md"> |
|||
{customer.total_paid} |
|||
</td> |
|||
</tr> |
|||
))} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,58 @@ |
|||
import { |
|||
BanknotesIcon, |
|||
ClockIcon, |
|||
UserGroupIcon, |
|||
InboxIcon, |
|||
} from '@heroicons/react/24/outline'; |
|||
import { lusitana } from '@/app/ui/fonts'; |
|||
|
|||
const iconMap = { |
|||
collected: BanknotesIcon, |
|||
customers: UserGroupIcon, |
|||
pending: ClockIcon, |
|||
invoices: InboxIcon, |
|||
}; |
|||
|
|||
export default async function CardWrapper() { |
|||
return ( |
|||
<> |
|||
{/* NOTE: comment in this code when you get to this point in the course */} |
|||
|
|||
{/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> |
|||
<Card title="Pending" value={totalPendingInvoices} type="pending" /> |
|||
<Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> |
|||
<Card |
|||
title="Total Customers" |
|||
value={numberOfCustomers} |
|||
type="customers" |
|||
/> */} |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export function Card({ |
|||
title, |
|||
value, |
|||
type, |
|||
}: { |
|||
title: string; |
|||
value: number | string; |
|||
type: 'invoices' | 'customers' | 'pending' | 'collected'; |
|||
}) { |
|||
const Icon = iconMap[type]; |
|||
|
|||
return ( |
|||
<div className="rounded-xl bg-gray-50 p-2 shadow-sm"> |
|||
<div className="flex p-4"> |
|||
{Icon ? <Icon className="h-5 w-5 text-gray-700" /> : null} |
|||
<h3 className="ml-2 text-sm font-medium">{title}</h3> |
|||
</div> |
|||
<p |
|||
className={`${lusitana.className} |
|||
truncate rounded-xl bg-white px-4 py-8 text-center text-2xl`}
|
|||
> |
|||
{value} |
|||
</p> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,64 @@ |
|||
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'; |
|||
export default async function LatestInvoices({ |
|||
latestInvoices, |
|||
}: { |
|||
latestInvoices: LatestInvoice[]; |
|||
}) { |
|||
return ( |
|||
<div className="flex w-full flex-col md:col-span-4"> |
|||
<h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}> |
|||
Latest Invoices |
|||
</h2> |
|||
<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`} |
|||
> |
|||
{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> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
import { |
|||
UserGroupIcon, |
|||
HomeIcon, |
|||
DocumentDuplicateIcon, |
|||
} from '@heroicons/react/24/outline'; |
|||
|
|||
// 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() { |
|||
return ( |
|||
<> |
|||
{links.map((link) => { |
|||
const LinkIcon = link.icon; |
|||
return ( |
|||
<a |
|||
key={link.name} |
|||
href={link.href} |
|||
className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3" |
|||
> |
|||
<LinkIcon className="w-6" /> |
|||
<p className="hidden md:block">{link.name}</p> |
|||
</a> |
|||
); |
|||
})} |
|||
</> |
|||
); |
|||
} |
|||
@ -0,0 +1,65 @@ |
|||
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'; |
|||
|
|||
// 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({ |
|||
revenue, |
|||
}: { |
|||
revenue: Revenue[]; |
|||
}) { |
|||
const chartHeight = 350; |
|||
// NOTE: comment in this code when you get to this point in the course
|
|||
|
|||
// const { yAxisLabels, topLabel } = generateYAxis(revenue);
|
|||
|
|||
// if (!revenue || revenue.length === 0) {
|
|||
// return <p className="mt-4 text-gray-400">No data available.</p>;
|
|||
// }
|
|||
|
|||
return ( |
|||
<div className="w-full md:col-span-4"> |
|||
<h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}> |
|||
Recent Revenue |
|||
</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> |
|||
|
|||
{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> |
|||
<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> |
|||
); |
|||
} |
|||
@ -0,0 +1,29 @@ |
|||
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'; |
|||
|
|||
export default function SideNav() { |
|||
return ( |
|||
<div className="flex h-full flex-col px-3 py-4 md:px-2"> |
|||
<Link |
|||
className="mb-2 flex h-20 items-end justify-start rounded-md bg-blue-600 p-4 md:h-40" |
|||
href="/" |
|||
> |
|||
<div className="w-32 text-white md:w-40"> |
|||
<AcmeLogo /> |
|||
</div> |
|||
</Link> |
|||
<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> |
|||
<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> |
|||
</button> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
@ -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; |
|||
} |
|||
@ -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 ( |
|||
<nav aria-label="Breadcrumb" className="mb-6 block"> |
|||
<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', |
|||
)} |
|||
> |
|||
<Link href={breadcrumb.href}>{breadcrumb.label}</Link> |
|||
{index < breadcrumbs.length - 1 ? ( |
|||
<span className="mx-3 inline-block">/</span> |
|||
) : null} |
|||
</li> |
|||
))} |
|||
</ol> |
|||
</nav> |
|||
); |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline'; |
|||
import Link from 'next/link'; |
|||
|
|||
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>{' '} |
|||
<PlusIcon className="h-5 md:ml-4" /> |
|||
</Link> |
|||
); |
|||
} |
|||
|
|||
export function UpdateInvoice({ id }: { id: string }) { |
|||
return ( |
|||
<Link |
|||
href="/dashboard/invoices" |
|||
className="rounded-md border p-2 hover:bg-gray-100" |
|||
> |
|||
<PencilIcon className="w-5" /> |
|||
</Link> |
|||
); |
|||
} |
|||
|
|||
export function DeleteInvoice({ id }: { id: string }) { |
|||
return ( |
|||
<> |
|||
<button className="rounded-md border p-2 hover:bg-gray-100"> |
|||
<span className="sr-only">Delete</span> |
|||
<TrashIcon className="w-5" /> |
|||
</button> |
|||
</> |
|||
); |
|||
} |
|||
@ -0,0 +1,112 @@ |
|||
import { CustomerField } from '@/app/lib/definitions'; |
|||
import Link from 'next/link'; |
|||
import { |
|||
CheckIcon, |
|||
ClockIcon, |
|||
CurrencyDollarIcon, |
|||
UserCircleIcon, |
|||
} from '@heroicons/react/24/outline'; |
|||
import { Button } from '@/app/ui/button'; |
|||
|
|||
export default function Form({ customers }: { customers: CustomerField[] }) { |
|||
return ( |
|||
<form> |
|||
<div className="rounded-md bg-gray-50 p-4 md:p-6"> |
|||
{/* Customer Name */} |
|||
<div className="mb-4"> |
|||
<label htmlFor="customer" className="mb-2 block text-sm font-medium"> |
|||
Choose customer |
|||
</label> |
|||
<div className="relative"> |
|||
<select |
|||
id="customer" |
|||
name="customerId" |
|||
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" |
|||
defaultValue="" |
|||
> |
|||
<option value="" disabled> |
|||
Select a customer |
|||
</option> |
|||
{customers.map((customer) => ( |
|||
<option key={customer.id} value={customer.id}> |
|||
{customer.name} |
|||
</option> |
|||
))} |
|||
</select> |
|||
<UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" /> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* Invoice Amount */} |
|||
<div className="mb-4"> |
|||
<label htmlFor="amount" className="mb-2 block text-sm font-medium"> |
|||
Choose an amount |
|||
</label> |
|||
<div className="relative mt-2 rounded-md"> |
|||
<div className="relative"> |
|||
<input |
|||
id="amount" |
|||
name="amount" |
|||
type="number" |
|||
step="0.01" |
|||
placeholder="Enter USD amount" |
|||
className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500" |
|||
/> |
|||
<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" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* Invoice Status */} |
|||
<fieldset> |
|||
<legend className="mb-2 block text-sm font-medium"> |
|||
Set the invoice status |
|||
</legend> |
|||
<div className="rounded-md border border-gray-200 bg-white px-[14px] py-3"> |
|||
<div className="flex gap-4"> |
|||
<div className="flex items-center"> |
|||
<input |
|||
id="pending" |
|||
name="status" |
|||
type="radio" |
|||
value="pending" |
|||
className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2" |
|||
/> |
|||
<label |
|||
htmlFor="pending" |
|||
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" |
|||
> |
|||
Pending <ClockIcon className="h-4 w-4" /> |
|||
</label> |
|||
</div> |
|||
<div className="flex items-center"> |
|||
<input |
|||
id="paid" |
|||
name="status" |
|||
type="radio" |
|||
value="paid" |
|||
className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2" |
|||
/> |
|||
<label |
|||
htmlFor="paid" |
|||
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" |
|||
> |
|||
Paid <CheckIcon className="h-4 w-4" /> |
|||
</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</fieldset> |
|||
</div> |
|||
<div className="mt-6 flex justify-end gap-4"> |
|||
<Link |
|||
href="/dashboard/invoices" |
|||
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" |
|||
> |
|||
Cancel |
|||
</Link> |
|||
<Button type="submit">Create Invoice</Button> |
|||
</div> |
|||
</form> |
|||
); |
|||
} |
|||
@ -0,0 +1,123 @@ |
|||
'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'; |
|||
|
|||
export default function EditInvoiceForm({ |
|||
invoice, |
|||
customers, |
|||
}: { |
|||
invoice: InvoiceForm; |
|||
customers: CustomerField[]; |
|||
}) { |
|||
return ( |
|||
<form> |
|||
<div className="rounded-md bg-gray-50 p-4 md:p-6"> |
|||
{/* Customer Name */} |
|||
<div className="mb-4"> |
|||
<label htmlFor="customer" className="mb-2 block text-sm font-medium"> |
|||
Choose customer |
|||
</label> |
|||
<div className="relative"> |
|||
<select |
|||
id="customer" |
|||
name="customerId" |
|||
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" |
|||
defaultValue={invoice.customer_id} |
|||
> |
|||
<option value="" disabled> |
|||
Select a customer |
|||
</option> |
|||
{customers.map((customer) => ( |
|||
<option key={customer.id} value={customer.id}> |
|||
{customer.name} |
|||
</option> |
|||
))} |
|||
</select> |
|||
<UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" /> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* Invoice Amount */} |
|||
<div className="mb-4"> |
|||
<label htmlFor="amount" className="mb-2 block text-sm font-medium"> |
|||
Choose an amount |
|||
</label> |
|||
<div className="relative mt-2 rounded-md"> |
|||
<div className="relative"> |
|||
<input |
|||
id="amount" |
|||
name="amount" |
|||
type="number" |
|||
step="0.01" |
|||
defaultValue={invoice.amount} |
|||
placeholder="Enter USD amount" |
|||
className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500" |
|||
/> |
|||
<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" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* Invoice Status */} |
|||
<fieldset> |
|||
<legend className="mb-2 block text-sm font-medium"> |
|||
Set the invoice status |
|||
</legend> |
|||
<div className="rounded-md border border-gray-200 bg-white px-[14px] py-3"> |
|||
<div className="flex gap-4"> |
|||
<div className="flex items-center"> |
|||
<input |
|||
id="pending" |
|||
name="status" |
|||
type="radio" |
|||
value="pending" |
|||
defaultChecked={invoice.status === 'pending'} |
|||
className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2" |
|||
/> |
|||
<label |
|||
htmlFor="pending" |
|||
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" |
|||
> |
|||
Pending <ClockIcon className="h-4 w-4" /> |
|||
</label> |
|||
</div> |
|||
<div className="flex items-center"> |
|||
<input |
|||
id="paid" |
|||
name="status" |
|||
type="radio" |
|||
value="paid" |
|||
defaultChecked={invoice.status === 'paid'} |
|||
className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2" |
|||
/> |
|||
<label |
|||
htmlFor="paid" |
|||
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" |
|||
> |
|||
Paid <CheckIcon className="h-4 w-4" /> |
|||
</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</fieldset> |
|||
</div> |
|||
<div className="mt-6 flex justify-end gap-4"> |
|||
<Link |
|||
href="/dashboard/invoices" |
|||
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" |
|||
> |
|||
Cancel |
|||
</Link> |
|||
<Button type="submit">Edit Invoice</Button> |
|||
</div> |
|||
</form> |
|||
); |
|||
} |
|||
@ -0,0 +1,119 @@ |
|||
'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'; |
|||
|
|||
export default function Pagination({ totalPages }: { totalPages: number }) { |
|||
// NOTE: comment in this code when you get to this point in the course
|
|||
|
|||
// const allPages = generatePagination(currentPage, totalPages);
|
|||
|
|||
return ( |
|||
<> |
|||
{/* NOTE: comment in this code when you get to this point in the course */} |
|||
|
|||
{/* <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; |
|||
|
|||
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} |
|||
/> |
|||
</div> */} |
|||
</> |
|||
); |
|||
} |
|||
|
|||
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' ? ( |
|||
<div className={className}>{page}</div> |
|||
) : ( |
|||
<Link href={href} className={className}> |
|||
{page} |
|||
</Link> |
|||
); |
|||
} |
|||
|
|||
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' ? ( |
|||
<ArrowLeftIcon className="w-4" /> |
|||
) : ( |
|||
<ArrowRightIcon className="w-4" /> |
|||
); |
|||
|
|||
return isDisabled ? ( |
|||
<div className={className}>{icon}</div> |
|||
) : ( |
|||
<Link className={className} href={href}> |
|||
{icon} |
|||
</Link> |
|||
); |
|||
} |
|||
@ -0,0 +1,29 @@ |
|||
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', |
|||
{ |
|||
'bg-gray-100 text-gray-500': status === 'pending', |
|||
'bg-green-500 text-white': status === 'paid', |
|||
}, |
|||
)} |
|||
> |
|||
{status === 'pending' ? ( |
|||
<> |
|||
Pending |
|||
<ClockIcon className="ml-1 w-4 text-gray-500" /> |
|||
</> |
|||
) : null} |
|||
{status === 'paid' ? ( |
|||
<> |
|||
Paid |
|||
<CheckIcon className="ml-1 w-4 text-white" /> |
|||
</> |
|||
) : null} |
|||
</span> |
|||
); |
|||
} |
|||
@ -0,0 +1,124 @@ |
|||
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'; |
|||
|
|||
export default async function InvoicesTable({ |
|||
query, |
|||
currentPage, |
|||
}: { |
|||
query: string; |
|||
currentPage: number; |
|||
}) { |
|||
const invoices = await fetchFilteredInvoices(query, currentPage); |
|||
|
|||
return ( |
|||
<div className="mt-6 flow-root"> |
|||
<div className="inline-block min-w-full align-middle"> |
|||
<div className="rounded-lg bg-gray-50 p-2 md:pt-0"> |
|||
<div className="md:hidden"> |
|||
{invoices?.map((invoice) => ( |
|||
<div |
|||
key={invoice.id} |
|||
className="mb-2 w-full rounded-md bg-white p-4" |
|||
> |
|||
<div className="flex items-center justify-between border-b pb-4"> |
|||
<div> |
|||
<div className="mb-2 flex items-center"> |
|||
<Image |
|||
src={invoice.image_url} |
|||
className="mr-2 rounded-full" |
|||
width={28} |
|||
height={28} |
|||
alt={`${invoice.name}'s profile picture`} |
|||
/> |
|||
<p>{invoice.name}</p> |
|||
</div> |
|||
<p className="text-sm text-gray-500">{invoice.email}</p> |
|||
</div> |
|||
<InvoiceStatus status={invoice.status} /> |
|||
</div> |
|||
<div className="flex w-full items-center justify-between pt-4"> |
|||
<div> |
|||
<p className="text-xl font-medium"> |
|||
{formatCurrency(invoice.amount)} |
|||
</p> |
|||
<p>{formatDateToLocal(invoice.date)}</p> |
|||
</div> |
|||
<div className="flex justify-end gap-2"> |
|||
<UpdateInvoice id={invoice.id} /> |
|||
<DeleteInvoice id={invoice.id} /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
))} |
|||
</div> |
|||
<table className="hidden min-w-full text-gray-900 md:table"> |
|||
<thead className="rounded-lg text-left text-sm font-normal"> |
|||
<tr> |
|||
<th scope="col" className="px-4 py-5 font-medium sm:pl-6"> |
|||
Customer |
|||
</th> |
|||
<th scope="col" className="px-3 py-5 font-medium"> |
|||
Email |
|||
</th> |
|||
<th scope="col" className="px-3 py-5 font-medium"> |
|||
Amount |
|||
</th> |
|||
<th scope="col" className="px-3 py-5 font-medium"> |
|||
Date |
|||
</th> |
|||
<th scope="col" className="px-3 py-5 font-medium"> |
|||
Status |
|||
</th> |
|||
<th scope="col" className="relative py-3 pl-6 pr-3"> |
|||
<span className="sr-only">Edit</span> |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody className="bg-white"> |
|||
{invoices?.map((invoice) => ( |
|||
<tr |
|||
key={invoice.id} |
|||
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" |
|||
> |
|||
<td className="whitespace-nowrap py-3 pl-6 pr-3"> |
|||
<div className="flex items-center gap-3"> |
|||
<Image |
|||
src={invoice.image_url} |
|||
className="rounded-full" |
|||
width={28} |
|||
height={28} |
|||
alt={`${invoice.name}'s profile picture`} |
|||
/> |
|||
<p>{invoice.name}</p> |
|||
</div> |
|||
</td> |
|||
<td className="whitespace-nowrap px-3 py-3"> |
|||
{invoice.email} |
|||
</td> |
|||
<td className="whitespace-nowrap px-3 py-3"> |
|||
{formatCurrency(invoice.amount)} |
|||
</td> |
|||
<td className="whitespace-nowrap px-3 py-3"> |
|||
{formatDateToLocal(invoice.date)} |
|||
</td> |
|||
<td className="whitespace-nowrap px-3 py-3"> |
|||
<InvoiceStatus status={invoice.status} /> |
|||
</td> |
|||
<td className="whitespace-nowrap py-3 pl-6 pr-3"> |
|||
<div className="flex justify-end gap-3"> |
|||
<UpdateInvoice id={invoice.id} /> |
|||
<DeleteInvoice id={invoice.id} /> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
))} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,73 @@ |
|||
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'; |
|||
|
|||
export default function LoginForm() { |
|||
return ( |
|||
<form className="space-y-3"> |
|||
<div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8"> |
|||
<h1 className={`${lusitana.className} mb-3 text-2xl`}> |
|||
Please log in to continue. |
|||
</h1> |
|||
<div className="w-full"> |
|||
<div> |
|||
<label |
|||
className="mb-3 mt-5 block text-xs font-medium text-gray-900" |
|||
htmlFor="email" |
|||
> |
|||
Email |
|||
</label> |
|||
<div className="relative"> |
|||
<input |
|||
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500" |
|||
id="email" |
|||
type="email" |
|||
name="email" |
|||
placeholder="Enter your email address" |
|||
required |
|||
/> |
|||
<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" /> |
|||
</div> |
|||
</div> |
|||
<div className="mt-4"> |
|||
<label |
|||
className="mb-3 mt-5 block text-xs font-medium text-gray-900" |
|||
htmlFor="password" |
|||
> |
|||
Password |
|||
</label> |
|||
<div className="relative"> |
|||
<input |
|||
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500" |
|||
id="password" |
|||
type="password" |
|||
name="password" |
|||
placeholder="Enter password" |
|||
required |
|||
minLength={6} |
|||
/> |
|||
<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" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<LoginButton /> |
|||
<div className="flex h-8 items-end space-x-1"> |
|||
{/* Add form errors here */} |
|||
</div> |
|||
</div> |
|||
</form> |
|||
); |
|||
} |
|||
|
|||
function LoginButton() { |
|||
return ( |
|||
<Button className="mt-4 w-full"> |
|||
Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" /> |
|||
</Button> |
|||
); |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
'use client'; |
|||
|
|||
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; |
|||
|
|||
export default function Search({ placeholder }: { placeholder: string }) { |
|||
return ( |
|||
<div className="relative flex flex-1 flex-shrink-0"> |
|||
<label htmlFor="search" className="sr-only"> |
|||
Search |
|||
</label> |
|||
<input |
|||
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500" |
|||
placeholder={placeholder} |
|||
/> |
|||
<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> |
|||
); |
|||
} |
|||
@ -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 ( |
|||
<div |
|||
className={`${shimmer} relative overflow-hidden rounded-xl bg-gray-100 p-2 shadow-sm`} |
|||
> |
|||
<div className="flex p-4"> |
|||
<div className="h-5 w-5 rounded-md bg-gray-200" /> |
|||
<div className="ml-2 h-6 w-16 rounded-md bg-gray-200 text-sm font-medium" /> |
|||
</div> |
|||
<div className="flex items-center justify-center truncate rounded-xl bg-white px-4 py-8"> |
|||
<div className="h-7 w-20 rounded-md bg-gray-200" /> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export function CardsSkeleton() { |
|||
return ( |
|||
<> |
|||
<CardSkeleton /> |
|||
<CardSkeleton /> |
|||
<CardSkeleton /> |
|||
<CardSkeleton /> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export function RevenueChartSkeleton() { |
|||
return ( |
|||
<div className={`${shimmer} relative w-full overflow-hidden md:col-span-4`}> |
|||
<div className="mb-4 h-8 w-36 rounded-md bg-gray-100" /> |
|||
<div className="rounded-xl bg-gray-100 p-4"> |
|||
<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" /> |
|||
<div className="flex items-center pb-2 pt-6"> |
|||
<div className="h-5 w-5 rounded-full bg-gray-200" /> |
|||
<div className="ml-2 h-4 w-20 rounded-md bg-gray-200" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export function InvoiceSkeleton() { |
|||
return ( |
|||
<div className="flex flex-row items-center justify-between border-b border-gray-100 py-4"> |
|||
<div className="flex items-center"> |
|||
<div className="mr-2 h-8 w-8 rounded-full bg-gray-200" /> |
|||
<div className="min-w-0"> |
|||
<div className="h-5 w-40 rounded-md bg-gray-200" /> |
|||
<div className="mt-2 h-4 w-12 rounded-md bg-gray-200" /> |
|||
</div> |
|||
</div> |
|||
<div className="mt-2 h-4 w-12 rounded-md bg-gray-200" /> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export function LatestInvoicesSkeleton() { |
|||
return ( |
|||
<div |
|||
className={`${shimmer} relative flex w-full flex-col overflow-hidden md:col-span-4`} |
|||
> |
|||
<div className="mb-4 h-8 w-36 rounded-md bg-gray-100" /> |
|||
<div className="flex grow flex-col justify-between rounded-xl bg-gray-100 p-4"> |
|||
<div className="bg-white px-6"> |
|||
<InvoiceSkeleton /> |
|||
<InvoiceSkeleton /> |
|||
<InvoiceSkeleton /> |
|||
<InvoiceSkeleton /> |
|||
<InvoiceSkeleton /> |
|||
<div className="flex items-center pb-2 pt-6"> |
|||
<div className="h-5 w-5 rounded-full bg-gray-200" /> |
|||
<div className="ml-2 h-4 w-20 rounded-md bg-gray-200" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default function DashboardSkeleton() { |
|||
return ( |
|||
<> |
|||
<div |
|||
className={`${shimmer} relative mb-4 h-8 w-36 overflow-hidden rounded-md bg-gray-100`} |
|||
/> |
|||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4"> |
|||
<CardSkeleton /> |
|||
<CardSkeleton /> |
|||
<CardSkeleton /> |
|||
<CardSkeleton /> |
|||
</div> |
|||
<div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8"> |
|||
<RevenueChartSkeleton /> |
|||
<LatestInvoicesSkeleton /> |
|||
</div> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export function TableRowSkeleton() { |
|||
return ( |
|||
<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"> |
|||
{/* Customer Name and Image */} |
|||
<td className="relative overflow-hidden whitespace-nowrap py-3 pl-6 pr-3"> |
|||
<div className="flex items-center gap-3"> |
|||
<div className="h-8 w-8 rounded-full bg-gray-100"></div> |
|||
<div className="h-6 w-24 rounded bg-gray-100"></div> |
|||
</div> |
|||
</td> |
|||
{/* Email */} |
|||
<td className="whitespace-nowrap px-3 py-3"> |
|||
<div className="h-6 w-32 rounded bg-gray-100"></div> |
|||
</td> |
|||
{/* Amount */} |
|||
<td className="whitespace-nowrap px-3 py-3"> |
|||
<div className="h-6 w-16 rounded bg-gray-100"></div> |
|||
</td> |
|||
{/* Date */} |
|||
<td className="whitespace-nowrap px-3 py-3"> |
|||
<div className="h-6 w-16 rounded bg-gray-100"></div> |
|||
</td> |
|||
{/* Status */} |
|||
<td className="whitespace-nowrap px-3 py-3"> |
|||
<div className="h-6 w-16 rounded bg-gray-100"></div> |
|||
</td> |
|||
{/* Actions */} |
|||
<td className="whitespace-nowrap py-3 pl-6 pr-3"> |
|||
<div className="flex justify-end gap-3"> |
|||
<div className="h-[38px] w-[38px] rounded bg-gray-100"></div> |
|||
<div className="h-[38px] w-[38px] rounded bg-gray-100"></div> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
); |
|||
} |
|||
|
|||
export function InvoicesMobileSkeleton() { |
|||
return ( |
|||
<div className="mb-2 w-full rounded-md bg-white p-4"> |
|||
<div className="flex items-center justify-between border-b border-gray-100 pb-8"> |
|||
<div className="flex items-center"> |
|||
<div className="mr-2 h-8 w-8 rounded-full bg-gray-100"></div> |
|||
<div className="h-6 w-16 rounded bg-gray-100"></div> |
|||
</div> |
|||
<div className="h-6 w-16 rounded bg-gray-100"></div> |
|||
</div> |
|||
<div className="flex w-full items-center justify-between pt-4"> |
|||
<div> |
|||
<div className="h-6 w-16 rounded bg-gray-100"></div> |
|||
<div className="mt-2 h-6 w-24 rounded bg-gray-100"></div> |
|||
</div> |
|||
<div className="flex justify-end gap-2"> |
|||
<div className="h-10 w-10 rounded bg-gray-100"></div> |
|||
<div className="h-10 w-10 rounded bg-gray-100"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export function InvoicesTableSkeleton() { |
|||
return ( |
|||
<div className="mt-6 flow-root"> |
|||
<div className="inline-block min-w-full align-middle"> |
|||
<div className="rounded-lg bg-gray-50 p-2 md:pt-0"> |
|||
<div className="md:hidden"> |
|||
<InvoicesMobileSkeleton /> |
|||
<InvoicesMobileSkeleton /> |
|||
<InvoicesMobileSkeleton /> |
|||
<InvoicesMobileSkeleton /> |
|||
<InvoicesMobileSkeleton /> |
|||
<InvoicesMobileSkeleton /> |
|||
</div> |
|||
<table className="hidden min-w-full text-gray-900 md:table"> |
|||
<thead className="rounded-lg text-left text-sm font-normal"> |
|||
<tr> |
|||
<th scope="col" className="px-4 py-5 font-medium sm:pl-6"> |
|||
Customer |
|||
</th> |
|||
<th scope="col" className="px-3 py-5 font-medium"> |
|||
Email |
|||
</th> |
|||
<th scope="col" className="px-3 py-5 font-medium"> |
|||
Amount |
|||
</th> |
|||
<th scope="col" className="px-3 py-5 font-medium"> |
|||
Date |
|||
</th> |
|||
<th scope="col" className="px-3 py-5 font-medium"> |
|||
Status |
|||
</th> |
|||
<th |
|||
scope="col" |
|||
className="relative pb-4 pl-3 pr-6 pt-2 sm:pr-6" |
|||
> |
|||
<span className="sr-only">Edit</span> |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody className="bg-white"> |
|||
<TableRowSkeleton /> |
|||
<TableRowSkeleton /> |
|||
<TableRowSkeleton /> |
|||
<TableRowSkeleton /> |
|||
<TableRowSkeleton /> |
|||
<TableRowSkeleton /> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
/** @type {import('next').NextConfig} */ |
|||
const nextConfig = {}; |
|||
|
|||
module.exports = nextConfig; |
|||
File diff suppressed because it is too large
@ -0,0 +1,41 @@ |
|||
{ |
|||
"private": true, |
|||
"scripts": { |
|||
"build": "next build", |
|||
"dev": "next dev", |
|||
"prettier": "prettier --write --ignore-unknown .", |
|||
"prettier:check": "prettier --check --ignore-unknown .", |
|||
"start": "next start" |
|||
}, |
|||
"dependencies": { |
|||
"@heroicons/react": "^2.0.18", |
|||
"@tailwindcss/forms": "^0.5.7", |
|||
"@types/node": "20.5.7", |
|||
"@vercel/postgres": "^0.5.0", |
|||
"autoprefixer": "10.4.15", |
|||
"bcrypt": "^5.1.1", |
|||
"clsx": "^2.0.0", |
|||
"next": "^14.0.2", |
|||
"postcss": "8.4.31", |
|||
"react": "18.2.0", |
|||
"react-dom": "18.2.0", |
|||
"tailwindcss": "3.3.3", |
|||
"typescript": "5.2.2", |
|||
"zod": "^3.22.2" |
|||
}, |
|||
"devDependencies": { |
|||
"@types/bcrypt": "^5.0.1", |
|||
"@types/react": "18.2.21", |
|||
"@types/react-dom": "18.2.14", |
|||
"@vercel/style-guide": "^5.0.1", |
|||
"dotenv": "^16.3.1", |
|||
"eslint": "^8.52.0", |
|||
"eslint-config-next": "^14.0.0", |
|||
"eslint-config-prettier": "9.0.0", |
|||
"prettier": "^3.0.3", |
|||
"prettier-plugin-tailwindcss": "0.5.4" |
|||
}, |
|||
"engines": { |
|||
"node": ">=18.17.0" |
|||
} |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
module.exports = { |
|||
plugins: { |
|||
tailwindcss: {}, |
|||
autoprefixer: {}, |
|||
}, |
|||
}; |
|||
@ -0,0 +1,6 @@ |
|||
const styleguide = require('@vercel/style-guide/prettier'); |
|||
|
|||
module.exports = { |
|||
...styleguide, |
|||
plugins: [...styleguide.plugins, 'prettier-plugin-tailwindcss'], |
|||
}; |
|||
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1019 B |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 487 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 238 KiB |
@ -0,0 +1,179 @@ |
|||
const { db } = require('@vercel/postgres'); |
|||
const { |
|||
invoices, |
|||
customers, |
|||
revenue, |
|||
users, |
|||
} = require('../app/lib/placeholder-data.js'); |
|||
const bcrypt = require('bcrypt'); |
|||
|
|||
async function seedUsers(client) { |
|||
try { |
|||
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`; |
|||
// Create the "users" table if it doesn't exist
|
|||
const createTable = await client.sql` |
|||
CREATE TABLE IF NOT EXISTS users ( |
|||
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, |
|||
name VARCHAR(255) NOT NULL, |
|||
email TEXT NOT NULL UNIQUE, |
|||
password TEXT NOT NULL |
|||
); |
|||
`;
|
|||
|
|||
console.log(`Created "users" table`); |
|||
|
|||
// Insert data into the "users" table
|
|||
const insertedUsers = await Promise.all( |
|||
users.map(async (user) => { |
|||
const hashedPassword = await bcrypt.hash(user.password, 10); |
|||
return client.sql` |
|||
INSERT INTO users (id, name, email, password) |
|||
VALUES (${user.id}, ${user.name}, ${user.email}, ${hashedPassword}) |
|||
ON CONFLICT (id) DO NOTHING; |
|||
`;
|
|||
}), |
|||
); |
|||
|
|||
console.log(`Seeded ${insertedUsers.length} users`); |
|||
|
|||
return { |
|||
createTable, |
|||
users: insertedUsers, |
|||
}; |
|||
} catch (error) { |
|||
console.error('Error seeding users:', error); |
|||
throw error; |
|||
} |
|||
} |
|||
|
|||
async function seedInvoices(client) { |
|||
try { |
|||
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`; |
|||
|
|||
// Create the "invoices" table if it doesn't exist
|
|||
const createTable = await client.sql` |
|||
CREATE TABLE IF NOT EXISTS invoices ( |
|||
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, |
|||
customer_id UUID NOT NULL, |
|||
amount INT NOT NULL, |
|||
status VARCHAR(255) NOT NULL, |
|||
date DATE NOT NULL |
|||
); |
|||
`;
|
|||
|
|||
console.log(`Created "invoices" table`); |
|||
|
|||
// Insert data into the "invoices" table
|
|||
const insertedInvoices = await Promise.all( |
|||
invoices.map( |
|||
(invoice) => client.sql` |
|||
INSERT INTO invoices (customer_id, amount, status, date) |
|||
VALUES (${invoice.customer_id}, ${invoice.amount}, ${invoice.status}, ${invoice.date}) |
|||
ON CONFLICT (id) DO NOTHING; |
|||
`,
|
|||
), |
|||
); |
|||
|
|||
console.log(`Seeded ${insertedInvoices.length} invoices`); |
|||
|
|||
return { |
|||
createTable, |
|||
invoices: insertedInvoices, |
|||
}; |
|||
} catch (error) { |
|||
console.error('Error seeding invoices:', error); |
|||
throw error; |
|||
} |
|||
} |
|||
|
|||
async function seedCustomers(client) { |
|||
try { |
|||
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`; |
|||
|
|||
// Create the "customers" table if it doesn't exist
|
|||
const createTable = await client.sql` |
|||
CREATE TABLE IF NOT EXISTS customers ( |
|||
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, |
|||
name VARCHAR(255) NOT NULL, |
|||
email VARCHAR(255) NOT NULL, |
|||
image_url VARCHAR(255) NOT NULL |
|||
); |
|||
`;
|
|||
|
|||
console.log(`Created "customers" table`); |
|||
|
|||
// Insert data into the "customers" table
|
|||
const insertedCustomers = await Promise.all( |
|||
customers.map( |
|||
(customer) => client.sql` |
|||
INSERT INTO customers (id, name, email, image_url) |
|||
VALUES (${customer.id}, ${customer.name}, ${customer.email}, ${customer.image_url}) |
|||
ON CONFLICT (id) DO NOTHING; |
|||
`,
|
|||
), |
|||
); |
|||
|
|||
console.log(`Seeded ${insertedCustomers.length} customers`); |
|||
|
|||
return { |
|||
createTable, |
|||
customers: insertedCustomers, |
|||
}; |
|||
} catch (error) { |
|||
console.error('Error seeding customers:', error); |
|||
throw error; |
|||
} |
|||
} |
|||
|
|||
async function seedRevenue(client) { |
|||
try { |
|||
// Create the "revenue" table if it doesn't exist
|
|||
const createTable = await client.sql` |
|||
CREATE TABLE IF NOT EXISTS revenue ( |
|||
month VARCHAR(4) NOT NULL UNIQUE, |
|||
revenue INT NOT NULL |
|||
); |
|||
`;
|
|||
|
|||
console.log(`Created "revenue" table`); |
|||
|
|||
// Insert data into the "revenue" table
|
|||
const insertedRevenue = await Promise.all( |
|||
revenue.map( |
|||
(rev) => client.sql` |
|||
INSERT INTO revenue (month, revenue) |
|||
VALUES (${rev.month}, ${rev.revenue}) |
|||
ON CONFLICT (month) DO NOTHING; |
|||
`,
|
|||
), |
|||
); |
|||
|
|||
console.log(`Seeded ${insertedRevenue.length} revenue`); |
|||
|
|||
return { |
|||
createTable, |
|||
revenue: insertedRevenue, |
|||
}; |
|||
} catch (error) { |
|||
console.error('Error seeding revenue:', error); |
|||
throw error; |
|||
} |
|||
} |
|||
|
|||
async function main() { |
|||
const client = await db.connect(); |
|||
|
|||
await seedUsers(client); |
|||
await seedCustomers(client); |
|||
await seedInvoices(client); |
|||
await seedRevenue(client); |
|||
|
|||
await client.end(); |
|||
} |
|||
|
|||
main().catch((err) => { |
|||
console.error( |
|||
'An error occurred while attempting to seed the database:', |
|||
err, |
|||
); |
|||
}); |
|||
@ -0,0 +1,32 @@ |
|||
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}', |
|||
], |
|||
theme: { |
|||
extend: { |
|||
gridTemplateColumns: { |
|||
'13': 'repeat(13, minmax(0, 1fr))', |
|||
}, |
|||
colors: { |
|||
blue: { |
|||
400: '#2589FE', |
|||
500: '#0070F3', |
|||
600: '#2F6FEB', |
|||
}, |
|||
}, |
|||
}, |
|||
keyframes: { |
|||
shimmer: { |
|||
'100%': { |
|||
transform: 'translateX(100%)', |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
plugins: [require('@tailwindcss/forms')], |
|||
}; |
|||
export default config; |
|||
@ -0,0 +1,34 @@ |
|||
{ |
|||
"compilerOptions": { |
|||
"target": "es5", |
|||
"lib": ["dom", "dom.iterable", "esnext"], |
|||
"allowJs": true, |
|||
"skipLibCheck": true, |
|||
"strict": true, |
|||
"noEmit": true, |
|||
"esModuleInterop": true, |
|||
"module": "esnext", |
|||
"moduleResolution": "bundler", |
|||
"resolveJsonModule": true, |
|||
"isolatedModules": true, |
|||
"jsx": "preserve", |
|||
"incremental": true, |
|||
"plugins": [ |
|||
{ |
|||
"name": "next" |
|||
} |
|||
], |
|||
"paths": { |
|||
"@/*": ["./*"] |
|||
} |
|||
}, |
|||
"include": [ |
|||
"next-env.d.ts", |
|||
"**/*.ts", |
|||
"**/*.tsx", |
|||
".next/types/**/*.ts", |
|||
"app/lib/placeholder-data.js", |
|||
"scripts/seed.js" |
|||
], |
|||
"exclude": ["node_modules"] |
|||
} |
|||
Loading…
Reference in new issue