2 files changed, 100 insertions, 0 deletions
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;
+  }
+}