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

added acion api t update status

Browse Source
This commit is contained in:
pramod.mahajan 2025-11-03 20:25:41 +05:30
parent edafc204b8
commit d02b14272f
8 changed files with 229 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,11 +7,11 @@ const ExpenseStatusLogs = ({ data }) => {
const [visibleCount, setVisibleCount] = useState(4);
const sortedLogs = useMemo(() => {
if (!data?.expenseLogs) return [];
return [...data.expenseLogs].sort(
if (!data?.updateLogs) return [];
return [...data.updateLogs].sort(
(a, b) => new Date(b.updateAt) - new Date(a.updateAt)
);
}, [data?.expenseLogs]);
}, [data?.updateLogs]);
const logsToShow = sortedLogs.slice(0, visibleCount);

1
src/components/PaymentRequest/PaymentRequestFilterPanel.jsx
View File

@ -38,7 +38,6 @@ const PaymentRequestFilterPanel = ({ onApply, handleGroupBy }) => {
const [selectedGroup, setSelectedGroup] = useState(groupByList[6]);
const [resetKey, setResetKey] = useState(0);
console.log("Kartik",data)
const methods = useForm({
resolver: zodResolver(SearchPaymentRequestSchema),

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

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { EXPENSE_DRAFT, ITEMS_PER_PAGE } from "../../utils/constants";
import { EXPENSE_DRAFT, EXPENSE_REJECTEDBY, ITEMS_PER_PAGE } from "../../utils/constants";
import {
formatCurrency,
getColorNameFromHex,
@ -12,12 +12,16 @@ import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequ
import { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton";
import ConfirmModal from "../common/ConfirmModal";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
const PaymentRequestList = ({filters, groupBy = "submittedBy", search }) => {
const { setManageRequest } = usePaymentRequestContext();
const { setManageRequest,setVieRequest } = usePaymentRequestContext();
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;
@ -180,14 +184,14 @@ const PaymentRequestList = ({filters, groupBy = "submittedBy", search }) => {
const canEditExpense = (paymentRequest) => {
return (
(paymentRequest?.status?.id === EXPENSE_DRAFT ||
EXPENSE_REJECTEDBY.includes(paymentRequest?.status?.id)) &&
(paymentRequest?.expenseStatus?.id === EXPENSE_DRAFT ||
EXPENSE_REJECTEDBY.includes(paymentRequest?.expenseStatus?.id)) &&
paymentRequest?.createdBy?.id === SelfId
);
};
const canDetetExpense = (expense) => {
const canDetetExpense = (request) => {
return (
expense?.status?.id === EXPENSE_DRAFT && expense?.createdBy?.id === SelfId
request?.expenseStatus?.id === EXPENSE_DRAFT && request?.createdBy?.id === SelfId
);
};
@ -269,13 +273,14 @@ const PaymentRequestList = ({filters, groupBy = "submittedBy", search }) => {
<i
className="bx bx-show text-primary cursor-pointer"
onClick={() =>
setViewExpense({
expenseId: paymentRequest.id,
setVieRequest({
requestId: paymentRequest.id,
view: true,
})
}
></i>
{canDetetExpense(paymentRequest) &&
canEditExpense(paymentRequest) && (
<div className="dropdown z-2">
<button
type="button"
@ -319,7 +324,7 @@ const PaymentRequestList = ({filters, groupBy = "submittedBy", search }) => {
</a>
</li>
</ul>
</div>
</div>)}
</div>
</td>
</tr>

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

@ -86,3 +86,62 @@ export const defaultPaymentRequestFilter = {
startDate: null,
endDate: null,
};
export const PaymentRequestActionScheam = (
isTransaction = false,
transactionDate
) => {
return z
.object({
comment: z.string().min(1, { message: "Please leave comment" }),
statusId: z.string().min(1, { message: "Please select a status" }),
paymentRequestId: z.string().nullable().optional(),
paidAt: z.string().nullable().optional(),
paidById: z.string().nullable().optional(),
})
.superRefine((data, ctx) => {
if (isTransaction) {
if (!data.paymentRequestId?.trim()) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
path: ["reimburseTransactionId"],
message: "Reimburse Transaction ID is required",
});
}
if (!data.paidAt) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
path: ["paidAt"],
message: "Transacion Date is required",
});
}
// let reimburse_Date = localToUtc(data.reimburseDate);
// if (transactionDate > reimburse_Date) {
// ctx.addIssue({
// code: z.ZodIssueCode.custom,
// path: ["reimburseDate"],
// message:
// "Reimburse Date must be greater than or equal to Expense created Date",
// });
// }
if (!data.paidById) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
path: ["paidById"],
message: "Paid By is required",
});
}
}
});
};
export const defaultActionValues = {
comment: "",
statusId: "",
paidTransactionId: null,
paidAt: null,
paidById: null,
};

149
src/components/PaymentRequest/VewPaymentRequest.jsx → src/components/PaymentRequest/ViewPaymentRequest.jsx
View File

@ -1,12 +1,24 @@
import { useMemo } from "react";
import { useActionOnExpense, usePaymentRequestDetail } from "../../hooks/useExpense";
import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
import { useMemo, useState } from "react";
import {
useActionOnExpense,
useActionOnPaymentRequest,
usePaymentRequestDetail,
} from "../../hooks/useExpense";
import {
formatCurrency,
getColorNameFromHex,
getIconByFileType,
localToUtc,
} from "../../utils/appUtils";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import Avatar from "../common/Avatar";
import DatePicker from "../common/DatePicker";
import EmployeeSearchInput from "../common/EmployeeSearchInput";
import Error from "../common/Error";
import { defaultActionValues, ExpenseActionScheam } from "../Expenses/ExpenseSchema";
import {
defaultActionValues,
ExpenseActionScheam,
} from "../Expenses/ExpenseSchema";
import { ExpenseDetailsSkeleton } from "../Expenses/ExpenseSkeleton";
import ExpenseStatusLogs from "../Expenses/ExpenseStatusLogs";
import { useSelector } from "react-redux";
@ -14,16 +26,25 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import {
EXPENSE_REJECTEDBY,
PROCESS_EXPENSE,
REVIEW_EXPENSE,
} from "../../utils/constants";
import Label from "../common/Label";
const ViewPaymentRequest = ({ RequestId }) => {
const { data, isLoading, isError, error, isFetching } = usePaymentRequestDetail(RequestId);
const ViewPaymentRequest = ({ requestId }) => {
const { data, isLoading, isError, error, isFetching } =
usePaymentRequestDetail(requestId);
const [IsPaymentProcess, setIsPaymentProcess] = useState(false);
const [clickedStatusId, setClickedStatusId] = useState(null);
const IsReview = useHasUserPermission(REVIEW_EXPENSE);
const [imageLoaded, setImageLoaded] = useState({});
const { setDocumentView } = usePaymentRequestContext();
const ActionSchema = ExpenseActionScheam(IsPaymentProcess,data?.createdAt) ?? z.object({});
const ActionSchema =
ExpenseActionScheam(IsPaymentProcess, data?.createdAt) ?? z.object({});
const navigate = useNavigate();
const {
register,
@ -65,10 +86,10 @@ const ViewPaymentRequest = ({ RequestId }) => {
}, [data]);
const isCreatedBy = useMemo(() => {
return data?.createdBy.id === CurrentUser?.id;
return data?.createdBy?.id === CurrentUser?.id;
}, [data, CurrentUser]);
const { mutate: MakeAction, isPending } = useActionOnExpense(() => {
const { mutate: MakeAction, isPending } = useActionOnPaymentRequest(() => {
setClickedStatusId(null);
reset();
});
@ -76,8 +97,8 @@ const ViewPaymentRequest = ({ RequestId }) => {
const onSubmit = (formData) => {
const Payload = {
...formData,
reimburseDate:localToUtc(formData.reimburseDate),
expenseId: ExpenseId,
paidAt: localToUtc(formData.reimburseDate),
paymentRequestId: data.id,
comment: formData.comment,
};
MakeAction(Payload);
@ -93,10 +114,12 @@ const ViewPaymentRequest = ({ RequestId }) => {
<form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
<div className="row mb-1">
<div className="col-12 mb-1">
<h5 className="fw-semibold m-0">Expense Details</h5>
<h5 className="fw-semibold m-0">Request Details</h5>
<hr />
</div>
<div className="col-12 text-start fw-semibold my-2">{data?.expenseUId}</div>
<div className="col-12 text-start fw-semibold my-2">
{data?.paymentRequestUID}
</div>
{/* Row 1 */}
<div className="col-md-6 mb-3">
<div className="d-flex">
@ -104,10 +127,23 @@ const ViewPaymentRequest = ({ RequestId }) => {
className="form-label me-2 mb-0 fw-semibold text-start"
style={{ minWidth: "130px" }}
>
Transaction Date :
Projct Name :
</label>
<div className="text-muted">
{formatUTCToLocalTime(data?.transactionDate)}
{data.project.name}
</div>
</div>
</div>
<div className="col-md-6 mb-3">
<div className="d-flex">
<label
className="form-label me-2 mb-0 fw-semibold text-start"
style={{ minWidth: "130px" }}
>
Due Date :
</label>
<div className="text-muted">
{formatUTCToLocalTime(data?.dueDate)}
</div>
</div>
</div>
@ -119,7 +155,7 @@ const ViewPaymentRequest = ({ RequestId }) => {
>
Expense Type :
</label>
<div className="text-muted">{data?.expensesType?.name}</div>
<div className="text-muted">{data?.expenseCategory?.name}</div>
</div>
</div>
@ -132,7 +168,7 @@ const ViewPaymentRequest = ({ RequestId }) => {
>
Supplier :
</label>
<div className="text-muted">{data?.supplerName}</div>
<div className="text-muted">{data?.payee}</div>
</div>
</div>
<div className="col-md-6 mb-3">
@ -143,12 +179,14 @@ const ViewPaymentRequest = ({ RequestId }) => {
>
Amount :
</label>
<div className="text-muted">₹ {data.amount}</div>
<div className="text-muted">
{formatCurrency(data?.amount, data?.currency?.currencyCode)}
</div>
</div>
</div>
{/* Row 3 */}
<div className="col-md-6 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"
@ -158,7 +196,7 @@ const ViewPaymentRequest = ({ RequestId }) => {
</label>
<div className="text-muted">{data?.paymentMode?.name}</div>
</div>
</div>
</div> */}
{data?.gstNumber && (
<div className="col-md-6 mb-3">
<div className="d-flex">
@ -184,10 +222,10 @@ const ViewPaymentRequest = ({ RequestId }) => {
</label>
<span
className={`badge bg-label-${
getColorNameFromHex(data?.status?.color) || "secondary"
getColorNameFromHex(data?.expenseStatus?.color) || "secondary"
}`}
>
{data?.status?.name}
{data?.expenseStatus?.name}
</span>
</div>
</div>
@ -199,7 +237,7 @@ const ViewPaymentRequest = ({ RequestId }) => {
>
Pre-Approved :
</label>
<div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
<div className="text-muted">{data?.preApproved ? "Yes" : "No"}</div>
</div>
</div>
@ -229,7 +267,7 @@ const ViewPaymentRequest = ({ RequestId }) => {
</div>
{/* Row 6 */}
{data.createdBy && (
{data?.createdBy && (
<div className="col-md-6 text-start">
<div className="d-flex align-items-center">
<label
@ -242,18 +280,19 @@ const ViewPaymentRequest = ({ RequestId }) => {
<Avatar
size="xs"
classAvatar="m-0"
firstName={data.createdBy?.firstName}
lastName={data.createdBy?.lastName}
firstName={data?.createdBy?.firstName}
lastName={data?.createdBy?.lastName}
/>
<span className="text-muted">
{`${data.createdBy?.firstName ?? ""} ${
data.createdBy?.lastName ?? ""
{`${data?.createdBy?.firstName ?? ""} ${
data?.createdBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</div>
</div>
</div>
)}
{data?.paidBy && (
<div className="col-md-6 text-start">
<div className="d-flex align-items-center">
<label
@ -266,17 +305,18 @@ const ViewPaymentRequest = ({ RequestId }) => {
<Avatar
size="xs"
classAvatar="m-0"
firstName={data.paidBy?.firstName}
lastName={data.paidBy?.lastName}
firstName={data?.paidBy?.firstName}
lastName={data?.paidBy?.lastName}
/>
<span className="text-muted">
{`${data.paidBy?.firstName ?? ""} ${
data.paidBy?.lastName ?? ""
{`${data?.paidBy?.firstName ?? ""} ${
data?.paidBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</div>
</div>
</div>
)}
<div className="text-start my-1">
<label className="fw-semibold form-label">Description : </label>
@ -289,7 +329,7 @@ const ViewPaymentRequest = ({ RequestId }) => {
<div className="d-flex flex-wrap gap-2">
{data?.documents?.map((doc) => {
const isImage = doc.contentType?.includes("image");
const isImage = doc?.contentType?.includes("image");
return (
<div
@ -324,35 +364,35 @@ const ViewPaymentRequest = ({ RequestId }) => {
</div>
</div>
{data.expensesReimburse && (
{data?.paidTransactionId && (
<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"}
{data?.paidTransactionId }
</div>
<div className="col-md-6 ">
<label className="form-label me-2 mb-0 fw-semibold">
Reimburse Date :
Transaction Date :
</label>
{formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
{formatUTCToLocalTime(data?.paidAt)}
</div>
{data.expensesReimburse && (
{data?.paidBy && (
<>
<div className="col-md-6 d-flex align-items-center">
<label className="form-label me-2 mb-0 fw-semibold">
Reimburse By :
Paid By :
</label>
<Avatar
size="xs"
classAvatar="m-0 me-1"
firstName={data?.expensesReimburse?.reimburseBy?.firstName}
lastName={data?.expensesReimburse?.reimburseBy?.lastName}
firstName={data?.paidBy?.firstName}
lastName={data?.paidBy?.lastName}
/>
<span className="text-muted">
{`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
{`${data?.paidBy?.firstName} ${data?.paidBy?.lastName}`.trim()}
</span>
</div>
</>
@ -361,7 +401,7 @@ const ViewPaymentRequest = ({ RequestId }) => {
)}
<hr className="divider my-1 border-2 divider-primary my-2" />
{Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
{Array.isArray(data?.nextStatus) && data?.nextStatus.length > 0 && (
<>
{IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
<div className="row">
@ -370,33 +410,33 @@ const ViewPaymentRequest = ({ RequestId }) => {
<input
type="text"
className="form-control form-control-sm"
{...register("reimburseTransactionId")}
{...register("paidTransactionId")}
/>
{errors.reimburseTransactionId && (
{errors.paidTransactionId && (
<small className="danger-text">
{errors.reimburseTransactionId.message}
{errors.paidTransactionId.message}
</small>
)}
</div>
<div className="col-12 col-md-6 text-start">
<label className="form-label">Transaction Date </label>
<DatePicker
name="reimburseDate"
name="paidAt"
control={control}
minDate={data?.createdAt}
maxDate={new Date()}
/>
{errors.reimburseDate && (
{errors.paidAt && (
<small className="danger-text">
{errors.reimburseDate.message}
{errors.paidAt.message}
</small>
)}
</div>
<div className="col-12 col-md-6 text-start">
<label className="form-label">Reimburse By </label>
<label className="form-label">Paid By </label>
<EmployeeSearchInput
control={control}
name="reimburseById"
name="paidById"
projectId={null}
/>
</div>
@ -406,7 +446,9 @@ const ViewPaymentRequest = ({ RequestId }) => {
{((nextStatusWithPermission.length > 0 && !isRejectedRequest) ||
(isRejectedRequest && isCreatedBy)) && (
<>
<Label className="form-label me-2 mb-0" required>Comment</Label>
<Label className="form-label me-2 mb-0" required>
Comment
</Label>
<textarea
className="form-control form-control-sm"
{...register("comment")}
@ -423,7 +465,7 @@ const ViewPaymentRequest = ({ RequestId }) => {
{nextStatusWithPermission?.length > 0 &&
(!isRejectedRequest || isCreatedBy) && (
<div className="text-end flex-wrap gap-2 my-2 mt-3">
{nextStatusWithPermission.map((status, index) => (
{nextStatusWithPermission?.map((status, index) => (
<button
key={status.id || index}
type="button"
@ -450,3 +492,4 @@ const ViewPaymentRequest = ({ RequestId }) => {
</form>
);
};
export default ViewPaymentRequest;

32
src/hooks/useExpense.js
View File

@ -273,7 +273,7 @@ export const usePaymentRequestList = (
searchString = "",
) => {
return useQuery({
queryKey: ["paymentRequest",pageSize,pageNumber,filter,isActive,searchString],
queryKey: ["paymentRequestList",pageSize,pageNumber,filter,isActive,searchString],
queryFn: async()=>{
const resp = await ExpenseRepository.GetPaymentRequestList(pageSize,pageNumber,filter,isActive,searchString);
return resp.data;
@ -285,6 +285,7 @@ export const usePaymentRequestDetail =(RequestId)=>{
return useQuery({
queryKey:['paymentRequest',RequestId],
queryFn:async()=>{
RequestId
const resp = await ExpenseRepository.GetPaymentRequest(RequestId);
return resp.data;
},
@ -301,7 +302,7 @@ export const useCreatePaymentRequest = (onSuccessCallBack) => {
},
onSuccess: (_, variables) => {
queryClient.invalidateQueries({ queryKey: ["PaymentRequest"] });
queryClient.invalidateQueries({ queryKey: ["paymentRequestList"] });
showToast("Payment Created Successfully", "success");
if (onSuccessCallBack) onSuccessCallBack();
},
@ -322,7 +323,7 @@ export const useUpdatePaymentRequest = (onSuccessCallBack) => {
},
onSuccess: (updatedExpense, variables) => {
queryClient.removeQueries({ queryKey: ["paymentRequest", variables.id] });
queryClient.invalidateQueries({ queryKey: ["paymentRequest"] });
queryClient.invalidateQueries({ queryKey: ["paymentRequestList"] });
showToast("PaymentRequest updated Successfully", "success");
if (onSuccessCallBack) onSuccessCallBack();
@ -332,6 +333,31 @@ export const useUpdatePaymentRequest = (onSuccessCallBack) => {
},
});
};
export const useActionOnPaymentRequest = (onSuccessCallBack) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (payload) => {
const response = await ExpenseRepository.ActionOnPaymentRequest(payload);
return response.data;
},
onSuccess: (updatedExpense, variables) => {
showToast("Request processed successfully.", "success");
queryClient.invalidateQueries({queryKey:["paymentRequest",updatedExpense.id]})
queryClient.invalidateQueries({queryKey:["paymentRequestList"]})
if (onSuccessCallBack) onSuccessCallBack();
},
onError: (error) => {
showToast(
error.response.data.message ||
"Something went wrong.Please try again later.",
"error"
);
},
});
};
//#endregion
export const usePaymentRequestFilter = () => {

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

@ -7,6 +7,7 @@ import { useFab } from "../../Context/FabContext";
import PaymentRequestList from "../../components/PaymentRequest/PaymentRequestList";
import PaymentRequestFilterPanel from "../../components/PaymentRequest/PaymentRequestFilterPanel";
import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest";
export const PaymentRequestContext = createContext();
export const usePaymentRequestContext = () => {
@ -29,6 +30,7 @@ const PaymentRequestPage = () => {
const contextValue = {
setManageRequest,
setVieRequest
};
useEffect(() => {
@ -120,9 +122,9 @@ const PaymentRequestPage = () => {
isOpen
size="lg"
modalType="top"
closeModal={() => setViewExpense({ requestId: null, view: false })}
closeModal={() => setVieRequest({ requestId: null, view: false })}
>
<ViewRequest ExpenseId={ViewRequest.requestId} />
<ViewPaymentRequest requestId={ViewRequest?.requestId}/>
</GlobalModel>
)}

2
src/repositories/ExpsenseRepository.jsx
View File

@ -25,7 +25,7 @@ const ExpenseRepository = {
UpdatePaymentRequest: (id, data) => api.put(`/api/Expense/payment-request/edit/${id}`, data),
GetPaymentRequest: (id) => api.get(`/api/Expense/get/payment-request/details/${id}`),
GetPaymentRequestFilter: () => api.get('/api/Expense/payment-request/filter'),
ActionOnPaymentRequest: (data) => api.post('/api/Expense/payment-request/action', data),
//#endregion