working on the form info like date and stuff

6 files changed, 48 insertions, 13 deletions

diff --git a/src/components/Form/Document/DocumentInfoForm.tsx b/src/components/Form/Document/DocumentInfoForm.tsx
index 7f33046..6193233 100644
--- a/src/components/Form/Document/DocumentInfoForm.tsx
+++ b/src/components/Form/Document/DocumentInfoForm.tsx
@@ -6,7 +6,7 @@
  * Copyright (c) 2021 Vidhu Kant Sharma
 */
 
-import React/*, { useState }*/ from "react";
+import React, { useState } from "react";
 import { Person } from "./../../../interfaces";
 import "./../Form.scss";
 
@@ -14,14 +14,33 @@ import SelectClientForm from "./../People/SelectClientForm";
 
 interface Props {
   savedPeople: Person[]
+  invoiceNumber: number
+  setInvoiceNumber: any
 }
 
 const DocumentInfoForm: React.FC<Props> = (props) => {
+  const [invoiceNumber, setInvoiceNumber] = useState<number>(props.invoiceNumber);
   return (
     <div className={"DocumentInfoForm"}>
       <SelectClientForm 
         savedPeople={props.savedPeople}
       />
+
+      <div className={"documentInfoChild"}>
+        <label>
+          Invoice Number:
+            <input className={"smallInputBox"} type="number" step="0.0" value={invoiceNumber} onInput={
+              (event: React.FormEvent<HTMLInputElement>) => setInvoiceNumber(parseInt(event.currentTarget.value))
+            } required />
+        </label>
+
+        <label>
+          Invoice Date: <span>wtf do i do</span>
+        </label>
+      </div>
+
+      <div className={"documentInfoChild"}>
+      </div>
     </div>
   );
 }
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 6a9e747..a850309 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -120,6 +120,10 @@ input {
 
 .DocumentInfoForm {
   @include formPane();
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
   width: 100%;
   min-height: 10rem;
   margin-bottom: 1.5rem;
@@ -148,9 +152,6 @@ input {
   font-size: $fontSize1;
 }*/
 
-.MetaInfoForm {
-  width: 60%;
-}
 
 @media only screen and (max-device-width: 480px) {
   .threePaneForm {
diff --git a/src/components/Menu/HomePageMenu.tsx b/src/components/Menu/HomePageMenu.tsx
index db0938a..645044e 100644
--- a/src/components/Menu/HomePageMenu.tsx
+++ b/src/components/Menu/HomePageMenu.tsx
@@ -8,7 +8,7 @@
 
 import React from "react";
 import { Link } from "react-router-dom";
-import "./HomePageMenu.scss";
+import "./Menu.scss";
 
 const HomePageMenu: React.FC = () => {
 	return (
diff --git a/src/components/Form/Document/MetaInfoForm.tsx b/src/components/Menu/InvoiceInfoMenu.tsx
index bcddad6..2c56f7e 100644
--- a/src/components/Form/Document/MetaInfoForm.tsx
+++ b/src/components/Menu/InvoiceInfoMenu.tsx
@@ -7,15 +7,23 @@
 */
 
 import React from "react";
-import "./../Form.scss";
+//import "./../Form.scss";
 
-const MetaInfoForm: React.FC = () => {
+const InvoiceInfoMenu: React.FC = () => {
   return (
-    <div className={"MetaInfoForm"}>
-      <form>
-      </form>
+    <div className={"InvoiceInfoMenu"}>
+      c
+      o
+      m
+      i
+      n
+      g
+      s
+      o
+      o
+      n
     </div>
   );
 }
 
-export default MetaInfoForm;
+export default InvoiceInfoMenu;
diff --git a/src/components/Menu/HomePageMenu.scss b/src/components/Menu/Menu.scss
index bc46e08..cf9f7aa 100644
--- a/src/components/Menu/HomePageMenu.scss
+++ b/src/components/Menu/Menu.scss
@@ -19,3 +19,7 @@
 .HomePageMenu .menuItem:hover {
   color: $altFG;
 }
+
+.InvoiceInfoMenu {
+  width: 60%;
+}
diff --git a/src/components/Pages/BillingPage.tsx b/src/components/Pages/BillingPage.tsx
index bf37bd3..c88435b 100644
--- a/src/components/Pages/BillingPage.tsx
+++ b/src/components/Pages/BillingPage.tsx
@@ -17,7 +17,7 @@ import RegisterItemForm from "./../Form/Items/RegisterItemForm";
 import RegisterPersonForm from "./../Form/People/RegisterPersonForm";
 
 import DocumentInfoForm from "./../Form/Document/DocumentInfoForm";
-import MetaInfoForm from "./../Form/Document/MetaInfoForm";
+import InvoiceInfoMenu from "./../Menu/InvoiceInfoMenu";
 
 import ItemsDisplay from "./../Display/ItemsDisplay";
 import SummaryDisplay from "./../Display/SummaryDisplay"; 
@@ -28,6 +28,7 @@ const BillingPage: React.FC = () => {
   const [registerItemFormVisibility, setRegisterItemFormVisibility] = useState<boolean>(false);
   const [registerPersonFormVisibility, setRegisterPersonFormVisibility] = useState<boolean>(false);
   const [items, setItems] = useState<Item[]>([]);
+  const [invoiceNumber, setInvoiceNumber] = useState<number>(1234); // get data from backend
 
   const getRegisteredItems = () =>
     axios.get(`/api/items/get-all`)
@@ -70,6 +71,8 @@ const BillingPage: React.FC = () => {
 
       <DocumentInfoForm 
         savedPeople={savedPeople}
+        invoiceNumber={invoiceNumber}
+        setInvoiceNumber={setInvoiceNumber}
       />
 
       <AddNewItemForm 
@@ -86,7 +89,7 @@ const BillingPage: React.FC = () => {
       />
 
       <div className={"BillingPageFlex"}>
-        <MetaInfoForm/>
+        <InvoiceInfoMenu/>
         <SummaryDisplay items={items}/>
       </div>
     </>