added a manage 'menu' page at /manage

6 files changed, 111 insertions, 4 deletions

diff --git a/public/logo.png b/public/logo.png
index 8be973c..25200ed 100644
--- a/public/logo.png
+++ b/public/logo.png
diff --git a/src/App.js b/src/App.js
index 7ea7ca9..ffd2344 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,6 +19,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import './App.scss';
 import Navbar from './components/navbar/navbar';
 import HomePage from './views/homepage';
+import ManagementPage from './views/manage/manage';
 import ManageItemsPage from './views/manage/items';
 import ManageClientsPage from './views/manage/clients';
 import ManageBrandsPage from './views/manage/brands';
@@ -30,6 +31,7 @@ const App = () => {
       <main>
         <Routes>
           <Route exact path="/" element={<HomePage/>}/>
+          <Route exact path="/manage" element={<ManagementPage/>}/>
           <Route exact path="/manage/items" element={<ManageItemsPage/>}/>
           <Route exact path="/manage/clients" element={<ManageClientsPage/>}/>
           <Route exact path="/manage/brands" element={<ManageBrandsPage/>}/>
diff --git a/src/App.scss b/src/App.scss
index 6215663..23ee270 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -50,11 +50,13 @@ a {
     text-decoration: none;
 }
 
+$selectionColor: rgba($primaryAccentColor, 0.9)
+
 ::selection {
-  color: $fgColor;
-  background: $primaryAccentColor;
+  color: $darkgray;
+  background: $selectionColor;
 }
 ::-moz-selection {
-  color: $fgColor;
-  background: $primaryAccentColor;
+  color: $darkgray;
+  background: $selectionColor;
 }
diff --git a/src/_colors.scss b/src/_colors.scss
index 0eb1854..08a700c 100644
--- a/src/_colors.scss
+++ b/src/_colors.scss
@@ -20,10 +20,13 @@ $secondaryAccentColor: #d0afff;
 
 $backgroundColor: #282a36;
 $altBackgroundColor: #383a59;
+//$altBackgroundColor: #282a36;
+//$backgroundColor: #232627;
 $linkColor: $primaryAccentColor;
 
 $white: #f8f8f2;
 $gray: lightgray;
+$darkgray: #232627;
 $black: black;
 
 $warningColor: #ed4683;
diff --git a/src/views/manage/manage.js b/src/views/manage/manage.js
new file mode 100644
index 0000000..293e69f
--- /dev/null
+++ b/src/views/manage/manage.js
@@ -0,0 +1,60 @@
+/* OpenBills-web - Web based libre billing software
+ * Copyright (C) 2022  Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
+
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import './scss/management-page.scss';
+import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUser, faFileInvoice, faCartShopping, faIndustry } from '@fortawesome/free-solid-svg-icons'
+const ManagementPage = () => {
+
+  return (
+    <>
+      <h1>Manage OpenBills Data</h1>
+      <p>
+        Here you can add/modify/delete OpenBills data (clients, invoices, etc)
+      </p>
+      <div className={"manage-links"}>
+        <Link to="/manage/items">
+          <span className={"content"}>
+            <span className={"icon"}><FontAwesomeIcon icon={faCartShopping}/></span>
+            <span className={"text"}>Edit Items</span>
+          </span>
+        </Link>
+        <Link to="/manage/clients">
+          <span className={"content"}>
+            <span className={"icon"}><FontAwesomeIcon icon={faUser}/></span>
+            <span className={"text"}>Edit Clients</span>
+          </span>
+        </Link>
+        <Link to="/manage/brands">
+          <span className={"content"}>
+            <span className={"icon"}><FontAwesomeIcon icon={faIndustry}/></span>
+            <span className={"text"}>Edit Brands</span>
+          </span>
+        </Link>
+        <Link to="/manage/invoices">
+          <span className={"content"}>
+            <span className={"icon"}><FontAwesomeIcon icon={faFileInvoice}/></span>
+            <span className={"text"}>Edit Invoices</span>
+          </span>
+        </Link>
+      </div>
+    </>
+  );
+}
+
+export default ManagementPage;
diff --git a/src/views/manage/scss/management-page.scss b/src/views/manage/scss/management-page.scss
index 656d224..f61b62d 100644
--- a/src/views/manage/scss/management-page.scss
+++ b/src/views/manage/scss/management-page.scss
@@ -22,3 +22,43 @@
 hr {
   margin: 0.8rem auto 1rem auto;
 }
+
+.manage-links {
+  max-width: 40rem;
+  height: 25rem;
+  margin: 7rem auto auto auto;
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: center;
+
+  a {
+    color: $fgColor;
+    height: 10rem;
+    width: 15rem;
+    border: 1px solid $secondaryAccentColor;
+    display: inline-block;
+    margin: 0;
+    transition: transform 0.2s, color 0.4s, border 0.2s;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+      margin-top: -0.8rem;
+
+      .icon {font-size: 5rem;}
+    }
+  }
+
+  a:hover {
+    transform: scale(1.05, 1.05);
+    color: $primaryAccentColor;
+    border: 1px solid $primaryAccentColor;
+  }
+}