From 4f67c1cca24ac93f5e8b7a9108c028e6c2794d74 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Tue, 15 Jun 2021 15:44:20 +0530
Subject: created new Home Page
---
src/components/App.js | 7 +--
src/components/BillingPage.js | 93 -----------------------------------
src/components/Menu/HomePageMenu.js | 25 ++++++++++
src/components/Menu/HomePageMenu.scss | 19 +++++++
src/components/Pages/BillingPage.js | 93 +++++++++++++++++++++++++++++++++++
src/components/Pages/HomePage.js | 25 ++++++++++
src/components/Pages/HomePage.scss | 7 +++
7 files changed, 173 insertions(+), 96 deletions(-)
delete mode 100644 src/components/BillingPage.js
create mode 100644 src/components/Menu/HomePageMenu.js
create mode 100644 src/components/Menu/HomePageMenu.scss
create mode 100644 src/components/Pages/BillingPage.js
create mode 100644 src/components/Pages/HomePage.js
create mode 100644 src/components/Pages/HomePage.scss
(limited to 'src/components')
diff --git a/src/components/App.js b/src/components/App.js
index ceed8bd..4e6157a 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -8,14 +8,15 @@
import React from "react";
import Header from "./Header/Header";
-import BillingPage from "./BillingPage";
+import HomePage from "./Pages/HomePage";
const App = () => {
+ const showHeader = false;
return (
<>
- <Header/>
+ {showHeader && <Header/>}
<div className={"root-content"}>
- <BillingPage />
+ <HomePage />
</div>
</>
);
diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
deleted file mode 100644
index cb9e74c..0000000
--- a/src/components/BillingPage.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * 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/Menu/HomePageMenu.js b/src/components/Menu/HomePageMenu.js
new file mode 100644
index 0000000..29295bb
--- /dev/null
+++ b/src/components/Menu/HomePageMenu.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 from "react";
+import "./HomePageMenu.scss";
+
+const HomePageMenu = () => {
+ return (
+ <div className="HomePageMenu">
+ <span className="menuItem">
+ Create Invoice
+ </span>
+ <span className="menuItem">
+ Don't Create Invoice
+ </span>
+ </div>
+ )
+}
+
+export default HomePageMenu
diff --git a/src/components/Menu/HomePageMenu.scss b/src/components/Menu/HomePageMenu.scss
new file mode 100644
index 0000000..e9497ad
--- /dev/null
+++ b/src/components/Menu/HomePageMenu.scss
@@ -0,0 +1,19 @@
+@import "../../styles/theme";
+
+.HomePageMenu {
+ /*border: 1px solid green;*/
+ min-width: 20rem;
+ width: 50%;
+
+ display: grid;
+ grid-template-columns: auto auto;
+}
+
+.HomePageMenu .menuItem {
+ text-align: center;
+ font-size: $fontSize2;
+}
+
+.HomePageMenu .menuItem:hover {
+ color: $altFG;
+}
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;
+}
--
cgit v1.2.3