From 6874be2c3016b872016ba32181823a8e1232a1a7 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Fri, 25 Jun 2021 18:06:56 +0530 Subject: Ported SummaryDisplay to tsx --- src/components/Display/SummaryDisplay.tsx | 116 +++++++++++++++++++++++ src/components/Display/SummaryDisplay.txt | 132 --------------------------- src/components/Form/Items/AddNewItemForm.tsx | 11 ++- src/components/Pages/BillingPage.tsx | 5 +- 4 files changed, 125 insertions(+), 139 deletions(-) create mode 100644 src/components/Display/SummaryDisplay.tsx delete mode 100644 src/components/Display/SummaryDisplay.txt (limited to 'src') 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) => { +// const summary = getBasicSummary(props.items); +// +// return ( +// +// Total +// +// +// {summary.TotalQuantity} +// +// +// +// +// +// {summary.TotalRawPrice} +// +// ); +// } + +const SummaryDisplay: React.FC = (props) => { + const summary: FullSummary = getFullSummary(props.items); + return ( +
+

Summary

+ + + + + + + + {summary.TotalDiscount !== 0.00 && + + + + + + } + + + + + + + + {summary.TotalRoundedOff !== 0.00 && + + + + + } + + + + + + +
Base Total{summary.TotalRawPrice}
After Discount{summary.TotalPriceAfterDiscount}(-{summary.TotalDiscount})
After Tax{summary.TotalRawPrice + summary.TotalGST}(+{summary.TotalGST})
Rounded Off{summary.TotalRoundedOff}
Grand Total{summary.TotalRawPrice + (summary.TotalGST - summary.TotalDiscount)}
+
+ ); +} + +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) => { - const summary = getBasicSummary(props.items); - - return ( - - Total - - - {summary.TotalQuantity} - - - - - - {summary.TotalRawPrice} - - ); -} - -const SummaryDisplay = (props) => { - const summary = getFullSummary(props.items); - - return ( -
-

Summary

- - - - - - - - {summary.TotalDiscountPrice !== 0.00 && - - - - - - } - - - - - - - - {summary.RoundedOff !== 0.00 && - - - - - } - - - - - - -
Base Total{summary.TotalRawPrice}
After Discount{summary.TotalPriceAfterDiscount}(-{summary.TotalDiscountPrice})
After Tax{summary.TotalPriceAfterTax}(+{summary.TotalTaxAmount})
Rounded Off{summary.RoundedOff}
Grand Total{summary.TotalPrice}
-
- ); -} - -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) => { // 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) => { (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([]); @@ -87,11 +87,10 @@ const BillingPage: React.FC = () => {
+
); - // this goes after metainfoform - // } export default BillingPage; -- cgit v1.2.3