105 lines
3.3 KiB
JavaScript
105 lines
3.3 KiB
JavaScript
import React, {
|
|
createContext,
|
|
useContext,
|
|
useEffect,
|
|
useMemo,
|
|
useState,
|
|
} from "react";
|
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
import { useEmployee } from "../../hooks/useEmployees";
|
|
import EmployeeSearchInput from "../../components/common/EmployeeSearchInput";
|
|
import { useForm } from "react-hook-form";
|
|
import Label from "../../components/common/Label";
|
|
import AdvancePaymentList from "../../components/AdvancePayment/AdvancePaymentListDetails";
|
|
import { employee } from "../../data/masters";
|
|
import { formatFigure } from "../../utils/appUtils";
|
|
import { useParams } from "react-router-dom";
|
|
import { useExpenseTransactions } from "../../hooks/useExpense";
|
|
|
|
export const AdvancePaymentContext = createContext();
|
|
export const useAdvancePaymentContext = () => {
|
|
const context = useContext(AdvancePaymentContext);
|
|
if (!context) {
|
|
throw new Error(
|
|
"useAdvancePaymentContext must be used within an AdvancePaymentProvider"
|
|
);
|
|
}
|
|
return context;
|
|
};
|
|
const AdvancePaymentPageDetails = () => {
|
|
const { employeeId } = useParams();
|
|
|
|
const { data: transactionData } = useExpenseTransactions(employeeId, {
|
|
enabled: !!employeeId
|
|
});
|
|
|
|
const employeeName = useMemo(() => {
|
|
if (Array.isArray(transactionData) && transactionData.length > 0) {
|
|
const emp = transactionData[0].employee;
|
|
if (emp) return `${emp.firstName} ${emp.lastName}`;
|
|
}
|
|
return "";
|
|
}, [transactionData]);
|
|
|
|
const [balance, setBalance] = useState(null);
|
|
const { control, reset, watch } = useForm({
|
|
defaultValues: {
|
|
employeeId: employeeId || "",
|
|
searchString: "",
|
|
},
|
|
});
|
|
|
|
const selectedEmployeeId = employeeId || watch("employeeId");
|
|
|
|
const searchString = watch("searchString");
|
|
|
|
useEffect(() => {
|
|
const selectedEmpoyee = sessionStorage.getItem("transaction-empId");
|
|
reset({
|
|
employeeId: selectedEmpoyee || "",
|
|
});
|
|
}, [reset]);
|
|
|
|
return (
|
|
<AdvancePaymentContext.Provider value={{ setBalance }}>
|
|
<div className="container-fluid">
|
|
<Breadcrumb
|
|
data={[
|
|
{ label: "Home", link: "/dashboard" },
|
|
{ label: "Finance", link: "/advance-payment" },
|
|
{ label: "Advance Payment", link: "/advance-payment" },
|
|
employeeName && { label: employeeName, link: "" },
|
|
].filter(Boolean)}
|
|
/>
|
|
|
|
<div className="card px-4 py-2 page-min-h ">
|
|
<div className="row py-1 justify-content-end">
|
|
<div className="col-md-8 d-flex align-items-center justify-content-end">
|
|
{balance ? (
|
|
<>
|
|
<label className="fs-5 fw-semibold">Current Balance : </label>
|
|
<span
|
|
className={`${balance > 0 ? "text-success" : "text-danger"} fs-5 fw-bold ms-1`}
|
|
>
|
|
{balance > 0 && <i className="bx bx-plus b-sm"></i>}{" "}
|
|
{formatFigure(balance, {
|
|
type: "currency",
|
|
currency: "INR",
|
|
})}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<></>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
<AdvancePaymentList employeeId={selectedEmployeeId} searchString={searchString} />
|
|
</div>
|
|
</div>
|
|
</AdvancePaymentContext.Provider>
|
|
);
|
|
};
|
|
|
|
export default AdvancePaymentPageDetails;
|