Added customer detail page

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>
             </>

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

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>
                 ))}