added an invoice summary component

3 files changed, 70 insertions, 5 deletions

diff --git a/src/components/tables/invoice-item-table.js b/src/components/tables/invoice-item-table.js
index 12ee52e..fb91af3 100644
--- a/src/components/tables/invoice-item-table.js
+++ b/src/components/tables/invoice-item-table.js
@@ -16,7 +16,7 @@
  */
 
 import './scss/table.scss';
-import { deleteItem, getDiscountValue, getGSTValue, getAmount } from './../../classes/item';
+import { getDiscountValue, getGSTValue, getAmount } from './../../classes/item';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons'
 
@@ -97,10 +97,10 @@ const ItemTable = ({items, setItems, isInterstate, sum}) => {
             <td className={sum.UnitPrice > 0 ? "" : "empty"}>{sum.UnitPrice}</td>
             <td className={sum.Discount > 0 ? "" : "empty"}>{sum.Discount}</td>
             {isInterstate
-              ? <td className={sum.GST > 0 ? "" : "empty"}>{sum.GST}</td>
+              ? <td className={sum.GST > 0 ? "" : "empty"}>{sum.GST || 0}</td>
               : <>
-                <td className={sum.GST > 0 ? "" : "empty"}>{sum.GST / 2}</td>
-                <td className={sum.GST > 0 ? "" : "empty"}>{sum.GST / 2}</td>
+                <td className={sum.GST > 0 ? "" : "empty"}>{sum.GST / 2 || 0}</td>
+                <td className={sum.GST > 0 ? "" : "empty"}>{sum.GST / 2 || 0}</td>
               </>
             }
             <td className={"empty"}></td>
diff --git a/src/components/tables/invoice-summary.js b/src/components/tables/invoice-summary.js
new file mode 100644
index 0000000..5899105
--- /dev/null
+++ b/src/components/tables/invoice-summary.js
@@ -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 './scss/table.scss';
+
+const InvoiceSummary = ({sum}) => {
+  const totalRoundedOff = Math.round(sum.Amount);
+  const roundedOffDiff = sum.Amount - totalRoundedOff;
+
+  const formatter = new Intl.NumberFormat("en-US", {
+    maximumSignificantDigits: 2,
+  })
+
+  return (
+    <>
+      <h1>Summary:</h1>
+      <table>
+        <tbody>
+          <tr>
+            <td>Base Total</td>
+            <td>{formatter.format(sum.UnitPrice)}</td>
+          </tr>
+          {sum.Discount > 0 &&
+            <tr>
+              <td>Total After Discount</td>
+              <td>{formatter.format(sum.UnitPrice - sum.Discount)} (-{formatter.format(sum.Discount)})</td>
+            </tr>
+          }
+          {sum.GST > 0 &&
+            <tr>
+              <td>Total After Tax</td>
+              <td>{formatter.format(sum.UnitPrice - (sum.Discount > 0 ? sum.Discount : 0) + sum.GST)} (+{formatter.format(sum.GST)})</td>
+            </tr>
+          }
+          {(isNaN(roundedOffDiff) || roundedOffDiff !== 0) &&
+            <tr>
+              <td>Rounded Off</td>
+              <td>{`${roundedOffDiff > 0 ? `(-) ${formatter.format(roundedOffDiff)}` : `(+) ${formatter.format(roundedOffDiff * -1)}`}`}</td>
+            </tr>
+          }
+          <tr>
+            <td>Grand Total</td>
+            <td>{formatter.format(sum.Amount - (isNaN(roundedOffDiff) ? 0 : roundedOffDiff))}</td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  );
+}
+
+export default InvoiceSummary;
diff --git a/src/components/tables/item-table.js b/src/components/tables/item-table.js
index 208fd9c..5a405a5 100644
--- a/src/components/tables/item-table.js
+++ b/src/components/tables/item-table.js
@@ -56,7 +56,7 @@ const ItemTable = (props) => {
         </tr>
       </thead>
       <tbody>
-        {props.items && props.items.map((i, id=id+1) => (
+        {props.items && props.items.map((i, id) => (
           <tr key={id}>
             <td>{id+1}</td>
             <td className={i.Name === "" ? "empty" : ""}>{i.Name}</td>