aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
authorVidhu Kant Sharma <vidhukant@vidhukant.xyz>2022-10-12 21:04:39 +0530
committerVidhu Kant Sharma <vidhukant@vidhukant.xyz>2022-10-12 21:04:39 +0530
commit300a4eb39ccea56da416d83400cddc97118e1649 (patch)
tree9ba1dc0c4f8d64bce52ba9a9fd9a73ac5d090103 /src/components
parent0b4343bed2cace86552929f25202680c0d99c541 (diff)
showing total (sum) values in InvoiceItemTable
Diffstat (limited to 'src/components')
-rw-r--r--src/components/pickers/item-picker.js10
-rw-r--r--src/components/tables/invoice-item-table.js116
-rw-r--r--src/components/tables/scss/table.scss8
3 files changed, 87 insertions, 47 deletions
diff --git a/src/components/pickers/item-picker.js b/src/components/pickers/item-picker.js
index 339319f..d756427 100644
--- a/src/components/pickers/item-picker.js
+++ b/src/components/pickers/item-picker.js
@@ -37,10 +37,10 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => {
}
const handleInput = e => {
- const { name, value } = e.target;
+ const { name, value, type } = e.target;
setItem(prevItem => ({
...prevItem,
- [name]: value
+ [name]: type === "number" ? parseFloat(value) : value
}));
}
@@ -65,7 +65,7 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => {
<option key="placeholder" value={""} disabled>Select an Item</option>
{items.map(i =>
<option key={i.Id} value={i.Id} disabled={invoiceItems.some(j => j.Id === i.Id)}>
- {i.Name}{i.Brand.Id === null ? "" : " - " + i.Brand.Name}
+ {i.Name}{i.Brand.Id === undefined ? "" : " - " + i.Brand.Name}
</option>
)}
</select>
@@ -76,8 +76,8 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => {
type="number"
value={item.Quantity}
name="Quantity"
- min={item.MinQuantity}
- max={item.MaxQuantity}
+ min={item.MinQuantity > 0 ? item.MinQuantity : 1}
+ max={item.MaxQuantity > 0 ? item.MaxQuantity : null}
onChange={handleInput} />
</label>
<label className={"narrow"}>
diff --git a/src/components/tables/invoice-item-table.js b/src/components/tables/invoice-item-table.js
index 6b0a1a5..12ee52e 100644
--- a/src/components/tables/invoice-item-table.js
+++ b/src/components/tables/invoice-item-table.js
@@ -16,11 +16,11 @@
*/
import './scss/table.scss';
-import { deleteItem } from './../../classes/item';
+import { deleteItem, getDiscountValue, getGSTValue, getAmount } from './../../classes/item';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons'
-const ItemTable = ({items, setItems}) => {
+const ItemTable = ({items, setItems, isInterstate, sum}) => {
const handleEdit = (i) => {
alert("coming soon; please delete and add item again");
}
@@ -29,15 +29,7 @@ const ItemTable = ({items, setItems}) => {
setItems(items.filter(i => i.Id !== item.Id));
}
- /* TODO: all the math should be done here
- * i.e CGST, IGST, total price (i.e price x quantity)
- * discount/gst value (i.e number instead of percentage)
- *
- * the total cost and the like may be handled by
- * parent component since they are needed
- * by other things (probably)
- *
- * all the values will be calculated on runtime.
+ /* all the values will be calculated on runtime.
* the database will only store the unit price
* and gst/discount *percentages* and everything else
* will be calculated on runtime. i.e the
@@ -45,40 +37,80 @@ const ItemTable = ({items, setItems}) => {
* those same values shown to the user while creating the invoice
*/
return (
- <table>
- <thead>
- <tr>
- <th>S. No</th>
- <th>Name</th>
- <th>Description</th>
- <th>Brand Name</th>
- <th>UOM</th>
- <th>HSN</th>
- <th>Unit Price</th>
- <th>GST %</th>
- {/* TODO: CGST, IGST, etc */}
- <th></th>
- </tr>
- </thead>
- <tbody>
- {items && items.map((i, id=id+1) => (
- <tr key={id}>
- <td>{id+1}</td>
- <td className={i.Name === "" ? "empty" : ""}>{i.Name}</td>
- <td className={i.Description === "" ? "empty" : ""}>{i.Description}</td>
- <td className={i.Brand.Name === "" ? "empty" : ""}>{i.Brand.Name}</td>
- <td className={i.UnitOfMeasure === "" ? "empty" : ""}>{i.UnitOfMeasure}</td>
- <td className={i.HSN === "" ? "empty" : ""}>{i.HSN}</td>
- <td className={i.UnitPrice === 0.0 ? "empty" : ""}>{i.UnitPrice}</td>
- <td className={i.GSTPercentage === 0.0 ? "empty" : ""}>{i.GSTPercentage}</td>
+ <>
+ <table>
+ <thead>
+ <tr>
+ <th>S. No</th>
+ <th>Name</th>
+ <th>Description</th>
+ <th>Brand Name</th>
+ <th>Quantity</th>
+ <th>UOM</th>
+ <th>Unit Price</th>
+ <th>Discount (%)</th>
+ {isInterstate
+ ? <th>IGST (%)</th>
+ : <>
+ <th>SGST (%)</th>
+ <th>CGST (%)</th>
+ </>
+ }
+ <th>HSN</th>
+ <th>Amount</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ {items && items.map((i, id) => (
+ <tr key={id}>
+ <td>{id+1}</td>
+ <td className={i.Name === "" ? "empty" : ""}>{i.Name}</td>
+ <td className={i.Description === "" ? "empty" : ""}>{i.Description}</td>
+ <td className={i.Brand.Name === "" ? "empty" : ""}>{i.Brand.Name}</td>
+ <td>{i.Quantity}</td>
+ <td className={i.UnitOfMeasure === "" ? "empty" : ""}>{i.UnitOfMeasure}</td>
+ <td className={i.UnitPrice > 0 ? "" : "empty"}>{i.UnitPrice}</td>
+ <td className={i.DiscountPercentage > 0 ? "" : "empty"}>{getDiscountValue(i)} ({i.DiscountPercentage}%)</td>
+ {isInterstate
+ ? <td className={i.GSTPercentage > 0 ? "" : "empty"}>{getGSTValue(i)} ({i.GSTPercentage}%)</td>
+ : <>
+ <td className={i.GSTPercentage > 0 ? "" : "empty"}>{getGSTValue(i) / 2} ({i.GSTPercentage / 2}%)</td>
+ <td className={i.GSTPercentage > 0 ? "" : "empty"}>{getGSTValue(i) / 2} ({i.GSTPercentage / 2}%)</td>
+ </>
+ }
+ <td className={i.HSN === "" ? "empty" : ""}>{i.HSN}</td>
+ <td>{getAmount(i)}</td>
+ <td className={"buttons"}>
+ <FontAwesomeIcon icon={faPencil} onClick={() => handleEdit(i)}/>
+ <FontAwesomeIcon icon={faTrashCan} onClick={() => handleDelete(i)}/>
+ </td>
+ </tr>
+ ))}
+ <tr className={"total"}>
+ <td>Total</td>
+ <td className={"empty"}></td>
+ <td className={"empty"}></td>
+ <td className={"empty"}></td>
+ <td className={sum.Quantity > 0 ? "" : "empty"}>{sum.Quantity}</td>
+ <td className={"empty"}></td>
+ <td className={sum.UnitPrice > 0 ? "" : "empty"}>{sum.UnitPrice}</td>
+ <td className={sum.Discount > 0 ? "" : "empty"}>{sum.Discount}</td>
+ {isInterstate
+ ? <td className={sum.GST > 0 ? "" : "empty"}>{sum.GST}</td>
+ : <>
+ <td className={sum.GST > 0 ? "" : "empty"}>{sum.GST / 2}</td>
+ <td className={sum.GST > 0 ? "" : "empty"}>{sum.GST / 2}</td>
+ </>
+ }
+ <td className={"empty"}></td>
+ <td className={sum.Amount > 0 ? "" : "empty"}>{sum.Amount}</td>
<td className={"buttons"}>
- <FontAwesomeIcon icon={faPencil} onClick={() => handleEdit(i)}/>
- <FontAwesomeIcon icon={faTrashCan} onClick={() => handleDelete(i)}/>
</td>
</tr>
- ))}
- </tbody>
- </table>
+ </tbody>
+ </table>
+ </>
);
}
diff --git a/src/components/tables/scss/table.scss b/src/components/tables/scss/table.scss
index 13e247a..0bb5a48 100644
--- a/src/components/tables/scss/table.scss
+++ b/src/components/tables/scss/table.scss
@@ -53,3 +53,11 @@ table {
white-space: pre-line;
}
}
+
+table .total {
+ font-size: 1.2em;
+ color: $primaryAccentColor;
+ td:not(.empty) {
+ border-color: $secondaryAccentColor;
+ }
+}