From 4f67c1cca24ac93f5e8b7a9108c028e6c2794d74 Mon Sep 17 00:00:00 2001 From: MikunoNaka 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 ( <> -
+ {showHeader &&
}
- +
); 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 && - - } - - {registerPersonFormVisibility && - - } - - - - - - - -
- - -
- - ); -} - -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 ( +
+ + Create Invoice + + + Don't Create Invoice + +
+ ) +} + +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 && + + } + + {registerPersonFormVisibility && + + } + + + + + + + +
+ + +
+ + ); +} + +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 ( +
+

Welcome To OpenBills

+ +
+ ); +} + +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