From 708862c94bd119ca7e86540fbc68595a6256c9e3 Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
Date: Mon, 26 Sep 2022 23:57:18 +0530
Subject: created very basic client editor

---
 src/App.js                                      |   2 +
 src/App.scss                                    |   5 ++
 src/classes/client.js                           |  66 +++++++++++++++
 src/components/editors/address-editor.js        |  87 ++++++++++++++++++++
 src/components/editors/client-editor.js         |  97 ++++++++++++++++++++++
 src/components/editors/contact-editor.js        |  66 +++++++++++++++
 src/components/editors/item-editor.js           |   2 +-
 src/components/editors/scss/_editor.scss        | 105 ++++++++++++++++++++++++
 src/components/editors/scss/address-editor.scss |  65 +++++++++++++++
 src/components/editors/scss/client-editor.scss  |  28 +++++++
 src/components/editors/scss/colors.scss         |  24 ++++++
 src/components/editors/scss/contact-editor.scss |  51 ++++++++++++
 src/components/editors/scss/item-editor.scss    |  76 ++---------------
 src/components/tables/client-table.js           |  82 ++++++++++++++++++
 src/components/tables/item-table.js             |   6 +-
 src/views/manage/clients.js                     |  48 +++++++++++
 src/views/manage/items.js                       |   4 +-
 src/views/manage/scss/management-page.scss      |   4 +
 18 files changed, 748 insertions(+), 70 deletions(-)
 create mode 100644 src/classes/client.js
 create mode 100644 src/components/editors/address-editor.js
 create mode 100644 src/components/editors/client-editor.js
 create mode 100644 src/components/editors/contact-editor.js
 create mode 100644 src/components/editors/scss/_editor.scss
 create mode 100644 src/components/editors/scss/address-editor.scss
 create mode 100644 src/components/editors/scss/client-editor.scss
 create mode 100644 src/components/editors/scss/colors.scss
 create mode 100644 src/components/editors/scss/contact-editor.scss
 create mode 100644 src/components/tables/client-table.js
 create mode 100644 src/views/manage/clients.js
 create mode 100644 src/views/manage/scss/management-page.scss

(limited to 'src')

