migrated PR from upgrade_Expense
This commit is contained in:
parent
2f70b83548
commit
587fb420fd
249
src/components/PaymentRequest/ActionPaymentRequest.jsx
Normal file
249
src/components/PaymentRequest/ActionPaymentRequest.jsx
Normal file
@ -0,0 +1,249 @@
|
|||||||
|
import React, { useMemo, useState } from "react";
|
||||||
|
import DatePicker from "../common/DatePicker";
|
||||||
|
import EmployeeSearchInput from "../common/EmployeeSearchInput";
|
||||||
|
import Label from "../common/Label";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import {
|
||||||
|
defaultPRActionValues,
|
||||||
|
PaymentRequestActionScheam,
|
||||||
|
} from "./PaymentRequestSchema";
|
||||||
|
import {
|
||||||
|
useActionOnPaymentRequest,
|
||||||
|
usePaymentRequestDetail,
|
||||||
|
} from "../../hooks/useExpense";
|
||||||
|
import {
|
||||||
|
CREATE_EXEPENSE,
|
||||||
|
EXPENSE_CREATE,
|
||||||
|
EXPENSE_PROCESSED,
|
||||||
|
EXPENSE_REJECTEDBY,
|
||||||
|
PROCESS_EXPENSE,
|
||||||
|
REVIEW_EXPENSE,
|
||||||
|
} from "../../utils/constants";
|
||||||
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
|
||||||
|
import { localToUtc } from "../../utils/appUtils";
|
||||||
|
|
||||||
|
const ActionPaymentRequest = ({ requestId }) => {
|
||||||
|
const { setIsExpenseGenerate, setVieRequest } = usePaymentRequestContext();
|
||||||
|
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 ActionSchema =
|
||||||
|
PaymentRequestActionScheam(IsPaymentProcess, data?.createdAt) ??
|
||||||
|
z.object({});
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
setValue,
|
||||||
|
reset,
|
||||||
|
control,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm({
|
||||||
|
resolver: zodResolver(ActionSchema),
|
||||||
|
defaultValues: defaultPRActionValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
const userPermissions = useSelector(
|
||||||
|
(state) => state?.globalVariables?.loginUser?.featurePermissions || []
|
||||||
|
);
|
||||||
|
const CurrentUser = useSelector(
|
||||||
|
(state) => state?.globalVariables?.loginUser?.employeeInfo
|
||||||
|
);
|
||||||
|
|
||||||
|
const nextStatusWithPermission = useMemo(() => {
|
||||||
|
if (!Array.isArray(data?.nextStatus)) return [];
|
||||||
|
|
||||||
|
return data.nextStatus.filter((status) => {
|
||||||
|
const permissionIds = Array.isArray(status?.permissionIds)
|
||||||
|
? status.permissionIds
|
||||||
|
: [];
|
||||||
|
|
||||||
|
if (permissionIds?.length === 0) return true;
|
||||||
|
if (permissionIds.includes(PROCESS_EXPENSE)) {
|
||||||
|
setIsPaymentProcess(true);
|
||||||
|
}
|
||||||
|
return permissionIds.some((id) => userPermissions.includes(id));
|
||||||
|
});
|
||||||
|
}, [data, userPermissions]);
|
||||||
|
|
||||||
|
const isRejectedRequest = useMemo(() => {
|
||||||
|
return EXPENSE_REJECTEDBY.includes(data?.status?.id);
|
||||||
|
}, [data]);
|
||||||
|
const isProccesed = useMemo(() => {
|
||||||
|
return data?.expenseStatus?.id === EXPENSE_PROCESSED;
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
const isCreatedBy = useMemo(() => {
|
||||||
|
return data?.createdBy?.id === CurrentUser?.id;
|
||||||
|
}, [data, CurrentUser]);
|
||||||
|
|
||||||
|
const { mutate: MakeAction, isPending } = useActionOnPaymentRequest(() => {
|
||||||
|
setClickedStatusId(null);
|
||||||
|
reset();
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = (formData) => {
|
||||||
|
const Payload = {
|
||||||
|
...formData,
|
||||||
|
paidAt: localToUtc(formData.paidAt),
|
||||||
|
paymentRequestId: data.id,
|
||||||
|
comment: formData.comment,
|
||||||
|
};
|
||||||
|
MakeAction(Payload);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading) return <div>Lading..</div>;
|
||||||
|
if (isError) return <Error error={error} />;
|
||||||
|
const handleImageLoad = (id) => {
|
||||||
|
setImageLoaded((prev) => ({ ...prev, [id]: true }));
|
||||||
|
};
|
||||||
|
const handleExpense = () => {
|
||||||
|
setIsExpenseGenerate({ IsOpen: true, requestId: requestId });
|
||||||
|
setVieRequest({ IsOpen: false, requestId: null });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
{IsPaymentProcess &&
|
||||||
|
!isProccesed &&
|
||||||
|
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("paidTransactionId")}
|
||||||
|
/>
|
||||||
|
{errors.paidTransactionId && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.paidTransactionId.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-6 text-start mb-1">
|
||||||
|
<label className="form-label">Transaction Date </label>
|
||||||
|
<DatePicker
|
||||||
|
className="w-100"
|
||||||
|
name="paidAt"
|
||||||
|
control={control}
|
||||||
|
minDate={data?.createdAt}
|
||||||
|
/>
|
||||||
|
{errors.paidAt && (
|
||||||
|
<small className="danger-text">{errors.paidAt.message}</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-6 text-start">
|
||||||
|
<label className="form-label">Paid By </label>
|
||||||
|
<EmployeeSearchInput
|
||||||
|
control={control}
|
||||||
|
name="paidById"
|
||||||
|
projectId={null}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-6 text-start mb-1">
|
||||||
|
<Label className="form-label">TDS Percentage</Label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("tdsPercentage")}
|
||||||
|
/>
|
||||||
|
{errors.tdsPercentage && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.tdsPercentage.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-6 text-start mb-1">
|
||||||
|
<Label className="form-label" required>
|
||||||
|
Base Amount
|
||||||
|
</Label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("baseAmount")}
|
||||||
|
/>
|
||||||
|
{errors.baseAmount && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.baseAmount.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-6 text-start mb-1">
|
||||||
|
<Label className="form-label" required>
|
||||||
|
Tax Amount
|
||||||
|
</Label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("taxAmount")}
|
||||||
|
/>
|
||||||
|
{errors.taxAmount && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.taxAmount.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="col-12 mb-3 text-start">
|
||||||
|
{((nextStatusWithPermission?.length > 0 &&
|
||||||
|
!isRejectedRequest &&
|
||||||
|
!isProccesed) ||
|
||||||
|
(isRejectedRequest && 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 &&
|
||||||
|
(!isRejectedRequest || 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={() => {
|
||||||
|
if (status.id !== EXPENSE_CREATE) {
|
||||||
|
setClickedStatusId(status.id);
|
||||||
|
setValue("statusId", status.id);
|
||||||
|
handleSubmit(onSubmit)();
|
||||||
|
} else {
|
||||||
|
handleExpense();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
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>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ActionPaymentRequest;
|
||||||
251
src/components/PaymentRequest/MakeExpense.jsx
Normal file
251
src/components/PaymentRequest/MakeExpense.jsx
Normal file
@ -0,0 +1,251 @@
|
|||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import React from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import {
|
||||||
|
DefaultRequestedExpense,
|
||||||
|
RequestedExpenseSchema,
|
||||||
|
} from "./PaymentRequestSchema";
|
||||||
|
import Label from "../common/Label";
|
||||||
|
import { usePaymentMode } from "../../hooks/masterHook/useMaster";
|
||||||
|
import { useCreatePaymentRequestExpense, useCreateRecurringExpense } from "../../hooks/useExpense";
|
||||||
|
import Filelist from "../Expenses/Filelist";
|
||||||
|
import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
|
||||||
|
|
||||||
|
const MakeExpense = ({ onClose }) => {
|
||||||
|
const {isExpenseGenerate,setVieRequest} = usePaymentRequestContext()
|
||||||
|
const {
|
||||||
|
PaymentModes,
|
||||||
|
loading: PaymentModeLoading,
|
||||||
|
error: PaymentModeError,
|
||||||
|
} = usePaymentMode();
|
||||||
|
|
||||||
|
const {
|
||||||
|
setValue,
|
||||||
|
register,
|
||||||
|
watch,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm({
|
||||||
|
resolver: zodResolver(RequestedExpenseSchema),
|
||||||
|
defaultValues: DefaultRequestedExpense,
|
||||||
|
});
|
||||||
|
const files = watch("billAttachments");
|
||||||
|
const onFileChange = async (e) => {
|
||||||
|
const newFiles = Array.from(e.target.files);
|
||||||
|
if (newFiles?.length === 0) return;
|
||||||
|
|
||||||
|
const existingFiles = watch("billAttachments") || [];
|
||||||
|
|
||||||
|
const parsedFiles = await Promise.all(
|
||||||
|
newFiles.map(async (file) => {
|
||||||
|
const base64Data = await toBase64(file);
|
||||||
|
return {
|
||||||
|
fileName: file.name,
|
||||||
|
base64Data,
|
||||||
|
contentType: file.type,
|
||||||
|
fileSize: file.size,
|
||||||
|
description: "",
|
||||||
|
isActive: true,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const combinedFiles = [
|
||||||
|
...existingFiles,
|
||||||
|
...parsedFiles.filter(
|
||||||
|
(newFile) =>
|
||||||
|
!existingFiles.some(
|
||||||
|
(f) =>
|
||||||
|
f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
|
||||||
|
)
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
|
setValue("billAttachments", combinedFiles, {
|
||||||
|
shouldDirty: true,
|
||||||
|
shouldValidate: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const toBase64 = (file) =>
|
||||||
|
new Promise((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
reader.onload = () => resolve(reader.result.split(",")[1]);
|
||||||
|
reader.onerror = (error) => reject(error);
|
||||||
|
});
|
||||||
|
const removeFile = (index) => {
|
||||||
|
const newFiles = files.filter((_, i) => i !== index);
|
||||||
|
setValue("billAttachments", newFiles, { shouldValidate: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
const { mutate: CreatedExpense, isPending } = useCreatePaymentRequestExpense(
|
||||||
|
() => {
|
||||||
|
handleClose();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
const onSubmit = (formData) => {
|
||||||
|
let payload = {
|
||||||
|
...formData,
|
||||||
|
paymentRequestId:isExpenseGenerate?.requestId
|
||||||
|
}
|
||||||
|
CreatedExpense(payload)
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="row px-2 py-3">
|
||||||
|
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
<h5 className="m-0">
|
||||||
|
Create New Expense
|
||||||
|
</h5>
|
||||||
|
|
||||||
|
<div className="row my-2 text-start">
|
||||||
|
<div className="col-md-6 mb-2">
|
||||||
|
<Label htmlFor="paymentModeId" className="form-label" required>
|
||||||
|
Payment Mode
|
||||||
|
</Label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
id="paymentModeId"
|
||||||
|
{...register("paymentModeId")}
|
||||||
|
>
|
||||||
|
<option value="" disabled>
|
||||||
|
Select Mode
|
||||||
|
</option>
|
||||||
|
{PaymentModeLoading ? (
|
||||||
|
<option disabled>Loading...</option>
|
||||||
|
) : (
|
||||||
|
PaymentModes?.map((payment) => (
|
||||||
|
<option key={payment.id} value={payment.id}>
|
||||||
|
{payment.name}
|
||||||
|
</option>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
{errors.paymentModeId && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.paymentModeId.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<label htmlFor="statusId" className="form-label ">
|
||||||
|
GST Number
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="gstNumber"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
min="1"
|
||||||
|
{...register("gstNumber")}
|
||||||
|
/>
|
||||||
|
{errors.gstNumber && (
|
||||||
|
<small className="danger-text">{errors.gstNumber.message}</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6 text-start">
|
||||||
|
<Label htmlFor="location" className="form-label" required>
|
||||||
|
Location
|
||||||
|
</Label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="location"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("location")}
|
||||||
|
/>
|
||||||
|
{errors.location && (
|
||||||
|
<small className="danger-text">{errors.location.message}</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="row my-2 text-start">
|
||||||
|
<div className="col-md-12">
|
||||||
|
<Label className="form-label" required>
|
||||||
|
Upload Bill{" "}
|
||||||
|
</Label>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
|
||||||
|
style={{ cursor: "pointer" }}
|
||||||
|
onClick={() => document.getElementById("billAttachments").click()}
|
||||||
|
>
|
||||||
|
<i className="bx bx-cloud-upload d-block bx-lg"> </i>
|
||||||
|
<span className="text-muted d-block">
|
||||||
|
Click to select or click here to browse
|
||||||
|
</span>
|
||||||
|
<small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
id="billAttachments"
|
||||||
|
accept=".pdf,.jpg,.jpeg,.png"
|
||||||
|
multiple
|
||||||
|
style={{ display: "none" }}
|
||||||
|
{...register("billAttachments")}
|
||||||
|
onChange={(e) => {
|
||||||
|
onFileChange(e);
|
||||||
|
e.target.value = "";
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{errors.billAttachments && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.billAttachments.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
{files?.length > 0 && (
|
||||||
|
<Filelist
|
||||||
|
files={files}
|
||||||
|
removeFile={removeFile}
|
||||||
|
expenseToEdit={false}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{Array.isArray(errors.billAttachments) &&
|
||||||
|
errors.billAttachments.map((fileError, index) => (
|
||||||
|
<div key={index} className="danger-text small mt-1">
|
||||||
|
{
|
||||||
|
(fileError?.fileSize?.message ||
|
||||||
|
fileError?.contentType?.message ||
|
||||||
|
fileError?.base64Data?.message,
|
||||||
|
fileError?.documentId?.message)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-end gap-3">
|
||||||
|
{" "}
|
||||||
|
<button
|
||||||
|
type="reset"
|
||||||
|
disabled={isPending}
|
||||||
|
onClick={()=>{
|
||||||
|
debugger
|
||||||
|
setVieRequest({ IsOpen: true, requestId: isExpenseGenerate?.requestId });
|
||||||
|
handleClose()
|
||||||
|
}}
|
||||||
|
className="btn btn-label-secondary btn-sm mt-3"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn-primary btn-sm mt-3"
|
||||||
|
disabled={isPending}
|
||||||
|
>
|
||||||
|
{isPending ? "Please Wait..." : "Submit"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MakeExpense;
|
||||||
530
src/components/PaymentRequest/ManagePaymentRequest.jsx
Normal file
530
src/components/PaymentRequest/ManagePaymentRequest.jsx
Normal file
@ -0,0 +1,530 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { useProjectName } from "../../hooks/useProjects";
|
||||||
|
import Label from "../common/Label";
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
import { useCurrencies, useExpenseCategory } from "../../hooks/masterHook/useMaster";
|
||||||
|
import DatePicker from "../common/DatePicker";
|
||||||
|
import {
|
||||||
|
useCreatePaymentRequest,
|
||||||
|
usePayee,
|
||||||
|
usePaymentRequestDetail,
|
||||||
|
useUpdatePaymentRequest,
|
||||||
|
} from "../../hooks/useExpense";
|
||||||
|
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { formatFileSize, localToUtc } from "../../utils/appUtils";
|
||||||
|
import {
|
||||||
|
defaultPaymentRequest,
|
||||||
|
PaymentRequestSchema,
|
||||||
|
} from "./PaymentRequestSchema";
|
||||||
|
import { INR_CURRENCY_CODE } from "../../utils/constants";
|
||||||
|
import Filelist from "../Expenses/Filelist";
|
||||||
|
import InputSuggestions from "../common/InputSuggestion";
|
||||||
|
import { useProfile } from "../../hooks/useProfile";
|
||||||
|
|
||||||
|
function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||||
|
const {
|
||||||
|
data,
|
||||||
|
isLoading,
|
||||||
|
isError,
|
||||||
|
error: requestError,
|
||||||
|
} = usePaymentRequestDetail(requestToEdit);
|
||||||
|
|
||||||
|
const { profile } = useProfile();
|
||||||
|
const {
|
||||||
|
projectNames,
|
||||||
|
loading: projectLoading,
|
||||||
|
error,
|
||||||
|
isError: isProjectError,
|
||||||
|
} = useProjectName();
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: currencyData,
|
||||||
|
isLoading: currencyLoading,
|
||||||
|
isError: currencyError,
|
||||||
|
} = useCurrencies();
|
||||||
|
|
||||||
|
const {
|
||||||
|
expenseCategories,
|
||||||
|
loading: ExpenseLoading,
|
||||||
|
error: ExpenseError,
|
||||||
|
} = useExpenseCategory();
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: Payees,
|
||||||
|
isLoading: isPayeeLoaing,
|
||||||
|
isError: isPayeeError,
|
||||||
|
error: payeeError,
|
||||||
|
} = usePayee();
|
||||||
|
const schema = PaymentRequestSchema(expenseCategories);
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
control,
|
||||||
|
watch,
|
||||||
|
handleSubmit,
|
||||||
|
setValue,
|
||||||
|
reset,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: defaultPaymentRequest,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [isItself, setisItself] = useState(false);
|
||||||
|
|
||||||
|
const files = watch("billAttachments");
|
||||||
|
const onFileChange = async (e) => {
|
||||||
|
const newFiles = Array.from(e.target.files);
|
||||||
|
if (newFiles?.length === 0) return;
|
||||||
|
|
||||||
|
const existingFiles = watch("billAttachments") || [];
|
||||||
|
|
||||||
|
const parsedFiles = await Promise.all(
|
||||||
|
newFiles?.map(async (file) => {
|
||||||
|
const base64Data = await toBase64(file);
|
||||||
|
return {
|
||||||
|
fileName: file.name,
|
||||||
|
base64Data,
|
||||||
|
contentType: file.type,
|
||||||
|
fileSize: file.size,
|
||||||
|
description: "",
|
||||||
|
isActive: true,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const combinedFiles = [
|
||||||
|
...existingFiles,
|
||||||
|
...parsedFiles.filter(
|
||||||
|
(newFile) =>
|
||||||
|
!existingFiles.some(
|
||||||
|
(f) =>
|
||||||
|
f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
|
||||||
|
)
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
|
setValue("billAttachments", combinedFiles, {
|
||||||
|
shouldDirty: true,
|
||||||
|
shouldValidate: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const toBase64 = (file) =>
|
||||||
|
new Promise((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
reader.onload = () => resolve(reader.result.split(",")[1]);
|
||||||
|
reader.onerror = (error) => reject(error);
|
||||||
|
});
|
||||||
|
const removeFile = (index) => {
|
||||||
|
if (requestToEdit) {
|
||||||
|
const newFiles = files.map((file, i) => {
|
||||||
|
if (file.documentId !== index) return file;
|
||||||
|
return {
|
||||||
|
...file,
|
||||||
|
isActive: false,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
setValue("billAttachments", newFiles, { shouldValidate: true });
|
||||||
|
} else {
|
||||||
|
const newFiles = files.filter((_, i) => i !== index);
|
||||||
|
setValue("billAttachments", newFiles, { shouldValidate: true });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
reset();
|
||||||
|
closeModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
const { mutate: CreatePaymentRequest, isPending: createPending } =
|
||||||
|
useCreatePaymentRequest(() => {
|
||||||
|
handleClose();
|
||||||
|
});
|
||||||
|
const { mutate: PaymentRequestUpdate, isPending } = useUpdatePaymentRequest(
|
||||||
|
() => handleClose()
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (requestToEdit && data) {
|
||||||
|
reset({
|
||||||
|
title: data.title || "",
|
||||||
|
description: data.description || "",
|
||||||
|
payee: data.payee || "",
|
||||||
|
currencyId: data.currency.id || "",
|
||||||
|
amount: data.amount || "",
|
||||||
|
dueDate: data.dueDate?.slice(0, 10) || "",
|
||||||
|
projectId: data.project.id || "",
|
||||||
|
expenseCategoryId: data.expenseCategory.id || "",
|
||||||
|
isAdvancePayment: data.isAdvancePayment || false,
|
||||||
|
billAttachments: data.attachments
|
||||||
|
? data?.attachments?.map((doc) => ({
|
||||||
|
fileName: doc.fileName,
|
||||||
|
base64Data: null,
|
||||||
|
contentType: doc.contentType,
|
||||||
|
documentId: doc.id,
|
||||||
|
fileSize: 0,
|
||||||
|
description: "",
|
||||||
|
preSignedUrl: doc.preSignedUrl,
|
||||||
|
isActive: doc.isActive ?? true,
|
||||||
|
}))
|
||||||
|
: [],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [data, reset]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!requestToEdit && currencyData && currencyData?.length > 0) {
|
||||||
|
const inrCurrency = currencyData.find((c) => c.id === INR_CURRENCY_CODE);
|
||||||
|
if (inrCurrency) {
|
||||||
|
setValue("currencyId", INR_CURRENCY_CODE, { shouldValidate: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [currencyData, requestToEdit, setValue]);
|
||||||
|
|
||||||
|
const onSubmit = (fromdata) => {
|
||||||
|
let payload = {
|
||||||
|
...fromdata,
|
||||||
|
dueDate: localToUtc(fromdata.dueDate),
|
||||||
|
payee: isItself
|
||||||
|
? `${profile?.employeeInfo?.firstName} ${profile?.employeeInfo?.lastName}`
|
||||||
|
: fromdata.payee,
|
||||||
|
};
|
||||||
|
if (requestToEdit) {
|
||||||
|
const editPayload = {
|
||||||
|
...payload,
|
||||||
|
id: data.id,
|
||||||
|
payee: isItself
|
||||||
|
? `${profile?.employeeInfo?.firstName} ${profile?.employeeInfo?.lastName}`
|
||||||
|
: fromdata.payee,
|
||||||
|
};
|
||||||
|
PaymentRequestUpdate({ id: data.id, payload: editPayload });
|
||||||
|
} else {
|
||||||
|
CreatePaymentRequest(payload);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleSetItSelf = (e) => {
|
||||||
|
setisItself(e.target.value);
|
||||||
|
let name = `${profile?.employeeInfo.firstName} ${profile?.employeeInfo.lastName}`;
|
||||||
|
|
||||||
|
setValue("payee", name);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="container p-3">
|
||||||
|
<h5 className="m-0">
|
||||||
|
{requestToEdit ? "Update Payment Request " : "Create Payment Request"}
|
||||||
|
</h5>
|
||||||
|
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
{/* Project and Category */}
|
||||||
|
<div className="row my-2 text-start">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<Label className="form-label" required>
|
||||||
|
Select Project
|
||||||
|
</Label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
{...register("projectId")}
|
||||||
|
>
|
||||||
|
<option value="">Select Project</option>
|
||||||
|
{projectLoading ? (
|
||||||
|
<option>Loading...</option>
|
||||||
|
) : (
|
||||||
|
projectNames?.map((project) => (
|
||||||
|
<option key={project.id} value={project.id}>
|
||||||
|
{project.name}
|
||||||
|
</option>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
{errors.projectId && (
|
||||||
|
<small className="danger-text">{errors.projectId.message}</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-6">
|
||||||
|
<Label htmlFor="expenseCategoryId" className="form-label" required>
|
||||||
|
Expense Category
|
||||||
|
</Label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
id="expenseCategoryId"
|
||||||
|
{...register("expenseCategoryId")}
|
||||||
|
>
|
||||||
|
<option value="" disabled>
|
||||||
|
Select Category
|
||||||
|
</option>
|
||||||
|
{ExpenseLoading ? (
|
||||||
|
<option disabled>Loading...</option>
|
||||||
|
) : (
|
||||||
|
expenseCategories?.map((expense) => (
|
||||||
|
<option key={expense.id} value={expense.id}>
|
||||||
|
{expense.name}
|
||||||
|
</option>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
{errors.expenseCategoryId && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.expenseCategoryId.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Title and Advance Payment */}
|
||||||
|
<div className="row my-2 text-start">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<Label htmlFor="title" className="form-label" required>
|
||||||
|
Title
|
||||||
|
</Label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="title"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("title")}
|
||||||
|
/>
|
||||||
|
{errors.title && (
|
||||||
|
<small className="danger-text">{errors.title.message}</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-6 ">
|
||||||
|
<Label htmlFor="isAdvance" className="form-label">
|
||||||
|
Is Advance Payment
|
||||||
|
</Label>
|
||||||
|
|
||||||
|
<Controller
|
||||||
|
name="isAdvancePayment"
|
||||||
|
control={control}
|
||||||
|
defaultValue={defaultPaymentRequest.isAdvancePayment ?? false}
|
||||||
|
render={({ field }) => (
|
||||||
|
<div className="d-flex align-items-center gap-3">
|
||||||
|
<div className="form-check d-flex flex-row m-0 gap-2">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="isAdvancePayment"
|
||||||
|
className="form-check-input m-0"
|
||||||
|
// mark checked when the controlled value is true
|
||||||
|
checked={field.value === true}
|
||||||
|
onChange={() => field.onChange(true)} // send boolean true
|
||||||
|
/>
|
||||||
|
<Label className="form-check-label">Yes</Label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-check d-flex flex-row m-0 gap-2">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="isVariableFalse"
|
||||||
|
className="form-check-input m-0"
|
||||||
|
checked={field.value === false}
|
||||||
|
onChange={() => field.onChange(false)} // send boolean false
|
||||||
|
/>
|
||||||
|
<Label className="form-check-label">No</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{errors.isVariable && (
|
||||||
|
<small className="danger-text">{errors.isVariable.message}</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Date and Amount */}
|
||||||
|
<div className="row my-2 text-start">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<Label htmlFor="dueDate" className="form-label" required>
|
||||||
|
Due Date
|
||||||
|
</Label>
|
||||||
|
<DatePicker
|
||||||
|
name="dueDate"
|
||||||
|
control={control}
|
||||||
|
minDate={new Date()}
|
||||||
|
className="w-100"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{errors.dueDate && (
|
||||||
|
<small className="danger-text">{errors.dueDate.message}</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-6">
|
||||||
|
<Label htmlFor="amount" className="form-label" required>
|
||||||
|
Amount
|
||||||
|
</Label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="amount"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
min="1"
|
||||||
|
step="0.01"
|
||||||
|
inputMode="decimal"
|
||||||
|
{...register("amount", { valueAsNumber: true })}
|
||||||
|
/>
|
||||||
|
{errors.amount && (
|
||||||
|
<small className="danger-text">{errors.amount.message}</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Payee and Currency */}
|
||||||
|
<div className="row my-2 text-start">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<Label htmlFor="payee" className="form-label" required>
|
||||||
|
Payee (Supplier Name/Transporter Name/Other)
|
||||||
|
</Label>
|
||||||
|
<InputSuggestions
|
||||||
|
organizationList={Payees}
|
||||||
|
value={watch("payee") || ""}
|
||||||
|
onChange={(val) =>
|
||||||
|
setValue("payee", val, { shouldValidate: true })
|
||||||
|
}
|
||||||
|
error={errors.payee?.message}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Checkbox below input */}
|
||||||
|
<div className="form-check mt-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="sameAsSupplier"
|
||||||
|
className="form-check-input"
|
||||||
|
value={isItself}
|
||||||
|
onChange={handleSetItSelf}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="sameAsSupplier" className="form-check-label">
|
||||||
|
It self
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-6">
|
||||||
|
<Label htmlFor="currencyId" className="form-label" required>
|
||||||
|
Currency
|
||||||
|
</Label>
|
||||||
|
<select
|
||||||
|
id="currencyId"
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
{...register("currencyId")}
|
||||||
|
>
|
||||||
|
<option value="">Select Currency</option>
|
||||||
|
|
||||||
|
{currencyLoading && <option>Loading...</option>}
|
||||||
|
|
||||||
|
{!currencyLoading &&
|
||||||
|
!currencyError &&
|
||||||
|
currencyData?.map((currency) => (
|
||||||
|
<option key={currency.id} value={currency.id}>
|
||||||
|
{`${currency.currencyName} (${currency.symbol})`}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{errors.currencyId && (
|
||||||
|
<small className="danger-text">{errors.currencyId.message}</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<div className="row my-2 text-start">
|
||||||
|
<div className="col-md-12">
|
||||||
|
<Label htmlFor="description" className="form-label" required>
|
||||||
|
Description
|
||||||
|
</Label>
|
||||||
|
<textarea
|
||||||
|
id="description"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("description")}
|
||||||
|
rows="2"
|
||||||
|
></textarea>
|
||||||
|
{errors.description && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.description.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Upload Document */}
|
||||||
|
<div className="row my-2 text-start">
|
||||||
|
<div className="col-md-12">
|
||||||
|
<Label className="form-label">Upload Bill </Label>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
|
||||||
|
style={{ cursor: "pointer" }}
|
||||||
|
onClick={() => document.getElementById("billAttachments").click()}
|
||||||
|
>
|
||||||
|
<i className="bx bx-cloud-upload d-block bx-lg"> </i>
|
||||||
|
<span className="text-muted d-block">
|
||||||
|
Click to select or click here to browse
|
||||||
|
</span>
|
||||||
|
<small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
id="billAttachments"
|
||||||
|
accept=".pdf,.jpg,.jpeg,.png"
|
||||||
|
multiple
|
||||||
|
style={{ display: "none" }}
|
||||||
|
{...register("billAttachments")}
|
||||||
|
onChange={(e) => {
|
||||||
|
onFileChange(e);
|
||||||
|
e.target.value = "";
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{errors.billAttachments && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.billAttachments.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
{files?.length > 0 && (
|
||||||
|
<Filelist
|
||||||
|
files={files}
|
||||||
|
removeFile={removeFile}
|
||||||
|
expenseToEdit={requestToEdit}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{Array.isArray(errors.billAttachments) &&
|
||||||
|
errors.billAttachments.map((fileError, index) => (
|
||||||
|
<div key={index} className="danger-text small mt-1">
|
||||||
|
{
|
||||||
|
(fileError?.fileSize?.message ||
|
||||||
|
fileError?.contentType?.message ||
|
||||||
|
fileError?.base64Data?.message,
|
||||||
|
fileError?.documentId?.message)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex justify-content-end gap-3">
|
||||||
|
<button
|
||||||
|
type="reset"
|
||||||
|
disabled={createPending || isPending}
|
||||||
|
onClick={handleClose}
|
||||||
|
className="btn btn-label-secondary btn-sm mt-3"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn-primary btn-sm mt-3"
|
||||||
|
disabled={createPending || isPending}
|
||||||
|
>
|
||||||
|
{createPending || isPending
|
||||||
|
? "Please Wait..."
|
||||||
|
: requestToEdit
|
||||||
|
? "Update"
|
||||||
|
: "Submit"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ManagePaymentRequest;
|
||||||
202
src/components/PaymentRequest/PaymentRequestFilterPanel.jsx
Normal file
202
src/components/PaymentRequest/PaymentRequestFilterPanel.jsx
Normal file
@ -0,0 +1,202 @@
|
|||||||
|
import React, { useEffect, useState, useMemo } from "react";
|
||||||
|
import { FormProvider, useForm, Controller } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "./PaymentRequestSchema";
|
||||||
|
|
||||||
|
import DateRangePicker, { DateRangePicker1 } from "../common/DateRangePicker";
|
||||||
|
import SelectMultiple from "../common/SelectMultiple";
|
||||||
|
import { useProjectName } from "../../hooks/useProjects";
|
||||||
|
import { useExpenseStatus } from "../../hooks/masterHook/useMaster";
|
||||||
|
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import moment from "moment";
|
||||||
|
import { usePaymentRequestFilter } from "../../hooks/useExpense";
|
||||||
|
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||||
|
|
||||||
|
const PaymentRequestFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||||
|
const { status } = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const selectedProjectId = useSelector(
|
||||||
|
(store) => store.localVariables.projectId
|
||||||
|
);
|
||||||
|
const { data, isLoading, isError, error, isFetching, isFetched } =
|
||||||
|
usePaymentRequestFilter();
|
||||||
|
|
||||||
|
const groupByList = useMemo(() => {
|
||||||
|
return [
|
||||||
|
{ id: "projects", name: "Project" },
|
||||||
|
{ id: "status", name: "Status" },
|
||||||
|
{ id: "createdBy", name: "Submitted By" },
|
||||||
|
{ id: "currency", name: "Currency" },
|
||||||
|
{ id: "expensesCategory", name: "Expense Category" },
|
||||||
|
{ id: "payees", name: "Payee" },
|
||||||
|
{ id: "date", name: "Due Date" },
|
||||||
|
|
||||||
|
].sort((a, b) => a.name.localeCompare(b.name));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const [selectedGroup, setSelectedGroup] = useState(groupByList[6]);
|
||||||
|
const [resetKey, setResetKey] = useState(0);
|
||||||
|
|
||||||
|
|
||||||
|
const methods = useForm({
|
||||||
|
resolver: zodResolver(SearchPaymentRequestSchema),
|
||||||
|
defaultValues: defaultPaymentRequestFilter,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { control, handleSubmit, reset, setValue, watch } = methods;
|
||||||
|
const isTransactionDate = watch("isTransactionDate");
|
||||||
|
|
||||||
|
const closePanel = () => {
|
||||||
|
document.querySelector(".offcanvas.show .btn-close")?.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const handleGroupChange = (e) => {
|
||||||
|
const group = groupByList.find((g) => g.id === e.target.value);
|
||||||
|
if (group) setSelectedGroup(group);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const onSubmit = (formData) => {
|
||||||
|
onApply({
|
||||||
|
...formData,
|
||||||
|
startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
|
||||||
|
endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
|
||||||
|
});
|
||||||
|
handleGroupBy(selectedGroup.id);
|
||||||
|
// closePanel();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClear = () => {
|
||||||
|
reset(defaultPaymentRequestFilter);
|
||||||
|
setResetKey((prev) => prev + 1);
|
||||||
|
onApply(defaultPaymentRequestFilter);
|
||||||
|
if (status) {
|
||||||
|
navigate("/expenses", { replace: true });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const location = useLocation();
|
||||||
|
useEffect(() => {
|
||||||
|
closePanel();
|
||||||
|
}, [location]);
|
||||||
|
|
||||||
|
const [appliedStatusId, setAppliedStatusId] = useState(null);
|
||||||
|
|
||||||
|
if (isError && isFetched)
|
||||||
|
return <div>Something went wrong Here- {error.message} </div>;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<FormProvider {...methods}>
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
|
||||||
|
<div className="mb-3 w-100">
|
||||||
|
<div className="d-flex align-items-center mb-2">
|
||||||
|
<label className="form-label me-2">Filter By:</label>
|
||||||
|
</div>
|
||||||
|
<DateRangePicker1
|
||||||
|
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||||
|
startField="startDate"
|
||||||
|
endField="endDate"
|
||||||
|
className="w-100"
|
||||||
|
resetSignal={resetKey}
|
||||||
|
defaultRange={false}
|
||||||
|
maxDate={new Date()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="row g-2">
|
||||||
|
<SelectMultiple
|
||||||
|
name="projectIds"
|
||||||
|
label="Projects :"
|
||||||
|
options={data?.projects}
|
||||||
|
labelKey="name"
|
||||||
|
valueKey="id"
|
||||||
|
/>
|
||||||
|
<SelectMultiple
|
||||||
|
name="createdByIds"
|
||||||
|
label="Submitted By :"
|
||||||
|
options={data?.createdBy}
|
||||||
|
labelKey={(item) => item.name}
|
||||||
|
valueKey="id"
|
||||||
|
/>
|
||||||
|
<SelectMultiple
|
||||||
|
name="payees"
|
||||||
|
label="Payee :"
|
||||||
|
options={data?.payees}
|
||||||
|
labelKey={(item) => item.name}
|
||||||
|
valueKey="id"
|
||||||
|
/>
|
||||||
|
<SelectMultiple
|
||||||
|
name="expenseCategoryIds"
|
||||||
|
label="Category :"
|
||||||
|
options={data?.expenseCategory}
|
||||||
|
labelKey={(item) => item.name}
|
||||||
|
valueKey="id"
|
||||||
|
/>
|
||||||
|
<SelectMultiple
|
||||||
|
name="currencyIds"
|
||||||
|
label="Currency :"
|
||||||
|
options={data?.currency}
|
||||||
|
labelKey={(item) => item.name}
|
||||||
|
valueKey="id"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Status :</label>
|
||||||
|
<div className="row flex-wrap">
|
||||||
|
{data?.status
|
||||||
|
?.slice()
|
||||||
|
.sort((a, b) => a.name.localeCompare(b.name))
|
||||||
|
.map((status) => (
|
||||||
|
<div className="col-6" key={status.id}>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="statusIds"
|
||||||
|
render={({ field: { value = [], onChange } }) => (
|
||||||
|
<div className="d-flex align-items-center me-3 mb-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="form-check-input"
|
||||||
|
value={status.id}
|
||||||
|
checked={value.includes(status.id)}
|
||||||
|
onChange={(e) => {
|
||||||
|
const checked = e.target.checked;
|
||||||
|
onChange(
|
||||||
|
checked
|
||||||
|
? [...value, status.id]
|
||||||
|
: value.filter((v) => v !== status.id)
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<label className="ms-2 mb-0">{status.name}</label>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-end py-3 gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-label-secondary btn-sm"
|
||||||
|
onClick={onClear}
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
<button type="submit" className="btn btn-primary btn-sm">
|
||||||
|
Apply
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</FormProvider>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PaymentRequestFilterPanel;
|
||||||
380
src/components/PaymentRequest/PaymentRequestList.jsx
Normal file
380
src/components/PaymentRequest/PaymentRequestList.jsx
Normal file
@ -0,0 +1,380 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import {
|
||||||
|
EXPENSE_DRAFT,
|
||||||
|
EXPENSE_REJECTEDBY,
|
||||||
|
ITEMS_PER_PAGE,
|
||||||
|
} from "../../utils/constants";
|
||||||
|
import {
|
||||||
|
formatCurrency,
|
||||||
|
formatFigure,
|
||||||
|
getColorNameFromHex,
|
||||||
|
useDebounce,
|
||||||
|
} from "../../utils/appUtils";
|
||||||
|
import { usePaymentRequestList } from "../../hooks/useExpense";
|
||||||
|
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||||
|
import Avatar from "../../components/common/Avatar";
|
||||||
|
import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
|
||||||
|
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 Pagination from "../common/Pagination";
|
||||||
|
|
||||||
|
const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
|
||||||
|
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;
|
||||||
|
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: "Request ID",
|
||||||
|
align: "text-start mx-2",
|
||||||
|
getValue: (e) => e.paymentRequestUID || "N/A",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "title",
|
||||||
|
label: "Request Title",
|
||||||
|
align: "text-start",
|
||||||
|
getValue: (e) => e.title || "N/A",
|
||||||
|
},
|
||||||
|
// { key: "payee", label: "Payee", align: "text-start" },
|
||||||
|
{
|
||||||
|
key: "SubmittedBy",
|
||||||
|
label: "Submitted By",
|
||||||
|
align: "text-start",
|
||||||
|
getValue: (e) =>
|
||||||
|
`${e.createdBy?.firstName ?? ""} ${
|
||||||
|
e.createdBy?.lastName ?? ""
|
||||||
|
}`.trim() || "N/A",
|
||||||
|
customRender: (e) => (
|
||||||
|
<div
|
||||||
|
className="d-flex align-items-center cursor-pointer"
|
||||||
|
onClick={() => navigate(`/employee/${e.createdBy?.id}`)}
|
||||||
|
>
|
||||||
|
<Avatar
|
||||||
|
size="xs"
|
||||||
|
classAvatar="m-0"
|
||||||
|
firstName={e.createdBy?.firstName}
|
||||||
|
lastName={e.createdBy?.lastName}
|
||||||
|
/>
|
||||||
|
<span className="text-truncate">
|
||||||
|
{`${e.createdBy?.firstName ?? ""} ${
|
||||||
|
e.createdBy?.lastName ?? ""
|
||||||
|
}`.trim() || "N/A"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "createdAt",
|
||||||
|
label: "Submitted On",
|
||||||
|
align: "text-start",
|
||||||
|
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "amount",
|
||||||
|
label: "Amount",
|
||||||
|
align: "text-end",
|
||||||
|
getValue: (e) =>
|
||||||
|
formatFigure(e?.amount, {
|
||||||
|
type: "currency",
|
||||||
|
currency: e?.currency?.currencyCode,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "expenseStatus",
|
||||||
|
label: "Status",
|
||||||
|
align: "text-center",
|
||||||
|
getValue: (e) => (
|
||||||
|
<span
|
||||||
|
className={`badge bg-label-${
|
||||||
|
getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{e?.expenseStatus?.name || "Unknown"}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
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
|
||||||
|
);
|
||||||
|
|
||||||
|
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
|
||||||
|
? Object.fromEntries(
|
||||||
|
Object.entries(groupByField(data?.data ?? [], groupBy)).sort(
|
||||||
|
([keyA], [keyB]) => keyA.localeCompare(keyB)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
: { All: data?.data ?? [] };
|
||||||
|
|
||||||
|
const IsGroupedByDate = [
|
||||||
|
{ key: "transactionDate", displayField: "Transaction Date" },
|
||||||
|
{ key: "createdAt", displayField: "created Date" },
|
||||||
|
]?.includes(groupBy);
|
||||||
|
|
||||||
|
const paginate = (page) => {
|
||||||
|
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||||
|
setCurrentPage(page);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
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="Under the woring?"
|
||||||
|
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 ms-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 flex-row 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 */}
|
||||||
|
<Pagination
|
||||||
|
currentPage={currentPage}
|
||||||
|
totalPages={data?.totalPages}
|
||||||
|
onPageChange={paginate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PaymentRequestList;
|
||||||
180
src/components/PaymentRequest/PaymentRequestSchema.js
Normal file
180
src/components/PaymentRequest/PaymentRequestSchema.js
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
import { boolean, z } from "zod";
|
||||||
|
import { INR_CURRENCY_CODE } from "../../utils/constants";
|
||||||
|
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
|
||||||
|
const ALLOWED_TYPES = [
|
||||||
|
"application/pdf",
|
||||||
|
"image/png",
|
||||||
|
"image/jpg",
|
||||||
|
"image/jpeg",
|
||||||
|
];
|
||||||
|
export const PaymentRequestSchema = (expenseTypes, isItself) => {
|
||||||
|
return z.object({
|
||||||
|
title: z.string().min(1, { message: "Project is required" }),
|
||||||
|
projectId: z.string().min(1, { message: "Project is required" }),
|
||||||
|
expenseCategoryId: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: "Expense Category is required" }),
|
||||||
|
currencyId: z.string().min(1, { message: "Currency is required" }),
|
||||||
|
dueDate: z.string().min(1, { message: "Date is required" }),
|
||||||
|
description: z.string().min(1, { message: "Description is required" }),
|
||||||
|
payee: z.string().min(1, { message: "Supplier name is required" }),
|
||||||
|
isAdvancePayment: z.boolean().optional().default(false),
|
||||||
|
amount: z.coerce
|
||||||
|
.number({
|
||||||
|
invalid_type_error: "Amount is required and must be a number",
|
||||||
|
})
|
||||||
|
.min(1, "Amount must be Enter")
|
||||||
|
.refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
|
||||||
|
message: "Amount must have at most 2 decimal places",
|
||||||
|
}),
|
||||||
|
|
||||||
|
billAttachments: z.array(
|
||||||
|
z.object({
|
||||||
|
fileName: z.string().min(1, { message: "Filename is required" }),
|
||||||
|
base64Data: z.string().nullable(),
|
||||||
|
contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
|
||||||
|
message: "Only PDF, PNG, JPG, or JPEG files are allowed",
|
||||||
|
}),
|
||||||
|
documentId: z.string().optional(),
|
||||||
|
fileSize: z.number().max(MAX_FILE_SIZE, {
|
||||||
|
message: "File size must be less than or equal to 5MB",
|
||||||
|
}),
|
||||||
|
description: z.string().optional(),
|
||||||
|
isActive: z.boolean().default(true),
|
||||||
|
})
|
||||||
|
),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const defaultPaymentRequest = {
|
||||||
|
title: "",
|
||||||
|
description: "",
|
||||||
|
payee: "",
|
||||||
|
currencyId: "",
|
||||||
|
amount: "",
|
||||||
|
dueDate: "",
|
||||||
|
projectId: "",
|
||||||
|
expenseCategoryId: "",
|
||||||
|
isAdvancePayment: false,
|
||||||
|
billAttachments: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SearchPaymentRequestSchema = z.object({
|
||||||
|
projectIds: z.array(z.string()).optional(),
|
||||||
|
statusIds: z.array(z.string()).optional(),
|
||||||
|
createdByIds: z.array(z.string()).optional(),
|
||||||
|
currencyIds: z.array(z.string()).optional(),
|
||||||
|
expenseCategoryIds: z.array(z.string()).optional(),
|
||||||
|
payees: z.array(z.string()).optional(),
|
||||||
|
startDate: z.string().optional(),
|
||||||
|
endDate: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const defaultPaymentRequestFilter = {
|
||||||
|
projectIds: [],
|
||||||
|
statusIds: [],
|
||||||
|
createdByIds: [],
|
||||||
|
currencyIds: [],
|
||||||
|
expenseCategoryIds: [],
|
||||||
|
payees: [],
|
||||||
|
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" }),
|
||||||
|
paidTransactionId: z.string().nullable().optional(),
|
||||||
|
paidAt: z.string().nullable().optional(),
|
||||||
|
paidById: z.string().nullable().optional(),
|
||||||
|
tdsPercentage: z.string().nullable().optional(),
|
||||||
|
baseAmount: z.string().nullable().optional(),
|
||||||
|
taxAmount: z.string().nullable().optional(),
|
||||||
|
})
|
||||||
|
.superRefine((data, ctx) => {
|
||||||
|
if (isTransaction) {
|
||||||
|
if (!data.paidTransactionId?.trim()) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
path: ["paidTransactionId"],
|
||||||
|
message: "Transaction ID is required",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (!data.paidAt) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
path: ["paidAt"],
|
||||||
|
message: "Transacion Date is required",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (!data.paidById) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
path: ["paidById"],
|
||||||
|
message: "Paid By is required",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (!data.baseAmount) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
path: ["baseAmount"],
|
||||||
|
message: "Base Amount i required",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (!data.taxAmount) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
path: ["taxAmount"],
|
||||||
|
message: "Tax is required",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const defaultPRActionValues = {
|
||||||
|
comment: "",
|
||||||
|
statusId: "",
|
||||||
|
paidTransactionId: null,
|
||||||
|
paidAt: null,
|
||||||
|
paidById: null,
|
||||||
|
tdsPercentage: "0",
|
||||||
|
baseAmount: null,
|
||||||
|
taxAmount: "0",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const RequestedExpenseSchema = z.object({
|
||||||
|
paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
|
||||||
|
location: z.string().min(1, { message: "Location is required" }),
|
||||||
|
gstNumber: z.string().optional(),
|
||||||
|
billAttachments: z
|
||||||
|
.array(
|
||||||
|
z.object({
|
||||||
|
fileName: z.string().min(1, { message: "Filename is required" }),
|
||||||
|
base64Data: z.string().nullable(),
|
||||||
|
contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
|
||||||
|
message: "Only PDF, PNG, JPG, or JPEG files are allowed",
|
||||||
|
}),
|
||||||
|
documentId: z.string().optional(),
|
||||||
|
fileSize: z.number().max(MAX_FILE_SIZE, {
|
||||||
|
message: "File size must be less than or equal to 5MB",
|
||||||
|
}),
|
||||||
|
description: z.string().optional(),
|
||||||
|
isActive: z.boolean().default(true),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.nonempty({ message: "At least one file attachment is required" }),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const DefaultRequestedExpense = {
|
||||||
|
paymentModeId: "",
|
||||||
|
location: "",
|
||||||
|
gstNumber: "",
|
||||||
|
// amount:"",
|
||||||
|
billAttachments: [],
|
||||||
|
};
|
||||||
89
src/components/PaymentRequest/PaymentStatusLogs.jsx
Normal file
89
src/components/PaymentRequest/PaymentStatusLogs.jsx
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
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 sortedLogs = useMemo(() => {
|
||||||
|
if (!data?.updateLogs) return [];
|
||||||
|
return [...data.updateLogs].sort(
|
||||||
|
(a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)
|
||||||
|
);
|
||||||
|
}, [data?.updateLogs]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const timelineData = useMemo(() => {
|
||||||
|
return sortedLogs.map((log, index) => ({
|
||||||
|
id: log.id,
|
||||||
|
title: log.nextStatus?.name || "Status Updated",
|
||||||
|
description: log.nextStatus?.description || "",
|
||||||
|
timeAgo: log.updatedAt,
|
||||||
|
color: getColorNameFromHex(log.nextStatus?.color) || "primary",
|
||||||
|
userComment:log.comment,
|
||||||
|
users: log.updatedBy
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
firstName: log.updatedBy.firstName || "",
|
||||||
|
lastName: log?.updatedBy?.lastName || "",
|
||||||
|
role: log.updatedBy.jobRoleName || "",
|
||||||
|
avatar: log.updatedBy.photo,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: [],
|
||||||
|
}));
|
||||||
|
}, [sortedLogs]);
|
||||||
|
|
||||||
|
const handleShowMore = () => {
|
||||||
|
setVisibleCount((prev) => prev + 4);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="page-min-h overflow-auto h-56 py-1" >
|
||||||
|
{/* <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;
|
||||||
495
src/components/PaymentRequest/ViewPaymentRequest.jsx
Normal file
495
src/components/PaymentRequest/ViewPaymentRequest.jsx
Normal file
@ -0,0 +1,495 @@
|
|||||||
|
import { useMemo, useState } from "react";
|
||||||
|
import {
|
||||||
|
useActionOnExpense,
|
||||||
|
useActionOnPaymentRequest,
|
||||||
|
usePaymentRequestDetail,
|
||||||
|
} from "../../hooks/useExpense";
|
||||||
|
import {
|
||||||
|
formatCurrency,
|
||||||
|
formatFigure,
|
||||||
|
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 { ExpenseDetailsSkeleton } from "../Expenses/ExpenseSkeleton";
|
||||||
|
import ExpenseStatusLogs from "../Expenses/ExpenseStatusLogs";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
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_PROCESSED,
|
||||||
|
EXPENSE_REJECTEDBY,
|
||||||
|
PROCESS_EXPENSE,
|
||||||
|
REVIEW_EXPENSE,
|
||||||
|
} from "../../utils/constants";
|
||||||
|
import Label from "../common/Label";
|
||||||
|
import { FilelistView } from "../Expenses/Filelist";
|
||||||
|
import PaymentStatusLogs from "./PaymentStatusLogs";
|
||||||
|
import {
|
||||||
|
defaultPRActionValues,
|
||||||
|
PaymentRequestActionScheam,
|
||||||
|
} from "./PaymentRequestSchema";
|
||||||
|
import ActionPaymentRequest from "./ActionPaymentRequest";
|
||||||
|
|
||||||
|
const ViewPaymentRequest = ({ requestId }) => {
|
||||||
|
const [IsPaymentProcess, setIsPaymentProcess] = useState(false);
|
||||||
|
const [clickedStatusId, setClickedStatusId] = useState(null);
|
||||||
|
const [imageLoaded, setImageLoaded] = useState({});
|
||||||
|
const IsReview = useHasUserPermission(REVIEW_EXPENSE);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const { data, isLoading, isError, error, isFetching } =
|
||||||
|
usePaymentRequestDetail(requestId);
|
||||||
|
|
||||||
|
const { setDocumentView, setModalSize, setVieRequest, setIsExpenseGenerate } =
|
||||||
|
usePaymentRequestContext();
|
||||||
|
const ActionSchema =
|
||||||
|
PaymentRequestActionScheam(IsPaymentProcess, data?.createdAt) ??
|
||||||
|
z.object({});
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
setValue,
|
||||||
|
reset,
|
||||||
|
control,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm({
|
||||||
|
resolver: zodResolver(ActionSchema),
|
||||||
|
defaultValues: defaultPRActionValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
const userPermissions = useSelector(
|
||||||
|
(state) => state?.globalVariables?.loginUser?.featurePermissions || []
|
||||||
|
);
|
||||||
|
const CurrentUser = useSelector(
|
||||||
|
(state) => state?.globalVariables?.loginUser?.employeeInfo
|
||||||
|
);
|
||||||
|
|
||||||
|
const nextStatusWithPermission = useMemo(() => {
|
||||||
|
if (!Array.isArray(data?.nextStatus)) return [];
|
||||||
|
|
||||||
|
return data.nextStatus.filter((status) => {
|
||||||
|
const permissionIds = Array.isArray(status?.permissionIds)
|
||||||
|
? status.permissionIds
|
||||||
|
: [];
|
||||||
|
|
||||||
|
if (permissionIds?.length === 0) return true;
|
||||||
|
if (permissionIds.includes(PROCESS_EXPENSE)) {
|
||||||
|
setIsPaymentProcess(true);
|
||||||
|
}
|
||||||
|
return permissionIds.some((id) => userPermissions.includes(id));
|
||||||
|
});
|
||||||
|
}, [data, userPermissions]);
|
||||||
|
|
||||||
|
const isRejectedRequest = useMemo(() => {
|
||||||
|
return EXPENSE_REJECTEDBY.includes(data?.status?.id);
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
const isCreatedBy = useMemo(() => {
|
||||||
|
return data?.createdBy?.id === CurrentUser?.id;
|
||||||
|
}, [data, CurrentUser]);
|
||||||
|
|
||||||
|
const { mutate: MakeAction, isPending } = useActionOnPaymentRequest(() => {
|
||||||
|
setClickedStatusId(null);
|
||||||
|
reset();
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = (formData) => {
|
||||||
|
const Payload = {
|
||||||
|
...formData,
|
||||||
|
paidAt: localToUtc(formData.paidAt),
|
||||||
|
paymentRequestId: data.id,
|
||||||
|
comment: formData.comment,
|
||||||
|
};
|
||||||
|
MakeAction(Payload);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading) return <ExpenseDetailsSkeleton />;
|
||||||
|
if (isError) return <Error error={error} />;
|
||||||
|
const handleImageLoad = (id) => {
|
||||||
|
setImageLoaded((prev) => ({ ...prev, [id]: true }));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="container px-3 py-2 py-md-0"
|
||||||
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
|
>
|
||||||
|
<div className="col-12 mb-2 text-center ">
|
||||||
|
<h5 className="fw-semibold m-0">Payment Request Details</h5>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
<div className="row mb-1">
|
||||||
|
<div className="col-12 col-sm-6 col-md-7">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-12 d-flex justify-content-between mb-6">
|
||||||
|
<span> {data?.paymentRequestUID}</span>
|
||||||
|
<span
|
||||||
|
className={`badge bg-label-${
|
||||||
|
getColorNameFromHex(data?.expenseStatus?.color) || "secondary"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{data?.expenseStatus?.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-8 mb-3">
|
||||||
|
<div className="d-flex">
|
||||||
|
<label
|
||||||
|
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||||
|
style={{ minWidth: "130px" }}
|
||||||
|
>
|
||||||
|
Project Name:
|
||||||
|
</label>
|
||||||
|
<div className="text-muted">{data?.project?.name || "—"}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-4 mb-3">
|
||||||
|
<div className="d-flex">
|
||||||
|
<label
|
||||||
|
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||||
|
style={{ minWidth: "100px" }}
|
||||||
|
>
|
||||||
|
Due Date :
|
||||||
|
</label>
|
||||||
|
<div className="text-muted">
|
||||||
|
{formatUTCToLocalTime(data?.dueDate)}
|
||||||
|
</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" }}
|
||||||
|
>
|
||||||
|
Expense Category :
|
||||||
|
</label>
|
||||||
|
<div className="text-muted">{data?.expenseCategory?.name}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Row 2 */}
|
||||||
|
<div className="col-md-6 mb-3">
|
||||||
|
<div className="d-flex">
|
||||||
|
<label
|
||||||
|
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||||
|
style={{ minWidth: "130px" }}
|
||||||
|
>
|
||||||
|
Supplier :
|
||||||
|
</label>
|
||||||
|
<div className="text-muted">{data?.payee}</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" }}
|
||||||
|
>
|
||||||
|
Amount :
|
||||||
|
</label>
|
||||||
|
<div className="text-muted">
|
||||||
|
{formatFigure(data?.amount, {
|
||||||
|
type: "currency",
|
||||||
|
currency: data?.currency?.currencyCode,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{data?.gstNumber && (
|
||||||
|
<div className="col-md-6 mb-3">
|
||||||
|
<div className="d-flex">
|
||||||
|
<label
|
||||||
|
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||||
|
style={{ minWidth: "130px" }}
|
||||||
|
>
|
||||||
|
GST Number :
|
||||||
|
</label>
|
||||||
|
<div className="text-muted">{data?.gstNumber}</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" }}
|
||||||
|
>
|
||||||
|
Created At :
|
||||||
|
</label>
|
||||||
|
<div className="text-muted">
|
||||||
|
{formatUTCToLocalTime(data?.createdAt, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Row 6 */}
|
||||||
|
{data?.createdBy && (
|
||||||
|
<div className="col-md-6 text-start">
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<label
|
||||||
|
className="form-label me-2 mb-0 fw-semibold"
|
||||||
|
style={{ minWidth: "130px" }}
|
||||||
|
>
|
||||||
|
Created By :
|
||||||
|
</label>
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<Avatar
|
||||||
|
size="xs"
|
||||||
|
classAvatar="m-0"
|
||||||
|
firstName={data?.createdBy?.firstName}
|
||||||
|
lastName={data?.createdBy?.lastName}
|
||||||
|
/>
|
||||||
|
<span className="text-muted">
|
||||||
|
{`${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
|
||||||
|
className="form-label me-2 mb-0 fw-semibold"
|
||||||
|
style={{ minWidth: "130px" }}
|
||||||
|
>
|
||||||
|
Paid By :
|
||||||
|
</label>
|
||||||
|
<div className="d-flex align-items-center ">
|
||||||
|
<Avatar
|
||||||
|
size="xs"
|
||||||
|
classAvatar="m-0"
|
||||||
|
firstName={data?.paidBy?.firstName}
|
||||||
|
lastName={data?.paidBy?.lastName}
|
||||||
|
/>
|
||||||
|
<span className="text-muted">
|
||||||
|
{`${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>
|
||||||
|
<div className="text-muted">{data?.description}</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-6 text-start">
|
||||||
|
<label className="form-label me-2 mb-2 fw-semibold">
|
||||||
|
Attachment :
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="d-flex flex-wrap gap-2">
|
||||||
|
{data?.attachments?.length > 0 ? (
|
||||||
|
<FilelistView
|
||||||
|
files={data?.attachments}
|
||||||
|
viewFile={setDocumentView}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<p className="m-0 text-secondary">No Attachment</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{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?.paidTransactionId}
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6 ">
|
||||||
|
<label className="form-label me-2 mb-0 fw-semibold">
|
||||||
|
Transaction Date :
|
||||||
|
</label>
|
||||||
|
{formatUTCToLocalTime(data?.paidAt)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{data?.paidBy && (
|
||||||
|
<>
|
||||||
|
<div className="col-md-6 d-flex align-items-center">
|
||||||
|
<label className="form-label me-2 mb-0 fw-semibold">
|
||||||
|
Paid By :
|
||||||
|
</label>
|
||||||
|
<Avatar
|
||||||
|
size="xs"
|
||||||
|
classAvatar="m-0 me-1"
|
||||||
|
firstName={data?.paidBy?.firstName}
|
||||||
|
lastName={data?.paidBy?.lastName}
|
||||||
|
/>
|
||||||
|
<span className="text-muted">
|
||||||
|
{`${data?.paidBy?.firstName} ${data?.paidBy?.lastName}`.trim()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* {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("paidTransactionId")}
|
||||||
|
/>
|
||||||
|
{errors.paidTransactionId && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.paidTransactionId.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-6 text-start mb-1">
|
||||||
|
<label className="form-label">Transaction Date </label>
|
||||||
|
<DatePicker className="w-100"
|
||||||
|
name="paidAt"
|
||||||
|
control={control}
|
||||||
|
minDate={data?.createdAt}
|
||||||
|
/>
|
||||||
|
{errors.paidAt && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.paidAt.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-6 text-start">
|
||||||
|
<label className="form-label">Paid By </label>
|
||||||
|
<EmployeeSearchInput
|
||||||
|
control={control}
|
||||||
|
name="paidById"
|
||||||
|
projectId={null}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-6 text-start mb-1">
|
||||||
|
<Label className="form-label">TDS Percentage</Label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("tdsPercentage")}
|
||||||
|
/>
|
||||||
|
{errors.tdsPercentage && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.tdsPercentage.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-6 text-start mb-1">
|
||||||
|
<Label className="form-label" required>
|
||||||
|
Base Amount
|
||||||
|
</Label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("baseAmount")}
|
||||||
|
/>
|
||||||
|
{errors.baseAmount && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.baseAmount.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-md-6 text-start mb-1">
|
||||||
|
<Label className="form-label" required>
|
||||||
|
Tax Amount
|
||||||
|
</Label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
{...register("taxAmount")}
|
||||||
|
/>
|
||||||
|
{errors.taxAmount && (
|
||||||
|
<small className="danger-text">
|
||||||
|
{errors.taxAmount.message}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="col-12 mb-3 text-start">
|
||||||
|
{((nextStatusWithPermission?.length > 0 &&
|
||||||
|
!isRejectedRequest) ||
|
||||||
|
(isRejectedRequest && 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 &&
|
||||||
|
(!isRejectedRequest || 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>
|
||||||
|
</>
|
||||||
|
) } */}
|
||||||
|
<ActionPaymentRequest requestId={requestId} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className=" col-sm-12 my-md-0 border-top border-md-none col-md-5">
|
||||||
|
<div className="d-flex mb-2 py-1">
|
||||||
|
<i className="bx bx-time-five me-2 "></i>{" "}
|
||||||
|
<p className="fw-medium">TimeLine</p>
|
||||||
|
</div>
|
||||||
|
<PaymentStatusLogs data={data} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default ViewPaymentRequest;
|
||||||
@ -52,7 +52,7 @@ const Avatar = ({ firstName, lastName, size = "sm", classAvatar }) => {
|
|||||||
return (
|
return (
|
||||||
<div className="avatar-wrapper p-1">
|
<div className="avatar-wrapper p-1">
|
||||||
<div className={`avatar avatar-${size} ${classAvatar}`}>
|
<div className={`avatar avatar-${size} ${classAvatar}`}>
|
||||||
<span className={`avatar-initial rounded-circle ${bgClass}`}>
|
<span className={`avatar-initial rounded-circle text-white ${bgClass}`}>
|
||||||
{generateAvatarText(firstName, lastName)}
|
{generateAvatarText(firstName, lastName)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -74,7 +74,7 @@ const Timeline = ({ items = [], transparent = true }) => {
|
|||||||
height="32"
|
height="32"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Avatar
|
<Avatar
|
||||||
firstName={user.firstName}
|
firstName={user.firstName}
|
||||||
lastName={user.lastName}
|
lastName={user.lastName}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -6,11 +6,19 @@ import { useSelector } from "react-redux";
|
|||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
|
|
||||||
// -------------------Query------------------------------------------------------
|
// -------------------Query------------------------------------------------------
|
||||||
|
export const usePayee =()=>{
|
||||||
|
return useQuery({
|
||||||
|
queryKey:["payee"],
|
||||||
|
queryFn:async()=>{
|
||||||
|
const resp = await ExpenseRepository.GetPayee();
|
||||||
|
return resp.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
const cleanFilter = (filter) => {
|
const cleanFilter = (filter) => {
|
||||||
const cleaned = { ...filter };
|
const cleaned = { ...filter };
|
||||||
|
|
||||||
["projectIds", "statusIds", "createdByIds", "paidById"].forEach((key) => {
|
["projectIds", "statusIds", "createdByIds", "paidById","expenseCategoryIds"].forEach((key) => {
|
||||||
if (Array.isArray(cleaned[key]) && cleaned[key].length === 0) {
|
if (Array.isArray(cleaned[key]) && cleaned[key].length === 0) {
|
||||||
delete cleaned[key];
|
delete cleaned[key];
|
||||||
}
|
}
|
||||||
@ -262,3 +270,243 @@ export const useHasAnyPermission = (permissionIdsInput) => {
|
|||||||
|
|
||||||
return permissionIds.some((id) => permissions.includes(id));
|
return permissionIds.some((id) => permissions.includes(id));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//#region Payment Request
|
||||||
|
// ---------------------------Get Payment Request---------------------------------------------
|
||||||
|
export const usePaymentRequestList = (
|
||||||
|
pageSize,
|
||||||
|
pageNumber,
|
||||||
|
filter,
|
||||||
|
isActive,
|
||||||
|
searchString = "",
|
||||||
|
) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ["paymentRequestList",pageSize,pageNumber,filter,isActive,searchString],
|
||||||
|
queryFn: async()=>{
|
||||||
|
const resp = await ExpenseRepository.GetPaymentRequestList(pageSize,pageNumber,filter,isActive,searchString);
|
||||||
|
return resp.data;
|
||||||
|
},
|
||||||
|
keepPreviousData: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const usePaymentRequestDetail =(RequestId)=>{
|
||||||
|
return useQuery({
|
||||||
|
queryKey:['paymentRequest',RequestId],
|
||||||
|
queryFn:async()=>{
|
||||||
|
RequestId
|
||||||
|
const resp = await ExpenseRepository.GetPaymentRequest(RequestId);
|
||||||
|
return resp.data;
|
||||||
|
},
|
||||||
|
enabled:!!RequestId
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------Put Post Payment Request---------------------------------------
|
||||||
|
export const useCreatePaymentRequest = (onSuccessCallBack) => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async (payload) => {
|
||||||
|
await ExpenseRepository.CreatePaymentRequest(payload);
|
||||||
|
},
|
||||||
|
|
||||||
|
onSuccess: (_, variables) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["paymentRequestList"] });
|
||||||
|
showToast("Payment Created Successfully", "success");
|
||||||
|
if (onSuccessCallBack) onSuccessCallBack();
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
showToast(
|
||||||
|
error.message || "Something went wrong please try again !",
|
||||||
|
"error"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const useUpdatePaymentRequest = (onSuccessCallBack) => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async ({ id, payload }) => {
|
||||||
|
const response = await ExpenseRepository.UpdatePaymentRequest(id, payload);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
onSuccess: (updatedExpense, variables) => {
|
||||||
|
queryClient.removeQueries({ queryKey: ["paymentRequest", variables.id] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["paymentRequestList"] });
|
||||||
|
showToast("PaymentRequest updated Successfully", "success");
|
||||||
|
|
||||||
|
if (onSuccessCallBack) onSuccessCallBack();
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
showToast("Something went wrong.Please try again later.", "error");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
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"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
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"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export const useCreatePaymentRequestExpense = (onSuccessCallBack) => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async (payload) => {
|
||||||
|
await ExpenseRepository.CreatePaymentRequestExpense(payload);
|
||||||
|
},
|
||||||
|
|
||||||
|
onSuccess: (_, variables) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["Expenses"] });
|
||||||
|
queryClient.invalidateQueries({queryKey:["paymentRequest",variables.paymentRequestId]})
|
||||||
|
showToast("Expense Created Successfully", "success");
|
||||||
|
if (onSuccessCallBack) onSuccessCallBack();
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
showToast(
|
||||||
|
error.message || "Something went wrong please try again !",
|
||||||
|
"error"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const usePaymentRequestFilter = () => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ["PaymentRequestFilter"],
|
||||||
|
queryFn: async () =>
|
||||||
|
{
|
||||||
|
const response = await ExpenseRepository.GetPaymentRequestFilter();
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
};
|
||||||
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//#region Advance Payment
|
||||||
|
export const useExpenseTransactions = (employeeId)=>{
|
||||||
|
return useQuery({
|
||||||
|
queryKey:["transaction",employeeId],
|
||||||
|
queryFn:async()=> {
|
||||||
|
const resp = await ExpenseRepository.GetTranctionList(employeeId);
|
||||||
|
return resp.data
|
||||||
|
},
|
||||||
|
enabled:!!employeeId,
|
||||||
|
keepPreviousData:true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//#endregion
|
||||||
|
|
||||||
|
// ---------------------------Put Post Recurring Expense---------------------------------------
|
||||||
|
|
||||||
|
export const useCreateRecurringExpense = (onSuccessCallBack) => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async (payload) => {
|
||||||
|
return await ExpenseRepository.CreateRecurringExpense(payload);
|
||||||
|
},
|
||||||
|
|
||||||
|
onSuccess: (_, variables) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["recurringExpense"] });
|
||||||
|
showToast("Recurring Expense Created Successfully", "success");
|
||||||
|
if (onSuccessCallBack) onSuccessCallBack();
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
showToast(
|
||||||
|
error.message || "Something went wrong please try again !",
|
||||||
|
"error"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useRecurringExpenseDetail =(RecurringId)=>{
|
||||||
|
return useQuery({
|
||||||
|
queryKey:['recurringExpense',RecurringId],
|
||||||
|
queryFn:async()=>{
|
||||||
|
const resp = await ExpenseRepository.GetRecurringExpense(RecurringId);
|
||||||
|
return resp.data;
|
||||||
|
},
|
||||||
|
enabled:!!RecurringId
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@ -18,6 +18,7 @@ const ErrorPage =() =>{
|
|||||||
<div>
|
<div>
|
||||||
<h1>Something went wrong.</h1>
|
<h1>Something went wrong.</h1>
|
||||||
<p>{error?.message || 'Unknown error occurred'}</p>
|
<p>{error?.message || 'Unknown error occurred'}</p>
|
||||||
|
<p>{JSON.stringify(error)}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,24 +1,78 @@
|
|||||||
import { api } from "../utils/axiosClient";
|
import { api } from "../utils/axiosClient";
|
||||||
|
|
||||||
|
|
||||||
const ExpenseRepository = {
|
const ExpenseRepository = {
|
||||||
GetExpenseList: ( pageSize, pageNumber, filter,searchString ) => {
|
//#region Expense
|
||||||
|
GetExpenseList: (pageSize, pageNumber, filter, searchString) => {
|
||||||
const payloadJsonString = JSON.stringify(filter);
|
const payloadJsonString = JSON.stringify(filter);
|
||||||
|
return api.get(
|
||||||
|
`/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`
|
||||||
|
);
|
||||||
return api.get(`/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`);
|
|
||||||
},
|
},
|
||||||
|
GetExpenseDetails: (id) => api.get(`/api/Expense/details/${id}`),
|
||||||
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),
|
||||||
|
GetExpenseFilter: () => api.get("/api/Expense/filter"),
|
||||||
|
|
||||||
ActionOnExpense:(data)=>api.post('/api/expense/action',data),
|
//#endregion
|
||||||
|
|
||||||
GetExpenseFilter:()=>api.get('/api/Expense/filter')
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
//#region Payment Request
|
||||||
|
GetPaymentRequestList: (
|
||||||
|
pageSize,
|
||||||
|
pageNumber,
|
||||||
|
filter,
|
||||||
|
isActive,
|
||||||
|
searchString
|
||||||
|
) => {
|
||||||
|
const payloadJsonString = JSON.stringify(filter);
|
||||||
|
return api.get(
|
||||||
|
`/api/Expense/get/payment-requests/list?isActive=${isActive}&pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`
|
||||||
|
);
|
||||||
|
},
|
||||||
|
CreatePaymentRequest: (data) =>
|
||||||
|
api.post("/api/expense/payment-request/create", data),
|
||||||
|
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),
|
||||||
|
DeletePaymentRequest: () => api.get("delete here come"),
|
||||||
|
CreatePaymentRequestExpense: (data) =>
|
||||||
|
api.post("/api/Expense/payment-request/expense/create", data),
|
||||||
|
GetPayee:()=>api.get('/api/Expense/payment-request/payee'),
|
||||||
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//#region Recurring Expense
|
||||||
|
GetRecurringExpenseList:(pageSize, pageNumber, filter,isActive, searchString) => {
|
||||||
|
const payloadJsonString = JSON.stringify(filter);
|
||||||
|
return api.get(
|
||||||
|
`/api/expense/get/recurring-payment/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&isActive=${isActive}&searchString=${searchString}`
|
||||||
|
);
|
||||||
|
},
|
||||||
|
CreateRecurringExpense: (data) =>
|
||||||
|
api.post("/api/Expense/recurring-payment/create", data),
|
||||||
|
UpdateRecurringExpense: (id, data) =>
|
||||||
|
api.put(`/api/Expense/recurring-payment/edit/${id}`, data),
|
||||||
|
GetRecurringExpense: (id) =>
|
||||||
|
api.get(`/api/Expense/get/recurring-payment/details/${id}`),
|
||||||
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//#region Advance Payment
|
||||||
|
GetTranctionList: (employeeId) =>
|
||||||
|
api.get(`/api/Expense/get/transactions/${employeeId}`),
|
||||||
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
export default ExpenseRepository;
|
export default ExpenseRepository;
|
||||||
|
|||||||
@ -66,15 +66,8 @@ export const PROCESS_EXPENSE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11";
|
|||||||
|
|
||||||
export const EXPENSE_MANAGE = "bdee29a2-b73b-402d-8dd1-c4b1f81ccbc3";
|
export const EXPENSE_MANAGE = "bdee29a2-b73b-402d-8dd1-c4b1f81ccbc3";
|
||||||
|
|
||||||
export const EXPENSE_REJECTEDBY = [
|
|
||||||
"965eda62-7907-4963-b4a1-657fb0b2724b",
|
|
||||||
"d1ee5eec-24b6-4364-8673-a8f859c60729",
|
|
||||||
];
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const EXPENSE_DRAFT = "297e0d8f-f668-41b5-bfea-e03b354251c8";
|
|
||||||
|
|
||||||
// --------------------------------Collection----------------------------
|
// --------------------------------Collection----------------------------
|
||||||
|
|
||||||
export const ADMIN_COLLECTION = "dbf17591-09fe-4c93-9e1a-12db8f5cc5de";
|
export const ADMIN_COLLECTION = "dbf17591-09fe-4c93-9e1a-12db8f5cc5de";
|
||||||
@ -98,8 +91,14 @@ export const DOWNLOAD_DOCUMENT = "404373d0-860f-490e-a575-1c086ffbce1d";
|
|||||||
export const VERIFY_DOCUMENT = "13a1f30f-38d1-41bf-8e7a-b75189aab8e0";
|
export const VERIFY_DOCUMENT = "13a1f30f-38d1-41bf-8e7a-b75189aab8e0";
|
||||||
// -------------------Application Role------------------------------
|
// -------------------Application Role------------------------------
|
||||||
|
|
||||||
// 1 - Expense Manage
|
// 1 - Expense Manage- Status
|
||||||
|
export const EXPENSE_REJECTEDBY = [
|
||||||
|
"965eda62-7907-4963-b4a1-657fb0b2724b",
|
||||||
|
"d1ee5eec-24b6-4364-8673-a8f859c60729",
|
||||||
|
];
|
||||||
|
export const EXPENSE_DRAFT = "297e0d8f-f668-41b5-bfea-e03b354251c8";
|
||||||
export const EXPENSE_MANAGEMENT = "a4e25142-449b-4334-a6e5-22f70e4732d7";
|
export const EXPENSE_MANAGEMENT = "a4e25142-449b-4334-a6e5-22f70e4732d7";
|
||||||
|
export const EXPENSE_CREATE = "b8586f67-dc19-49c3-b4af-224149efe1d3"
|
||||||
export const INR_CURRENCY_CODE = "78e96e4a-7ce0-4164-ae3a-c833ad45ec2c";
|
export const INR_CURRENCY_CODE = "78e96e4a-7ce0-4164-ae3a-c833ad45ec2c";
|
||||||
export const EXPENSE_PROCESSED = "61578360-3a49-4c34-8604-7b35a3787b95";
|
export const EXPENSE_PROCESSED = "61578360-3a49-4c34-8604-7b35a3787b95";
|
||||||
export const TENANT_STATUS = [
|
export const TENANT_STATUS = [
|
||||||
@ -205,5 +204,3 @@ export const PAYEE_RECURRING_EXPENSE = [
|
|||||||
label: "Paused",
|
label: "Paused",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user