src/components/CommonNav.tsx

@@ -300,7 +300,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
             aria-expanded={open}
             aria-haspopup="true"
           >
-            <div className="w-8 h-8 rounded-full overflow-hidden bg-[var(--primaryLight2)] flex items-center justify-center text-white font-semibold text-sm shadow-md">
+            <div className="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center text-white font-semibold text-sm shadow-md">
               {user ? (
                 <span className="w-full h-full object-cover p-1.5 font-bold">
                   {(user?.name?.slice(0, 2)).toUpperCase()}

src/components/process/processStepOne/ProcessStepOne.tsx

@@ -39,11 +39,6 @@ const ProcessStepOne = () => {
     dispatch(toggleToTemplates());
   }
 
-  const [editCase , setEditCase] = useState<string>("")
-  const [editRecipient , setEditRecipient] = useState({})
-
- 
-
   // if (!accountId || !transactionId) {
   //   window.location.href = "/";
   //   return null;
@@ -59,11 +54,6 @@ const ProcessStepOne = () => {
   console.log("selectedRecipients", selectedRecipients)
 
   useEffect(() => {
-    (async () => {
-      const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
-      console.log(res.data);
-    })()
-
     selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
     selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
   }, [])
@@ -159,9 +149,7 @@ const ProcessStepOne = () => {
         accessCodeDelivery: true,
         language: "en",
         name: `${recipient.firstName} ${recipient.lastName}`,
-        roleName: recipient.roleName,
+        roleName: recipient.roleName
-        allowSenderToEdit: recipient.allowSenderToEdit ,
-        allowSenderToDelete: recipient.allowSenderToDelete,
       }));
 
       let recipientsDataTemp = recipientsData;
@@ -303,9 +291,9 @@ const ProcessStepOne = () => {
             < section className="mt-8">
               <h2 className="text-lg font-medium mb-4 pt-6 border-t text-[var(--processStepOneTextHead)]">Signers</h2>
               <div className="flex flex-col gap-4 align-start">
-                <RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase}/>
+                <RecipientCards />
                 {/* {signType !== "self-sign" && <RecipientAddCard />} */}
-                <RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase}/>
+                <RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} />
               </div>
             </section>
           }

src/components/process/processStepOne/RecipientAddCard.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { FaPlus } from "react-icons/fa";
-import { addRecipient, Recipient, recipientType, updateRecipient } from "../../../store/slices/selectedRecipientsSlice";
+import { addRecipient, Recipient, recipientType } from "../../../store/slices/selectedRecipientsSlice";
 import { useDispatch } from "react-redux";
 import { AppDispatch } from "../../../store/store";
 import api from "../../../config/api";
@@ -8,8 +8,6 @@ import ContactModal from "./ContactModal";
 import useDebouncedEffect from "../../../utlity/useDebounce";
 import { IoIosSettings } from "react-icons/io";
 import { FiEdit, FiTrash } from "react-icons/fi";
-import { v4 as uuidv4 } from 'uuid';
-
 
 interface ContactType {
   id: string;
@@ -23,8 +21,7 @@ export interface ContactTypeObj {
   contacts: ContactType[];
 }
 
-
+const RecipientAddCard = ({ transactionTemplateToggle }) => {
-const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,setEditRecipient, setEditCase }) => {
 
   const [contactData, setContactData] = useState<ContactTypeObj>({ type: "", contacts: [] });
   const [openContactModal, setOpenContactModal] = useState(false);
@@ -32,79 +29,29 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
   const dispatch = useDispatch<AppDispatch>();
   const formRef = useRef<HTMLFormElement | null>(null);
 
-  const [recipient, setRecipients] = useState<Recipient>({ uuid:null, newOne:false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: false, allowSenderToDelete: false  });
+  const [recipient, setRecipients] = useState<Recipient>({ firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: Boolean, allowSenderToRemove: Boolean });
 
   const [showAdvanceSettings, setShowAdvanceSettings] = useState(false)
   console.log(recipient)
 
-  useEffect(() => {
-    if (editCase === "Edit" && editRecipient) {
-      setRecipients({
-        // id:editRecipient.id,
-        firstName: editRecipient.firstName || "",
-        lastName: editRecipient.lastName || "",
-        email: editRecipient.email || "",
-        hostName: editRecipient.hostName || "",
-        hostEmail: editRecipient.hostEmail || "",
-        roleName: editRecipient.roleName || "",
-        type: editRecipient.type || recipientType.SIGNER,
-        allowSenderToEdit: editRecipient.allowSenderToEdit ?? false,
-        allowSenderToDelete: editRecipient.allowSenderToDelete ?? false,
-        uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''),
-        newOne:editRecipient.newOne ?? false
-      });
-    }
-  }, [editCase, editRecipient]);
-
-
   const handleRecipientAdd = (e: React.FormEvent<HTMLFormElement>) => {
-  e.preventDefault();
+    e.preventDefault();
 
-  console.log("recipientrecipient",recipient)
+    if (recipient.lastName === "" || recipient.email === "" || !recipient.type) return;
 
-  if (!recipient.lastName || !recipient.email || !recipient.type) return;
+    // Validate Email Format
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(recipient.email)) {
+      console.log("Invalid email format");
+      return;
+    }
+    // Validation Ends
 
