src/components/process/processStepOne/RecipientAddCard.tsx

@@ -48,7 +48,7 @@ const RecipientAddCard = ({ transactionTemplateToggle }) => {
     // Validation Ends
 
     dispatch(addRecipient(recipient));
-    setRecipients({ firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: Boolean, allowSenderToRemove: Boolean });
+    setRecipients({ firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: false, allowSenderToRemove: false });
     formRef.current?.reset();
   }
 

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

@@ -12,6 +12,8 @@ interface CommonAttrDropDownInt {
 
 const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subType, dropDownToggle, setDropDownToggle, handlePropertyChange}) => {
 
+    console.log("selectedType, subType,",selectedType, subType)
+
     return (
         <div className="flex flex-col">
             <label htmlFor="" className="">Type</label>

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

@@ -33,9 +33,9 @@ export interface DroppedItemProps {
     selTagIndx: number,
     DirectionalControlsProps: {
         onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
-    disabled?: boolean;
+        disabled?: boolean;
-    stepSize?: number;
+        stepSize?: number;
-    className?: string;
+        className?: string;
     }
 }
 
@@ -107,7 +107,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
 
     const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
 
-    // console.log("selectedTag", selectedTag, selectedType)
+    console.log("selectedTag", selectedTag, selectedType)
 
 
 
@@ -118,25 +118,33 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
     const [styleOpen, setStyleOpen] = useState(false);
 
     const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => {
-        console.log("Handle Property Change Called", "changeTo", changeTo, "changeWith", changeWith)
+
+        console.log("changeTo", changeTo, "changeWith", changeWith)
         if (changeTo === '' || changeWith === '') return
 
+        if (changeWith === "paragraph") {
+            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) => (
+            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
-                }// Provide a 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")
             setDroppedItems((prev) => (
                 {
@@ -150,6 +158,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
             ));
         }
         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
@@ -166,6 +175,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
             ));
 
         } else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
+            console.log("Fourth Check")
             let val = timeFormats[0].format;
             if (!is24Hrs) {
                 val = timeFormats[1].format
@@ -183,7 +193,6 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
 
         } else {
             setDroppedItems((prev) => {
-                console.log('Previous state:', prev);
 
                 const updatedItems = Array.isArray(prev[selTagKey])
                     ? prev[selTagKey].map((item, i) =>
@@ -302,7 +311,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
                         <RecipientsAttrCon selectedRecipientId={selectedTag.recipientId} handlePropertyChange={handlePropertyChange} />
                     }
 
-                    <DirectionalControls {...DirectionalControlsProps} selectedType={selectedTag.dimensions}/>
+                    <DirectionalControls {...DirectionalControlsProps} selectedType={selectedTag.dimensions} />
 
 
                     {selectedTag.label &&

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

@@ -22,6 +22,8 @@ interface TemporalDateAttrInt {
 }
 
 const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
+
+    
     const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
 
     const handleIs24HrsClick = (checked: boolean) => {

src/components/setting/Signature/AddSignatureModal.tsx

@@ -6,6 +6,7 @@ import DrawSignatureCanvas from './DrawSignatureCanvas';
 import { FaSpinner } from "react-icons/fa";
 import { GrCheckboxSelected } from "react-icons/gr";
 import { Bounce, toast } from "react-toastify";
+import { FiCheck } from 'react-icons/fi';
 
 interface Signature {
     id: string;
@@ -72,6 +73,10 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
         { id: 6, name: 'classic', initials: 'LA', style: 'classic' },
     ];
 
+    const [checked, setChecked] = useState(false);
+
+    const toggleCheckbox = () => setChecked(!checked);
+
     const [selectedSignature, setSelectedSignature] = useState<SelectStyle>(
         signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
     );
@@ -134,6 +139,10 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                     setPreview2(`data:image/png;base64,${editingSignature.initialsBlob}`);
                 }
             }
+
+            if (editingSignature.default) {
+                setChecked(editingSignature.default)
+            }
         }
     }, [editingSignature]);
 
