audit

src/components/client/SignDocument.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
 
 import axios from "axios"
 import { RootState } from "../../store/store";
@@ -26,6 +26,8 @@ import typeToIconMap from "../../helper/iconMap";
 import { droppedTagsDefaultField } from "../process/processStepTwo/DocumentContainer";
 import SignCompletionScreen from "./SignCompletionScreen";
 import api from "../../config/api";
+import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar";
+import { RiDragMoveFill } from "react-icons/ri";
 
 
 
@@ -139,12 +141,6 @@ const fitObj = [
 
 const SignDocument = () => {
 
-    useEffect(() => {
-        axios.get("https://concrete-gladly-mullet.ngrok-free.app/api/sign/session?recipientId=103&sessionId=iqlo2inofsqaqib8mcos4njssj").then((res) => {
-            console.log(res, "RESPONSE")
-        })
-    }, [])
-
     const { recipientId } = useParams();
     const dispatch = useDispatch();
 
@@ -235,6 +231,8 @@ const SignDocument = () => {
     }, [droppedItems])
 
 
+    console.log(droppedItems, "{droppedItems[selectedTag.key][selectedTag.index]}")
+
     useEffect(() => {
         if (recSignStatus === "COMPLETED") {
             // setHideTags(true);
@@ -719,6 +717,7 @@ const SignDocument = () => {
         // }
 
         if (prepData.type.toLowerCase() === TagsTypes.SIGNATURE || prepData.type.toLowerCase() === TagsTypes.INITIALS) {
+
             const currDocTags = droppedItems.filter((val) => val.pageIndex === prepData.pageIndex)
             setSignConfObj({
                 ...signConfObj,
@@ -1047,7 +1046,6 @@ const SignDocument = () => {
                                                     doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
                                                         const key = `${doc.documentId}_${page.index}`;
                                                         // const tagJsonData = [...droppedItems];
-
                                                         const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index)
                                                         return (
                                                             <div
@@ -1068,10 +1066,14 @@ const SignDocument = () => {
 
                                                                                 <div
                                                                                     tabIndex={1}
-                                                                                    onFocus={() => setFocusElement({ ...item, focusElementIndx: index })}
+                                                                                    onFocus={() => {
+                                                                                        setSelectedTag({ key, index })
+                                                                                        setFocusElement({ ...item, focusElementIndx: index })
+                                                                                    }
+                                                                                    }
                                                                                     key={item.id}
                                                                                     // draggable="false"
-                                                                                    onPointerDown={(e) => handleTagMouseDown(e, key, index)}
+                                                                                    // onPointerDown={(e) => handleTagMouseDown(e, key, index)}
                                                                                     className="absolute rounded dropped-item text-sm"
                                                                                     // onClick={() => handleTagClick(key, index)}
                                                                                     style={{
@@ -1083,6 +1085,15 @@ const SignDocument = () => {
                                                                                         // display: `${hideTags ? 'none' : 'block'}`
                                                                                     }}
                                                                                 >
+                                                                                    {provideTags && !transparentTags && !hideTags &&<div
+                                                                                        onPointerDown={(e) => handleTagMouseDown(e, key, index)}
+                                                                                        // className="absolute top-[-15px] left-[-15px] w-4 h-4 bg-blue-600 rounded-tr cursor-move z-30"
+                                                                                        title="Drag"
+                                                                                    >
+                                                                                        <RiDragMoveFill
+                                                                                            className="absolute top-[-15px] left-[-15px] w-4 h-4 bg-slate-100 text-[var(--primary)] cursor-move z-30"
+                                                                                        />
+                                                                                    </div>}
 
                                                                                     <>
                                                                                         {selectedTag?.key && selectedTag.key === key && selectedTag.index === index &&
@@ -1123,7 +1134,7 @@ const SignDocument = () => {
                                                                                 </input> */}
 
                                                                                             {
-                                                                                                item.subType === "SINGLE_LINE" && <p
+                                                                                                !item.multiLine && <p
                                                                                                     // name={item.id}
                                                                                                     // style={{ height: item.dimensions.height + "px" }}
                                                                                                     onInput={(e) => {
@@ -1138,7 +1149,7 @@ const SignDocument = () => {
                                                                                                 ></p>
                                                                                             }
                                                                                             {
-                                                                                                item.subType === "PARAGRAPH" && <p
+                                                                                                item.multiLine && <p
                                                                                                     onInput={(e) => {
                                                                                                         const val = e.currentTarget.textContent;
                                                                                                         handleTagUpdate(index, val as string);
@@ -1149,7 +1160,7 @@ const SignDocument = () => {
                                                                                                 </p>
                                                                                             }
                                                                                             {
-                                                                                                item.subType === "PASSWORD" && item.mask && <p
+                                                                                                "maskType" in item && "maskCharacter" in item && item.maskType && <p
                                                                                                     onInput={(e) => {
                                                                                                         const val = e.currentTarget.textContent;
                                                                                                         handleTagUpdate(index, val as string);
@@ -1157,13 +1168,13 @@ const SignDocument = () => {
                                                                                                     onKeyDown={(e) => {
                                                                                                         if (e.key === "Enter") e.preventDefault();
                                                                                                     }}
-                                                                                                    onFocus={() => {
+                                                                                                    // onFocus={() => {
-                                                                                                    }}
+                                                                                                    // }}
                                                                                                     onBlur={(e) => {
                                                                                                         let val = e.target.textContent;
-                                                                                                        if (typeof item.mask?.maskType === "string" && typeof val === "string") {
+                                                                                                        if (typeof item.maskType === "string" && typeof val === "string") {
                                                                                                             val = val.replace(/ /g, "");
-                                                                                                            e.target.textContent = maskUtils((item.mask as { maskType: string }).maskType, val, (item.mask as { maskCharacter: string }).maskCharacter)
+                                                                                                            e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter)
                                                                                                         }
                                                                                                     }}
                                                                                                     contentEditable={true}
@@ -1174,6 +1185,125 @@ const SignDocument = () => {
                                                                                     }
                                                                                     {/* TEXT FIELD - END */}
 
+                                                                                    {/* EMAIL FIELD - START */}
+                                                                                    {
+                                                                                        item.type === "EMAIL" &&
+                                                                                        <div
+                                                                                            id={item.id}
+                                                                                            tabIndex={1}
+                                                                                            className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
+                                                                                        >
+                                                                                            {
+                                                                                                <p
+                                                                                                    // name={item.id}
+                                                                                                    // style={{ height: item.dimensions.height + "px" }}
+                                                                                                    onInput={(e) => {
+                                                                                                        const val = e.currentTarget.textContent;
+                                                                                                        handleTagUpdate(index, val as string);
+                                                                                                    }}
+                                                                                                    onKeyDown={(e) => {
+                                                                                                        if (e.key === "Enter") {
+                                                                                                            const val = e.currentTarget.textContent?.trim() || "";
+                                                                                                            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+                                                                                                            if (val && !emailRegex.test(val)) {
+                                                                                                                alert("Please enter a valid email address");
+                                                                                                                handleTagUpdate(index, "" as string)
+                                                                                                                e.currentTarget.textContent = "";
+                                                                                                                e.currentTarget.focus(); // Optional: return focus if invalid
+                                                                                                            }
+                                                                                                            e.preventDefault()
+                                                                                                        };
+                                                                                                    }}
+
+                                                                                                    onBlur={(e) => {
+                                                                                                        const val = e.currentTarget.textContent?.trim() || "";
+                                                                                                        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+                                                                                                        if (val && !emailRegex.test(val)) {
+                                                                                                            alert("Please enter a valid email address");
+                                                                                                            handleTagUpdate(index, "" as string)
+                                                                                                            e.currentTarget.textContent = "";
+                                                                                                            e.currentTarget.focus(); // Optional: return focus if invalid
+                                                                                                        }
+                                                                                                    }}
+                                                                                                    contentEditable={true}
+                                                                                                    className="outline-none whitespace-nowrap w-full max-h-max"
+                                                                                                ></p>
+                                                                                            }
+                                                                                        </div>
+                                                                                    }
+                                                                                    {/* EMAIL FIELD - END */}
+
+
+                                                                                    {/* NAME FIELD - START */}
+                                                                                    {
+                                                                                        item.type === "NAME" &&
+                                                                                        <div
+                                                                                            id={item.id}
+                                                                                            tabIndex={1}
+                                                                                            className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
+                                                                                        >
+                                                                                            {
+                                                                                                <p
+                                                                                                    // name={item.id}
+                                                                                                    // style={{ height: item.dimensions.height + "px" }}
+                                                                                                    onInput={(e) => {
+                                                                                                        const val = e.currentTarget.textContent;
+                                                                                                        handleTagUpdate(index, val as string);
+                                                                                                    }}
+                                                                                                    onKeyDown={(e) => {
+                                                                                                        if (e.key === "Enter") {
+                                                                                                            e.preventDefault()
+                                                                                                        };
+                                                                                                    }}
+
+                                                                                                    onBlur={(e) => {
+                                                                                                       
+                                                                                                    }}
+                                                                                                    contentEditable={true}
+                                                                                                    className="outline-none whitespace-nowrap w-full max-h-max"
+                                                                                                ></p>
+                                                                                            }
+                                                                                        </div>
+                                                                                    }
+                                                                                    {/* NAME FIELD - END */}
+
+
+
+                                                                                    {/* COMPANY FIELD - START */}
+                                                                                    {
+                                                                                        item.type === "COMPANY" &&
+                                                                                        <div
+                                                                                            id={item.id}
+                                                                                            tabIndex={1}
+                                                                                            className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
+                                                                                        >
+                                                                                            {
+                                                                                                <p
+                                                                                                    // name={item.id}
+                                                                                                    // style={{ height: item.dimensions.height + "px" }}
+                                                                                                    onInput={(e) => {
+                                                                                                        const val = e.currentTarget.textContent;
+                                                                                                        handleTagUpdate(index, val as string);
+                                                                                                    }}
+                                                                                                    onKeyDown={(e) => {
+                                                                                                        if (e.key === "Enter") {
+                                                                                                            e.preventDefault()
+                                                                                                        };
+                                                                                                    }}
+
+                                                                                                    onBlur={(e) => {
+                                                                                                       
+                                                                                                    }}
+                                                                                                    contentEditable={true}
+                                                                                                    className="outline-none whitespace-nowrap w-full max-h-max"
+                                                                                                ></p>
+                                                                                            }
+                                                                                        </div>
+                                                                                    }
+                                                                                    {/* COMPANY FIELD - END */}
+
 
                                                                                     {/* CHECKBOX FIELD - START */}
                                                                                     {
@@ -1403,12 +1533,12 @@ const SignDocument = () => {
                                                                                     {
                                                                                         (!transparentTags && !hideTags) && (focusElement && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) &&
                                                                                         <>
-                                                                                            <div
+                                                                                            {/* <div
                                                                                             className="absolute left-0 z-50 bg-blue-900 text-xs text-slate-100 px-2 py-[2px] rounded-sm whitespace-nowrap"
                                                                                             style={{ top: -23 + "px" }}
                                                                                         >
                                                                                             <p>{focusElement.label}</p>
-                                                                                            </div>
+                                                                                        </div> */}
                                                                                             <div
                                                                                                 className="absolute left-[-10px] z-50 flex max-w-max"
                                                                                                 style={{ left: -(item.dimensions.left + 20) + "px", top: ((item.dimensions.height / 2) - 18) + "px" }}
@@ -1468,11 +1598,27 @@ const SignDocument = () => {
 
                         </div>
 
-                        <div className={`col-span-2 ${provideTags ? "" : "order-first"}`}>
+                        <div className={`col-span-2 ${provideTags ? "" : "order-first"} overflow-y-auto`}>
-                            <DocumentPages
+                            {/* <DocumentPages
                                 selectedDocuments={selectedDocuments}
                                 setDropDownTogglePage={setDropDownTogglePage}
-                                dropDownTogglePage={dropDownTogglePage} />
+                                dropDownTogglePage={dropDownTogglePage} /> */}
+
+
+
+
+                            {provideTags && selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag &&
+                                <RightSideBar
+                                    droppedItems={droppedItems}
+                                    selectedTag={droppedItems[selectedTag.index]}
+                                    setDroppedItems={setDroppedItems}
+                                    selTagKey={selectedTag.key}
+                                    selTagIndx={selectedTag.index}
+                                    signClient={true}
+                                />}
+
+
+
                         </div>
 
                         {/* Right Side - START */}

src/components/home/StartSection.tsx

@@ -84,7 +84,7 @@ const StartSection = () => {
         <section className="px-4 pt-2 pb-3 w-full">
             <h2 className="text-lg font-semibold text-gray-800 mb-2">Get Started</h2>
 
-            <div className="grid grid-cols-3 gap-4">
+            <div className="grid grid-cols-3 gap-4 h-[12vw]">
 
                 <StartNow />
 
@@ -93,7 +93,7 @@ const StartSection = () => {
                         <div
                             onClick={() => handleStartSectionClick(card.link)}
                             key={index}
-                            className={`${card.bg} w-full max-h-max cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`}
+                            className={`${card.bg} w-full cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`}
                         >
                             {/* Icon + Text */}
                             <div className="flex flex-col gap-3">
@@ -124,7 +124,7 @@ const StartSection = () => {
             </div>
 
             <section className='pt-2 pb-3'>
-                <h2 className="mt-3 text-lg font-semibold text-gray-800 mb-2">Recent Activities</h2>
+                <h2 className="mt-6 text-lg font-semibold text-gray-800 mb-2">Recent Activities</h2>
                 <section>
                     <TransactionDataTable />
                 </section>

src/components/process/CompletionScreen/DocumentCompletionScreen.tsx

@@ -448,7 +448,7 @@ const DocumentSubmissionOptions = () => {
                 </div>
 
 
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 ">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 max-w-5xl mx-auto">
                     {/* Left Panel - Configuration */}
                     <div className="space-y-6 ">
 

src/components/process/processStepTwo/DocumentContainer.tsx

@@ -4,7 +4,7 @@ import { RootState } from '../../../store/store'
 
 import api from '../../../config/api';
 
-import RightSideBar, { TEXT } from './rightSideBar/RightSideBar';
+import RightSideBar, { MASKTYPE, TEXT } from './rightSideBar/RightSideBar';
 import { DroppedItem, TagsTypes } from '../../../utlity/types';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -89,141 +89,24 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
                 for (const tag of res.data) {
                     const key = `${tag.documentId}_${tag.pageIndex}`;
                     if (recTags[key]) {
-                        recTags[key].push({ ...tag, update: false });
+                        recTags[key].push(tag);
                     } else {
-                        recTags[key] = [{ ...tag, update: false }]; // Initialize with an array
+                        recTags[key] = [tag]; // Initialize with an array
-                    }
-                }
-            }
-            // console.log(recTags, "Line 83");
-            setDroppedItems(recTags)
-            // Handle your response here
-        } catch (err) {
-            console.error(err);
-        }
-    };
-
-    // FETCHING TAG - START
-    useEffect(() => {
-        if (selectedRecipients.length === 0) return;
-        fetchTags();
-    }, [selectedRecipients]);
-
-    // FETCHING TAG - END
-
-
-    const [droppedItemsCounter, setDroppedItemsCounter] = useState<number>(1);
-    const [selectedTag, setSelectedTag] = useState<{ key: string, index: number } | null>(null);
-
-    // NAVIGATING to Dashboard if Transaction is not created - START
-    useLayoutEffect(() => {
-        if (transactionId) return;
-        navigate("/");
-    }, [transactionId])
-    // NAVIGATING to Dashboard if Transaction is not created - END
-
-
-    const groupByRecipientId = (tagsArray: any[]) => {
-        const tagsData: Record<number, any[]> = {};
-
-        for (const tag of tagsArray) {
-            const recipientId = tag.recipientId;
-
-            if (!tagsData[recipientId]) {
-                tagsData[recipientId] = [];
-            }
-
-            tagsData[recipientId].push(tag);
-        }
-
-        return tagsData;
-    };
-
-    const sendTagsToRecipients = async (
-        tagsData: Record<number, any[]>,
-        accountId: string,
-        transactionId: string
-    ) => {
-        // tagsData = tagsData.filter((tag, indx) => (("update" in tag && tag.update) || !("id" in tag)) )
-        // Filter Tags that needs to update
-        const updatedData = {}
-
-        // debugger
-
-        for (const [recipientId, tags] of Object.entries(tagsData)) {
-            // console.log(recipientId, tags, "line 133")
-            const updateTags = []
-            for (const tag of tags) {
-                if ("update" in tag && tag.update) {
-                    updateTags.push(tag)
-                }
-                if (updateTags.length && "update" in updateTags[updateTags.length - 1]) {
-                    delete updateTags[updateTags.length - 1].update
-                }
-            }
-            updatedData[recipientId] = updateTags
-        }
-
-        const requests = Object.entries(updatedData).filter(([recipientId, tags]) => {
-            if (tags.length === 0) return false;
-            return api.put(
-                `/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags`,
-                tags
-            );
-        });
-
-        try {
-            const response = await Promise.all(requests);
-
-            let recTags = droppedItems;
-
-            for (const res of response) {
-                for (const tag of res.data) {
-                    const key = `${tag.documentId}_${tag.pageIndex}`;
-                    if (recTags[key]) {
-                        recTags[key].push({ ...tag, update: false });
-                    } else {
-                        recTags[key] = [{ ...tag, update: false }]; // Initialize with an array
                     }
                 }
             }
 
-            setSelectedTag(null);
-
-            // setTimeout(async () => {
-            //     await fetchTags()
-            //     setSelectedTag(null);
-            // }, 1000)
-
-            // console.log(droppedItemsUpdateFalse, "Line 182")
-            // setDroppedItems(droppedItemsUpdateFalse);
-        } catch (error) {
-            console.error("Error submitting recipient tags:", error);
-        }
-    };
 
 
-    const handleTransactionProcess = async (save: boolean = false) => {
-        console.log(droppedItems, "called Line 189");
-        if (Object.keys(droppedItems).length === 0) return;
-        if (!save && isSend === null) return;
 
-        !save && dispatch(showLoader("Loading ..."))
 
-        let updatedTags = { ...droppedItems }
 
-        // const sendTags = {
-        //     "mod": [],
-        //     "remove": []
-        // }
 
+            let updatedTags = { ...recTags }
             let tagsData = []
 
-        // const modified = []
-        // const remove = []
-
-        // console.log(updatedTags, "updatedTags");
             for (const dropPageIds of Object.keys(updatedTags)) {
+
                 for (const dropTag of updatedTags[dropPageIds]) {
                     let mask = null
 
@@ -241,7 +124,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
 
                     const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
 
-
                     const updatedTagData = {
                         "id": "id" in dropTag ? dropTag.id : null,
                         "label": dropTag.label,
@@ -272,10 +154,15 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
                         "readOnly": false,
                     }
 
-                if ("format" in dropTag) {
+                    // if ("format" in dropTag) {
-                    updatedTagData.format = `${dropTag.subType}`.toUpperCase();
+                    //     updatedTagData.format = `${dropTag.subType}`.toUpperCase();
-                    updatedTagData.dateFormat = dropTag.format;
+                    //     updatedTagData.dateFormat = dropTag.format;
-                    updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
+                    //     updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
+                    // }
+
+                    if("format" in dropTag && dropTag.format) {
+                        updatedTagData.subType = dropTag.format.toLowerCase(); 
+                        updatedTagData.format = dropTag.dateFormat; 
                     }
 
                     if (`${dropTag.type}`.toLowerCase() === "number") {
@@ -283,9 +170,16 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
                         updatedTagData.isCurrency = dropTag.isCurrency
                     }
 
-                if (updatedTagData.type === "TEXT") {
+                    if (dropTag.type === "TEXT") {
-                    updatedTagData.multiLine = dropTag.subType === "paragraph"
+                        // updatedTagData.multiLine = dropTag.subType === "paragraph"
-                    if (dropTag.subType === "password") {
+
+                        if(dropTag.multiLine) {
+                            updatedTagData.subtype = TEXT.PARAGRAPH
+                        } else {
+                            updatedTagData.subtype = TEXT.SINGLE_LINE
+                        } 
+
+                        if ("maskType" in dropTag) {
                             updatedTagData.maskCharacter = mask.character
                             updatedTagData.maskType = mask.type
                         }
@@ -307,16 +201,218 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
                 }
             }
 
-        tagsData = groupByRecipientId(tagsData);
+            setDroppedItems(recTags)
+            // Handle your response here
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    // FETCHING TAG - START
+    useEffect(() => {
+        if (selectedRecipients.length === 0) return;
+        fetchTags();
+    }, [selectedRecipients]);
+
+    // FETCHING TAG - END
 
 
-        console.log("Hefre is the line 299", tagsData);
+    const [droppedItemsCounter, setDroppedItemsCounter] = useState<number>(1);
+    const [selectedTag, setSelectedTag] = useState<{ key: string, index: number } | null>(null);
+
+    // NAVIGATING to Dashboard if Transaction is not created - START
+    useLayoutEffect(() => {
+        if (transactionId) return;
+        navigate("/");
+    }, [transactionId])
+    // NAVIGATING to Dashboard if Transaction is not created - END
+
+
+    const groupByRecipientId = (tagsArray: any[]) => {
+        const tagsData: Record<number, any[]> = {};
+        for (const tag of tagsArray) {
+            const recipientId = tag.recipientId;
+
+            if (!tagsData[recipientId]) {
+                tagsData[recipientId] = [];
+            }
+            tagsData[recipientId].push(tag);
+        }
+        return tagsData;
+    };
+
+    const sendTagsToRecipients = async (
+        tagsData: Record<number, any[]>,
+        accountId: string,
+        transactionId: string
+    ) => {
+        // tagsData = tagsData.filter((tag, indx) => (("update" in tag && tag.update) || !("id" in tag)) )
+        // Filter Tags that needs to update
+        const updatedData = {}
+
+        // debugger
+
+        for (const [recipientId, tags] of Object.entries(tagsData)) {
+            // console.log(recipientId, tags, "line 133")
+            const updateTags = []
+            for (const tag of tags) {
+                if ("update" in tag && tag.update) {
+                    updateTags.push(tag)
+                }
+                if (updateTags.length && "update" in updateTags[updateTags.length - 1]) {
+                    delete updateTags[updateTags.length - 1].update
+                }
+            }
+
+            updatedData[recipientId] = updateTags
+        }
+
+        const requests = Object.entries(updatedData).filter(([recipientId, tags]) => {
+            if (tags.length === 0) return false;
+            return api.put(
+                `/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags`,
+                tags
+            );
+        });
+
+        try {
+            const responses = await Promise.all(requests);
+
+            const droppedItemsUpdateFalse = Object.fromEntries(
+                Object.entries(droppedItems).map(([recipientId, tags]) => {
+                    return [recipientId, tags.map(tag => ({ ...tag, update: false }))];
+                })
+            )
+
+            console.log(droppedItemsUpdateFalse, "Line 182")
+
+            // setDroppedItems(droppedItemsUpdateFalse);
+        } catch (error) {
+            console.error("Error submitting recipient tags:", error);
+        }
+    };
+
+
+    const handleTransactionProcess = async (save: boolean = false) => {
+        if (Object.keys(droppedItems).length === 0) return;
+        if (!save && isSend === null) return;
+
+        // !save && dispatch(showLoader("Loading ..."))
+
+        // let updatedTags = { ...droppedItems }
+
+        // const sendTags = {
+        //     "mod": [],
+        //     "remove": []
+        // }
+
+        // let tagsData = []
+
+        // const modified = []
+        // const remove = []
+
+        // console.log(updatedTags, "updatedTags");
+        // for (const dropPageIds of Object.keys(updatedTags)) {
+        //     for (const dropTag of updatedTags[dropPageIds]) {
+        //         let mask = null
+
+        //         // console.log(dropTag, "line 132")
+
+        //         // if (dropTag.subType?.toLowerCase() === "password") {
+        //         //     console.log(dropTag)
+        //         mask = {
+        //             "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null,
+        //             "character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
+        //         }
+        //         // }
+
+        //         // console.log(dropTag, "line 204")
+
+        //         const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
+
+        //         const updatedTagData = {
+        //             "id": "id" in dropTag ? dropTag.id : null,
+        //             "label": dropTag.label,
+        //             "dimensions": dropTag.dimensions,
+        //             "type": dropTag.type.toUpperCase(),
+        //             // "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null),
+        //             "minLength": "minLength" in dropTag ? dropTag.minLength : 0,
+        //             "maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0,
+        //             "error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
+        //             "regex": "regex" in dropTag ? dropTag.regex : []
+        //             // }
+        //             ,
+        //             "documentId": dropTag.documentId,
+        //             "options": ("options" in dropTag) ? dropTag.options : [],
+        //             "pageIndex": dropTag.pageIndex,
+        //             "recipientId": dropTag.recipientId,
+        //             "styles": "styles" in dropTag ? dropTag.styles : {
+        //                 "font": "",
+        //                 "italic": false,
+        //                 "bold": false,
+        //                 "underline": false,
+        //                 "color": "black",
+        //                 "textSize": 0
+        //             },
+        //             "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
+        //             // "required": "required" in dropTag ? dropTag.required : ,
+        //             "update": "update" in dropTag ? dropTag.update : false,
+        //             "readOnly": false,
+        //         }
+
+        //         if ("format" in dropTag) {
+        //             updatedTagData.format = `${dropTag.subType}`.toUpperCase();
+        //             updatedTagData.dateFormat = dropTag.format;
+        //             updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
+        //         }
+
+        //         if (`${dropTag.type}`.toLowerCase() === "number") {
+        //             updatedTagData.decimalPlace = dropTag.decimalPlace
+        //             updatedTagData.isCurrency = dropTag.isCurrency
+        //         }
+
+        //         if (updatedTagData.type === "TEXT") {
+        //             updatedTagData.multiLine = dropTag.subType === "paragraph"
+        //             if (dropTag.subType === "password") {
+        //                 updatedTagData.maskCharacter = mask.character
+        //                 updatedTagData.maskType = mask.type
+        //             }
+        //         }
+
+        //         // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
+
+        //         if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT"
+        //         if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
+
+        //         if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
+
+        //         if (!updatedTagData.id) delete updatedTagData.id;
+
+        //         if (!isDeleted) {
+        //             // sendTags.mod.push(updatedTagData);
+        //             tagsData.push(updatedTagData)
+        //         }
+        //     }
+        // }
+
+        let updatedTags : any = [];
+
+        for (const dropPagesId of Object.keys(droppedItems)) {
+            console.log("Dropped Item:", droppedItems[dropPagesId]);
+            updatedTags.push(...droppedItems[dropPagesId]);
+        }
+
+
+        console.log(updatedTags, "updatedTags")
+
+        let tagsData = groupByRecipientId(updatedTags);
 
         await sendTagsToRecipients(tagsData, accountId, transactionId);
 
         // if (save) {
-        //     setSelectedTag(null);
+        //     if (selectedRecipients.length === 0) return;
-        //     await fetchTags();
+        //     fetchTags();
+        //     setSelectedTag(null)
         // }
 
         // SENDING Transaction - START
@@ -340,7 +436,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
         const interval = setInterval(async () => {
             // debugger
             setTransactionSaving(true)
-            handleTransactionProcess(true);
+            // handleTransactionProcess(true);
         }, 8000)
         // }, 8000)
         return () => clearInterval(interval);
@@ -383,11 +479,11 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
         // const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
 
         let prepData = {
-            properties: data.properties,
+            ...data.properties,
             icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
             type: dragElemData.label,
             label: dragElemData.label,
-            subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
+            // subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
             dimensions: {
                 left: x,
                 top: y,
@@ -953,85 +1049,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
         return () => clearTimeout(timeoutId);
     }, [droppedItems]); // Re-run when droppedItems changes
 
-
-    const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => {
-        if (!selectedTag) return;
-
-        const { key, index } = selectedTag;
-        const currentItem = droppedItems[key]?.[index];
-
-        if (!currentItem) return;
-
-        let newLeft = currentItem.dimensions.left;
-        let newTop = currentItem.dimensions.top;
-
-        switch (direction) {
-            case 'up':
-                newTop = Math.max(0, newTop - stepSize);
-                break;
-            case 'down':
-                newTop = newTop + stepSize;
-                break;
-            case 'left':
-                newLeft = Math.max(0, newLeft - stepSize);
-                break;
-            case 'right':
-                newLeft = newLeft + stepSize;
-                break;
-        }
-
-        setDroppedItems({
-            ...droppedItems,
-            [key]: Array.isArray(droppedItems[key])
-                ? droppedItems[key].map((item, i) =>
-                    i === index
-                        ? { ...item, dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
-                        : item
-                )
-                : [],
-        });
-    };
-
-    const directionalControlsHandler = (direction: 'up' | 'down' | 'left' | 'right') => {
-        handleDirectionalMove(direction, 5); // Use default stepSize of 5
-    };
-
-    // Add this new handler function to your parent component
-    const handleDirectPositionChange = (newLeft: number, newTop: number) => {
-        console.log("handleDirectPositionChange", newLeft, newTop)
-        if (!selectedTag) return;
-
-        const { key, index } = selectedTag;
-        const currentItem = droppedItems[key]?.[index];
-
-        if (!currentItem) return;
-
-        // Ensure values are not negative
-        const clampedLeft = Math.max(0, newLeft);
-        const clampedTop = Math.max(0, newTop);
-
-        setDroppedItems({
-            ...droppedItems,
-            [key]: Array.isArray(droppedItems[key])
-                ? droppedItems[key].map((item, i) =>
-                    i === index
-                        ? {
-                            ...item,
-                            dimensions: {
-                                ...item.dimensions,
-                                left: clampedLeft,
-                                top: clampedTop
-                            },
-                            update: true
-                        }
-                        : item
-                )
-                : [],
-        });
-    };
-
-    console.log(droppedItems, "Line 1022")
-
     return (
         <>
             {/* Center Doc Container - START */}
@@ -1163,7 +1180,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
                                                     />
 
 
-
                                                     {/* Side details of documents Pages and document Name - START */}
                                                     <p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs left-[-60px] text-slate-600'>
                                                         page {indx + 1} of {doc.pages && doc.pages.length}
@@ -1189,17 +1205,16 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
 
             </div >
 
-            {
+            {selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && <RightSideBar
-                console.log(selectedTag, droppedItems, "Line 1175")
+                droppedItems={droppedItems}
-            }
+                selectedTag={droppedItems[selectedTag.key][selectedTag.index]}
+                setDroppedItems={setDroppedItems}
+                selTagKey={selectedTag.key}
+                selTagIndx={selectedTag.index}
+                signClient={false}
+            />
 
-            {selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && <RightSideBar selectedTag={droppedItems[selectedTag.key][selectedTag.index]} setDroppedItems={setDroppedItems} selTagKey={selectedTag.key} selTagIndx={selectedTag.index} DirectionalControlsProps={{
+            }
-                onMove: directionalControlsHandler,
-                onPositionChange: handleDirectPositionChange,
-                disabled: false,
-                stepSize: 5,
-                className: ''
-            }} />}
             {/* Center Doc Container - END */}
         </>
     )

src/components/process/processStepTwo/FieldList.tsx

@@ -99,6 +99,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
                     .map((type) => prioritized.find((tag: any) => tag.type === type))
                     .filter(Boolean); // remove undefined in case not found
 
+
                 setTagsData([...prioritizedSorted, ...others]);
             })
             .catch((err) => {

src/components/process/processStepTwo/NavTwo.tsx

@@ -145,7 +145,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
                     transition: Bounce,
                 });
             }
-        }, 0)
+        }, 1000)
     }
 
     const handleSetIsFields = (setTo: boolean) => {

src/components/process/processStepTwo/rightSideBar/DirectionalControls.tsx

@@ -67,7 +67,10 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
   };
 
   const handleKeyPress = (e: React.KeyboardEvent, type: 'left' | 'top') => {
-    if (e.key === 'Enter') handlePositionInputBlur(type);
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handlePositionInputBlur(type)
+    };
   };
 
   useEffect(() => {
@@ -106,13 +109,13 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
   return (
     <div className={`inline-flex flex-col items-center space-y-2 text-[12px] ${className}`}>
       {/* Top */}
-      <button onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move Up">
+      <button type="button" onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move Up">
         <FaArrowUp />
       </button>
 
       {/* Middle: Left / Inputs / Right */}
       <div className="flex items-center space-x-3">
-        <button onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move Left">
+        <button type="button" onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move Left">
           <FaArrowLeft />
         </button>
 
@@ -121,7 +124,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
           <input
             type="number"
             value={leftValue}
-            onChange={(e) => handlePositionInputChange('left', e.target.value)}
+            onChange={(e) => {e.preventDefault; handlePositionInputChange('left', e.target.value)}}
             onBlur={() => handlePositionInputBlur('left')}
             onKeyPress={(e) => handleKeyPress(e, 'left')}
             disabled={disabled}
@@ -131,7 +134,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
           <input
             type="number"
             value={topValue}
-            onChange={(e) => handlePositionInputChange('top', e.target.value)}
+            onChange={(e) => {e.preventDefault; handlePositionInputChange('top', e.target.value)}}
             onBlur={() => handlePositionInputBlur('top')}
             onKeyPress={(e) => handleKeyPress(e, 'top')}
             disabled={disabled}
@@ -140,13 +143,13 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
           />
         </div>
 
-        <button onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move Right">
+        <button type="button" onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move Right">
           <FaArrowRight />
         </button>
       </div>
 
       {/* Bottom */}
-      <button onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move Down">
+      <button type="button" onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move Down">
         <FaArrowDown />
       </button>
       {/* Middle Row: Left - Center (Inputs) - Right */}

src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx

@@ -27,16 +27,18 @@ import DirectionalControls from "./DirectionalControls";
 // }
 
 export interface DroppedItemProps {
+    droppedItems: DroppedItem[]
     selectedTag: DroppedItem
     setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>
     selTagKey: string,
     selTagIndx: number,
-    DirectionalControlsProps: {
+    signClient: boolean,
-        onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
+    // DirectionalControlsProps: {
-        disabled?: boolean;
+    // onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
-        stepSize?: number;
+    // disabled?: boolean;
-        className?: string;
+    // stepSize?: number;
-    }
+    // className?: string;
+    // }
 }
 
 export enum TEXT {
@@ -103,14 +105,12 @@ const defaultStyles = {
 
 
 
-const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems, selTagKey, selTagIndx, DirectionalControlsProps }) => {
+const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, setDroppedItems, selTagKey, selTagIndx, signClient = false }) => {
+
+    console.log("Right SideBar Called", selectedTag, selTagKey, selTagIndx, droppedItems)
 
     const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
 
-    console.log("selectedTag", selectedTag, selectedType)
-
-
-
     const [styles, setStyles] = useState(defaultStyles);
 
     const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null);
@@ -118,32 +118,12 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
     const [styleOpen, setStyleOpen] = useState(false);
 
     const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => {
-
         console.log("changeTo", changeTo, "changeWith", changeWith)
         if (changeTo === '' || changeWith === '') return
 
-        // if (changeTo === "subType" && (changeWith === TEMPORAL.DATE || changeWith === TEMPORAL.DATE_TIME || changeWith === TEMPORAL.TIME)) {
-        //     // let change: string = changeWith;
-        //     // if (change === "DATE TIME") {
-        //     //     change = "DATE_TIME"
-        //     // }
-        //     setDroppedItems((prev) => {
-        //         console.log("Temporal30", prev);
-        //         return {
-        //             ...prev,
-        //             [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
-        //                 ? prev[selTagKey].map((item, i) =>
-        //                     i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "", update: true } : item
-        //                 )
-        //                 : [], // Fallback in case it's undefined or not an array
-        //         };
-        //     });
-
-        // } else 
-            
         if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
-            console.log("Second check")
+
-            console.log("Line 161")
+            if (!signClient) {
                 setDroppedItems((prev) => (
                     {
                         ...prev,
@@ -154,13 +134,19 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
                             : [],
                     }
                 ));
+            } else {
+                setDroppedItems((prev) => {
+                    const updated = [...prev];
+                    updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true }
+                    return updated;
+                })
             }
-        else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
+        } else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
-            console.log("Third check")
             let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
             const isCurrency = changeWith === NUMBER.CURRENCY;
             // const currencyType = null
 
+            if (!signClient) {
                 setDroppedItems((prev) => (
                     {
                         ...prev,
@@ -171,15 +157,22 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
                             : [],
                     }// Provide a fallback in case it's undefined or not an array
                 ));
+            } else {
+                setDroppedItems((prev) => {
+                    const updated = [...prev];
+                    updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true }
+                    return updated;
+                })
+            }
 
         }
 
 
 
         else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
-            console.log("Fourth Check")
+
             let val = timeFormats[0].format;
-            console.log(is24Hrs, "is24Hrs Line 176")
+
             if (is24Hrs === null) {
                 val = timeFormats[0].format
             } else if (!is24Hrs) {
@@ -193,6 +186,8 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
             //     changeWith = changeWith + " " + val;
             // }
 
+
+            if (!signClient) {
                 setDroppedItems((prev) => {
                     const updatedArray = Array.isArray(prev[selTagKey])
                         ? prev[selTagKey].map((item, i) => {
@@ -210,9 +205,18 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
                         [selTagKey]: updatedArray,
                     };
                 });
+            } else {
+                setDroppedItems((prev) => {
+                    const updated = [...prev];
+                    updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith + " " + val, update: true }
+                    return updated;
+                })
+            }
         }
 
         else {
+
+            if (!signClient) {
                 setDroppedItems((prev) => {
 
                     const updatedItems = Array.isArray(prev[selTagKey])
@@ -221,13 +225,18 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
                         )
                         : [];
 
-                console.log('Updated items:', updatedItems);
-
                     return {
                         ...prev,
                         [selTagKey]: updatedItems,
                     };
                 });
+            } else {
+                setDroppedItems((prev) => {
+                    const updated = [...prev];
+                    updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
+                    return updated;
+                })
+            }
 
         }
         setDropDownToggle(null)
@@ -319,6 +328,110 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
         handlePropertyChange("styles", updatedStyles);
     };
 
+    const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => {
+        if (!selectedTag) return;
+
+        const currentItem = droppedItems[selTagKey]?.[selTagIndx];
+
+        if (!currentItem) return;
+
+        let newLeft = currentItem.dimensions.left;
+        let newTop = currentItem.dimensions.top;
+
+        switch (direction) {
+            case 'up':
+                newTop = Math.max(0, newTop - stepSize);
+                break;
+            case 'down':
+                newTop = newTop + stepSize;
+                break;
+            case 'left':
+                newLeft = Math.max(0, newLeft - stepSize);
+                break;
+            case 'right':
+                newLeft = newLeft + stepSize;
+                break;
+        }
+
+        if (!signClient) {
+            setDroppedItems({
+                ...droppedItems,
+                [selTagKey]: Array.isArray(droppedItems[selTagKey])
+                    ? droppedItems[selTagKey].map((item, i) =>
+                        i === selTagIndx
+                            ? { ...item, dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
+                            : item
+                    )
+                    : [],
+            });
+        } else {
+            setDroppedItems((prev) => {
+                const updated = [...prev];
+                updated[selTagIndx] = { ...updated[selTagIndx], dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
+                return updated;
+            })
+        }
+    };
+
+    const directionalControlsHandler = (direction: 'up' | 'down' | 'left' | 'right') => {
+        handleDirectionalMove(direction, 5); // Use default stepSize of 5
+    };
+
+    const handleDirectPositionChange = (newLeft: number, newTop: number) => {
+        if (!selectedTag) return;
+
+        const currentItem = droppedItems[selTagKey]?.[selTagIndx];
+
+        if (!currentItem) return;
+
+        // Ensure values are not negative
+        const clampedLeft = Math.max(0, newLeft);
+        const clampedTop = Math.max(0, newTop);
+
+        if (!signClient) {
+            setDroppedItems({
+                ...droppedItems,
+                [selTagKey]: Array.isArray(droppedItems[selTagKey])
+                    ? droppedItems[selTagKey].map((item, i) =>
+                        i === selTagIndx
+                            ? {
+                                ...item,
+                                dimensions: {
+                                    ...item.dimensions,
+                                    left: clampedLeft,
+                                    top: clampedTop
+                                },
+                                update: true
+                            }
+                            : item
+                    )
+                    : [],
+            });
+        } else {
+            setDroppedItems((prev) => {
+                const updated = [...prev];
+                updated[selTagIndx] = {
+                        ...item,
+                        dimensions: {
+                            ...item.dimensions,
+                            left: clampedLeft,
+                            top: clampedTop
+                        },
+                        update: true
+                    }
+                return updated
+            })
+        }
+    };
+
+    const DirectionalControlsProps = {
+        onMove: directionalControlsHandler,
+        onPositionChange: handleDirectPositionChange,
+        disabled: false,
+        stepSize: 5,
+        className: ''
+    }
+
 
     return (
         <>

src/components/transactions/AuditModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
     FiX,
     FiCheckCircle,
@@ -14,166 +14,205 @@ import {
     FiPackage,
     FiMapPin,
     FiEye,
-  FiRotateCcw
+    FiRotateCcw,
+    FiSend,
+    FiMail,
+    FiActivity,
+    FiRefreshCw,
+    FiLock,
+    FiUnlock,
+    FiUserPlus,
+    FiEdit
 } from "react-icons/fi";
+import api from "../../config/api";
+import { useParams } from "react-router-dom";
+import logoRecord from '../../assets/record.svg'
+import LoaderUi from "../../helper/LoaderUi";
+import { FaRegEyeSlash } from "react-icons/fa";
+import { MdAccessTime, MdCancel } from "react-icons/md";
 
 interface AuditModalProps {
     closeModal: () => void;
 }
 
 const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
-  const [activeTab, setActiveTab] = useState<'status' | 'audit'>('status');
+    const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
+
+    if (!accountId || !transactionId) {
+        window.location.href = "/";
+        return null;
+    }
+
+    let [auditStatus, setAuditStatus] = useState([])
+    let [loading, setLoading] = useState(false)
+    const getAuditDetails = async () => {
+        setLoading(true)
+        try {
+            let res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/audit`)
+            if (res?.status === 200) {
+                // console.log(res?.data?.events)
+                let auditResponse = res?.data?.events
+                setAuditStatus(auditResponse)
+            }
+        } catch (error) {
+            console.log(error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    useEffect(() => {
+        if (accountId && transactionId) {
+            getAuditDetails()
+        }
+    }, [accountId, transactionId])
+
 
     const statusHistory = [
         {
-      id: 1,
+            "action": "SENT",
-      title: "The Accrual status has been successfully changed to Approved.",
+            "message": "Transaction Sent by John Doe <john@email.com>",
-      author: "Alexander Turner",
+            "status": "SENT",
-      role: "Analyst Perspective on Transaction",
+            "eventData": {
-      time: "34m ago",
+                "ip": "192.168.1.1",
-      fromStatus: "Ready to Review",
+                "longitude": "3.3792",
-      toStatus: "Approved",
+                "latitude": "6.5244",
-      icon: <FiCheckCircle className="w-4 h-4" />,
+                "timezone": "WAT"
-      statusColor: "text-green-600"
+            },
+            "timestamp": "2025-01-15T10:30:00Z",
+            "language": "en"
         },
         {
-      id: 2,
+            "action": "INVITED",
-      title: "The Accrual has been updated to reflect a status of Reject.",
+            "message": "Invitation Sent to Jane Smith <jane@email.com> to sign documents",
-      author: "Alexander Turner",
+            "status": "SENT",
-      time: "3h ago",
+            "eventData": {
-      fromStatus: "Ready to Review",
+                "ip": "0.0.0.0",
-      toStatus: "Rejected",
+                "longitude": "11",
-      icon: <FiXCircle className="w-4 h-4" />,
+                "latitude": "12",
-      statusColor: "text-red-600"
+                "timezone": ""
+            },
+            "timestamp": "2025-01-15T11:45:00Z",
+            "language": "es"
         },
         {
-      id: 3,
+            "action": "VIEWED",
-      title: "The Accrual has been revised for accuracy.",
+            "message": "Document viewed by recipient Alice Johnson <alice@email.com>",
-      author: "Alex Turner",
+            "status": "VIEWED",
-      role: "Manager View Transaction State",
+            "eventData": {
-      time: "7d ago",
+                "ip": "203.0.113.5",
-      fromStatus: "Rejected",
+                "longitude": "-74.0059",
-      toStatus: "Reviewed",
+                "latitude": "40.7128",
-      icon: <FiRotateCcw className="w-4 h-4" />,
+                "timezone": "EST"
-      statusColor: "text-yellow-600"
+            },
+            "timestamp": "2025-01-15T14:20:00Z",
+            "language": "en"
         },
         {
-      id: 4,
+            "action": "SIGNED",
-      title: "The Accrual state has been updated from 'ready' to 'under review'.",
+            "message": "Document signed by Bob Wilson <bob@email.com>",
-      author: "Alexander Turner",
+            "status": "COMPLETED",
-      role: "Analyst Perspective on Transaction",
+            "eventData": {
-      time: "34m ago",
+                "ip": "198.51.100.10",
-      fromStatus: "Ready to Review",
+                "longitude": "-122.4194",
-      toStatus: "Reviewed",
+                "latitude": "37.7749",
-      icon: <FiEye className="w-4 h-4" />,
+                "timezone": "PST"
-      statusColor: "text-blue-600"
             },
-    {
+            "timestamp": "2025-01-15T16:10:00Z",
-      id: 5,
+            "language": "en"
-      title: "The Accrual has been updated from rejected to reviewed.",
-      author: "Alex Turner",
-      role: "Analyst View Transaction",
-      time: "34m ago",
-      fromStatus: "Rejected",
-      toStatus: "Reviewed",
-      icon: <FiRotateCcw className="w-4 h-4" />,
-      statusColor: "text-blue-600"
         }
     ];
 
-  const auditTrail = [
+    const getActionIcon = (action: string) => {
-    {
+        const icons = {
-      id: 1,
+            'CREATED': <FiFileText className="w-4 h-4 text-sky-500" />,
-      title: "Batch 11317 Pickup Request Created",
+            'SENT': <FiSend className="w-4 h-4" />,
-      author: "Sandra Darlington",
+            'INVITED': <FiMail className="w-4 h-4" />,
-      location: "Lagos General Hospital Gbagada",
+            'COMPLETED': <FiCheckCircle className="w-4 h-4" />,
-      time: "11 Aug, 2023 09:23 AM",
+            'RE_SENT_INVITATION': <FiRefreshCw className="w-4 h-4" />,
-      icon: <FiPackage className="w-4 h-4" />,
+            'RE_SENT_EXPIRED_INVITATION': <FiRefreshCw className="w-4 h-4" />,
-      type: "created"
+            'VIEWED': <FiEye className="w-4 h-4" />,
-    },
+            'VIEWED_IN_PERSON': <FaRegEyeSlash className="w-4 h-4" />, // Slightly different eye icon
-    {
+            'AUTH_FAILED': <FiXCircle className="w-4 h-4 text-red-500" />,
-      id: 2,
+            'ACCESS_CODE_FAILED': <FiLock className="w-4 h-4 text-red-500" />,
-      title: "Batch 11317 Pickup Request",
+            'ACCESS_CODE_VALIDATED': <FiUnlock className="w-4 h-4 text-green-500" />,
-      author: "Oladejo Israel",
+            'AUTH_VALIDATED': <FiCheckCircle className="w-4 h-4 text-green-500" />,
-      location: "Institute of Human Virology H3Africa BioRepository",
+            'SIGNED': <FiCheckCircle className="w-4 h-4" />,
-      time: "12 Aug, 2023 11:19 AM",
+            'EXPIRED': <MdAccessTime className="w-4 h-4 text-gray-500" />,
-      status: "Approved",
+            'CANCELLED': <MdCancel className="w-4 h-4 text-red-500" />,
-      icon: <FiCheckCircle className="w-4 h-4" />,
+            'DECLINED': <FiXCircle className="w-4 h-4 text-red-500" />,
-      type: "approved"
+            'PENDING': <FiClock className="w-4 h-4" />,
-    },
+            'ASSIGNED': <FiUserCheck className="w-4 h-4" />,
-    {
+            'REASSIGNED': <FiUserPlus className="w-4 h-4" />,
-      id: 3,
+            'EDITED': <FiEdit className="w-4 h-4" />,
-      title: "Batch 11317 was Initiated",
+        };
-      author: "Sandra Darlington",
+
-      location: "Lagos General Hospital Gbagada",
+        return icons[action as keyof typeof icons] || <FiActivity className="w-4 h-4" />;
-      time: "12 Aug, 2023 11:19 AM",
+    };
-      icon: <FiFileText className="w-4 h-4" />,
+
-      type: "initiated"
+    const getActionColor = (action: string, status: string) => {
-    },
+        if (status === 'COMPLETED') return 'text-green-600';
-    {
+        if (status === 'FAILED' || status === 'REJECTED') return 'text-red-600';
-      id: 4,
+        if (status === 'PENDING') return 'text-yellow-600';
-      title: "Sandra Darlington Assigned batch 11317",
+
-      assignee: "Yusuf Ahmed",
+        const colors = {
-      time: "12 Aug, 2023 11:20 AM",
+            'SENT': 'text-blue-600',
-      icon: <FiUserCheck className="w-4 h-4" />,
+            'INVITED': 'text-indigo-600',
-      type: "assigned"
+            'VIEWED': 'text-purple-600',
-    },
+            'SIGNED': 'text-green-600',
-    {
+            'REJECTED': 'text-red-600'
-      id: 5,
+        };
-      title: "Batch 11317 was rejected by Yusuf Ahmed",
+        return colors[action as keyof typeof colors] || 'text-gray-600';
-      reason: "due to faulty vehicle",
+    };
-      time: "12 Aug, 2023 11:20 AM",
-      icon: <FiXCircle className="w-4 h-4" />,
-      type: "rejected"
-    },
-    {
-      id: 6,
-      title: "Sandra Darlington Assigned batch 11317",
-      assignee: "Kolado Jolade",
-      time: "12 Aug, 2023 11:20 AM",
-      icon: <FiUserCheck className="w-4 h-4" />,
-      type: "assigned"
-    },
-    {
-      id: 7,
-      title: "Logger Synced",
-      deviceId: "ID: LGR-0421",
-      status: "95% remaining",
-      time: "12 Aug, 2023 11:25 AM",
-      icon: <FiCheckCircle className="w-4 h-4" />,
-      type: "synced"
-    },
-    {
-      id: 8,
-      title: "Logger Disconnected",
-      deviceId: "ID: LGR-0421",
-      time: "12 Aug, 2023 11:25 AM",
-      icon: <FiAlertTriangle className="w-4 h-4" />,
-      type: "disconnected"
-    }
-  ];
 
     const getStatusBadge = (status: string) => {
         const statusClasses = {
-      'Approved': 'bg-green-100 text-green-800',
+            'SENT': 'bg-blue-100 text-blue-800',
-      'Rejected': 'bg-red-100 text-red-800',
+            'COMPLETED': 'bg-green-100 text-green-800',
-      'Reviewed': 'bg-yellow-100 text-yellow-800',
+            'FAILED': 'bg-red-100 text-red-800',
-      'Ready to Review': 'bg-blue-100 text-blue-800'
+            'PENDING': 'bg-yellow-100 text-yellow-800',
+            'VIEWED': 'bg-purple-100 text-purple-800',
+            'REJECTED': 'bg-red-100 text-red-800'
         };
         return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
     };
 
-  const getAuditTypeColor = (type: string) => {
+    const formatTimestamp = (timestamp: string) => {
-    const colors = {
+        try {
-      'created': 'text-blue-600',
+            const date = new Date(timestamp);
-      'approved': 'text-green-600',
+            if (isNaN(date.getTime())) {
-      'initiated': 'text-purple-600',
+                return timestamp;
-      'assigned': 'text-indigo-600',
+            }
-      'rejected': 'text-red-600',
+
-      'synced': 'text-green-600',
+            const now = new Date();
-      'disconnected': 'text-orange-600'
+            const diffMs = now.getTime() - date.getTime();
+            const diffMins = Math.floor(diffMs / (1000 * 60));
+            const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+            if (diffMins < 60) {
+                return `${diffMins}m ago`;
+            } else if (diffHours < 24) {
+                return `${diffHours}h ago`;
+            } else if (diffDays < 7) {
+                return `${diffDays}d ago`;
+            } else {
+                return date.toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                });
+            }
+        } catch (error) {
+            return timestamp;
+        }
     };
-    return colors[type as keyof typeof colors] || 'text-gray-600';
+
+    const extractEmailFromMessage = (message: string) => {
+        const emailMatch = message.match(/<([^>]+)>/);
+        return emailMatch ? emailMatch[1] : '';
     };
 
     return (
@@ -188,57 +227,84 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
                     </div>
                     <button
                         onClick={closeModal}
-            className="text-white cursor-pointer transition-colors"
+                        className="text-white cursor-pointer transition-colors hover:text-gray-200"
                     >
                         <FiX className="w-5 h-5" />
                     </button>
                 </div>
 
                 {/* Content */}
-        <div className="flex-1 overflow-y-auto p-4">
+                <div className="flex-1 overflow-y-auto p-4 no-scrollbar">
-          
+                    {/* {loading ? <LoaderUi /> :  ""} */}
+                    {auditStatus.length ?
                         <div className="space-y-1.5">
-              <div className="text-sm text-gray-500 font-medium mb-2">TODAY</div>
+                            {/* <div className="text-sm text-gray-500 font-medium mb-2">TODAY</div> */}
-              
+                            {auditStatus.map((item, index) => (
-              {statusHistory.slice(0, 2).map((item) => (
+                                <div key={index} className="flex items-start space-x-4 pb-3 border-b border-gray-100 last:border-b-0">
-                <div key={item.id} className="flex items-start space-x-4 pb-2 border-b border-gray-100 last:border-b-0">
+                                    <div className={`${getActionColor(item.action)} mt-1`}>
-                  <div className={`${item.statusColor} mt-1`}>
+                                        {getActionIcon(item.action)}
-                    {item.icon}
                                     </div>
                                     <div className="flex-1">
-                    <p className="text-gray-800 font-medium text-sm mb-0.5">{item.title}</p>
+                                        <p className="text-gray-600 font-medium text-sm mb-1">{item.message}</p>
+
                                         <div className="flex items-center space-x-2 text-xs text-gray-600 mb-1">
-                      <span>By {item.author}</span>
+                                            <span>Action: {item.action}</span>
-                      {item.role && (
+                                            {extractEmailFromMessage(item.message) && (
                                                 <>
                                                     <span>•</span>
-                          <span className="text-blue-600 text-xs">({item.role})</span>
+                                                    <span className="text-blue-600">{extractEmailFromMessage(item.message)}</span>
                                                 </>
                                             )}
                                         </div>
-                    <div className="flex items-center space-x-3">
+
-                      <span className="text-xs text-gray-500">{item.time}</span>
+                                        <div className="flex items-center space-x-2 mb-2">
-                      <div className="flex items-center space-x-2">
+                                            <span className="text-xs text-gray-600">Status:</span> <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.status)}`}>
-                        <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.fromStatus)}`}>
+                                                {item.status}
-                          {item.fromStatus}
-                        </span>
-                        <span className="text-gray-400">→</span>
-                        <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.toStatus)}`}>
-                          {item.toStatus}
                                             </span>
+                                            <span className="text-xs text-gray-500">{formatTimestamp(item.timestamp)}</span>
+                                            {item.language && (
+                                                <span className="text-xs text-gray-400 uppercase">{item.language}</span>
+                                            )}
                                         </div>
+
+                                        {/* Event Data Details */}
+                                        {/* <div className="grid grid-cols-2 gap-4 text-xs text-gray-600 bg-gray-50 p-2 rounded">
+                                        {item.eventData.ip && (
+                                            <div>
+                                                <span className="font-medium text-gray-700">IP:</span> {item.eventData.ip}
                                             </div>
+                                        )}
+                                        {item.eventData.timezone && (
+                                            <div>
+                                                <span className="font-medium text-gray-700">Timezone:</span> {item.eventData.timezone}
+                                            </div>
+                                        )}
+                                        {item.eventData.latitude && item.eventData.longitude && (
+                                            <div className="col-span-2">
+                                                <span className="font-medium text-gray-700">Location:</span>
+                                                <span className="ml-1">Lat: {item.eventData.latitude}, Lng: {item.eventData.longitude}</span>
+                                            </div>
+                                        )}
+                                    </div> */}
                                     </div>
                                 </div>
                             ))}
-
+                        </div> :
-              
+                        <div className="flex justify-center items-center">
+                            <img
+                                src={logoRecord}
+                                alt="Record Not Found"
+                                className="w-80 h-80 opacity-70" // adjust size and appearance
+                            />
                         </div>
-          
+                    }
                 </div>
 
                 {/* Footer */}
-        <div className="flex justify-end p-2 border-t border-gray-200">
+                <div className="flex justify-between items-center p-3 border-t border-gray-200 bg-gray-50">
+                    <div className="text-sm text-gray-600">
+                        Showing {auditStatus.length} event{auditStatus.length !== 1 ? 's' : ''}
+                    </div>
                     <button
                         onClick={closeModal}
                         className="cursor-pointer px-4 py-1.5 bg-[var(--sendForSignBgCol)] text-white rounded-lg hover:bg-red-700 transition-colors font-medium"

src/utlity/types.tsx

@@ -1,6 +1,6 @@
 import { JSX } from "react";
 
-export interface DroppedItem {
+export interface DroppedItemOld {
   id?: string;
   icon: JSX.Element;
   focusElementIndx?: number;
@@ -123,3 +123,61 @@ export enum SignTypeEnum {
   selfSign = "self_sign",
   multipleSign = "multi_sign"
 }
+
+
+
+
+interface StylesInterface {
+  font: string,
+  italic: boolean,
+  bold: boolean,
+  underline: boolean,
+  color: string,
+  textSize: number
+}
+
+
+export interface DroppedItem {
+  id?: string;
+  icon: JSX.Element;
+  label?: string;
+  type: string;
+
+  dimensions: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  }
+  recipientId: number;
+
+  documentId: string;
+  pageIndex: number;
+
+  allowSenderToEdit: true;
+  allowSenderToDelete: true;
+
+  required?: boolean;
+  
+  maskType?: string;
+  maskCharacter?: string;
+  format?: string;
+  
+  selectedValue?: string | null;
+  
+  radioGroups?: DroppedItem[];
+  options?: string[]
+
+  focusElementIndx?: number;
+
+  value?: string | number;
+
+  validation?: {
+    minLength: number;
+    maxLength: number;
+    error: string;
+    regex: string[];
+  };
+
+  isDeleted: boolean;
+}