customer list component

barkmanui/src/features/customers/CustomerList.tsx

@@ -0,0 +1,54 @@
+import {Flex, Table} from '@mantine/core';
+import BarkButton from "../../common/components/BarkButton.tsx";
+import {Link, NavLink} from "react-router";
+import useCustomerList from "./hooks/useCustomerList.tsx";
+
+
+function CustomerList() {
+
+    const customerQuery  = useCustomerList();
+
+    if (customerQuery.isPending) return 'Loading...'
+
+    if (customerQuery.error) return 'An error has occurred: ' + customerQuery.error.message
+
+
+    return (
+        <>
+            <Flex
+                mih={50}
+                gap="xl"
+                justify="center"
+                align="center"
+                direction="row"
+                wrap="wrap"
+            >
+                <p>
+                    ARFF ARFF BARK BARK
+                </p>
+                <NavLink to={'/inventory/addItem'}><BarkButton>Add Item</BarkButton></NavLink>
+            </Flex>
+
+            <Table striped>
+            <Table.Thead>
+                <Table.Tr>
+                    <Table.Th c="red">Name</Table.Th>
+                    <Table.Th c="red">Company</Table.Th>
+                </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                {customerQuery.data?.map((data) => (
+                    <Table.Tr key={data.id}>
+                        <Table.Td>{data.name}</Table.Td>
+                        <Table.Td>{data.company}</Table.Td>
+                        <Table.Td>
+                            <Link to={`/inventory/itemDetail/${data.id}`}>Details</Link>
+                        </Table.Td>
+                    </Table.Tr>
+                ))}
+                </Table.Tbody>
+            </Table>
+        </>
+    )
+}
+export default CustomerList;

barkmanui/src/features/customers/hooks/useCustomerList.tsx

@@ -0,0 +1,17 @@
+import {useQuery} from "@tanstack/react-query";
+import {Customer} from "../types.ts";
+
+    const useCustomerList = () => useQuery({
+        queryKey: ['customer'],
+        queryFn: async (): Promise<Customer[]> => {
+            const response = await fetch(
+                import.meta.env.VITE_API_URL + '/custmoers',
+            )
+
+            if (!response.ok) throw new Error('Failed to fetch customers ' + response.statusText)
+
+            return await response.json()
+        },
+    });
+
+export default useCustomerList;

barkmanui/src/features/customers/types.ts

@@ -0,0 +1,10 @@
+export interface Customer {
+    id: number,
+    name: string,
+    company: string,
+    email: string,
+    phone: string,
+    address: string,
+    billingTerms: string,
+    notes: string,
+}