Added customer detail page

2026-08-11 11:42:03 +00:00 · 2026-07-18 18:33:48 -05:00
parent d15701a50b
commit 34d421719c
3 changed files with 48 additions and 1 deletions
@@ -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