added payment

This commit is contained in:
pramod.mahajan 2025-12-01 12:32:46 +05:30
parent 194b032870
commit ef3312523f
8 changed files with 446 additions and 54 deletions

View File

@ -28,21 +28,21 @@ const ManagePurchase = ({ onClose, purchaseId }) => {
const stepsConfig = useMemo(
() => [
{
name: "Party Details",
name: "Vendor & Project Details",
icon: "bx bx-user bx-md",
subtitle: "Supplier & project information",
subtitle: "Vendor information and project association",
component: <PurchasePartyDetails purchase={data} />,
},
{
name: "Invoice & Transport",
name: "Invoice & Logistics",
icon: "bx bx-receipt bx-md",
subtitle: "Invoice, eWay bill & transport info",
subtitle: "Invoice, e-Way bill, and logistics information",
component: <PurchaseTransportDetails />,
},
{
name: "Payment Details",
name: "Invoice & Tax Amount",
icon: "bx bx-credit-card bx-md",
subtitle: "Amount, tax & due date",
subtitle: "Payment terms, tax breakdown, and due dates",
component: <PurchasePaymentDetails purchaseId={purchaseId} />,
},
],

View File

@ -1,14 +1,15 @@
import React, { useState } from "react";
import { usePurchasesList } from "../../hooks/usePurchase";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import { ADD_DELIVERY_CHALLAN, ITEMS_PER_PAGE } from "../../utils/constants";
import Pagination from "../common/Pagination";
import { PurchaseColumn } from "./Purchasetable";
import { SpinnerLoader } from "../common/Loader";
import { useDebounce } from "../../utils/appUtils";
import { usePurchaseContext } from "../../pages/purchase/PurchasePage";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
const PurchaseList = ({ searchString }) => {
const { setViewPurchase, setManagePurchase, setChallan } =
const { setViewPurchase, setManagePurchase, setChallan, setAddPayment } =
usePurchaseContext();
const [currentPage, setCurrentPage] = useState(1);
const debounceSearch = useDebounce(searchString, 300);
@ -27,7 +28,7 @@ const PurchaseList = ({ searchString }) => {
};
const visibleColumns = PurchaseColumn.filter((col) => !col.hidden);
const canAddChallan = useHasUserPermission(ADD_DELIVERY_CHALLAN)
return (
<div className="card mt-2 page-min-h px-sm-4">
<div className="table-responsive px-2">
@ -119,6 +120,7 @@ const PurchaseList = ({ searchString }) => {
<span className="align-left">Edit</span>
</a>
</li>
{canAddChallan && (
<li>
<a
className="dropdown-item cursor-pointer"
@ -131,7 +133,25 @@ const PurchaseList = ({ searchString }) => {
>
<i className="bx bx-file bx-plus me-2"></i>
<span className="align-left">Add Delivery Challan</span>
<span className="align-left">
Add Delivery Challan
</span>
</a>
</li>
)}
<li>
<a
className="dropdown-item cursor-pointer"
onClick={() =>
setAddPayment({
isOpen: true,
purchaseId: item.id,
})
}
>
<i className="bx bx-file bx-plus me-2"></i>
<span className="align-left">Add Payment</span>
</a>
</li>
</ul>

View File

@ -0,0 +1,298 @@
import React from "react";
import {
AppFormController,
AppFormProvider,
useAppForm,
} from "../../hooks/appHooks/useAppForm";
import { zodResolver } from "@hookform/resolvers/zod";
import { AddPurchasePayment, defaultPurchasePayment } from "./PurchaseSchema";
import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
import { formatFigure, localToUtc } from "../../utils/appUtils";
import Label from "../common/Label";
import DatePicker from "../common/DatePicker";
import {
useAddPurchasePayment,
usePurchase,
usePurchasePaymentHistory,
} from "../../hooks/usePurchase";
import SelectField from "../common/Forms/SelectField";
import { SpinnerLoader } from "../common/Loader";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import Avatar from "../common/Avatar";
const PurchasePayment = ({ purchaseId }) => {
const {
data: Purchase,
isLoading: isPurchaseLoading,
error: purchaseError,
} = usePurchase(purchaseId);
const methods = useAppForm({
resolver: zodResolver(AddPurchasePayment),
defaultValues: defaultPurchasePayment,
});
const {
control,
register,
handleSubmit,
reset,
formState: { errors },
} = methods;
const {
data: paymentTypes,
isLoading: isPaymentTypeLoading,
isError: isPaymentTypeError,
error: paymentError,
} = usePaymentAjustmentHead(true);
const { mutate: AddPayment, isPending } = useAddPurchasePayment(() => {
handleClose();
});
const { data, isLoading, isError, error } =
usePurchasePaymentHistory(purchaseId);
const onSubmit = (formData) => {
const payload = {
...formData,
paymentReceivedDate: localToUtc(formData.paymentReceivedDate),
invoiceId: purchaseId,
};
AddPayment(payload);
};
const handleClose = (formData) => {
reset(defaultPurchasePayment);
};
return (
<div className="contianer p-1">
<div className="text-center">
<p className="fs-5 text-semibod">Supplier / Vendor Transaction </p>
</div>
<div className="row g-3">
<div className="col-12 col-sm-6 px-2 p-sm-0">
<AppFormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)} className="p-0 text-start">
<div className="row px-md-1 px-0">
<div className="col-12 col-md-6 mb-2">
<Label required>TransanctionId</Label>
<input
type="text"
className="form-control form-control-md"
{...register("transactionId")}
/>
{errors.transactionId && (
<small className="danger-text">
{errors.transactionId.message}
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label required>Transaction Date </Label>
<DatePicker
className="w-100"
size="md"
name="paymentReceivedDate"
control={control}
minDate={
Purchase?.createdAt
? new Date(
new Date(Purchase?.createdAt).setDate(
new Date(Purchase?.createdAt).getDate() + 1
)
)
: null
}
maxDate={new Date()}
/>
{errors.paymentReceivedDate && (
<small className="danger-text">
{errors.paymentReceivedDate.message}
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<AppFormController
name="paymentAdjustmentHeadId"
control={control}
render={({ field }) => (
<SelectField
label="Payment Adjustment Head"
options={paymentTypes?.data ?? []}
placeholder="Choose a Status"
required
labelKeyKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
isLoading={isPaymentTypeLoading}
className="m-0"
/>
)}
/>
{errors.paymentAdjustmentHeadId && (
<small className="danger-text">
{errors.paymentAdjustmentHeadId.message}
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label htmlFor="amount" className="form-label" required>
Amount
</Label>
<input
type="number"
id="amount"
className="form-control form-control-md"
min="1"
step="0.01"
inputMode="decimal"
{...register("amount", { valueAsNumber: true })}
/>
{errors.amount && (
<small className="danger-text">
{errors.amount.message}
</small>
)}
</div>
<div className="col-12 mb-2">
<Label htmlFor="comment" className="form-label" required>
Comment
</Label>
<textarea
id="comment"
className="form-control form-control-sm"
{...register("comment")}
/>
{errors.comment && (
<small className="danger-text">
{errors.comment.message}
</small>
)}
</div>
<div className="d-flex justify-content-end gap-3">
{" "}
<button
type="reset"
className="btn btn-label-secondary btn-sm mt-3"
onClick={() => {
handleClose();
onClose();
}}
disabled={isPending}
>
Cancel
</button>
<button
type="submit"
className="btn btn-primary btn-sm mt-3"
disabled={isPending}
>
{isPending ? "Please Wait..." : "Submit"}
</button>
</div>
</div>
</form>
</AppFormProvider>
</div>
<div className="col-12 col-sm-6 px-2 p-sm-0">
<div className="d-flex flex-row gap-2 text-start">
<i className="bx bx-history"></i> <p>Purchase Payment Log</p>
</div>
{isLoading ? (
<SpinnerLoader />
) : (
data?.length > 0 && (
<div
className="row text-start mx-2"
style={{ maxHeight: "70vh", overflowY: "auto" }}
>
{data
.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
.map((payment, index) => (
<div className="col-12 mb-2" key={payment.id}>
<div className=" p-2 border-start border-warning">
<div className="row">
<div className="col-12 col-md-6 d-flex justify-content-between align-items-center ">
<div>
<small className="fw-semibold me-1">
Transaction Date:
</small>{" "}
{formatUTCToLocalTime(
payment.paymentReceivedDate
)}
</div>
<span className="fs-semibold d-block d-md-none">
{formatFigure(payment.amount, {
type: "currency",
currency: "INR",
})}
</span>
</div>
<div className="col-12 col-md-6 mb-0 d-flex align-items-center m-0">
<small className="fw-semibold me-2">
Updated By:
</small>{" "}
<Avatar
size="xs"
firstName={payment?.createdBy?.firstName}
lastName={payment?.createdBy?.lastName}
/>{" "}
{payment?.createdBy?.firstName}{" "}
{payment.createdBy?.lastName}
</div>
</div>
<div className="row">
<div className="col-12 col-md-6">
<p className="mb-1">
<small className="fw-semibold">
Transaction ID:
</small>{" "}
{payment.transactionId}
</p>
</div>
<div className="col-12 ">
<div className="d-flex justify-content-between">
<span>
{payment?.paymentAdjustmentHead?.name}
</span>
<span className="fs-semibold d-none d-md-block">
{formatFigure(payment.amount, {
type: "currency",
currency: "INR",
})}
</span>
</div>
<p className="text-tiny m-0 mt-1">
{payment?.comment}
</p>
</div>
</div>
</div>
</div>
))}
</div>
)
)}
{data?.length === 0 && (
<div className="d-flex justify-content-center algin-items-center text-center">
<div>
<i className='bx bx-box'></i>
<p className="text-secondary">You don't have any payment yet.</p>
</div>
</div>
)}
</div>
</div>
</div>
);
};
export default PurchasePayment;

View File

@ -13,9 +13,7 @@ export const AttachmentSchema = z.object({
invoiceAttachmentTypeId: z.string().nullable(),
fileName: z.string().min(1, { message: "Filename is required" }),
base64Data: z.string().nullable(),
contentType: z
.string()
.refine((val) => ALLOWED_TYPES.includes(val), {
contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
message: "Only PDF, PNG, JPG, or JPEG files are allowed",
}),
fileSize: z.number().max(MAX_FILE_SIZE, {
@ -23,10 +21,9 @@ export const AttachmentSchema = z.object({
}),
description: z.string().optional().default(""),
isActive: z.boolean().default(true),
documentId:z.string().nullable().default(null)
documentId: z.string().nullable().default(null),
});
export const PurchaseSchema = z.object({
title: z.string().min(1, { message: "Title is required" }),
projectId: z.string().min(1, { message: "Project is required" }),
@ -58,13 +55,9 @@ export const PurchaseSchema = z.object({
transportCharges: z.number().nullable(),
description: z.string().min(1, { message: "Description is required" }),
invoiceAttachmentTypeId: z.string().nullable(),
attachments: z
.array(AttachmentSchema)
attachments: z.array(AttachmentSchema),
});
export const defaultPurchaseValue = {
title: "",
projectId: "",
@ -130,7 +123,7 @@ export const getStepFields = (stepIndex) => {
"paymentDueDate",
"invoiceAttachmentTypeId",
"description",
"attachments"
"attachments",
],
};
@ -172,12 +165,11 @@ export const DeliveryChallanSchema = z.object({
invoiceAttachmentTypeId: z.string().nullable(),
deliveryChallanDate: z.string().min(1, { message: "Deliver date required" }),
description: z.string().min(1, { message: "Description required" }),
attachment: z.any().refine(
(val) => val && typeof val === "object" && !!val.base64Data,
{
attachment: z
.any()
.refine((val) => val && typeof val === "object" && !!val.base64Data, {
message: "Please upload document",
}
),
}),
});
export const DeliveryChallanDefaultValue = {
@ -187,3 +179,20 @@ export const DeliveryChallanDefaultValue = {
attachment: null,
invoiceAttachmentTypeId: null,
};
export const AddPurchasePayment = z.object({
paymentReceivedDate: z.string().min(1, { message: "Date is required" }),
transactionId: z.string().min(1, "Transaction ID is required"),
amount: z.number().min(1, "Amount must be greater than zero"),
comment: z.string().min(1, { message: "Comment required" }),
paymentAdjustmentHeadId: z
.string()
.min(1, { message: "Payment Type required" }),
});
export const defaultPurchasePayment = {
paymentReceivedDate: null,
transactionId: "",
amount: 0,
comment: "",
paymentAdjustmentHeadId: "",
};

View File

@ -55,6 +55,17 @@ export const usePurchase = (id) => {
});
};
export const usePurchasePaymentHistory = (id) => {
return useQuery({
queryKey: ["purchase_payment_history", id],
queryFn: async () => {
const resp = await PurchaseRepository.GetPaymentHistory(id);
return resp.data;
},
enabled: !!id,
});
};
export const useCreatePurchaseInvoice = (onSuccessCallback) => {
const queryClient = useQueryClient();
@ -120,3 +131,25 @@ export const useAddDeliverChallan = (onSuccessCallback) => {
},
});
};
export const useAddPurchasePayment =(onSuccessCallback)=>{
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (payload) =>
PurchaseRepository.AddPayment(payload),
onSuccess: (data, variables) => {
queryClient.invalidateQueries({ queryKey: ["purchase_payment_history"] });
showToast("Payment added successfully", "success");
if (onSuccessCallback) onSuccessCallback();
},
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to Add payment",
"error"
);
},
});
}

View File

@ -6,6 +6,9 @@ import ManagePurchase from "../../components/purchase/ManagePurchase";
import PurchaseList from "../../components/purchase/PurchaseList";
import ViewPurchase from "../../components/purchase/ViewPurchase";
import DeliveryChallane from "../../components/purchase/DeliveryChallane";
import PurchasePayment from "../../components/purchase/PurchasePayment";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGEPURCHASE_INVOICE } from "../../utils/constants";
export const PurchaseContext = createContext();
export const usePurchaseContext = () => {
@ -27,15 +30,22 @@ const PurchasePage = () => {
isOpen: false,
purchaseId: null,
});
const [addPayment, setAddPayment] = useState({
isOpen: false,
purchaseId: null,
});
const [viewPurchaseState, setViewPurchase] = useState({
isOpen: false,
purchaseId: null,
});
const canCreatePurchase = useHasUserPermission(MANAGEPURCHASE_INVOICE);
const contextValue = {
setViewPurchase,
setManagePurchase,
setChallan,
setAddPayment,
};
return (
<PurchaseContext.Provider value={contextValue}>
@ -63,6 +73,7 @@ const PurchasePage = () => {
</label>
</div>
<di className="col-sm-6 text-end">
{canCreatePurchase && (
<button
className="btn btn-sm btn-primary"
onClick={() =>
@ -74,6 +85,7 @@ const PurchasePage = () => {
>
<i className="bx bx-plus-circle me-2"></i>Add
</button>
)}
</di>
</div>
</div>
@ -115,7 +127,8 @@ const PurchasePage = () => {
)}
{addChallan.isOpen && (
<GlobalModel size="xl"
<GlobalModel
size="xl"
isOpen={addChallan.isOpen}
closeModal={() => setChallan({ isOpen: false, purchaseId: null })}
>
@ -125,6 +138,18 @@ const PurchasePage = () => {
/>
</GlobalModel>
)}
{addPayment.isOpen && (
<GlobalModel
size="xl"
isOpen={addPayment.isOpen}
closeModal={() =>
setAddPayment({ isOpen: false, purchaseId: null })
}
>
<PurchasePayment purchaseId={addPayment.purchaseId} />
</GlobalModel>
)}
</div>
</PurchaseContext.Provider>
);

View File

@ -14,6 +14,10 @@ export const PurchaseRepository = {
api.get(`/api/PurchaseInvoice/delivery-challan/list/${purchaseInvoiceId}`),
addDelievryChallan: (data) =>
api.post(`/api/PurchaseInvoice/delivery-challan/create`, data),
AddPayment: (data) => api.post(`/api/PurchaseInvoice/add/payment`, data),
GetPaymentHistory: (purchaseInvoiceId) =>
api.get(`/api/PurchaseInvoice/payment-history/list/${purchaseInvoiceId}`),
};
// const filterPayload = JSON.stringify({

View File

@ -2,7 +2,6 @@ export const BASE_URL = process.env.VITE_BASE_URL;
// export const BASE_URL = "https://api.marcoaiot.com";
export const THRESH_HOLD = 48; // hours
export const DURATION_TIME = 10; // minutes
export const ITEMS_PER_PAGE = 20;
@ -66,8 +65,6 @@ export const PROCESS_EXPENSE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11";
export const EXPENSE_MANAGE = "bdee29a2-b73b-402d-8dd1-c4b1f81ccbc3";
// --------------------------------Collection----------------------------
export const ADMIN_COLLECTION = "dbf17591-09fe-4c93-9e1a-12db8f5cc5de";
@ -76,6 +73,13 @@ export const CREATE_COLLECTION = "b93141fd-dbd3-4051-8f57-bf25d18e3555";
export const EDIT_COLLECTION = "455187b4-fef1-41f9-b3d0-025d0b6302c3";
export const ADDPAYMENT_COLLECTION = "061d9ccd-85b4-4cb0-be06-2f9f32cebb72";
// --------------------Purchase Invoice--------------------------------
export const VIEWSELF_PURCHASEINVOICE = "91e09825-512a-465e-82ad-fa355b305585";
export const VIEWALL_PURCHASEINVOICE = "d6ae78d3-a941-4cc4-8d0a-d40479be4211";
export const MANAGEPURCHASE_INVOICE = "68ff925d-8ebf-4034-a137-8d3317c56ca1";
export const DELETEPURCHASE_INVOICE = "a4b77638-bf31-42bb-afd4-d5bbd15ccadc";
export const ADD_DELIVERY_CHALLAN = "a4b77638-bf31-42bb-afd4-d5bbd15ccadc";
// ----------------------------Tenant-------------------------
export const SUPPER_TENANT = "d032cb1a-3f30-462c-bef0-7ace73a71c0b";
export const MANAGE_TENANTS = "00e20637-ce8d-4417-bec4-9b31b5e65092";
@ -98,7 +102,7 @@ export const EXPENSE_REJECTEDBY = [
];
export const EXPENSE_DRAFT = "297e0d8f-f668-41b5-bfea-e03b354251c8";
export const EXPENSE_MANAGEMENT = "a4e25142-449b-4334-a6e5-22f70e4732d7";
export const EXPENSE_CREATE = "b8586f67-dc19-49c3-b4af-224149efe1d3"
export const EXPENSE_CREATE = "b8586f67-dc19-49c3-b4af-224149efe1d3";
export const INR_CURRENCY_CODE = "78e96e4a-7ce0-4164-ae3a-c833ad45ec2c";
export const EXPENSE_PROCESSED = "61578360-3a49-4c34-8604-7b35a3787b95";
export const TENANT_STATUS = [
@ -165,7 +169,7 @@ export const EXPENSE_STATUS = {
approve_pending: "4068007f-c92f-4f37-a907-bc15fe57d4d8",
payment_processed: "61578360-3a49-4c34-8604-7b35a3787b95",
payment_done: "b8586f67-dc19-49c3-b4af-224149efe1d3",
}
};
export const UUID_REGEX =
/^\/employee\/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
@ -184,7 +188,7 @@ export const FREQUENCY_FOR_RECURRING = {
2: "Half-Yearly",
3: "Yearly",
4: "Daily",
5: "Weekly"
5: "Weekly",
};
export const PAYEE_RECURRING_EXPENSE = [
@ -206,9 +210,8 @@ export const PAYEE_RECURRING_EXPENSE = [
},
];
//#region Service Project and Jobs
export const STATUS_JOB_CLOSED = "3ddeefb5-ae3c-4e10-a922-35e0a452bb69"
export const STATUS_JOB_CLOSED = "3ddeefb5-ae3c-4e10-a922-35e0a452bb69";
//#endregion