completd updation of documents

src/components/Documents/ManageDocument.jsx

@@ -15,6 +15,7 @@ import {
 } from "../../hooks/useDocument";
 import showToast from "../../services/toastService";
 import { useDocumentContext } from "./Documents";
+import { isPending } from "@reduxjs/toolkit";
 
 const toBase64 = (file) =>
   new Promise((resolve, reject) => {
@@ -24,6 +25,34 @@ const toBase64 = (file) =>
     reader.onerror = (err) => reject(err);
   });
 
+const MergedTagsWithExistenStatus = (formTags = [], originalTags = []) => {
+  const tagMap = new Map();
+
+  const safeFormTags = Array.isArray(formTags) ? formTags : [];
+  const safeOriginalTags = Array.isArray(originalTags) ? originalTags : [];
+
+  safeOriginalTags.forEach(tag => {
+    if (tag?.name) {
+      tagMap.set(tag.name, { ...tag, isActive: tag.isActive ?? true });
+    }
+  });
+
+  safeFormTags.forEach(tag => {
+    if (tag?.name) {
+      tagMap.set(tag.name, { ...tag, isActive: true });
+    }
+  });
+
+  safeOriginalTags.forEach(tag => {
+    if (tag?.name && !safeFormTags.some(t => t.name === tag.name)) {
+      tagMap.set(tag.name, { ...tag, isActive: false });
+    }
+  });
+
+  return Array.from(tagMap.values());
+};
+
+
 const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
   const { ManageDoc } = useDocumentContext();
   const isUpdateForm = Boolean(ManageDoc?.document);
@@ -45,19 +74,26 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
     reset,
     formState: { errors },
   } = methods;
-  const { mutate: UploadDocument, isPending } = useUploadDocument(() => {
-    showToast("Document Uploaded Successfully", "success");
-    closeModal();
-  });
-  const { mutate: UpdateDocument, isPending: isUpdatinDoc } = useUpdateDocument(
+  const { mutate: UploadDocument, isPending: isUploading } = useUploadDocument(
+    () => {
+      showToast("Document Uploaded Successfully", "success");
+      closeModal();
+    }
+  );
+  const { mutate: UpdateDocument, isPending: isUpdating } = useUpdateDocument(
     () => {
       showToast("Document Updated Successfully", "success");
       closeModal();
     }
   );
+
   const onSubmit = (data) => {
     if (ManageDoc?.document) {
-      const DocumentPayload = { ...DocData, ...data };
+      const DocumentPayload = {
+        ...data,
+        id: DocData.id,
+        tags: MergedTagsWithExistenStatus(data?.tags, DocData?.tags),
+      };
       UpdateDocument({ documentId: DocData?.id, DocumentPayload });
     } else {
       const DocumentPayload = { ...data, entityId: Entity };
@@ -176,6 +212,8 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
 
   if (isDocLoading) return <div>Loading...</div>;
   if (isDocError) return <div>{DocError.message}</div>;
+
+  const isPending = isUploading || isUpdating;
   return (
     <div className="p-2">
       <p className="fw-bold fs-6">Upload New Document</p>
@@ -270,7 +308,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
           {/* Upload */}
           <div className="row my-2">
             <div className="col-md-12">
-              <label className="form-label">Upload Document</label>
+              <Label htmlFor="attachment" required>Upload Document</Label>
 
               <div
                 className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
@@ -336,7 +374,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
 
           {/* Description */}
           <div className="mb-2">
-            <Label htmlFor="description">Description</Label>
+            <Label htmlFor="description" required>Description</Label>
             <textarea
               rows="2"
               className="form-control"

src/components/common/TagInput.jsx

@@ -1,37 +1,33 @@
 import React, { useState, useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 
-const TagInput = ({
-  label = "Tags",
-  name = "tags",
-  placeholder = "Start typing to add... like employee, manager",
-  color = "#e9ecef",
-  options = [],
-}) => {
-  const [tags, setTags] = useState([]); // now array of objects
+const TagInput = ({ label, name, placeholder, color = "#e9ecef", options = [] }) => {
+  const { setValue, watch } = useFormContext();
+  const tags = watch(name) || [];  
   const [input, setInput] = useState("");
   const [suggestions, setSuggestions] = useState([]);
 
-  const { setValue } = useFormContext();
-
-  // Keep form value synced
-  useEffect(() => {
-    setValue(name, tags, { shouldValidate: true });
-  }, [tags, name, setValue]);
-
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && input.trim()) {
-      e.preventDefault();
-      if (!tags.some((t) => t.name === input.trim())) {
-        setTags((prev) => [...prev, { name: input.trim(), isActive: true }]);
-      }
-      setInput("");
-      setSuggestions([]);
+  const handleAdd = (newTag) => {
+    if (!tags.some((t) => t.name === newTag)) {
+      setValue(name, [...tags, { name: newTag, isActive: true }], { shouldValidate: true });
     }
   };
 
   const handleRemove = (tagName) => {
-    setTags((prev) => prev.filter((t) => t.name !== tagName));
+    setValue(
+      name,
+      tags.filter((t) => t.name !== tagName),
+      { shouldValidate: true }
+    );
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && input.trim()) {
+      e.preventDefault();
+      handleAdd(input.trim());
+      setInput("");
+      setSuggestions([]);
+    }
   };
 
   const handleChange = (e) => {
@@ -52,10 +48,8 @@ const TagInput = ({
     }
   };
 
-  const handleSuggestionClick = (suggestion) => {
-    if (!tags.some((t) => t.name === suggestion.name)) {
-      setTags((prev) => [...prev, suggestion]);
-    }
+  const handleSuggestionClick = (sugg) => {
+    handleAdd(sugg.name);
     setInput("");
     setSuggestions([]);
   };
@@ -66,10 +60,7 @@ const TagInput = ({
         {label}
       </label>
 
-      <div
-        className="form-control form-control-sm p-1"
-        style={{ minHeight: "38px", position: "relative" }}
-      >
+      <div className="form-control form-control-sm p-1" style={{ minHeight: "38px", position: "relative" }}>
         <div className="d-flex flex-wrap align-items-center gap-1">
           {tags.map((tag, index) => (
             <span
@@ -135,4 +126,5 @@ const TagInput = ({
   );
 };
 
+
 export default TagInput;

src/hooks/useDocument.js

@@ -59,6 +59,7 @@ export const useUploadDocument =(onSuccessCallBack)=>{
         mutationFn:async(DocumentPayload)=>DocumentRepository.uploadDocument(DocumentPayload),
         onSuccess:(data,variables)=>{
           queryClient.invalidateQueries({queryKey:["DocumentList"]});
+         
           if(onSuccessCallBack) onSuccessCallBack()
         },
          onError: (error) => {
@@ -75,7 +76,9 @@ export const useUpdateDocument =(onSuccessCallBack)=>{
     return useMutation(({
         mutationFn:async({documentId,DocumentPayload})=>DocumentRepository.UpdateDocument(documentId,DocumentPayload),
         onSuccess:(data,variables)=>{
+          const {documentId} = variables;
           queryClient.invalidateQueries({queryKey:["DocumentList"]});
+           queryClient.invalidateQueries({queryKey:["Document",documentId]})
           if(onSuccessCallBack) onSuccessCallBack()
         },
          onError: (error) => {