aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Display/SummaryDisplay.tsx116
-rw-r--r--src/components/Display/SummaryDisplay.txt132
-rw-r--r--src/components/Form/Items/AddNewItemForm.tsx11
-rw-r--r--src/components/Pages/BillingPage.tsx5
4 files changed, 125 insertions, 139 deletions
diff --git a/src/components/Display/SummaryDisplay.tsx b/src/components/Display/SummaryDisplay.tsx
new file mode 100644
index 0000000..9488836
--- /dev/null
+++ b/src/components/Display/SummaryDisplay.tsx
@@ -0,0 +1,116 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+import React from "react";
+import { Item } from "./../../interfaces"
+import "./Display.scss";
+
+interface props {
+ items: Item[]
+}
+
+interface FullSummary {
+ TotalRawPrice: number // total price without gst/discount
+ TotalDiscount: number // total amount of discount
+ TotalGST: number // total gst to be paid
+ TotalPriceAfterDiscount: number
+ TotalPriceAfterGST: number
+ TotalRoundedOff: number
+}
+
+const getFullSummary = (items: Item[]): FullSummary => {
+ var rawPrice: number = 0;
+ var totalDiscount: number = 0;
+ var totalGST: number = 0;
+
+ for (let i in items) {
+ const item = items[i];
+ rawPrice += item.TotalValue;
+ totalDiscount += item.DiscountValue;
+ totalGST += item.TotalGSTValue;
+ }
+
+ const totalPriceAfterDiscount: number = rawPrice - totalDiscount;
+ const totalPriceAfterGST: number = totalPriceAfterDiscount + totalGST;
+ const totalRoundedOff: number = parseFloat(Math.abs(
+ (totalPriceAfterGST) - Math.round(totalPriceAfterGST)
+ ).toFixed(2)); // rounded off value in 0.00 format
+
+ return {
+ TotalRawPrice: rawPrice,
+ TotalDiscount: totalDiscount,
+ TotalGST: totalGST,
+ TotalPriceAfterDiscount: totalPriceAfterDiscount,
+ TotalPriceAfterGST: totalPriceAfterGST,
+ TotalRoundedOff: totalRoundedOff
+ }
+}
+
+// export const SummaryDisplayTR: React.FC<props> = (props) => {
+// const summary = getBasicSummary(props.items);
+//
+// return (
+// <tr className={"SummaryDisplayTR"}>
+// <td>Total</td>
+// <td className={"disabledBorder"}></td>
+// <td className={"disabledBorder"}></td>
+// <td>{summary.TotalQuantity}</td>
+// <td className={"disabledBorder"}></td>
+// <td className={"disabledBorder"}></td>
+// <td className={"disabledBorder"}></td>
+// <td className={"disabledBorder"}></td>
+// <td className={"disabledBorder"}></td>
+// <td>{summary.TotalRawPrice}</td>
+// </tr>
+// );
+// }
+
+const SummaryDisplay: React.FC<props> = (props) => {
+ const summary: FullSummary = getFullSummary(props.items);
+ return (
+ <div className={"SummaryDisplay"}>
+ <h1>Summary</h1>
+ <table>
+ <tbody>
+ <tr>
+ <td>Base Total</td>
+ <td>{summary.TotalRawPrice}</td>
+ </tr>
+
+ {summary.TotalDiscount !== 0.00 &&
+ <tr>
+ <td>After Discount</td>
+ <td>{summary.TotalPriceAfterDiscount}</td>
+ <td>(-{summary.TotalDiscount})</td>
+ </tr>
+ }
+
+ <tr>
+ <td>After Tax</td>
+ <td>{summary.TotalRawPrice + summary.TotalGST}</td>
+ <td>(+{summary.TotalGST})</td>
+ </tr>
+
+ {summary.TotalRoundedOff !== 0.00 &&
+ <tr>
+ <td>Rounded Off</td>
+ <td>{summary.TotalRoundedOff}</td>
+ </tr>
+ }
+
+ <tr className={"grandTotal"}>
+ <td>Grand Total</td>
+ <td>{summary.TotalRawPrice + (summary.TotalGST - summary.TotalDiscount)}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ );
+}
+
+export default SummaryDisplay;
diff --git a/src/components/Display/SummaryDisplay.txt b/src/components/Display/SummaryDisplay.txt
deleted file mode 100644
index e06eac5..0000000
--- a/src/components/Display/SummaryDisplay.txt
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
- * OpenBills - Self hosted browser app to generate and keep track of simple invoices
- * Version - 0
- * Licensed under the MIT license - https://opensource.org/licenses/MIT
- *
- * Copyright (c) 2021 Vidhu Kant Sharma
-*/
-
-import React from "react";
-import "./Display.scss";
-
-interface props {
-}
-
-const getBasicSummary = (items) => {
- let totalRawPrice = 0;
- let totalQuantity = 0;
-
- items.some((i) => {
- totalRawPrice += i.TotalPrice;
- totalQuantity += i.Quantity;
- return null;
- }
- )
-
- return (
- {
- "TotalRawPrice": totalRawPrice,
- "TotalQuantity": totalQuantity
- }
- );
-}
-
-// TODO: remove mutability from this function
-const getFullSummary = (items) => {
- let totalRawPrice = 0;
- let totalDiscount = 0; // to be subtracted from totalRawPrice
- let totalTax = 0;
-
- items.some((i) => {
- const itemTotalPrice = i.TotalPrice;
- const itemDiscount = (i.Discount / 100) * itemTotalPrice;
-
- totalRawPrice += itemTotalPrice;
- totalDiscount += itemDiscount;
- totalTax += i.igst === ""
- ? ((i.sgst + i.cgst) / 100) * (itemTotalPrice - itemDiscount)
- : (i.igst / 100) * (itemTotalPrice - itemDiscount);
- return null;
- })
-
-
-
- const totalPriceAfterTax = (totalRawPrice - totalDiscount) + totalTax;
- const totalRoundedOff = Math.abs(totalPriceAfterTax - Math.round(totalPriceAfterTax));
- return (
- {
- "TotalRawPrice": parseFloat(totalRawPrice.toFixed(2)),
- "TotalDiscountPrice": parseFloat(totalDiscount.toFixed(2)),
- "TotalPriceAfterDiscount": parseFloat((totalRawPrice - totalDiscount).toFixed(2)),
- "TotalTaxAmount": parseFloat(totalTax.toFixed(2)),
- "TotalPriceAfterTax": parseFloat(totalPriceAfterTax.toFixed(2)),
- "RoundedOff": parseFloat(totalRoundedOff.toFixed(2)),
- "TotalPrice": Math.round(totalPriceAfterTax)
- }
- );
-}
-
-export const SummaryDisplayTR: React.FC<props> = (props) => {
- const summary = getBasicSummary(props.items);
-
- return (
- <tr className={"SummaryDisplayTR"}>
- <td>Total</td>
- <td className={"disabledBorder"}></td>
- <td className={"disabledBorder"}></td>
- <td>{summary.TotalQuantity}</td>
- <td className={"disabledBorder"}></td>
- <td className={"disabledBorder"}></td>
- <td className={"disabledBorder"}></td>
- <td className={"disabledBorder"}></td>
- <td className={"disabledBorder"}></td>
- <td>{summary.TotalRawPrice}</td>
- </tr>
- );
-}
-
-const SummaryDisplay = (props) => {
- const summary = getFullSummary(props.items);
-
- return (
- <div className={"SummaryDisplay"}>
- <h1>Summary</h1>
- <table>
- <tbody>
- <tr>
- <td>Base Total</td>
- <td>{summary.TotalRawPrice}</td>
- </tr>
-
- {summary.TotalDiscountPrice !== 0.00 &&
- <tr>
- <td>After Discount</td>
- <td>{summary.TotalPriceAfterDiscount}</td>
- <td>(-{summary.TotalDiscountPrice})</td>
- </tr>
- }
-
- <tr>
- <td>After Tax</td>
- <td>{summary.TotalPriceAfterTax}</td>
- <td>(+{summary.TotalTaxAmount})</td>
- </tr>
-
- {summary.RoundedOff !== 0.00 &&
- <tr>
- <td>Rounded Off</td>
- <td>{summary.RoundedOff}</td>
- </tr>
- }
-
- <tr className={"grandTotal"}>
- <td>Grand Total</td>
- <td>{summary.TotalPrice}</td>
- </tr>
- </tbody>
- </table>
- </div>
- );
-}
-
-export default SummaryDisplay;
diff --git a/src/components/Form/Items/AddNewItemForm.tsx b/src/components/Form/Items/AddNewItemForm.tsx
index e51ecfc..48ca4b2 100644
--- a/src/components/Form/Items/AddNewItemForm.tsx
+++ b/src/components/Form/Items/AddNewItemForm.tsx
@@ -38,7 +38,6 @@ const AddNewItemForm: React.FC<props> = (props) => {
// set description and price if match found in DB
const applyItemInfo = (i: any) => {
- console.log(i)
setItemDescValue(i.Description);
setItemPriceValue(i.UnitPrice);
setItemHSNValue(i.HSN);
@@ -68,14 +67,18 @@ const AddNewItemForm: React.FC<props> = (props) => {
(event) => {
event.preventDefault();
- const discountValue: number = (itemDiscountPercentage / 100) * itemPriceValue;
- const totalGSTValue: number = (itemGSTPercentage / 100) * (itemQTYValue);
+ const totalValue: number = itemPriceValue * itemQTYValue;
+
+ // the values below are being rounded to two decimal places
+ const discountValue: number = parseFloat(((itemDiscountPercentage / 100) * itemPriceValue).toFixed(2))
+ const totalGSTValue: number = parseFloat(((itemGSTPercentage / 100) * totalValue).toFixed(2))
+
const newInvoiceItem: Item = {
Model: itemNameValue,
Description: itemDescValue,
Quantity: itemQTYValue,
UnitPrice: itemPriceValue,
- TotalValue: itemPriceValue * itemQTYValue,
+ TotalValue: totalValue,
Discount: itemDiscountPercentage,
DiscountValue: discountValue,
HSN: itemHSNValue,
diff --git a/src/components/Pages/BillingPage.tsx b/src/components/Pages/BillingPage.tsx
index ebc0f5a..9697a24 100644
--- a/src/components/Pages/BillingPage.tsx
+++ b/src/components/Pages/BillingPage.tsx
@@ -20,7 +20,7 @@ import DocumentInfoForm from "./../Form/Document/DocumentInfoForm";
import MetaInfoForm from "./../Form/Document/MetaInfoForm";
import ItemsDisplay from "./../Display/ItemsDisplay";
-// import SummaryDisplay from "./../Display/SummaryDisplay";
+import SummaryDisplay from "./../Display/SummaryDisplay";
const BillingPage: React.FC = () => {
const [savedItems, getSavedItems] = useState<Item[]>([]);
@@ -87,11 +87,10 @@ const BillingPage: React.FC = () => {
<div className={"BillingPageFlex"}>
<MetaInfoForm/>
+ <SummaryDisplay items={items}/>
</div>
</>
);
- // this goes after metainfoform
- // <SummaryDisplay items={items}/>
}
export default BillingPage;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 07:01:15 +0000