diff --git a/src/App.js b/src/App.js
index d75d8e5..91beeb6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,6 +18,7 @@
 import './App.scss';
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import ManageItemsPage from './views/manage/items';
+import ManageClientsPage from './views/manage/clients';
 
 const App = () => {
   return (
@@ -25,6 +26,7 @@ const App = () => {
       <main>
         <Routes>
           <Route exact path="/manage/items" element={<ManageItemsPage/>}/>
+          <Route exact path="/manage/clients" element={<ManageClientsPage/>}/>
           <Route path="*" element={<h1>404</h1>}/>
         </Routes>
       </main>
diff --git a/src/App.scss b/src/App.scss
index 81bde15..4955af6 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -39,3 +39,8 @@ main {
     padding: 0.7rem 0.5rem;
     box-sizing: border-box;
 }
+
+hr {
+    border: none;
+    border-top: 1px solid #bd93f9;
+}
diff --git a/src/classes/client.js b/src/classes/client.js
new file mode 100644
index 0000000..524d0ce
--- /dev/null
+++ b/src/classes/client.js
@@ -0,0 +1,66 @@
+/* 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 axios from "axios";
+
+export class Address {
+  constructor() {
+    this.Text = "";
+    this.City = "";
+    this.State = "";
+    this.PostalCode = "";
+    this.Country = "";
+  }
+}
+
+export class Contact {
+  constructor() {
+    this.Name = "";
+    this.Phones = [];
+    this.Emails = [];
+    this.Website = "";
+  }
+}
+
+export class Client {
+  constructor() {
+    this.Id = null;
+    this.Name = "";
+    this.Contact = new Contact();
+    this.GSTIN = "";
+    this.BillingAddress = new Address();
+    this.ShippingAddress = [];
+  }
+}
+
+export const saveClient = (item, ok, fail) => {
+  axios.post("/client/new", item)
+    .then(res => { console.log(res);ok()})
+    .catch((err) => fail())
+}
+
+export const deleteClient = (id, ok, fail) => {
+  axios.delete(`/client/${id}`)
+    .then(res => ok())
+    .catch((err) => fail())
+}
+
+export const getAllClients = (ok, fail) => {
+  axios.get("/client/all")
+    .then(res => ok(res.data))
+    .catch(err => fail())
+}
diff --git a/src/components/editors/address-editor.js b/src/components/editors/address-editor.js
new file mode 100644
index 0000000..d2b015f
--- /dev/null
+++ b/src/components/editors/address-editor.js
@@ -0,0 +1,87 @@
+/* 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 { Address } from './../../classes/client';
+import './scss/address-editor.scss';
+
+import { useState } from 'react';
+
+const AddressEditor = (props) => {
+  const [country, setCountry] = useState("");
+  const [state, setState] = useState("");
+  const [city, setCity] = useState("");
+  const [address, setAddress] = useState("");
+  const [postalCode, setPostalCode] = useState("");
+
+  return (
+    <div className={"address-editor"}>
+      <p className={"heading"}>{props.heading}</p>
+
+      <div className={"labels-wrapper"}>
+        <div>
+          <label>
+            Country:
+            <input
+              type="text" name="name"
+              value={country} onChange={(e) => setCountry(e.target.value)} />
+          </label>
+
+          <label>
+            State:
+            <input
+              type="text" name="name"
+              value={state} onChange={(e) => setState(e.target.value)} />
+          </label>
+
+          <label>
+            City:
+            <input
+              type="text" name="name"
+              value={city} onChange={(e) => setCity(e.target.value)} />
+          </label>
+        </div>
+
+        <div>
+          <label>
+            Address:
+            <textarea
+              type="text" name="name"
+              value={address} onChange={(e) => setAddress(e.target.value)} />
+          </label>
+
+          <label>
+            Postal Code:
+            <input
+              type="text" name="name"
+              value={postalCode} onChange={(e) => setPostalCode(e.target.value)} />
+          </label>
+        </div>
+      </div>
+      {props.isBillingAddress &&
+        <label className={"checkbox-label"}>
+          <input
+            type="checkbox"
+            checked={props.billingAddressIsShipping}
+            onChange={props.callback()} />
+          Shipping address same as billing address
+        </label>
+      }
+    </div>
+  );
+}
+
+export default AddressEditor;
diff --git a/src/components/editors/client-editor.js b/src/components/editors/client-editor.js
new file mode 100644
index 0000000..eccd9e8
--- /dev/null
+++ b/src/components/editors/client-editor.js
@@ -0,0 +1,97 @@
+/* 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 { Client, saveClient } from './../../classes/client';
+import AddressEditor from './address-editor';
+import ContactEditor from './contact-editor';
+import './scss/client-editor.scss';
+
+import { useState } from 'react';
+
+const ClientEditor = (props) => {
+  const [name, setName] = useState("");
+  const [GSTIN, setGSTIN] = useState([]);
+  const [shipToBillingAddress, setShipToBillingAddress] = useState(true);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const client = new Client();
+    client.Name = name;
+    client.GSTIN = GSTIN;
+
+    // TODO: Save is for new items. implement modification too
+    saveClient(client, handleSuccess, handleFail);
+  }
+
+  const handleSuccess = () => {
+    clearAll();
+    props.callback();
+  }
+
+  const handleFail = () => {
+    alert("fail");
+  }
+
+  const clearAll = () => {
+    setName("");
+    setGSTIN("")
+  }
+
+  const handleCancel = () => {
+    // TODO: hide this component or something
+    clearAll();
+  }
+
+  return (
+    <div className={"editor-wrapper"}>
+      <p>{props.heading}</p>
+      <form onSubmit={handleSubmit} className={"editor client-editor"}>
+        <div className={"top"}>
+          <label>
+            Client Name:
+            <input
+              type="text" name="name"
+              value={name} onChange={(e) => setName(e.target.value)} />
+          </label>
+
+          <label>
+            GSTIN:
+            <input
+              type="text" name="GSTIN"
+              value={GSTIN} onChange={(e) => setGSTIN(e.target.value)} />
+          </label>
+        </div>
+
+        <ContactEditor heading={"Contact Details"}/>
+        <AddressEditor
+          heading={"Billing Address"}
+          isBillingAddress={true}
+          billingAddressIsShipping={shipToBillingAddress}
+          callback={setShipToBillingAddress} />
+
+        <span className={"buttons"}>
+          <input type="button" value="Clear" onClick={clearAll}/>
+          <input type="button" value="Cancel" onClick={handleCancel}/>
+          <input type="submit" value="Save" />
+        </span>
+      </form>
+    </div>
+  );
+}
+
+export default ClientEditor;
diff --git a/src/components/editors/contact-editor.js b/src/components/editors/contact-editor.js
new file mode 100644
index 0000000..325f4f4
--- /dev/null
+++ b/src/components/editors/contact-editor.js
@@ -0,0 +1,66 @@
+/* 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 { Contact } from './../../classes/client';
+import './scss/contact-editor.scss';
+
+import { useState } from 'react';
+
+const ContactEditor = (props) => {
+  const [name, setName] = useState("");
+  const [phones, setPhones] = useState("");
+  const [emails, setEmails] = useState("");
+  const [website, setWebsite] = useState("");
+
+  return (
+    <div className={"contact-editor"}>
+      <p className={"heading"}>{props.heading}</p>
+
+      <div className={"labels-wrapper"}>
+        <label>
+          Contact Name:
+          <input
+            type="text" name="name"
+            value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+
+        <label>
+          Website:
+          <input
+            type="text" name="name"
+            value={website} onChange={(e) => setWebsite(e.target.value)} />
+        </label>
+
+        <label>
+          Phone:
+          <textarea
+            type="text" name="name"
+            value={phones} onChange={(e) => setPhones(e.target.value)} />
+        </label>
+
+        <label>
+          E-mail:
+          <textarea
+            type="text" name="name"
+            value={emails} onChange={(e) => setEmails(e.target.value)} />
+        </label>
+      </div>
+    </div>
+  );
+}
+
+export default ContactEditor;
diff --git a/src/components/editors/item-editor.js b/src/components/editors/item-editor.js
index af505ac..19fa7e2 100644
--- a/src/components/editors/item-editor.js
+++ b/src/components/editors/item-editor.js
@@ -96,7 +96,7 @@ const ItemEditor = (props) => {
 
   return (
     <div className={"editor-wrapper"}>
-      <p>Add New Item</p>
+      <p>{props.heading}</p>
       <form onSubmit={handleSubmit} className={"editor"}>
         <label>
           Product/Service:
diff --git a/src/components/editors/scss/_editor.scss b/src/components/editors/scss/_editor.scss
new file mode 100644
index 0000000..1ca7067
--- /dev/null
+++ b/src/components/editors/scss/_editor.scss
@@ -0,0 +1,105 @@
+/* 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 "colors";
+
+@mixin label {
+    label {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+        max-width: 24rem;
+        width: 90%;
+        padding: 0.3rem 0.1rem;
+        border-bottom: 1px dotted $secondaryAccentColor;
+
+        select,input {
+            padding: 0.2rem;
+            max-width: 13rem;
+            width: 100%;
+            box-sizing: border-box;
+            background-color: $inputBackgroundColor;
+            border: 1px solid $primaryAccentColor;
+            color: $fgColor;
+            border-radius: 4px;
+            outline: 0;
+            font-size: 0.8rem;
+        }
+        textarea {
+            background-color: $inputBackgroundColor;
+            color: $fgColor;
+            outline: 0;
+            border: 1px solid $primaryAccentColor;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font-size: 0.8rem;
+        }
+    }
+}
+
+.editor-wrapper {
+    width: 100%;
+    margin: auto;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    p {
+        text-align: center;
+        font-weight: bold;
+        font-size: 1.7rem;
+        color: $primaryAccentColor;
+    }
+}
+
+@mixin editor {
+    .editor {
+        padding-bottom: 2.5rem;
+        margin: auto;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+        align-items: center;
+        min-width: 90%;
+        @include label;
+
+        .buttons {
+            position: absolute;
+            display: flex;
+            justify-content: space-between;
+            width: 13.5rem;
+            input {
+                padding: 0.2rem 0;
+                width: 4rem;
+                background-color: $inputBackgroundColor;
+                border: 1px solid $primaryAccentColor;
+                color: $fgColor;
+                border-radius: 4px;
+                transition: background-color 0.4s, color 0.4s;
+            }
+            input:hover {
+                background-color: $primaryAccentColor;
+                color: $fgColorAlt;
+            }
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+        }
+    }
+}
diff --git a/src/components/editors/scss/address-editor.scss b/src/components/editors/scss/address-editor.scss
new file mode 100644
index 0000000..49b0a0a
--- /dev/null
+++ b/src/components/editors/scss/address-editor.scss
@@ -0,0 +1,65 @@
+/* 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 "colors";
+@import "editor";
+
+.address-editor {
+    min-height: 18rem;
+    .heading {
+      font-size: 1.1rem;
+      color: $primaryAccentColor;
+      font-weight: bold;
+      align: center;
+    }
+
+    .checkbox-label {
+        border: none;
+        max-width: none;
+        justify-content: left;
+        input {
+            display: inline;
+            width: 1.4rem;
+        }
+    }
+
+    .labels-wrapper {
+        @include label;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+
+        div {
+            width: 50%;
+            max-width: 20rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            input, textarea {
+                width: 100%;
+                max-width: none;
+                margin-top: 0.2rem;
+            }
+            textarea {
+                min-height: 6rem;
+                max-height: 6rem;
+                resize: none;
+            }
+        }
+    }
+}
diff --git a/src/components/editors/scss/client-editor.scss b/src/components/editors/scss/client-editor.scss
new file mode 100644
index 0000000..52b7189
--- /dev/null
+++ b/src/components/editors/scss/client-editor.scss
@@ -0,0 +1,28 @@
+/* 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 "editor";
+
+.client-editor {
+    max-width: 90%;
+    justify-content: space-around;
+    .top {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+    }
+}
diff --git a/src/components/editors/scss/colors.scss b/src/components/editors/scss/colors.scss
new file mode 100644
index 0000000..4e5b1c2
--- /dev/null
+++ b/src/components/editors/scss/colors.scss
@@ -0,0 +1,24 @@
+/* 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/>.
+ */
+
+$primaryAccentColor: #bd93f9;
+$secondaryAccentColor: #d0afff;
+
+$fgColor: white;
+$fgColorAlt: black;
+
+$inputBackgroundColor: #00000000;
diff --git a/src/components/editors/scss/contact-editor.scss b/src/components/editors/scss/contact-editor.scss
new file mode 100644
index 0000000..61e0ceb
--- /dev/null
+++ b/src/components/editors/scss/contact-editor.scss
@@ -0,0 +1,51 @@
+/* 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 "colors";
+@import "editor";
+
+@include editor;
+.contact-editor {
+  width: 90%;
+  max-width: 30rem;
+  min-height: 18rem;
+
+  .heading {
+    font-size: 1.1rem;
+    color: $primaryAccentColor;
+    font-weight: bold;
+    text-align: center;
+  }
+  .labels-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-wrap: wrap;
+
+    label {
+      margin: 0.2rem 0;
+      textarea {
+        min-height: 3rem;
+        max-height: 3rem;
+        resize: none;
+        width: 100%;
+        max-width: 13rem;
+        margin-top: 0.2rem;
+      }
+    }
+  }
+}
diff --git a/src/components/editors/scss/item-editor.scss b/src/components/editors/scss/item-editor.scss
index 968795a..8f60ec7 100644
--- a/src/components/editors/scss/item-editor.scss
+++ b/src/components/editors/scss/item-editor.scss
@@ -15,74 +15,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-.editor-wrapper {
-    width: 100%;
-    margin: auto;
-    padding: 0;
-    margin: 0;
-    position: relative;
-    p {
-        text-align: center;
-        font-weight: bold;
-        font-size: 1.7rem;
-        color: #bd93f9;
-    }
-}
-
-.editor {
-    padding-bottom: 2.5rem;
-    margin: auto;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    align-items: center;
-    min-width: 90%;
+@import "editor";
 
-    label {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        align-items: center;
-        max-width: 24rem;
-        width: 90%;
-        padding: 0.3rem 0.1rem;
-        border-bottom: 1px dotted #d0afff;
-
-        select,input {
-            padding: 0.2rem;
-            max-width: 13rem;
-            width: 90%;
-            box-sizing: border-box;
-            background-color: #00000000;
-            border: 1px solid #bd93f9;
-            color: white;
-            border-radius: 4px;
-            outline: 0;
-        }
+.editor-wrapper {
+    // hide up/down arrows from number input
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
     }
-
-    .buttons {
-        position: absolute;
-        display: flex;
-        justify-content: space-between;
-        width: 13.5rem;
-        input {
-            padding: 0.2rem 0;
-            width: 4rem;
-            background-color: #00000000;
-            border: 1px solid #bd93f9;
-            color: white;
-            border-radius: 4px;
-            transition: background-color 0.4s, color 0.4s;
-        }
-        input:hover {
-            background-color: #bd93f9;
-            color: black;
-        }
-        bottom: 0;
-        left: 0;
-        right: 0;
-        margin: auto;
+    input[type=number] {
+        -moz-appearance: textfield;
     }
 }
diff --git a/src/components/tables/client-table.js b/src/components/tables/client-table.js
new file mode 100644
index 0000000..fda999d
--- /dev/null
+++ b/src/components/tables/client-table.js
@@ -0,0 +1,82 @@
+/* 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/table.scss';
+import { deleteItem } from './../../classes/item';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons'
+
+const ClientTable = (props) => {
+  const handleEdit = (i) => {
+    alert("editing coming soon")
+  }
+
+  const handleDelete = (i) => {
+    // TODO: add confirmation prompt
+    deleteItem(i.Id, handleDelSuccess, handleDelFail);
+  }
+
+  const handleDelSuccess = () => {
+    props.refresh();
+  }
+
+  const handleDelFail = () => {
+    alert("fail")
+  }
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>S. No</th>
+          <th>Name</th>
+          <th>Description</th>
+          <th>Brand Name</th>
+          <th>UOM</th>
+          <th>HSN</th>
+          <th>Unit Price</th>
+          <th>GST %</th>
+          <th>Min Qty</th>
+          <th>Max Qty</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        {props.items && props.items.map((i, id=id+1) => (
+          <tr key={id}>
+            <td>{id+1}</td>
+            <td className={i.Name === "" ? "empty" : ""}>{i.Name}</td>
+            <td className={i.Description === "" ? "empty" : ""}>{i.Description}</td>
+            <td className={i.Brand.Name === "" ? "empty" : ""}>{i.Brand.Name}</td>
+            <td className={i.UnitOfMeasure === "" ? "empty" : ""}>{i.UnitOfMeasure}</td>
+            <td className={i.HSN === "" ? "empty" : ""}>{i.HSN}</td>
+            <td className={i.UnitPrice === 0.0 ? "empty" : ""}>{i.UnitPrice}</td>
+            <td className={i.GSTPercentage === 0.0 ? "empty" : ""}>{i.GSTPercentage}</td>
+            <td className={i.MinQuantity === 0.0 ? "empty" : ""}>{i.MinQuantity}</td>
+            <td className={i.MaxQuantity === 0.0 ? "empty" : ""}>{i.MaxQuantity}</td>
+            <td className={"buttons"}>
+              <FontAwesomeIcon icon={faPencil} onClick={() => handleEdit(i)}/>
+              <FontAwesomeIcon icon={faTrashCan} onClick={() => handleDelete(i)}/>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default ClientTable;
diff --git a/src/components/tables/item-table.js b/src/components/tables/item-table.js
index c1115c1..e42b272 100644
--- a/src/components/tables/item-table.js
+++ b/src/components/tables/item-table.js
@@ -21,6 +21,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons'
 
 const ItemTable = (props) => {
+  const handleEdit = (i) => {
+    alert("editing coming soon")
+  }
+
   const handleDelete = (i) => {
     // TODO: add confirmation prompt
     deleteItem(i.Id, handleDelSuccess, handleDelFail);
@@ -65,7 +69,7 @@ const ItemTable = (props) => {
             <td className={i.MinQuantity === 0.0 ? "empty" : ""}>{i.MinQuantity}</td>
             <td className={i.MaxQuantity === 0.0 ? "empty" : ""}>{i.MaxQuantity}</td>
             <td className={"buttons"}>
-              <FontAwesomeIcon icon={faPencil} onClick={() => alert("editing coming soon")}/>
+              <FontAwesomeIcon icon={faPencil} onClick={() => handleEdit(i)}/>
               <FontAwesomeIcon icon={faTrashCan} onClick={() => handleDelete(i)}/>
             </td>
           </tr>
diff --git a/src/views/manage/clients.js b/src/views/manage/clients.js
new file mode 100644
index 0000000..74c1a38
--- /dev/null
+++ b/src/views/manage/clients.js
@@ -0,0 +1,48 @@
+/* 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/>.
+ */
+
+/* This page shows a list of all the items
+ * with options to add/modify/delete items
+ */
+
+import { useState, useEffect } from 'react';
+
+import './scss/management-page.scss'
+import { getAllClients } from '../../classes/client';
+import ClientEditor from './../../components/editors/client-editor';
+import ClientTable from './../../components/tables/client-table';
+
+const ManageClientsPage = () => {
+  const [allClients, setAllClients] = useState([]);
+  // TODO: handle error
+  const updateList = () =>
+    getAllClients(setAllClients, () => {});
+
+  useEffect(() => {
+    updateList();
+  }, []);
+
+  return (
+    <>
+      <ClientEditor heading={"Add New Client"} callback={updateList}/>
+      <hr/>
+      {false && <ClientTable refresh={updateList} items={allClients}/>}
+    </>
+  );
+}
+
+export default ManageClientsPage;
diff --git a/src/views/manage/items.js b/src/views/manage/items.js
index 3190504..b9bf339 100644
--- a/src/views/manage/items.js
+++ b/src/views/manage/items.js
@@ -21,6 +21,7 @@
 
 import { useState, useEffect } from 'react';
 
+import './scss/management-page.scss'
 import { getAllItems } from '../../classes/item';
 import ItemEditor from './../../components/editors/item-editor';
 import ItemTable from './../../components/tables/item-table';
@@ -37,7 +38,8 @@ const ManageItemsPage = () => {
 
   return (
     <>
-      <ItemEditor callback={updateList}/>
+      <ItemEditor heading={"Add New Item"} callback={updateList}/>
+      <hr/>
       <ItemTable refresh={updateList} items={allItems}/>
     </>
   );
diff --git a/src/views/manage/scss/management-page.scss b/src/views/manage/scss/management-page.scss
new file mode 100644
index 0000000..1d907c3
--- /dev/null
+++ b/src/views/manage/scss/management-page.scss
@@ -0,0 +1,4 @@
+hr {
+    margin: 0.8rem auto 1rem auto;
+    border-color: pink;
+}
-- 
cgit v1.2.3