From 68f0185c7646444c317293d89b4191050267b6ad Mon Sep 17 00:00:00 2001
From: =bhagwanSingh <=bhagwan.r@hicglobalsolutions.com>
Date: Mon, 13 Oct 2025 19:38:34 +0530
Subject: [PATCH] 13-10 | 07:38

---
 src/components/client/SignDocument.tsx        |  25 ++-
 src/components/client/TagsCon.tsx             |  40 +++--
 .../processStepTwo/DocumentContainer.tsx      |  64 ++++---
 .../processStepTwo/DroppedItemsTagsCon.tsx    |  12 +-
 .../process/processStepTwo/FieldList.tsx      |   9 +-
 .../process/processStepTwo/LeftSideBar.tsx    | 161 +++++++-----------
 .../process/processStepTwo/NavTwo.tsx         |  24 +--
 .../setting/Signature/AddSignatureModal.tsx   |   8 +-
 src/components/signature/ClientSignCon.tsx    |  10 +-
 src/components/templates/TemplateTable.tsx    |   7 +
 10 files changed, 189 insertions(+), 171 deletions(-)

diff --git a/src/components/client/SignDocument.tsx b/src/components/client/SignDocument.tsx
index 2c3e692..056e112 100644
--- a/src/components/client/SignDocument.tsx
+++ b/src/components/client/SignDocument.tsx
@@ -626,22 +626,29 @@ const SignDocument = () => {
     useEffect(() => {
         const allRequiredFields = droppedItems.filter((item, idx) => {
             if (!item.required) return false
-            if ((item.required && item.value && item.type != "SIGNATURE" && item.type != "INITIALS") ||
 
-
-                (
+            if (item.type == "SIGNATURE" || item.type == "INITIALS") {
+                if (
                     (item.id != null && item.id != undefined && item.id != "")
                         ? (
                             (`${item.id}`) in signConfObj && signConfObj[`${item.id}`].accepted
                         ) : (
                             (`${idx}`) in signConfObj && signConfObj[`${idx}`].accepted
                         )
-                )
+                ) {
+                    return false
+                } else {
+                    return true
+                }
+            }
+            if (!("value" in item)) {
+                return true
+            } else if (item.value === null || item.value === undefined || item.value === "") {
+                return true
+            }
 
 
-
-            ) return false
-            return true
+            return false;
         })
 
         const totalRequiredFields = droppedItems.reduce((acc, obj) => {
@@ -1043,7 +1050,9 @@ 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)
+                                                    const currDocTags = droppedItems
+                                                        .map((val, index) => ({ ...val, originalIndex: index })) // add original index
+                                                        .filter(val => val.pageIndex === page.index);
                                                     let scale: { x: number | null, y: number | null } = { x: null, y: null }
                                                     return (
                                                         <div
diff --git a/src/components/client/TagsCon.tsx b/src/components/client/TagsCon.tsx
index e0b4440..a59d4a2 100644
--- a/src/components/client/TagsCon.tsx
+++ b/src/components/client/TagsCon.tsx
@@ -216,6 +216,7 @@ const TagsCon: React.FC<TagsConProps> = ({
     };
 
     const handleTagUpdate = (updateIndx: number, updateValue: string) => {
+        console.log(currDocTags)
         if (droppedItems && droppedItems.length) {
             const updatedTag = droppedItems.map((val, indx) => {
                 if (indx == updateIndx) {
@@ -238,8 +239,8 @@ const TagsCon: React.FC<TagsConProps> = ({
         // });
     }
 
-    const handleSignClick = async (index: number, id: number | undefined) => {
-        id = (id != undefined && id != null) ? id : index
+    const handleSignClick = async (index: number, id: string | undefined) => {
+        id = (id !== undefined && id !== null) ? id : index
         setSignTagId(id)
         if (saved.save) {
             if (saved.isDefaultAndClicked) {
@@ -392,9 +393,9 @@ const TagsCon: React.FC<TagsConProps> = ({
                                     !item.multiLine && !item.maskType && <p
                                         // name={item.id}
                                         // style={{ height: item.dimensions.height + "px" }}
-                                        onBlur={(e) => {
+                                        onChange={(e) => {
                                             const val = e.currentTarget.textContent;
-                                            handleTagUpdate(index, val as string);
+                                            handleTagUpdate(item.originalIndex, val as string);
                                         }}
                                         onKeyDown={(e) => {
                                             if (e.key == "Enter") e.preventDefault();
@@ -408,7 +409,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                         suppressContentEditableWarning
                                         onBlur={(e) => {
                                             const val = e.currentTarget.textContent;
-                                            handleTagUpdate(index, val as string);
+                                            handleTagUpdate(item.originalIndex, val as string);
                                         }}
                                         contentEditable={true}
                                         className="w-full outline-none max-h-max"
@@ -418,7 +419,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                     "maskType" in item && "maskCharacter" in item && item.maskType && <p
                                         // onBlur={(e) => {
                                         //     const val = e.currentTarget.textContent;
-                                        //     handleTagUpdate(index, val as string);
+                                        //     handleTagUpdate(item.originalIndex, val as string);
                                         // }}
                                         onKeyDown={(e) => {
                                             if (e.key == "Enter") e.preventDefault();
@@ -427,7 +428,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                         // }}
                                         onBlur={(e) => {
                                             let val = e.target.textContent;
-                                            handleTagUpdate(index, val as string);
+                                            handleTagUpdate(item.originalIndex, val as string);
                                             if (typeof item.maskType == "string" && typeof val == "string" && item.maskCharacter) {
                                                 val = val.replace(/ /g, "");
                                                 e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter)
@@ -455,7 +456,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                         // style={{ height: item.dimensions.height + "px" }}
                                         onInput={(e) => {
                                             const val = e.currentTarget.textContent;
-                                            handleTagUpdate(index, val as string);
+                                            handleTagUpdate(item.originalIndex, val as string);
                                         }}
                                         onKeyDown={(e) => {
                                             if (e.key == "Enter") {
@@ -464,7 +465,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                                                 if (val && !emailRegex.test(val)) {
                                                     alert("Please enter a valid email address");
-                                                    handleTagUpdate(index, "" as string)
+                                                    handleTagUpdate(item.originalIndex, "" as string)
                                                     e.currentTarget.textContent = "";
                                                     e.currentTarget.focus(); // Optional: return focus if invalid
                                                 }
@@ -478,7 +479,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                                             if (val && !emailRegex.test(val)) {
                                                 alert("Please enter a valid email address");
-                                                handleTagUpdate(index, "" as string)
+                                                handleTagUpdate(item.originalIndex, "" as string)
                                                 e.currentTarget.textContent = "";
                                                 e.currentTarget.focus(); // Optional: return focus if invalid
                                             }
@@ -508,7 +509,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                         // style={{ height: item.dimensions.height + "px" }}
                                         onInput={(e) => {
                                             const val = e.currentTarget.textContent;
-                                            handleTagUpdate(index, val as string);
+                                            handleTagUpdate(item.originalIndex, val as string);
                                         }}
                                         onKeyDown={(e) => {
                                             if (e.key == "Enter") {
@@ -540,9 +541,14 @@ const TagsCon: React.FC<TagsConProps> = ({
                             >
                                 {
                                     <input
+                                        onKeyDown={(e) => {
+                                            if (e.key == "e" || e.key == "E") {
+                                                e.preventDefault()
+                                            };
+                                        }}
                                         onInput={(e) => {
                                             const val = e.currentTarget.value;
-                                            handleTagUpdate(index, val as string);
+                                            handleTagUpdate(item.originalIndex, val as string);
                                         }}
                                         type="number"
                                         className="outline-none h-full max-w-max"
@@ -568,7 +574,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                         // style={{ height: item.dimensions.height + "px" }}
                                         onInput={(e) => {
                                             const val = e.currentTarget.textContent;
-                                            handleTagUpdate(index, val as string);
+                                            handleTagUpdate(item.originalIndex, val as string);
                                         }}
                                         onKeyDown={(e) => {
                                             if (e.key == "Enter") {
@@ -630,7 +636,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                     )) ? (
                                         <FaSignature className="text-lg text-slate-600" />
                                     ) : saved && saved.saveType != null && saved.saveType == "SELECT" ? (
-                                        <><span style={{ fontFamily: saved?.font, fontSize: "18px" }}>{saved.signature}</span></>
+                                        <><span className='absolute left-0 bottom-0' style={{ fontFamily: saved?.font, fontSize: "42px" }}>{saved.signature}</span></>
                                     ) : (
                                         <img
                                             style={{
@@ -670,7 +676,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                 )) ?
                                     <TbSignature className="text-lg text-slate-600" />
                                     : saved && saved.saveType != null && saved.saveType == "SELECT" ? (
-                                        <><span style={{ fontFamily: saved?.font }}>{saved.initial}</span></>
+                                        <><span className='absolute left-0 bottom-0' style={{ fontFamily: saved?.font, fontSize: "42px" }}>{saved.initial}</span></>
                                     ) :
                                         (<img
                                             style={{
@@ -739,7 +745,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                     className="outline-none"
                                     onInput={(e) => {
                                         const val = e.currentTarget.value;
-                                        handleTagUpdate(index, val as string);
+                                        handleTagUpdate(item.originalIndex, val as string);
                                     }}
                                 >
                                     <option value="">Select</option>
@@ -797,7 +803,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                     }}
                                     onInput={(e) => {
                                         const val = e.currentTarget.value;
-                                        handleTagUpdate(index, val as string);
+                                        handleTagUpdate(item.originalIndex, val as string);
                                     }}
                                     style={{ opacity: `${item.id == isDateOpen ? "100" : "0"}` }}
                                     className="w-full px-2 outline-none absolute"
diff --git a/src/components/process/processStepTwo/DocumentContainer.tsx b/src/components/process/processStepTwo/DocumentContainer.tsx
index 1ce10ba..a25cd9f 100644
--- a/src/components/process/processStepTwo/DocumentContainer.tsx
+++ b/src/components/process/processStepTwo/DocumentContainer.tsx
@@ -234,6 +234,9 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
 
 
         const handleTransactionProcess = async (save: boolean = false) => {
+
+            if (TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES === transactionTemplateToggle) save = true;
+
             dispatch(showLoader("Saving Tags ..."))
             if (Object.keys(droppedItems).length == 0) return;
             // if (!save) return;
@@ -257,6 +260,9 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
                     // window.location.href = `${import.meta.env.VITE_BASE_URI}/transaction-sent/${accountId}/${transactionId}`
                 }
                 dispatch(hideLoader())
+            } else {
+                navigate("/templates")
+                dispatch(hideLoader())
             }
             // SENDING Transaction - END
         }
@@ -283,8 +289,15 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
         };
 
         // HANDLE DROP - START
-        const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => {
+        const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number, originalWidth: number, originalHeight: number) => {
             event.preventDefault();
+            const imageElement = document.getElementById(`${docId}-${pageIndex}`) as HTMLImageElement;
+
+            const currentWidth = imageElement.offsetWidth;
+            const currentHeight = imageElement.offsetHeight;
+
+            const scaleX = currentWidth / originalWidth;  // 350 / 700 = 0.5
+            const scaleY = currentHeight / originalHeight; // 225 / 450 = 0.5
 
             const data = window.dragElemData;
             if (!data) return;
@@ -299,27 +312,33 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
             // if (!field) return; // If not found, exit
 
             const dropZone = event.currentTarget.getBoundingClientRect();
-            let x = event.clientX - dropZone.left - dragElemData.offsetX;
-            let y = event.clientY - dropZone.top - dragElemData.offsetY;
+            let x = event.clientX - dropZone.left - (dragElemData.width / 2);
+            let y = event.clientY - dropZone.top - (dragElemData.height / 2);
 
             // Handling Drop Over Right
-            if (dropZone.width < x + dragElemData.width) {
-                x -= (x + dragElemData.width) - dropZone.width;
-            }
+            // if (dropZone.width < x + dragElemData.width) {
+            //     x -= (x + dragElemData.width) - dropZone.width;
+            // }
             // Handling Drop Over Bottom
-            if (dropZone.height < y + dragElemData.height) {
-                y -= (y + dragElemData.height) - dropZone.height;
-            }
+            // if (dropZone.height < y + dragElemData.height) {
+            //     y -= (y + dragElemData.height) - dropZone.height;
+            // }
             // Handling Drop Over Left
-            if (x < 0) {
-                x = 0;
-            }
+            // if (x < 0) {
+            //     x = 0;
+            // }
             // Handling Drop Over Top
-            if (y < 0) {
-                y = 0;
-            }
+            // if (y < 0) {
+            //     y = 0;
+            // }
+
+            x = Math.max(0, Math.min(x, dropZone.width - dragElemData.width));
+            y = Math.max(0, Math.min(y, dropZone.height - dragElemData.height));
 
             const key = `${docId}_${pageIndex}`;
+
+            // x = x * scaleX
+            // y = y * scaleY
             // const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
 
             let prepData = {
@@ -340,7 +359,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
                     "bold": false,
                     "underline": false,
                     "color": "black",
-                    "textSize": 14.0
+                    "textSize": data.fontSize
                 } : null,
                 documentId: docId,
                 pageIndex: pageIndex,
@@ -380,7 +399,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
             setTimeout(() => {
                 const tagIndex = key in droppedItems ? droppedItems[key].length : 0;
                 setSelectedTag({ key, index: tagIndex })
-            }, 0)
+            }, 1000)
         };
         // HANDLE DROP - END
 
@@ -517,16 +536,20 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
                                                         onFocus={() => handleDocumentFocus(key)}
                                                         key={indx}
                                                         id={`${doc.id}${indx}`}
-                                                        onDrop={(e) => handleDrop(e, doc.id, indxDoc, page.index)}
+                                                        onDrop={(e) => handleDrop(e, doc.id, indxDoc, page.index, page.width, page.height)}
                                                         onDragOver={handleDragOver}
                                                         className='drop-page-in shadow-md relative'
+                                                        style={{ aspectRatio: `${page.width}/${page.height}` }}
                                                     >
 
                                                         <img
                                                             // style={{ "minWidth": page.width, "minHeight": page.height, "maxWidth": page.width, "maxHeight": page.height }}
-                                                            style={{ "width": page.width, "height": page.height, "maxWidth": "100%", "maxHeight": "100%" }}
+                                                            // style={{ "width": page.width, "height": page.height, "maxWidth": "100%", "maxHeight": "100%" }}
                                                             // style={{ "width": "100%", "height": "100%", "maxWidth": "100%", "maxHeight": "100%" }}
                                                             // className={`w-[${(page.width / 2)}px] h-[${(page.height / 2)}px] sm:w-[${page.width}px] sm:h-[${page.height}px]`}
+                                                            id={`${doc.id}-${page.index}`}
+                                                            className={`w-[${page.width / 2}px] h-[${page.height / 2}px] sm:w-[${page.width}px] sm:h-[${page.height}px]`}
+
                                                             draggable="false"
                                                             width={page.width}
                                                             height={page.height}
@@ -537,6 +560,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
 
                                                         <DroppedItemsTagsCon
                                                             pageWidth={page.width}
+                                                            pageHeight={page.height}
                                                             ref={childRef}
                                                             droppedItems={droppedItems}
                                                             pageIdkey={key}
@@ -573,7 +597,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
                     }
 
 
-                </div >
+                </div>
 
                 {selectedTag && selectedTag != null && "key" in selectedTag && "index" in selectedTag && <RightSideBar
                     droppedItems={droppedItems}
diff --git a/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx b/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx
index c37826e..d70c7a3 100644
--- a/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx
+++ b/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx
@@ -20,6 +20,7 @@ import { DroppedItem } from '../../../utlity/types';
 
 interface DroppedItemsTagsConProps {
     pageWidth: number;
+    pageHeight: number;
     droppedItems: DroppedItemsObj;
     pageIdkey: string;
     selectedTag: { key: string; index: number } | null;
@@ -35,6 +36,7 @@ interface DroppedItemsTagsConProps {
 // 👶 Child component with forwardRef
 const DroppedItemsTagsCon = forwardRef(({
     pageWidth,
+    pageHeight,
     droppedItems,
     pageIdkey,
     selectedTag,
@@ -581,10 +583,14 @@ const DroppedItemsTagsCon = forwardRef(({
                             // }}
 
                             style={{
+                                // left: `${((item.dimensions.left / pageWidth) * 100)}%`,
+                                // top: `${((item.dimensions.top / pageHeight) * 100)}%`,
+                                // width: `${(item.dimensions.width / pageWidth) * 100}%`,
+                                // height: `${(item.dimensions.height / pageHeight) * 100}%`,
                                 left: `${((item.dimensions.left / pageWidth) * 100)}%`,
-                                top: item.dimensions.top,
-                                width: `${((item.dimensions.width / pageWidth) * 100)}%`,
-                                height: item.dimensions.height,
+                                top: `${((item.dimensions.top / pageHeight) * 100)}%`,
+                                width: `${(item.dimensions.width / pageWidth) * 100}%`,
+                                height: `${(item.dimensions.height / pageHeight) * 100}%`,
                             }}
                         >
 
diff --git a/src/components/process/processStepTwo/FieldList.tsx b/src/components/process/processStepTwo/FieldList.tsx
index d241e5f..c38c2bc 100644
--- a/src/components/process/processStepTwo/FieldList.tsx
+++ b/src/components/process/processStepTwo/FieldList.tsx
@@ -20,6 +20,8 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
         height = innerIconConRect.height + 10
     }
 
+    let fontSize = 14.0;
+
     switch (label) {
         case TagsTypes.STAMP: {
             width = 160
@@ -29,11 +31,13 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
         case TagsTypes.SIGNATURE: {
             width = 200
             height = 75
+            fontSize = 42.0
             break;
         }
         case TagsTypes.INITIALS: {
             width = 85
             height = 75
+            fontSize = 42.0
             break;
         }
         case TagsTypes.COMPANY: {
@@ -89,7 +93,8 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
         recipientIndx: recipientIndx,
         width,
         height,
-        properties: tagsProperties
+        properties: tagsProperties,
+        fontSize: fontSize
     }
 
     if (obj.label.toLowerCase() == "radio" || obj.label.toLowerCase() == "checkbox") obj.group = uuidv4();
@@ -306,7 +311,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
     // );
 
     return (
-        <div className='flex flex-wrap gap-2 justify-start items-start max-w-[170px] sm:max-w-max'>
+        <div className='flex flex-row sm:flex-wrap gap-2 justify-start items-start w-full overflow-x-auto'>
             {tagsData.map((field, index) => {
 
                 const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
diff --git a/src/components/process/processStepTwo/LeftSideBar.tsx b/src/components/process/processStepTwo/LeftSideBar.tsx
index ac752ac..d560a5e 100644
--- a/src/components/process/processStepTwo/LeftSideBar.tsx
+++ b/src/components/process/processStepTwo/LeftSideBar.tsx
@@ -91,13 +91,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
         <>
             {/* Left Side Bar - START */}
             {
-                (isPages || isFields) && <div className={`sm:block p-4 absolute top-[48px] sm:top-[0] rounded-tr-md z-50 sm:relative sm:col-span-2 bg-white border-t-1 border-r-1 border-slate-300 h-[calc(100vh-40px)] overflow-y-auto`}>
+                (isPages || isFields) && <div className={`sm:block p-4 absolute sm:top-[0] rounded-tr-md z-50 sm:relative sm:col-span-2 bg-white border-t-1 border-r-1 border-slate-300 sm:h-[calc(100vh-40px)] overflow-y-auto sm:w-auto ${isFields ? "h-[150px] bottom-0 overflow-x-hidden w-full": "h-[calc(100vh-40px)]"} `}>
                     <div
                         onClick={() => {
                             handleSetIsPages(false)
                             handleSetIsFields(false)
                         }}
-                        className='absolute top-[5px] right-[5px] bg-white rounded-full'>
+                        className='absolute sm:hidden top-[5px] right-[10px] bg-white rounded-full text-2xl z-50'>
                         <IoMdClose />
                     </div>
 
@@ -121,67 +121,72 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
                     {selectedRecipients.length > 0 && isFields && <>
                         {/* Fields List and Recipeint - Start */}
                         {/* Side Bar showing Recipients */}
-                        <div className='relative'
-                            tabIndex={0}
-                            onBlur={() => setDropDownToggle(false)}>
-                            {/* Selected Recipient */}
-                            <div
-                                id='switch-recipients-left'
-                                onClick={() => setDropDownToggle(!dropDownToggle)}
-                                className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm border-1 border-slate-200 cursor-pointer'>
-                                <div className='flex items-center gap-1.5'>
-                                    <p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
-                                    {/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
-                                    <p>
-                                        {
-                                            selectedRecipient.firstName.length == 0 && selectedRecipient.lastName.length == 0 ?
-                                                (selectedRecipient.email.length == 0 ? selectedRecipient.roleName : selectedRecipient.email) :
-                                                `${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
-                                        }
-                                    </p>
+                        <div className='sm:relative sm:top-0 sm:left-0 absolute w-full'> 
+
+                            <div className='relative'
+                                tabIndex={0}
+                                onBlur={() => setDropDownToggle(false)}>
+                                {/* Selected Recipient */}
+                                <div
+                                    id='switch-recipients-left'
+                                    onClick={() => setDropDownToggle(!dropDownToggle)}
+                                    className='flex items-center justify-between gap-2 w-[75%] sm:w-full p-2 text-xs rounded-sm border-1 border-slate-200 cursor-pointer'>
+                                    <div className='flex items-center gap-1.5'>
+                                        <p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
+                                        {/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
+                                        <p>
+                                            {
+                                                selectedRecipient.firstName.length == 0 && selectedRecipient.lastName.length == 0 ?
+                                                    (selectedRecipient.email.length == 0 ? selectedRecipient.roleName : selectedRecipient.email) :
+                                                    `${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
+                                            }
+                                        </p>
+                                    </div>
+                                    <MdKeyboardArrowDown />
                                 </div>
-                                <MdKeyboardArrowDown />
-                            </div>
 
+                                <div
+                                    className={`absolute w-full shadow-md rounded-md mt-1 px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
+                                    {selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
+                                        if (recipient.type == recipientType.CC) return null; // Skip CC recipients
+                                        return (<div
+                                            key={indx}
+                                            className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
+                                            onClick={() => {
+                                                setSelectedRecipient(indx);
+                                                setTimeout(() => {
+                                                    setDropDownToggle(false);
+                                                }, 0)
+                                            }}
+                                        >
+                                            <div className='flex items-center gap-1.5'>
+                                                <p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
+                                                {/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
+                                                <p>
+                                                    {
+                                                        recipient.firstName.length == 0 && recipient.lastName.length == 0 ?
+                                                            (recipient.email.length == 0 ? recipient.roleName : recipient.email) :
+                                                            `${recipient.firstName + " " + recipient.lastName}`
+                                                    }
+                                                </p>
+                                            </div>
+                                            {selectedRecipientIndx == indx && <IoCheckmark className='text-[var(--primary)]' />}
+                                        </div>)
+                                    })}
+                                </div>
+                            </div>
+                            {/* Side Bar showing Recipients  - ENDS*/}
+
+                            {/* Drag Drop Tags Start */}
                             <div
-                                className={`absolute w-full shadow-md rounded-md mt-1 px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
-                                {selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
-                                    if (recipient.type == recipientType.CC) return null; // Skip CC recipients
-                                    return (<div
-                                        key={indx}
-                                        className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
-                                        onClick={() => {
-                                            setSelectedRecipient(indx);
-                                            setTimeout(() => {
-                                                setDropDownToggle(false);
-                                            }, 0)
-                                        }}
-                                    >
-                                        <div className='flex items-center gap-1.5'>
-                                            <p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
-                                            {/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
-                                            <p>
-                                                {
-                                                    recipient.firstName.length == 0 && recipient.lastName.length == 0 ?
-                                                        (recipient.email.length == 0 ? recipient.roleName : recipient.email) :
-                                                        `${recipient.firstName + " " + recipient.lastName}`
-                                                }
-                                            </p>
-                                        </div>
-                                        {selectedRecipientIndx == indx && <IoCheckmark className='text-[var(--primary)]' />}
-                                    </div>)
-                                })}
+                                id='tags-con-dash-left'
+                                className='mt-4 w-full'>
+                                <FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
                             </div>
-                        </div>
-                        {/* Side Bar showing Recipients  - ENDS*/}
 
-                        {/* Drag Drop Tags Start */}
-                        <div
-                            id='tags-con-dash-left'
-                            className='mt-4'>
-                            <FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
                         </div>
 
+
                         {/* Fields List and Recipeint - End */}
                     </>}
 
@@ -280,54 +285,10 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
             {/* Small Devices - START  */}
 
 
-            <div>
-
-                {/* Left Side Pages */}
-                {!isPages && <div
-                    onClick={() => {
-                        handleSetIsPages(true)
-                        handleSetIsFields(false)
-                    }}
-                    className='sm:hidden fixed top-[8%] left-0 bg-[var(--primary)] z-50 flex items-center text-white rounded-tr-md rounded-br-md cursor-pointer opacity-30 hover:opacity-100 transition-all duration-300'>
-                    <div className='py-2'>
-                        <FaAngleUp className='rotate-90' />
-                        <p className='flex flex-col justify-center items-center text-xs tracking-widest mt-1 pt-1 border-t-1 border-white'>
-                            <span>P</span>
-                            <span>A</span>
-                            <span>G</span>
-                            <span>E</span>
-                            <span>S</span>
-                        </p>
-                    </div>
-                </div>}
-
-
-                <div
-                    className='sm:hidden fixed bottom-0 left-0 rounded-tr-md rounded-tl-md bg-[var(--primary)] z-50 w-full flex justify-center text-white cursor-pointer opacity-30 hover:opacity-100 transition-all duration-300'
-                    onClick={() => {
-                        handleSetIsPages(false)
-                        handleSetIsFields(true)
-                    }}
-                >
-                    <div className='flex'>
-                        <FaAngleUp />
-                        <p className='flex justify-center items-center text-xs tracking-widest ml-1 pl-1 border-l-1 border-white'>
-                            <span>T</span>
-                            <span>A</span>
-                            <span>G</span>
-                            <span>S</span>
-                        </p>
-                    </div>
-                </div>
-
-
-            </div>
 
 
             {/* Small Devices - END  */}
 
-
-
         </>
     )
 }
diff --git a/src/components/process/processStepTwo/NavTwo.tsx b/src/components/process/processStepTwo/NavTwo.tsx
index 4ca7dcc..ebbc600 100644
--- a/src/components/process/processStepTwo/NavTwo.tsx
+++ b/src/components/process/processStepTwo/NavTwo.tsx
@@ -172,8 +172,8 @@ const NavTwo: React.FC<NavTwoProps> = ({
     function handleSend(isSignSend: boolean = false) {
         // dispatch(showLoader("Loading ..."));
 
-        const transactionSendValidationObj =  transactionSendValidation()
-        if(transactionSendValidationObj.oneSignerIsRequiredError) {
+        const transactionSendValidationObj = transactionSendValidation()
+        if (transactionSendValidationObj.oneSignerIsRequiredError) {
             return
         }
 
@@ -183,16 +183,16 @@ const NavTwo: React.FC<NavTwoProps> = ({
         // setIsSend(!isSend);
 
         // setTimeout(() => {
-            if (transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
-                if (isSignSend) {
-                    window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self");
-                }
-                else {
-                    onSendClick();
-                }
-            } else {
-                navigate(`/templates`);
+        if (transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
+            if (isSignSend) {
+                window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self");
             }
+            else {
+                onSendClick();
+            }
+        } else {
+            onSendClick();
+        }
         // }, 1000)
     }
 
@@ -435,7 +435,7 @@ const NavTwo: React.FC<NavTwoProps> = ({
 
                 </div>
                 {/* Right Side - ENDS */}
-            </div >
+            </div>
             {/* Nav Two - Oprions - End */}
         </>
     )
diff --git a/src/components/setting/Signature/AddSignatureModal.tsx b/src/components/setting/Signature/AddSignatureModal.tsx
index 7271430..3e3ed20 100644
--- a/src/components/setting/Signature/AddSignatureModal.tsx
+++ b/src/components/setting/Signature/AddSignatureModal.tsx
@@ -306,7 +306,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                             Confirm your name and choose signature style. *Are required fields.
                         </h2>
 
-                        <div className="grid grid-cols-2 gap-3 mb-6">
+                        <div className="grid grid-cols-2 gap-2 mb-4">
                             <div>
                                 <label className="block text-sm font-medium mb-2">
                                     Full Name
@@ -340,7 +340,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                         </div>
 
                         {/* Signature Style Options */}
-                        <div className="grid grid-cols-2 gap-4">
+                        <div className="grid grid-cols-2 gap-2">
                             {fontsMap.map((opt) => (
                                 <div
                                     key={opt.acronym}
@@ -350,11 +350,11 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                                             ? "ring-2 ring-[var(--mainPrimaryBtn)]"
                                             : "hover:shadow-md"}`}
                                 >
-                                    <div style={{ fontFamily: opt.style, fontSize: "1.75rem" }}>
+                                    <div style={{ fontFamily: opt.style, fontSize: "1rem" }}>
                                         {fullName || "Full Name"}
                                     </div>
                                     <div
-                                        style={{ fontFamily: opt.style, fontSize: "1.25rem", opacity: 0.7 }}
+                                        style={{ fontFamily: opt.style, fontSize: "0.8rem", opacity: 0.7 }}
                                     >
                                         {initials || "AB"}
                                     </div>
diff --git a/src/components/signature/ClientSignCon.tsx b/src/components/signature/ClientSignCon.tsx
index 56b215c..82a29f7 100644
--- a/src/components/signature/ClientSignCon.tsx
+++ b/src/components/signature/ClientSignCon.tsx
@@ -345,7 +345,7 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
                             Confirm your name and choose signature style. *Are required fields.
                         </h2>
 
-                        <div className="grid grid-cols-2 gap-3 mb-6">
+                        <div className="grid grid-cols-2 gap-2 mb-4">
                             <div>
                                 <label className="block text-sm font-medium mb-2">
                                     Full Name
@@ -379,21 +379,21 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
                         </div>
 
                         {/* Signature Style Options */}
-                        <div className="grid grid-cols-2 gap-4">
+                        <div className="grid grid-cols-2 gap-2">
                             {fontsMap.map((opt) => (
                                 <div
                                     key={opt.acronym}
                                     onClick={() => setSelectedSignature({ id: opt.acronym, style: opt.style })}
-                                    className={`cursor-pointer border border-slate-200 rounded-xl p-4 text-center bg-white transition
+                                    className={`cursor-pointer border border-slate-200 rounded-xl p-1 text-center bg-white transition
                             ${selectedSignature.id == opt.acronym
                                             ? "ring-2 ring-[var(--mainPrimaryBtn)]"
                                             : "hover:shadow-md"}`}
                                 >
-                                    <div style={{ fontFamily: opt.style, fontSize: "1.75rem" }}>
+                                    <div style={{ fontFamily: opt.style, fontSize: "1rem" }}>
                                         {fullName || "Full Name"}
                                     </div>
                                     <div
-                                        style={{ fontFamily: opt.style, fontSize: "1.25rem", opacity: 0.7 }}
+                                        style={{ fontFamily: opt.style, fontSize: "0.8rem", opacity: 0.7 }}
                                     >
                                         {initials || "AB"}
                                     </div>
diff --git a/src/components/templates/TemplateTable.tsx b/src/components/templates/TemplateTable.tsx
index 6cfe9cc..5570a48 100644
--- a/src/components/templates/TemplateTable.tsx
+++ b/src/components/templates/TemplateTable.tsx
@@ -5,6 +5,10 @@ import logoRecord from "../../assets/record.svg";
 import Loader from "../dashboard/Loader";
 import api from "../../config/api";
 import TemplateDeleteWarnModal from "./TemplateDeleteWarnModal";
+import { resetRecipients } from "../../store/slices/selectedRecipientsSlice";
+import { resetDocuments } from "../../store/slices/documentSlice";
+import { AppDispatch } from "../../store/store";
+import { useDispatch } from "react-redux";
 
 interface Template {
     id: number;
@@ -23,6 +27,7 @@ const formatDate = (isoString: string) => {
 };
 
 const TemplateTable = () => {
+    const dispatch = useDispatch<AppDispatch>();
 
     const [activeAccountId, setActiveAccountId] = useState<string | null>(
         JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
@@ -75,6 +80,8 @@ const TemplateTable = () => {
 
     const handleUseClick = async (item: Template) => {
         try {
+            await dispatch(resetRecipients())
+            await dispatch(resetDocuments())
             const payload = {
                 name: item.name ?? "",
                 subject: item.description,