added payment

src/components/purchase/ManagePurchase.jsx

@@ -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} />,
       },
     ],

src/components/purchase/PurchaseList.jsx

@@ -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>

src/components/purchase/PurchasePayment.jsx

@@ -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;

src/components/purchase/PurchaseSchema.jsx

@@ -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
+  contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
-    .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
+  attachments: z.array(AttachmentSchema),
-    .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(
+  attachment: z
-    (val) => val && typeof val === "object" && !!val.base64Data,
+    .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: "",
+};

src/hooks/usePurchase.jsx

@@ -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"
+      );
+    },
+  });
+}

src/pages/purchase/PurchasePage.jsx

@@ -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>
   );

src/repositories/PurchaseRepository.jsx

@@ -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({

src/utils/constants.jsx

@@ -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