add customer page

barkmanui/src/App.tsx

@@ -11,6 +11,7 @@ import AddItem from "./features/inventory/AddItem.tsx";
 import { Notifications } from '@mantine/notifications';
 import '@mantine/notifications/styles.css';
 import CustomerList from "@/features/customers/CustomerList.tsx";
+import AddCustomer from "@/features/customers/AddCustomer.tsx";
 
 // Create a client
 const queryClient = new QueryClient()
@@ -48,6 +49,7 @@ function App() {
                     <Route path="inventory/editItem/:itemId" element={<EditItem/>}/>
                     <Route path="inventory/addItem" element={<AddItem/>}/>
                     <Route path="customers" element={<CustomerList/>}/>
+                    <Route path="customers/addCustomer" element={<AddCustomer/>}/>
 
                 </Routes>
             </>

barkmanui/src/features/customers/AddCustomer.tsx

@@ -0,0 +1,109 @@
+import {Button, Group, TextInput, NumberInput, Container, Title, Flex} from '@mantine/core';
+import {useForm} from '@mantine/form';
+import {useMutation} from "@tanstack/react-query";
+import {NewCustomer} from "./types.ts";
+import {useNavigate} from "react-router";
+import {IconX, IconCheck} from '@tabler/icons-react';
+import {notifications} from '@mantine/notifications';
+import useCustomerList from "./hooks/useCustomerList.tsx";
+
+
+function AddCustomer() {
+
+    const navigate = useNavigate();
+
+    const customerQuery = useCustomerList();
+
+    const newCustomerForm = useForm<NewCustomer>({
+        mode: 'uncontrolled',
+        initialValues: {
+            name: "",
+            company: "",
+            email: "",
+            phone: "",
+            address: "",
+        },
+
+        validate: {},
+    });
+
+    const updateCustomer = useMutation({
+        mutationFn: async (values: NewCustomer) => {
+
+            const result = await fetch(import.meta.env.VITE_API_URL + '/customers', {
+                method: 'POST',
+                body: JSON.stringify(values),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            if (result.ok) {
+                notifications.show({
+                    icon: <IconCheck size={20}/>,
+                    color: "teal",
+                    title: "All good!",
+                    message: "Customer Created",
+                    position: 'top-center',
+                });
+                navigate("/customers");
+
+            }
+
+            if (!result.ok) {
+                notifications.show({
+                    icon: <IconX size={20}/>,
+                    color: "red",
+                    title: "Bummer!",
+                    message: "Something went wrong",
+                    position: 'top-center',
+                });
+                throw new Error('Failed to create customer');
+            }
+
+        },
+
+
+    })
+
+    if (customerQuery.isPending) return 'Loading...'
+    if (customerQuery.error) return 'An error has occurred: ' + customerQuery.error.message
+
+
+
+
+    return (
+        <>
+            <form onSubmit={newCustomerForm.onSubmit(async (values) => await
+                updateCustomer.mutateAsync(values))}>
+                <Container m="lg">
+                    <Flex mih={50}
+                          gap="md"
+                          justify="flex-start"
+                          align="flex-start"
+                          direction="column"
+                          wrap="wrap">
+
+                        <Title order={1}>Add Item</Title>
+                        <TextInput withAsterisk key={newCustomerForm.key('name')} size="md" label="Name"
+                                   placeholder="Name" {...newCustomerForm.getInputProps('name')}/>
+                        <TextInput size="md" key={newCustomerForm.key('company')} label="Company"
+                                   placeholder="Company"{...newCustomerForm.getInputProps('company')}/>
+                        <NumberInput size="md" key={newCustomerForm.key('email')} label="Email"
+                                     placeholder="Email" {...newCustomerForm.getInputProps('email')}/>
+                        <NumberInput size="md" key={newCustomerForm.key('phone')} label="Phone"
+                                     placeholder="Phone" {...newCustomerForm.getInputProps('phone')}/>
+                        <NumberInput size="md" key={newCustomerForm.key('address')} label="Address"
+                                     placeholder="Address" {...newCustomerForm.getInputProps('address')}/>
+
+                        <Group justify="flex-end" mt="md">
+                            <Button type="submit">Submit</Button>
+                        </Group>
+                    </Flex>
+                </Container>
+            </form>
+        </>
+    );
+}
+
+export default AddCustomer;

barkmanui/src/features/customers/CustomerList.tsx

@@ -26,7 +26,7 @@ function CustomerList() {
                 <p>
                     ARFF ARFF BARK BARK
                 </p>
-                <NavLink to={'/inventory/addItem'}><BarkButton>Add Item</BarkButton></NavLink>
+                <NavLink to={'/customers/AddCustomers'}><BarkButton>Add Customer</BarkButton></NavLink>
             </Flex>
 
             <Table striped>

barkmanui/src/features/customers/types.ts

@@ -11,7 +11,7 @@ export interface Customer {
 export interface NewCustomer {
     name: string,
     company: string,
-    email: number,
+    email: string,
-    phone: number,
+    phone: string,
     address: string,
 }