@@ -197,7 +206,8 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                 initialsBase64: signatures.initials,
                 firstName: fullName.split(' ')[0] || user.firstName,
                 lastName: fullName.split(' ')[1] || user.lastName,
-                font: selectedSignature.style
+                font: selectedSignature.style,
+                default:checked
             };
 
             let res;
@@ -384,8 +394,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                     </div>
                 );
 
-
-
             case 'SELECT':
                 return (
                     <div className="h-full flex flex-col">
@@ -430,7 +438,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                     <div className="px-4 py-4 border-b border-gray-200">
                         <div className="flex items-center space-x-3">
                             <div className='px-1 py-1'>
-                                <h3 className="text-md font-semibold text-gray-900">Add Signature</h3>
+                                <h3 className="text-md font-semibold text-gray-900">Add Signature </h3>
                                 <p className="text-xs text-gray-500">Create your digital signature</p>
                             </div>
                         </div>
@@ -505,6 +513,35 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                         </button> */}
                         {renderContent()}
                     </div>
+                    <div className="text-right px-6 py-1 text-white">
+                        <label className="inline-flex items-center cursor-pointer group">
+                            <input
+                                type="checkbox"
+                                checked={checked}
+                                onChange={toggleCheckbox}
+                                className="sr-only"
+                            />
+
+                            {/* Custom checkbox UI */}
+                            <div
+                                className={`w-4 h-4 border rounded transition-all duration-300 flex items-center justify-center
+            ${checked ? 'bg-[var(--modalSubmitBG)] border-[var(--modalSubmitBG)] scale-110' : 'bg-white border-gray-400'}
+          `}
+                            >
+                                {checked && (
+                                    <FiCheck className="text-white text-sm transform scale-100 transition-transform duration-300" />
+                                )}
+                            </div>
+
+                            <p className="text-sm text-gray-700 opacity-80 ms-1">
+                                {checked
+                                    ? 'Signature will be used by default.'
+                                    : 'Signature will not be used by default.'}
+                            </p>
+                        </label>
+
+                        {/* Caption text below */}
+                    </div>
 
                     {/* Footer Buttons in Main Area */}
                     <div className="p-4 border-t border-gray-200 flex justify-end gap-3">

src/components/templates/Templates.tsx

@@ -61,9 +61,28 @@ const Templates = () => {
     return new Date(timestamp * 1000).toLocaleString();
   };
 
-const handleUseFun = (id) => {
+  const handleUseClick = async (item: any) => {
-alert(id)
+    try {
-}
+      const payload = {
+        name: item?.name ?? "",
+        subject: item.subject,
+        message: item.message,
+        description: item.description,
+        expireAfter: item.expireAfter,
+        enableIdStamping: item.enableIdStamping,
+        allowViewAudit: item.allowViewAudit,
+        allowReassign: item.allowReassign,
+        enableSignatureIdStamping: item.enableSignatureIdStamping,
+        templateId: item.id,
+      };
+      let res = await api.post(`/api/accounts/${activeAccountId}/transactions`, payload)
+      console.log("handleUseClick", res.data)
+      // /process-step-one/:accountId/:transactionId
+      navigate(`/process-step-one/${activeAccountId}/${res?.data?.id}`);
+    } catch (error) {
+      console.log(error)
+    }
+  }
 
 
 
@@ -130,7 +149,7 @@ alert(id)
                     <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={() => handleUseFun(item.id)}><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>
+                    <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,6 +351,8 @@ export interface Recipient {
     hostEmail: string;
     type: recipientType;
     color?: string;
+    allowSenderToEdit: Boolean;
+    allowSenderToRemove: Boolean;
     roleName:string
     provideOwnTags?: boolean;
 }

src/utlity/tagGroupConUtils.ts

@@ -40,6 +40,8 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
     const borderBottom: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='bottom']");
     const borderLeft: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='left']");
 
+    console.log("handleGroupBorderPosition")
+
     if (borderTop !== null && dimension.maxLeft !== null && dimension.minLeft !== null) {
         borderTop.style.width = (dimension.maxLeft - dimension.minLeft) + "px";
         borderTop.style.height = "1px";