+
+
+
+ + Next.js Dashboard +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate + dapibus consectetur. Duis quis eros euismod. +
+ + + +
+
Customers
+
diff --git a/dashboard/15-final/app/ui/dashboard/card.tsx b/dashboard/15-final/app/ui/dashboard/card.tsx
index 49d9652..18f8534 100644
--- a/dashboard/15-final/app/ui/dashboard/card.tsx
+++ b/dashboard/15-final/app/ui/dashboard/card.tsx
@@ -34,7 +34,6 @@ export default function Card({
-
-
-
-
+
| - Profile - | -- Name - | -- Email - | -- Total Invoices - | -- Total Pending - | -- Total Paid - | -||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
-
-
- |
- - {customer.name} - | -- {customer.email} - | -- {countCustomerInvoices(invoices, customer.id)} - | -- {calculateCustomerInvoices( - invoices, - 'pending', - customer.id, - )} - | -- {calculateCustomerInvoices(invoices, 'paid', customer.id)} - | +
| + Name + | ++ Email + | ++ Total Invoices + | ++ Total Pending + | ++ Total Paid + |
|---|
+
+ {customer.name}
+{value}
-+00% since last month
); } diff --git a/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx b/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx index af93631..3a5e4e4 100644 --- a/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx +++ b/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx @@ -34,14 +34,15 @@ export default function LatestInvoices({ height={32} />
-
- {customer?.name}
++ {customer?.name} +
{customer?.email}
- +{' '} +
{(invoice.amount / 100).toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
diff --git a/dashboard/15-final/app/ui/dashboard/nav-links.tsx b/dashboard/15-final/app/ui/dashboard/nav-links.tsx
new file mode 100644
index 0000000..79a2242
--- /dev/null
+++ b/dashboard/15-final/app/ui/dashboard/nav-links.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import {
+ UserGroupIcon,
+ HomeIcon,
+ InboxIcon,
+} from '@heroicons/react/24/outline';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import clsx from 'clsx';
+
+// Map of links to display in the side navigation.
+// Depending on the size of the application, this would be stored in a database.
+const links = [
+ { name: 'Home', href: '/dashboard', icon: HomeIcon },
+ { name: 'Invoices', href: '/dashboard/invoices', icon: InboxIcon },
+ { name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
+];
+
+export default function NavLinks() {
+ const pathname = usePathname();
+
+ return (
+ <>
+ {links.map((link) => {
+ const LinkIcon = link.icon;
+ return (
+
+
{link.name}
+ + ); + })} + + ); +} diff --git a/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx b/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx index 3ba6415..5e8798c 100644 --- a/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx +++ b/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx @@ -15,7 +15,7 @@ export default function RevenueChart({ revenue }: { revenue: Revenue[] }) { } return ( -
+
Revenue
{/* y-axis */}
@@ -23,16 +23,16 @@ export default function RevenueChart({ revenue }: { revenue: Revenue[] }) {
className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
style={{ height: `${chartHeight}px` }}
>
- {yAxisLabels.map((label, index) => (
-
- {revenue.map((month, index) => (
- {label}
+ {yAxisLabels.map((label) => ( +{label}
))}
+ {revenue.map((month) => (
+
{/* bars */}
-
- );
-}
diff --git a/dashboard/15-final/app/ui/dashboard/sidenav.tsx b/dashboard/15-final/app/ui/dashboard/sidenav.tsx
index 6adde5e..dac1ed0 100644
--- a/dashboard/15-final/app/ui/dashboard/sidenav.tsx
+++ b/dashboard/15-final/app/ui/dashboard/sidenav.tsx
@@ -1,25 +1,9 @@
-'use client';
-
-import {
- UserGroupIcon,
- HomeIcon,
- InboxIcon,
- PowerIcon,
-} from '@heroicons/react/24/outline';
-import Link from 'next/link';
+import { PowerIcon } from '@heroicons/react/24/outline';
import Image from 'next/image';
-import { usePathname } from 'next/navigation';
-import clsx from 'clsx';
+import Link from 'next/link';
+import NavLinks from '@/app/ui/dashboard/nav-links';
export default function SideNav() {
- const pathname = usePathname();
-
- const tabs = [
- { name: 'Home', href: '/dashboard', icon: HomeIcon },
- { name: 'Invoices', href: '/dashboard/invoices', icon: InboxIcon },
- { name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
- ];
-
return (
@@ -32,24 +16,7 @@ export default function SideNav() {
height={32}
/>
- {tabs.map((tab, i) => {
- const TabIcon = tab.icon;
- return (
-
-
- {tab.name}
- - ); - })} +
-
- );
-}
diff --git a/dashboard/15-final/app/ui/invoices/delete-invoice-button.tsx b/dashboard/15-final/app/ui/invoices/delete-button.tsx
similarity index 100%
rename from dashboard/15-final/app/ui/invoices/delete-invoice-button.tsx
rename to dashboard/15-final/app/ui/invoices/delete-button.tsx
diff --git a/dashboard/15-final/app/ui/invoices/form.tsx b/dashboard/15-final/app/ui/invoices/form.tsx
index 377be38..6f80bf9 100644
--- a/dashboard/15-final/app/ui/invoices/form.tsx
+++ b/dashboard/15-final/app/ui/invoices/form.tsx
@@ -46,7 +46,7 @@ export default function InvoiceForm({
};
return (
-
-
-
- - Next.js Dashboard -
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate - dapibus consectetur. Duis quis eros euismod. -
- - - -
- 
-
-
-
+
diff --git a/dashboard/15-final/app/ui/invoices/pagination.tsx b/dashboard/15-final/app/ui/invoices/pagination.tsx
index 2cd3416..3dd18a1 100644
--- a/dashboard/15-final/app/ui/invoices/pagination.tsx
+++ b/dashboard/15-final/app/ui/invoices/pagination.tsx
@@ -26,11 +26,11 @@ export default function PaginationButtons({
const NextPageTag = currentPage === totalPages ? 'p' : Link;
return (
- {type === 'new' ? 'New Invoice' : 'Edit Invoice'}
@@ -84,7 +84,7 @@ export default function InvoiceForm({ value={amount} placeholder="00.00" onChange={(e) => setAmount(Number(e.target.value))} - className="block w-full rounded-md border-0 py-1.5 pl-7 text-sm leading-6 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400" + className="block w-full rounded-md border-0 py-1.5 pl-7 text-sm leading-6 ring-1 ring-inset ring-gray-200 placeholder:text-gray-400" />
+
@@ -58,7 +59,7 @@ export default function PaginationButtons({
-
+
+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
+
diff --git a/dashboard/15-final/public/hero.png b/dashboard/15-final/public/hero.png
index dec1906f35c1bdfa42b744608491aeff2902cc8a..cd83d2947148d354b4a95f9b884a19e2838d50d2 100644
GIT binary patch
literal 712919
zcmeFZi8qx0-#@NJl!{U&OQa%Y8M5zDDhW}MZ6qPaSQ`vxrm_=?EZHL@`!*QElx?zS
zo55IOFc@PW+ZgkkKKJKy-|ydje&2uKcfRL&T;_G1Gv_$hb9+1<&*vrLk
-
-
-
-
+
| - # - | -- Customer - | -- Email - | -- Amount - | -- Date - | -- Status - | - -- Edit - | -||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| - {invoice.id} - | -
-
-
- {getCustomerById(invoice.customerId)?.name} - |
- - {getCustomerById(invoice.customerId)?.email} - | -- {(invoice.amount / 100).toLocaleString('en-US', { - style: 'currency', - currency: 'USD', - })} - | -- {formatDateToLocal(invoice.date)} - | -- {renderInvoiceStatus(invoice.status)} - | -
-
- |
+
| + # + | ++ Customer + | ++ Email + | ++ Amount + | ++ Date + | ++ Status + | ++ Edit + |
|---|
+
+ {getCustomerById(invoice.customerId)?.name}
+X@w`Skd2i|;ubmQ6mYPFlY1IYUo&KS{rcC$|Y*ZF&tRklPdo7&VQw
z;@IN^y2Te}tf~ve4C~NoBEw(v>FCdb%SG-j1+B%$W9+l@er1QJaHYqk16v`-3t%Ge
zhf1H6JXxG_7<)%h?l;Jh5qmpg(BSs?j#Kf#GddVv11eju-B}6@A%lht;UU()WH8asO_g^})8C5UyBT
ztzqfnoP7-co?oU|wf#RF+J1Y|Zk|z0-eB^;6evK6