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 ++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 src/components/Display/SummaryDisplay.tsx (limited to 'src/components/Display/SummaryDisplay.tsx') 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; -- cgit v1.2.3