2 files changed, 54 insertions, 10 deletions

diff --git a/src/components/Form/Items/AddNewItemForm.tsx b/src/components/Form/Items/AddNewItemForm.tsx
index 5be2eea..b810964 100644
--- a/src/components/Form/Items/AddNewItemForm.tsx
+++ b/src/components/Form/Items/AddNewItemForm.tsx
@@ -28,13 +28,17 @@ const AddNewItemForm: React.FC<Props> = (props) => {
   const [itemGSTPercentage, setItemGSTPercentage] = useState<number>(props.defGSTValue);
   const [itemQTYValue, setItemQTYValue] = useState<number>(1);
   const [itemHSNValue, setItemHSNValue] = useState<string>("");
+  const [itemBrand, setItemBrand] = useState<string>("");
+  const [itemCategory, setItemCategory] = useState<string>("");
 
   // default item object
   const defaultItem: any = {
     Description: "",
     UnitPrice: 0.00,
     TotalGST: props.defGSTValue,
-    HSN: ""
+    HSN: "",
+    Brand: "",
+    Category: ""
   }
 
   // store the current item to easily reset a value to the default one
@@ -50,12 +54,15 @@ const AddNewItemForm: React.FC<Props> = (props) => {
   const emptyItemNames: string[] = [enterItemNamePrompt, registerItemPrompt, ""];
 
   // set description and price if match found in DB
-  const applyItemInfo = (i: any) => {
+  const applyItemInfo = (i: Item) => {
     setItemDescValue(i.Description);
     setItemPriceValue(i.UnitPrice);
     setItemHSNValue(i.HSN);
     setItemGSTPercentage(i.TotalGST);
-    setCurrentItem(i)
+    setItemBrand(i.Brand);
+    setItemCategory(i.Category);
+    console.log(i);
+    setCurrentItem(i);
   }
 
   // check the item name value and do stuff accordingly
@@ -63,7 +70,7 @@ const AddNewItemForm: React.FC<Props> = (props) => {
     (props.savedItems === null || itemName === registerItemPrompt)
       ? props.registerItemFormVisibility(true)
       : props.savedItems.some((i) => 
-        itemName === i.Model.toLowerCase() && applyItemInfo(i))
+        itemName === i.Model.toLowerCase() && applyItemInfo(i));
 
   const resetAllValues = () => {
     setItemNameValue("");
@@ -107,7 +114,10 @@ const AddNewItemForm: React.FC<Props> = (props) => {
             // this also checks if igst applies or not
             SGST: inState && totalGSTValue / 2,
             CGST: inState && totalGSTValue / 2,
-            IGST: inState || totalGSTValue
+            IGST: inState || totalGSTValue,
+
+            Brand:         itemBrand,
+            Category:      itemCategory
           }
 
           props.addItem(newInvoiceItem);
@@ -150,6 +160,26 @@ const AddNewItemForm: React.FC<Props> = (props) => {
                 />
               </span>
           </label>
+
+          <label>
+            Brand: 
+              <input className={"wideInputBox"} type="text" value={itemBrand} 
+                onInput={
+                  (event: React.FormEvent<HTMLInputElement>) => 
+                    setItemBrand(event.currentTarget.value)
+                } 
+              />
+          </label>
+
+          <label>
+            Category: 
+              <input className={"wideInputBox"} type="text" value={itemCategory} 
+                onInput={
+                  (event: React.FormEvent<HTMLInputElement>) => 
+                    setItemCategory(event.currentTarget.value)
+                } 
+              />
+          </label>
         </div>
 
         <div className={"widePane formPane"}>
diff --git a/src/components/Form/Items/RegisterItemForm.tsx b/src/components/Form/Items/RegisterItemForm.tsx
index 886628c..7e9f67b 100644
--- a/src/components/Form/Items/RegisterItemForm.tsx
+++ b/src/components/Form/Items/RegisterItemForm.tsx
@@ -9,14 +9,14 @@
 // TODO: Code isn't tested properly
 // I'd be surprised if it < 10 bugs
 
-import React, { useState } from "react";
+import React, { useState, Dispatch, SetStateAction } from "react";
 import "./../Form.scss";
 import { NewItem } from "./../../../interfaces"
 import axios from "axios";
 
 interface props {
   defGSTValue: number
-  setVisibility: any // this component's visibility
+  setVisibility: Dispatch<SetStateAction<boolean>> // this component's visibility
   updateItemsList: () => Promise<void>
 }
 
@@ -26,8 +26,8 @@ const RegisterItemForm: React.FC<props> = (props) => {
   const [newItemPrice, setNewItemPrice] = useState<number>(0.00);
   const [newItemHSN, setNewItemHSN] = useState<string>("");
   const [newItemGST, setNewItemGST] = useState<number>(props.defGSTValue);
-  // const [newItemBrand, setNewItemBrand] = useState("");
-  // const [newItemType, setNewItemType] = useState("");
+  const [newItemBrand, setNewItemBrand] = useState<string>("");
+  const [newItemCategory, setNewItemCategory] = useState<string>("");
 
   const hideSelf = () => props.setVisibility(false);
 
@@ -42,7 +42,9 @@ const RegisterItemForm: React.FC<props> = (props) => {
       Description: newItemDesc,
       UnitPrice: newItemPrice,
       HSN: newItemHSN,
-      TotalGST: newItemGST
+      TotalGST: newItemGST,
+      Brand: newItemBrand,
+      Category: newItemCategory
     }
 
     // TODO: show confirmation before being invisible 
@@ -79,7 +81,19 @@ const RegisterItemForm: React.FC<props> = (props) => {
                   } />
                 </label>
 
+                <label>
+                  Brand: <input className={"wideInputBox"} type="text" value={newItemBrand} onChange={
+                    (event) => setNewItemBrand(event.target.value)
+                  } required />
+                </label>
+
+                <label>
+                  Category: <input className={"wideInputBox"} type="text" value={newItemCategory} onChange={
+                    (event) => setNewItemCategory(event.target.value)
+                  } />
+                </label>
               </div>
+
               <div className={"widePane formPane"}>
                 <label>
                   Price: <input className={"smallInputBox"} type="number" min="0.00" step="0.001" value={newItemPrice} onChange={