aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/BillingPage.js3
-rw-r--r--src/components/Display/Display.css16
-rw-r--r--src/components/Display/Display.scss19
-rw-r--r--src/components/Display/Form.css0
-rw-r--r--src/components/Display/SummaryDisplay.js59
-rw-r--r--src/components/Form/Form.css3
-rw-r--r--src/components/Form/Form.scss4
-rw-r--r--src/components/Form/MetaInfoForm.js14
-rw-r--r--src/styles/Form.css0
-rw-r--r--src/styles/global.css2
-rw-r--r--src/styles/global.scss2
11 files changed, 103 insertions, 19 deletions
diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index 3f60f44..1f42bf0 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -4,6 +4,7 @@ import axios from "axios";
import AddNewItemForm from "./Form/AddNewItemForm";
import ItemsDisplay from "./Display/ItemsDisplay";
import SummaryDisplay from "./Display/SummaryDisplay";
+import MetaInfoForm from "./Form/MetaInfoForm";
const BillingPage = () => {
const [savedItems, getSavedItems] = useState([])
@@ -35,7 +36,7 @@ const BillingPage = () => {
<AddNewItemForm savedItems={savedItems} addItem={getItems} defGSTValue={defGSTValue}/>
<ItemsDisplay items={items} defGSTValue={defGSTValue}/>
<div className={"BillingPageFlex"}>
- <div>placeholder for extras menu</div>
+ <MetaInfoForm/>
<SummaryDisplay items={items}/>
</div>
</>
diff --git a/src/components/Display/Display.css b/src/components/Display/Display.css
index 528e837..21a9815 100644
--- a/src/components/Display/Display.css
+++ b/src/components/Display/Display.css
@@ -44,4 +44,18 @@ $defShadow: 0px 0px 4px #232627;
font-size: 1.7rem; }
.SummaryDisplay {
- border: 1px solid pink; }
+ width: 30%;
+ padding: 0.5rem 2rem; }
+
+.SummaryDisplay h1 {
+ font-size: 3rem;
+ margin: 0.5rem -1.5rem;
+ border-bottom: 1px dotted lightblue; }
+
+.SummaryDisplay table {
+ width: 100%;
+ margin: auto; }
+
+.SummaryDisplay td {
+ font-size: 1.25rem;
+ padding: 0.2rem 0; }
diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index 7fa37a3..3c49b7e 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -41,5 +41,22 @@
}
.SummaryDisplay {
- border: 1px solid pink;
+ width: 30%;
+ padding: 0.5rem 2rem;
+}
+
+.SummaryDisplay h1 {
+ font-size: 3rem;
+ margin: 0.5rem -1.5rem;
+ border-bottom: 1px dotted $labelUnderlineColor;
+}
+
+.SummaryDisplay table {
+ width: 100%;
+ margin: auto;
+}
+
+.SummaryDisplay td {
+ font-size: 1.25rem;
+ padding: 0.2rem 0;
}
diff --git a/src/components/Display/Form.css b/src/components/Display/Form.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/Display/Form.css
diff --git a/src/components/Display/SummaryDisplay.js b/src/components/Display/SummaryDisplay.js
index 97c24b5..d823713 100644
--- a/src/components/Display/SummaryDisplay.js
+++ b/src/components/Display/SummaryDisplay.js
@@ -25,22 +25,24 @@ const getFullSummary = (items) => {
for (let i = 0; i < items.length; i++) {
const itemTotalPrice = items[i].TotalPrice;
- const itemDiscount = items[i].Discount;
+ const itemDiscount = (items[i].Discount / 100) * itemTotalPrice;
totalRawPrice += itemTotalPrice;
- totalDiscount += (itemDiscount / 100) * itemTotalPrice;
- totalTax += (items[i].GST / 100) * itemTotalPrice;
+ totalDiscount += itemDiscount;
+ totalTax += (items[i].GST / 100) * (itemTotalPrice - itemDiscount);
}
- // TODO: add support for calculating gst from TotalPriceAfterDiscount
-
+ const totalPriceAfterTax = (totalRawPrice - totalDiscount) + totalTax;
+ const totalRoundedOff = Math.abs(totalPriceAfterTax - Math.round(totalPriceAfterTax));
return (
{
- "TotalRawPrice": totalRawPrice,
- "TotalDiscountPrice": totalDiscount,
- "TotalPriceAfterDiscount": totalRawPrice - totalDiscount,
- "TotalTaxAmount": totalTax,
- "TotalPrice": (totalRawPrice - totalDiscount) + totalTax,
+ "TotalRawPrice": totalRawPrice.toFixed(2),
+ "TotalDiscountPrice": totalDiscount.toFixed(2),
+ "TotalPriceAfterDiscount": (totalRawPrice - totalDiscount).toFixed(2),
+ "TotalTaxAmount": totalTax.toFixed(2),
+ "TotalPriceAfterTax": totalPriceAfterTax.toFixed(2),
+ "RoundedOff": totalRoundedOff.toFixed(2),
+ "TotalPrice": Math.round(totalPriceAfterTax)
}
);
}
@@ -67,10 +69,39 @@ const SummaryDisplay = (props) => {
return (
<div className={"SummaryDisplay"}>
- <p>Total raw: {summary.TotalRawPrice}</p>
- <p>Total after discount: {summary.TotalRawPrice} - {summary.TotalDiscountPrice} = {summary.TotalPriceAfterDiscount}</p>
- <p>Total tax: {summary.TotalTaxAmount}</p>
- <p>Total: {summary.TotalPriceAfterDiscount} + {summary.TotalTaxAmount} = {summary.TotalPrice}</p>
+ <h1>Summary</h1>
+ <table>
+ <tr>
+ <td>Base Total</td>
+ <td>{summary.TotalRawPrice}</td>
+ </tr>
+
+ {true &&// summary.TotalDiscountPrice !== 0 &&
+ <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>
+
+ {true && //summary.RoundedOff !== 0 &&
+ <tr>
+ <td>Rounded Off</td>
+ <td>{summary.RoundedOff}</td>
+ </tr>
+ }
+
+ <tr>
+ <td>Grand Total</td>
+ <td>{summary.TotalPrice}</td>
+ </tr>
+ </table>
</div>
);
}
diff --git a/src/components/Form/Form.css b/src/components/Form/Form.css
index 102e4bb..af1baa6 100644
--- a/src/components/Form/Form.css
+++ b/src/components/Form/Form.css
@@ -82,6 +82,9 @@ input[type=number] {
padding: 0.8rem 0;
border-bottom: 1px dotted lightblue; }
+.MetaInfoForm {
+ width: 60%; }
+
@media only screen and (max-device-width: 480px) {
.formContainer {
padding: 0.5rem;
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index df1cdde..9d4a688 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -84,6 +84,10 @@ input[type=number] {
border-bottom: 1px dotted $labelUnderlineColor;
}
+.MetaInfoForm {
+ width: 60%;
+}
+
@media only screen and (max-device-width: 480px) {
.formContainer {
padding: 0.5rem;
diff --git a/src/components/Form/MetaInfoForm.js b/src/components/Form/MetaInfoForm.js
new file mode 100644
index 0000000..da7f26a
--- /dev/null
+++ b/src/components/Form/MetaInfoForm.js
@@ -0,0 +1,14 @@
+import React /*, { useState }*/ from "react";
+import "./Form.css";
+
+const MetaInfoForm = () => {
+ return (
+ <div className={"MetaInfoForm"}>
+ <h1>This section of the app is missing</h1>
+ <p>Please look at this waifu instead.</p>
+ <img height="300" width="230" src="https://i.redd.it/te8tbxl1r9v61.jpg" alt="Shit where is the waifu"></img>
+ </div>
+ )
+}
+
+export default MetaInfoForm;
diff --git a/src/styles/Form.css b/src/styles/Form.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/styles/Form.css
diff --git a/src/styles/global.css b/src/styles/global.css
index 5e011b3..30fc9e5 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -32,7 +32,7 @@ body {
height: 70vh; }
.BillingPageFlex div {
- width: 45%;
+ box-sizing: border-box;
border: 1px solid pink; }
@media only screen and (max-device-width: 480px) {
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 51e1798..df4c69a 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -23,7 +23,7 @@ body {
height: 70vh;
}
.BillingPageFlex div {
- width: 45%;
+ box-sizing: border-box;
border: 1px solid pink;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 10:28:52 +0000