src/components/Expenses/Filelist.jsx

@@ -22,15 +22,15 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
                   style={{ minWidth: "30px" }}
                 ></i>
 
-                <Tooltip text={file.fileName}>
+                <Tooltip text={file.fileName} >
                   <div className="d-flex flex-column text-truncate">
-                    <span className="fw-semibold small text-truncate">
+                  <span className="fw-semibold small text-truncate">
-                      {file.fileName}
+                    {file.fileName}
-                    </span>
+                  </span>
-                    <span className="text-body-secondary small">
+                  <span className="text-body-secondary small">
-                      {file.fileSize ? formatFileSize(file.fileSize) : ""}
+                    {file.fileSize ? formatFileSize(file.fileSize) : ""}
-                    </span>
+                  </span>
-                  </div>
+                </div>
                 </Tooltip>
               </div>
 
@@ -41,7 +41,7 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
                   role="button"
                   onClick={(e) => {
                     e.preventDefault();
-                    removeFile(expenseToEdit ? file.documentId ?? file.tempId ?? idx : file.tempId ?? idx);
+                    removeFile(expenseToEdit ? file.documentId : idx);
                   }}
                 ></i>
               </Tooltip>

src/components/InfoBlock/WarningBlock.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-
-const WarningBlock = ({content}) => {
-  return (
-        <div className="col-12 my-1">
-            <div className="d-flex align-items-center gap-2 p-3 rounded bg-warning bg-opacity-10 border border-warning-subtle text-start align-item-start">
-              <i className="bx bx-info-circle text-warning fs-5"></i>
-              <p className="mb-0  small">
-              {content}
-              </p>
-            </div>
-          </div>
-  )
-}
-
-export default WarningBlock

src/components/purchase/DeliveryChallane.jsx

@@ -19,8 +19,6 @@ import SelectField from "../common/Forms/SelectField";
 import Filelist from "../Expenses/Filelist";
 import SingleFileUploader from "../common/SigleFileUploader";
 import { localToUtc } from "../../utils/appUtils";
