From eedde57b9caff20e1e7d25b43fcb8785e23b3e11 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Sun, 27 Jun 2021 14:47:48 +0530
Subject: Fixed DisplayItem and now really big decimal numbers don't show up
---
src/components/Display/Display.scss | 9 +++
src/components/Display/DisplayItem.js | 34 ------------
src/components/Display/DisplayItem.tsx | 67 +++++++++++++++++++++++
src/components/Display/ItemsDisplay.tsx | 4 +-
src/components/Display/SummaryDisplay.tsx | 6 +-
src/components/Form/Document/DocumentInfoForm.js | 25 ---------
src/components/Form/Document/DocumentInfoForm.tsx | 29 ++++++++++
7 files changed, 109 insertions(+), 65 deletions(-)
delete mode 100644 src/components/Display/DisplayItem.js
create mode 100644 src/components/Display/DisplayItem.tsx
delete mode 100644 src/components/Form/Document/DocumentInfoForm.js
create mode 100644 src/components/Form/Document/DocumentInfoForm.tsx
(limited to 'src')
diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index 592f4ec..8be6c4e 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -43,6 +43,15 @@
text-align: left;
}
+.ItemsDisplay .multiValue {
+ display: flex;
+ justify-content: space-around;
+}
+
+.ItemsDisplay .hideContents * {
+ display: none;
+}
+
.SummaryDisplayTR td {
color: $foreground2;
font-size: 1.7rem;
diff --git a/src/components/Display/DisplayItem.js b/src/components/Display/DisplayItem.js
deleted file mode 100644
index 02693ab..0000000
--- a/src/components/Display/DisplayItem.js
+++ /dev/null
@@ -1,34 +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";
-
-const DisplayItem = (props) => {
- const itemNumber = props.itemNumber;
- const item = props.item;
-
- return (
- <tr>
- <td>{itemNumber}</td>
- <td className={"leftAlign"}>{item.Model}</td>
- <td className={item.Description === "" ? "leftAlign disabledBorder" : "leftAlign"}>{item.Description}</td>
- <td>{item.Quantity}</td>
- <td className={item.Discount === 0 ? "disabledBorder" : ""}>{item.Discount}</td>
-
- <td className={item.cgst === "" ? "disabledBorder" : (props.defGSTValue / 2 ? "" : "warningBorder")}>{item.sgst}</td>
- <td className={item.sgst === "" ? "disabledBorder" : (props.defGSTValue / 2 ? "" : "warningBorder")}>{item.cgst}</td>
- <td className={item.igst === "" ? "disabledBorder" : (item.igst === props.defGSTValue ? "" : "warningBorder")}>{item.igst}</td>
-
- <td>{item.HSN}</td>
- <td>{item.TotalPrice}</td>
- </tr>
- );
-}
-
-export default DisplayItem;
diff --git a/src/components/Display/DisplayItem.tsx b/src/components/Display/DisplayItem.tsx
new file mode 100644
index 0000000..448460b
--- /dev/null
+++ b/src/components/Display/DisplayItem.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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 {
+ defGSTValue: number
+ itemNumber: number
+ item: Item
+}
+
+const DisplayItem: React.FC<Props> = (props) => {
+ const itemNumber = props.itemNumber;
+ const item = props.item;
+
+ return (
+ <tr>
+ <td>{itemNumber}</td>
+ <td className={"leftAlign"}>{item.Model}</td>
+
+ <td className={
+ // disable if no description
+ // and left align
+ item.Description === "" ? "leftAlign disabledBorder" : "leftAlign"
+ }>
+ {item.Description}
+ </td>
+
+ <td>{item.HSN}</td>
+ <td>{item.Quantity}</td>
+ <td>{item.UnitPrice}</td>
+
+ <td className={
+ // check if discount is zero
+ item.Discount === 0 ? "disabledBorder hideContents" : ""
+ }>
+ <span className="multiValue">
+ <span>{item.DiscountValue}</span>
+ <span>({item.Discount}%)</span>
+ </span>
+ </td>
+
+ <td className={ // check if GST is zero or more than default
+ item.TotalGSTValue === 0 ? "disabledBorder" :
+ (item.TotalGST === props.defGSTValue ? "" : "warningBorder")
+ }>
+ <span className="multiValue">
+ <span>{item.TotalGSTValue}</span>
+ <span>({item.TotalGST}%)</span>
+ </span>
+ </td>
+
+ <td>
+ {(item.TotalValue + (item.TotalGSTValue - item.DiscountValue)).toFixed(2)}
+ </td>
+ </tr>
+ );
+}
+
+export default DisplayItem;
diff --git a/src/components/Display/ItemsDisplay.tsx b/src/components/Display/ItemsDisplay.tsx
index db3d336..78c5094 100644
--- a/src/components/Display/ItemsDisplay.tsx
+++ b/src/components/Display/ItemsDisplay.tsx
@@ -33,9 +33,7 @@ const ItemsDisplay: React.FC<Props> = (props) => {
<th>Quantity</th>
<th>Unit Price</th>
<th>Discount</th>
- <th>sgst</th>
- <th>cgst</th>
- <th>igst</th>
+ <th>Tax</th>
<th>Price</th>
</tr>
diff --git a/src/components/Display/SummaryDisplay.tsx b/src/components/Display/SummaryDisplay.tsx
index 9488836..22f2e52 100644
--- a/src/components/Display/SummaryDisplay.tsx
+++ b/src/components/Display/SummaryDisplay.tsx
@@ -85,14 +85,14 @@ const SummaryDisplay: React.FC<props> = (props) => {
{summary.TotalDiscount !== 0.00 &&
<tr>
<td>After Discount</td>
- <td>{summary.TotalPriceAfterDiscount}</td>
+ <td>{(summary.TotalPriceAfterDiscount).toFixed(2)}</td>
<td>(-{summary.TotalDiscount})</td>
</tr>
}
<tr>
<td>After Tax</td>
- <td>{summary.TotalRawPrice + summary.TotalGST}</td>
+ <td>{(summary.TotalRawPrice + summary.TotalGST).toFixed(2)}</td>
<td>(+{summary.TotalGST})</td>
</tr>
@@ -105,7 +105,7 @@ const SummaryDisplay: React.FC<props> = (props) => {
<tr className={"grandTotal"}>
<td>Grand Total</td>
- <td>{summary.TotalRawPrice + (summary.TotalGST - summary.TotalDiscount)}</td>
+ <td>{Math.round(summary.TotalRawPrice + (summary.TotalGST - summary.TotalDiscount))}</td>
</tr>
</tbody>
</table>
diff --git a/src/components/Form/Document/DocumentInfoForm.js b/src/components/Form/Document/DocumentInfoForm.js
deleted file mode 100644
index 09bb9c6..0000000
--- a/src/components/Form/Document/DocumentInfoForm.js
+++ /dev/null
@@ -1,25 +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/*, { useState }*/ from "react";
-import "./../Form.scss";
-
-import SelectClientForm from "./../People/SelectClientForm";
-
-
-const DocumentInfoForm = (props) => {
- return (
- <div className={"DocumentInfoForm"}>
- <SelectClientForm
- savedPeople={props.savedPeople}
- />
- </div>
- );
-}
-
-export default DocumentInfoForm;
diff --git a/src/components/Form/Document/DocumentInfoForm.tsx b/src/components/Form/Document/DocumentInfoForm.tsx
new file mode 100644
index 0000000..7f33046
--- /dev/null
+++ b/src/components/Form/Document/DocumentInfoForm.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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/*, { useState }*/ from "react";
+import { Person } from "./../../../interfaces";
+import "./../Form.scss";
+
+import SelectClientForm from "./../People/SelectClientForm";
+
+interface Props {
+ savedPeople: Person[]
+}
+
+const DocumentInfoForm: React.FC<Props> = (props) => {
+ return (
+ <div className={"DocumentInfoForm"}>
+ <SelectClientForm
+ savedPeople={props.savedPeople}
+ />
+ </div>
+ );
+}
+
+export default DocumentInfoForm;
--
cgit v1.2.3