import React from "react";
import "./index.css";
import { useGetInvoice } from "../../../apis/Invoice";
import { useParams } from "react-router-dom";
import LoadingAnimation from "../Loading/LoadingAnimation";
import { useMemo } from "react";
import { useDate } from "../../../utils/preparedDate";
import { useRef } from "react";
import domtoimage from "dom-to-image";
import { useReactToPrint } from "react-to-print";
/**
* Represents Invoice page component
* @module Invoice
* @return {JSX.Element}
*/
const Invoice = () => {
/**
* React useParams for getting id
* @name useParams
* @memberof module:Invoice
* @type {object}
*
*/
const { id } = useParams("id");
/**
* React useRef for print
* @name divRef
* @memberof module:Invoice
* @type {React.MutableRefObject<null>}
*/
const divRef = useRef(null);
/**
* React query hook for getting invoice using id
* @name useGetInvoice
* @memberof module:Invoice
* @tyep {object}
*
*/
const { data: invoiceData, isLoading } = useGetInvoice(id);
/**
* React useMemo for getting invoice data
* @name invoice
* @memberof module:Invoice
* @type {*|{}}
*/
const invoice = useMemo(() => {
let temp = invoiceData?.data?.data || {};
return temp;
}, [invoiceData?.data]);
/**
* Function for getting total amount
* @param total {number} - total committed amount
* @param fee {number} - management fee
* @param charge {number} - premium charge
* @return {number} - total amount
* @function getTotalAmount
* @return {number} - total amount
*/
const getTotalAmount = (total = 0, fee = 0, charge = 0) => {
return parseInt(total) + parseInt(fee) + parseInt(charge);
};
const printing = useReactToPrint({
content: () => divRef.current,
onAfterPrint: () => setPrint(false),
});
/**
* Function for handle print
* @name handlePrint
* @memberof module:Invoice
* @function handlePrint
* @return {function(): void}
*/
const handlePrint = () => {
const time = setTimeout(printing, 10);
return () => clearTimeout(time);
};
const handleDownload = () => {
try {
const element = document.getElementById("invoice_div_ref"); // Replace with your div's ID
setTimeout(() => {
domtoimage
.toJpeg(element)
.then(function (dataUrl) {
const link = document.createElement("a");
link.download = "certificate.jpg";
link.href = dataUrl;
link.click();
})
.catch(function (error) {
console.error("Error capturing image:", error);
});
}, 1000);
} catch (err) {
console.log(err.message);
}
};
if (isLoading) {
return <LoadingAnimation />;
}
return (
<div className="invoice_wrapper ">
<div className="invoice_action_buttons flex justify-end gap-2 m-3 ">
<div className="readmore_list_view" onClick={() => handlePrint()}>
<p>Print</p>
<ion-icon name="print-outline"></ion-icon>
</div>
</div>
<div className="invoice_div " id="invoice_div_ref" ref={divRef}>
<div className="invoice_header flex justify-between">
<div>
{invoice?.share_contract[0]?.share_data?.company_name || ""}
</div>
<div className="mr-3">
{invoice?.share_contract[0]?.shareholder || ""}
</div>
</div>
<div className="date_section mt-5">
<div className="invoice_date_item font-bold flex justify-between">
<div>Invoice Date</div>
<div>Source</div>
</div>
<div className="invoice_date_item invoice_date_value flex justify-between">
<div>{useDate(invoice?.created)}</div>
<div>{invoice?.payment_type || ""}</div>
</div>
</div>
<div className="invoice_table_container mt-5">
<table className="invoice_table">
<thead className="invoice_table_row">
<tr>
<th style={{ width: "20px" }}>s.n</th>
<th>Shareholder</th>
<th>Price</th>
<th>Committed kitta</th>
<th>Committed amount</th>
<th>Management fee</th>
<th>Premium charge</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td style={{ width: "20px", textAlign: "center" }}> 1</td>
<td>{invoice?.name}</td>
<td>{invoice?.share_contract[0]?.share_data?.price || ""}</td>
<td>{invoice?.committed_kitta || ""}</td>
<td>Rs {invoice?.committed_amount || ""}</td>
<td>
Rs{" "}
{invoice?.share_contract[0]?.share_data?.management_fee || 0}
</td>
<td>
Rs{" "}
{invoice?.share_contract[0]?.share_data?.premium_charge || 0}
</td>
<td>
Rs
{getTotalAmount(
invoice?.committed_amount,
invoice?.share_contract[0]?.share_data?.management_fee,
invoice?.share_contract[0]?.share_data?.premium_charge
)}
</td>
</tr>
</tbody>
<tfoot style={{ paddingTop: "20px" }}>
<tr>
<th colspan="7" className="text-right pe-4">
Total
</th>
<td>
Rs
{getTotalAmount(
invoice?.committed_amount,
invoice?.share_contract[0]?.share_data?.management_fee,
invoice?.share_contract[0]?.share_data?.premium_charge
)}
</td>
</tr>
</tfoot>
</table>
</div>
<div className="invoice_footer_container flex justify-end mt-3">
<div className="invoice_footer">
<div className="invoice_footer_item flex justify-between">
{invoice?.payment_status === "PAID" ? (
<>
<div className=" text-secondary">
Paid on {invoice?.payment_date_english || ""}
</div>
<div className="text-secondary-emphasis">
Rs {invoice?.committed_amount || 0}
</div>
</>
) : (
<>
<div className=" text-secondary">Paid amount</div>
<div className="text-secondary-emphasis">Rs 0.00</div>
</>
)}
</div>
<div className="horizontal_lines">
<div></div>
<div></div>
</div>
<div className="invoice_footer_item flex justify-between">
<div className="font-bold">Amount due</div>
<div className="font-bold">
RS{" "}
{invoice?.payment_status === "PAID"
? getTotalAmount(
invoice?.committed_amount,
invoice?.share_contract[0]?.share_data?.management_fee,
invoice?.share_contract[0]?.share_data?.premium_charge
) - parseInt(invoice?.payment_amount || 0)
: getTotalAmount(
invoice?.committed_amount,
invoice?.share_contract[0]?.share_data?.management_fee,
invoice?.share_contract[0]?.share_data?.premium_charge
)}
</div>
</div>
</div>
</div>
<div className="info_text text-secondary text-sm mt-5">
<i>This is computer generated invoice.</i>
</div>
</div>
</div>
);
};
export default Invoice;
Source