-import WarningBlock from "../InfoBlock/WarningBlock";
-import { FILE_UPLOAD_INFO } from "../../utils/staticContent";
 
 const DeliveryChallane = ({ purchaseId }) => {
   const [file, setFile] = useState(null);
@@ -180,7 +178,15 @@ const DeliveryChallane = ({ purchaseId }) => {
           </div>
         </form>
         {!isUploaded && (
-          <WarningBlock content={FILE_UPLOAD_INFO} />
+          <div className="col-12 my-1">
+            <div className="d-flex align-items-center gap-2 p-3 rounded bg-warning bg-opacity-10 border border-warning-subtle text-start align-item-start">
+              <i className="bx bx-info-circle text-warning fs-5"></i>
+              <p className="mb-0  small">
+                If want upload document, Please select a document type before
+                uploading the document.
+              </p>
+            </div>
+          </div>
         )}
       </div>
 

src/components/purchase/ManagePurchase.jsx

@@ -1,53 +1,44 @@
-import React, { useEffect, useMemo, useCallback, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { AppFormProvider, useAppForm } from "../../hooks/appHooks/useAppForm";
 import { zodResolver } from "@hookform/resolvers/zod";
-
 import {
   defaultPurchaseValue,
   PurchaseSchema,
   getStepFields,
 } from "./PurchaseSchema";
-
 import PurchasePartyDetails from "./PurchasePartyDetails";
 import PurchaseTransportDetails from "./PurchaseTransportDetails";
 import PurchasePaymentDetails from "./PurchasePaymentDetails";
-
 import {
   useCreatePurchaseInvoice,
   usePurchase,
   useUpdatePurchaseInvoice,
 } from "../../hooks/usePurchase";
-import { error } from "pdf-lib";
-
 const ManagePurchase = ({ onClose, purchaseId }) => {
   const { data } = usePurchase(purchaseId);
-
   const [activeTab, setActiveTab] = useState(0);
   const [completedTabs, setCompletedTabs] = useState([]);
 
-  const stepsConfig = useMemo(
+  const stepsConfig = [
-    () => [
+    {
-      {
+      name: "Party Details",
-        name: "Party Details",
+      icon: "bx bx-user bx-md",
-        icon: "bx bx-user bx-md",
+      subtitle: "Supplier & project information",
-        subtitle: "Supplier & project information",
+      component: <PurchasePartyDetails purchase={data} />,
-        component: <PurchasePartyDetails purchase={data} />,
+    },
-      },
+    {
-      {
+      name: "Invoice & Transport",
-        name: "Invoice & Transport",
+      icon: "bx bx-receipt bx-md",
-        icon: "bx bx-receipt bx-md",
+      subtitle: "Invoice, eWay bill & transport info",
-        subtitle: "Invoice, eWay bill & transport info",
+      component: <PurchaseTransportDetails />,
-        component: <PurchaseTransportDetails />,
+    },
-      },
+    {
-      {
+      name: "Payment Details",
-        name: "Payment Details",
+      icon: "bx bx-credit-card bx-md",
-        icon: "bx bx-credit-card bx-md",
+      subtitle: "Amount, tax & due date",
-        subtitle: "Amount, tax & due date",
+      component: <PurchasePaymentDetails />,
-        component: <PurchasePaymentDetails purchaseId={purchaseId} />,
+    },
-      },
+  ];
-    ],
-    [data, purchaseId]
-  );
 
   const purchaseOrder = useAppForm({
     resolver: zodResolver(PurchaseSchema),
@@ -56,63 +47,42 @@ const ManagePurchase = ({ onClose, purchaseId }) => {
     shouldUnregister: false,
   });
 
-  const { reset, formState } = purchaseOrder;
+  const {
+    reset,
+    formState: { errors },
+  } = purchaseOrder;
 
   useEffect(() => {
-    if (!purchaseId || !data) return;
+    if (purchaseId && data) {
-
+      reset({
-    reset({
+        ...data,
-      ...data,
+        title: data.title,
-      projectId: data?.project?.id,
+        projectId: data.project.id,
-      organizationId: data?.organization?.id,
+        organizationId: data.organization.id,
-      supplierId: data?.supplier?.id,
+        supplierId: data.supplier.id,
-      invoiceAttachmentTypeId: null,
+      });
-      attachments:
+      setCompletedTabs([0, 1, 2]);
-        data?.attachments?.map((doc) => ({
+    }
-          fileName: doc.fileName,
-          base64Data: null,
-          contentType: doc.contentType,
-          documentId: doc.documentId,
-          invoiceAttachmentTypeId: doc.invoiceAttachmentType?.id ?? null,
-          fileSize: 0,
-          description: "",
-          preSignedUrl: doc.preSignedUrl,
-          isActive: doc.isActive ?? true,
-        })) || [],
-    });
-
-    setCompletedTabs([0, 1, 2]);
   }, [purchaseId, data, reset]);
 
-  const handleNext = useCallback(async () => {
+  const handleNext = async (e) => {
-    const fields = getStepFields(activeTab);
+    e.preventDefault();
-    const valid = await purchaseOrder.trigger(fields);
+    e.stopPropagation();
 
-    if (!valid) return;
+    const currentStepFields = getStepFields(activeTab);
+    const valid = await purchaseOrder.trigger(currentStepFields);
 
-    setCompletedTabs((prev) => [...new Set([...prev, activeTab])]);
+    if (valid) {
-    setActiveTab((prev) => Math.min(prev + 1, stepsConfig.length - 1));
+      setCompletedTabs((prev) => [...new Set([...prev, activeTab])]);
-  }, [activeTab, purchaseOrder, stepsConfig.length]);
+      setActiveTab((prev) => Math.min(prev + 1, stepsConfig.length - 1));
+    }
+  };
 
-  const handlePrev = useCallback(() => {
+  const handlePrev = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
     setActiveTab((prev) => Math.max(prev - 1, 0));
-  }, []);
+  };
-
-  const generatePatchOps = useCallback(
-    (formData) => {
-      const { dirtyFields } = formState;
-
-      return Object.keys(dirtyFields)
-        .filter((key) => key !== "invoiceAttachmentTypeId")
-        .map((key) => ({
-          operationType: 0,
-          path: `/${key}`,
-          op: "replace",
-          value: formData[key],
-        }));
-    },
-    [formState]
-  );
 
   const { mutate: CreateInvoice, isPending } = useCreatePurchaseInvoice(() => {
     reset();
@@ -125,22 +95,42 @@ const ManagePurchase = ({ onClose, purchaseId }) => {
       onClose();
     });
 
-  const onSubmit = useCallback(
+  const onSubmit = (formData) => {
-    (formData) => {
+    if (activeTab !== 2) {
-      if (activeTab !== 2) return;
+      console.warn("Submit blocked - not on last step");
+      return;
+    }
 
-      if (purchaseId) {
+    const dirtyFields = purchaseOrder.formState.dirtyFields;
-        const payload = generatePatchOps(formData);
+
-        updatePurchase({ purchaseId, payload });
+    if (purchaseId) {
-      } else {
+      const changedData = Object.keys(dirtyFields).reduce((acc, key) => {
-        CreateInvoice(formData);
+        if (dirtyFields[key]) {
-      }
+          acc.push({
-    },
+            operationType: 0,
-    [activeTab, purchaseId, generatePatchOps, updatePurchase, CreateInvoice]
+            path: `/${key}`,
-  );
+            op: "replace",
+            from: null,
+            value: formData[key],
+          });
+        }
+        return acc;
+      }, []);
+
+      updatePurchase({
+        purchaseId,
+        payload: changedData,
+      });
+    } else {
+      CreateInvoice(formData);
+    }
+  };
   return (
-    <div className="bs-stepper horizontically mt-2 b-secondry shadow-none border-0">
+    <div
-      {/* --- Steps Header --- */}
+      id="wizard-property-listing"
+      className="bs-stepper horizontically mt-2 b-secondry shadow-none border-0"
+    >
+      {/* Header */}
       <div className="bs-stepper-header text-start px-0 py-1">
         {stepsConfig.map((step, index) => {
           const isActive = activeTab === index;
@@ -153,11 +143,7 @@ const ManagePurchase = ({ onClose, purchaseId }) => {
                   isCompleted ? "crossed" : ""
                 }`}
               >
-                <button
+                <button type="button" className="step-trigger">
-                  type="button"
-                  className="step-trigger"
-                  onClick={() => purchaseId && setActiveTab(index)}
-                >
                   <span className="bs-stepper-circle">
                     {isCompleted ? (
                       <i className="bx bx-check"></i>
@@ -181,18 +167,28 @@ const ManagePurchase = ({ onClose, purchaseId }) => {
         })}
       </div>
 
-      {/* --- Form Content --- */}
+      {/* Content */}
       <div className="bs-stepper-content py-2 px-3">
         <AppFormProvider {...purchaseOrder}>
           <form
-            onKeyDown={(e) =>
+            onKeyDown={(e) => {
-              e.key === "Enter" && activeTab !== 2 && e.preventDefault()
+              if (e.key === "Enter" && activeTab !== 2) {
-            }
+                e.preventDefault();
-            onSubmit={purchaseOrder.handleSubmit(onSubmit)}
+              }
+            }}
+            onSubmit={(e) => {
+              e.preventDefault();
+
+              if (activeTab !== 2) {
+                console.warn("BLOCKED SUBMIT on step:", activeTab);
+                return;
+              }
+
+              purchaseOrder.handleSubmit(onSubmit)(e);
+            }}
           >
             {stepsConfig[activeTab].component}
 
-            {/* Buttons */}
             <div className="d-flex justify-content-between mt-4">
               <button
                 type="button"

src/components/purchase/PurchaseList.jsx

@@ -74,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"

src/components/purchase/PurchasePaymentDetails.jsx

@@ -1,21 +1,11 @@
 import React, { useEffect } from "react";
 import Label from "../common/Label";
-import {
+import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
-  AppFormController,
-  useAppFormContext,
-} from "../../hooks/appHooks/useAppForm";
 import DatePicker from "../common/DatePicker";
 import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";
-import Filelist from "../Expenses/Filelist";
-import SelectField from "../common/Forms/SelectField";
-import { useWatch } from "react-hook-form";
-import WarningBlock from "../InfoBlock/WarningBlock";
-import { FILE_UPLOAD_INFO } from "../../utils/staticContent";
 
-const PurchasePaymentDetails = ({ purchaseId = null }) => {
+const PurchasePaymentDetails = () => {
   const { data, isLoading, error, isError } = useInvoiceAttachmentTypes();
-  const { data: InvoiceDocTypes, isLoading: invoiceDocLoading } =
-    useInvoiceAttachmentTypes();
   const {
     register,
     watch,
@@ -35,78 +25,9 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
       setValue("totalAmount", (base + tax).toFixed(2));
     }
   }, [baseAmount, taxAmount, setValue]);
-  const invoiceAttachmentType = watch("invoiceAttachmentTypeId");
-  const files = watch("attachments");
-  const toBase64 = (file) =>
-    new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => resolve(reader.result.split(",")[1]);
-      reader.onerror = (error) => reject(error);
-    });
-  const onFileChange = async (e) => {
-    const newFiles = Array.from(e.target.files);
-    if (newFiles.length === 0) return;
-
-    const existingFiles = watch("attachments") || [];
-
-    const parsedFiles = await Promise.all(
-      newFiles.map(async (file) => {
-        const base64Data = await toBase64(file);
-        return {
-          fileName: file.name,
-          base64Data,
-          contentType: file.type,
-          fileSize: file.size,
-          description: "",
-          isActive: true,
-          invoiceAttachmentTypeId: invoiceAttachmentType,
-          isNew: true, // <-- temp
-          tempId: crypto.randomUUID(), // temp - id
-        };
-      })
-    );
-
-    const combinedFiles = [
-      ...existingFiles,
-      ...parsedFiles.filter(
-        (newFile) =>
-          !existingFiles.some(
-            (f) =>
-              f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
-          )
-      ),
-    ];
-
-    setValue("attachments", combinedFiles, {
-      shouldDirty: true,
-      shouldValidate: true,
-    });
-  };
-
-  const removeFile = (index) => {
-    const updated = files.flatMap((file, i) => {
-      // NEW FILE → remove completely
-      if (file.isNew && file.tempId === index) {
-        return []; // remove from array
-      }
-
-      // EXISTING FILE → mark inactive
-      if (!file.isNew && file.documentId === index) {
-        return [{ ...file, isActive: false }];
-      }
-
-      return [file];
-    });
-
-    setValue("attachments", updated, {
-      shouldDirty: true,
-      shouldValidate: true,
-    });
-  };
 
   return (
-    <div className="row g-1 text-start">
+    <div className="row g-3 text-start">
       <div className="col-12 col-md-4">
         <Label htmlFor="baseAmount" required>
           Base Amount
@@ -135,7 +56,7 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
           id="taxAmount"
           type="number"
           className="form-control form-control-xs"
-          {...register("taxAmount", { valueAsNumber: true })}
+          {...register("taxAmount",{ valueAsNumber: true })}
         />
 
         {errors?.taxAmount && (
@@ -154,7 +75,7 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
           id="totalAmount"
           type="number"
           className="form-control form-control-xs"
-          {...register("totalAmount", { valueAsNumber: true })}
+          {...register("totalAmount",{ valueAsNumber: true })}
           readOnly
         />
 
@@ -172,7 +93,7 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
           id="transportCharges"
           type="number"
           className="form-control form-control-xs"
-          {...register("transportCharges", { valueAsNumber: true })}
+          {...register("transportCharges",{ valueAsNumber: true })}
         />
 
         {errors?.transportCharges && (
@@ -217,90 +138,6 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
           </div>
         )}
       </div>
-      <div className="col-12">
-        <AppFormController
-          name="invoiceAttachmentTypeId"
-          control={control}
-          render={({ field }) => (
-            <SelectField
-              label="Select Document Type"
-              options={InvoiceDocTypes ?? []}
-              placeholder="Choose  Type"
-              labelKeyKey="name"
-              valueKeyKey="id"
-              value={field.value}
-              onChange={field.onChange}
-              isLoading={invoiceDocLoading}
-              className="m-0"
-            />
-          )}
-        />
-
-        {errors?.invoiceAttachmentTypeId && (
-          <small className="danger-text">
-            {errors.invoiceAttachmentTypeId.message}
-          </small>
-        )}
-      </div>
-
-      <div className="text-start">
-        <div className="col-md-12">
-          <Label className="form-label" required>
-            Upload Bill{" "}
-          </Label>
-
-          <div
-            className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
-            style={{ cursor: "pointer" }}
-            onClick={() => document.getElementById("attachments").click()}
-          >
-            <i className="bx bx-cloud-upload d-block bx-lg"> </i>
-            <span className="text-muted d-block">
-              Click to select or click here to browse
-            </span>
-            <small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
-
-            <input
-              type="file"
-              id="attachments"
-              accept=".pdf,.jpg,.jpeg,.png"
-              multiple
-              disabled={!invoiceAttachmentType}
-              style={{ display: "none" }}
-              {...register("attachments")}
-              onChange={(e) => {
-                onFileChange(e);
-                e.target.value = "";
-              }}
-            />
-          </div>
-          {errors.attachments && (
-            <small className="danger-text">{errors.attachments.message}</small>
-          )}
-          {files.length > 0 && (
-            <Filelist
-              files={files}
-              removeFile={removeFile}
-              expenseToEdit={purchaseId}
-            />
-          )}
-
-          {Array.isArray(errors.attachments) &&
-            errors.attachments.map((fileError, index) => (
-              <div key={index} className="danger-text small mt-1">
-                {
-                  (fileError?.fileSize?.message ||
-                    fileError?.contentType?.message ||
-                    fileError?.base64Data?.message,
-                  fileError?.documentId?.message)
-                }
-              </div>
-            ))}
-          {!invoiceAttachmentType && (
-            <WarningBlock content={FILE_UPLOAD_INFO} />
-          )}
-        </div>
-      </div>
     </div>
   );
 };

src/components/purchase/PurchaseSchema.jsx

@@ -1,30 +1,39 @@
 import { z } from "zod";
 import { normalizeAllowedContentTypes } from "../../utils/appUtils";
 
-const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+export const AttachmentSchema = (allowedContentType, maxSizeAllowedInMB) => {
-const ALLOWED_TYPES = [
+  const allowedTypes = normalizeAllowedContentTypes(allowedContentType);
-  "application/pdf",
-  "image/png",
-  "image/jpg",
-  "image/jpeg",
-];
 
-export const AttachmentSchema = z.object({
+  return z.object({
-  invoiceAttachmentTypeId: z.string().nullable(),
+    fileName: z.string().min(1, { message: "File name is required" }),
-  fileName: z.string().min(1, { message: "Filename is required" }),
+    base64Data: z.string().min(1, { message: "File data is required" }),
-  base64Data: z.string().nullable(),
+    invoiceAttachmentTypeId: z
-  contentType: z
+      .string()
-    .string()
+      .min(1, { message: "File data is required" }),
-    .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),
-});
 
+    contentType: z
+      .string()
+      .min(1, { message: "MIME type is required" })
+      .refine(
+        (val) => (allowedTypes.length ? allowedTypes.includes(val) : true),
+        {
+          message: `File type must be one of: ${allowedTypes.join(", ")}`,
+        }
+      ),
+
+    fileSize: z
+      .number()
+      .int()
+      .nonnegative("fileSize must be ≥ 0")
+      .max(
+        (maxSizeAllowedInMB ?? 25) * 1024 * 1024,
+        `fileSize must be ≤ ${maxSizeAllowedInMB ?? 25}MB`
+      ),
+
+    description: z.string().optional().default(""),
+    isActive: z.boolean(),
+  });
+};
 
 export const PurchaseSchema = z.object({
   title: z.string().min(1, { message: "Title is required" }),
@@ -56,13 +65,15 @@ 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)
-  
 
+  // attachments: z.array(AttachmentSchema([], 25)).optional(),
 });
 
+//   deliveryChallanNo: z
+//     .string()
+//     .min(1, { message: "Delivery Challan No is required" }),
+//   deliveryDate: z.string().min(1, { message: "Delevery Date is required" }),
+//   shippingAddress: z.string().min(1, { message: "Delevery Date is required" }),
 
 export const defaultPurchaseValue = {
   title: "",
@@ -93,8 +104,8 @@ export const defaultPurchaseValue = {
   paymentDueDate: null,
   transportCharges: null,
   description: "",
-  invoiceAttachmentTypeId:null,
+
-  attachments: [],
+  // attachments: [],
 };
 
 export const getStepFields = (stepIndex) => {
@@ -127,9 +138,7 @@ export const getStepFields = (stepIndex) => {
       "totalAmount",
       "transportCharges",
       "paymentDueDate",
-      "invoiceAttachmentTypeId",
       "description",
-      "attachments"
     ],
   };
 
@@ -171,7 +180,7 @@ 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.any().refine(
     (val) => val && typeof val === "object" && !!val.base64Data,
     {
       message: "Please upload document",

src/components/purchase/Purchasetable.jsx

@@ -26,13 +26,13 @@ export const PurchaseColumn = [
   {
     key: "project",
     label: "Project",
-    className: "text-start ",
+    className: "text-start d-none d-sm-table-cell",
     render: (item) => <span>{item?.project?.name || "NA"}</span>,
   },
   {
     key: "supplier",
     label: "Supplier",
-    className: "text-start ",
+    className: "text-start d-none d-sm-table-cell",
     render: (item) => <span>{item?.supplier?.name || "NA"}</span>,
   },
   {

src/pages/purchase/PurchasePage.jsx

@@ -49,7 +49,7 @@ const PurchasePage = () => {
         />
         <div className="card px-sm-4 my-3">
           <div className="row p-2">
-            <div className="col-12 col-sm-6 text-start">
+            <div className="col-12 col-md-6 text-start">
               {" "}
               <label className="mb-0">
                 <input
@@ -62,7 +62,7 @@ const PurchasePage = () => {
                 />
               </label>
             </div>
-            <di className="col-sm-6 text-end">
+            <di className="col-6 text-end">
               <button
                 className="btn btn-sm btn-primary"
                 onClick={() =>

src/utils/staticContent.jsx

@@ -1,4 +0,0 @@
-export const FILE_UPLOAD_INFO = `
-If you want to upload a document, please select a document type
-before uploading the document.
-`;