Merge pull request #25 from Pup-Ion-Dev/add-item-page

closes #13

barkmanAPI/Program.cs

@@ -84,9 +84,16 @@ inventoryGroup.MapPut("/{id}", async (int id, InventoryItems updatedItem, BarkCo
     return Results.Ok(existingItem);
 });
 
-
+inventoryGroup.MapPost("", async (InventoryItems newItemInput, BarkContext db) =>
-inventoryGroup.MapPost("", async (InventoryItems newItem, BarkContext db) =>
 {
+    var newItem = new InventoryItems();
+    newItem.Name = newItemInput.Name;
+    newItem.Brand = newItemInput.Brand;
+    newItem.SerialNumber = newItemInput.SerialNumber;
+    newItem.RentalPrice = newItemInput.RentalPrice;
+    newItem.ReplacementCost = newItemInput.ReplacementCost;
+    newItem.StatusId = "ready";
+
     db.Inventory.Add(newItem);
     await db.SaveChangesAsync();
     return Results.Created($"/inventory/{newItem.Id}", newItem);

barkmanui/.env

@@ -1 +1,4 @@
+#Staging API
+#VITE_API_URL=https://barkdev.ts.drewr.io
+#Local Dev API
 VITE_API_URL=http://localhost:5145

barkmanui/package-lock.json

@@ -11,6 +11,8 @@
         "@mantine/core": "^7.16.0",
         "@mantine/form": "^7.16.0",
         "@mantine/hooks": "^7.16.0",
+        "@mantine/notifications": "^7.16.2",
+        "@tabler/icons-react": "^3.29.0",
         "@tanstack/react-query": "^5.64.1",
         "@tanstack/react-query-devtools": "^5.64.1",
         "axios": "^1.7.9",
@@ -1083,9 +1085,9 @@
       }
     },
     "node_modules/@mantine/core": {
-      "version": "7.16.0",
+      "version": "7.16.2",
-      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.16.0.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.16.2.tgz",
-      "integrity": "sha512-lYYwa4Itz77uC8zQzdiKiKdz9Q01NBOYPZsotIKsP/Zqij0qhpsVxoJ8MK3P8IqFyLfThTMmR4sT1qlGfLTA9Q==",
+      "integrity": "sha512-6dwFz+8HrOqFan7GezgpoWyZSCxedh10S8iILGVsc3GXiD4gzo+3VZndZKccktkYZ3GVC9E3cCS3SxbiyKSAVw==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/react": "^0.26.28",
@@ -1096,7 +1098,7 @@
         "type-fest": "^4.27.0"
       },
       "peerDependencies": {
-        "@mantine/hooks": "7.16.0",
+        "@mantine/hooks": "7.16.2",
         "react": "^18.x || ^19.x",
         "react-dom": "^18.x || ^19.x"
       }
@@ -1115,9 +1117,34 @@
       }
     },
     "node_modules/@mantine/hooks": {
-      "version": "7.16.0",
+      "version": "7.16.2",
-      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.16.0.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.16.2.tgz",
-      "integrity": "sha512-8KxrhckesbrV6tyOndm6fJ+jSKA4KX/67ppDFlfYMMbV6Yh+s0zRO4KLi2uCtl6tgckQd2/zDzX3kQk+VYKqDA==",
+      "integrity": "sha512-ZFHQhDi9T+r6VR5NEeE47gigPPIAHVIKDOCWsCsbCqHc3yz5l8kiO2RdfUmsTKV2KD/AiXnAw4b6pjQEP58GOg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.x || ^19.x"
+      }
+    },
+    "node_modules/@mantine/notifications": {
+      "version": "7.16.2",
+      "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-7.16.2.tgz",
+      "integrity": "sha512-U342XWiiRI1NvOlLsI6PH/pSNe0rxNClJ2w5orvjOMXvaAfDe52mhnzRmtzRxYENp06++3b/G7MjPH+466rF9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@mantine/store": "7.16.2",
+        "react-transition-group": "4.4.5"
+      },
+      "peerDependencies": {
+        "@mantine/core": "7.16.2",
+        "@mantine/hooks": "7.16.2",
+        "react": "^18.x || ^19.x",
+        "react-dom": "^18.x || ^19.x"
+      }
+    },
+    "node_modules/@mantine/store": {
+      "version": "7.16.2",
+      "resolved": "https://registry.npmjs.org/@mantine/store/-/store-7.16.2.tgz",
+      "integrity": "sha512-9dEGLosrYSePlAwhfx3CxTLcWu2M98TtuYnelAiHEdNEkyafirvZxNt4paMoFXLKR1XPm5wdjDK7bdTaE0t7Og==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^18.x || ^19.x"
@@ -1427,6 +1454,32 @@
         "win32"
       ]
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.29.0.tgz",
+      "integrity": "sha512-VWNINymdmhay3MDvWVREmRwuWLSrX3YiInKvs5L4AHRF4bAfJabLlEReE0BW/XFsBt22ff8/C8Eam/LXlF97mA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.29.0.tgz",
+      "integrity": "sha512-jaa3b3j91CplY7TPgx/Gj/e+PcOnQgYiK6c5qtp1P0ytfKM5WPc1qtXyRLE3NcYlfxS2Pcst4YGy1vUML7SjbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": "3.29.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@tanstack/eslint-plugin-query": {
       "version": "5.62.16",
       "resolved": "https://registry.npmjs.org/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.62.16.tgz",
@@ -2127,7 +2180,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -2170,6 +2222,16 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.80",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.80.tgz",
@@ -2984,6 +3046,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3240,6 +3311,17 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -3302,6 +3384,12 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/react-number-format": {
       "version": "5.4.3",
       "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.3.tgz",
@@ -3448,6 +3536,22 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",

barkmanui/package.json

@@ -13,6 +13,8 @@
     "@mantine/core": "^7.16.0",
     "@mantine/form": "^7.16.0",
     "@mantine/hooks": "^7.16.0",
+    "@mantine/notifications": "^7.16.2",
+    "@tabler/icons-react": "^3.29.0",
     "@tanstack/react-query": "^5.64.1",
     "@tanstack/react-query-devtools": "^5.64.1",
     "axios": "^1.7.9",

barkmanui/src/App.tsx

@@ -7,6 +7,9 @@ import '@mantine/core/styles.css';
 import ItemDetail from "./features/inventory/ItemDetail.tsx";
 import EditItem from "./features/inventory/EditItem.tsx";
 import {BarkHeader} from "./common/components/BarkHeader.tsx";
+import AddItem from "./features/inventory/AddItem.tsx";
+import { Notifications } from '@mantine/notifications';
+import '@mantine/notifications/styles.css';
 
 // Create a client
 const queryClient = new QueryClient()
@@ -34,12 +37,15 @@ function App() {
     return <MantineProvider defaultColorScheme="auto" theme={barkTheme}>{(
         <QueryClientProvider client={queryClient}>
             <>
+
                 <BarkHeader></BarkHeader>
+                <Notifications />
                 <Routes>
                     <Route index element={<Home/>}/>
                     <Route path="inventory" element={<InventoryList/>}/>
                     <Route path="itemDetail/:itemId" element={<ItemDetail/>}/>
                     <Route path="editItem/:itemId" element={<EditItem/>}/>
+                    <Route path="addItem" element={<AddItem/>}/>
                 </Routes>
             </>
         </QueryClientProvider>

barkmanui/src/features/inventory/AddItem.tsx

@@ -0,0 +1,99 @@
+import {Button, Group, TextInput, NumberInput, Container, Title, Flex} from '@mantine/core';
+import {useForm} from '@mantine/form';
+import {useMutation} from "@tanstack/react-query";
+import {NewItem} from "./types.ts";
+import { useNavigate} from "react-router";
+import { IconX, IconCheck } from '@tabler/icons-react';
+import { notifications } from '@mantine/notifications';
+
+function AddItem() {
+
+    const navigate = useNavigate();
+
+    const newItemForm = useForm<NewItem>({
+        mode: 'uncontrolled',
+        initialValues: {
+            name: "",
+            brand: "",
+            serialNumber: "",
+            rentalPrice: 0,
+            replacementCost: 0,
+        },
+
+        validate: {},
+    });
+
+    const updateItem = useMutation({
+        mutationFn: async (values: NewItem) => {
+
+            const result = await fetch(import.meta.env.VITE_API_URL + '/inventory', {
+                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: "Item Created",
+                    position: 'top-center',
+                });
+                navigate("/inventory");
+
+            }
+
+            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 inventory item');
+            }
+
+        }
+    })
+
+
+    return (
+        <>
+            <form onSubmit={newItemForm.onSubmit(async (values) => await
+                updateItem.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={newItemForm.key('brand')} size="md" label="Brand"
+                                   placeholder="Brand" {...newItemForm.getInputProps('brand')}/>
+                        <TextInput withAsterisk key={newItemForm.key('name')} size="md" label="Name"
+                                   placeholder="Name" {...newItemForm.getInputProps('name')}/>
+                        <TextInput size="md" key={newItemForm.key('serialNumber')} label="Serial Number"
+                                   placeholder="Serial Number"{...newItemForm.getInputProps('serialNumber')}/>
+                        <NumberInput size="md" key={newItemForm.key('rentalPrice')} label="Rental Price"
+                                     placeholder="Rental Price" {...newItemForm.getInputProps('rentalPrice')}/>
+                        <NumberInput size="md" key={newItemForm.key('replacementCost')} label="Replacement Cost"
+                                     placeholder="Replacement Cost" {...newItemForm.getInputProps('replacementCost')}/>
+
+                        <Group justify="flex-end" mt="md">
+                            <Button type="submit">Submit</Button>
+                        </Group>
+                    </Flex>
+                </Container>
+            </form>
+        </>
+    );
+}
+
+export default AddItem;

barkmanui/src/features/inventory/InventoryList.tsx

@@ -2,7 +2,7 @@ import {useQuery} from "@tanstack/react-query";
 import {InventoryItem} from "./types";
 import {Flex, Table} from '@mantine/core';
 import BarkButton from "../../common/components/BarkButton.tsx";
-import {Link} from "react-router";
+import {Link, NavLink} from "react-router";
 
 function InventoryList() {
 
@@ -37,7 +37,7 @@ function InventoryList() {
                 <p>
                     ARFF ARFF BARK BARK
                 </p>
-                <BarkButton>Add Item</BarkButton>
+                <NavLink to={'/addItem'}><BarkButton>Add Item</BarkButton></NavLink>
             </Flex>
 
 

barkmanui/src/features/inventory/types.ts

@@ -8,5 +8,12 @@ export interface InventoryItem {
     rentalPrice: number,
     replacementCost: number,
     notes: string,
-
+}
+
+export interface NewItem {
+    brand: string,
+    name: string,
+    serialNumber: string,
+    rentalPrice: number,
+    replacementCost: number,
 }