3 files changed, 125 insertions, 0 deletions
diff --git a/src/components/Pages/BillingPage.js b/src/components/Pages/BillingPage.js
new file mode 100644
index 0000000..cb9e74c
--- /dev/null
+++ b/src/components/Pages/BillingPage.js
@@ -0,0 +1,93 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
+import AddNewItemForm from "./Form/Items/AddNewItemForm";
+import RegisterItemForm from "./Form/Items/RegisterItemForm";
+
+import RegisterPersonForm from "./Form/People/RegisterPersonForm";
+
+import DocumentInfoForm from "./Form/Document/DocumentInfoForm";
+import MetaInfoForm from "./Form/MetaInfoForm";
+
+import ItemsDisplay from "./Display/ItemsDisplay";
+import SummaryDisplay from "./Display/SummaryDisplay"; 
+
+const BillingPage = () => {
+  const [savedItems, getSavedItems] = useState([]);
+  const [savedPeople, getSavedPeople] = useState([]);
+  const [registerItemFormVisibility, setRegisterItemFormVisibility] = useState(false);
+  const [registerPersonFormVisibility, setRegisterPersonFormVisibility] = useState(false);
+  const [items, setItems] = useState([]);
+
+  const getRegisteredItems = () =>
+    axios.get(`/api/items/get-all`)
+      .then((res) => getSavedItems(res.data))
+      .catch((res) => console.log(res));
+
+  const getRegisteredPeople = () => 
+    axios.get(`/api/people/get-all`)
+      .then((res) => getSavedPeople(res.data))
+      .catch((res) => console.log(res));
+
+  // get data from server on startup
+  useEffect(() => {
+    getRegisteredItems();
+    getRegisteredPeople();
+  }, []);
+  // TODO: to be handled by backend
+  const defGSTValue = 18;
+
+  // update the items from AddNewItemForm
+  const getItems = (item) => setItems([...items, item]);
+
+  return (
+    <>
+      {registerItemFormVisibility &&
+        <RegisterItemForm 
+          defGSTValue={defGSTValue}
+          updateItemsList={getRegisteredItems} 
+          setVisibility={setRegisterItemFormVisibility}
+        />
+      }
+
+      {registerPersonFormVisibility &&
+        <RegisterPersonForm 
+          updateItemsList={getRegisteredItems} 
+          setVisibility={setRegisterPersonFormVisibility}
+        />
+      }
+
+      <DocumentInfoForm 
+        savedPeople={savedPeople}
+      />
+
+      <AddNewItemForm 
+        savedItems={savedItems} 
+        addItem={getItems} 
+        defGSTValue={defGSTValue}
+        registerItemFormVisibility={setRegisterItemFormVisibility}
+        registerPersonFormVisibility={setRegisterPersonFormVisibility}
+      />
+
+      <ItemsDisplay 
+        items={items} 
+        defGSTValue={defGSTValue}
+      />
+
+      <div className={"BillingPageFlex"}>
+        <MetaInfoForm/>
+        <SummaryDisplay items={items}/>
+      </div>
+    </>
+  );
+}
+
+export default BillingPage;
diff --git a/src/components/Pages/HomePage.js b/src/components/Pages/HomePage.js
new file mode 100644
index 0000000..face5fd
--- /dev/null
+++ b/src/components/Pages/HomePage.js
@@ -0,0 +1,25 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+import React/*, { useState, useEffect } */from "react";
+import "./HomePage.scss"
+//import axios from "axios";
+
+//import BillingPage from "./BillingPage"
+import HomePageMenu from "./../Menu/HomePageMenu"
+
+const HomePage = () => {
+  return (
+    <div className="HomePage">
+      <h1 className={"welcomeMessage"}>Welcome To OpenBills</h1>
+      <HomePageMenu />
+    </div>
+  );
+}
+
+export default HomePage;
diff --git a/src/components/Pages/HomePage.scss b/src/components/Pages/HomePage.scss
new file mode 100644
index 0000000..4e06e11
--- /dev/null
+++ b/src/components/Pages/HomePage.scss
@@ -0,0 +1,7 @@
+.HomePage {
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}