-  // ✅ Email format validation
+    dispatch(addRecipient(recipient));
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    setRecipients({ firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: false, allowSenderToRemove: false });
-  if (!emailRegex.test(recipient.email)) {
+    formRef.current?.reset();
-    console.log("Invalid email format");
-    return;
   }
 
-  if (editCase === 'Edit') {
-    dispatch(updateRecipient(recipient)); 
-  } else {
-    dispatch(addRecipient({
-      ...recipient,
-      uuid:uuidv4(),
-      newOne:true
-    }));
-  }
-
-  // ✅ Reset state and form
-  setRecipients({
-    firstName: "",
-    lastName: "",
-    email: "",
-    hostName: "",
-    hostEmail: "",
-    roleName: "",
-    type: recipientType.SIGNER,
-    allowSenderToEdit: false,
-    allowSenderToDelete: false,
-    uuid:"",
-    newOne:false
-  });
-
-  // setRecipients(null),
-  setEditCase("")
-
-  formRef.current?.reset();
-};
-
-
-
-
   // useEffect(() => {
   // if (!recipient.firstName.length) return;
 
@@ -186,10 +133,10 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
                     } overflow-hidden`}
                 >
                   <div className="text-sm text-gray-600">
-                    {recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Full permissions granted"}
+                    {recipient.allowSenderToEdit && recipient.allowSenderToRemove && "Full permissions granted"}
-                    {recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "Edit permission granted"}
+                    {recipient.allowSenderToEdit && !recipient.allowSenderToRemove && "Edit permission granted"}
-                    {!recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Delete permission granted"}
+                    {!recipient.allowSenderToEdit && recipient.allowSenderToRemove && "Delete permission granted"}
-                    {!recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "No permissions granted"}
+                    {!recipient.allowSenderToEdit && !recipient.allowSenderToRemove && "No permissions granted"}
                   </div>
                 </div>
                 {/* Animated Permission Controls */}
@@ -231,23 +178,23 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
                     {/* Delete Permission */}
                     <div className="relative group">
                       <label
-                        className={`relative flex items-center justify-center w-6 h-6 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToDelete
+                        className={`relative flex items-center justify-center w-6 h-6 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToRemove
                           ? 'bg-red-100 border-red-500 shadow-lg'
                           : 'bg-white border-gray-300 hover:border-red-400'
                           }`}
                       >
                         <input
                           type="checkbox"
-                          checked={recipient.allowSenderToDelete}
+                          checked={recipient.allowSenderToRemove}
                           onChange={(e) =>
-                            setRecipients({ ...recipient, allowSenderToDelete: e.target.checked })
+                            setRecipients({ ...recipient, allowSenderToRemove: e.target.checked })
                           }
                           onFocus={() => setOpenContactModal(true)}
                           onBlur={handleContactModalBlur}
                           className="absolute w-full h-full opacity-0 cursor-pointer"
                         />
                         <FiTrash
