Merge branch 'upgrade_Expense' of https://git.marcoaiot.com/admin/marco.pms.web into Recurring_Expense
This commit is contained in:
commit
10ec11a828
@ -12,6 +12,7 @@ import {
|
||||
} from "../../utils/constants";
|
||||
import {
|
||||
formatCurrency,
|
||||
formatFigure,
|
||||
getColorNameFromHex,
|
||||
useDebounce,
|
||||
} from "../../utils/appUtils";
|
||||
@ -166,7 +167,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
{
|
||||
key: "amount",
|
||||
label: "Amount",
|
||||
getValue: (e) => <>{formatCurrency(e?.amount)}</>,
|
||||
getValue: (e) => <>{formatFigure(e?.amount,{type:"currency",currency : e?.currency?.currencyCode ?? "INR"} )}</>,
|
||||
isAlwaysVisible: true,
|
||||
align: "text-end",
|
||||
},
|
||||
@ -288,11 +289,11 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
(col.isAlwaysVisible || groupBy !== col.key) && (
|
||||
<td
|
||||
key={col.key}
|
||||
className={`d-table-cell ${col.align ?? ""}`}
|
||||
className={`d-table-cell ml-2 ${col.align ?? ""}`}
|
||||
>
|
||||
{col.customRender
|
||||
<div className="d-flex px-2">{col.customRender
|
||||
? col.customRender(expense)
|
||||
: col.getValue(expense)}
|
||||
: col.getValue(expense)}</div>
|
||||
</td>
|
||||
)
|
||||
)}
|
||||
@ -307,7 +308,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
})
|
||||
}
|
||||
></i>
|
||||
{canDetetExpense(expense) &&
|
||||
{
|
||||
canEditExpense(expense) && (
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
|
||||
@ -13,7 +13,7 @@ export const ExpenseSchema = (expenseTypes) => {
|
||||
return z
|
||||
.object({
|
||||
projectId: z.string().min(1, { message: "Project is required" }),
|
||||
expensesCategoryId: z
|
||||
expenseCategoryId: z
|
||||
.string()
|
||||
.min(1, { message: "Expense type is required" }),
|
||||
paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
|
||||
|
||||
@ -8,11 +8,11 @@ const ExpenseStatusLogs = ({ data }) => {
|
||||
const [visibleCount, setVisibleCount] = useState(4);
|
||||
|
||||
const sortedLogs = useMemo(() => {
|
||||
if (!data?.updateLogs) return [];
|
||||
return [...data.updateLogs].sort(
|
||||
if (!data?.expenseLogs) return [];
|
||||
return [...data.expenseLogs].sort(
|
||||
(a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)
|
||||
);
|
||||
}, [data?.updateLogs]);
|
||||
}, [data?.expenseLogs]);
|
||||
|
||||
const logsToShow = useMemo(
|
||||
() => sortedLogs.slice(0, visibleCount),
|
||||
@ -22,9 +22,9 @@ const ExpenseStatusLogs = ({ data }) => {
|
||||
const timelineData = useMemo(() => {
|
||||
return logsToShow.map((log, index) => ({
|
||||
id: index + 1,
|
||||
title: log.nextStatus?.name || "Status Updated",
|
||||
description: log.nextStatus?.description || "",
|
||||
timeAgo: moment.utc(log?.updatedAt).local().fromNow(),
|
||||
title: log.action || "Status Updated",
|
||||
description: log.comment || "",
|
||||
timeAgo: log.updatedAt,
|
||||
color: getColorNameFromHex(log.nextStatus?.color) || "primary",
|
||||
users: log.updatedBy
|
||||
? [
|
||||
@ -45,45 +45,7 @@ const ExpenseStatusLogs = ({ data }) => {
|
||||
|
||||
return (
|
||||
<div className="page-min-h overflow-auto">
|
||||
{/* <div className="row g-2">
|
||||
{logsToShow.map((log) => (
|
||||
<div key={log.id} className="col-12 d-flex align-items-start mb-1">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={log.updatedBy.firstName}
|
||||
lastName={log.updatedBy.lastName}
|
||||
/>
|
||||
|
||||
<div className="flex-grow-1">
|
||||
<div className="text-start">
|
||||
<div className="flex">
|
||||
<span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
|
||||
<small className="text-secondary text-tiny ms-2">
|
||||
<em>{log.action}</em>
|
||||
</small>
|
||||
<span className="text-tiny text-secondary d-block">
|
||||
{formatUTCToLocalTime(log.updateAt, true)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="d-flex align-items-center text-muted small mt-1">
|
||||
<span>{log.comment}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{sortedLogs.length > visibleCount && (
|
||||
<div className="text-center my-1">
|
||||
<button
|
||||
className="btn btn-xs btn-outline-primary"
|
||||
onClick={handleShowMore}
|
||||
>
|
||||
Show More
|
||||
</button>
|
||||
</div>
|
||||
)} */}
|
||||
|
||||
<Timeline items={timelineData} />
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import React from "react";
|
||||
import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
|
||||
import Tooltip from "../common/Tooltip";
|
||||
|
||||
const Filelist = ({ files, removeFile, expenseToEdit }) => {
|
||||
return (
|
||||
<div className="d-block">
|
||||
<div className="d-flex flex-wrap gap-2 mt-2">
|
||||
{files
|
||||
.filter((file) => {
|
||||
if (expenseToEdit) {
|
||||
@ -12,14 +13,12 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
|
||||
return true;
|
||||
})
|
||||
.map((file, idx) => (
|
||||
<div className="col-12 col-sm-6 col-md-4 col-lg-8 bg-white shadow-sm rounded p-2 m-2">
|
||||
<div className="col-12 col-sm-6 col-md-4 bg-white " key={idx}>
|
||||
<div className="row align-items-center">
|
||||
{/* File icon and info */}
|
||||
<div className="col-10 d-flex align-items-center gap-2">
|
||||
<i
|
||||
className={`bx ${getIconByFileType(
|
||||
file?.contentType
|
||||
)} fs-3`}
|
||||
className={`bx ${getIconByFileType(file?.contentType)} fs-3`}
|
||||
style={{ minWidth: "30px" }}
|
||||
></i>
|
||||
|
||||
@ -34,14 +33,17 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
|
||||
</div>
|
||||
|
||||
<div className="col-2 text-end">
|
||||
<Tooltip text={"Remove file"}>
|
||||
<i
|
||||
className="bx bx-trash fs-4 cursor-pointer text-danger bx-sm "
|
||||
role="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
debugger;
|
||||
removeFile(expenseToEdit ? file.documentId : idx);
|
||||
}}
|
||||
></i>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -51,3 +53,44 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
|
||||
};
|
||||
|
||||
export default Filelist;
|
||||
|
||||
export const FilelistView = ({ files, viewFile }) => {
|
||||
return (
|
||||
<div className="d-flex flex-wrap gap-2 mt-2">
|
||||
{files?.map((file, idx) => (
|
||||
<div className="col-12 col-sm-6 col-md-4 bg-white " key={idx}>
|
||||
<div className="row align-items-center">
|
||||
{/* File icon and info */}
|
||||
<div className="col-10 d-flex align-items-center gap-2">
|
||||
<i
|
||||
className={`bx ${getIconByFileType(file?.fileName)} fs-3`}
|
||||
style={{ minWidth: "30px" }}
|
||||
></i>
|
||||
|
||||
<div
|
||||
className="d-flex flex-column text-truncate"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
viewFile({
|
||||
IsOpen: true,
|
||||
Image: file.preSignedUrl,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<span className="fw-medium small text-truncate">
|
||||
{file.fileName}
|
||||
</span>
|
||||
<span className="text-body-secondary small">
|
||||
<Tooltip text={"Click on file"}>
|
||||
{" "}
|
||||
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
||||
</Tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -31,6 +31,7 @@ import Label from "../common/Label";
|
||||
import EmployeeSearchInput from "../common/EmployeeSearchInput";
|
||||
import Filelist from "./Filelist";
|
||||
|
||||
|
||||
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
const {
|
||||
data,
|
||||
@ -128,7 +129,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
reader.onload = () => resolve(reader.result.split(",")[1]);
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
const removeFile = (index) => {
|
||||
const removeFile = (index) => {documentId
|
||||
if (expenseToEdit) {
|
||||
const newFiles = files.map((file, i) => {
|
||||
if (file.documentId !== index) return file;
|
||||
@ -148,7 +149,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
if (expenseToEdit && data) {
|
||||
reset({
|
||||
projectId: data.project.id || "",
|
||||
expensesCategoryId: data.expensesType.id || "",
|
||||
expenseCategoryId: data.expensesCategory?.id || "",
|
||||
paymentModeId: data.paymentMode.id || "",
|
||||
paidById: data.paidBy.id || "",
|
||||
transactionDate: data.transactionDate?.slice(0, 10) || "",
|
||||
@ -245,7 +246,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="expensesCategoryId"
|
||||
{...register("expensesCategoryId")}
|
||||
{...register("expenseCategoryId")}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select Type
|
||||
|
||||
@ -9,7 +9,12 @@ import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
|
||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||
import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
|
||||
import {
|
||||
formatCurrency,
|
||||
getColorNameFromHex,
|
||||
getIconByFileType,
|
||||
localToUtc,
|
||||
} from "../../utils/appUtils";
|
||||
import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import {
|
||||
@ -38,7 +43,8 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
const IsReview = useHasUserPermission(REVIEW_EXPENSE);
|
||||
const [imageLoaded, setImageLoaded] = useState({});
|
||||
const { setDocumentView } = useExpenseContext();
|
||||
const ActionSchema = ExpenseActionScheam(IsPaymentProcess,data?.createdAt) ?? z.object({});
|
||||
const ActionSchema =
|
||||
ExpenseActionScheam(IsPaymentProcess, data?.createdAt) ?? z.object({});
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
register,
|
||||
@ -106,19 +112,28 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
|
||||
return (
|
||||
<form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row mb-1">
|
||||
<div className="col-12 mb-1">
|
||||
<h5 className="fw-semibold m-0">Expense Details</h5>
|
||||
<hr />
|
||||
</div>
|
||||
<div className="col-12 text-start fw-semibold my-2">{data?.expenseUId}</div>
|
||||
|
||||
<div className="row mb-1 border-top border-2 border-light-subtle">
|
||||
<div className="col-12 col-lg-7 col-xl-8 border-end border-2 border-light-subtle mb-3">
|
||||
<div className="row">
|
||||
<div className="col-12 d-flex justify-content-between text-start fw-semibold my-2">
|
||||
<span>{data?.expenseUId}</span>
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
getColorNameFromHex(data?.status?.color) || "secondary"
|
||||
}`}t
|
||||
>
|
||||
{data?.status?.name}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Row 1 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
|
||||
Transaction Date :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
@ -126,12 +141,10 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
|
||||
Expense Type :
|
||||
</label>
|
||||
<div className="text-muted">{data?.expensesType?.name}</div>
|
||||
@ -141,46 +154,36 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
{/* Row 2 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
|
||||
Supplier :
|
||||
</label>
|
||||
<div className="text-muted">{data?.supplerName}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
|
||||
Amount :
|
||||
</label>
|
||||
<div className="text-muted">₹ {data.amount}</div>
|
||||
<div className="text-muted"> {formatCurrency(data.amount,data.curency.currencyCode)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
|
||||
Payment Mode :
|
||||
</label>
|
||||
<div className="text-muted">{data?.paymentMode?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{data?.gstNumber && (
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
|
||||
GST Number :
|
||||
</label>
|
||||
<div className="text-muted">{data?.gstNumber}</div>
|
||||
@ -188,132 +191,89 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Row 4 */}
|
||||
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Status :
|
||||
</label>
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
getColorNameFromHex(data?.status?.color) || "secondary"
|
||||
}`}
|
||||
>
|
||||
{data?.status?.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
|
||||
Pre-Approved :
|
||||
</label>
|
||||
<div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 5 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
|
||||
Project :
|
||||
</label>
|
||||
<div className="text-muted">{data?.project?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
|
||||
Created At :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{formatUTCToLocalTime(data?.createdAt, true)}
|
||||
</div>
|
||||
<div className="text-muted">{formatUTCToLocalTime(data?.createdAt, true)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 6 */}
|
||||
{/* Created & Paid By */}
|
||||
{data.createdBy && (
|
||||
<div className="col-md-6 text-start">
|
||||
<div className="col-md-6 text-start mb-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
|
||||
Created By :
|
||||
</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
classAvatar="m-0 me-1"
|
||||
firstName={data.createdBy?.firstName}
|
||||
lastName={data.createdBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data.createdBy?.firstName ?? ""} ${
|
||||
data.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
{`${data.createdBy?.firstName ?? ""} ${data.createdBy?.lastName ?? ""}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-md-6 text-start">
|
||||
|
||||
<div className="col-md-6 text-start mb-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
|
||||
Paid By :
|
||||
</label>
|
||||
<div className="d-flex align-items-center ">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
classAvatar="m-0 me-1"
|
||||
firstName={data.paidBy?.firstName}
|
||||
lastName={data.paidBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data.paidBy?.firstName ?? ""} ${
|
||||
data.paidBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
{`${data.paidBy?.firstName ?? ""} ${data.paidBy?.lastName ?? ""}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-start my-1">
|
||||
{/* Description */}
|
||||
<div className="col-12 text-start mb-2">
|
||||
<label className="fw-semibold form-label">Description : </label>
|
||||
<div className="text-muted">{data?.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
{/* Attachments */}
|
||||
<div className="col-12 text-start mb-2">
|
||||
<label className="form-label me-2 mb-2 fw-semibold">Attachment :</label>
|
||||
|
||||
<div className="d-flex flex-wrap gap-2">
|
||||
{data?.documents?.map((doc) => {
|
||||
const isImage = doc.contentType?.includes("image");
|
||||
|
||||
return (
|
||||
<div
|
||||
key={doc.documentId}
|
||||
className="border rounded hover-scale p-2 d-flex flex-column align-items-center"
|
||||
style={{
|
||||
width: "80px",
|
||||
cursor: isImage ? "pointer" : "default",
|
||||
}}
|
||||
className="d-flex align-items-center cusor-pointer"
|
||||
onClick={() => {
|
||||
if (isImage) {
|
||||
setDocumentView({
|
||||
@ -323,146 +283,30 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className={`bx ${getIconByFileType(doc.contentType)}`}
|
||||
style={{ fontSize: "30px" }}
|
||||
></i>
|
||||
<small
|
||||
className="text-center text-tiny text-truncate w-100"
|
||||
title={doc.fileName}
|
||||
>
|
||||
<i className={`bx ${getIconByFileType(doc.contentType)}`} style={{ fontSize: "30px" }}></i>
|
||||
<small className="text-center text-tiny text-truncate w-100" title={doc.fileName}>
|
||||
{doc.fileName}
|
||||
</small>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{data.expensesReimburse && (
|
||||
<div className="row text-start mt-2">
|
||||
<div className="col-md-6 mb-sm-0 mb-2">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Transaction ID :
|
||||
</label>
|
||||
{data.expensesReimburse.reimburseTransactionId || "N/A"}
|
||||
{/* ... your remaining conditional sections */}
|
||||
</div>
|
||||
<div className="col-md-6 ">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Reimburse Date :
|
||||
</label>
|
||||
{formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
|
||||
</div>
|
||||
|
||||
{data.expensesReimburse && (
|
||||
<>
|
||||
<div className="col-md-6 d-flex align-items-center">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Reimburse By :
|
||||
</label>
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-1"
|
||||
firstName={data?.expensesReimburse?.reimburseBy?.firstName}
|
||||
lastName={data?.expensesReimburse?.reimburseBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
|
||||
</span>
|
||||
<div className="col-12 col-lg-5 col-xl-4">
|
||||
<div className="d-flex align-items-center text-secondary my-2">
|
||||
<i className='bx bx-time-five me-2'></i> <p className=" m-0">TimeLine</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<hr className="divider my-1 border-2 divider-primary my-2" />
|
||||
|
||||
{Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
|
||||
<>
|
||||
{IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<label className="form-label">Transaction Id </label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register("reimburseTransactionId")}
|
||||
/>
|
||||
{errors.reimburseTransactionId && (
|
||||
<small className="danger-text">
|
||||
{errors.reimburseTransactionId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<label className="form-label">Transaction Date </label>
|
||||
<DatePicker
|
||||
name="reimburseDate"
|
||||
control={control}
|
||||
minDate={data?.createdAt}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
{errors.reimburseDate && (
|
||||
<small className="danger-text">
|
||||
{errors.reimburseDate.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<label className="form-label">Reimburse By </label>
|
||||
<EmployeeSearchInput
|
||||
control={control}
|
||||
name="reimburseById"
|
||||
projectId={null}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-12 mb-3 text-start">
|
||||
{((nextStatusWithPermission.length > 0 && !IsRejectedExpense) ||
|
||||
(IsRejectedExpense && isCreatedBy)) && (
|
||||
<>
|
||||
<Label className="form-label me-2 mb-0" required>Comment</Label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
{...register("comment")}
|
||||
rows="2"
|
||||
/>
|
||||
{errors.comment && (
|
||||
<small className="danger-text">
|
||||
{errors.comment.message}
|
||||
</small>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{nextStatusWithPermission?.length > 0 &&
|
||||
(!IsRejectedExpense || isCreatedBy) && (
|
||||
<div className="text-end flex-wrap gap-2 my-2 mt-3">
|
||||
{nextStatusWithPermission.map((status, index) => (
|
||||
<button
|
||||
key={status.id || index}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setClickedStatusId(status.id);
|
||||
setValue("statusId", status.id);
|
||||
handleSubmit(onSubmit)();
|
||||
}}
|
||||
disabled={isPending || isFetching}
|
||||
className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
|
||||
>
|
||||
{isPending && clickedStatusId === status.id
|
||||
? "Please Wait..."
|
||||
: status.displayName || status.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<ExpenseStatusLogs data={data} />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,26 +1,47 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useCurrencies, useProjectName } from '../../hooks/useProjects';
|
||||
import Label from '../common/Label';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useExpenseCategory } from '../../hooks/masterHook/useMaster';
|
||||
import DatePicker from '../common/DatePicker';
|
||||
import { useCreatePaymentRequest, usePaymentRequestDetail, useUpdatePaymentRequest } from '../../hooks/useExpense';
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useCurrencies, useProjectName } from "../../hooks/useProjects";
|
||||
import Label from "../common/Label";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useExpenseCategory } from "../../hooks/masterHook/useMaster";
|
||||
import DatePicker from "../common/DatePicker";
|
||||
import {
|
||||
useCreatePaymentRequest,
|
||||
usePayee,
|
||||
usePaymentRequestDetail,
|
||||
useUpdatePaymentRequest,
|
||||
} from "../../hooks/useExpense";
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { formatFileSize, localToUtc } from '../../utils/appUtils';
|
||||
import { defaultPaymentRequest, PaymentRequestSchema } from './PaymentRequestSchema';
|
||||
import { INR_CURRENCY_CODE } from '../../utils/constants';
|
||||
import { useProfile } from '../../hooks/useProfile';
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { formatFileSize, localToUtc } from "../../utils/appUtils";
|
||||
import {
|
||||
defaultPaymentRequest,
|
||||
PaymentRequestSchema,
|
||||
} from "./PaymentRequestSchema";
|
||||
import { INR_CURRENCY_CODE } from "../../utils/constants";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import Filelist from "../Expenses/Filelist";
|
||||
import InputSuggestions from "../common/InputSuggestion";
|
||||
|
||||
function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
const { data, isLoading, isError, error: requestError } = usePaymentRequestDetail(requestToEdit)
|
||||
// const data = {}
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
isError,
|
||||
error: requestError,
|
||||
} = usePaymentRequestDetail(requestToEdit);
|
||||
|
||||
const { projectNames, loading: projectLoading, error, isError: isProjectError,
|
||||
const {
|
||||
projectNames,
|
||||
loading: projectLoading,
|
||||
error,
|
||||
isError: isProjectError,
|
||||
} = useProjectName();
|
||||
|
||||
const { data: currencyData, isLoading: currencyLoading, isError: currencyError } = useCurrencies();
|
||||
|
||||
const {
|
||||
data: currencyData,
|
||||
isLoading: currencyLoading,
|
||||
isError: currencyError,
|
||||
} = useCurrencies();
|
||||
|
||||
const {
|
||||
ExpenseCategories,
|
||||
@ -29,9 +50,17 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
} = useExpenseCategory();
|
||||
|
||||
const { profile } = useProfile();
|
||||
|
||||
const {data:Payees,isLoading:isPayeeLoaing,isError:isPayeeError,error:payeeError} = usePayee()
|
||||
const schema = PaymentRequestSchema(ExpenseCategories);
|
||||
const { register, control, watch, handleSubmit, setValue, reset, formState: { errors }, } = useForm({
|
||||
const {
|
||||
register,
|
||||
control,
|
||||
watch,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: defaultPaymentRequest,
|
||||
});
|
||||
@ -84,6 +113,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
const removeFile = (index) => {
|
||||
debugger
|
||||
if (requestToEdit) {
|
||||
const newFiles = files.map((file, i) => {
|
||||
if (file.documentId !== index) return file;
|
||||
@ -104,13 +134,12 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
closeModal();
|
||||
};
|
||||
|
||||
const { mutate: CreatePaymentRequest, isPending: createPending } = useCreatePaymentRequest(
|
||||
() => {
|
||||
const { mutate: CreatePaymentRequest, isPending: createPending } =
|
||||
useCreatePaymentRequest(() => {
|
||||
handleClose();
|
||||
}
|
||||
);
|
||||
const { mutate: PaymentRequestUpdate, isPending } = useUpdatePaymentRequest(() =>
|
||||
handleClose()
|
||||
});
|
||||
const { mutate: PaymentRequestUpdate, isPending } = useUpdatePaymentRequest(
|
||||
() => handleClose()
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -125,28 +154,25 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
projectId: data.project.id || "",
|
||||
expenseCategoryId: data.expenseCategory.id || "",
|
||||
isAdvancePayment: data.isAdvancePayment || false,
|
||||
billAttachments: data.documents
|
||||
? data.documents.map((doc) => ({
|
||||
billAttachments: data.attachments
|
||||
? data?.attachments?.map((doc) => ({
|
||||
fileName: doc.fileName,
|
||||
base64Data: null,
|
||||
contentType: doc.contentType,
|
||||
documentId: doc.documentId,
|
||||
documentId: doc.id,
|
||||
fileSize: 0,
|
||||
description: "",
|
||||
preSignedUrl: doc.preSignedUrl,
|
||||
isActive: doc.isActive ?? true,
|
||||
}))
|
||||
: [],
|
||||
|
||||
});
|
||||
}
|
||||
}, [data, reset]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!requestToEdit && currencyData && currencyData.length > 0) {
|
||||
const inrCurrency = currencyData.find(
|
||||
(c) => c.id === INR_CURRENCY_CODE
|
||||
);
|
||||
const inrCurrency = currencyData.find((c) => c.id === INR_CURRENCY_CODE);
|
||||
if (inrCurrency) {
|
||||
setValue("currencyId", INR_CURRENCY_CODE, { shouldValidate: true });
|
||||
}
|
||||
@ -154,14 +180,17 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
}, [currencyData, requestToEdit, setValue]);
|
||||
|
||||
const onSubmit = (fromdata) => {
|
||||
|
||||
let payload = {
|
||||
...fromdata,
|
||||
dueDate: localToUtc(fromdata.dueDate),
|
||||
payee:isItself ? profile?.employeeInfo?.id : fromdata.payee
|
||||
payee: isItself ? profile?.employeeInfo?.id : fromdata.payee,
|
||||
};
|
||||
if (requestToEdit) {
|
||||
const editPayload = { ...payload, id: data.id, payee:isItself ? profile?.employeeInfo?.id : fromdata.payee };
|
||||
const editPayload = {
|
||||
...payload,
|
||||
id: data.id,
|
||||
payee: isItself ? profile?.employeeInfo?.id : fromdata.payee,
|
||||
};
|
||||
PaymentRequestUpdate({ id: data.id, payload: editPayload });
|
||||
} else {
|
||||
CreatePaymentRequest(payload);
|
||||
@ -169,8 +198,8 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
};
|
||||
const handleSetItSelf = (e) => {
|
||||
setisItself(e.target.value);
|
||||
setValue('payee',profile?.employeeInfo.id)
|
||||
}
|
||||
setValue("payee", `${profile?.employeeInfo.firstName} ${profile?.employeeInfo.lastName}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container p-3">
|
||||
@ -232,7 +261,6 @@ setValue('payee',profile?.employeeInfo.id)
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Title and Advance Payment */}
|
||||
@ -248,9 +276,7 @@ setValue('payee',profile?.employeeInfo.id)
|
||||
{...register("title")}
|
||||
/>
|
||||
{errors.title && (
|
||||
<small className="danger-text">
|
||||
{errors.title.message}
|
||||
</small>
|
||||
<small className="danger-text">{errors.title.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -262,7 +288,8 @@ setValue('payee',profile?.employeeInfo.id)
|
||||
id="isAdvancePayment"
|
||||
className="form-select form-select-sm"
|
||||
{...register("isAdvancePayment", {
|
||||
setValueAs: (v) => v === "true" ? true : v === "false" ? false : undefined,
|
||||
setValueAs: (v) =>
|
||||
v === "true" ? true : v === "false" ? false : undefined,
|
||||
})}
|
||||
>
|
||||
<option value="">Select Option</option>
|
||||
@ -270,14 +297,13 @@ setValue('payee',profile?.employeeInfo.id)
|
||||
<option value="false">False</option>
|
||||
</select>
|
||||
{errors.isAdvancePayment && (
|
||||
<small className="danger-text">{errors.isAdvancePayment.message}</small>
|
||||
<small className="danger-text">
|
||||
{errors.isAdvancePayment.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/* Date and Amount */}
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-6">
|
||||
@ -288,13 +314,11 @@ setValue('payee',profile?.employeeInfo.id)
|
||||
name="dueDate"
|
||||
control={control}
|
||||
minDate={new Date()}
|
||||
className='w-100'
|
||||
className="w-100"
|
||||
/>
|
||||
|
||||
{errors.dueDate && (
|
||||
<small className="danger-text">
|
||||
{errors.dueDate.message}
|
||||
</small>
|
||||
<small className="danger-text">{errors.dueDate.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -323,18 +347,17 @@ setValue('payee',profile?.employeeInfo.id)
|
||||
<Label htmlFor="payee" className="form-label" required>
|
||||
Payee (Supplier Name/Transporter Name/Other)
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
id="payee"
|
||||
className="form-control form-control-sm"
|
||||
{...register("payee")}
|
||||
disabled={isItself}
|
||||
|
||||
<InputSuggestions
|
||||
organizationList={Payees}
|
||||
value={watch("payee") || ""}
|
||||
onChange={(val) =>
|
||||
setValue("payee", val, { shouldValidate: true })
|
||||
}
|
||||
error={errors.payee?.message}
|
||||
/>
|
||||
|
||||
{errors.payee && (
|
||||
<small className="danger-text">
|
||||
{errors.payee.message}
|
||||
</small>
|
||||
<small className="danger-text">{errors.payee.message}</small>
|
||||
)}
|
||||
|
||||
{/* Checkbox below input */}
|
||||
@ -352,7 +375,6 @@ setValue('payee',profile?.employeeInfo.id)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="currencyId" className="form-label" required>
|
||||
Currency
|
||||
@ -378,7 +400,6 @@ setValue('payee',profile?.employeeInfo.id)
|
||||
<small className="danger-text">{errors.currencyId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
@ -404,7 +425,7 @@ setValue('payee',profile?.employeeInfo.id)
|
||||
{/* Upload Document */}
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-12">
|
||||
<Label className="form-label">
|
||||
<Label className="form-label" required>
|
||||
Upload Bill{" "}
|
||||
</Label>
|
||||
|
||||
@ -437,42 +458,12 @@ setValue('payee',profile?.employeeInfo.id)
|
||||
{errors.billAttachments.message}
|
||||
</small>
|
||||
)}
|
||||
{Array.isArray(files) && files.length > 0 && (
|
||||
|
||||
<div className="d-block">
|
||||
{files
|
||||
.filter((file) => {
|
||||
if (requestToEdit) {
|
||||
return file.isActive;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.map((file, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
className="d-flex justify-content-between text-start p-1"
|
||||
href={file.preSignedUrl || "#"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div>
|
||||
<span className="mb-0 text-secondary small d-block">
|
||||
{file.fileName}
|
||||
</span>
|
||||
<span className="text-body-secondary small d-block">
|
||||
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
||||
</span>
|
||||
</div>
|
||||
<i
|
||||
className="bx bx-trash bx-sm cursor-pointer text-danger"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
removeFile(requestToEdit ? file.documentId : idx);
|
||||
}}
|
||||
></i>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
{files.length > 0 && (
|
||||
<Filelist
|
||||
files={files}
|
||||
removeFile={removeFile}
|
||||
expenseToEdit={requestToEdit}
|
||||
/>
|
||||
)}
|
||||
|
||||
{Array.isArray(errors.billAttachments) &&
|
||||
@ -489,7 +480,6 @@ setValue('payee',profile?.employeeInfo.id)
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex justify-content-end gap-3">
|
||||
|
||||
<button
|
||||
type="reset"
|
||||
disabled={createPending || isPending}
|
||||
@ -510,10 +500,9 @@ setValue('payee',profile?.employeeInfo.id)
|
||||
: "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default ManagePaymentRequest
|
||||
export default ManagePaymentRequest;
|
||||
|
||||
@ -6,6 +6,7 @@ import {
|
||||
} from "../../utils/constants";
|
||||
import {
|
||||
formatCurrency,
|
||||
formatFigure,
|
||||
getColorNameFromHex,
|
||||
useDebounce,
|
||||
} from "../../utils/appUtils";
|
||||
@ -131,7 +132,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
|
||||
align: "text-start",
|
||||
getValue: (e) => (
|
||||
<>
|
||||
{formatCurrency(e?.amount)} {e.currency.currencyCode}
|
||||
{formatFigure(e?.amount,{type:"currency",currency : e?.currency?.currencyCode})}
|
||||
</>
|
||||
),
|
||||
|
||||
@ -253,7 +254,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
|
||||
<td colSpan={8} className="text-start">
|
||||
<div className="d-flex align-items-center">
|
||||
{" "}
|
||||
<small className="fs-6 py-1">
|
||||
<small className="fs-6 py-1 ms-2">
|
||||
{displayField} :{" "}
|
||||
</small>{" "}
|
||||
<small className="fs-6 ms-3">
|
||||
@ -271,9 +272,9 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
|
||||
key={col.key}
|
||||
className={`d-table-cell ${col.align ?? ""}`}
|
||||
>
|
||||
{col?.customRender
|
||||
<div className="ms-2"> {col?.customRender
|
||||
? col?.customRender(paymentRequest)
|
||||
: col?.getValue(paymentRequest)}
|
||||
: col?.getValue(paymentRequest)}</div>
|
||||
</td>
|
||||
)
|
||||
)}
|
||||
|
||||
@ -8,16 +8,13 @@ const ALLOWED_TYPES = [
|
||||
"image/jpeg",
|
||||
];
|
||||
export const PaymentRequestSchema = (expenseTypes, isItself) => {
|
||||
return z
|
||||
.object({
|
||||
return z.object({
|
||||
title: z.string().min(1, { message: "Project is required" }),
|
||||
projectId: z.string().min(1, { message: "Project is required" }),
|
||||
expenseCategoryId: z
|
||||
.string()
|
||||
.min(1, { message: "Expense Category is required" }),
|
||||
currencyId: z
|
||||
.string()
|
||||
.min(1, { message: "Currency is required" }),
|
||||
currencyId: z.string().min(1, { message: "Currency is required" }),
|
||||
dueDate: z.string().min(1, { message: "Date is required" }),
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
payee: z.string().min(1, { message: "Supplier name is required" }),
|
||||
@ -35,9 +32,7 @@ export const PaymentRequestSchema = (expenseTypes,isItself) => {
|
||||
z.object({
|
||||
fileName: z.string().min(1, { message: "Filename is required" }),
|
||||
base64Data: z.string().nullable(),
|
||||
contentType: z
|
||||
.string()
|
||||
.refine((val) => ALLOWED_TYPES.includes(val), {
|
||||
contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
|
||||
message: "Only PDF, PNG, JPG, or JPEG files are allowed",
|
||||
}),
|
||||
documentId: z.string().optional(),
|
||||
@ -47,12 +42,9 @@ export const PaymentRequestSchema = (expenseTypes,isItself) => {
|
||||
description: z.string().optional(),
|
||||
isActive: z.boolean().default(true),
|
||||
})
|
||||
).refine((data)=>{
|
||||
if(isItself){
|
||||
payee.z.string().optional();
|
||||
}
|
||||
}),
|
||||
})
|
||||
)
|
||||
.optional(),
|
||||
});
|
||||
};
|
||||
|
||||
export const defaultPaymentRequest = {
|
||||
@ -68,7 +60,6 @@ export const defaultPaymentRequest = {
|
||||
billAttachments: [],
|
||||
};
|
||||
|
||||
|
||||
export const SearchPaymentRequestSchema = z.object({
|
||||
projectIds: z.array(z.string()).optional(),
|
||||
statusIds: z.array(z.string()).optional(),
|
||||
@ -91,7 +82,6 @@ export const defaultPaymentRequestFilter = {
|
||||
endDate: null,
|
||||
};
|
||||
|
||||
|
||||
export const PaymentRequestActionScheam = (
|
||||
isTransaction = false,
|
||||
transactionDate
|
||||
@ -100,17 +90,16 @@ export const PaymentRequestActionScheam = (
|
||||
.object({
|
||||
comment: z.string().min(1, { message: "Please leave comment" }),
|
||||
statusId: z.string().min(1, { message: "Please select a status" }),
|
||||
paymentRequestId: z.string().nullable().optional(),
|
||||
paidTransactionId: z.string().nullable().optional(),
|
||||
paidAt: z.string().nullable().optional(),
|
||||
paidById: z.string().nullable().optional(),
|
||||
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if (isTransaction) {
|
||||
if (!data.paymentRequestId?.trim()) {
|
||||
if (!data.paidTransactionId?.trim()) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ["reimburseTransactionId"],
|
||||
path: ["paidTransactionId"],
|
||||
message: "Reimburse Transaction ID is required",
|
||||
});
|
||||
}
|
||||
@ -121,15 +110,7 @@ export const PaymentRequestActionScheam = (
|
||||
message: "Transacion Date is required",
|
||||
});
|
||||
}
|
||||
// let reimburse_Date = localToUtc(data.reimburseDate);
|
||||
// if (transactionDate > reimburse_Date) {
|
||||
// ctx.addIssue({
|
||||
// code: z.ZodIssueCode.custom,
|
||||
// path: ["reimburseDate"],
|
||||
// message:
|
||||
// "Reimburse Date must be greater than or equal to Expense created Date",
|
||||
// });
|
||||
// }
|
||||
|
||||
if (!data.paidById) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
@ -141,7 +122,7 @@ export const PaymentRequestActionScheam = (
|
||||
});
|
||||
};
|
||||
|
||||
export const defaultActionValues = {
|
||||
export const defaultPaymentRequestActionValues = {
|
||||
comment: "",
|
||||
statusId: "",
|
||||
|
||||
|
||||
93
src/components/PaymentRequest/PaymentStatusLogs.jsx
Normal file
93
src/components/PaymentRequest/PaymentStatusLogs.jsx
Normal file
@ -0,0 +1,93 @@
|
||||
import { useState, useMemo } from "react";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import Timeline from "../common/TimeLine";
|
||||
import moment from "moment";
|
||||
import { getColorNameFromHex } from "../../utils/appUtils";
|
||||
const PaymentStatusLogs = ({ data }) => {
|
||||
const [visibleCount, setVisibleCount] = useState(4);
|
||||
|
||||
const sortedLogs = useMemo(() => {
|
||||
if (!data?.updateLogs) return [];
|
||||
return [...data.updateLogs].sort(
|
||||
(a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)
|
||||
);
|
||||
}, [data?.updateLogs]);
|
||||
|
||||
const logsToShow = useMemo(
|
||||
() => sortedLogs.slice(0, visibleCount),
|
||||
[sortedLogs, visibleCount]
|
||||
);
|
||||
|
||||
const timelineData = useMemo(() => {
|
||||
return logsToShow.map((log, index) => ({
|
||||
id: index + 1,
|
||||
title: log.nextStatus?.name || "Status Updated",
|
||||
description: log.nextStatus?.description || "",
|
||||
timeAgo: log.updatedAt,
|
||||
color: getColorNameFromHex(log.nextStatus?.color) || "primary",
|
||||
users: log.updatedBy
|
||||
? [
|
||||
{
|
||||
firstName: log.updatedBy.firstName || "",
|
||||
lastName: log?.updatedBy?.lastName || "",
|
||||
role: log.updatedBy.jobRoleName || "",
|
||||
avatar: log.updatedBy.photo,
|
||||
},
|
||||
]
|
||||
: [],
|
||||
}));
|
||||
}, [logsToShow]);
|
||||
|
||||
const handleShowMore = () => {
|
||||
setVisibleCount((prev) => prev + 4);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-min-h overflow-auto">
|
||||
{/* <div className="row g-2">
|
||||
{logsToShow.map((log) => (
|
||||
<div key={log.id} className="col-12 d-flex align-items-start mb-1">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={log.updatedBy.firstName}
|
||||
lastName={log.updatedBy.lastName}
|
||||
/>
|
||||
|
||||
<div className="flex-grow-1">
|
||||
<div className="text-start">
|
||||
<div className="flex">
|
||||
<span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
|
||||
<small className="text-secondary text-tiny ms-2">
|
||||
<em>{log.action}</em>
|
||||
</small>
|
||||
<span className="text-tiny text-secondary d-block">
|
||||
{formatUTCToLocalTime(log.updateAt, true)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="d-flex align-items-center text-muted small mt-1">
|
||||
<span>{log.comment}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{sortedLogs.length > visibleCount && (
|
||||
<div className="text-center my-1">
|
||||
<button
|
||||
className="btn btn-xs btn-outline-primary"
|
||||
onClick={handleShowMore}
|
||||
>
|
||||
Show More
|
||||
</button>
|
||||
</div>
|
||||
)} */}
|
||||
|
||||
<Timeline items={timelineData} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaymentStatusLogs;
|
||||
@ -1,4 +1,4 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
useActionOnExpense,
|
||||
useActionOnPaymentRequest,
|
||||
@ -6,6 +6,7 @@ import {
|
||||
} from "../../hooks/useExpense";
|
||||
import {
|
||||
formatCurrency,
|
||||
formatFigure,
|
||||
getColorNameFromHex,
|
||||
getIconByFileType,
|
||||
localToUtc,
|
||||
@ -28,11 +29,18 @@ import { useNavigate } from "react-router-dom";
|
||||
import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import {
|
||||
EXPENSE_DRAFT,
|
||||
EXPENSE_REJECTEDBY,
|
||||
PROCESS_EXPENSE,
|
||||
REVIEW_EXPENSE,
|
||||
} from "../../utils/constants";
|
||||
import Label from "../common/Label";
|
||||
import {
|
||||
defaultPaymentRequestActionValues,
|
||||
PaymentRequestActionScheam,
|
||||
} from "./PaymentRequestSchema";
|
||||
import PaymentStatusLogs from "./PaymentStatusLogs";
|
||||
import { FilelistView } from "../Expenses/Filelist";
|
||||
|
||||
const ViewPaymentRequest = ({ requestId }) => {
|
||||
const { data, isLoading, isError, error, isFetching } =
|
||||
@ -42,9 +50,10 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
|
||||
const IsReview = useHasUserPermission(REVIEW_EXPENSE);
|
||||
const [imageLoaded, setImageLoaded] = useState({});
|
||||
const { setDocumentView } = usePaymentRequestContext();
|
||||
const { setDocumentView, setModalSize } = usePaymentRequestContext();
|
||||
const ActionSchema =
|
||||
ExpenseActionScheam(IsPaymentProcess, data?.createdAt) ?? z.object({});
|
||||
PaymentRequestActionScheam(IsPaymentProcess, data?.createdAt) ??
|
||||
z.object({});
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
register,
|
||||
@ -55,7 +64,7 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(ActionSchema),
|
||||
defaultValues: defaultActionValues,
|
||||
defaultValues: defaultPaymentRequestActionValues,
|
||||
});
|
||||
|
||||
const userPermissions = useSelector(
|
||||
@ -97,7 +106,7 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
const onSubmit = (formData) => {
|
||||
const Payload = {
|
||||
...formData,
|
||||
paidAt: localToUtc(formData.reimburseDate),
|
||||
paidAt: localToUtc(formData.paidAt),
|
||||
paymentRequestId: data.id,
|
||||
comment: formData.comment,
|
||||
};
|
||||
@ -112,17 +121,24 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
|
||||
return (
|
||||
<form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 mb-1">
|
||||
<div className="col-12 mb-2 text-center ">
|
||||
<h5 className="fw-semibold m-0">Payment Request Details</h5>
|
||||
<hr />
|
||||
</div>
|
||||
<div className="row mb-1">
|
||||
<div className="col-12 col-sm-6 col-md-8">
|
||||
<div className="row text-start">
|
||||
<div className=" col-sm-12 col-md-7 border-none border-md-end">
|
||||
<div className="row">
|
||||
<div className="col-12 text-start fw-semibold mb-2">
|
||||
<div className="col-12 d-flex justify-content-between text-start fw-semibold mb-2">
|
||||
{data?.paymentRequestUID}
|
||||
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
getColorNameFromHex(data?.expenseStatus?.color) || "secondary"
|
||||
}`}
|
||||
>
|
||||
{data?.expenseStatus?.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="d-block d-md-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
@ -134,7 +150,7 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
@ -147,7 +163,7 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
@ -160,7 +176,7 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
</div>
|
||||
|
||||
{/* Row 2 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
@ -171,7 +187,7 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
<div className="text-muted">{data?.payee}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="col-md-1 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
@ -180,25 +196,13 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
Amount :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{formatCurrency(data?.amount, data?.currency?.currencyCode)}
|
||||
{formatFigure(data?.amount,{type:"currency",currency : data?.currency?.currencyCode})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3 */}
|
||||
{/* <div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Payment Mode :
|
||||
</label>
|
||||
<div className="text-muted">{data?.paymentMode?.name}</div>
|
||||
</div>
|
||||
</div> */}
|
||||
{data?.gstNumber && (
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
@ -212,25 +216,8 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
)}
|
||||
|
||||
{/* Row 4 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Status :
|
||||
</label>
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
getColorNameFromHex(data?.expenseStatus?.color) ||
|
||||
"secondary"
|
||||
}`}
|
||||
>
|
||||
{data?.expenseStatus?.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
@ -244,18 +231,7 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Project :
|
||||
</label>
|
||||
<div className="text-muted">{data?.project?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
@ -271,7 +247,7 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
|
||||
{/* Row 6 */}
|
||||
{data?.createdBy && (
|
||||
<div className="col-md-6 text-start">
|
||||
<div className="col-md-12 text-start">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
@ -296,7 +272,7 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
</div>
|
||||
)}
|
||||
{data?.paidBy && (
|
||||
<div className="col-md-6 text-start">
|
||||
<div className="col-md-12 text-start">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
@ -325,49 +301,16 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
<label className="fw-semibold form-label">Description : </label>
|
||||
<div className="text-muted">{data?.description}</div>
|
||||
</div>
|
||||
<div className="col-6 text-start">
|
||||
<label className="form-label me-2 mb-2 fw-semibold">
|
||||
<div className="col-12 text-start mb-2">
|
||||
<label className="form-label me-2 mb-1 fw-semibold">
|
||||
Attachment :
|
||||
</label>
|
||||
|
||||
<div className="d-flex flex-wrap gap-2">
|
||||
{data?.documents?.length > 0 ? (
|
||||
data?.documents?.map((doc) => {
|
||||
const isImage = doc?.contentType?.includes("image");
|
||||
|
||||
return (
|
||||
<div
|
||||
key={doc.documentId}
|
||||
className="border rounded hover-scale p-2 d-flex flex-column align-items-center"
|
||||
style={{
|
||||
width: "80px",
|
||||
cursor: isImage ? "pointer" : "default",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (isImage) {
|
||||
setDocumentView({
|
||||
IsOpen: true,
|
||||
Image: doc.preSignedUrl,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className={`bx ${getIconByFileType(doc.contentType)}`}
|
||||
style={{ fontSize: "30px" }}
|
||||
></i>
|
||||
<small
|
||||
className="text-center text-tiny text-truncate w-100"
|
||||
title={doc.fileName}
|
||||
>
|
||||
{doc.fileName}
|
||||
</small>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="m-0">No Attachment</p>
|
||||
)}
|
||||
{data?.attachments?.length > 0 ? (
|
||||
<FilelistView files={data?.attachments} viewFile={setDocumentView}/>
|
||||
):(<p className="m-0 text-secondary">No Attachment</p>)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -496,8 +439,12 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-md-4">
|
||||
<ExpenseStatusLogs data={data} />
|
||||
<div className=" col-sm-12 my-2 my-md-0 border-top border-md-none col-md-5">
|
||||
<div className="d-flex mb-2">
|
||||
<i className="bx bx-time-five me-2 "></i>{" "}
|
||||
<p className="fw-medium">TimeLine</p>
|
||||
</div>
|
||||
<PaymentStatusLogs data={data} />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
import React from "react";
|
||||
import Avatar from "./Avatar";
|
||||
import Tooltip from "./Tooltip";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import moment from "moment";
|
||||
|
||||
const Timeline = ({ items = [], transparent = true }) => {
|
||||
return (
|
||||
@ -8,7 +11,8 @@ const Timeline = ({ items = [], transparent = true }) => {
|
||||
transparent ? "timeline-transparent text-start" : ""
|
||||
}`}
|
||||
>
|
||||
{items.map((item) => (
|
||||
{items &&
|
||||
items?.map((item) => (
|
||||
<li
|
||||
key={item.id}
|
||||
className={`timeline-item ${
|
||||
@ -24,7 +28,11 @@ const Timeline = ({ items = [], transparent = true }) => {
|
||||
<div className="timeline-event">
|
||||
<div className="timeline-header mb-3 d-flex justify-content-between">
|
||||
<h6 className="mb-0 text-body">{item.title}</h6>
|
||||
<small className="text-body-secondary">{item.timeAgo}</small>
|
||||
<small className="text-body-secondary">
|
||||
<Tooltip text={formatUTCToLocalTime(item.timeAgo, true)}>
|
||||
{moment.utc(item.timeAgo).local().fromNow()}
|
||||
</Tooltip>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
{item.description && <p className="mb-2">{item.description}</p>}
|
||||
@ -54,7 +62,7 @@ const Timeline = ({ items = [], transparent = true }) => {
|
||||
<div className="d-flex flex-wrap align-items-center mb-2">
|
||||
<ul className="list-unstyled users-list d-flex align-items-center avatar-group m-0">
|
||||
{item.users.map((user, i) => (
|
||||
<li key={i} className="avatar me-1" title={user.name}>
|
||||
<li key={i} className="m-0" title={user.name}>
|
||||
{user.avatar ? (
|
||||
<img
|
||||
src={user.avatar}
|
||||
@ -65,6 +73,7 @@ const Timeline = ({ items = [], transparent = true }) => {
|
||||
/>
|
||||
) : (
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={user.firstName}
|
||||
lastName={user.lastName}
|
||||
/>
|
||||
@ -75,7 +84,7 @@ const Timeline = ({ items = [], transparent = true }) => {
|
||||
|
||||
{item.users?.length === 1 && (
|
||||
<div className="m-0">
|
||||
<p className="mb-0 small fw-medium">{`${item.users[0].firstName} ${item.users[0].lastName}`}</p>
|
||||
<p className="mb-0 text-xs fw-medium">{`${item.users[0].firstName} ${item.users[0].lastName}`}</p>
|
||||
<small>{item.users[0].role}</small>
|
||||
</div>
|
||||
)}
|
||||
@ -84,6 +93,17 @@ const Timeline = ({ items = [], transparent = true }) => {
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
|
||||
{!items ||
|
||||
(items.length == 0 && (
|
||||
<li
|
||||
className={`timeline-item text-center ${
|
||||
transparent ? "timeline-item-transparent" : ""
|
||||
}`}
|
||||
>
|
||||
Not action yet.
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
@ -5,6 +5,19 @@ import { queryClient } from "../layouts/AuthLayout";
|
||||
import { useSelector } from "react-redux";
|
||||
import moment from "moment";
|
||||
|
||||
|
||||
|
||||
export const usePayee =()=>{
|
||||
return useQuery({
|
||||
queryKey:["payee"],
|
||||
queryFn:async()=>{
|
||||
const resp = await ExpenseRepository.GetPayee();
|
||||
return resp.data;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// -------------------Query------------------------------------------------------
|
||||
|
||||
const cleanFilter = (filter) => {
|
||||
@ -358,6 +371,30 @@ export const useActionOnPaymentRequest = (onSuccessCallBack) => {
|
||||
},
|
||||
});
|
||||
};
|
||||
export const useDeletePaymentRequest = ()=>{
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload) => {
|
||||
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: (updatedExpense, variables) => {
|
||||
showToast("Request processed successfully.", "success");
|
||||
|
||||
queryClient.invalidateQueries({queryKey:["paymentRequestList"]})
|
||||
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(
|
||||
error.response.data.message ||
|
||||
"Something went wrong.Please try again later.",
|
||||
"error"
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
//#endregion
|
||||
|
||||
export const usePaymentRequestFilter = () => {
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
import React, { createContext, useContext, useState, useEffect, useRef } from "react";
|
||||
import React, {
|
||||
createContext,
|
||||
useContext,
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
} from "react";
|
||||
import { useForm, useFormContext } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useSelector } from "react-redux";
|
||||
@ -19,7 +25,10 @@ import {
|
||||
VIEW_SELF_EXPENSE,
|
||||
} from "../../utils/constants";
|
||||
|
||||
import { defaultFilter, SearchSchema } from "../../components/Expenses/ExpenseSchema";
|
||||
import {
|
||||
defaultFilter,
|
||||
SearchSchema,
|
||||
} from "../../components/Expenses/ExpenseSchema";
|
||||
import PreviewDocument from "../../components/Expenses/PreviewDocument";
|
||||
|
||||
// Context
|
||||
@ -102,7 +111,7 @@ const ExpensePage = () => {
|
||||
setManageExpenseModal,
|
||||
setDocumentView,
|
||||
filterData,
|
||||
removeFilterChip
|
||||
removeFilterChip,
|
||||
};
|
||||
|
||||
return (
|
||||
@ -128,7 +137,6 @@ const ExpensePage = () => {
|
||||
</div>
|
||||
|
||||
<div className="col-6 text-end mt-2 mt-sm-0">
|
||||
|
||||
{IsCreatedAble && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
@ -151,8 +159,6 @@ const ExpensePage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<ExpenseList
|
||||
filters={filters}
|
||||
groupBy={groupBy}
|
||||
@ -190,7 +196,7 @@ const ExpensePage = () => {
|
||||
{viewExpense.view && (
|
||||
<GlobalModel
|
||||
isOpen
|
||||
size="lg"
|
||||
size="xl"
|
||||
modalType="top"
|
||||
closeModal={() => setViewExpense({ expenseId: null, view: false })}
|
||||
>
|
||||
|
||||
@ -8,12 +8,13 @@ import PaymentRequestList from "../../components/PaymentRequest/PaymentRequestLi
|
||||
import PaymentRequestFilterPanel from "../../components/PaymentRequest/PaymentRequestFilterPanel";
|
||||
import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
|
||||
import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest";
|
||||
import PreviewDocument from "../../components/Expenses/PreviewDocument";
|
||||
|
||||
export const PaymentRequestContext = createContext();
|
||||
export const usePaymentRequestContext = () => {
|
||||
const context = useContext(PaymentRequestContext);
|
||||
if (!context) {
|
||||
throw new Error("usePaymentRequestContext must be used within an ExpenseProvider");
|
||||
throw new Error("usePaymentRequestContext must be used within an RequestPaymentProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
@ -25,12 +26,18 @@ const PaymentRequestPage = () => {
|
||||
const [ViewRequest,setVieRequest] = useState({view:false,requestId:null})
|
||||
const { setOffcanvasContent, setShowTrigger } = useFab();
|
||||
const [filters, setFilters] = useState(defaultPaymentRequestFilter);
|
||||
|
||||
const [ViewDocument, setDocumentView] = useState({
|
||||
IsOpen: false,
|
||||
Image: null,
|
||||
});
|
||||
const [modalSize,setModalSize] = useState("md")
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const contextValue = {
|
||||
setManageRequest,
|
||||
setVieRequest
|
||||
setVieRequest,
|
||||
setDocumentView,
|
||||
setModalSize
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -128,6 +135,17 @@ const PaymentRequestPage = () => {
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{ViewDocument.IsOpen && (
|
||||
<GlobalModel
|
||||
isOpen
|
||||
size="md"
|
||||
key={ViewDocument.Image ?? "doc"}
|
||||
closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
|
||||
>
|
||||
<PreviewDocument imageUrl={ViewDocument.Image} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</PaymentRequestContext.Provider>
|
||||
);
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
import { api } from "../utils/axiosClient";
|
||||
|
||||
|
||||
const ExpenseRepository = {
|
||||
GetPayee: () => api.get("/api/Expense/payment-request/payee"),
|
||||
//#region Expense
|
||||
GetExpenseList: (pageSize, pageNumber, filter, searchString) => {
|
||||
const payloadJsonString = JSON.stringify(filter);
|
||||
return api.get(`/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`);
|
||||
return api.get(
|
||||
`/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`
|
||||
);
|
||||
},
|
||||
GetExpenseDetails: (id) => api.get(`/api/Expense/details/${id}`),
|
||||
CreateExpense: (data) => api.post("/api/Expense/create", data),
|
||||
UpdateExpense: (id, data) => api.put(`/api/Expense/edit/${id}`, data),
|
||||
DeleteExpense: (id) => api.delete(`/api/Expense/delete/${id}`),
|
||||
ActionOnExpense: (data) => api.post('/api/expense/action', data),
|
||||
GetExpenseFilter: () => api.get('/api/Expense/filter'),
|
||||
ActionOnExpense: (data) => api.post("/api/expense/action", data),
|
||||
GetExpenseFilter: () => api.get("/api/Expense/filter"),
|
||||
|
||||
//#endregion
|
||||
|
||||
@ -41,8 +43,8 @@ const ExpenseRepository = {
|
||||
|
||||
|
||||
//#region Advance Payment
|
||||
GetTranctionList: () => api.get(`/get/transactions/${employeeId}`)
|
||||
GetTranctionList: () => api.get(`/get/transactions/${employeeId}`),
|
||||
//#endregion
|
||||
}
|
||||
};
|
||||
|
||||
export default ExpenseRepository;
|
||||
|
||||
@ -108,7 +108,7 @@ export function localToUtc(dateString) {
|
||||
export const formatCurrency = (amount, currency = "INR", locale = "en-US") => {
|
||||
return new Intl.NumberFormat(locale, {
|
||||
style: "currency",
|
||||
notation: "compact",
|
||||
notation: "compact", // standard or compact
|
||||
compactDisplay: "short",
|
||||
currency: currency,
|
||||
minimumFractionDigits: 0,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user