From 34d421719ca20978a1e2d81bf82182a277b86194 Mon Sep 17 00:00:00 2001
From: Drew Rautenberg <drew@drewrautenberg.com>
Date: Sat, 18 Jul 2026 18:33:48 -0500
Subject: [PATCH] Added customer detail page

---
 barkmanui/src/App.tsx                         |  2 +
 .../src/features/customers/CustomerDetail.tsx | 45 +++++++++++++++++++
 .../src/features/customers/CustomerList.tsx   |  2 +-
 3 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 barkmanui/src/features/customers/CustomerDetail.tsx

diff --git a/barkmanui/src/App.tsx b/barkmanui/src/App.tsx
index c262ba4..809d0c9 100644
--- a/barkmanui/src/App.tsx
+++ b/barkmanui/src/App.tsx
@@ -12,6 +12,7 @@ import { Notifications } from '@mantine/notifications';
 import '@mantine/notifications/styles.css';
 import CustomerList from "@/features/customers/CustomerList.tsx";
 import AddCustomer from "@/features/customers/AddCustomer.tsx";
+import CustomerDetail from "@/features/customers/CustomerDetail.tsx";
 
 // Create a client
 const queryClient = new QueryClient()
@@ -50,6 +51,7 @@ function App() {
                     <Route path="inventory/addItem" element={<AddItem/>}/>
                     <Route path="customers" element={<CustomerList/>}/>
                     <Route path="customers/addCustomer" element={<AddCustomer/>}/>
+                    <Route path="customers/customerDetail/:customerId" element={<CustomerDetail/>}/>
 
                 </Routes>
             </>
diff --git a/barkmanui/src/features/customers/CustomerDetail.tsx b/barkmanui/src/features/customers/CustomerDetail.tsx
new file mode 100644
index 0000000..7933492
--- /dev/null
+++ b/barkmanui/src/features/customers/CustomerDetail.tsx
@@ -0,0 +1,45 @@
+import {Container, Text, Title} from "@mantine/core";
+import {Link, useParams} from "react-router";
+import {Customer} from "./types.ts";
+import {useQuery} from "@tanstack/react-query";
+
+
+function CustomerDetail() {
+    const params = useParams();
+
+    const {isPending, error, data, isFetching} = useQuery({
+        queryKey: ['customers', params.customerId],
+        queryFn: async (): Promise<Customer> => {
+            const response = await fetch(
+                import.meta.env.VITE_API_URL + '/customers/' + params.customerId,
+            )
+
+            if (!response.ok) throw new Error('Failed to fetch customer ' + response.statusText)
+
+            return await response.json()
+        },
+    });
+
+    if (isPending) return 'Loading...'
+
+    if (error) return 'An error has occurred: ' + error.message
+
+    return (
+        <>
+            <Container m="lg">
+                <Title order={1}>Customer Detail</Title>
+                <div>{isFetching ? 'Updating...' : ''}</div>
+                <Text>Name: {data.name}</Text>
+                <Text>Company: {data.company}</Text>
+                <Text>Email: {data.email}</Text>
+                <Text>Phone Number: {data.phone}</Text>
+                <Text>Address: ${data.address}</Text>
+                <Text>Notes: {data.notes}</Text>
+
+                <Link to={`/inventory/editItem/${data.id}`}>Edit</Link>
+            </Container>
+        </>
+    )
+}
+
+export default CustomerDetail
\ No newline at end of file
diff --git a/barkmanui/src/features/customers/CustomerList.tsx b/barkmanui/src/features/customers/CustomerList.tsx
index aeda9ae..24a7f88 100644
--- a/barkmanui/src/features/customers/CustomerList.tsx
+++ b/barkmanui/src/features/customers/CustomerList.tsx
@@ -42,7 +42,7 @@ function CustomerList() {
                         <Table.Td>{data.name}</Table.Td>
                         <Table.Td>{data.company}</Table.Td>
                         <Table.Td>
-                            <Link to={`/inventory/itemDetail/${data.id}`}>Details</Link>
+                            <Link to={`/customers/customerDetail/${data.id}`}>Details</Link>
                         </Table.Td>
                     </Table.Tr>
                 ))}