Skip to content

Commit cdc7d5e

Browse files
josiasbudaydeveloperjosiasbudaydeveloper
committed
Adding the Customers Page
1 parent 0db63f5 commit cdc7d5e

File tree

3 files changed

+73
-25
lines changed

3 files changed

+73
-25
lines changed

‎app/dashboard/customers/page.tsx

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,36 @@
1+
import Table from '@/app/ui/customers/table';
2+
import { lusitana } from '@/app/ui/fonts';
3+
import { InvoicesTableSkeleton } from '@/app/ui/skeletons';
4+
import { Suspense } from 'react';
15
import { Metadata } from 'next';
6+
import darkTheme from '@/app/lib/dark-theme';
7+
import { fetchFilteredCustomers } from '@/app/lib/data';
28

39
export const metadata: Metadata = {
4-
title: 'Customers',
10+
title: 'Invoices',
511
};
12+
13+
export default async function Page({
14+
searchParams,
15+
}: {
16+
searchParams?: {
17+
query?: string;
18+
page?: string;
19+
};
20+
}) {
21+
const query = searchParams?.query || '';
22+
const currentPage = Number(searchParams?.page) || 1;
623

7-
export default function Page() {
8-
return <p>Customers Page</p>;
24+
const customers = await fetchFilteredCustomers(query);
25+
26+
return (
27+
<div className="w-full">
28+
<div className="flex w-full items-center justify-between">
29+
<h1 className={`${lusitana.className} text-2xl ${darkTheme.title}`}>Customers</h1>
30+
</div>
31+
<Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
32+
<Table customers={customers} />
33+
</Suspense>
34+
</div>
35+
);
936
}

‎app/lib/dark-theme.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export default {
55
text: 'dark:text-[#ebebeb]',
66
border: 'dark:border-gray-500',
77
notActiveText: 'dark:text-gray-500',
8+
divide: 'dark:divide-gray-500',
89

910
// Actions
1011
activeLink: 'dark:bg-[#1c2932] dark:hover:bg-[#1c2932]',

‎app/ui/customers/table.tsx

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import Image from 'next/image';
2-
import { lusitana } from '@/app/ui/fonts';
32
import Search from '@/app/ui/search';
43
import {
5-
CustomersTableType,
64
FormattedCustomersTable,
75
} from '@/app/lib/definitions';
6+
import darkTheme from '@/app/lib/dark-theme';
87

98
export default async function CustomersTable({
109
customers,
@@ -13,20 +12,22 @@ export default async function CustomersTable({
1312
}) {
1413
return (
1514
<div className="w-full">
16-
<h1 className={`${lusitana.className} mb-8 text-xl md:text-2xl`}>
17-
Customers
18-
</h1>
1915
<Search placeholder="Search customers..." />
16+
2017
<div className="mt-6 flow-root">
2118
<div className="overflow-x-auto">
2219
<div className="inline-block min-w-full align-middle">
23-
<div className="overflow-hidden rounded-md bg-gray-50 p-2 md:pt-0">
20+
<div className={`
21+
overflow-hidden rounded-md bg-gray-50 ${darkTheme.container}
22+
p-2 md:pt-0
23+
`}>
2424
<div className="md:hidden">
2525
{customers?.map((customer) => (
2626
<div
2727
key={customer.id}
28-
className="mb-2 w-full rounded-md bg-white p-4"
29-
>
28+
className={`
29+
mb-2 w-full rounded-md bg-white ${darkTheme.bg} p-4
30+
`}>
3031
<div className="flex items-center justify-between border-b pb-4">
3132
<div>
3233
<div className="mb-2 flex items-center">
@@ -38,7 +39,7 @@ export default async function CustomersTable({
3839
width={28}
3940
height={28}
4041
/>
41-
<p>{customer.name}</p>
42+
<p className={`${darkTheme.title}`}>{customer.name}</p>
4243
</div>
4344
</div>
4445
<p className="text-sm text-gray-500">
@@ -48,22 +49,27 @@ export default async function CustomersTable({
4849
</div>
4950
<div className="flex w-full items-center justify-between border-b py-5">
5051
<div className="flex w-1/2 flex-col">
51-
<p className="text-xs">Pending</p>
52-
<p className="font-medium">{customer.total_pending}</p>
52+
<p className={`text-xs ${darkTheme.title}`}>Pending</p>
53+
<p className={`font-medium ${darkTheme.title}`}>{customer.total_pending}</p>
5354
</div>
5455
<div className="flex w-1/2 flex-col">
55-
<p className="text-xs">Paid</p>
56-
<p className="font-medium">{customer.total_paid}</p>
56+
<p className={`text-xs ${darkTheme.title}`}>Paid</p>
57+
<p className={`font-medium ${darkTheme.title}`}>{customer.total_paid}</p>
5758
</div>
5859
</div>
59-
<div className="pt-4 text-sm">
60+
<div className={`pt-4 text-sm ${darkTheme.title}`}>
6061
<p>{customer.total_invoices} invoices</p>
6162
</div>
6263
</div>
6364
))}
6465
</div>
65-
<table className="hidden min-w-full rounded-md text-gray-900 md:table">
66-
<thead className="rounded-md bg-gray-50 text-left text-sm font-normal">
66+
<table className={`
67+
hidden min-w-full rounded-md text-gray-900 ${darkTheme.text} md:table
68+
`}>
69+
<thead className={`
70+
rounded-md bg-gray-50 ${darkTheme.container}
71+
text-left text-sm font-normal
72+
`}>
6773
<tr>
6874
<th scope="col" className="px-4 py-5 font-medium sm:pl-6">
6975
Name
@@ -83,10 +89,16 @@ export default async function CustomersTable({
8389
</tr>
8490
</thead>
8591

86-
<tbody className="divide-y divide-gray-200 text-gray-900">
92+
<tbody className={`
93+
divide-y divide-gray-200 ${darkTheme.divide}
94+
text-gray-900 ${darkTheme.text}
95+
`}>
8796
{customers.map((customer) => (
8897
<tr key={customer.id} className="group">
89-
<td className="whitespace-nowrap bg-white py-5 pl-4 pr-3 text-sm text-black group-first-of-type:rounded-md group-last-of-type:rounded-md sm:pl-6">
98+
<td className={`
99+
whitespace-nowrap bg-white ${darkTheme.bg} py-5 pl-4 pr-3 text-sm
100+
text-black ${darkTheme.title} group-first-of-type:rounded-md group-last-of-type:rounded-md sm:pl-6
101+
`}>
90102
<div className="flex items-center gap-3">
91103
<Image
92104
src={customer.image_url}
@@ -98,16 +110,24 @@ export default async function CustomersTable({
98110
<p>{customer.name}</p>
99111
</div>
100112
</td>
101-
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
113+
<td className={`
114+
whitespace-nowrap bg-white ${darkTheme.bg} px-4 py-5 text-sm
115+
`}>
102116
{customer.email}
103117
</td>
104-
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
118+
<td className={`
119+
whitespace-nowrap bg-white ${darkTheme.bg} px-4 py-5 text-sm
120+
`}>
105121
{customer.total_invoices}
106122
</td>
107-
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
123+
<td className={`
124+
whitespace-nowrap bg-white ${darkTheme.bg} px-4 py-5 text-sm
125+
`}>
108126
{customer.total_pending}
109127
</td>
110-
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm group-first-of-type:rounded-md group-last-of-type:rounded-md">
128+
<td className={`whitespace-nowrap bg-white ${darkTheme.bg} px-4 py-5
129+
text-sm group-first-of-type:rounded-md group-last-of-type:rounded-md
130+
`}>
111131
{customer.total_paid}
112132
</td>
113133
</tr>

0 commit comments

Comments
 (0)