admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fetched latest data

Browse Source
This commit is contained in:
pramod.mahajan 2025-11-05 12:13:34 +05:30
parent 10ec11a828
commit c63b13f200
24 changed files with 1469 additions and 1460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Expenses/ExpenseList.jsx
View File

@ -12,7 +12,6 @@ import {
} from "../../utils/constants"; } from "../../utils/constants";
import { import {
formatCurrency, formatCurrency,
formatFigure,
getColorNameFromHex, getColorNameFromHex,
useDebounce, useDebounce,
} from "../../utils/appUtils"; } from "../../utils/appUtils";
@ -167,7 +166,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
{ {
key: "amount", key: "amount",
label: "Amount", label: "Amount",
getValue: (e) => <>{formatFigure(e?.amount,{type:"currency",currency : e?.currency?.currencyCode ?? "INR"} )}</>, getValue: (e) => <>{formatCurrency(e?.amount)}</>,
isAlwaysVisible: true, isAlwaysVisible: true,
align: "text-end", align: "text-end",
}, },
@ -289,11 +288,11 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
(col.isAlwaysVisible || groupBy !== col.key) && ( (col.isAlwaysVisible || groupBy !== col.key) && (
<td <td
key={col.key} key={col.key}
className={`d-table-cell ml-2 ${col.align ?? ""}`} className={`d-table-cell ${col.align ?? ""}`}
> >
<div className="d-flex px-2">{col.customRender {col.customRender
? col.customRender(expense) ? col.customRender(expense)
: col.getValue(expense)}</div> : col.getValue(expense)}
</td> </td>
) )
)} )}
@ -308,7 +307,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
}) })
} }
></i> ></i>
{ {canDetetExpense(expense) &&
canEditExpense(expense) && ( canEditExpense(expense) && (
<div className="dropdown z-2"> <div className="dropdown z-2">
<button <button

2
src/components/Expenses/ExpenseSchema.js
View File

@ -13,7 +13,7 @@ export const ExpenseSchema = (expenseTypes) => {
return z return z
.object({ .object({
projectId: z.string().min(1, { message: "Project is required" }), projectId: z.string().min(1, { message: "Project is required" }),
expenseCategoryId: z expensesCategoryId: z
.string() .string()
.min(1, { message: "Expense type is required" }), .min(1, { message: "Expense type is required" }),
paymentModeId: z.string().min(1, { message: "Payment mode is required" }), paymentModeId: z.string().min(1, { message: "Payment mode is required" }),

50
src/components/Expenses/ExpenseStatusLogs.jsx
View File

@ -8,11 +8,11 @@ const ExpenseStatusLogs = ({ data }) => {
const [visibleCount, setVisibleCount] = useState(4); const [visibleCount, setVisibleCount] = useState(4);
const sortedLogs = useMemo(() => { const sortedLogs = useMemo(() => {
if (!data?.expenseLogs) return []; if (!data?.updateLogs) return [];
return [...data.expenseLogs].sort( return [...data.updateLogs].sort(
(a, b) => new Date(b.updatedAt) - new Date(a.updatedAt) (a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)
); );
}, [data?.expenseLogs]); }, [data?.updateLogs]);
const logsToShow = useMemo( const logsToShow = useMemo(
() => sortedLogs.slice(0, visibleCount), () => sortedLogs.slice(0, visibleCount),
@ -22,9 +22,9 @@ const ExpenseStatusLogs = ({ data }) => {
const timelineData = useMemo(() => { const timelineData = useMemo(() => {
return logsToShow.map((log, index) => ({ return logsToShow.map((log, index) => ({
id: index + 1, id: index + 1,
title: log.action || "Status Updated", title: log.nextStatus?.name || "Status Updated",
description: log.comment || "", description: log.nextStatus?.description || "",
timeAgo: log.updatedAt, timeAgo: moment.utc(log?.updatedAt).local().fromNow(),
color: getColorNameFromHex(log.nextStatus?.color) || "primary", color: getColorNameFromHex(log.nextStatus?.color) || "primary",
users: log.updatedBy users: log.updatedBy
? [ ? [
@ -45,7 +45,45 @@ const ExpenseStatusLogs = ({ data }) => {
return ( return (
<div className="page-min-h overflow-auto"> <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} /> <Timeline items={timelineData} />
</div> </div>

53
src/components/Expenses/Filelist.jsx
View File

@ -1,10 +1,9 @@
import React from "react"; import React from "react";
import { formatFileSize, getIconByFileType } from "../../utils/appUtils"; import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
import Tooltip from "../common/Tooltip";
const Filelist = ({ files, removeFile, expenseToEdit }) => { const Filelist = ({ files, removeFile, expenseToEdit }) => {
return ( return (
<div className="d-flex flex-wrap gap-2 mt-2"> <div className="d-block">
{files {files
.filter((file) => { .filter((file) => {
if (expenseToEdit) { if (expenseToEdit) {
@ -13,12 +12,14 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
return true; return true;
}) })
.map((file, idx) => ( .map((file, idx) => (
<div className="col-12 col-sm-6 col-md-4 bg-white " key={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="row align-items-center"> <div className="row align-items-center">
{/* File icon and info */} {/* File icon and info */}
<div className="col-10 d-flex align-items-center gap-2"> <div className="col-10 d-flex align-items-center gap-2">
<i <i
className={`bx ${getIconByFileType(file?.contentType)} fs-3`} className={`bx ${getIconByFileType(
file?.contentType
)} fs-3`}
style={{ minWidth: "30px" }} style={{ minWidth: "30px" }}
></i> ></i>
@ -33,17 +34,14 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
</div> </div>
<div className="col-2 text-end"> <div className="col-2 text-end">
<Tooltip text={"Remove file"}>
<i <i
className="bx bx-trash fs-4 cursor-pointer text-danger bx-sm " className="bx bx-trash fs-4 cursor-pointer text-danger bx-sm "
role="button" role="button"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
debugger;
removeFile(expenseToEdit ? file.documentId : idx); removeFile(expenseToEdit ? file.documentId : idx);
}} }}
></i> ></i>
</Tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -53,44 +51,3 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
}; };
export default Filelist; 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>
);
};

7
src/components/Expenses/ManageExpense.jsx
View File

@ -31,7 +31,6 @@ import Label from "../common/Label";
import EmployeeSearchInput from "../common/EmployeeSearchInput"; import EmployeeSearchInput from "../common/EmployeeSearchInput";
import Filelist from "./Filelist"; import Filelist from "./Filelist";
const ManageExpense = ({ closeModal, expenseToEdit = null }) => { const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
const { const {
data, data,
@ -129,7 +128,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
reader.onload = () => resolve(reader.result.split(",")[1]); reader.onload = () => resolve(reader.result.split(",")[1]);
reader.onerror = (error) => reject(error); reader.onerror = (error) => reject(error);
}); });
const removeFile = (index) => {documentId const removeFile = (index) => {
if (expenseToEdit) { if (expenseToEdit) {
const newFiles = files.map((file, i) => { const newFiles = files.map((file, i) => {
if (file.documentId !== index) return file; if (file.documentId !== index) return file;
@ -149,7 +148,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
if (expenseToEdit && data) { if (expenseToEdit && data) {
reset({ reset({
projectId: data.project.id || "", projectId: data.project.id || "",
expenseCategoryId: data.expensesCategory?.id || "", expensesCategoryId: data.expensesType.id || "",
paymentModeId: data.paymentMode.id || "", paymentModeId: data.paymentMode.id || "",
paidById: data.paidBy.id || "", paidById: data.paidBy.id || "",
transactionDate: data.transactionDate?.slice(0, 10) || "", transactionDate: data.transactionDate?.slice(0, 10) || "",
@ -246,7 +245,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
<select <select
className="form-select form-select-sm" className="form-select form-select-sm"
id="expensesCategoryId" id="expensesCategoryId"
{...register("expenseCategoryId")} {...register("expensesCategoryId")}
> >
<option value="" disabled> <option value="" disabled>
Select Type Select Type

288
src/components/Expenses/ViewExpense.jsx
View File

@ -9,12 +9,7 @@ import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema"; import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
import { useExpenseContext } from "../../pages/Expense/ExpensePage"; import { useExpenseContext } from "../../pages/Expense/ExpensePage";
import { import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
formatCurrency,
getColorNameFromHex,
getIconByFileType,
localToUtc,
} from "../../utils/appUtils";
import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton"; import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { import {
@ -43,8 +38,7 @@ const ViewExpense = ({ ExpenseId }) => {
const IsReview = useHasUserPermission(REVIEW_EXPENSE); const IsReview = useHasUserPermission(REVIEW_EXPENSE);
const [imageLoaded, setImageLoaded] = useState({}); const [imageLoaded, setImageLoaded] = useState({});
const { setDocumentView } = useExpenseContext(); const { setDocumentView } = useExpenseContext();
const ActionSchema = const ActionSchema = ExpenseActionScheam(IsPaymentProcess,data?.createdAt) ?? z.object({});
ExpenseActionScheam(IsPaymentProcess, data?.createdAt) ?? z.object({});
const navigate = useNavigate(); const navigate = useNavigate();
const { const {
register, register,
@ -112,28 +106,19 @@ const ViewExpense = ({ ExpenseId }) => {
return ( return (
<form className="container px-3" onSubmit={handleSubmit(onSubmit)}> <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
<div className="row mb-1">
<div className="col-12 mb-1"> <div className="col-12 mb-1">
<h5 className="fw-semibold m-0">Expense Details</h5> <h5 className="fw-semibold m-0">Expense Details</h5>
<hr />
</div> </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 */} {/* Row 1 */}
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <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 : Transaction Date :
</label> </label>
<div className="text-muted"> <div className="text-muted">
@ -141,10 +126,12 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
</div> </div>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <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 : Expense Type :
</label> </label>
<div className="text-muted">{data?.expensesType?.name}</div> <div className="text-muted">{data?.expensesType?.name}</div>
@ -154,36 +141,46 @@ const ViewExpense = ({ ExpenseId }) => {
{/* Row 2 */} {/* Row 2 */}
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <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 : Supplier :
</label> </label>
<div className="text-muted">{data?.supplerName}</div> <div className="text-muted">{data?.supplerName}</div>
</div> </div>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <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 : Amount :
</label> </label>
<div className="text-muted"> {formatCurrency(data.amount,data.curency.currencyCode)}</div> <div className="text-muted">₹ {data.amount}</div>
</div> </div>
</div> </div>
{/* Row 3 */} {/* Row 3 */}
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <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 : Payment Mode :
</label> </label>
<div className="text-muted">{data?.paymentMode?.name}</div> <div className="text-muted">{data?.paymentMode?.name}</div>
</div> </div>
</div> </div>
{data?.gstNumber && ( {data?.gstNumber && (
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <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 : GST Number :
</label> </label>
<div className="text-muted">{data?.gstNumber}</div> <div className="text-muted">{data?.gstNumber}</div>
@ -191,89 +188,132 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
)} )}
{/* Row 4 */}
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <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" }}
>
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" }}
>
Pre-Approved : Pre-Approved :
</label> </label>
<div className="text-muted">{data.preApproved ? "Yes" : "No"}</div> <div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
</div> </div>
</div> </div>
{/* Row 5 */}
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <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 : Project :
</label> </label>
<div className="text-muted">{data?.project?.name}</div> <div className="text-muted">{data?.project?.name}</div>
</div> </div>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <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 : Created At :
</label> </label>
<div className="text-muted">{formatUTCToLocalTime(data?.createdAt, true)}</div> <div className="text-muted">
{formatUTCToLocalTime(data?.createdAt, true)}
</div>
</div> </div>
</div> </div>
{/* Created & Paid By */} {/* Row 6 */}
{data.createdBy && ( {data.createdBy && (
<div className="col-md-6 text-start mb-3"> <div className="col-md-6 text-start">
<div className="d-flex align-items-center"> <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 : Created By :
</label> </label>
<div className="d-flex align-items-center">
<Avatar <Avatar
size="xs" size="xs"
classAvatar="m-0 me-1" classAvatar="m-0"
firstName={data.createdBy?.firstName} firstName={data.createdBy?.firstName}
lastName={data.createdBy?.lastName} lastName={data.createdBy?.lastName}
/> />
<span className="text-muted"> <span className="text-muted">
{`${data.createdBy?.firstName ?? ""} ${data.createdBy?.lastName ?? ""}`.trim() || "N/A"} {`${data.createdBy?.firstName ?? ""} ${
data.createdBy?.lastName ?? ""
}`.trim() || "N/A"}
</span> </span>
</div> </div>
</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"> <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 : Paid By :
</label> </label>
<div className="d-flex align-items-center ">
<Avatar <Avatar
size="xs" size="xs"
classAvatar="m-0 me-1" classAvatar="m-0"
firstName={data.paidBy?.firstName} firstName={data.paidBy?.firstName}
lastName={data.paidBy?.lastName} lastName={data.paidBy?.lastName}
/> />
<span className="text-muted"> <span className="text-muted">
{`${data.paidBy?.firstName ?? ""} ${data.paidBy?.lastName ?? ""}`.trim() || "N/A"} {`${data.paidBy?.firstName ?? ""} ${
data.paidBy?.lastName ?? ""
}`.trim() || "N/A"}
</span> </span>
</div> </div>
</div> </div>
</div>
{/* Description */} <div className="text-start my-1">
<div className="col-12 text-start mb-2">
<label className="fw-semibold form-label">Description : </label> <label className="fw-semibold form-label">Description : </label>
<div className="text-muted">{data?.description}</div> <div className="text-muted">{data?.description}</div>
</div> </div>
</div>
{/* Attachments */} <div className="col-12 text-start">
<div className="col-12 text-start mb-2">
<label className="form-label me-2 mb-2 fw-semibold">Attachment :</label> <label className="form-label me-2 mb-2 fw-semibold">Attachment :</label>
<div className="d-flex flex-wrap gap-2"> <div className="d-flex flex-wrap gap-2">
{data?.documents?.map((doc) => { {data?.documents?.map((doc) => {
const isImage = doc.contentType?.includes("image"); const isImage = doc.contentType?.includes("image");
return ( return (
<div <div
key={doc.documentId} key={doc.documentId}
className="d-flex align-items-center cusor-pointer" className="border rounded hover-scale p-2 d-flex flex-column align-items-center"
style={{
width: "80px",
cursor: isImage ? "pointer" : "default",
}}
onClick={() => { onClick={() => {
if (isImage) { if (isImage) {
setDocumentView({ setDocumentView({
@ -283,30 +323,146 @@ const ViewExpense = ({ ExpenseId }) => {
} }
}} }}
> >
<i className={`bx ${getIconByFileType(doc.contentType)}`} style={{ fontSize: "30px" }}></i> <i
<small className="text-center text-tiny text-truncate w-100" title={doc.fileName}> className={`bx ${getIconByFileType(doc.contentType)}`}
style={{ fontSize: "30px" }}
></i>
<small
className="text-center text-tiny text-truncate w-100"
title={doc.fileName}
>
{doc.fileName} {doc.fileName}
</small> </small>
</div> </div>
); );
})} })}
</div> </div>
</div> </div>
{/* ... your remaining conditional sections */} {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"}
</div> </div>
<div className="col-md-6 ">
<label className="form-label me-2 mb-0 fw-semibold">
Reimburse Date :
</label>
{formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
</div> </div>
<div className="col-12 col-lg-5 col-xl-4"> {data.expensesReimburse && (
<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 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> </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} /> <ExpenseStatusLogs data={data} />
</div>
</div>
</form> </form>
); );
}; };

195
src/components/PaymentRequest/ManagePaymentRequest.jsx
View File

@ -1,47 +1,26 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react'
import { useCurrencies, useProjectName } from "../../hooks/useProjects"; import { useCurrencies, useProjectName } from '../../hooks/useProjects';
import Label from "../common/Label"; import Label from '../common/Label';
import { useForm } from "react-hook-form"; import { useForm } from 'react-hook-form';
import { useExpenseCategory } from "../../hooks/masterHook/useMaster"; import { useExpenseCategory } from '../../hooks/masterHook/useMaster';
import DatePicker from "../common/DatePicker"; import DatePicker from '../common/DatePicker';
import { import { useCreatePaymentRequest, usePaymentRequestDetail, useUpdatePaymentRequest } from '../../hooks/useExpense';
useCreatePaymentRequest,
usePayee,
usePaymentRequestDetail,
useUpdatePaymentRequest,
} from "../../hooks/useExpense";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from '@hookform/resolvers/zod';
import { formatFileSize, localToUtc } from "../../utils/appUtils"; import { formatFileSize, localToUtc } from '../../utils/appUtils';
import { import { defaultPaymentRequest, PaymentRequestSchema } from './PaymentRequestSchema';
defaultPaymentRequest, import { INR_CURRENCY_CODE } from '../../utils/constants';
PaymentRequestSchema, import { useProfile } from '../../hooks/useProfile';
} 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 }) { function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
const { const { data, isLoading, isError, error: requestError } = usePaymentRequestDetail(requestToEdit)
data, // const data = {}
isLoading,
isError,
error: requestError,
} = usePaymentRequestDetail(requestToEdit);
const { const { projectNames, loading: projectLoading, error, isError: isProjectError,
projectNames,
loading: projectLoading,
error,
isError: isProjectError,
} = useProjectName(); } = useProjectName();
const { const { data: currencyData, isLoading: currencyLoading, isError: currencyError } = useCurrencies();
data: currencyData,
isLoading: currencyLoading,
isError: currencyError,
} = useCurrencies();
const { const {
ExpenseCategories, ExpenseCategories,
@ -50,17 +29,9 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
} = useExpenseCategory(); } = useExpenseCategory();
const { profile } = useProfile(); const { profile } = useProfile();
const {data:Payees,isLoading:isPayeeLoaing,isError:isPayeeError,error:payeeError} = usePayee()
const schema = PaymentRequestSchema(ExpenseCategories); const schema = PaymentRequestSchema(ExpenseCategories);
const { const { register, control, watch, handleSubmit, setValue, reset, formState: { errors }, } = useForm({
register,
control,
watch,
handleSubmit,
setValue,
reset,
formState: { errors },
} = useForm({
resolver: zodResolver(schema), resolver: zodResolver(schema),
defaultValues: defaultPaymentRequest, defaultValues: defaultPaymentRequest,
}); });
@ -113,7 +84,6 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
reader.onerror = (error) => reject(error); reader.onerror = (error) => reject(error);
}); });
const removeFile = (index) => { const removeFile = (index) => {
debugger
if (requestToEdit) { if (requestToEdit) {
const newFiles = files.map((file, i) => { const newFiles = files.map((file, i) => {
if (file.documentId !== index) return file; if (file.documentId !== index) return file;
@ -134,12 +104,13 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
closeModal(); closeModal();
}; };
const { mutate: CreatePaymentRequest, isPending: createPending } = const { mutate: CreatePaymentRequest, isPending: createPending } = useCreatePaymentRequest(
useCreatePaymentRequest(() => { () => {
handleClose(); handleClose();
}); }
const { mutate: PaymentRequestUpdate, isPending } = useUpdatePaymentRequest( );
() => handleClose() const { mutate: PaymentRequestUpdate, isPending } = useUpdatePaymentRequest(() =>
handleClose()
); );
useEffect(() => { useEffect(() => {
@ -154,25 +125,28 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
projectId: data.project.id || "", projectId: data.project.id || "",
expenseCategoryId: data.expenseCategory.id || "", expenseCategoryId: data.expenseCategory.id || "",
isAdvancePayment: data.isAdvancePayment || false, isAdvancePayment: data.isAdvancePayment || false,
billAttachments: data.attachments billAttachments: data.documents
? data?.attachments?.map((doc) => ({ ? data.documents.map((doc) => ({
fileName: doc.fileName, fileName: doc.fileName,
base64Data: null, base64Data: null,
contentType: doc.contentType, contentType: doc.contentType,
documentId: doc.id, documentId: doc.documentId,
fileSize: 0, fileSize: 0,
description: "", description: "",
preSignedUrl: doc.preSignedUrl, preSignedUrl: doc.preSignedUrl,
isActive: doc.isActive ?? true, isActive: doc.isActive ?? true,
})) }))
: [], : [],
}); });
} }
}, [data, reset]); }, [data, reset]);
useEffect(() => { useEffect(() => {
if (!requestToEdit && currencyData && currencyData.length > 0) { 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) { if (inrCurrency) {
setValue("currencyId", INR_CURRENCY_CODE, { shouldValidate: true }); setValue("currencyId", INR_CURRENCY_CODE, { shouldValidate: true });
} }
@ -180,17 +154,14 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
}, [currencyData, requestToEdit, setValue]); }, [currencyData, requestToEdit, setValue]);
const onSubmit = (fromdata) => { const onSubmit = (fromdata) => {
let payload = { let payload = {
...fromdata, ...fromdata,
dueDate: localToUtc(fromdata.dueDate), dueDate: localToUtc(fromdata.dueDate),
payee: isItself ? profile?.employeeInfo?.id : fromdata.payee, payee:isItself ? profile?.employeeInfo?.id : fromdata.payee
}; };
if (requestToEdit) { if (requestToEdit) {
const editPayload = { const editPayload = { ...payload, id: data.id, payee:isItself ? profile?.employeeInfo?.id : fromdata.payee };
...payload,
id: data.id,
payee: isItself ? profile?.employeeInfo?.id : fromdata.payee,
};
PaymentRequestUpdate({ id: data.id, payload: editPayload }); PaymentRequestUpdate({ id: data.id, payload: editPayload });
} else { } else {
CreatePaymentRequest(payload); CreatePaymentRequest(payload);
@ -198,8 +169,8 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
}; };
const handleSetItSelf=(e)=>{ const handleSetItSelf=(e)=>{
setisItself(e.target.value); setisItself(e.target.value);
setValue("payee", `${profile?.employeeInfo.firstName} ${profile?.employeeInfo.lastName}`); setValue('payee',profile?.employeeInfo.id)
}; }
return ( return (
<div className="container p-3"> <div className="container p-3">
@ -261,6 +232,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
</small> </small>
)} )}
</div> </div>
</div> </div>
{/* Title and Advance Payment */} {/* Title and Advance Payment */}
@ -276,7 +248,9 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
{...register("title")} {...register("title")}
/> />
{errors.title && ( {errors.title && (
<small className="danger-text">{errors.title.message}</small> <small className="danger-text">
{errors.title.message}
</small>
)} )}
</div> </div>
@ -288,8 +262,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
id="isAdvancePayment" id="isAdvancePayment"
className="form-select form-select-sm" className="form-select form-select-sm"
{...register("isAdvancePayment", { {...register("isAdvancePayment", {
setValueAs: (v) => setValueAs: (v) => v === "true" ? true : v === "false" ? false : undefined,
v === "true" ? true : v === "false" ? false : undefined,
})} })}
> >
<option value="">Select Option</option> <option value="">Select Option</option>
@ -297,13 +270,14 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
<option value="false">False</option> <option value="false">False</option>
</select> </select>
{errors.isAdvancePayment && ( {errors.isAdvancePayment && (
<small className="danger-text"> <small className="danger-text">{errors.isAdvancePayment.message}</small>
{errors.isAdvancePayment.message}
</small>
)} )}
</div> </div>
</div> </div>
{/* Date and Amount */} {/* Date and Amount */}
<div className="row my-2 text-start"> <div className="row my-2 text-start">
<div className="col-md-6"> <div className="col-md-6">
@ -314,11 +288,13 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
name="dueDate" name="dueDate"
control={control} control={control}
minDate={new Date()} minDate={new Date()}
className="w-100" className='w-100'
/> />
{errors.dueDate && ( {errors.dueDate && (
<small className="danger-text">{errors.dueDate.message}</small> <small className="danger-text">
{errors.dueDate.message}
</small>
)} )}
</div> </div>
@ -347,17 +323,18 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
<Label htmlFor="payee" className="form-label" required> <Label htmlFor="payee" className="form-label" required>
Payee (Supplier Name/Transporter Name/Other) Payee (Supplier Name/Transporter Name/Other)
</Label> </Label>
<InputSuggestions <input
organizationList={Payees} type="text"
value={watch("payee") || ""} id="payee"
onChange={(val) => className="form-control form-control-sm"
setValue("payee", val, { shouldValidate: true }) {...register("payee")}
} disabled={isItself}
error={errors.payee?.message}
/>
/>
{errors.payee && ( {errors.payee && (
<small className="danger-text">{errors.payee.message}</small> <small className="danger-text">
{errors.payee.message}
</small>
)} )}
{/* Checkbox below input */} {/* Checkbox below input */}
@ -375,6 +352,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
</div> </div>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<Label htmlFor="currencyId" className="form-label" required> <Label htmlFor="currencyId" className="form-label" required>
Currency Currency
@ -400,6 +378,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
<small className="danger-text">{errors.currencyId.message}</small> <small className="danger-text">{errors.currencyId.message}</small>
)} )}
</div> </div>
</div> </div>
{/* Description */} {/* Description */}
@ -425,7 +404,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
{/* Upload Document */} {/* Upload Document */}
<div className="row my-2 text-start"> <div className="row my-2 text-start">
<div className="col-md-12"> <div className="col-md-12">
<Label className="form-label" required> <Label className="form-label">
Upload Bill{" "} Upload Bill{" "}
</Label> </Label>
@ -458,12 +437,42 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
{errors.billAttachments.message} {errors.billAttachments.message}
</small> </small>
)} )}
{files.length > 0 && ( {Array.isArray(files) && files.length > 0 && (
<Filelist
files={files} <div className="d-block">
removeFile={removeFile} {files
expenseToEdit={requestToEdit} .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>
)} )}
{Array.isArray(errors.billAttachments) && {Array.isArray(errors.billAttachments) &&
@ -480,6 +489,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
</div> </div>
</div> </div>
<div className="d-flex justify-content-end gap-3"> <div className="d-flex justify-content-end gap-3">
<button <button
type="reset" type="reset"
disabled={createPending || isPending} disabled={createPending || isPending}
@ -500,9 +510,10 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
: "Submit"} : "Submit"}
</button> </button>
</div> </div>
</form> </form>
</div> </div>
); )
} }
export default ManagePaymentRequest; export default ManagePaymentRequest

9
src/components/PaymentRequest/PaymentRequestList.jsx
View File

@ -6,7 +6,6 @@ import {
} from "../../utils/constants"; } from "../../utils/constants";
import { import {
formatCurrency, formatCurrency,
formatFigure,
getColorNameFromHex, getColorNameFromHex,
useDebounce, useDebounce,
} from "../../utils/appUtils"; } from "../../utils/appUtils";
@ -132,7 +131,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
align: "text-start", align: "text-start",
getValue: (e) => ( getValue: (e) => (
<> <>
{formatFigure(e?.amount,{type:"currency",currency : e?.currency?.currencyCode})} {formatCurrency(e?.amount)}&nbsp;{e.currency.currencyCode}
</> </>
), ),
@ -254,7 +253,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
<td colSpan={8} className="text-start"> <td colSpan={8} className="text-start">
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
{" "} {" "}
<small className="fs-6 py-1 ms-2"> <small className="fs-6 py-1">
{displayField} :{" "} {displayField} :{" "}
</small>{" "} </small>{" "}
<small className="fs-6 ms-3"> <small className="fs-6 ms-3">
@ -272,9 +271,9 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
key={col.key} key={col.key}
className={`d-table-cell ${col.align ?? ""}`} className={`d-table-cell ${col.align ?? ""}`}
> >
<div className="ms-2"> {col?.customRender {col?.customRender
? col?.customRender(paymentRequest) ? col?.customRender(paymentRequest)
: col?.getValue(paymentRequest)}</div> : col?.getValue(paymentRequest)}
</td> </td>
) )
)} )}

41
src/components/PaymentRequest/PaymentRequestSchema.js
View File

@ -8,13 +8,16 @@ const ALLOWED_TYPES = [
"image/jpeg", "image/jpeg",
]; ];
export const PaymentRequestSchema = (expenseTypes,isItself) => { export const PaymentRequestSchema = (expenseTypes,isItself) => {
return z.object({ return z
.object({
title: z.string().min(1, { message: "Project is required" }), title: z.string().min(1, { message: "Project is required" }),
projectId: z.string().min(1, { message: "Project is required" }), projectId: z.string().min(1, { message: "Project is required" }),
expenseCategoryId: z expenseCategoryId: z
.string() .string()
.min(1, { message: "Expense Category is required" }), .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" }), dueDate: z.string().min(1, { message: "Date is required" }),
description: z.string().min(1, { message: "Description is required" }), description: z.string().min(1, { message: "Description is required" }),
payee: z.string().min(1, { message: "Supplier name is required" }), payee: z.string().min(1, { message: "Supplier name is required" }),
@ -32,7 +35,9 @@ export const PaymentRequestSchema = (expenseTypes, isItself) => {
z.object({ z.object({
fileName: z.string().min(1, { message: "Filename is required" }), fileName: z.string().min(1, { message: "Filename is required" }),
base64Data: z.string().nullable(), 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", message: "Only PDF, PNG, JPG, or JPEG files are allowed",
}), }),
documentId: z.string().optional(), documentId: z.string().optional(),
@ -42,9 +47,12 @@ export const PaymentRequestSchema = (expenseTypes, isItself) => {
description: z.string().optional(), description: z.string().optional(),
isActive: z.boolean().default(true), isActive: z.boolean().default(true),
}) })
) ).refine((data)=>{
.optional(), if(isItself){
}); payee.z.string().optional();
}
}),
})
}; };
export const defaultPaymentRequest = { export const defaultPaymentRequest = {
@ -60,6 +68,7 @@ export const defaultPaymentRequest = {
billAttachments: [], billAttachments: [],
}; };
export const SearchPaymentRequestSchema = z.object({ export const SearchPaymentRequestSchema = z.object({
projectIds: z.array(z.string()).optional(), projectIds: z.array(z.string()).optional(),
statusIds: z.array(z.string()).optional(), statusIds: z.array(z.string()).optional(),
@ -82,6 +91,7 @@ export const defaultPaymentRequestFilter = {
endDate: null, endDate: null,
}; };
export const PaymentRequestActionScheam = ( export const PaymentRequestActionScheam = (
isTransaction = false, isTransaction = false,
transactionDate transactionDate
@ -90,16 +100,17 @@ export const PaymentRequestActionScheam = (
.object({ .object({
comment: z.string().min(1, { message: "Please leave comment" }), comment: z.string().min(1, { message: "Please leave comment" }),
statusId: z.string().min(1, { message: "Please select a status" }), statusId: z.string().min(1, { message: "Please select a status" }),
paidTransactionId: z.string().nullable().optional(), paymentRequestId: z.string().nullable().optional(),
paidAt: z.string().nullable().optional(), paidAt: z.string().nullable().optional(),
paidById: z.string().nullable().optional(), paidById: z.string().nullable().optional(),
}) })
.superRefine((data, ctx) => { .superRefine((data, ctx) => {
if (isTransaction) { if (isTransaction) {
if (!data.paidTransactionId?.trim()) { if (!data.paymentRequestId?.trim()) {
ctx.addIssue({ ctx.addIssue({
code: z.ZodIssueCode.custom, code: z.ZodIssueCode.custom,
path: ["paidTransactionId"], path: ["reimburseTransactionId"],
message: "Reimburse Transaction ID is required", message: "Reimburse Transaction ID is required",
}); });
} }
@ -110,7 +121,15 @@ export const PaymentRequestActionScheam = (
message: "Transacion Date is required", 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) { if (!data.paidById) {
ctx.addIssue({ ctx.addIssue({
code: z.ZodIssueCode.custom, code: z.ZodIssueCode.custom,
@ -122,7 +141,7 @@ export const PaymentRequestActionScheam = (
}); });
}; };
export const defaultPaymentRequestActionValues = { export const defaultActionValues = {
comment: "", comment: "",
statusId: "", statusId: "",

93
src/components/PaymentRequest/PaymentStatusLogs.jsx
View File

@ -1,93 +0,0 @@
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;

151
src/components/PaymentRequest/ViewPaymentRequest.jsx
View File

@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { import {
useActionOnExpense, useActionOnExpense,
useActionOnPaymentRequest, useActionOnPaymentRequest,
@ -6,7 +6,6 @@ import {
} from "../../hooks/useExpense"; } from "../../hooks/useExpense";
import { import {
formatCurrency, formatCurrency,
formatFigure,
getColorNameFromHex, getColorNameFromHex,
getIconByFileType, getIconByFileType,
localToUtc, localToUtc,
@ -29,18 +28,11 @@ import { useNavigate } from "react-router-dom";
import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage"; import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { import {
EXPENSE_DRAFT,
EXPENSE_REJECTEDBY, EXPENSE_REJECTEDBY,
PROCESS_EXPENSE, PROCESS_EXPENSE,
REVIEW_EXPENSE, REVIEW_EXPENSE,
} from "../../utils/constants"; } from "../../utils/constants";
import Label from "../common/Label"; import Label from "../common/Label";
import {
defaultPaymentRequestActionValues,
PaymentRequestActionScheam,
} from "./PaymentRequestSchema";
import PaymentStatusLogs from "./PaymentStatusLogs";
import { FilelistView } from "../Expenses/Filelist";
const ViewPaymentRequest = ({ requestId }) => { const ViewPaymentRequest = ({ requestId }) => {
const { data, isLoading, isError, error, isFetching } = const { data, isLoading, isError, error, isFetching } =
@ -50,10 +42,9 @@ const ViewPaymentRequest = ({ requestId }) => {
const IsReview = useHasUserPermission(REVIEW_EXPENSE); const IsReview = useHasUserPermission(REVIEW_EXPENSE);
const [imageLoaded, setImageLoaded] = useState({}); const [imageLoaded, setImageLoaded] = useState({});
const { setDocumentView, setModalSize } = usePaymentRequestContext(); const { setDocumentView } = usePaymentRequestContext();
const ActionSchema = const ActionSchema =
PaymentRequestActionScheam(IsPaymentProcess, data?.createdAt) ?? ExpenseActionScheam(IsPaymentProcess, data?.createdAt) ?? z.object({});
z.object({});
const navigate = useNavigate(); const navigate = useNavigate();
const { const {
register, register,
@ -64,7 +55,7 @@ const ViewPaymentRequest = ({ requestId }) => {
formState: { errors }, formState: { errors },
} = useForm({ } = useForm({
resolver: zodResolver(ActionSchema), resolver: zodResolver(ActionSchema),
defaultValues: defaultPaymentRequestActionValues, defaultValues: defaultActionValues,
}); });
const userPermissions = useSelector( const userPermissions = useSelector(
@ -106,7 +97,7 @@ const ViewPaymentRequest = ({ requestId }) => {
const onSubmit = (formData) => { const onSubmit = (formData) => {
const Payload = { const Payload = {
...formData, ...formData,
paidAt: localToUtc(formData.paidAt), paidAt: localToUtc(formData.reimburseDate),
paymentRequestId: data.id, paymentRequestId: data.id,
comment: formData.comment, comment: formData.comment,
}; };
@ -121,24 +112,17 @@ const ViewPaymentRequest = ({ requestId }) => {
return ( return (
<form className="container px-3" onSubmit={handleSubmit(onSubmit)}> <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 mb-2 text-center "> <div className="col-12 mb-1">
<h5 className="fw-semibold m-0">Payment Request Details</h5> <h5 className="fw-semibold m-0">Payment Request Details</h5>
<hr />
</div> </div>
<div className="row text-start"> <div className="row mb-1">
<div className=" col-sm-12 col-md-7 border-none border-md-end"> <div className="col-12 col-sm-6 col-md-8">
<div className="row"> <div className="row">
<div className="col-12 d-flex justify-content-between text-start fw-semibold mb-2"> <div className="col-12 text-start fw-semibold mb-2">
{data?.paymentRequestUID} {data?.paymentRequestUID}
<span
className={`badge bg-label-${
getColorNameFromHex(data?.expenseStatus?.color) || "secondary"
}`}
>
{data?.expenseStatus?.name}
</span>
</div> </div>
<div className="col-md-12 mb-3"> <div className="col-md-6 mb-3">
<div className="d-block d-md-flex align-items-center"> <div className="d-block d-md-flex align-items-center">
<label <label
className="form-label me-2 mb-0 fw-semibold text-start" className="form-label me-2 mb-0 fw-semibold text-start"
@ -150,7 +134,7 @@ const ViewPaymentRequest = ({ requestId }) => {
</div> </div>
</div> </div>
<div className="col-md-12 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <div className="d-flex">
<label <label
className="form-label me-2 mb-0 fw-semibold text-start" className="form-label me-2 mb-0 fw-semibold text-start"
@ -163,7 +147,7 @@ const ViewPaymentRequest = ({ requestId }) => {
</div> </div>
</div> </div>
</div> </div>
<div className="col-md-12 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <div className="d-flex">
<label <label
className="form-label me-2 mb-0 fw-semibold text-start" className="form-label me-2 mb-0 fw-semibold text-start"
@ -176,7 +160,7 @@ const ViewPaymentRequest = ({ requestId }) => {
</div> </div>
{/* Row 2 */} {/* Row 2 */}
<div className="col-md-12 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <div className="d-flex">
<label <label
className="form-label me-2 mb-0 fw-semibold text-start" className="form-label me-2 mb-0 fw-semibold text-start"
@ -187,7 +171,7 @@ const ViewPaymentRequest = ({ requestId }) => {
<div className="text-muted">{data?.payee}</div> <div className="text-muted">{data?.payee}</div>
</div> </div>
</div> </div>
<div className="col-md-1 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <div className="d-flex">
<label <label
className="form-label me-2 mb-0 fw-semibold text-start" className="form-label me-2 mb-0 fw-semibold text-start"
@ -196,13 +180,25 @@ const ViewPaymentRequest = ({ requestId }) => {
Amount : Amount :
</label> </label>
<div className="text-muted"> <div className="text-muted">
{formatFigure(data?.amount,{type:"currency",currency : data?.currency?.currencyCode})} {formatCurrency(data?.amount, data?.currency?.currencyCode)}
</div> </div>
</div> </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 && ( {data?.gstNumber && (
<div className="col-md-12 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <div className="d-flex">
<label <label
className="form-label me-2 mb-0 fw-semibold text-start" className="form-label me-2 mb-0 fw-semibold text-start"
@ -216,8 +212,25 @@ const ViewPaymentRequest = ({ requestId }) => {
)} )}
{/* Row 4 */} {/* Row 4 */}
<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"
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="d-flex"> <div className="d-flex">
<label <label
className="form-label me-2 mb-0 fw-semibold text-start" className="form-label me-2 mb-0 fw-semibold text-start"
@ -231,7 +244,18 @@ const ViewPaymentRequest = ({ requestId }) => {
</div> </div>
</div> </div>
<div className="col-md-12 mb-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" }}
>
Project :
</label>
<div className="text-muted">{data?.project?.name}</div>
</div>
</div>
<div className="col-md-6 mb-3">
<div className="d-flex"> <div className="d-flex">
<label <label
className="form-label me-2 mb-0 fw-semibold text-start" className="form-label me-2 mb-0 fw-semibold text-start"
@ -247,7 +271,7 @@ const ViewPaymentRequest = ({ requestId }) => {
{/* Row 6 */} {/* Row 6 */}
{data?.createdBy && ( {data?.createdBy && (
<div className="col-md-12 text-start"> <div className="col-md-6 text-start">
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<label <label
className="form-label me-2 mb-0 fw-semibold" className="form-label me-2 mb-0 fw-semibold"
@ -272,7 +296,7 @@ const ViewPaymentRequest = ({ requestId }) => {
</div> </div>
)} )}
{data?.paidBy && ( {data?.paidBy && (
<div className="col-md-12 text-start"> <div className="col-md-6 text-start">
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<label <label
className="form-label me-2 mb-0 fw-semibold" className="form-label me-2 mb-0 fw-semibold"
@ -301,16 +325,49 @@ const ViewPaymentRequest = ({ requestId }) => {
<label className="fw-semibold form-label">Description : </label> <label className="fw-semibold form-label">Description : </label>
<div className="text-muted">{data?.description}</div> <div className="text-muted">{data?.description}</div>
</div> </div>
<div className="col-12 text-start mb-2"> <div className="col-6 text-start">
<label className="form-label me-2 mb-1 fw-semibold"> <label className="form-label me-2 mb-2 fw-semibold">
Attachment : Attachment :
</label> </label>
<div className="d-flex flex-wrap gap-2"> <div className="d-flex flex-wrap gap-2">
{data?.documents?.length > 0 ? (
data?.documents?.map((doc) => {
const isImage = doc?.contentType?.includes("image");
{data?.attachments?.length > 0 ? ( return (
<FilelistView files={data?.attachments} viewFile={setDocumentView}/> <div
):(<p className="m-0 text-secondary">No Attachment</p>)} 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>
)}
</div> </div>
</div> </div>
@ -439,12 +496,8 @@ const ViewPaymentRequest = ({ requestId }) => {
)} )}
</div> </div>
</div> </div>
<div className=" col-sm-12 my-2 my-md-0 border-top border-md-none col-md-5"> <div className="col-12 col-sm-6 col-md-4">
<div className="d-flex mb-2"> <ExpenseStatusLogs data={data} />
<i className="bx bx-time-five me-2 "></i>{" "}
<p className="fw-medium">TimeLine</p>
</div>
<PaymentStatusLogs data={data} />
</div> </div>
</div> </div>
</form> </form>

72
src/components/RecurringExpense/ManageRecurringExpense.jsx
View File

@ -1,13 +1,13 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import Label from '../common/Label'; import Label from '../common/Label';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { useExpenseCategory, useRecurringStatus } from '../../hooks/masterHook/useMaster'; import { useExpenseCategory } from '../../hooks/masterHook/useMaster';
import DatePicker from '../common/DatePicker'; import DatePicker from '../common/DatePicker';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { defaultRecurringExpense, PaymentRecurringExpense } from './RecurringExpenseSchema'; import { defaultRecurringExpense, PaymentRecurringExpense } from './RecurringExpenseSchema';
import { FREQUENCY_FOR_RECURRING, INR_CURRENCY_CODE } from '../../utils/constants'; import { INR_CURRENCY_CODE } from '../../utils/constants';
import { useCurrencies, useProjectName } from '../../hooks/useProjects'; import { useCurrencies, useProjectName } from '../../hooks/useProjects';
import { useCreateRecurringExpense, useUpdateRecurringExpense } from '../../hooks/useExpense'; import { useCreateRecurringExpense } from '../../hooks/useExpense';
function ManageRecurringExpense({ closeModal, requestToEdit = null }) { function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
@ -17,9 +17,7 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
const { data: currencyData, isLoading: currencyLoading, isError: currencyError } = useCurrencies(); const { data: currencyData, isLoading: currencyLoading, isError: currencyError } = useCurrencies();
const { data: statusData, isLoading: statusLoading, isError: statusError } = useRecurringStatus();
console.log("Tanish", statusData)
const { const {
ExpenseCategories, ExpenseCategories,
loading: ExpenseLoading, loading: ExpenseLoading,
@ -42,9 +40,9 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
handleClose(); handleClose();
} }
); );
const { mutate: RecurringExpenseUpdate, isPending } = useUpdateRecurringExpense(() => // const { mutate: PaymentRequestUpdate, isPending } = useUpdatePaymentRequest(() =>
handleClose() // handleClose()
); // );
useEffect(() => { useEffect(() => {
if (requestToEdit && data) { if (requestToEdit && data) {
@ -68,30 +66,22 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
} }
}, [data, reset]); }, [data, reset]);
// console.log("Veer",data)
useEffect(() => {
if (!requestToEdit && currencyData && currencyData.length > 0) {
const inrCurrency = currencyData.find(
(c) => c.id === INR_CURRENCY_CODE
);
if (inrCurrency) {
setValue("currencyId", INR_CURRENCY_CODE, { shouldValidate: true });
}
}
}, [currencyData, requestToEdit, setValue]);
const onSubmit = (fromdata) => { const onSubmit = (fromdata) => {
let payload = { let payload = {
...fromdata, ...fromdata,
// strikeDate: localToUtc(fromdata.strikeDate),
strikeDate: fromdata.strikeDate ? new Date(fromdata.strikeDate).toISOString() : null, strikeDate: fromdata.strikeDate ? new Date(fromdata.strikeDate).toISOString() : null,
}; };
if (requestToEdit) { if (requestToEdit) {
const editPayload = { ...payload, id: data.id}; const editPayload = { ...payload, id: data.id};
RecurringExpenseUpdate({ id: data.id, payload: editPayload }); PaymentRequestUpdate({ id: data.id, payload: editPayload });
} else { } else {
CreateRecurringExpense(payload); CreateRecurringExpense(payload);
} }
console.log("Kartik", payload)
}; };
return ( return (
@ -304,8 +294,10 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
{errors.notifyTo.message} {errors.notifyTo.message}
</small> </small>
)} )}
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<Label htmlFor="statusId" className="form-label" required> <Label htmlFor="statusId" className="form-label" required>
Status Status
@ -315,11 +307,15 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
className="form-select form-select-sm" className="form-select form-select-sm"
{...register("statusId")} {...register("statusId")}
> >
<option value="">Select Status</option> <option value="">Select Currency</option>
{statusLoading && <option>Loading...</option>}
{!statusLoading && !statusError && statusData?.data?.map((status) => ( {currencyLoading && <option>Loading...</option>}
<option key={status.id} value={status.id}>
{status.name} {!currencyLoading &&
!currencyError &&
currencyData?.map((currency) => (
<option key={currency.id} value={currency.id}>
{`${currency.currencyName} (${currency.symbol})`}
</option> </option>
))} ))}
</select> </select>
@ -332,6 +328,7 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
{/* Payment Buffer Days and Number of Iteration */} {/* Payment Buffer Days and Number of Iteration */}
<div className="row my-2 text-start"> <div className="row my-2 text-start">
<div className="col-md-6"> <div className="col-md-6">
<Label htmlFor="paymentBufferDays" className="form-label" required> <Label htmlFor="paymentBufferDays" className="form-label" required>
Payment Buffer Days Payment Buffer Days
@ -366,31 +363,6 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
</div> </div>
</div> </div>
{/* Frequency */}
<div className="col-md-6 text-start">
<Label htmlFor="frequency" className="form-label" required>
Frequency
</Label>
<select
id="frequency"
className="form-select form-select-sm"
{...register("frequency", { valueAsNumber: true })}
>
<option value="">Select Frequency</option>
{Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => (
<option key={key} value={key}>
{label}
</option>
))}
</select>
{errors.frequency && (
<small className="danger-text">{errors.frequency.message}</small>
)}
</div>
{/* Description */} {/* Description */}
<div className="row my-2 text-start"> <div className="row my-2 text-start">
<div className="col-md-12"> <div className="col-md-12">

300
src/components/RecurringExpense/RecurringExpenseList.jsx
View File

@ -1,300 +0,0 @@
import React, { useState } from "react";
import {
EXPENSE_DRAFT,
EXPENSE_REJECTEDBY,
FREQUENCY_FOR_RECURRING,
ITEMS_PER_PAGE,
} from "../../utils/constants";
import {
formatCurrency,
useDebounce,
} from "../../utils/appUtils";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton";
import ConfirmModal from "../common/ConfirmModal";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import Error from "../common/Error";
import { useRecurringExpenseContext } from "../../pages/RecurringExpense/RecurringExpensePage";
import { useRecurringExpenseList } from "../../hooks/useExpense";
const RecurringExpenseList = ({ search }) => {
const { setManageRequest, setVieRequest } = useRecurringExpenseContext();
const navigate = useNavigate();
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [deletingId, setDeletingId] = useState(null);
const SelfId = useSelector(
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
);
const recurringExpenseColumns = [
{
key: "recurringPaymentUId",
label: "Recurring Payment ID",
align: "text-start ps-2",
getValue: (e) => e?.recurringPaymentUId || "N/A",
},
{
key: "expenseCategory",
label: "Category",
align: "text-start",
getValue: (e) => e?.expenseCategory?.name || "N/A",
},
{
key: "title",
label: "Title",
align: "text-start",
getValue: (e) => e?.title || "N/A",
},
{
key: "strikeDate",
label: "Strike Date",
align: "text-start",
getValue: (e) =>
e?.strikeDate ? formatUTCToLocalTime(e.strikeDate) : "N/A",
},
{
key: "amount",
label: "Amount",
align: "text-start",
getValue: (e) =>
e?.amount
? `${e?.currency?.symbol || ""}${e.amount.toLocaleString()}`
: "N/A",
},
{
key: "payee",
label: "Payee",
align: "text-start",
getValue: (e) => e?.payee || "N/A",
},
{
key: "frequency",
label: "Frequency",
align: "text-start",
getValue: (e) =>
e?.frequency !== undefined && e?.frequency !== null
? FREQUENCY_FOR_RECURRING[e.frequency] || "N/A"
: "N/A",
},
{
key: "latestPRGeneratedAt",
label: "Last Generation Date",
align: "text-start",
getValue: (e) =>
e?.latestPRGeneratedAt
? formatUTCToLocalTime(e.latestPRGeneratedAt)
: "N/A",
},
{
key: "createdAt",
label: "Next Generation Date",
align: "text-start",
getValue: (e) =>
e?.createdAt ? formatUTCToLocalTime(e.createdAt) : "N/A",
},
{
key: "status",
label: "Status",
align: "text-start",
getValue: (e) => e?.status?.name || "N/A",
},
];
const [currentPage, setCurrentPage] = useState(1);
const debouncedSearch = useDebounce(search, 500);
const { data, isLoading, isError, error, isRefetching, refetch } =
useRecurringExpenseList(
ITEMS_PER_PAGE,
currentPage,
{},
true,
debouncedSearch
);
const recurringExpenseData = data?.data || [];
const totalPages = data?.totalPages || 1;
if (isError) {
return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
}
const header = [
"Template Name",
"Frequency",
"Next Generation Date",
"Last Generation Date",
"Status",
"Action",
];
if (isLoading) return <ExpenseTableSkeleton headers={header} />;
const canEditExpense = (recurringExpense) => {
// return (
// (recurringExpense?.expenseStatus?.id === EXPENSE_DRAFT ||
// EXPENSE_REJECTEDBY.includes(recurringExpense?.expenseStatus.id)) &&
// recurringExpense?.createdBy?.id === SelfId
// );
};
const canDeleteExpense = (request) => {
return (
request?.expenseStatus?.id === EXPENSE_DRAFT &&
request?.createdBy?.id === SelfId
);
};
const handleDelete = (id) => {
setDeletingId(id);
DeleteExpense(
{ id },
{
onSettled: () => {
setDeletingId(null);
setIsDeleteModalOpen(false);
},
}
);
};
return (
<>
{IsDeleteModalOpen && (
<ConfirmModal
isOpen={IsDeleteModalOpen}
type="delete"
header="Delete Recurring Expense"
message="Are you sure you want to delete?"
onSubmit={handleDelete}
onClose={() => setIsDeleteModalOpen(false)}
paramData={deletingId}
/>
)}
<div className="card page-min-h table-responsive px-sm-4">
<div className="card-datatable" id="payment-request-table">
<table className="table border-top dataTable text-nowrap align-middle">
<thead>
<tr>
{recurringExpenseColumns.map((col) => (
<th key={col.key} className={`sorting ${col.align}`}>
{col.label}
</th>
))}
<th className="text-center">Action</th>
</tr>
</thead>
<tbody>
{recurringExpenseData.length > 0 ? (
recurringExpenseData.map((recurringExpense) => (
<tr key={recurringExpense.id}>
{recurringExpenseColumns.map((col) => (
<td
key={col.key}
className={`d-table-cell ${col.align ?? ""}`}
>
{col?.customRender
? col?.customRender(recurringExpense)
: col?.getValue(recurringExpense)}
</td>
))}
<td className="sticky-action-column bg-white">
<div className="d-flex justify-content-center gap-2">
<i
className="bx bx-show text-primary cursor-pointer"
// onClick={() =>
// setVieRequest({
// requestId: recurringExpense.id,
// view: true,
// })
// }
></i>
{/* Uncomment for edit/delete actions */}
<div className="dropdown z-2">
<button
type="button"
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
data-bs-toggle="dropdown"
>
<i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
</button>
<ul className="dropdown-menu dropdown-menu-end w-auto">
<li
onClick={() =>
setManageRequest({
IsOpen: true,
RequestId: recurringExpense.id,
})
}
>
<a className="dropdown-item px-2 cursor-pointer py-1">
<i className="bx bx-edit text-primary bx-xs me-2"></i>
Modify
</a>
</li>
<li
onClick={() => {
setIsDeleteModalOpen(true);
setDeletingId(recurringExpense.id);
}}
>
<a className="dropdown-item px-2 cursor-pointer py-1">
<i className="bx bx-trash text-danger bx-xs me-2"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan={recurringExpenseColumns.length + 1} className="text-center border-0 py-8">
<p>No Recurring Expense Found</p>
</td>
</tr>
)}
</tbody>
</table>
</div>
{/* Pagination */}
{totalPages > 1 && (
<div className="d-flex justify-content-end py-3 pe-3">
<nav>
<ul className="pagination mb-0">
{[...Array(totalPages)].map((_, index) => (
<li
key={index}
className={`page-item ${currentPage === index + 1 ? "active" : ""}`}
>
<button
className="page-link"
onClick={() => setCurrentPage(index + 1)}
>
{index + 1}
</button>
</li>
))}
</ul>
</nav>
</div>
)}
</div>
</>
);
};
export default RecurringExpenseList;

342
src/components/RecurringExpense/RecurringRexpenseList.jsx Normal file
View File

@ -0,0 +1,342 @@
import React, { useState } from "react";
import {
EXPENSE_DRAFT,
EXPENSE_REJECTEDBY,
ITEMS_PER_PAGE,
} from "../../utils/constants";
import {
formatCurrency,
getColorNameFromHex,
useDebounce,
} from "../../utils/appUtils";
import { usePaymentRequestList } from "../../hooks/useExpense";
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
import Avatar from "../../components/common/Avatar";
import { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton";
import ConfirmModal from "../common/ConfirmModal";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import Error from "../common/Error";
import { useRecurringExpenseContext } from "../../pages/RecurringExpense/RecurringExpensePage";
const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
const { setManageRequest, setVieRequest } = useRecurringExpenseContext();
const navigate = useNavigate();
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [deletingId, setDeletingId] = useState(null);
const SelfId = useSelector(
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
);
const groupByField = (items, field) => {
return items.reduce((acc, item) => {
let key;
let displayField;
switch (field) {
case "transactionDate":
key = item?.transactionDate?.split("T")[0];
displayField = "Transaction Date";
break;
case "status":
key = item?.status?.displayName || "Unknown";
displayField = "Status";
break;
case "submittedBy":
key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
}`.trim();
displayField = "Submitted By";
break;
case "project":
key = item?.project?.name || "Unknown Project";
displayField = "Project";
break;
case "paymentMode":
key = item?.paymentMode?.name || "Unknown Mode";
displayField = "Payment Mode";
break;
case "expensesType":
key = item?.expensesType?.name || "Unknown Type";
displayField = "Expense Category";
break;
case "createdAt":
key = item?.createdAt?.split("T")[0] || "Unknown Date";
displayField = "Created Date";
break;
default:
key = "Others";
displayField = "Others";
}
const groupKey = `${field}_${key}`; // unique key for object property
if (!acc[groupKey]) {
acc[groupKey] = { key, displayField, items: [] };
}
acc[groupKey].items.push(item);
return acc;
}, {});
};
const paymentRequestColumns = [
{
key: "paymentRequestUID",
label: "Template Name",
align: "text-start mx-2",
getValue: (e) => e.paymentRequestUID || "N/A",
},
{
key: "title",
label: "Frequency",
align: "text-start",
getValue: (e) => e.title || "N/A",
},
{
key: "createdAt",
label: "Next Generation Date",
align: "text-start",
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
},
{
key: "createdAt",
label: "Status",
align: "text-start",
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
},
];
const [currentPage, setCurrentPage] = useState(1);
const debouncedSearch = useDebounce(search, 500);
const { data, isLoading, isError, error, isRefetching, refetch } =
usePaymentRequestList(
ITEMS_PER_PAGE,
currentPage,
filters,
true,
debouncedSearch
);
const paymentRequestData = data?.data || [];
const totalPages = data?.data?.totalPages || 1;
if (isError) {
return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
}
const header = [
"Request ID",
"Request Title",
"Submitted By",
"Submitted On",
"Amount",
"Status",
"Action",
];
if (isLoading) return <ExpenseTableSkeleton headers={header} />;
const grouped = groupBy
? groupByField(data?.data ?? [], groupBy)
: { All: data?.data ?? [] };
const IsGroupedByDate = [
{ key: "transactionDate", displayField: "Transaction Date" },
{ key: "createdAt", displayField: "created Date" },
]?.includes(groupBy);
const canEditExpense = (paymentRequest) => {
return (
(paymentRequest?.expenseStatus?.id === EXPENSE_DRAFT ||
EXPENSE_REJECTEDBY.includes(paymentRequest?.expenseStatus.id)) &&
paymentRequest?.createdBy?.id === SelfId
);
};
const canDetetExpense = (request) => {
return (
request?.expenseStatus?.id === EXPENSE_DRAFT &&
request?.createdBy?.id === SelfId
);
};
const handleDelete = (id) => {
setDeletingId(id);
DeleteExpense(
{ id },
{
onSettled: () => {
setDeletingId(null);
setIsDeleteModalOpen(false);
},
}
);
};
return (
<>
{IsDeleteModalOpen && (
<ConfirmModal
isOpen={IsDeleteModalOpen}
type="delete"
header="Delete Expense"
message="Are you sure you want delete?"
onSubmit={handleDelete}
onClose={() => setIsDeleteModalOpen(false)}
// loading={isPending}
paramData={deletingId}
/>
)}
<div className="card page-min-h table-responsive px-sm-4">
<div className="card-datatable" id="payment-request-table">
<table className="table border-top dataTable text-nowrap align-middle">
<thead>
<tr>
{paymentRequestColumns.map((col) => (
<th key={col.key} className={`sorting ${col.align}`}>
{col.label}
</th>
))}
<th className="text-center">Action</th>
</tr>
</thead>
<tbody>
{Object.keys(grouped).length > 0 ? (
Object.values(grouped).map(({ key, displayField, items }) => (
<React.Fragment key={key}>
<tr className="tr-group text-dark">
<td colSpan={8} className="text-start">
<div className="d-flex align-items-center">
{" "}
<small className="fs-6 py-1">
{displayField} :{" "}
</small>{" "}
<small className="fs-6 ms-3">
{IsGroupedByDate ? formatUTCToLocalTime(key) : key}
</small>
</div>
</td>
</tr>
{items?.map((paymentRequest) => (
<tr key={paymentRequest.id}>
{paymentRequestColumns.map(
(col) =>
(col.isAlwaysVisible || groupBy !== col.key) && (
<td
key={col.key}
className={`d-table-cell ${col.align ?? ""}`}
>
{col?.customRender
? col?.customRender(paymentRequest)
: col?.getValue(paymentRequest)}
</td>
)
)}
<td className="sticky-action-column bg-white">
<div className="d-flex justify-content-center gap-2">
<i
className="bx bx-show text-primary cursor-pointer"
onClick={() =>
setVieRequest({
requestId: paymentRequest.id,
view: true,
})
}
></i>
{canEditExpense(paymentRequest) && (
<div className="dropdown z-2">
<button
type="button"
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i
className="bx bx-dots-vertical-rounded text-muted p-0"
data-bs-toggle="tooltip"
data-bs-offset="0,8"
data-bs-placement="top"
data-bs-custom-class="tooltip-dark"
title="More Action"
></i>
</button>
<ul className="dropdown-menu dropdown-menu-end w-auto">
<li
onClick={() =>
setManageRequest({
IsOpen: true,
RequestId: paymentRequest.id,
})
}
>
<a className="dropdown-item px-2 cursor-pointer py-1">
<i className="bx bx-edit text-primary bx-xs me-2"></i>
<span className="align-left ">
Modify
</span>
</a>
</li>
{canDetetExpense(paymentRequest) && (
<li
onClick={() => {
setIsDeleteModalOpen(true);
setDeletingId(paymentRequest.id);
}}
>
<a className="dropdown-item px-2 cursor-pointer py-1">
<i className="bx bx-trash text-danger bx-xs me-2"></i>
<span className="align-left">
Delete
</span>
</a>
</li>
)}
</ul>
</div>
)}
</div>
</td>
</tr>
))}
</React.Fragment>
))
) : (
<tr>
<td colSpan={8} className="text-center border-0 ">
<div className="py-8">
<p>No Request Found</p>
</div>
</td>
</tr>
)}
</tbody>
</table>
</div>
{/* Pagination */}
{totalPages > 1 && (
<div className="d-flex justify-content-end py-3 pe-3">
<nav>
<ul className="pagination mb-0">
{[...Array(totalPages)].map((_, index) => (
<li
key={index}
className={`page-item ${currentPage === index + 1 ? "active" : ""
}`}
>
<button
className="page-link"
onClick={() => setCurrentPage(index + 1)}
>
{index + 1}
</button>
</li>
))}
</ul>
</nav>
</div>
)}
</div>
</>
);
};
export default RecurringExpenseList;

28
src/components/common/TimeLine.jsx
View File

@ -1,8 +1,5 @@
import React from "react"; import React from "react";
import Avatar from "./Avatar"; import Avatar from "./Avatar";
import Tooltip from "./Tooltip";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import moment from "moment";
const Timeline = ({ items = [], transparent = true }) => { const Timeline = ({ items = [], transparent = true }) => {
return ( return (
@ -11,8 +8,7 @@ const Timeline = ({ items = [], transparent = true }) => {
transparent ? "timeline-transparent text-start" : "" transparent ? "timeline-transparent text-start" : ""
}`} }`}
> >
{items && {items.map((item) => (
items?.map((item) => (
<li <li
key={item.id} key={item.id}
className={`timeline-item ${ className={`timeline-item ${
@ -28,11 +24,7 @@ const Timeline = ({ items = [], transparent = true }) => {
<div className="timeline-event"> <div className="timeline-event">
<div className="timeline-header mb-3 d-flex justify-content-between"> <div className="timeline-header mb-3 d-flex justify-content-between">
<h6 className="mb-0 text-body">{item.title}</h6> <h6 className="mb-0 text-body">{item.title}</h6>
<small className="text-body-secondary"> <small className="text-body-secondary">{item.timeAgo}</small>
<Tooltip text={formatUTCToLocalTime(item.timeAgo, true)}>
{moment.utc(item.timeAgo).local().fromNow()}
</Tooltip>
</small>
</div> </div>
{item.description && <p className="mb-2">{item.description}</p>} {item.description && <p className="mb-2">{item.description}</p>}
@ -62,7 +54,7 @@ const Timeline = ({ items = [], transparent = true }) => {
<div className="d-flex flex-wrap align-items-center mb-2"> <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"> <ul className="list-unstyled users-list d-flex align-items-center avatar-group m-0">
{item.users.map((user, i) => ( {item.users.map((user, i) => (
<li key={i} className="m-0" title={user.name}> <li key={i} className="avatar me-1" title={user.name}>
{user.avatar ? ( {user.avatar ? (
<img <img
src={user.avatar} src={user.avatar}
@ -73,7 +65,6 @@ const Timeline = ({ items = [], transparent = true }) => {
/> />
) : ( ) : (
<Avatar <Avatar
size="xs"
firstName={user.firstName} firstName={user.firstName}
lastName={user.lastName} lastName={user.lastName}
/> />
@ -84,7 +75,7 @@ const Timeline = ({ items = [], transparent = true }) => {
{item.users?.length === 1 && ( {item.users?.length === 1 && (
<div className="m-0"> <div className="m-0">
<p className="mb-0 text-xs fw-medium">{`${item.users[0].firstName} ${item.users[0].lastName}`}</p> <p className="mb-0 small fw-medium">{`${item.users[0].firstName} ${item.users[0].lastName}`}</p>
<small>{item.users[0].role}</small> <small>{item.users[0].role}</small>
</div> </div>
)} )}
@ -93,17 +84,6 @@ const Timeline = ({ items = [], transparent = true }) => {
</div> </div>
</li> </li>
))} ))}
{!items ||
(items.length == 0 && (
<li
className={`timeline-item text-center ${
transparent ? "timeline-item-transparent" : ""
}`}
>
Not action yet.
</li>
))}
</ul> </ul>
); );
}; };

8
src/hooks/masterHook/useMaster.js
View File

@ -57,14 +57,6 @@ export const useMasterMenu = () => {
}); });
}; };
export const useRecurringStatus = () => {
return useQuery({
queryKey: ["recurringExpense"],
queryFn: async () =>
await MasterRespository.getRecurringStatus(),
});
};
export const useActivitiesMaster = () => { export const useActivitiesMaster = () => {
const { const {
data: activities = [], data: activities = [],

76
src/hooks/useExpense.js
View File

@ -5,19 +5,6 @@ import { queryClient } from "../layouts/AuthLayout";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import moment from "moment"; import moment from "moment";
export const usePayee =()=>{
return useQuery({
queryKey:["payee"],
queryFn:async()=>{
const resp = await ExpenseRepository.GetPayee();
return resp.data;
}
})
}
// -------------------Query------------------------------------------------------ // -------------------Query------------------------------------------------------
const cleanFilter = (filter) => { const cleanFilter = (filter) => {
@ -371,30 +358,6 @@ 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 //#endregion
export const usePaymentRequestFilter = () => { export const usePaymentRequestFilter = () => {
@ -433,7 +396,7 @@ export const useCreateRecurringExpense = (onSuccessCallBack) => {
}, },
onSuccess: (_, variables) => { onSuccess: (_, variables) => {
queryClient.invalidateQueries({ queryKey: ["recurringExpenseList"] }); queryClient.invalidateQueries({ queryKey: ["recurringExpense"] });
showToast("Recurring Expense Created Successfully", "success"); showToast("Recurring Expense Created Successfully", "success");
if (onSuccessCallBack) onSuccessCallBack(); if (onSuccessCallBack) onSuccessCallBack();
}, },
@ -445,40 +408,3 @@ export const useCreateRecurringExpense = (onSuccessCallBack) => {
}, },
}); });
}; };
export const useUpdateRecurringExpense = (onSuccessCallBack) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ id, payload }) => {
const response = await ExpenseRepository.UpdateRecurringExpense(id, payload);
return response.data;
},
onSuccess: (updatedExpense, variables) => {
queryClient.removeQueries({ queryKey: ["RecurringExpense", variables.id] });
queryClient.invalidateQueries({ queryKey: ["RecurringExpenseList"] });
showToast("Recurring Expense updated Successfully", "success");
if (onSuccessCallBack) onSuccessCallBack();
},
onError: (error) => {
showToast("Something went wrong.Please try again later.", "error");
},
});
};
export const useRecurringExpenseList = (
pageSize,
pageNumber,
filter,
isActive,
searchString = "",
) => {
return useQuery({
queryKey: ["recurringExpenseList",pageSize,pageNumber,filter,isActive,searchString],
queryFn: async()=>{
const resp = await ExpenseRepository.GetRecurringExpenseList(pageSize,pageNumber,filter,isActive,searchString);
return resp.data;
},
keepPreviousData: true,
});
};

20
src/pages/Expense/ExpensePage.jsx
View File

@ -1,10 +1,4 @@
import React, { import React, { createContext, useContext, useState, useEffect, useRef } from "react";
createContext,
useContext,
useState,
useEffect,
useRef,
} from "react";
import { useForm, useFormContext } from "react-hook-form"; import { useForm, useFormContext } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
@ -25,10 +19,7 @@ import {
VIEW_SELF_EXPENSE, VIEW_SELF_EXPENSE,
} from "../../utils/constants"; } from "../../utils/constants";
import { import { defaultFilter, SearchSchema } from "../../components/Expenses/ExpenseSchema";
defaultFilter,
SearchSchema,
} from "../../components/Expenses/ExpenseSchema";
import PreviewDocument from "../../components/Expenses/PreviewDocument"; import PreviewDocument from "../../components/Expenses/PreviewDocument";
// Context // Context
@ -111,7 +102,7 @@ const ExpensePage = () => {
setManageExpenseModal, setManageExpenseModal,
setDocumentView, setDocumentView,
filterData, filterData,
removeFilterChip, removeFilterChip
}; };
return ( return (
@ -137,6 +128,7 @@ const ExpensePage = () => {
</div> </div>
<div className="col-6 text-end mt-2 mt-sm-0"> <div className="col-6 text-end mt-2 mt-sm-0">
{IsCreatedAble && ( {IsCreatedAble && (
<button <button
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary"
@ -159,6 +151,8 @@ const ExpensePage = () => {
</div> </div>
</div> </div>
<ExpenseList <ExpenseList
filters={filters} filters={filters}
groupBy={groupBy} groupBy={groupBy}
@ -196,7 +190,7 @@ const ExpensePage = () => {
{viewExpense.view && ( {viewExpense.view && (
<GlobalModel <GlobalModel
isOpen isOpen
size="xl" size="lg"
modalType="top" modalType="top"
closeModal={() => setViewExpense({ expenseId: null, view: false })} closeModal={() => setViewExpense({ expenseId: null, view: false })}
> >

24
src/pages/PaymentRequest/PaymentRequestPage.jsx
View File

@ -8,13 +8,12 @@ import PaymentRequestList from "../../components/PaymentRequest/PaymentRequestLi
import PaymentRequestFilterPanel from "../../components/PaymentRequest/PaymentRequestFilterPanel"; import PaymentRequestFilterPanel from "../../components/PaymentRequest/PaymentRequestFilterPanel";
import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema"; import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest"; import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest";
import PreviewDocument from "../../components/Expenses/PreviewDocument";
export const PaymentRequestContext = createContext(); export const PaymentRequestContext = createContext();
export const usePaymentRequestContext = () => { export const usePaymentRequestContext = () => {
const context = useContext(PaymentRequestContext); const context = useContext(PaymentRequestContext);
if (!context) { if (!context) {
throw new Error("usePaymentRequestContext must be used within an RequestPaymentProvider"); throw new Error("usePaymentRequestContext must be used within an ExpenseProvider");
} }
return context; return context;
}; };
@ -26,18 +25,12 @@ const PaymentRequestPage = () => {
const [ViewRequest,setVieRequest] = useState({view:false,requestId:null}) const [ViewRequest,setVieRequest] = useState({view:false,requestId:null})
const { setOffcanvasContent, setShowTrigger } = useFab(); const { setOffcanvasContent, setShowTrigger } = useFab();
const [filters, setFilters] = useState(defaultPaymentRequestFilter); const [filters, setFilters] = useState(defaultPaymentRequestFilter);
const [ViewDocument, setDocumentView] = useState({
IsOpen: false,
Image: null,
});
const [modalSize,setModalSize] = useState("md")
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const contextValue = { const contextValue = {
setManageRequest, setManageRequest,
setVieRequest, setVieRequest
setDocumentView,
setModalSize
}; };
useEffect(() => { useEffect(() => {
@ -135,17 +128,6 @@ const PaymentRequestPage = () => {
</GlobalModel> </GlobalModel>
)} )}
{ViewDocument.IsOpen && (
<GlobalModel
isOpen
size="md"
key={ViewDocument.Image ?? "doc"}
closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
>
<PreviewDocument imageUrl={ViewDocument.Image} />
</GlobalModel>
)}
</div> </div>
</PaymentRequestContext.Provider> </PaymentRequestContext.Provider>
); );

11
src/pages/RecurringExpense/RecurringExpensePage.jsx
View File

@ -2,8 +2,9 @@ import React, { createContext, useState, useEffect, useContext } from "react";
import Breadcrumb from "../../components/common/Breadcrumb"; import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel"; import GlobalModel from "../../components/common/GlobalModel";
import { useFab } from "../../Context/FabContext"; import { useFab } from "../../Context/FabContext";
// import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense"; import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense";
import RecurringExpenseList from "../../components/RecurringExpense/RecurringExpenseList"; import RecurringExpenseList from "../../components/RecurringExpense/RecurringRexpenseList";
export const RecurringExpenseContext = createContext(); export const RecurringExpenseContext = createContext();
export const useRecurringExpenseContext = () => { export const useRecurringExpenseContext = () => {
@ -16,7 +17,7 @@ export const useRecurringExpenseContext = () => {
const RecurringExpensePage = () => { const RecurringExpensePage = () => {
const [ManageRequest, setManageRequest] = useState({ const [ManageRequest, setManageRequest] = useState({
IsOpen: null, IsOpen: null,
RecurringId: null, RequestId: null,
}); });
const [ViewRequest, setVieRequest] = useState({ view: false, requestId: null }) const [ViewRequest, setVieRequest] = useState({ view: false, requestId: null })
const { setOffcanvasContent, setShowTrigger } = useFab(); const { setOffcanvasContent, setShowTrigger } = useFab();
@ -104,10 +105,10 @@ const RecurringExpensePage = () => {
} }
> >
<ManageRecurringExpense <ManageRecurringExpense
key={ManageRequest.RecurringId ?? "new"} key={ManageRequest.RequestId ?? "new"}
requestToEdit={ManageRequest.RecurringId} requestToEdit={ManageRequest.RequestId}
closeModal={() => closeModal={() =>
setManageRequest({ IsOpen: null, RecurringId: null }) setManageRequest({ IsOpen: null, RequestId: null })
} }
/> />
</GlobalModel> </GlobalModel>

19
src/repositories/ExpsenseRepository.jsx
View File

@ -1,20 +1,18 @@
import { api } from "../utils/axiosClient"; import { api } from "../utils/axiosClient";
const ExpenseRepository = { const ExpenseRepository = {
GetPayee: () => api.get("/api/Expense/payment-request/payee"),
//#region Expense //#region Expense
GetExpenseList: (pageSize, pageNumber, filter, searchString) => { GetExpenseList: (pageSize, pageNumber, filter, searchString) => {
const payloadJsonString = JSON.stringify(filter); const payloadJsonString = JSON.stringify(filter);
return api.get( return api.get(`/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`);
`/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`
);
}, },
GetExpenseDetails: (id) => api.get(`/api/Expense/details/${id}`), GetExpenseDetails: (id) => api.get(`/api/Expense/details/${id}`),
CreateExpense: (data) => api.post("/api/Expense/create", data), CreateExpense: (data) => api.post("/api/Expense/create", data),
UpdateExpense: (id, data) => api.put(`/api/Expense/edit/${id}`, data), UpdateExpense: (id, data) => api.put(`/api/Expense/edit/${id}`, data),
DeleteExpense: (id) => api.delete(`/api/Expense/delete/${id}`), DeleteExpense: (id) => api.delete(`/api/Expense/delete/${id}`),
ActionOnExpense: (data) => api.post("/api/expense/action", data), ActionOnExpense: (data) => api.post('/api/expense/action', data),
GetExpenseFilter: () => api.get("/api/Expense/filter"), GetExpenseFilter: () => api.get('/api/Expense/filter'),
//#endregion //#endregion
@ -32,19 +30,14 @@ const ExpenseRepository = {
//#region Recurring Expense //#region Recurring Expense
GetRecurringExpenseList: (pageSize, pageNumber, filter, isActive, searchString) => {
const payloadJsonString = JSON.stringify(filter);
return api.get(`/api/Expense/get/recurring-payment/list?isActive=${isActive}&pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`);
},
CreateRecurringExpense: (data) => api.post("/api/Expense/recurring-payment/create", data), CreateRecurringExpense: (data) => api.post("/api/Expense/recurring-payment/create", data),
UpdateRecurringExpense: (id, data) => api.put(`/api/Expense/recurring-payment/edit/${id}`, data),
//#endregion //#endregion
//#region Advance Payment //#region Advance Payment
GetTranctionList: () => api.get(`/get/transactions/${employeeId}`), GetTranctionList: () => api.get(`/get/transactions/${employeeId}`)
//#endregion //#endregion
}; }
export default ExpenseRepository; export default ExpenseRepository;

2
src/repositories/MastersRepository.jsx
View File

@ -141,6 +141,4 @@ export const MasterRespository = {
api.post(`/api/Master/payment-adjustment-head`, data), api.post(`/api/Master/payment-adjustment-head`, data),
updatePaymentAjustmentHead: (id, data) => updatePaymentAjustmentHead: (id, data) =>
api.put(`/api/Master/payment-adjustment-head/edit/${id}`, data), api.put(`/api/Master/payment-adjustment-head/edit/${id}`, data),
getRecurringStatus: () => api.get(`/api/master/recurring-status/list`),
}; };

2
src/utils/appUtils.js
View File

@ -108,7 +108,7 @@ export function localToUtc(dateString) {
export const formatCurrency = (amount, currency = "INR", locale = "en-US") => { export const formatCurrency = (amount, currency = "INR", locale = "en-US") => {
return new Intl.NumberFormat(locale, { return new Intl.NumberFormat(locale, {
style: "currency", style: "currency",
notation: "compact", // standard or compact notation: "compact",
compactDisplay: "short", compactDisplay: "short",
currency: currency, currency: currency,
minimumFractionDigits: 0, minimumFractionDigits: 0,

9
src/utils/constants.jsx
View File

@ -177,13 +177,4 @@ export const ALLOW_PROJECTSTATUS_ID = [
export const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000"; export const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
export const FREQUENCY_FOR_RECURRING = {
0: "Monthly",
1: "Quarterly",
2: "Half-Yearly",
3: "Yearly",
4:"Dailty",
5:"Weekly"
};