-                          className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToDelete ? 'text-red-600' : 'text-gray-400'
+                          className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToRemove ? 'text-red-600' : 'text-gray-400'
                             }`}
                         />
                       </label>
@@ -385,7 +332,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,
           type="submit"
           className="inline-flex items-center gap-2 bg-[var(--primary)] hover:bg-[var(--primaryLight2)] text-white text-sm font-semibold px-5 py-2 rounded-md transition"
         >
-          <FaPlus size={14} /> {editCase === "Edit" ? "Edit Recipient" :  "Add Recipient"}
+          <FaPlus size={14} /> Add Recipient
         </button>
       </div>
     </form>

src/components/process/processStepOne/RecipientCards.tsx

@@ -13,7 +13,6 @@ import { useState } from "react";
 import SigningOrderDiagram from "../../../SigningOrderDiagram ";
 import { IoCloseOutline } from "react-icons/io5";
 import { useParams } from "react-router-dom";
-import { FiEdit } from "react-icons/fi";
 
 const getInitials = (name: string) => {
     if (!name) return "";
@@ -24,13 +23,7 @@ const getInitials = (name: string) => {
         .toUpperCase();
 };
 
-type CardsData = {
+const RecipientCards = () => {
-    setEditRecipient: (recipient: any) => void; // Replace `any` with the actual type if known
-    setEditCase: (string: any) => void;
-    transactionTemplateToggle: string
-};
-
-const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle }: CardsData) => {
     const templateId = useParams<{ templateId: string }>().templateId;
     let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
 
@@ -39,9 +32,9 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
     if (!transactionId) {
         transactionId = templateId;
     }
-
+    
     const recipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
-    console.log("recipients.length", recipients)
+    console.log("recipients.length",recipients)
     // const signingOrder = useSelector((state: RootState) => state.selectedRecipients.signingOrder);
     const signType = useSelector((state: RootState) => state.selectedDocuments.signType);
 
@@ -51,24 +44,15 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
         dispatch(updateRecipientOrder({ id, routingOrder: value }));
     };
 
-    const handleEditRecipient = (recipient) => {
-        // alert(JSON.stringify(recipient))
-        setEditCase('Edit')
-        setEditRecipient(recipient)
-    }
-
     const handleRemoveRecipient = (recipient) => {
         if (!accountId || !transactionId) return;
-        if (recipient.uuid) {
+        // dispatch(removeSelectedRecipient(recipient))
-            dispatch(removeSelectedRecipient(recipient))
+        dispatch(removeRecipientAsync({
-        } else {
+            recipientId: recipient.id,
-            dispatch(removeRecipientAsync({
+            email: recipient.email,
-                recipientId: recipient.id,
+            accountId: accountId,
-                email: recipient.email,
+            transactionId: transactionId,
-                accountId: accountId,
+        }))
-                transactionId: transactionId,
-            }))
-        }
         if (recipients.length === 2) {
             let leftRecipient = recipients.filter((obj) => {
                 if ("id" in obj && "id" in recipient) {
@@ -160,45 +144,14 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
                                 </div>
 
                                 {signType !== "self-sign" && (
-                                    <div className="flex justify-between gap-2 items-center">
+                                    <button
-                                        {/* Edit Button */}
+                                        type="button"
-                                        <button
+                                        aria-label={`Remove recipient ${recipient.firstName}`}
-                                            type="button"
+                                        onClick={() => handleRemoveRecipient(recipient)}
-                                            title="Edit recipient"
+                                        className="text-gray-400 hover:text-red-600 transition-colors"
-                                            aria-label={`Edit recipient ${recipient.firstName}`}
+                                    >
-                                            onClick={() => handleEditRecipient(recipient)}
+                                        <ImBin size={16} />
-                                            disabled={
+                                    </button>
-                                                // For templates: always enabled (never disabled)
-                                                ['templates'].includes(transactionTemplateToggle)
-                                                    ? false
-                                                    : // For transactions: disabled if not newOne AND not allowed to edit
-                                                    (!recipient.newOne && !recipient.allowSenderToEdit)
-                                            }
-                                            className="text-gray-400 hover:text-blue-600 transition-colors cursor-pointer disabled:opacity-50"
-                                        >
-                                            <FiEdit size={16} />
-                                        </button>
-
-                                        {/* Delete Button */}
-                                        <button
-                                            type="button"
-                                            title="Remove recipient"
-                                            aria-label={`Remove recipient ${recipient.firstName}`}
-                                            onClick={() => handleRemoveRecipient(recipient)}
-                                            disabled={
-                                                // For templates: always enabled (never disabled)
-                                                ['templates'].includes(transactionTemplateToggle)
-                                                    ? false
-                                                    : // For transactions: disabled if not newOne AND not allowed to delete
-                                                    (!recipient.newOne && !recipient.allowSenderToDelete)
-                                            }
-                                            className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50"
-                                        >
-                                            <ImBin size={16} />
-                                        </button>
-                                    </div>
-
-
                                 )}
                             </div>
                         ))}

src/components/process/processStepTwo/DocumentContainer.tsx

@@ -999,7 +999,6 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
 
 
     // NEW DIRECTIONAL MOVEMENT HANDLER - START
-  
     const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => {
         if (!selectedTag) return;
 
@@ -1038,44 +1037,11 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
         });
     };
 
+    // Create a wrapper that matches DirectionalControls' expected signature
     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
-            )
-            : [],
-    });
-};
-
     return (
         <>
             {/* Center Doc Container - START */}
@@ -1235,7 +1201,6 @@ const handleDirectPositionChange = (newLeft: number, newTop: number) => {
 
             {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: ''

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

@@ -1,9 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
-import { FaArrowUp, FaArrowDown, FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+import { FaArrowUp, FaArrowDown, FaArrowLeft, FaArrowRight, FaRegCircle } from 'react-icons/fa';
 
 interface DirectionalControlsProps {
   onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
-  onPositionChange?: (left: number, top: number) => void;
   disabled?: boolean;
   stepSize?: number;
   className?: string;
@@ -17,67 +16,23 @@ interface DirectionalControlsProps {
 
 const DirectionalControls: React.FC<DirectionalControlsProps> = ({
   onMove,
-  onPositionChange,
   disabled = false,
   stepSize = 1,
   className = '',
   selectedType,
 }) => {
   const onMoveRef = useRef(onMove);
-  const [leftValue, setLeftValue] = useState('');
-  const [topValue, setTopValue] = useState('');
 
   useEffect(() => {
     onMoveRef.current = onMove;
   }, [onMove]);
 
-  useEffect(() => {
-    const { top = 0, left = 0 } = selectedType || {};
-    setLeftValue(Math.round(left).toString());
-    setTopValue(Math.round(top).toString());
-  }, [selectedType]);
-
   const handleMove = (direction: 'up' | 'down' | 'left' | 'right') => {
     if (!disabled) {
       onMoveRef.current(direction, stepSize);
     }
   };
 
-  const handlePositionInputChange = (type: 'left' | 'top', value: string) => {
-    if (type === 'left') {
-      setLeftValue(value);
-    } else {
-      setTopValue(value);
-    }
-  };
-
-  const handlePositionInputBlur = (type: 'left' | 'top') => {
-    if (!onPositionChange) return;
-
-    const numericValue = parseFloat(type === 'left' ? leftValue : topValue);
-    if (isNaN(numericValue)) {
-      const { top = 0, left = 0 } = selectedType || {};
-      if (type === 'left') {
-        setLeftValue(Math.round(left).toString());
-      } else {
-        setTopValue(Math.round(top).toString());
-      }
-      return;
-    }
-
-    const { top = 0, left = 0 } = selectedType || {};
-    const newLeft = type === 'left' ? numericValue : left;
-    const newTop = type === 'top' ? numericValue : top;
-
-    onPositionChange(newLeft, newTop);
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent, type: 'left' | 'top') => {
-    if (e.key === 'Enter') {
-      handlePositionInputBlur(type);
-    }
-  };
-
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (disabled) return;
@@ -109,113 +64,57 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
   const buttonClass = `
   p-1 rounded-sm transition-all duration-200 border shadow-sm text-[10px]
   ${disabled
-      ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+    ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-      : 'bg-white text-gray-600 hover:bg-blue-100 active:bg-blue-200 cursor-pointer'}
+    : 'bg-white text-gray-600 hover:bg-blue-100 active:bg-blue-200 cursor-pointer'}
-  flex items-center justify-center w-6 h-6 `;
+  flex items-center justify-center w-6 h-6
+`;
 
