From 7dbbfc0c2eac7000bf208ce068e887b4db14ea5f Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Mon, 26 Apr 2021 19:46:35 +0530 Subject: Minor styling + fixed the calculation of discount and taxes and added new calculations --- src/components/BillingPage.js | 3 +- src/components/Display/Display.css | 16 ++++++++- src/components/Display/Display.scss | 19 +++++++++- src/components/Display/Form.css | 0 src/components/Display/SummaryDisplay.js | 59 ++++++++++++++++++++++++-------- src/components/Form/Form.css | 3 ++ src/components/Form/Form.scss | 4 +++ src/components/Form/MetaInfoForm.js | 14 ++++++++ src/styles/Form.css | 0 src/styles/global.css | 2 +- src/styles/global.scss | 2 +- 11 files changed, 103 insertions(+), 19 deletions(-) create mode 100644 src/components/Display/Form.css create mode 100644 src/components/Form/MetaInfoForm.js create mode 100644 src/styles/Form.css (limited to 'src') 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 = () => {
-
placeholder for extras menu
+
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 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 (
-

Total raw: {summary.TotalRawPrice}

-

Total after discount: {summary.TotalRawPrice} - {summary.TotalDiscountPrice} = {summary.TotalPriceAfterDiscount}

-

Total tax: {summary.TotalTaxAmount}

-

Total: {summary.TotalPriceAfterDiscount} + {summary.TotalTaxAmount} = {summary.TotalPrice}

+

Summary

+ + + + + + + {true &&// summary.TotalDiscountPrice !== 0 && + + + + + + } + + + + + + + + {true && //summary.RoundedOff !== 0 && + + + + + } + + + + + +
Base Total{summary.TotalRawPrice}
After Discount{summary.TotalPriceAfterDiscount}(-{summary.TotalDiscountPrice})
After Tax{summary.TotalPriceAfterTax}(+{summary.TotalTaxAmount})
Rounded Off{summary.RoundedOff}
Grand Total{summary.TotalPrice}
); } 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 ( +
+

This section of the app is missing

+

Please look at this waifu instead.

+ Shit where is the waifu +
+ ) +} + +export default MetaInfoForm; diff --git a/src/styles/Form.css b/src/styles/Form.css new file mode 100644 index 0000000..e69de29 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; } -- cgit v1.2.3