Untitled
unknown
javascript
2 years ago
11 kB
7
Indexable
import React, { useCallback, useMemo, useState } from "react";
import { Button, Input, Modal, Typography } from "antd";
import TextFormField from "../../../../components/TextFormField";
import CheckboxWithWidth from "../../../../components/CheckboxWithWidth";
import HeadingField from "../../../../components/HeadingField";
import TitleField from "../../../../components/TitleField";
import FlexTwo from "../../../../components/FlexTwo";
import { PlusOutlined } from "@ant-design/icons";
import ItemModal from "../../../../components/ItemModal";
import ItemServiceType from "../../../../components/ItemServiceType";
import { useEffect } from "react";
import VatGroup from "../../../../components/VatGroup";
import shortid from "shortid";
import format from "../../../../helper/format";
const { Text } = Typography;
const Contents = (props) => {
const { data, vendor } = props;
const [itemServiceData, setItemService] = useState([]);
const [openItem, setOpenItem] = useState(false);
const [Total, setTotal] = useState(0);
const [downPayment, setDownPayment] = useState(100);
useEffect(() => {
if (data) {
const lines = data?.DocumentLines?.map((e) => {
// console.log(e?.ItemDescription)
// console.log(lines)
return {
key: e?.ItemCode,
ItemCode: e?.ItemCode,
ItemDescription: e?.ItemDescription,
UoMCode: e?.UoMCode,
Quantity: e?.Quantity,
UnitPrice: e?.Price,
Discount: e?.DiscountPercent,
VatGroup: e?.TaxCode,
Total: e?.LineTotal,
};
});
props?.onUpdateItem(lines);
setItemService(lines);
}
}, []);
const closeItemModal = useCallback(() => setOpenItem(false), []);
const openItemModal = useCallback(() => {
// if (!vendor?.AgreementNo) {
// Modal.warning({
// centered: true,
// content: "Please Vendor !",
// });
// return;
// }
setOpenItem(true);
}, [vendor]);
const onConfirmItemModal = useCallback(
(records) => {
setOpenItem(false);
let items = itemServiceData ?? [];
records?.forEach((e) => {
let oldItem = items.filter((f) => f?.ItemCode === e?.ItemCode)?.[0];
if (!oldItem) items.push(e);
});
setItemService(items);
if (props?.onUpdateItem) {
props?.onUpdateItem(items);
}
},
[itemServiceData]
);
const onUpdateItem = useCallback(
(record, field, value) => {
let items = itemServiceData;
const index = items.indexOf(record);
if (
field === "UnitPrice" ||
field === "Discount" ||
field === "Quantity"
) {
items[index][field] = value.trim("") === "" ? 0 : value.trim("");
} else {
items[index][field] = value?.trim("");
}
let subTotal = record?.UnitPrice * record?.Quantity;
let grantTotal = subTotal - (subTotal * items[index].Discount) / 100;
items[index]["Total"] = grantTotal;
setTotal(grantTotal);
setItemService(items);
props?.onUpdateItem(items);
},
[itemServiceData]
);
const onChangeDownPayment = useCallback((e) =>
setDownPayment(parseInt(e.target.value))
);
const subTotal = () => {
let amount = itemServiceData?.reduce(function (prev, current) {
return prev + current.Total;
}, 0);
return format.formatCurrency(amount);
};
const subTotalAfterDiscount = () => {
let amount = itemServiceData?.reduce(function (prev, current) {
return prev + current.Total;
}, 0);
return format.formatCurrency((amount * downPayment) / 100);
};
const totalTax = () => {
const total = itemServiceData?.reduce(function (prev, current) {
let amount = prev + (current.Total * current.VatRate) / 100;
return format.formatCurrency(
downPayment === 100 ? amount : amount - (amount * downPayment) / 100
);
}, 0);
return format.formatCurrency(total);
};
const totalSubTotal = () => {
const total = itemServiceData?.reduce(function (prev, current) {
let amount =
prev +
(current.Total * (current?.VatRate ?? 0)) / 100 +
(current?.Total ?? 0);
return downPayment === 100
? amount
: amount - (amount * downPayment) / 100;
}, 0);
return format.formatCurrency(total);
};
const onDeleteItem = useCallback(
(record) => {
let newRecords = itemServiceData.filter(
(e) => e?.ItemCode !== record?.ItemCode
);
setItemService(newRecords);
props?.onUpdateItem(newRecords);
},
[itemServiceData]
);
const columns = [
{
title: "Item No.",
width: 200,
},
{
title: "Item Description",
width: 300,
},
{
title: "Quantity",
width: 100,
},
{
title: "UoM Code",
width: 100,
},
{
title: "Unit Price",
width: 100,
},
{
title: "Discount %",
width: 100,
},
{
title: "Tax Code",
width: 100,
},
{
title: "Total",
width: 100,
},
// {
// title: "No. of Packages",
// width: 200,
// },
];
return (
<>
<HeadingField Title="CONTENTS" />
<div>
<TitleField label="Preferences" />
<div className="w-full flex sm:flex-wrap lg:flex-wrap justify-between ">
<div className="4xl:w-5/12 sm:w-full lg:w-full">
<ItemServiceType label="Services / Items" />
</div>
</div>
<div className="my-2"></div>
<Button size="small" onClick={openItemModal}>
<div className="-mt-[5px]">
<PlusOutlined style={{ fontSize: "12px" }} />
</div>
</Button>
<ItemModal
open={openItem}
vendor={vendor}
onCancel={closeItemModal}
onConfirm={onConfirmItemModal}
/>
<div className="my-2 "></div>
<div className="w-full overflow-x-auto">
<table className="border w-full table-fixed text-sm">
<thead>
<tr>
<td className="p-1 border " width={50}></td>
{columns.map((e) => (
<td className="p-1 border" width={e?.width} key={e?.title}>
{e?.title}
</td>
))}
</tr>
</thead>
<tbody>
{itemServiceData?.length > 0 ? (
itemServiceData?.map((e) => (
<tr key={shortid.generate()}>
<td className="p-1 border text-center">
<div
className="p-2 text-lg text-red-600 hover:cursor-pointer hover:bg-gray-100 rounded"
onClick={() => onDeleteItem(e)}
>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M20 12H4"
/>
</svg>
</div>
</td>
<td className="p-1 border">{e?.ItemCode}</td>
<td className="p-1 border">{e?.ItemDescription}</td>
<td className="p-1 border">
<input
className="w-full p-1 px-3 border rounded"
defaultValue={e?.Quantity ?? 0}
onBlur={(event) =>
onUpdateItem(e, "Quantity", event.target.value)
}
/>
</td>
<td className="p-1 border">{e?.UoMCode}</td>
<td className="p-1 border">
<input
className="w-full p-1 px-3 border rounded"
defaultValue={e?.UnitPrice ?? 0}
onBlur={(event) =>
onUpdateItem(e, "UnitPrice", event.target.value)
}
/>
</td>
<td className="p-1 border">
<input
className="w-full p-1 px-3 border rounded"
defaultValue={e?.Discount ?? 0}
onBlur={(event) =>
onUpdateItem(e, "Discount", event.target.value)
}
/>
</td>
<td className="p-1 border">
<VatGroup
defaultValue={e?.VatGroup}
onChange={(value) => onUpdateItem(e, "VatGroup", value)}
/>
</td>
<td className="p-1 border">
<input
className="w-full p-1 px-3 border rounded"
value={e?.Total ?? 0}
onChange={(value) => {}}
/>
</td>
{/* <td className="p-1 border">{e?.VatRate}</td> */}
</tr>
))
) : (
<tr>
<td colSpan={columns.length} className="h-[6rem] text-center">
No Records
</td>
</tr>
)}
</tbody>
</table>
</div>
<FlexTwo>
<div></div>
<div>
<TitleField label="Total Summary" />
<TextFormField
label="Total Before Discount :"
addonAfter="$"
value={subTotal()}
/>
<div className="w-full flex">
<div className="w-[35%] text-gray-500">
DMP :
</div>
<div className="w-[65%] flex">
<div className="w-4/12">
<TextFormField
prefix="%"
onChange={onChangeDownPayment}
value={downPayment}
/>
</div>
<div className="w-8/12 pl-3">
<TextFormField
prefix="AUD"
value={subTotalAfterDiscount()}
readOnly
/>
</div>
</div>
</div>
<CheckboxWithWidth label="Rounding:" />
<TextFormField label="Tax:" value={totalTax()} />
<TextFormField
label="Total Payment Due :"
value={totalSubTotal()}
/>
<TextFormField label="Applied Amount :" readOnly />
<TextFormField label="Balance Due :" value={totalSubTotal()} />
</div>
</FlexTwo>
</div>
</>
);
};
export default Contents;
Editor is loading...