-  const inputClass = `
-    w-12 h-6 text-[10px] text-center border rounded px-1 bg-white
-    ${disabled
-      ? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-300'
-      : 'text-gray-600 border-gray-300 focus:border-blue-400 focus:outline-none'}
-  `;
 
   const { top = 0, left = 0, width = 0, height = 0 } = selectedType || {};
 
+  const right = left + width;
+  const bottom = top + height;
+
   return (
-    <div className={`flex flex-col items-center space-y-4 text-[10px] text-gray-700 ${className}`}>
+    <div className={`grid grid-cols-3 grid-rows-1 text-[10px] text-gray-700 ${className}`}>
-      {/* Top Button */}
+      {/* Top Row */}
-      <div className="flex justify-center me-4">
+      <div></div>
-        <div className="flex flex-col items-center">
+      <div className="flex flex-col items-center">
-          <button
+        <button onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move up" type="button">
-            onClick={() => handleMove('up')}
+          <FaArrowUp size={12} />
-            disabled={disabled}
+        </button>
-            className={buttonClass}
+        <span className="mt-1">Top: {Math.round(top)}px</span>
-            title="Move up"
+      </div>
-            type="button"
+      <div></div>
-          >
+
-            <FaArrowUp size={12} />
+      {/* Middle Row */}
-          </button>
+      <div className="flex flex-col items-center justify-center">
-          <span className="mt-1">Top</span>
+        <button onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move left" type="button">
-        </div>
+          <FaArrowLeft size={12} />
+        </button>
+        <span className="mt-1">Left: {Math.round(left)}px</span>
       </div>
 
-      {/* Middle Row: Left - Center (Inputs) - Right */}
+      <div className="w-8 h-8 flex items-center justify-center text-xs text-gray-400 ps-5"><FaRegCircle/></div>
-      <div className="flex items-center space-x-1">
-        {/* Left Button */}
-        <div className="flex flex-col items-center">
-          <button
-            onClick={() => handleMove('left')}
-            disabled={disabled}
-            className={buttonClass}
-            title="Move left"
-            type="button"
-          >
-            <FaArrowLeft size={12} />
-          </button>
-          <span className="mt-1">Left</span>
-        </div>
 
-        {/* Center Panel */}
+      <div className="flex flex-col items-center justify-center">
-        <div className="relative flex items-center justify-center bg-white rounded-lg px-1 py-2 w-24">
+        <button onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move right" type="button">
-          {/* Floating dimensions tooltip */}
+          <FaArrowRight size={12} />
-          <div className="absolute -top-2 left-1/2 -translate-x-1/2 px-2 py-[1px] text-[10px] font-mono text-black z-10 rounded-sm flex items-center gap-[2px]">
+        </button>
-            <input
+        {/* <span className="mt-1">Right: {Math.round(right)}px</span> */}
-              type="number"
-              value={leftValue}
-              onChange={(e) => handlePositionInputChange('left', e.target.value)}
-              onBlur={() => handlePositionInputBlur('left')}
-              onKeyPress={(e) => handleKeyPress(e, 'left')}
-              disabled={disabled}
-              className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono"
-            />
-            <span className="mx-[1px]">×</span>
-            <input
-              type="number"
-              value={topValue}
-              onChange={(e) => handlePositionInputChange('top', e.target.value)}
-              onBlur={() => handlePositionInputBlur('top')}
-              onKeyPress={(e) => handleKeyPress(e, 'top')}
-              disabled={disabled}
-              className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono"
-            />
-          </div>
-        </div>
-
-
-        {/* Right Button */}
-        <div className="flex flex-col items-center">
-          <button
-            onClick={() => handleMove('right')}
-            disabled={disabled}
-            className={buttonClass}
-            title="Move right"
-            type="button"
-          >
-            <FaArrowRight size={12} />
-          </button>
-          <span className="mt-1">Right</span>
-        </div>
       </div>
 
-      {/* Bottom Button */}
+      {/* Bottom Row */}
-      <div className="flex justify-center me-4">
+      <div></div>
-        <div className="flex flex-col items-center">
+      <div className="flex flex-col items-center">
-          <button
+        <button onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move down" type="button">
-            onClick={() => handleMove('down')}
+          <FaArrowDown size={12} />
-            disabled={disabled}
+        </button>
-            className={buttonClass}
+        {/* <span className="mt-1">Bottom: {Math.round(bottom)}px</span> */}
-            title="Move down"
-            type="button"
-          >
-            <FaArrowDown size={12} />
-          </button>
-          <span className="mt-1">Bottom</span>
-        </div>
       </div>
+      <div></div>
     </div>
   );
