created inital detail page

barkmanui/src/features/jobs/JobDetail.tsx

@@ -0,0 +1,47 @@
+import {Container, Text, Title} from "@mantine/core";
+import {Link, useParams} from "react-router";
+import {Job} from "./types.ts";
+import {useQuery} from "@tanstack/react-query";
+
+
+function JobDetail() {
+    const params = useParams();
+
+    const {isPending, error, data, isFetching} = useQuery({
+        queryKey: ['jobs', params.jobId],
+        queryFn: async (): Promise<Job> => {
+            const response = await fetch(
+                import.meta.env.VITE_API_URL + '/jobs/' + params.jobId,
+            )
+
+            if (!response.ok) throw new Error('Failed to fetch jobs ' + 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}>Item Detail</Title>
+                <div>{isFetching ? 'Updating...' : ''}</div>
+                <Text>Customer ID: {data.customerId}</Text>
+                <Text>Name: {data.name}</Text>
+                {/*<Text>Status: {data.status.name}</Text>*/}
+                <Text>Start Date: {data.startDate}</Text>
+                <Text>End Date: ${data.endDate}</Text>
+                <Text>Venue: ${data.venue}</Text>
+                <Text>Address: ${data.address}</Text>
+                <Text>Notes: {data.notes}</Text>
+
+                <Link to={`/inventory/editItem/${data.id}`}>Edit</Link>
+            </Container>
+        </>
+    )
+}
+
+export default JobDetail