Adding Upload functionlaiy in ManagePurchase.

src/components/Expenses/Filelist.jsx

@@ -3,6 +3,7 @@ import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
 import Tooltip from "../common/Tooltip";
 
 const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
+  debugger
   return (
     <div className="d-flex flex-wrap gap-2 my-1">
       {files

src/components/purchase/ManagePurchase.jsx

@@ -16,7 +16,7 @@ import {
 } from "../../hooks/usePurchase";
 const ManagePurchase = ({ onClose, purchaseId }) => {
   const { data } = usePurchase(purchaseId);
-  const [activeTab, setActiveTab] = useState(0);
+  const [activeTab, setActiveTab] = useState(2);
   const [completedTabs, setCompletedTabs] = useState([]);
 
   const stepsConfig = [
@@ -36,7 +36,7 @@ const ManagePurchase = ({ onClose, purchaseId }) => {
       name: "Payment Details",
       icon: "bx bx-credit-card bx-md",
       subtitle: "Amount, tax & due date",
-      component: <PurchasePaymentDetails />,
+      component: <PurchasePaymentDetails purchaseId={purchaseId}/>,
     },
   ];
 
@@ -60,6 +60,18 @@ const ManagePurchase = ({ onClose, purchaseId }) => {
         projectId: data.project.id,
         organizationId: data.organization.id,
         supplierId: data.supplier.id,
+        attachments: data.attachments
+          ? data?.attachments?.map((doc) => ({
+              fileName: doc.fileName,
+              base64Data: null,
+              contentType: doc.contentType,
+              documentId: doc.id,
+              fileSize: 0,
+              description: "",
+              preSignedUrl: doc.preSignedUrl,
+              isActive: doc.isActive ?? true,
+            }))
+          : []
       });
       setCompletedTabs([0, 1, 2]);
     }

src/components/purchase/PurchasePaymentDetails.jsx

@@ -3,8 +3,8 @@ import Label from "../common/Label";
 import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
 import DatePicker from "../common/DatePicker";
 import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";
-
+import Filelist from "../Expenses/Filelist";
-const PurchasePaymentDetails = () => {
+const PurchasePaymentDetails = ({purchaseId=null}) => {
   const { data, isLoading, error, isError } = useInvoiceAttachmentTypes();
   const {
     register,
@@ -26,6 +26,68 @@ const PurchasePaymentDetails = () => {
     }
   }, [baseAmount, taxAmount, setValue]);
 
+  const files = watch("attachments");
+  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,
+        };
+      })
+    );
+
+    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 toBase64 = (file) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result.split(",")[1]);
+      reader.onerror = (error) => reject(error);
+    });
+  const removeFile = (index) => {
+    debugger
+    if (purchaseId) {
+      const newFiles = files.map((file, i) => {
+        if (file.documentId !== index) return file;
+        return {
+          ...file,
+          isActive: false,
+        };
+      });
+      setValue("attachments", newFiles, { shouldValidate: true });
+    } else {
+      const newFiles = files.filter((_, i) => i !== index);
+      setValue("attachments", newFiles, { shouldValidate: true });
+    }
+  };
+
   return (
     <div className="row g-3 text-start">
       <div className="col-12 col-md-4">
@@ -56,7 +118,7 @@ const PurchasePaymentDetails = () => {
           id="taxAmount"
           type="number"
           className="form-control form-control-xs"
-          {...register("taxAmount",{ valueAsNumber: true })}
+          {...register("taxAmount", { valueAsNumber: true })}
         />
 
         {errors?.taxAmount && (
@@ -75,7 +137,7 @@ const PurchasePaymentDetails = () => {
           id="totalAmount"
           type="number"
           className="form-control form-control-xs"
-          {...register("totalAmount",{ valueAsNumber: true })}
+          {...register("totalAmount", { valueAsNumber: true })}
           readOnly
         />
 
@@ -93,7 +155,7 @@ const PurchasePaymentDetails = () => {
           id="transportCharges"
           type="number"
           className="form-control form-control-xs"
-          {...register("transportCharges",{ valueAsNumber: true })}
+          {...register("transportCharges", { valueAsNumber: true })}
         />
 
         {errors?.transportCharges && (
@@ -138,6 +200,63 @@ const PurchasePaymentDetails = () => {
           </div>
         )}
       </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
+              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>
+            ))}
+        </div>
+      </div>
     </div>
   );
 };

src/components/purchase/PurchaseSchema.jsx

@@ -1,39 +1,63 @@
 import { z } from "zod";
 import { normalizeAllowedContentTypes } from "../../utils/appUtils";
 
-export const AttachmentSchema = (allowedContentType, maxSizeAllowedInMB) => {
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
-  const allowedTypes = normalizeAllowedContentTypes(allowedContentType);
+const ALLOWED_TYPES = [
+  "application/pdf",
+  "image/png",
+  "image/jpg",
+  "image/jpeg",
+];
 
-  return z.object({
+export const AttachmentSchema = z.object({
-    fileName: z.string().min(1, { message: "File name is required" }),
+  documentId: z.string().optional(),
-    base64Data: z.string().min(1, { message: "File data is required" }),
+  invoiceAttachmentTypeId: z.string().min(1, { message: "Attachment type is required" }),
-    invoiceAttachmentTypeId: z
+  fileName: z.string().min(1, { message: "Filename is required" }),
-      .string()
+  base64Data: z.string().min(1, { message: "File data is required" }),
-      .min(1, { message: "File data is required" }),
+  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),
+});
+// export const AttachmentSchema = (allowedContentType, maxSizeAllowedInMB) => {
+//   const allowedTypes = normalizeAllowedContentTypes(allowedContentType);
 
-    contentType: z
+//   return z.object({
-      .string()
+//     fileName: z.string().min(1, { message: "File name is required" }),
-      .min(1, { message: "MIME type is required" })
+//     base64Data: z.string().min(1, { message: "File data is required" }),
-      .refine(
+//     invoiceAttachmentTypeId: z
-        (val) => (allowedTypes.length ? allowedTypes.includes(val) : true),
+//       .string()
-        {
+//       .min(1, { message: "File data is required" }),
-          message: `File type must be one of: ${allowedTypes.join(", ")}`,
-        }
-      ),
 
-    fileSize: z
+//     contentType: z
-      .number()
+//       .string()
-      .int()
+//       .min(1, { message: "MIME type is required" })
-      .nonnegative("fileSize must be ≥ 0")
+//       .refine(
-      .max(
+//         (val) => (allowedTypes.length ? allowedTypes.includes(val) : true),
-        (maxSizeAllowedInMB ?? 25) * 1024 * 1024,
+//         {
-        `fileSize must be ≤ ${maxSizeAllowedInMB ?? 25}MB`
+//           message: `File type must be one of: ${allowedTypes.join(", ")}`,
-      ),
+//         }
+//       ),
 
-    description: z.string().optional().default(""),
+//     fileSize: z
-    isActive: z.boolean(),
+//       .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" }),
@@ -65,8 +89,10 @@ export const PurchaseSchema = z.object({
   paymentDueDate: z.coerce.date().nullable(),
   transportCharges: z.number().nullable(),
   description: z.string().min(1, { message: "Description is required" }),
+  attachments: z
+    .array(AttachmentSchema)
+    .nonempty({ message: "At least one file attachment is required" }),
 
-  // attachments: z.array(AttachmentSchema([], 25)).optional(),
 });
 
 //   deliveryChallanNo: z
@@ -104,6 +130,7 @@ export const defaultPurchaseValue = {
   paymentDueDate: null,
   transportCharges: null,
   description: "",
+  attachments: [],
 
   // attachments: [],
 };
@@ -180,7 +207,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",