-
 };
 
-export default DirectionalControls;
+export default DirectionalControls;

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

@@ -180,26 +180,16 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
             if (!is24Hrs) {
                 val = timeFormats[1].format
             }
-            console.log("val", val)
+            setDroppedItems((prev) => (
-
+                {
-            setDroppedItems((prev) => {
-                const updatedArray = Array.isArray(prev[selTagKey])
-                    ? prev[selTagKey].map((item, i) => {
-                        if (i === selTagIndx) {
-                            const updatedItem = { ...item, [changeTo]: changeWith + " " + val, update: true };
-                            console.log('Updating item at index', i, 'with:', updatedItem);
-                            return updatedItem;
-                        }
-                        return item;
-                    })
-                    : [];
-
-                return {
                     ...prev,
-                    [selTagKey]: updatedArray,
+                    [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
-                };
+                        ? prev[selTagKey].map((item, i) =>
-            });
+                            i === selTagIndx ? { ...item, [changeTo]: changeWith + " " + val, update: true } : item
-
+                        )
+                        : [],
+                }// Provide a fallback in case it's undefined or not an array
+            ));
 
         } else {
             setDroppedItems((prev) => {
@@ -407,7 +397,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
 
 
 
-                    {(selectedTag.type.toLowerCase() !== TagsTypes.SIGNATURE && selectedTag.type.toLowerCase() !== TagsTypes.INITIALS) &&
+                    {
                         <div className="">
                             <div className="flex items-center justify-between mr-2 cursor-pointer"
                                 onClick={() => setStyleOpen(!styleOpen)}

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

@@ -86,7 +86,6 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
                                 val = val + " " + timeFormats[1].format;
                             }
                         }
-                        console.log('line 89' , val )
                         return (
                             <div
                                 key={indx}

src/components/setting/Signature/AddSignatureModal.tsx

@@ -55,7 +55,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
     getAllSignatures,
     editingSignature
 }) => {
-    const [activeTab, setActiveTab] = useState<'TYPE' | 'DRAW' | 'UPLOAD' >('TYPE');
+    const [activeTab, setActiveTab] = useState<'TYPE' | 'DRAW' | 'UPLOAD' | 'SELECT'>('TYPE');
     const [fullName, setFullName] = useState('');
     const [initials, setInitials] = useState('');
     const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@@ -110,7 +110,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
         { id: 'TYPE', label: 'TYPE', icon: <GrCheckboxSelected className="w-4 h-4" /> },
         { id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-5 h-5" /> },
         { id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-5 h-5" /> },
-        // { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
+        { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
     ];
 
     // Initialize form with editing signature data
@@ -394,14 +394,14 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                     </div>
                 );
 
-            // case 'SELECT':
+            case 'SELECT':
-            //     return (
+                return (
-            //         <div className="h-full flex flex-col">
+                    <div className="h-full flex flex-col">
-            //             <div className="mb-6">
+                        <div className="mb-6">
-            //                 <h2 className="text-xl font-semibold text-gray-900 mb-2">Select Signature</h2>
+                            <h2 className="text-xl font-semibold text-gray-900 mb-2">Select Signature</h2>
-            //             </div>
+                        </div>
-            //         </div>
+                    </div>
-            //     );
+                );
             default:
                 return null;
         }

src/components/setting/Signature/Signature.tsx

@@ -232,7 +232,7 @@ const SignatureManager: React.FC = () => {
 
                             {/* Empty State (if no signatures) */}
                             {signatures.length === 0 && (
-                                <div className=" rounded-xl shadow-lg p-12 text-center mt-8">
+                                <div className="bg-white rounded-xl shadow-lg p-12 text-center mt-8">
                                     <div className="text-gray-400 mb-4">
                                         <FiEdit3 className="w-16 h-16 mx-auto" />
                                     </div>

src/components/templates/Templates.tsx

@@ -149,7 +149,7 @@ const Templates = () => {
                     <td className="px-4 py-2 text-sm text-center">{item.name || 'Dummy'}</td>
                     <td className="px-4 py-2 text-sm text-center">{formatDate(item.createdAt)}</td>
                     <td className="px-4 py-2 text-sm text-center">{formatDate(item.lastModifiedAt)}</td>
-                    <td className="px-4 py-2 text-sm text-center" onClick={() => handleUseClick(item)}><span className="bg-[var(--lightGreyCol)] cursor-pointer  border-gray-300 text-gray-600 hover:bg-gray-100 px-3 py-1 rounded-lg  font-semibold text-[12px]">Use</span></td>
+                    <td className="px-4 py-2 text-sm text-center" onClick={() => handleUseClick(item)}><span className="from-green-500 cursor-pointer to-blue-500 bg-gradient-to-br px-3 py-1 rounded-lg text-white font-semibold text-[12px]">Use</span></td>
                     {/* Dropdown Trigger + Tooltip */}
                     <td className="px-4 py-2 text-center relative">
                       <button

src/store/slices/selectedRecipientsSlice.tsx

@@ -351,12 +351,10 @@ export interface Recipient {
     hostEmail: string;
     type: recipientType;
     color?: string;
-    allowSenderToEdit: boolean;
+    allowSenderToEdit: Boolean;
-    allowSenderToDelete: boolean;
+    allowSenderToRemove: Boolean;
-    roleName: string
+    roleName:string
     provideOwnTags?: boolean;
-    uuid?: string;
-    newOne: boolean;
 }
 
 export interface SelectedRecipientInt {
@@ -405,8 +403,6 @@ export const addRecipientAsync = createAsyncThunk<
             const updateRecipientsData = recipientsData.filter(recipient => recipient.id !== null);
             const createRecipientsData = recipientsData.filter(recipient => recipient.id == null);
 
-            console.log("createRecipientsData", createRecipientsData)
-
             const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
 
             const resUpdate = updateRecipientsData.length
@@ -522,7 +518,7 @@ const selectedRecipientsSlice = createSlice({
             state.signingOrder = action.payload;
         },
         removeSelectedRecipient: (state, action: PayloadAction<Recipient>) => {
-            state.recipients = state.recipients.filter((recipient) => recipient.uuid !== action.payload.uuid);
+            state.recipients = state.recipients.filter((recipient) => recipient.email !== action.payload.email);
         },
         addColorsToRecipient: (state) => {
             for (const [index, recipient] of state.recipients.entries()) {
@@ -544,35 +540,6 @@ const selectedRecipientsSlice = createSlice({
                 }
             }
         },
-        updateRecipient(state, action: PayloadAction<Recipient>) {
-            const payloadUuid = String(action.payload.uuid);
-
-            // First try matching by id
-            let index = state.recipients.findIndex(
-                r => String(r.id) === payloadUuid
-            );
-
-            // If not found, try matching by uuid
-            if (index === -1) {
-                index = state.recipients.findIndex(
-                    r => String(r.uuid) === payloadUuid
-                );
-            }
-
-            if (index !== -1) {
-                // Merge existing recipient with new values
-                state.recipients[index] = {
-                    ...state.recipients[index],
-                    ...action.payload
-                };
-            } else {
-                console.warn('Recipient not found with uuid:', payloadUuid);
-            }
-        }
-
-
-        ,
-
         resetSelRecipient: () => initialState
     },
     extraReducers: (builder) => {
@@ -635,7 +602,6 @@ export const {
     updateRecipientIds,
     resetSelRecipient,
     updateRecipientOrder,
-    updateRecipient,
     resetRecipients
 } = selectedRecipientsSlice.actions;