From e4dc33e94406b02e43c275b5ad6ded8a92795f6e Mon Sep 17 00:00:00 2001
From: Emil Kowalski <36730035+emilkowalski@users.noreply.github.com>
Date: Thu, 5 Oct 2023 10:16:12 +0200
Subject: [PATCH] Update customers view (#196)
* Update tables
* Add new customers, add search, polish
* Make search reusable, update customers
* polish
---
.../15-final/app/dashboard/customers/page.tsx | 18 +++-
.../15-final/app/dashboard/invoices/page.tsx | 4 +-
dashboard/15-final/app/lib/data.ts | 55 ++++++++---
dashboard/15-final/app/lib/definitions.ts | 10 ++
dashboard/15-final/app/lib/dummy-data.js | 74 +++++++++-----
dashboard/15-final/app/ui/button.tsx | 2 +-
dashboard/15-final/app/ui/customers/table.tsx | 92 +++++++++++++-----
.../15-final/app/ui/invoices/buttons.tsx | 6 +-
.../15-final/app/ui/invoices/pagination.tsx | 13 +--
dashboard/15-final/app/ui/invoices/status.tsx | 6 +-
dashboard/15-final/app/ui/invoices/table.tsx | 31 +++---
.../15-final/app/ui/{invoices => }/search.tsx | 25 +++--
.../public/customers/ada-lovelace.png | Bin 4336 -> 0 bytes
.../public/customers/delba-de-oliveira.png | Bin 0 -> 5824 bytes
.../public/customers/emil-kowalski.png | Bin 0 -> 6268 bytes
.../15-final/public/customers/evil-rabbit.png | Bin 0 -> 1019 bytes
.../public/customers/grace-hopper.png | Bin 3753 -> 0 bytes
.../public/customers/guillermo-rauch.png | Bin 0 -> 6284 bytes
.../15-final/public/customers/hedy-lammar.png | Bin 5012 -> 0 bytes
.../public/customers/jared-palmer.png | Bin 0 -> 6460 bytes
.../public/customers/lee-robinson.png | Bin 0 -> 5653 bytes
.../public/customers/margaret-hamilton.png | Bin 3950 -> 0 bytes
.../15-final/public/customers/steph-dietz.png | Bin 0 -> 7151 bytes
.../15-final/public/customers/tom-occhino.png | Bin 0 -> 8229 bytes
24 files changed, 232 insertions(+), 104 deletions(-)
rename dashboard/15-final/app/ui/{invoices => }/search.tsx (55%)
delete mode 100644 dashboard/15-final/public/customers/ada-lovelace.png
create mode 100644 dashboard/15-final/public/customers/delba-de-oliveira.png
create mode 100644 dashboard/15-final/public/customers/emil-kowalski.png
create mode 100644 dashboard/15-final/public/customers/evil-rabbit.png
delete mode 100644 dashboard/15-final/public/customers/grace-hopper.png
create mode 100644 dashboard/15-final/public/customers/guillermo-rauch.png
delete mode 100644 dashboard/15-final/public/customers/hedy-lammar.png
create mode 100644 dashboard/15-final/public/customers/jared-palmer.png
create mode 100644 dashboard/15-final/public/customers/lee-robinson.png
delete mode 100644 dashboard/15-final/public/customers/margaret-hamilton.png
create mode 100644 dashboard/15-final/public/customers/steph-dietz.png
create mode 100644 dashboard/15-final/public/customers/tom-occhino.png
diff --git a/dashboard/15-final/app/dashboard/customers/page.tsx b/dashboard/15-final/app/dashboard/customers/page.tsx
index 531ecce..c45ee90 100644
--- a/dashboard/15-final/app/dashboard/customers/page.tsx
+++ b/dashboard/15-final/app/dashboard/customers/page.tsx
@@ -1,9 +1,23 @@
+import { fetchFilteredCustomers } from '@/app/lib/data';
import CustomersTable from '@/app/ui/customers/table';
-export default function Page() {
+export default async function Page({
+ searchParams,
+}: {
+ searchParams:
+ | {
+ query: string | undefined;
+ page: string | undefined;
+ }
+ | undefined;
+}) {
+ const query = searchParams?.query || '';
+
+ const customers = await fetchFilteredCustomers(query);
+
return (
-
+
);
}
diff --git a/dashboard/15-final/app/dashboard/invoices/page.tsx b/dashboard/15-final/app/dashboard/invoices/page.tsx
index 7b19125..11bfce8 100644
--- a/dashboard/15-final/app/dashboard/invoices/page.tsx
+++ b/dashboard/15-final/app/dashboard/invoices/page.tsx
@@ -1,5 +1,5 @@
import Pagination from '@/app/ui/invoices/pagination';
-import Search from '@/app/ui/invoices/search';
+import Search from '@/app/ui/search';
import { CreateInvoice } from '@/app/ui/invoices/buttons';
import Table from '@/app/ui/invoices/table';
import { fetchFilteredInvoices } from '@/app/lib/data';
@@ -29,7 +29,7 @@ export default async function Page({
Invoices
-
+
diff --git a/dashboard/15-final/app/lib/data.ts b/dashboard/15-final/app/lib/data.ts
index 2ddced7..f6d291f 100644
--- a/dashboard/15-final/app/lib/data.ts
+++ b/dashboard/15-final/app/lib/data.ts
@@ -44,7 +44,7 @@ export async function fetchCounts() {
export async function fetchTotalAmountByStatus() {
try {
- const data = await sql`SELECT
+ const data = await 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`;
@@ -61,8 +61,8 @@ export async function fetchTotalAmountByStatus() {
export async function fetchLatestInvoices() {
try {
const data = await sql`
- SELECT invoices.amount, customers.name, customers.image_url, customers.email
- FROM invoices
+ SELECT invoices.amount, customers.name, customers.image_url, customers.email
+ FROM invoices
JOIN customers ON invoices.customer_id = customers.id
ORDER BY invoices.date DESC
LIMIT 5`;
@@ -92,7 +92,7 @@ export async function fetchFilteredInvoices(
invoices.amount,
invoices.date,
invoices.status,
- customers.name,
+ customers.name,
customers.email,
customers.image_url
FROM invoices
@@ -161,7 +161,7 @@ export async function fetchInvoiceById(id: string) {
export async function fetchCustomerNames() {
try {
const data = await sql`
- SELECT
+ SELECT
id,
name
FROM customers
@@ -179,17 +179,17 @@ export async function fetchCustomerNames() {
export async function fetchCustomersTable() {
try {
const data = await sql`
- SELECT
+ 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
- GROUP BY customers.id, customers.name, customers.email, customers.image_url
+ 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
+ GROUP BY customers.id, customers.name, customers.email, customers.image_url
ORDER BY customers.name ASC
`;
@@ -205,3 +205,36 @@ export async function fetchCustomersTable() {
throw new Error('Failed to fetch customer table.');
}
}
+
+export async function fetchFilteredCustomers(query: string) {
+ try {
+ const data = await sql`
+ 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.');
+ }
+}
diff --git a/dashboard/15-final/app/lib/definitions.ts b/dashboard/15-final/app/lib/definitions.ts
index 8586ef4..0d609f2 100644
--- a/dashboard/15-final/app/lib/definitions.ts
+++ b/dashboard/15-final/app/lib/definitions.ts
@@ -65,6 +65,16 @@ export type CustomersTable = {
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 CustomerName = {
id: string;
name: string;
diff --git a/dashboard/15-final/app/lib/dummy-data.js b/dashboard/15-final/app/lib/dummy-data.js
index 7cfa132..9a2ee95 100644
--- a/dashboard/15-final/app/lib/dummy-data.js
+++ b/dashboard/15-final/app/lib/dummy-data.js
@@ -10,28 +10,52 @@ const users = [
const customers = [
{
- id: '93980f8c-a5e4-484c-a469-2d12ca8fdde3',
- name: 'Ada Lovelace',
- email: 'ada@lovelace.com',
- image_url: '/customers/ada-lovelace.png',
+ id: '3958dc9e-712f-4377-85e9-fec4b6a6442a',
+ name: 'Delba de Oliveira',
+ email: 'delba@oliveira.com',
+ image_url: '/customers/delba-de-oliveira.png',
},
{
- id: 'e53120f8-0301-437b-924a-0288f4ec6040',
- name: 'Grace Hopper',
- email: 'grace@hopper.com',
- image_url: '/customers/grace-hopper.png',
- },
- {
- id: '030fab4c-18d7-4ed2-814c-4171cc67bca8',
- name: 'Hedy Lammar',
- email: 'hedy@lammar.com',
- image_url: '/customers/hedy-lammar.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: 'Margaret Hamilton',
- email: 'margaret@hamilton.com',
- image_url: '/customers/margaret-hamilton.png',
+ name: 'Guillermo Rauch',
+ email: 'guillermo@rauch.com',
+ image_url: '/customers/guillermo-rauch.png',
+ },
+ {
+ id: '50ca3e18-62cd-11ee-8c99-0242ac120002',
+ name: 'Jared Palmer',
+ email: 'jared@palmer.com',
+ image_url: '/customers/jared-palmer.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: 'Tom Occhino',
+ email: 'tom@occhino.com',
+ image_url: '/customers/tom-occhino.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',
},
];
@@ -49,7 +73,7 @@ const invoices = [
date: '2022-11-14',
},
{
- customer_id: customers[2].id,
+ customer_id: customers[4].id,
amount: 3040,
status: 'paid',
date: '2022-10-29',
@@ -61,19 +85,19 @@ const invoices = [
date: '2023-09-10',
},
{
- customer_id: customers[0].id,
+ customer_id: customers[5].id,
amount: 34577,
status: 'pending',
date: '2023-08-05',
},
{
- customer_id: customers[1].id,
+ customer_id: customers[7].id,
amount: 54246,
status: 'pending',
date: '2023-07-16',
},
{
- customer_id: customers[2].id,
+ customer_id: customers[6].id,
amount: 8945,
status: 'pending',
date: '2023-06-27',
@@ -85,13 +109,13 @@ const invoices = [
date: '2023-06-09',
},
{
- customer_id: customers[2].id,
+ customer_id: customers[4].id,
amount: 1250,
status: 'paid',
date: '2023-06-17',
},
{
- customer_id: customers[0].id,
+ customer_id: customers[5].id,
amount: 8945,
status: 'paid',
date: '2023-06-07',
@@ -103,7 +127,7 @@ const invoices = [
date: '2023-08-19',
},
{
- customer_id: customers[2].id,
+ customer_id: customers[5].id,
amount: 8945,
status: 'paid',
date: '2023-06-03',
@@ -115,7 +139,7 @@ const invoices = [
date: '2023-06-18',
},
{
- customer_id: customers[3].id,
+ customer_id: customers[0].id,
amount: 8945,
status: 'paid',
date: '2023-10-04',
diff --git a/dashboard/15-final/app/ui/button.tsx b/dashboard/15-final/app/ui/button.tsx
index f65aa1d..ff6253b 100644
--- a/dashboard/15-final/app/ui/button.tsx
+++ b/dashboard/15-final/app/ui/button.tsx
@@ -9,7 +9,7 @@ export function Button({ children, className, ...rest }: ButtonProps) {