aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.js2
-rw-r--r--src/App.scss10
-rw-r--r--src/_colors.scss3
-rw-r--r--src/views/manage/manage.js60
-rw-r--r--src/views/manage/scss/management-page.scss40
5 files changed, 111 insertions, 4 deletions
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;
+ }
+}