blob: 94888366dbc4b9948d93171ee6da2caba1ca3c83 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
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;
|
