From 35b3384dac19a5252b5867a2b3089cbebe5f8e3a Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 1 Dec 2025 11:39:34 +0530
Subject: [PATCH 01/10] At the time of Update in Purchase Automatically hit the
 sumit without click.

---
 src/components/purchase/ManagePurchase.jsx | 87 +++++++++++-----------
 1 file changed, 44 insertions(+), 43 deletions(-)

diff --git a/src/components/purchase/ManagePurchase.jsx b/src/components/purchase/ManagePurchase.jsx
index 262238bf..89c1b1b3 100644
--- a/src/components/purchase/ManagePurchase.jsx
+++ b/src/components/purchase/ManagePurchase.jsx
@@ -127,8 +127,6 @@ const ManagePurchase = ({ onClose, purchaseId }) => {
 
   const onSubmit = useCallback(
     (formData) => {
-      if (activeTab !== 2) return;
-
       if (purchaseId) {
         const payload = generatePatchOps(formData);
         updatePurchase({ purchaseId, payload });
@@ -136,7 +134,7 @@ const ManagePurchase = ({ onClose, purchaseId }) => {
         CreateInvoice(formData);
       }
     },
-    [activeTab, purchaseId, generatePatchOps, updatePurchase, CreateInvoice]
+    [purchaseId, generatePatchOps, updatePurchase, CreateInvoice]
   );
   return (
     <div className="bs-stepper horizontically mt-2 b-secondry shadow-none border-0">
@@ -184,50 +182,53 @@ const ManagePurchase = ({ onClose, purchaseId }) => {
       {/* --- Form Content --- */}
       <div className="bs-stepper-content py-2 px-3">
         <AppFormProvider {...purchaseOrder}>
-          <form
-            onSubmitCapture={(e) => {
-              if (activeTab !== 2) {
-                e.preventDefault();
-                e.stopPropagation();
-              }
-            }}
-            onSubmit={purchaseOrder.handleSubmit(onSubmit)}
-          >
-            {stepsConfig[activeTab].component}
+          {activeTab !== 2 && (
+            <div>
+              {stepsConfig[activeTab].component}
 
-            {/* Buttons */}
-            <div className="d-flex justify-content-between mt-4">
-              <button
-                type="button"
-                className="btn btn-sm btn-outline-secondary"
-                onClick={handlePrev}
-                disabled={activeTab === 0}
-              >
-                Previous
-              </button>
+              <div className="d-flex justify-content-between mt-4">
+                <button
+                  type="button"
+                  className="btn btn-sm btn-outline-secondary"
+                  onClick={handlePrev}
+                  disabled={activeTab === 0}
+                >
+                  Previous
+                </button>
 
-              <div>
-                {activeTab < stepsConfig.length - 1 ? (
-                  <button
-                    type="button"
-                    className="btn btn-sm btn-primary"
-                    onClick={handleNext}
-                    disabled={isPending || isUpdating}
-                  >
-                    Next
-                  </button>
-                ) : (
-                  <button
-                    type={activeTab == 2 ? "submit" : "button"}
-                    className="btn btn-sm btn-primary"
-                    disabled={isPending || isUpdating}
-                  >
-                    {isPending || isUpdating ? "Please Wait" : "Submit"}
-                  </button>
-                )}
+                <button
+                  type="button"
+                  className="btn btn-sm btn-primary"
+                  onClick={handleNext}
+                >
+                  Next
+                </button>
               </div>
             </div>
-          </form>
+          )}
+          {activeTab === 2 && (
+            <form onSubmit={purchaseOrder.handleSubmit(onSubmit)}>
+              {stepsConfig[2].component}
+
+              <div className="d-flex justify-content-between mt-4">
+                <button
+                  type="button"
+                  className="btn btn-sm btn-outline-secondary"
+                  onClick={handlePrev}
+                >
+                  Previous
+                </button>
+
+                <button
+                  type="submit"
+                  className="btn btn-sm btn-primary"
+                  disabled={isPending || isUpdating}
+                >
+                  {isPending || isUpdating ? "Please Wait" : "Submit"}
+                </button>
+              </div>
+            </form>
+          )}
         </AppFormProvider>
       </div>
     </div>

From ef3312523fc484e3b1efc87aa5c2f168d5377608 Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Mon, 1 Dec 2025 12:32:46 +0530
Subject: [PATCH 02/10] added payment

---
 src/components/purchase/ManagePurchase.jsx  |  12 +-
 src/components/purchase/PurchaseList.jsx    |  34 ++-
 src/components/purchase/PurchasePayment.jsx | 298 ++++++++++++++++++++
 src/components/purchase/PurchaseSchema.jsx  |  49 ++--
 src/hooks/usePurchase.jsx                   |  33 +++
 src/pages/purchase/PurchasePage.jsx         |  49 +++-
 src/repositories/PurchaseRepository.jsx     |   4 +
 src/utils/constants.jsx                     |  21 +-
 8 files changed, 446 insertions(+), 54 deletions(-)
 create mode 100644 src/components/purchase/PurchasePayment.jsx

diff --git a/src/components/purchase/ManagePurchase.jsx b/src/components/purchase/ManagePurchase.jsx
index 262238bf..b48a8056 100644
--- a/src/components/purchase/ManagePurchase.jsx
+++ b/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} />,
       },
     ],
diff --git a/src/components/purchase/PurchaseList.jsx b/src/components/purchase/PurchaseList.jsx
index 39ed3352..24decac7 100644
--- a/src/components/purchase/PurchaseList.jsx
+++ b/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">
@@ -47,7 +48,7 @@ const PurchaseList = ({ searchString }) => {
             {/* LOADING */}
             {isLoading && (
               <tr>
-                <td  colSpan={visibleColumns.length + 1} className="border-0">
+                <td colSpan={visibleColumns.length + 1} className="border-0">
                   <div className="py-6 py-12">
                     <SpinnerLoader />
                   </div>
@@ -73,7 +74,7 @@ const PurchaseList = ({ searchString }) => {
                       {col.render ? col.render(item) : item[col.key] || "NA"}
                     </td>
                   ))}
-                  <td >
+                  <td>
                     <div className="dropdown z-2">
                       <button
                         type="button"
@@ -119,7 +120,8 @@ const PurchaseList = ({ searchString }) => {
                             <span className="align-left">Edit</span>
                           </a>
                         </li>
-                        <li>
+                        {canAddChallan && (
+                          <li>
                           <a
                             className="dropdown-item cursor-pointer"
                             onClick={() =>
@@ -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>
diff --git a/src/components/purchase/PurchasePayment.jsx b/src/components/purchase/PurchasePayment.jsx
new file mode 100644
index 00000000..a1e440a4
--- /dev/null
+++ b/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;
diff --git a/src/components/purchase/PurchaseSchema.jsx b/src/components/purchase/PurchaseSchema.jsx
index c10a375b..824b2a28 100644
--- a/src/components/purchase/PurchaseSchema.jsx
+++ b/src/components/purchase/PurchaseSchema.jsx
@@ -13,20 +13,17 @@ 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), {
-      message: "Only PDF, PNG, JPG, or JPEG files are allowed",
-    }),
+  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, {
     message: "File size must be less than or equal to 5MB",
   }),
   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" }),
@@ -57,14 +54,10 @@ export const PurchaseSchema = z.object({
   paymentDueDate: z.coerce.date().nullable(),
   transportCharges: z.number().nullable(),
   description: z.string().min(1, { message: "Description is required" }),
-  invoiceAttachmentTypeId:z.string().nullable(),
-  attachments: z
-    .array(AttachmentSchema)
-  
-
+  invoiceAttachmentTypeId: z.string().nullable(),
+  attachments: z.array(AttachmentSchema),
 });
 
-
 export const defaultPurchaseValue = {
   title: "",
   projectId: "",
@@ -94,7 +87,7 @@ export const defaultPurchaseValue = {
   paymentDueDate: null,
   transportCharges: null,
   description: "",
-  invoiceAttachmentTypeId:null,
+  invoiceAttachmentTypeId: null,
   attachments: [],
 };
 
@@ -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: "",
+};
diff --git a/src/hooks/usePurchase.jsx b/src/hooks/usePurchase.jsx
index 7dcbde45..9bb9641d 100644
--- a/src/hooks/usePurchase.jsx
+++ b/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"
+      );
+    },
+  });
+}
\ No newline at end of file
diff --git a/src/pages/purchase/PurchasePage.jsx b/src/pages/purchase/PurchasePage.jsx
index a2a0e37c..d7dfbab8 100644
--- a/src/pages/purchase/PurchasePage.jsx
+++ b/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,17 +73,19 @@ const PurchasePage = () => {
               </label>
             </div>
             <di className="col-sm-6 text-end">
-              <button
-                className="btn btn-sm btn-primary"
-                onClick={() =>
-                  setManagePurchase({
-                    isOpen: true,
-                    purchaseId: null,
-                  })
-                }
-              >
-                <i className="bx bx-plus-circle me-2"></i>Add
-              </button>
+              {canCreatePurchase && (
+                <button
+                  className="btn btn-sm btn-primary"
+                  onClick={() =>
+                    setManagePurchase({
+                      isOpen: true,
+                      purchaseId: null,
+                    })
+                  }
+                >
+                  <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>
   );
diff --git a/src/repositories/PurchaseRepository.jsx b/src/repositories/PurchaseRepository.jsx
index e95f9a1d..6e793138 100644
--- a/src/repositories/PurchaseRepository.jsx
+++ b/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({
diff --git a/src/utils/constants.jsx b/src/utils/constants.jsx
index 1ca271ec..b3231405 100644
--- a/src/utils/constants.jsx
+++ b/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
 
@@ -241,4 +244,4 @@ export const JOBS_STATUS_IDS = [
     id: "75a0c8b8-9c6a-41af-80bf-b35bab722eb2",
     label: "On Hold",
   },
-];
\ No newline at end of file
+];

From 311c74587ad01a0184d01dd1119ea05bc4e87beb Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 1 Dec 2025 15:03:13 +0530
Subject: [PATCH 03/10] Adding Delete and Restore functionality in Purchase
 Invoice

---
 src/components/purchase/PurchaseList.jsx | 286 +++++++++++++----------
 src/hooks/usePurchase.jsx                |  27 +++
 src/pages/purchase/PurchasePage.jsx      |  19 +-
 src/repositories/PurchaseRepository.jsx  |   3 +
 4 files changed, 216 insertions(+), 119 deletions(-)

diff --git a/src/components/purchase/PurchaseList.jsx b/src/components/purchase/PurchaseList.jsx
index 39ed3352..f5ac3c0e 100644
--- a/src/components/purchase/PurchaseList.jsx
+++ b/src/components/purchase/PurchaseList.jsx
@@ -1,21 +1,28 @@
 import React, { useState } from "react";
-import { usePurchasesList } from "../../hooks/usePurchase";
+import { useDeletePurchaseInvoice, usePurchasesList } from "../../hooks/usePurchase";
 import { 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 ConfirmModal from "../common/ConfirmModal";
 
-const PurchaseList = ({ searchString }) => {
+const PurchaseList = ({ searchString, isActive }) => {
   const { setViewPurchase, setManagePurchase, setChallan } =
     usePurchaseContext();
   const [currentPage, setCurrentPage] = useState(1);
+  const { mutate: DeletePurchaseInvoice, isPending } = useDeletePurchaseInvoice();
+  const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [deletingId, setDeletingId] = useState(null);
+
+
   const debounceSearch = useDebounce(searchString, 300);
   const { data, isLoading } = usePurchasesList(
     ITEMS_PER_PAGE,
     currentPage,
-    true,
+    // true,
+    !isActive,
     {},
     debounceSearch
   );
@@ -28,129 +35,172 @@ const PurchaseList = ({ searchString }) => {
 
   const visibleColumns = PurchaseColumn.filter((col) => !col.hidden);
 
+  const handleDeleteRestore = (id) => {
+    DeletePurchaseInvoice(
+      { id, isActive: isActive }, // delete if active, restore if deleted
+      {
+        onSettled: () => {
+          setDeletingId(null);
+          setIsDeleteModalOpen(false);
+        },
+      }
+    );
+  };
+
+
   return (
-    <div className="card mt-2 page-min-h px-sm-4">
-      <div className="table-responsive px-2">
-        <table className="datatables-users table border-top text-nowrap">
-          <thead>
-            <tr>
-              {visibleColumns.map((col) => (
-                <th key={col.key} colSpan={col.colSpan || 1}>
-                  <div className={col.className || ""}>{col.label}</div>
-                </th>
-              ))}
-              <th>Action</th>
-            </tr>
-          </thead>
-
-          <tbody>
-            {/* LOADING */}
-            {isLoading && (
+    <>
+      {IsDeleteModalOpen && (
+        <ConfirmModal
+          isOpen={IsDeleteModalOpen}
+          type={!isActive ? "delete" : "undo"}
+          header={!isActive ? "Delete Invoice" : "Restore Invoice"}
+          message={!isActive ? "Are you sure you want to delete?" : "Are you sure you want to restore?"}
+          onSubmit={handleDeleteRestore}
+          onClose={() => setIsDeleteModalOpen(false)}
+          loading={isPending}
+          paramData={deletingId}
+        />
+      )}
+      <div className="card mt-2 page-min-h px-sm-4">
+        <div className="table-responsive px-2">
+          <table className="datatables-users table border-top text-nowrap">
+            <thead>
               <tr>
-                <td  colSpan={visibleColumns.length + 1} className="border-0">
-                  <div className="py-6 py-12">
-                    <SpinnerLoader />
-                  </div>
-                </td>
+                {visibleColumns.map((col) => (
+                  <th key={col.key} colSpan={col.colSpan || 1}>
+                    <div className={col.className || ""}>{col.label}</div>
+                  </th>
+                ))}
+                <th>Action</th>
               </tr>
-            )}
-            {!isLoading && data?.data?.length === 0 && (
-              <tr>
-                <td
-                  colSpan={visibleColumns.length}
-                  className="text-center py-4 border-0"
-                >
-                  No Data Found
-                </td>
-              </tr>
-            )}
+            </thead>
 
-            {!isLoading &&
-              data?.data?.map((item, index) => (
-                <tr key={item?.id || index}>
-                  {visibleColumns.map((col) => (
-                    <td key={col.key} className={col.className || ""}>
-                      {col.render ? col.render(item) : item[col.key] || "NA"}
-                    </td>
-                  ))}
-                  <td >
-                    <div className="dropdown z-2">
-                      <button
-                        type="button"
-                        className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
-                        data-bs-toggle="dropdown"
-                        aria-expanded="false"
-                      >
-                        <i
-                          className="bx bx-dots-vertical-rounded bx-sm text-muted"
-                          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">
-                        <li>
-                          <a
-                            className="dropdown-item cursor-pointer"
-                            onClick={() =>
-                              setViewPurchase({
-                                isOpen: true,
-                                purchaseId: item.id,
-                              })
-                            }
-                          >
-                            <i className="bx bx-show me-2"></i>
-                            <span className="align-left">view</span>
-                          </a>
-                        </li>
-                        <li>
-                          <a
-                            className="dropdown-item cursor-pointer"
-                            onClick={() =>
-                              setManagePurchase({
-                                isOpen: true,
-                                purchaseId: item.id,
-                              })
-                            }
-                          >
-                            <i className="bx bx-edit me-2"></i>
-                            <span className="align-left">Edit</span>
-                          </a>
-                        </li>
-                        <li>
-                          <a
-                            className="dropdown-item cursor-pointer"
-                            onClick={() =>
-                              setChallan({
-                                isOpen: true,
-                                purchaseId: item.id,
-                              })
-                            }
-                          >
-                            <i className="bx bx-file bx-plus me-2"></i>
-
-                            <span className="align-left">Add Delivery Challan</span>
-                          </a>
-                        </li>
-                      </ul>
+            <tbody>
+              {/* LOADING */}
+              {isLoading && (
+                <tr>
+                  <td
+                    colSpan={visibleColumns.length + 1}
+                    className="border-0"
+                    style={{ height: "300px", verticalAlign: "middle" }}
+                  >
+                    <div className="d-flex justify-content-center align-items-center w-100 h-100">
+                      <SpinnerLoader />
                     </div>
                   </td>
                 </tr>
-              ))}
-          </tbody>
-        </table>
-      </div>
+              )}
 
-      {data?.data?.length > 0 && (
-        <Pagination
-          currentPage={currentPage}
-          totalPages={data.totalPages}
-          onPageChange={paginate}
-        />
-      )}
-    </div>
+              {!isLoading && data?.data?.length === 0 && (
+                <tr>
+                  <td
+                    colSpan={visibleColumns.length + 1}
+                    className="text-center border-0"
+                    style={{ height: "400px", verticalAlign: "middle" }}
+                  >
+                    No Data Found
+                  </td>
+                </tr>
+              )}
+
+
+              {!isLoading &&
+                data?.data?.map((item, index) => (
+                  <tr key={item?.id || index}>
+                    {visibleColumns.map((col) => (
+                      <td key={col.key} className={col.className || ""}>
+                        {col.render ? col.render(item) : item[col.key] || "NA"}
+                      </td>
+                    ))}
+                    <td >
+                      <div className="dropdown z-2">
+                        <button
+                          type="button"
+                          className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+                          data-bs-toggle="dropdown"
+                          aria-expanded="false"
+                        >
+                          <i
+                            className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                            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">
+                          <li>
+                            <a
+                              className="dropdown-item cursor-pointer"
+                              onClick={() => setViewPurchase({ isOpen: true, purchaseId: item.id })}
+                            >
+                              <i className="bx bx-show me-2"></i> View
+                            </a>
+                          </li>
+                          {!isActive ? (
+                            <>
+                              <li>
+                                <a
+                                  className="dropdown-item cursor-pointer"
+                                  onClick={() => setManagePurchase({ isOpen: true, purchaseId: item.id })}
+                                >
+                                  <i className="bx bx-edit me-2"></i> Edit
+                                </a>
+                              </li>
+                              <li>
+                                <a
+                                  className="dropdown-item cursor-pointer"
+                                  onClick={() => {
+                                    setDeletingId(item.id);
+                                    setIsDeleteModalOpen(true);
+                                  }}
+                                >
+                                  <i className="bx bx-trash me-2"></i> Delete
+                                </a>
+                              </li>
+                              <li>
+                                <a
+                                  className="dropdown-item cursor-pointer"
+                                  onClick={() => setChallan({ isOpen: true, purchaseId: item.id })}
+                                >
+                                  <i className="bx bx-file bx-plus me-2"></i> Add Delivery Challan
+                                </a>
+                              </li>
+                            </>
+                          ) : (
+                            <li>
+                              <a
+                                className="dropdown-item cursor-pointer"
+                                onClick={() => {
+                                  setDeletingId(item.id);
+                                  setIsDeleteModalOpen(true);
+                                }}
+                              >
+                                <i className="bx bx-undo me-2"></i> Restore
+                              </a>
+                            </li>
+                          )}
+
+                        </ul>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        </div>
+
+        {data?.data?.length > 0 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={data.totalPages}
+            onPageChange={paginate}
+          />
+        )}
+      </div>
+    </>
   );
 };
 
diff --git a/src/hooks/usePurchase.jsx b/src/hooks/usePurchase.jsx
index 7dcbde45..405700d1 100644
--- a/src/hooks/usePurchase.jsx
+++ b/src/hooks/usePurchase.jsx
@@ -120,3 +120,30 @@ export const useAddDeliverChallan = (onSuccessCallback) => {
     },
   });
 };
+
+
+export const useDeletePurchaseInvoice = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id, isActive }) =>
+      await PurchaseRepository.deletePurchase(id, isActive),
+
+    onSuccess: (_, variable) => {
+      queryClient.invalidateQueries({ queryKey: ["purchase_list"] });
+      showToast(
+        `Purchase Invoice ${variable.isActive ? "restored" : "deleted"} successfully`,
+        "success"
+      );
+    },
+
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to delete branch",
+        "error"
+      );
+    },
+  });
+};
diff --git a/src/pages/purchase/PurchasePage.jsx b/src/pages/purchase/PurchasePage.jsx
index a2a0e37c..785f434e 100644
--- a/src/pages/purchase/PurchasePage.jsx
+++ b/src/pages/purchase/PurchasePage.jsx
@@ -19,6 +19,8 @@ export const usePurchaseContext = () => {
 };
 const PurchasePage = () => {
   const [searchText, setSearchText] = useState("");
+  const [showDelete, setShowDelete] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
   const [addChallan, setChallan] = useState({
     isOpen: false,
     purchaseId: null,
@@ -61,6 +63,21 @@ const PurchasePage = () => {
                   aria-controls="DataTables_Table_0"
                 />
               </label>
+              <div className="form-check form-switch d-inline-flex align-items-center ms-3">
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  id="inactiveEmployeesCheckbox"
+                  checked={showInactive}
+                  onChange={() => setShowInactive(!showInactive)}
+                />
+                <label
+                  htmlFor="inactiveEmployeesCheckbox"
+                  className="ms-2 text-xs"
+                >
+                  {!showInactive ? "Show Deleted" : "Hide Deleted"}
+                </label>
+              </div>
             </div>
             <di className="col-sm-6 text-end">
               <button
@@ -78,7 +95,7 @@ const PurchasePage = () => {
           </div>
         </div>
 
-        <PurchaseList searchString={searchText} />
+        <PurchaseList searchString={searchText} isActive={showInactive} />
         {managePurchase.isOpen && (
           <GlobalModel
             isOpen={managePurchase.isOpen}
diff --git a/src/repositories/PurchaseRepository.jsx b/src/repositories/PurchaseRepository.jsx
index e95f9a1d..69e8087b 100644
--- a/src/repositories/PurchaseRepository.jsx
+++ b/src/repositories/PurchaseRepository.jsx
@@ -14,6 +14,9 @@ export const PurchaseRepository = {
     api.get(`/api/PurchaseInvoice/delivery-challan/list/${purchaseInvoiceId}`),
   addDelievryChallan: (data) =>
     api.post(`/api/PurchaseInvoice/delivery-challan/create`, data),
+
+  deletePurchase: (id, isActive = false) =>
+    api.delete(`/api/PurchaseInvoice/delete/${id}?isActive=${isActive}`),
 };
 
 //  const filterPayload = JSON.stringify({

From 4b0ac5b6db8fbebc421143369f6a2265c051a400 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 1 Dec 2025 15:15:05 +0530
Subject: [PATCH 04/10] Correction in Purchase List table-responsive.

---
 src/components/purchase/PurchaseList.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/purchase/PurchaseList.jsx b/src/components/purchase/PurchaseList.jsx
index f5ac3c0e..e37ce257 100644
--- a/src/components/purchase/PurchaseList.jsx
+++ b/src/components/purchase/PurchaseList.jsx
@@ -62,8 +62,8 @@ const PurchaseList = ({ searchString, isActive }) => {
           paramData={deletingId}
         />
       )}
-      <div className="card mt-2 page-min-h px-sm-4">
-        <div className="table-responsive px-2">
+      <div className="card mt-2 page-min-h table-responsive  px-sm-4">
+        <div className="px-2">
           <table className="datatables-users table border-top text-nowrap">
             <thead>
               <tr>

From aa2e732ff40b72f9575454836fe19d6af177dacf Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Tue, 2 Dec 2025 10:58:38 +0530
Subject: [PATCH 05/10] added  merged payment and delete

---
 src/components/purchase/PurchaseActions.jsx | 102 ++++++++++++++++++++
 src/components/purchase/PurchaseList.jsx    | 101 ++++++++-----------
 src/components/purchase/PurchasePayment.jsx |   2 +-
 src/hooks/usePurchase.jsx                   |  21 ++++
 src/pages/purchase/PurchasePage.jsx         |   9 +-
 src/repositories/PurchaseRepository.jsx     |   3 +
 6 files changed, 174 insertions(+), 64 deletions(-)
 create mode 100644 src/components/purchase/PurchaseActions.jsx

diff --git a/src/components/purchase/PurchaseActions.jsx b/src/components/purchase/PurchaseActions.jsx
new file mode 100644
index 00000000..6cb82e66
--- /dev/null
+++ b/src/components/purchase/PurchaseActions.jsx
@@ -0,0 +1,102 @@
+export  const getPurchaseActions = ({
+  item,
+  isActive,
+  canDelete,
+  canAddChallan,
+  setViewPurchase,
+  setManagePurchase,
+  setDeletingId,
+  setIsDeleteModalOpen,
+  setChallan,
+  setAddPayment,
+}) => {
+  const actions = [];
+
+  // VIEW
+  actions.push({
+    key: "view",
+    label: "View",
+    icon: "bx bx-show",
+    show: true,
+    onClick: () =>
+      setViewPurchase({
+        isOpen: true,
+        purchaseId: item.id,
+      }),
+  });
+
+  if (!isActive) {
+    // EDIT
+    actions.push({
+      key: "edit",
+      label: "Edit",
+      icon: "bx bx-edit",
+      show: true,
+      onClick: () =>
+        setManagePurchase({
+          isOpen: true,
+          purchaseId: item.id,
+        }),
+    });
+
+    // DELETE
+    actions.push({
+      key: "delete",
+      label: "Delete",
+      icon: "bx bx-trash",
+      show: canDelete,
+      onClick: () => {
+        setDeletingId(item.id);
+        setIsDeleteModalOpen(true);
+      },
+    });
+
+    // ADD CHALLAN
+    actions.push({
+      key: "challan",
+      label: "Add Delivery Challan",
+      icon: "bx bx-file bx-plus",
+      show: canAddChallan,
+      onClick: () =>
+        setChallan({
+          isOpen: true,
+          purchaseId: item.id,
+        }),
+    });
+
+    // ADD PAYMENT
+    actions.push({
+      key: "payment",
+      label: "Add Payment",
+      icon: "bx bx-wallet",
+      show: true,
+      onClick: () =>
+        setAddPayment({
+          isOpen: true,
+          purchaseId: item.id,
+        }),
+    });
+  } else {
+    // RESTORE
+    actions.push({
+      key: "restore",
+      label: "Restore",
+      icon: "bx bx-undo",
+      show: true,
+      onClick: () => {
+        setDeletingId(item.id);
+        setIsDeleteModalOpen(true);
+      },
+    });
+  }
+
+  return actions.filter((a) => a.show);
+};
+
+export const DropdownItem = ({ icon, label, onClick }) => (
+  <li>
+    <a className="dropdown-item cursor-pointer" onClick={onClick}>
+      <i className={`${icon} me-2`}></i> {label}
+    </a>
+  </li>
+);
diff --git a/src/components/purchase/PurchaseList.jsx b/src/components/purchase/PurchaseList.jsx
index e37ce257..5d7715b1 100644
--- a/src/components/purchase/PurchaseList.jsx
+++ b/src/components/purchase/PurchaseList.jsx
@@ -1,21 +1,33 @@
 import React, { useState } from "react";
-import { useDeletePurchaseInvoice, usePurchasesList } from "../../hooks/usePurchase";
-import { ITEMS_PER_PAGE } from "../../utils/constants";
+import {
+  useDeletePurchaseInvoice,
+  usePurchasesList,
+} from "../../hooks/usePurchase";
+import {
+  ADD_DELIVERY_CHALLAN,
+  DELETEPURCHASE_INVOICE,
+  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 ConfirmModal from "../common/ConfirmModal";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { DropdownItem, getPurchaseActions } from "./PurchaseActions";
 
 const PurchaseList = ({ searchString, isActive }) => {
-  const { setViewPurchase, setManagePurchase, setChallan } =
+  const { setViewPurchase, setManagePurchase, setChallan, setAddPayment } =
     usePurchaseContext();
   const [currentPage, setCurrentPage] = useState(1);
-  const { mutate: DeletePurchaseInvoice, isPending } = useDeletePurchaseInvoice();
+  const { mutate: DeletePurchaseInvoice, isPending } =
+    useDeletePurchaseInvoice();
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [deletingId, setDeletingId] = useState(null);
 
+  const canAddChallan = useHasUserPermission(ADD_DELIVERY_CHALLAN);
+  const canDelete = useHasUserPermission(DELETEPURCHASE_INVOICE);
 
   const debounceSearch = useDebounce(searchString, 300);
   const { data, isLoading } = usePurchasesList(
@@ -47,7 +59,6 @@ const PurchaseList = ({ searchString, isActive }) => {
     );
   };
 
-
   return (
     <>
       {IsDeleteModalOpen && (
@@ -55,7 +66,11 @@ const PurchaseList = ({ searchString, isActive }) => {
           isOpen={IsDeleteModalOpen}
           type={!isActive ? "delete" : "undo"}
           header={!isActive ? "Delete Invoice" : "Restore Invoice"}
-          message={!isActive ? "Are you sure you want to delete?" : "Are you sure you want to restore?"}
+          message={
+            !isActive
+              ? "Are you sure you want to delete?"
+              : "Are you sure you want to restore?"
+          }
           onSubmit={handleDeleteRestore}
           onClose={() => setIsDeleteModalOpen(false)}
           loading={isPending}
@@ -104,7 +119,6 @@ const PurchaseList = ({ searchString, isActive }) => {
                 </tr>
               )}
 
-
               {!isLoading &&
                 data?.data?.map((item, index) => (
                   <tr key={item?.id || index}>
@@ -113,7 +127,7 @@ const PurchaseList = ({ searchString, isActive }) => {
                         {col.render ? col.render(item) : item[col.key] || "NA"}
                       </td>
                     ))}
-                    <td >
+                    <td>
                       <div className="dropdown z-2">
                         <button
                           type="button"
@@ -131,58 +145,25 @@ const PurchaseList = ({ searchString, isActive }) => {
                           ></i>
                         </button>
                         <ul className="dropdown-menu dropdown-menu-end">
-                          <li>
-                            <a
-                              className="dropdown-item cursor-pointer"
-                              onClick={() => setViewPurchase({ isOpen: true, purchaseId: item.id })}
-                            >
-                              <i className="bx bx-show me-2"></i> View
-                            </a>
-                          </li>
-                          {!isActive ? (
-                            <>
-                              <li>
-                                <a
-                                  className="dropdown-item cursor-pointer"
-                                  onClick={() => setManagePurchase({ isOpen: true, purchaseId: item.id })}
-                                >
-                                  <i className="bx bx-edit me-2"></i> Edit
-                                </a>
-                              </li>
-                              <li>
-                                <a
-                                  className="dropdown-item cursor-pointer"
-                                  onClick={() => {
-                                    setDeletingId(item.id);
-                                    setIsDeleteModalOpen(true);
-                                  }}
-                                >
-                                  <i className="bx bx-trash me-2"></i> Delete
-                                </a>
-                              </li>
-                              <li>
-                                <a
-                                  className="dropdown-item cursor-pointer"
-                                  onClick={() => setChallan({ isOpen: true, purchaseId: item.id })}
-                                >
-                                  <i className="bx bx-file bx-plus me-2"></i> Add Delivery Challan
-                                </a>
-                              </li>
-                            </>
-                          ) : (
-                            <li>
-                              <a
-                                className="dropdown-item cursor-pointer"
-                                onClick={() => {
-                                  setDeletingId(item.id);
-                                  setIsDeleteModalOpen(true);
-                                }}
-                              >
-                                <i className="bx bx-undo me-2"></i> Restore
-                              </a>
-                            </li>
-                          )}
-
+                          {getPurchaseActions({
+                            item,
+                            isActive,
+                            canDelete,
+                            canAddChallan,
+                            setViewPurchase,
+                            setManagePurchase,
+                            setDeletingId,
+                            setIsDeleteModalOpen,
+                            setChallan,
+                            setAddPayment,
+                          }).map((action) => (
+                            <DropdownItem
+                              key={action.key}
+                              icon={action.icon}
+                              label={action.label}
+                              onClick={action.onClick}
+                            />
+                          ))}
                         </ul>
                       </div>
                     </td>
diff --git a/src/components/purchase/PurchasePayment.jsx b/src/components/purchase/PurchasePayment.jsx
index a1e440a4..530110a0 100644
--- a/src/components/purchase/PurchasePayment.jsx
+++ b/src/components/purchase/PurchasePayment.jsx
@@ -20,7 +20,7 @@ import { SpinnerLoader } from "../common/Loader";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import Avatar from "../common/Avatar";
 
-const PurchasePayment = ({ purchaseId }) => {
+const PurchasePayment = ({onClose, purchaseId }) => {
   const {
     data: Purchase,
     isLoading: isPurchaseLoading,
diff --git a/src/hooks/usePurchase.jsx b/src/hooks/usePurchase.jsx
index b328f9f3..97d85953 100644
--- a/src/hooks/usePurchase.jsx
+++ b/src/hooks/usePurchase.jsx
@@ -131,6 +131,27 @@ 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"
+      );
+    },
+  });
+}
 
 
 export const useDeletePurchaseInvoice = () => {
diff --git a/src/pages/purchase/PurchasePage.jsx b/src/pages/purchase/PurchasePage.jsx
index d3991ed3..570a5945 100644
--- a/src/pages/purchase/PurchasePage.jsx
+++ b/src/pages/purchase/PurchasePage.jsx
@@ -89,7 +89,7 @@ const PurchasePage = () => {
                 </label>
               </div>
             </div>
-            <di className="col-sm-6 text-end">
+            <div className="col-sm-6 text-end">
               {canCreatePurchase && (
                 <button
                   className="btn btn-sm btn-primary"
@@ -103,7 +103,7 @@ const PurchasePage = () => {
                   <i className="bx bx-plus-circle me-2"></i>Add
                 </button>
               )}
-            </di>
+            </div>
           </div>
         </div>
 
@@ -164,7 +164,10 @@ const PurchasePage = () => {
               setAddPayment({ isOpen: false, purchaseId: null })
             }
           >
-            <PurchasePayment purchaseId={addPayment.purchaseId} />
+            <PurchasePayment
+              onClose={() => setAddPayment({ isOpen: false, purchaseId: null })}
+              purchaseId={addPayment.purchaseId}
+            />
           </GlobalModel>
         )}
       </div>
diff --git a/src/repositories/PurchaseRepository.jsx b/src/repositories/PurchaseRepository.jsx
index 69e8087b..c949a661 100644
--- a/src/repositories/PurchaseRepository.jsx
+++ b/src/repositories/PurchaseRepository.jsx
@@ -15,6 +15,9 @@ export const PurchaseRepository = {
   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}`),
   deletePurchase: (id, isActive = false) =>
     api.delete(`/api/PurchaseInvoice/delete/${id}?isActive=${isActive}`),
 };

From 3bfe108dabe1e5839d8fdd4718b3536d72b856d2 Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Tue, 2 Dec 2025 17:23:03 +0530
Subject: [PATCH 06/10] removed all required condition

---
 .../purchase/PurchasePartyDetails.jsx         | 15 ++---
 .../purchase/PurchasePaymentDetails.jsx       | 59 ++++++++-----------
 src/components/purchase/PurchaseSchema.jsx    | 25 ++++++--
 .../purchase/PurchaseTransportDetails.jsx     |  2 +-
 4 files changed, 53 insertions(+), 48 deletions(-)

diff --git a/src/components/purchase/PurchasePartyDetails.jsx b/src/components/purchase/PurchasePartyDetails.jsx
index fd776961..13f100c8 100644
--- a/src/components/purchase/PurchasePartyDetails.jsx
+++ b/src/components/purchase/PurchasePartyDetails.jsx
@@ -73,15 +73,16 @@ const PurchasePartyDetails = () => {
           control={control}
           render={({ field }) => (
             <SelectFieldSearch
-              {...field}
               label="Organization"
               placeholder="Select Organization"
-              required
+                 required
+              value={field.value}
+              onChange={field.onChange}
               valueKey="id"
               labelKey="name"
               useFetchHook={useGlobaleOrganizations}
               hookParams={[ITEMS_PER_PAGE, 1]}
-              error={errors?.organizationId?.message}
+              errors={errors?.organizationId}
             />
           )}
         />
@@ -109,7 +110,7 @@ const PurchasePartyDetails = () => {
       </div>
 
       <div className="col-12 col-md-6 my-0">
-        <Label htmlFor="billingAddress">Billing Address</Label>
+        <Label required htmlFor="billingAddress">Billing Address</Label>
 
         <textarea
           id="billingAddress"
@@ -124,7 +125,7 @@ const PurchasePartyDetails = () => {
       </div>
 
       <div className="col-12 col-md-6 my-0 mb-1">
-        <Label htmlFor="shippingAddress">Shipping Address</Label>
+        <Label required htmlFor="shippingAddress">Shipping Address</Label>
 
         <textarea
           id="shippingAddress"
@@ -140,7 +141,7 @@ const PurchasePartyDetails = () => {
 
       {/* Purchase Order Number */}
       <div className="col-12 col-md-6 ">
-        <Label htmlFor="purchaseOrderNumber" required>
+        <Label htmlFor="purchaseOrderNumber" >
           Purchase Order Number
         </Label>
 
@@ -160,7 +161,7 @@ const PurchasePartyDetails = () => {
 
       {/* Purchase Order Date */}
       <div className="col-12 col-md-6 mb-1">
-        <Label htmlFor="purchaseOrderDate" required>
+        <Label htmlFor="purchaseOrderDate" >
           Purchase Order Date
         </Label>
 
diff --git a/src/components/purchase/PurchasePaymentDetails.jsx b/src/components/purchase/PurchasePaymentDetails.jsx
index 79b0ddbd..777f3a9b 100644
--- a/src/components/purchase/PurchasePaymentDetails.jsx
+++ b/src/components/purchase/PurchasePaymentDetails.jsx
@@ -26,15 +26,16 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
 
   const baseAmount = watch("baseAmount");
   const taxAmount = watch("taxAmount");
-
+  const trCharge = watch("transportCharges");
   useEffect(() => {
     const base = parseFloat(baseAmount) || 0;
     const tax = parseFloat(taxAmount) || 0;
+    const transportCharges = parseFloat(trCharge) || 0;
 
-    if (base || tax) {
-      setValue("totalAmount", (base + tax).toFixed(2));
+    if (base || tax || transportCharges) {
+      setValue("totalAmount", (base + tax + transportCharges));
     }
-  }, [baseAmount, taxAmount, setValue]);
+  }, [baseAmount, taxAmount, trCharge, setValue]);
   const invoiceAttachmentType = watch("invoiceAttachmentTypeId");
   const files = watch("attachments");
   const toBase64 = (file) =>
@@ -108,9 +109,7 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
   return (
     <div className="row g-1 text-start">
       <div className="col-12 col-md-4">
-        <Label htmlFor="baseAmount" required>
-          Base Amount
-        </Label>
+        <Label htmlFor="baseAmount">Base Amount</Label>
 
         <input
           id="baseAmount"
@@ -127,9 +126,7 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
       </div>
 
       <div className="col-12 col-md-4">
-        <Label htmlFor="taxAmount" required>
-          Tax Amount
-        </Label>
+        <Label htmlFor="taxAmount">Tax Amount</Label>
 
         <input
           id="taxAmount"
@@ -144,28 +141,7 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
           </div>
         )}
       </div>
-
       <div className="col-12 col-md-4">
-        <Label htmlFor="totalAmount" required>
-          Total Amount
-        </Label>
-
-        <input
-          id="totalAmount"
-          type="number"
-          className="form-control form-control-xs"
-          {...register("totalAmount", { valueAsNumber: true })}
-          readOnly
-        />
-
-        {errors?.totalAmount && (
-          <div className="small danger-text mt-1">
-            {errors.totalAmount.message}
-          </div>
-        )}
-      </div>
-
-      <div className="col-12 col-md-6">
         <Label htmlFor="transportCharges">Transport Charges</Label>
 
         <input
@@ -182,6 +158,23 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
         )}
       </div>
 
+      <div className="col-12 col-md-6">
+        <Label htmlFor="totalAmount">Total Amount</Label>
+
+        <input
+          id="totalAmount"
+          type="number"
+          className="form-control form-control-xs"
+          {...register("totalAmount", { valueAsNumber: true })}
+        />
+
+        {errors?.totalAmount && (
+          <div className="small danger-text mt-1">
+            {errors.totalAmount.message}
+          </div>
+        )}
+      </div>
+
       <div className="col-12 col-md-6">
         <Label htmlFor="paymentDueDate">Payment Due Date</Label>
 
@@ -200,9 +193,7 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
       </div>
 
       <div className="col-12 mb-2">
-        <Label htmlFor="description" required>
-          Description
-        </Label>
+        <Label htmlFor="description">Description</Label>
 
         <textarea
           id="description"
diff --git a/src/components/purchase/PurchaseSchema.jsx b/src/components/purchase/PurchaseSchema.jsx
index 824b2a28..adb9258a 100644
--- a/src/components/purchase/PurchaseSchema.jsx
+++ b/src/components/purchase/PurchaseSchema.jsx
@@ -48,12 +48,25 @@ export const PurchaseSchema = z.object({
   acknowledgmentDate: z.coerce.date().nullable(),
   acknowledgmentNumber: z.string().nullable(),
 
-  baseAmount: z.number().min(1, { message: "Base amount is required" }),
-  taxAmount: z.number().min(1, { message: "Tax amount is required" }),
-  totalAmount: z.number().min(1, { message: "Total amount is required" }),
+  baseAmount: z
+    .number()
+    .or(z.nan()) // allow NaN
+    .transform((val) => (Number.isNaN(val) ? null : val)),
+
+  taxAmount: z
+    .number()
+    .or(z.nan()) // allow NaN
+    .transform((val) => (Number.isNaN(val) ? null : val)),
+  totalAmount: z
+    .number()
+    .or(z.nan()) // allow NaN
+    .transform((val) => (Number.isNaN(val) ? null : val)),
   paymentDueDate: z.coerce.date().nullable(),
-  transportCharges: z.number().nullable(),
-  description: z.string().min(1, { message: "Description is required" }),
+  transportCharges: z
+    .number()
+    .or(z.nan()) // allow NaN
+    .transform((val) => (Number.isNaN(val) ? null : val)),
+  description: z.string(),
   invoiceAttachmentTypeId: z.string().nullable(),
   attachments: z.array(AttachmentSchema),
 });
@@ -85,7 +98,7 @@ export const defaultPurchaseValue = {
   taxAmount: 0,
   totalAmount: 0,
   paymentDueDate: null,
-  transportCharges: null,
+  transportCharges: 0,
   description: "",
   invoiceAttachmentTypeId: null,
   attachments: [],
diff --git a/src/components/purchase/PurchaseTransportDetails.jsx b/src/components/purchase/PurchaseTransportDetails.jsx
index f98fc2ad..d64f0058 100644
--- a/src/components/purchase/PurchaseTransportDetails.jsx
+++ b/src/components/purchase/PurchaseTransportDetails.jsx
@@ -13,7 +13,7 @@ const PurchaseTransportDetails = () => {
     <div className="row g-3 text-start">
       {/* Invoice Number */}
       <div className="col-12 col-md-6">
-        <Label htmlFor="invoiceNumber" required>
+        <Label htmlFor="invoiceNumber" >
           Invoice Number
         </Label>
 

From a747880a776fcd3351d12ad9d4c5a6ce48caf016 Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Tue, 2 Dec 2025 17:27:55 +0530
Subject: [PATCH 07/10] fixed value of sume value

---
 src/components/purchase/PurchasePaymentDetails.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/purchase/PurchasePaymentDetails.jsx b/src/components/purchase/PurchasePaymentDetails.jsx
index 777f3a9b..42d526c8 100644
--- a/src/components/purchase/PurchasePaymentDetails.jsx
+++ b/src/components/purchase/PurchasePaymentDetails.jsx
@@ -33,7 +33,7 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
     const transportCharges = parseFloat(trCharge) || 0;
 
     if (base || tax || transportCharges) {
-      setValue("totalAmount", (base + tax + transportCharges));
+      setValue("totalAmount", (base + tax + transportCharges).toFixed(2));
     }
   }, [baseAmount, taxAmount, trCharge, setValue]);
   const invoiceAttachmentType = watch("invoiceAttachmentTypeId");

From c3720df294007c9880434c421b258805c9524c5e Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Tue, 2 Dec 2025 17:32:27 +0530
Subject: [PATCH 08/10] removed invalid border for tittle

---
 src/components/purchase/PurchasePartyDetails.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/purchase/PurchasePartyDetails.jsx b/src/components/purchase/PurchasePartyDetails.jsx
index 13f100c8..221c33e9 100644
--- a/src/components/purchase/PurchasePartyDetails.jsx
+++ b/src/components/purchase/PurchasePartyDetails.jsx
@@ -36,9 +36,7 @@ const PurchasePartyDetails = () => {
         <input
           id="title"
           type="text"
-          className={`form-control form-control-xs ${
-            errors?.title ? "is-invalid" : ""
-          }`}
+          className={`form-control form-control-xs `}
           {...register("title")}
         />
 

From 57bbcd4b451c947e3fbe2791096931d19941cd3a Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Sat, 29 Nov 2025 10:26:08 +0530
Subject: [PATCH 09/10] Correction in HoverPopup.

---
 src/components/common/HoverPopup.jsx | 82 ++++++++++++++++++----------
 1 file changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/components/common/HoverPopup.jsx b/src/components/common/HoverPopup.jsx
index 232ced5d..0afb63e0 100644
--- a/src/components/common/HoverPopup.jsx
+++ b/src/components/common/HoverPopup.jsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import {
-  closePopup,
-  openPopup,
-  togglePopup,
-} from "../../slices/localVariablesSlice";
+import { closePopup, openPopup, togglePopup } from "../../slices/localVariablesSlice";
 
 /**
- * align: "auto" | "left" | "right"
- * boundaryRef: optional ref to the drawer/container element to use as boundary
+ * Props:
+ *  id, title, content, children
+ *  className = ""
+ *  Mode = "hover" | "click"
+ *  align = "auto" | "left" | "right"
+ *  boundaryRef = optional ref to DOM element to constrain popup within (getBoundingClientRect used)
  */
 const HoverPopup = ({
   id,
@@ -21,7 +21,7 @@ const HoverPopup = ({
   boundaryRef = null,
 }) => {
   const dispatch = useDispatch();
-  const visible = useSelector((s) => s.localVariables.popups[id] || false);
+  const visible = useSelector((s) => s.localVariables.popups?.[id] || false);
 
   const triggerRef = useRef(null);
   const popupRef = useRef(null);
@@ -39,7 +39,7 @@ const HoverPopup = ({
     }
   };
 
-  // Close on outside click when using click mode
+  // Close on outside click when in click mode
   useEffect(() => {
     if (Mode !== "click" || !visible) return;
 
@@ -58,38 +58,61 @@ const HoverPopup = ({
     return () => document.removeEventListener("click", handler);
   }, [Mode, visible, dispatch, id]);
 
+  // Positioning: compute left/top relative to popup.offsetParent, but clamp using boundaryRef (if provided)
   useEffect(() => {
     if (!visible || !popupRef.current || !triggerRef.current) return;
 
     requestAnimationFrame(() => {
       const popup = popupRef.current;
-      const boundaryEl = (boundaryRef && boundaryRef.current) || popup.parentElement;
-      if (!boundaryEl) return;
+      const trigger = triggerRef.current;
 
+      const triggerRect = trigger.getBoundingClientRect();
+      const popupRect = popup.getBoundingClientRect();
+
+      // Find offsetParent (element the absolute popup is positioned relative to)
+      const offsetParent = popup.offsetParent || document.documentElement;
+      const offsetParentRect = offsetParent.getBoundingClientRect();
+
+      // Global positions we want to clamp against (in viewport coordinates)
+      let desiredLeftGlobal;
+      if (align === "left") {
+        desiredLeftGlobal = triggerRect.left;
+      } else if (align === "right") {
+        desiredLeftGlobal = triggerRect.right - popupRect.width;
+      } else {
+        // auto / center: center popup under trigger
+        desiredLeftGlobal = triggerRect.left + triggerRect.width / 2 - popupRect.width / 2;
+      }
+
+      // Compute boundaries in global coordinates (use boundaryRef if provided, else offsetParent)
+      const boundaryEl = (boundaryRef && boundaryRef.current) || offsetParent;
       const boundaryRect = boundaryEl.getBoundingClientRect();
-      const triggerRect = triggerRef.current.getBoundingClientRect();
-      popup.style.left = "";
+
+      // Clamp desiredLeftGlobal to boundaryRect
+      const minLeftGlobal = boundaryRect.left;
+      const maxLeftGlobal = boundaryRect.right - popupRect.width;
+      let clampedLeftGlobal = Math.min(Math.max(desiredLeftGlobal, minLeftGlobal), maxLeftGlobal);
+
+      // Convert to coordinates relative to offsetParent
+      const leftRelativeToOffsetParent = clampedLeftGlobal - offsetParentRect.left;
+
+      // Compute top: place popup just below trigger with small gap
+      const gap = 8;
+      const desiredTopGlobal = triggerRect.bottom + gap;
+      // Convert to offsetParent-relative top
+      const topRelativeToOffsetParent = desiredTopGlobal - offsetParentRect.top;
+
+      // Apply styles
+      popup.style.left = `${Math.round(leftRelativeToOffsetParent)}px`;
+      popup.style.top = `${Math.round(topRelativeToOffsetParent)}px`;
       popup.style.right = "";
       popup.style.transform = "";
-      popup.style.top = "";
-
-      const popupRect = popup.getBoundingClientRect();
-      const triggerCenterX = triggerRect.left + triggerRect.width / 2 - boundaryRect.left;
-      let left = triggerCenterX - popupRect.width / 2;
-
-      // Clamp to boundaries
-      left = Math.max(0, Math.min(left, boundaryRect.width - popupRect.width));
-      popup.style.left = `${left}px`;
     });
   }, [visible, align, boundaryRef]);
 
   return (
-    <div
-      className="d-inline-block position-relative"   // <-- ADD THIS !!
-      style={{ overflow: "visible" }}
-    >
+    <div className="d-inline-block position-relative" style={{ overflow: "visible" }}>
       <div
-
         ref={triggerRef}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
@@ -103,12 +126,12 @@ const HoverPopup = ({
         <div
           ref={popupRef}
           className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
-         style={{
+          style={{
             zIndex: 2000,
-            top: "100%",
             minWidth: "200px",
             maxWidth: "300px",
             wordWrap: "break-word",
+            // we set left/top from JS; ensure positionAbsolute context exists via offsetParent
           }}
           onClick={(e) => e.stopPropagation()}
         >
@@ -118,7 +141,6 @@ const HoverPopup = ({
       )}
     </div>
   );
-
 };
 
 export default HoverPopup;

From 8dbdd230af36a345979cf7fa5b6d1642cffcbdc9 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Sat, 29 Nov 2025 12:47:07 +0530
Subject: [PATCH 10/10] Adding HoverPopup effect.

---
 .../DailyProgressRport/TaskReportList.jsx     |   2 +-
 .../ServiceProjectJob/ManageJobTicket.jsx     |   7 +-
 src/components/common/HoverPopup.jsx          | 117 +++++++++---------
 3 files changed, 62 insertions(+), 64 deletions(-)

diff --git a/src/components/DailyProgressRport/TaskReportList.jsx b/src/components/DailyProgressRport/TaskReportList.jsx
index bcb4232b..f812937c 100644
--- a/src/components/DailyProgressRport/TaskReportList.jsx
+++ b/src/components/DailyProgressRport/TaskReportList.jsx
@@ -205,7 +205,7 @@ const TaskReportList = () => {
                     id="total_pending_task"
                     title="Total Pending Task"
                     content={
-                      <div className="text-wrap" style={{ maxWidth: "200px" }}>
+                      <div className="text-wrap" style={{ minWidth: "200px" }}>
                         This shows the total pending tasks for each activity on that date.
                       </div>
                     }
diff --git a/src/components/ServiceProject/ServiceProjectJob/ManageJobTicket.jsx b/src/components/ServiceProject/ServiceProjectJob/ManageJobTicket.jsx
index d6bff3e3..d2647649 100644
--- a/src/components/ServiceProject/ServiceProjectJob/ManageJobTicket.jsx
+++ b/src/components/ServiceProject/ServiceProjectJob/ManageJobTicket.jsx
@@ -69,7 +69,7 @@ const ManageJobTicket = ({ Job }) => {
                   id="STATUS_CHANEG"
                   Mode="click"
                   className=""
-                  align="right"
+                  align="left"
                   content={
                     <ChangeStatus
                       statusId={data?.status?.id}
@@ -141,7 +141,7 @@ const ManageJobTicket = ({ Job }) => {
             })()}
         </div>
         {data?.projectBranch && (
-          <div className="d-flex gap-3 my-2 position-relative"  ref={drawerRef} >
+          <div className="d-flex gap-3 my-2 position-relative" ref={drawerRef} >
             <span className="text-secondary">
               <i className="bx bx-buildings"></i> Branch Name:
             </span>
@@ -149,7 +149,8 @@ const ManageJobTicket = ({ Job }) => {
             <HoverPopup
               id="BRANCH_DETAILS"
               Mode="click"
-              align="auto"
+              align="right"
+              minWidth="340px"
               boundaryRef={drawerRef}
               content={<BranchDetails branch={data?.projectBranch?.id} />}
             >
diff --git a/src/components/common/HoverPopup.jsx b/src/components/common/HoverPopup.jsx
index 0afb63e0..9c5f8e13 100644
--- a/src/components/common/HoverPopup.jsx
+++ b/src/components/common/HoverPopup.jsx
@@ -1,15 +1,11 @@
 import React, { useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { closePopup, openPopup, togglePopup } from "../../slices/localVariablesSlice";
+import {
+  closePopup,
+  openPopup,
+  togglePopup,
+} from "../../slices/localVariablesSlice";
 
-/**
- * Props:
- *  id, title, content, children
- *  className = ""
- *  Mode = "hover" | "click"
- *  align = "auto" | "left" | "right"
- *  boundaryRef = optional ref to DOM element to constrain popup within (getBoundingClientRect used)
- */
 const HoverPopup = ({
   id,
   title,
@@ -17,29 +13,26 @@ const HoverPopup = ({
   children,
   className = "",
   Mode = "hover",
-  align = "auto",
+  align = "auto", // <-- dynamic placement
+  minWidth = "250px",
+  maxWidth = "350px",
   boundaryRef = null,
 }) => {
   const dispatch = useDispatch();
-  const visible = useSelector((s) => s.localVariables.popups?.[id] || false);
+  const visible = useSelector((s) => s.localVariables.popups[id] || false);
 
   const triggerRef = useRef(null);
   const popupRef = useRef(null);
 
-  const handleMouseEnter = () => {
-    if (Mode === "hover") dispatch(openPopup(id));
-  };
-  const handleMouseLeave = () => {
-    if (Mode === "hover") dispatch(closePopup(id));
-  };
+  const handleMouseEnter = () => Mode === "hover" && dispatch(openPopup(id));
+  const handleMouseLeave = () => Mode === "hover" && dispatch(closePopup(id));
   const handleClick = (e) => {
-    if (Mode === "click") {
-      e.stopPropagation();
-      dispatch(togglePopup(id));
-    }
+    if (Mode !== "click") return;
+    e.stopPropagation();
+    dispatch(togglePopup(id));
   };
 
-  // Close on outside click when in click mode
+  // Close popup when clicking outside (click mode)
   useEffect(() => {
     if (Mode !== "click" || !visible) return;
 
@@ -56,9 +49,9 @@ const HoverPopup = ({
 
     document.addEventListener("click", handler);
     return () => document.removeEventListener("click", handler);
-  }, [Mode, visible, dispatch, id]);
+  }, [visible, Mode, id, dispatch]);
 
-  // Positioning: compute left/top relative to popup.offsetParent, but clamp using boundaryRef (if provided)
+  // ---------- DYNAMIC POSITIONING LOGIC ----------
   useEffect(() => {
     if (!visible || !popupRef.current || !triggerRef.current) return;
 
@@ -66,50 +59,55 @@ const HoverPopup = ({
       const popup = popupRef.current;
       const trigger = triggerRef.current;
 
+      const boundaryEl =
+        (boundaryRef && boundaryRef.current) || popup.parentElement;
+
+      const boundaryRect = boundaryEl.getBoundingClientRect();
       const triggerRect = trigger.getBoundingClientRect();
       const popupRect = popup.getBoundingClientRect();
 
-      // Find offsetParent (element the absolute popup is positioned relative to)
-      const offsetParent = popup.offsetParent || document.documentElement;
-      const offsetParentRect = offsetParent.getBoundingClientRect();
+      let left;
 
-      // Global positions we want to clamp against (in viewport coordinates)
-      let desiredLeftGlobal;
-      if (align === "left") {
-        desiredLeftGlobal = triggerRect.left;
-      } else if (align === "right") {
-        desiredLeftGlobal = triggerRect.right - popupRect.width;
-      } else {
-        // auto / center: center popup under trigger
-        desiredLeftGlobal = triggerRect.left + triggerRect.width / 2 - popupRect.width / 2;
+      // AUTO ALIGN (smart)
+      if (align === "auto") {
+        const center =
+          triggerRect.left +
+          triggerRect.width / 2 -
+          boundaryRect.left -
+          popupRect.width / 2;
+
+        left = Math.max(
+          0,
+          Math.min(center, boundaryRect.width - popupRect.width)
+        );
       }
 
-      // Compute boundaries in global coordinates (use boundaryRef if provided, else offsetParent)
-      const boundaryEl = (boundaryRef && boundaryRef.current) || offsetParent;
-      const boundaryRect = boundaryEl.getBoundingClientRect();
+      // LEFT ALIGN
+      else if (align === "left") {
+        left = triggerRect.left - boundaryRect.left;
+        if (left + popupRect.width > boundaryRect.width) {
+          left = boundaryRect.width - popupRect.width; // clamp right
+        }
+      }
 
-      // Clamp desiredLeftGlobal to boundaryRect
-      const minLeftGlobal = boundaryRect.left;
-      const maxLeftGlobal = boundaryRect.right - popupRect.width;
-      let clampedLeftGlobal = Math.min(Math.max(desiredLeftGlobal, minLeftGlobal), maxLeftGlobal);
+      // RIGHT ALIGN
+      else if (align === "right") {
+        left =
+          triggerRect.left +
+          triggerRect.width -
+          boundaryRect.left -
+          popupRect.width;
 
-      // Convert to coordinates relative to offsetParent
-      const leftRelativeToOffsetParent = clampedLeftGlobal - offsetParentRect.left;
+        if (left < 0) left = 0; // clamp left
+      }
 
-      // Compute top: place popup just below trigger with small gap
-      const gap = 8;
-      const desiredTopGlobal = triggerRect.bottom + gap;
-      // Convert to offsetParent-relative top
-      const topRelativeToOffsetParent = desiredTopGlobal - offsetParentRect.top;
-
-      // Apply styles
-      popup.style.left = `${Math.round(leftRelativeToOffsetParent)}px`;
-      popup.style.top = `${Math.round(topRelativeToOffsetParent)}px`;
-      popup.style.right = "";
-      popup.style.transform = "";
+      popup.style.left = `${left}px`;
+      popup.style.top = `100%`;
     });
   }, [visible, align, boundaryRef]);
 
+  // ------------------------------------------------
+
   return (
     <div className="d-inline-block position-relative" style={{ overflow: "visible" }}>
       <div
@@ -128,15 +126,14 @@ const HoverPopup = ({
           className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
           style={{
             zIndex: 2000,
-            minWidth: "200px",
-            maxWidth: "300px",
+            minWidth,
+            maxWidth,
             wordWrap: "break-word",
-            // we set left/top from JS; ensure positionAbsolute context exists via offsetParent
           }}
           onClick={(e) => e.stopPropagation()}
         >
           {title && <h6 className="fw-semibold mb-2">{title}</h6>}
-          <div>{content}</div>
+          {content}
         </div>
       )}
     </div>