diff --git a/src/components/Expenses/Filelist.jsx b/src/components/Expenses/Filelist.jsx index b5a89452..36a48565 100644 --- a/src/components/Expenses/Filelist.jsx +++ b/src/components/Expenses/Filelist.jsx @@ -22,15 +22,15 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => { style={{ minWidth: "30px" }} > - +
- - {file.fileName} - - - {file.fileSize ? formatFileSize(file.fileSize) : ""} - -
+ + {file.fileName} + + + {file.fileSize ? formatFileSize(file.fileSize) : ""} + + @@ -41,7 +41,7 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => { role="button" onClick={(e) => { e.preventDefault(); - removeFile(expenseToEdit ? file.documentId : idx); + removeFile(expenseToEdit ? file.documentId ?? file.tempId ?? idx : file.tempId ?? idx); }} > diff --git a/src/components/InfoBlock/WarningBlock.jsx b/src/components/InfoBlock/WarningBlock.jsx new file mode 100644 index 00000000..6c756593 --- /dev/null +++ b/src/components/InfoBlock/WarningBlock.jsx @@ -0,0 +1,16 @@ +import React from 'react' + +const WarningBlock = ({content}) => { + return ( +
+
+ +

+ {content} +

+
+
+ ) +} + +export default WarningBlock diff --git a/src/components/purchase/DeliveryChallane.jsx b/src/components/purchase/DeliveryChallane.jsx index 1600b77d..834f049d 100644 --- a/src/components/purchase/DeliveryChallane.jsx +++ b/src/components/purchase/DeliveryChallane.jsx @@ -19,6 +19,8 @@ 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); @@ -178,15 +180,7 @@ const DeliveryChallane = ({ purchaseId }) => { {!isUploaded && ( -
-
- -

- If want upload document, Please select a document type before - uploading the document. -

-
-
+ )} diff --git a/src/components/purchase/ManagePurchase.jsx b/src/components/purchase/ManagePurchase.jsx index c846fd99..c28f536c 100644 --- a/src/components/purchase/ManagePurchase.jsx +++ b/src/components/purchase/ManagePurchase.jsx @@ -1,44 +1,53 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useMemo, useCallback, 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 = [ - { - name: "Party Details", - icon: "bx bx-user bx-md", - subtitle: "Supplier & project information", - component: , - }, - { - name: "Invoice & Transport", - icon: "bx bx-receipt bx-md", - subtitle: "Invoice, eWay bill & transport info", - component: , - }, - { - name: "Payment Details", - icon: "bx bx-credit-card bx-md", - subtitle: "Amount, tax & due date", - component: , - }, - ]; + const stepsConfig = useMemo( + () => [ + { + name: "Party Details", + icon: "bx bx-user bx-md", + subtitle: "Supplier & project information", + component: , + }, + { + name: "Invoice & Transport", + icon: "bx bx-receipt bx-md", + subtitle: "Invoice, eWay bill & transport info", + component: , + }, + { + name: "Payment Details", + icon: "bx bx-credit-card bx-md", + subtitle: "Amount, tax & due date", + component: , + }, + ], + [data, purchaseId] + ); const purchaseOrder = useAppForm({ resolver: zodResolver(PurchaseSchema), @@ -47,42 +56,63 @@ const ManagePurchase = ({ onClose, purchaseId }) => { shouldUnregister: false, }); - const { - reset, - formState: { errors }, - } = purchaseOrder; + const { reset, formState } = purchaseOrder; useEffect(() => { - if (purchaseId && data) { - reset({ - ...data, - title: data.title, - projectId: data.project.id, - organizationId: data.organization.id, - supplierId: data.supplier.id, - }); - setCompletedTabs([0, 1, 2]); - } + if (!purchaseId || !data) return; + + reset({ + ...data, + projectId: data?.project?.id, + organizationId: data?.organization?.id, + supplierId: data?.supplier?.id, + invoiceAttachmentTypeId: null, + attachments: + 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 = async (e) => { - e.preventDefault(); - e.stopPropagation(); + const handleNext = useCallback(async () => { + const fields = getStepFields(activeTab); + const valid = await purchaseOrder.trigger(fields); - const currentStepFields = getStepFields(activeTab); - const valid = await purchaseOrder.trigger(currentStepFields); + if (!valid) return; - if (valid) { - setCompletedTabs((prev) => [...new Set([...prev, activeTab])]); - setActiveTab((prev) => Math.min(prev + 1, stepsConfig.length - 1)); - } - }; + setCompletedTabs((prev) => [...new Set([...prev, activeTab])]); + setActiveTab((prev) => Math.min(prev + 1, stepsConfig.length - 1)); + }, [activeTab, purchaseOrder, stepsConfig.length]); - const handlePrev = (e) => { - e.preventDefault(); - e.stopPropagation(); + const handlePrev = useCallback(() => { 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(); @@ -95,42 +125,22 @@ const ManagePurchase = ({ onClose, purchaseId }) => { onClose(); }); - const onSubmit = (formData) => { - if (activeTab !== 2) { - console.warn("Submit blocked - not on last step"); - return; - } + const onSubmit = useCallback( + (formData) => { + if (activeTab !== 2) return; - const dirtyFields = purchaseOrder.formState.dirtyFields; - - if (purchaseId) { - const changedData = Object.keys(dirtyFields).reduce((acc, key) => { - if (dirtyFields[key]) { - acc.push({ - operationType: 0, - path: `/${key}`, - op: "replace", - from: null, - value: formData[key], - }); - } - return acc; - }, []); - - updatePurchase({ - purchaseId, - payload: changedData, - }); - } else { - CreateInvoice(formData); - } - }; + if (purchaseId) { + const payload = generatePatchOps(formData); + updatePurchase({ purchaseId, payload }); + } else { + CreateInvoice(formData); + } + }, + [activeTab, purchaseId, generatePatchOps, updatePurchase, CreateInvoice] + ); return ( -
- {/* Header */} +
+ {/* --- Steps Header --- */}
{stepsConfig.map((step, index) => { const isActive = activeTab === index; @@ -143,7 +153,11 @@ const ManagePurchase = ({ onClose, purchaseId }) => { isCompleted ? "crossed" : "" }`} > -
- {/* Content */} + {/* --- Form Content --- */}
{ - if (e.key === "Enter" && activeTab !== 2) { - e.preventDefault(); - } - }} - onSubmit={(e) => { - e.preventDefault(); - - if (activeTab !== 2) { - console.warn("BLOCKED SUBMIT on step:", activeTab); - return; - } - - purchaseOrder.handleSubmit(onSubmit)(e); - }} + onKeyDown={(e) => + e.key === "Enter" && activeTab !== 2 && e.preventDefault() + } + onSubmit={purchaseOrder.handleSubmit(onSubmit)} > {stepsConfig[activeTab].component} + {/* Buttons */}
) : (