template&assessment-self-sign-first-form

Reviewed-on: http://git.hicglobalsolutions.in/BhawanSingh/SME-Web/pulls/13

src/components/home/Cards.tsx

@@ -204,7 +204,7 @@ const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRa
   // }
 
   return (
-    <div className="w-full px-4 py-3 mt-2 rounded-md">
+    <div className="w-full px-3  rounded-md">
       {/* Header */}
       <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between mb-2 gap-4">
         <div className="flex items-center gap-3">
@@ -212,7 +212,7 @@ const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRa
             <FaFilter className="text-white text-lg" />
           </div> */}
           <div>
-            <h2 className="text-lg font-semibold text-gray-800">Overview</h2>
+            {/* <h2 className="text-lg font-semibold text-gray-800">Overview</h2> */}
             {/* <p className="text-gray-600 text-sm">Monitor performance metrics</p> */}
           </div>
         </div>
@@ -231,11 +231,11 @@ const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRa
           </div>
         </div>
       </div> :
-        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
+        <div className="flex flex-wrap gap-2 justify-between">
           {cards.map((card, index) => (
             <div
               key={card.title}
-              className={`group relative overflow-hidden rounded-xl ${card.gradient} border border-white/40 p-4 transition-all duration-300 hover:scale-105 hover:shadow-lg ${card.shadowColor} cursor-pointer backdrop-blur-sm`}
+              className={`group relative overflow-hidden rounded-lg ${card.gradient} border border-white/40 px-3 py-1 transition-all duration-300 hover:scale-105 hover:shadow-lg ${card.shadowColor} cursor-pointer backdrop-blur-sm min-w-[200px] max-w-[220px]`}
               style={{
                 animationDelay: `${index * 100}ms`
               }}
@@ -247,24 +247,20 @@ const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRa
               </div>
 
               {/* Content */}
-              <div className="relative z-10">
+              <div className="relative flex justify-between items-center z-10">
-                <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-2">
                   <div className={`p-2 rounded-lg border ${card.iconBg} group-hover:scale-110 transition-transform duration-200`}>
                     {card.icon}
                   </div>
-                  {renderTrendIndicator(card.trend, card.percentage)}
+                  <h3 className="text-sm font-medium text-gray-600 group-hover:text-gray-700 transition-colors">
-                </div>
-
-                <div className="space-y-1">
-                  <h3 className="text-xs font-medium text-gray-600 group-hover:text-gray-700 transition-colors">
                     {card.title}
                   </h3>
-                  <div className="flex items-baseline gap-1">
+                </div>
-                    <p className={`text-xl font-bold ${card.textColor} group-hover:scale-105 transition-transform duration-200`}>
+
+                <div className="flex items-center">
+                  <p className={`text-xl font-bold ${card.textColor} group-hover:scale-105 transition-transform duration-200 leading-none mb-1`}>
                     {card.count}
                   </p>
-                    <span className="text-[10px] text-gray-500">items</span>
-                  </div>
                 </div>
               </div>
 

src/components/home/Home.tsx

@@ -33,7 +33,7 @@ const Home = () => {
             {
                 title: 'Action Needed',
                 count: data.actionNeeded || 0,
-                icon: <FaTasks size={18} className="text-indigo-600" />,
+                icon: <FaTasks size={15} className="text-indigo-600" />,
                 gradient: 'bg-gradient-to-br from-indigo-50 to-indigo-100',
                 shadowColor: 'shadow-indigo-200/50',
                 iconBg: 'bg-indigo-100 border-indigo-200',
@@ -43,7 +43,7 @@ const Home = () => {
             {
                 title: 'Expiring Soon',
                 count: data.expiring || 0,
-                icon: <FaHourglassHalf size={18} className="text-rose-600" />,
+                icon: <FaHourglassHalf size={15} className="text-rose-600" />,
                 gradient: 'bg-gradient-to-br from-rose-50 to-rose-100',
                 shadowColor: 'shadow-rose-200/50',
                 iconBg: 'bg-rose-100 border-rose-200',
@@ -53,7 +53,7 @@ const Home = () => {
             {
                 title: 'Completed',
                 count: data.completed || 0,
-                icon: <FaCheckCircle size={18} className="text-teal-600" />,
+                icon: <FaCheckCircle size={15} className="text-teal-600" />,
                 gradient: 'bg-gradient-to-br from-teal-50 to-teal-100',
                 shadowColor: 'shadow-teal-200/50',
                 iconBg: 'bg-teal-100 border-teal-200',
@@ -63,7 +63,7 @@ const Home = () => {
             {
                 title: 'Draft',
                 count: data.draft || 0,
-                icon: <FaClock size={18} className="text-stone-600" />,
+                icon: <FaClock size={15} className="text-stone-600" />,
                 gradient: 'bg-gradient-to-br from-blue-50 to-blue-100',
                 shadowColor: 'shadow-blue-200/50',
                 iconBg: 'bg-blue-100 border-blue-200',

src/components/process/CompletionScreen/DocumentCompletionScreen.tsx

@@ -48,7 +48,7 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
                     {signers.map((signer) => (
                         <div key={signer.id} className="flex items-center gap-4 p-3 bg-white/40 rounded-lg">
                             <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium">
-                                {signer.name.split(" ").map(n => n[0].toUpperCase()).join("")}
+                                {signer.name.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.split("").map(n => n[0].toUpperCase()).join("")}
                             </div>
                             <div className="flex-1">
                                 <div className="font-medium text-gray-800">{signer.name}</div>

src/components/process/processStepOne/ProcessStepOne.tsx

@@ -7,15 +7,17 @@ import api from "../../../config/api";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../../store/store";
 import { useEffect, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { setImages } from "../../../store/slices/selectedDocsSlice";
-import { addRecipient, addRecipientAsync, fetchRecipients, recipientType, resetRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE, updateRecipientIds } from "../../../store/slices/selectedRecipientsSlice";
+import { addRecipient, addRecipientAsync, fetchRecipients, recipientType, removeAllRecipients, removeRecipientAsync, resetRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE, updateRecipientIds } from "../../../store/slices/selectedRecipientsSlice";
 import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from "../../../store/slices/transactionSlice";
 import { hideLoader, showLoader } from "../../../store/slices/loaderSlice";
 import Loader from "../../dashboard/Loader";
 import { Bounce, toast } from "react-toastify";
 import { fetchDocuments, resetDocuments, setDocuments, uploadDocuments } from "../../../store/slices/documentSlice";
 import { SignTypeEnum } from "../../../utlity/types";
+import { RiPencilFill } from "react-icons/ri";
+import SelfSignWarnModal from "./SelfSignWarnModal";
 
 const ProcessStepOne = () => {
   interface EmailDtls {
@@ -28,6 +30,9 @@ const ProcessStepOne = () => {
   const signType = useParams<{ signType: string }>().signType;
   const templateId = useParams<{ templateId: string }>().templateId;
   let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
+  const [searchParams] = useSearchParams();
+  console.log("searchParams", searchParams.get('useTemplate'))
+  const isTamplate = searchParams.get('useTemplate')
 
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -54,10 +59,29 @@ const ProcessStepOne = () => {
 
   const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
   const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
+  const [showSelfSignWarnModal, setShowSelfSignWarnModal] = useState(false)
+
+  console.log()
   const userData = useSelector((state: RootState) => state.user)
   // ProcessStepOne.tsx
   const topRef = useRef<HTMLDivElement | null>(null);
 
+  const [templateName, setTemplateName] = useState('Untitled');
+  const [isTyping, setIsTyping] = useState(false);
+
+  // Optional: use a timer to detect pause in typing
+  let typingTimeout = null;
+
+  const handleChange = (e) => {
+    setTemplateName(e.target.value);
+    setIsTyping(true);
+
+    clearTimeout(typingTimeout);
+    typingTimeout = setTimeout(() => {
+      setIsTyping(false);
+    }, 5000); // hide icon while typing, show it again after 500ms of no input
+  };
+
   // const userData = useSelector((state: RootState) => state.user)
 
   const [transactionDetails, setTransactionDetails] = useState<any>([]);
@@ -71,6 +95,7 @@ const ProcessStepOne = () => {
       try {
         const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`);
         setTransactionDetails(res.data)
+        // console.log("setTransactionDetails",res.data)
       } catch (e) {
         console.log("Error - transactions details")
       }
@@ -104,13 +129,14 @@ const ProcessStepOne = () => {
 
   const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-  const handleNextClick = async (isSendNow: boolean) => {
+  const handleNextClick = async (isSendNow: boolean, saveAndClose: boolean = false) => {
     let formError = {
       documents: false,
       recipients: false,
       subject: false
     }
 
+    if (transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
       if (!selectedDocuments.length) {
         formError.documents = true
       }
@@ -143,6 +169,8 @@ const ProcessStepOne = () => {
         });
         return;
       }
+    }
+
 
     try {
       dispatch(showLoader("Processing Documents..."));
@@ -193,6 +221,17 @@ const ProcessStepOne = () => {
       let recipientId = null;
 
       if (signType === SignTypeEnum.selfSign) {
+        dispatch(removeAllRecipients());
+        await Promise.all(
+          selectedRecipients.map((recipient) => dispatch(removeRecipientAsync({
+            recipientId: recipient.id,
+            email: recipient.email,
+            accountId,
+            transactionId,
+          }))
+          )
+        );
+
         recipientsDataTemp = [{
           id: null,
           routingOrder: 1,
@@ -232,6 +271,7 @@ const ProcessStepOne = () => {
       console.log(`1/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
 
       let res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, {
+        name: templateName,
         subject: emailDtls.subject, message: emailDtls.message,
         status: "CREATED"
       })
@@ -250,7 +290,11 @@ const ProcessStepOne = () => {
           dispatch(hideLoader());
           if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
             console.log(`/process-step-two/${accountId}/template/${transactionId}`)
+            if (!saveAndClose) {
               navigate(`/process-step-two/${accountId}/template/${transactionId}`)
+            } else {
+              navigate(`/templates`)
+            }
           } else {
             if (signType === SignTypeEnum.selfSign) {
               (async () => {
@@ -295,6 +339,7 @@ const ProcessStepOne = () => {
   const handleSelfSignCb = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.currentTarget.checked) {
       navigate("self_sign");
+      setShowSelfSignWarnModal((prev) => !prev)
     } else {
       navigate("./../");
     }
@@ -313,18 +358,42 @@ const ProcessStepOne = () => {
               onClick={handleClose}
               className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
             />
-            <p className="text-base font-normal text-gray-700 border-l pl-4">Add Recipient and Message</p>
+            <p className="text-base font-normal text-gray-700 border-l pl-4 relative">
+              {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ?
+                <>
+                  <input
+                    value={templateName}
+                    onChange={handleChange}
+                    className="w-full px-4 py-1.5 border-2 border-dashed rounded-md text-sm focus:outline-none transition border-gray-300 focus:ring-2 focus:border-dashed focus:ring-[var(--primary)]"
+                  />
+                  {!isTyping && (
+                    <RiPencilFill className="absolute top-2.5 right-2 text-[17px]" />
+                  )}
+                </> :
+                "Add Recipient and Message"
+              }
+            </p>
           </div>
 
           <div
             id="add-tags-btn-step-one"
             className='flex items-center gap-3'>
+
+
+            {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && <button
+              onClick={() => handleNextClick(false, true)}
+              className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
+            >
+              Save & Close
+            </button>}
+
             <button
               onClick={() => handleNextClick(false)}
-              className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition"
+              className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
             >
               {signType === SignTypeEnum.selfSign ? "Sign" : "Next"}
             </button>
+
           </div>
         </div>
 
@@ -340,7 +409,7 @@ const ProcessStepOne = () => {
           {/* Recipients */}
           <section className="mt-8">
 
-            {
+            {!isTamplate &&
               transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES &&
               <div className="flex justify-between items-center">
                 <h2 className="text-lg font-medium mb-4 pt-6 border-t text-[var(--processStepOneTextHead)]">Signers</h2>
@@ -356,7 +425,7 @@ const ProcessStepOne = () => {
             }
 
             {
-              signType !== SignTypeEnum.selfSign &&
+              (signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) &&
               <div className="flex flex-col gap-4 align-start">
                 <RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase}  />
                 {/* {signType !== "self-sign" && <RecipientAddCard />} */}
@@ -406,6 +475,7 @@ const ProcessStepOne = () => {
         </div>
 
         {globalLoader.isLoading && <Loader />}
+        {showSelfSignWarnModal && <SelfSignWarnModal setShowSelfSignWarnModal={setShowSelfSignWarnModal} />}
       </div >
     </>
   );

src/components/process/processStepOne/RecipientAddCard.tsx

@@ -1,8 +1,8 @@
 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, TRANSACTION_TEMPLATE_TOGGLE, updateRecipient } from "../../../store/slices/selectedRecipientsSlice";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
-import { AppDispatch } from "../../../store/store";
+import { AppDispatch, RootState } from "../../../store/store";
 import api from "../../../config/api";
 import ContactModal from "./ContactModal";
 import useDebouncedEffect from "../../../utlity/useDebounce";
@@ -29,6 +29,8 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
     JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
   );
 
+  const recipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
+  console.log("recipients.length in AddCase", recipients)
 
   const [contactData, setContactData] = useState<ContactTypeObj>({ type: "", contacts: [] });
   const [openContactModal, setOpenContactModal] = useState(false);
@@ -36,7 +38,7 @@ 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>({ uuid: null, newOne: false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: true, allowSenderToDelete: true });
 
   const [showAdvanceSettings, setShowAdvanceSettings] = useState(false)
 
@@ -47,6 +49,14 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
   const [lastQuery, setLastQuery] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [manualFocusTriggered, setManualFocusTriggered] = useState(false);
+  const [errors, setErrors] = useState({
+    roleName: false,
+    lastName: false,
+    email: false,
+    emailFormat: false,
+    type: false,
+  });
+
 
 
   console.log(recipient)
@@ -62,7 +72,37 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
   }, [openContactModal]);
 
   useEffect(() => {
+    // Check if the recipient exists in the list (using uuid or id or email)
+    const exists = recipients.some((r) => {
+      return (
+        (r.uuid && r.uuid === editRecipient?.uuid) ||
+        (r.id && r.id === editRecipient?.id) ||
+        (r.email && r.email === editRecipient?.email)
+      );
+    });
+    console.log("Line 83", exists)
     if (editCase === "Edit" && editRecipient) {
+      console.log("editRecipientAdd", editRecipient)
+      if (!exists) {
+        // Recipient was deleted -> reset
+        setEditCase('');
+        setEditRecipient(null);
+        setRecipients({
+          firstName: "",
+          lastName: "",
+          email: "",
+          hostName: "",
+          hostEmail: "",
+          roleName: "",
+          type: recipientType.SIGNER,
+          allowSenderToEdit: true,
+          allowSenderToDelete: true,
+          uuid: "",
+          newOne: false,
+        });
+        return;
+      }
+
       setRecipients({
         // id:editRecipient.id,
         firstName: editRecipient.firstName || "",
@@ -72,36 +112,109 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
         hostEmail: editRecipient.hostEmail || "",
         roleName: editRecipient.roleName || "",
         type: editRecipient.type || recipientType.SIGNER,
-        allowSenderToEdit: editRecipient.allowSenderToEdit ?? false,
+        allowSenderToEdit: editRecipient.allowSenderToEdit ?? true,
-        allowSenderToDelete: editRecipient.allowSenderToDelete ?? false,
+        allowSenderToDelete: editRecipient.allowSenderToDelete ?? true,
         uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''),
         newOne: editRecipient.newOne ?? false
       });
     }
-  }, [editCase, editRecipient]);
+  }, [editCase, editRecipient, recipients]);
 
 
   const handleRecipientAdd = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    console.log("recipientrecipient", recipient)
+    const newErrors = {
+      roleName: false,
+      lastName: false,
+      email: false,
+      emailFormat: false,
+      type: false,
+    };
 
-    if (!recipient.lastName || !recipient.email || !recipient.type) return;
+    const roleNameFilled = recipient.roleName.trim();
+    const lastNameFilled = recipient.lastName.trim();
+    const emailFilled = recipient.email.trim();
+    const firstNameFilled = recipient.firstName.trim()
 
-    // ✅ Email format validation
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(recipient.email)) {
+
-      console.log("Invalid email format");
+    // 🔹 Check if we're in TRANSACTIONS mode
+    if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
+      if (lastNameFilled || emailFilled) {
+        if (lastNameFilled && !emailFilled) {
+          setErrors({ ...newErrors, email: true });
           return;
         }
 
+        if (!lastNameFilled && emailFilled) {
+          setErrors({ ...newErrors, lastName: true });
+          return;
+        }
+
+        if (!emailRegex.test(emailFilled)) {
+          setErrors({ ...newErrors, emailFormat: true });
+          return;
+        }
+
+        submitForm();
+        return;
+      }
+
+      // Neither lastName nor email is filled — treat as invalid
+      setErrors({ ...newErrors, lastName: true, email: true });
+      return;
+    }
+
+
+
+    // // 1. If either lastName or email is filled, validate their presence mutually
+    // if ( emailFilled) {
+
+    //   // if (lastNameFilled && !emailFilled) {
+    //   //   setErrors({ ...newErrors, email: true });
+    //   //   return;
+    //   // }
+
+    //   // if (!lastNameFilled && emailFilled) {
+    //   //   setErrors({ ...newErrors, lastName: true });
+    //   //   return;
+    //   // }
+
+    //   // // Both lastName and email are filled — check email format
+    //   if (!emailRegex.test(emailFilled)) {
+    //     setErrors({ ...newErrors, emailFormat: true });
+    //     return;
+    //   }
+
+    //   // Passed validation, submit
+    //   submitForm();
+    //   return;
+    // }
+
+
+    if (roleNameFilled || lastNameFilled || emailFilled || firstNameFilled) {
+      submitForm()
+      return
+    }
+
+    // 2. If both lastName and email empty, validate roleName only
+    if (!roleNameFilled) {
+      setErrors({ ...newErrors, roleName: true });
+      return;
+    }
+
+    // roleName filled, submit immediately
+    submitForm();
+
+    function submitForm() {
       if (editCase === 'Edit') {
         dispatch(updateRecipient(recipient));
       } else {
         dispatch(addRecipient({
           ...recipient,
           uuid: uuidv4(),
-        newOne: true
+          newOne: true,
         }));
       }
 
@@ -113,65 +226,27 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
         hostEmail: "",
         roleName: "",
         type: recipientType.SIGNER,
-      allowSenderToEdit: false,
+        allowSenderToEdit: true,
-      allowSenderToDelete: false,
+        allowSenderToDelete: true,
         uuid: "",
-      newOne: false
+        newOne: false,
       });
 
-    // setRecipients(null),
+      setErrors({
-    setEditCase("")
+        roleName: false,
-setManualFocusTriggered(false)
+        lastName: false,
+        email: false,
+        emailFormat: false,
+        type: false,
+      });
+
+      setEditCase("");
+      setManualFocusTriggered(false);
       formRef.current?.reset();
+    }
   };
 
 
-
-
-  // useEffect(() => {
-  // if (!recipient.firstName.length) return;
-
-  // const handler = setTimeout(() => {
-  //   api.get(`/api/contact?firstName=${recipient.firstName}`)
-  //     .then(res => {
-  //       setContactData({ type: "firstName", contacts: res.data.content });
-  //     })
-  //     .catch(err => console.log(err));
-  // }, 500); // wait 500ms after the last change
-
-  // return () => {
-  //   clearTimeout(handler); // cancel previous timeout if effect runs again
-  // };
-
-  // }, [recipient.firstName]);
-
-  // useDebouncedEffect(() => {
-  //   if (!recipient.firstName.length) return;
-  //   api.get(`/api/contact?firstName=${recipient.firstName}`)
-  //   .then(res => {
-  //     setContactData({ type: "firstName", contacts: res.data.content });
-  //   })
-  //   .catch(err => console.log(err));
-  // }, [recipient.firstName], 500);
-
-  // useDebouncedEffect(() => {
-  //   if (!recipient.lastName.length) return
-  //   api.get(`/api/contact?lastName=${recipient.lastName}`)
-  //     .then(res => {
-  //       setContactData({ type: "lastName", contacts: res.data.content });
-  //     })
-  //     .catch(err => console.log(err))
-  // }, [recipient.lastName], 500);
-
-  // useDebouncedEffect(() => {
-  //   if (!recipient.email.length) return
-  //   api.get(`/api/contact?email=${recipient.email}`)
-  //     .then(res => {
-  //       setContactData({ type: "email", contacts: res.data.content });
-  //     })
-  //     .catch(err => console.log(err))
-  // }, [recipient.email], 500);
-
   const handleContactModalBlur = () => {
     setTimeout(() => {
       setOpenContactModal(false)
@@ -245,7 +320,7 @@ setManualFocusTriggered(false)
     }
   }, [recipient.firstName, recipient.lastName, recipient.email], 300);
 
-useEffect(() => {
+  useEffect(() => {
     const handleClickOutside = (e: MouseEvent | FocusEvent) => {
       if (
         containerRef.current &&
@@ -262,7 +337,7 @@ useEffect(() => {
       document.removeEventListener("mousedown", handleClickOutside);
       document.removeEventListener("focusin", handleClickOutside);
     };
-}, []);
+  }, []);
 
 
 
@@ -275,47 +350,53 @@ useEffect(() => {
         id="add-recipient-step-one"
         className="w-full bg-white border border-gray-200 rounded-lg shadow-md px-6 py-4 space-y-3 relative"
       >
-      {transactionTemplateToggle === 'templates' && (
+        {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
           <div className="space-y-1">
             {/* Top Row: Role Input + Settings */}
             <div className="flex justify-between items-center">
               {/* Role Name Input */}
+              {/* Role Name Input */}
+              <div className="w-64">
                 <input
-              required
                   type="text"
-              onFocus={() => setOpenContactModal(true)}
-              onBlur={handleContactModalBlur}
                   value={recipient.roleName}
                   placeholder="Role name"
-              className="w-64 px-3 py-2 me-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
+                  className={`w-full px-3 py-2 border rounded-md text-sm focus:outline-none transition
-              onChange={(e) => setRecipients({ ...recipient, roleName: e.target.value })}
+      ${errors.roleName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
+                  onChange={(e) => {
+                    setRecipients({ ...recipient, roleName: e.target.value });
+                    setErrors(prev => ({ ...prev, roleName: false }));
+                  }}
                 />
+                {errors.roleName && (
+                  <p className="text-red-500 text-xs mt-1">Role is required.</p>
+                )}
+              </div>
+
 
               {/* Settings + Permissions */}
               <div className="flex items-center">
-              <div className="flex justify-between">
+                <div className="flex justify-between w-full">
-                {/* Permission Status Text - Always Visible when settings open */}
+                  {/* Permission Status Text - Always Visible */}
-                <div
+                  <div className="max-h-10 opacity-100 me-3 overflow-hidden">
-                  className={`transition-all  duration-600 ease-in-out ${showAdvanceSettings ? 'max-h-10 opacity-100 me-3' : 'max-h-0 opacity-0 '
+                    <div className="text-sm text-gray-600 pt-0.5">
-                    } overflow-hidden`}
+                      {/* {recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Full permissions granted"}
-                >
-                  <div className="text-sm text-gray-600">
-                    {recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Full permissions granted"}
                       {recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "Edit permission granted"}
                       {!recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Delete permission granted"}
-                    {!recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "No permissions granted"}
+                      {!recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "No permissions granted"} */}
+                      Permissions granted :
                     </div>
                   </div>
-                {/* Animated Permission Controls */}
+
-                <div className={`overflow-visible transition-all duration-900 ease-in-out ${showAdvanceSettings ? 'max-w-80 opacity-100' : 'max-w-0 opacity-0'
+                  {/* Permission Controls - Always Visible */}
-                  }`}>
+                  <div className="max-w-80 opacity-100 overflow-visible">
                     <div className="flex items-center space-x-3 pr-1.5">
                       {/* Edit 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.allowSenderToEdit
+                          className={`relative flex items-center justify-center w-12 h-7 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToEdit
-                          ? 'bg-blue-100 border-blue-500 shadow-lg'
+                            ? 'bg-blue-100 border-blue-500 shadow-md'
-                          : 'bg-white border-gray-300 hover:border-blue-400'
+                            : 'bg-white border-gray-300 hover:border-blue-400 text-gray-400'
                             }`}
                         >
                           <input
@@ -329,14 +410,14 @@ useEffect(() => {
                             className="absolute w-full h-full opacity-0 cursor-pointer"
                           />
                           <FiEdit
-                          className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToEdit ? 'text-blue-600' : 'text-gray-400'
+                            className={`w-2.5 h-2.5 pointer-events-none transition-all duration-300 ${recipient.allowSenderToEdit ? 'text-blue-600' : 'text-gray-400'
                               }`}
-                        />
+                          /><span className="ms-0.5 text-[12px]">Edit</span>
                         </label>
                         {/* Tooltip */}
                         <div className="absolute bottom-0 -translate-y-full left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
                           <div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
-                          Allow Edit Permission
+                            Edit Permission
                             <div className="absolute bottom-[-5px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
                           </div>
                         </div>
@@ -345,9 +426,9 @@ useEffect(() => {
                       {/* 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-15 h-7 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToDelete
-                          ? 'bg-red-100 border-red-500 shadow-lg'
+                            ? 'bg-red-100 border-red-500 shadow-md'
-                          : 'bg-white border-gray-300 hover:border-red-400'
+                            : 'bg-white border-gray-300 hover:border-red-400 text-gray-400'
                             }`}
                         >
                           <input
@@ -363,12 +444,12 @@ useEffect(() => {
                           <FiTrash
                             className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToDelete ? 'text-red-600' : 'text-gray-400'
                               }`}
-                        />
+                          /><span className="ms-0.5 text-[12px]">Delete</span>
                         </label>
                         {/* Tooltip */}
                         <div className="absolute bottom-0 -translate-y-full left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
                           <div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
-                          Allow Delete Permission
+                            Delete Permission
                             <div className="absolute bottom-[-5px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
                           </div>
                         </div>
@@ -376,68 +457,74 @@ useEffect(() => {
                     </div>
                   </div>
                 </div>
+              </div>
 
-              {/* Settings Icon */}
-              <div className="relative group">
-                <p
-                  className="text-blue-600 hover:text-blue-700 cursor-pointer transition-colors duration-200 p-2 rounded-full hover:bg-blue-50"
-                  onClick={() => setShowAdvanceSettings((prev) => !prev)}
-                >
-                  <IoIosSettings
-                    className={`h-6 w-6 transition-transform duration-300 ${showAdvanceSettings ? 'rotate-90' : 'rotate-0'
-                      }`}
-                  />
-                </p>
-                {/* Tooltip */}
-                <div className="absolute top-0 -translate-y-full left-1/2 transform -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
-                  <div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
-                    Advanced Settings
-                    <div className="absolute bottom-[-6px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
-                  </div>
-                </div>
-              </div>
-            </div>
             </div>
           </div>
         )}
 
         {/* Name Inputs */}
         <div className="grid grid-cols-12 gap-4 mt-3">
+          <div className="col-span-4">
             <input
               type="text"
               onFocus={() => handleFocus("firstName")}
               onBlur={handleContactModalBlur}
               value={recipient.firstName}
               placeholder="First Name"
-          className="col-span-4 w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
+              className={` w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
-          onChange={(e) => setRecipients({ ...recipient, firstName: e.target.value })}
+            ${errors.firstName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
+              onChange={(e) => {
+                setRecipients({ ...recipient, firstName: e.target.value });
+                // setErrors((prev) => ({ ...prev, firstName: false }));
+              }}
             />
+          </div>
+          {/* {errors.firstName && (
+            <p className="text-red-500 text-xs mt-1">First Name is required</p>
+          )} */}
+          <div className="col-span-4">
             <input
-          required
               type="text"
               onFocus={() => handleFocus("lastName")}
               onBlur={handleContactModalBlur}
               value={recipient.lastName}
               placeholder="Last Name"
-          className="col-span-4 w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
+              className={` w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
-          onChange={(e) => setRecipients({ ...recipient, lastName: e.target.value })}
+            ${errors.lastName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
+              onChange={(e) => {
+                setRecipients({ ...recipient, lastName: e.target.value });
+                setErrors((prev) => ({ ...prev, lastName: false }));
+              }}
             />
+            {errors.lastName && (
+              <p className="text-red-500 text-xs mt-1">Last Name is required</p>
+            )}
+          </div>
+          <div className="col-span-4">
             <input
-          required
               type="email"
               onFocus={() => handleFocus("email")}
               onBlur={handleContactModalBlur}
               value={recipient.email}
               placeholder="Recipient Email"
-          className="col-span-4 w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
+              className={`w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
-          onChange={(e) => setRecipients({ ...recipient, email: e.target.value })}
+            ${errors.email ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
+              onChange={(e) => {
+                setRecipients({ ...recipient, email: e.target.value });
+                setErrors((prev) => ({ ...prev, email: false }));
+              }}
             />
+            {errors.email && (
+              <p className="text-red-500 text-xs mt-1">Email is required</p>
+            )}
+          </div>
         </div>
 
 
         {recipient.type === recipientType.INPERSONSIGNER && <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <input
-          required
+            required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
             type="text"
             onFocus={() => setOpenContactModal(true)}
             onBlur={handleContactModalBlur}
@@ -447,7 +534,7 @@ useEffect(() => {
             onChange={(e) => setRecipients({ ...recipient, hostName: e.target.value })}
           />
           <input
-          required
+            required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
             type="email"
             onFocus={() => setOpenContactModal(true)}
             onBlur={handleContactModalBlur}
@@ -507,7 +594,7 @@ useEffect(() => {
           </button>
         </div>
       </form>
-</div>
+    </div>
   );
 };
 

src/components/process/processStepOne/RecipientCards.tsx

@@ -3,7 +3,7 @@ import {
     removeRecipientAsync,
     removeSelectedRecipient,
     // setSigningOrder,
-    updateRecipientOrder, // 👈 You need to define this in your slice
+    updateRecipientOrder,
 } from "../../../store/slices/selectedRecipientsSlice";
 import { AppDispatch, RootState } from "../../../store/store";
 
@@ -14,6 +14,7 @@ import SigningOrderDiagram from "../../../SigningOrderDiagram ";
 import { IoCloseOutline } from "react-icons/io5";
 import { useParams } from "react-router-dom";
 import { FiEdit } from "react-icons/fi";
+import { RiPencilFill } from "react-icons/ri";
 
 const getInitials = (name: string) => {
     if (!name) return "";
@@ -30,7 +31,7 @@ type CardsData = {
     transactionTemplateToggle: string
 };
 
-const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle }: CardsData) => {
+const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle , editRecipient ,editCase }: CardsData) => {
     const templateId = useParams<{ templateId: string }>().templateId;
     let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
 
@@ -59,7 +60,6 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
 
     const handleRemoveRecipient = (recipient) => {
         if (!accountId || !transactionId) return;
-// <<<<<<< HEAD
         // dispatch(removeSelectedRecipient(recipient))
         // dispatch(removeRecipientAsync([{
         //     recipientId: recipient.id,
@@ -67,7 +67,7 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
         //     accountId: accountId,
         //     transactionId: transactionId,
         // }]))
-// =======
+        // =======
         if (recipient.uuid) {
             dispatch(removeSelectedRecipient(recipient))
         } else {
@@ -78,7 +78,6 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
                 transactionId: transactionId,
             }))
         }
-// >>>>>>> origin/main
         if (recipients.length === 2) {
             let leftRecipient = recipients.filter((obj) => {
                 if ("id" in obj && "id" in recipient) {
@@ -135,15 +134,19 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
                             >
                                 <div className="flex items-center gap-3 min-w-0">
                                     {/* {signingOrder && ( */}
-                                    {recipients.length > 1 ? <input
+                                    {recipients.length > 1 ? <div className="relative">
+                                        <input
                                             type="number"
                                             value={recipient.routingOrder || 1}
                                             min={1}
                                             onChange={(e) =>
                                                 handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
                                             }
-                                        className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]"
+                                            className="w-10 h-6  text-center rounded text-sm text-gray-600  focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
-                                    /> : <input
+                                        />
+                                        {/* <RiPencilFill className="absolute top-1.5 right-0 text-[14px] text-gray-500" /> */}
+                                    </div>
+                                        : <input
                                             type="number"
                                             disabled
                                             value={recipient.routingOrder || 1}
@@ -220,11 +223,10 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
                 </div>
             )}
 
-
             {signingOrderModal.open &&
                 <div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center">
                     <div className="flex-col relative justify-center items-center max-w-[80%] max-h-[60vh] h-full overflow-auto">
-                        <div className="pb-2 text-white flex justify-between items-center">
+                        <div className="p-2 rounded-t-lg text-white flex justify-between items-center bg-[var(--primary)]">
                             <p className="font-semibold">Signing Order</p>
                             <div
                                 onClick={() => setSigningOrderModal({ ...signingOrderModal, open: false })}

src/components/process/processStepOne/SelfSignWarnModal.tsx

@@ -0,0 +1,44 @@
+import { useNavigate } from "react-router-dom";
+
+type PropsType = {
+    setShowSelfSignWarnModal: (val: boolean) => void;
+    onConfirm: () => void;
+};
+
+const SelfSignWarnModal = ({ setShowSelfSignWarnModal }: PropsType) => {
+    const navigate = useNavigate()
+
+    return (
+        <div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
+            <div className="bg-white rounded-lg shadow-xl p-6 w-100">
+                <h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Self Sign</h3>
+                <p className="text-gray-600 mb-6">
+                    Are you sure you want to proceed with self sign? This will remove all the recipient that you added.
+                </p>
+                <div className="flex justify-end gap-3">
+                    <button
+                        onClick={() => {
+                            setShowSelfSignWarnModal(false);
+                            navigate("./../");
+                        }}
+
+                        className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
+                    >
+                        No
+                    </button>
+                    <button
+                        onClick={() => {
+                            // onConfirm();
+                            setShowSelfSignWarnModal(false);
+                        }}
+                        className="px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded-md transition-colors"
+                    >
+                        Yes
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SelfSignWarnModal;

src/components/process/processStepTwo/DocumentContainer.tsx

@@ -66,12 +66,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
     // const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
     const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
     
-    console.log("selectedDocuments", selectedDocuments)
-
     const [droppedItems, setDroppedItems] = useState<DroppedItemsObj>({});
-    console.log("droppedItems", droppedItems)
-
-    // const [uniqGroupIds, setUniqGroupIds] = useState<string[]>([]);
 
 
     useEffect(() => {

src/components/process/processStepTwo/NavTwo.tsx

@@ -11,6 +11,7 @@ import { RiResetLeftLine, RiResetRightLine } from 'react-icons/ri'
 import { fetchRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice'
 import { fetchDocuments } from '../../../store/slices/documentSlice'
 import { useNavigate, useParams } from 'react-router-dom'
+import { Bounce, toast } from 'react-toastify'
 
 interface NavTwoProps {
     isFields: boolean;
@@ -85,7 +86,22 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
             setIsSend(false);
         }
         setIsSend(!isSend)
+        if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
             navigate(`/document-completion-screen/${accountId}/${transactionId}`)
+        } else {
+            navigate(`/templates`);
+            toast.success("Template Saved...!", {
+                position: "top-center",
+                autoClose: 1500,
+                hideProgressBar: false,
+                closeOnClick: false,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+                theme: "light",
+                transition: Bounce,
+            });
+        }
     }
 
     const handleSetIsFields = (setTo: boolean) => {
@@ -265,7 +281,9 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
                         id='send-sign-dash-btn'
                         onClick={() => handleSend()}
                         className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]'>
-                        <p className='tracking-wide text-white'>Send</p>
+                        <p className='tracking-wide text-white'>
+                            {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ? "Save" : "Send"}
+                        </p>
                         <FaSignature className='text-white text-md' />
                     </div>
 

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

@@ -152,7 +152,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
       {/* Middle Row: Left - Center (Inputs) - Right */}
       <div className="flex items-center space-x-1">
         {/* Left Button */}
-        <div className="flex flex-col items-center">
+        {/* <div className="flex flex-col items-center">
           <button
             onClick={() => handleMove('left')}
             disabled={disabled}
@@ -163,12 +163,12 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
             <FaArrowLeft size={12} />
           </button>
           <span className="mt-1">Left</span>
-        </div>
+        </div> */}
 
         {/* Center Panel */}
         <div className="relative flex items-center justify-center bg-white rounded-lg px-1 py-2 w-24 ">
           {/* Floating dimensions tooltip */}
-          <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]">
+          {/* <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]">
             <input
               type="number"
               value={leftValue}
@@ -188,12 +188,12 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
               disabled={disabled}
               className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono"
             />
-          </div>
+          </div> */}
         </div>
 
 
         {/* Right Button */}
-        <div className="flex flex-col items-center">
+        {/* <div className="flex flex-col items-center">
           <button
             onClick={() => handleMove('right')}
             disabled={disabled}
@@ -204,11 +204,11 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
             <FaArrowRight size={12} />
           </button>
           <span className="mt-1">Right</span>
-        </div>
+        </div> */}
       </div>
 
       {/* Bottom Button */}
-      <div className="flex justify-center me-4">
+      {/* <div className="flex justify-center me-4">
         <div className="flex flex-col items-center">
           <button
             onClick={() => handleMove('down')}
@@ -221,7 +221,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
           </button>
           <span className="mt-1">Bottom</span>
         </div>
-      </div>
+      </div> */}
     </div>
   );
 };

src/components/templates/Templates.tsx

@@ -40,7 +40,7 @@ const Templates = () => {
   const getAllTemplates = async () => {
     setLoading(true)
     try {
-      let res = await api.get(`/api/accounts/${activeAccountId}/templates`)
+      let res = await api.get(`/api/accounts/${activeAccountId}/templates?sortBy=lastModifiedAt desc`)
       let templateData = res?.data
       setTemplates(templateData)
     } catch (error) {
@@ -78,13 +78,16 @@ const Templates = () => {
       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}`);
+      navigate(`/process-step-one/${activeAccountId}/${res?.data?.id}?useTemplate=true`);
     } catch (error) {
       console.log(error)
     }
   }
 
-
+  const handleEditClick = (templateId: string) => {
+      setShowMenu(null);
+      navigate(`/process-step-one/${accountId}/template/${templateId}`);
+  }
 
   return (
     <div className="p-3 text-sm">
@@ -154,7 +157,7 @@ const Templates = () => {
                         {/* <FaCheck className="text-purple-600 text-xs" /> */}
                       </div>
                     </td>
-                    <td className="px-4 py-2 text-sm text-center">{item.name || 'Dummy'}</td>
+                    <td className="px-4 py-2 text-sm text-center">{item.name || 'Untitled'}</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>
@@ -180,10 +183,7 @@ const Templates = () => {
                         >
                           <button
                             className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                            onClick={() => {
+                            onClick={() => handleEditClick(item.id)}
-                              setShowMenu(null);
-                              navigate(`/process-step-two/${accountId}/template/${item.id}`);
-                            }}
                           >
                             Edit
                           </button>

src/components/transactions/TransactionView.tsx

@@ -135,7 +135,7 @@ const TransactionView = () => {
                                                             <AiFillSignature className='absolute left-[-30px] text-[1rem]' />
                                                             <p className='text-black font-semibold'>{recipient.status}</p>
                                                         </div>
-                                                        {recipient.email === user.email &&
+                                                        {recipient.email === user.email && recipient.status !== "COMPLETED" &&
                                                             <p
                                                             onClick={() => handleNavigateToSign(recipient.id)}
                                                                 className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold'>

src/index.css

@@ -100,6 +100,18 @@ canvas {
   }
 }
 
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
 /* Group Border - START */
 .group-border {
   position: absolute;

src/store/slices/documentSlice.ts

@@ -213,7 +213,13 @@ export const fetchDocuments = createAsyncThunk<
         `/api/accounts/${accountId}/${toggle}/${transactionId}/documents?include_images=true`
       );
 
-      return response.data as Document[];
+      const data = response.data as Document[];
+
+      if (data.length === 0 && window.location.pathname.includes('/process-step-two')) {
+        window.location.href = window.location.href.replace("process-step-two", "process-step-one") // ✅ navigate using window
+      }
+
+      return data;
     } catch (error: any) {
       return rejectWithValue(error.response?.data || 'Failed to fetch documents');
     }

src/store/slices/selectedRecipientsSlice.tsx

@@ -437,6 +437,8 @@ export const removeRecipientAsync = createAsyncThunk<
 
             const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
 
+            console.log(`Line 440 :  ${basePath}/${recipientId}`)
+            // return
             if (recipientId) {
                 await api.delete(`${basePath}/${recipientId}`);
                 return recipientId;
@@ -463,7 +465,13 @@ export const fetchRecipients = createAsyncThunk<
             const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
             const response = await api.get(basePath);
 
-            return response.data as Recipient[];
+            const data = response.data as Recipient[];
+
+            if (data.length === 0 && window.location.pathname.includes('/process-step-two')) {
+                window.location.href = window.location.href.replace("process-step-two", "process-step-one") // ✅ navigate using window
+            }
+
+            return data as Recipient[];
         } catch (err: any) {
             return rejectWithValue(err.response?.data || "Failed to fetch recipients");
         }
@@ -475,17 +483,20 @@ const selectedRecipientsSlice = createSlice({
     initialState,
     reducers: {
         addRecipient: (state, action: PayloadAction<Recipient>) => {
-            for (const recipient of state.recipients) {
+
-                if (recipient.email === action.payload.email) {
+            // Checking if meail already exist - START
-                    toast.dismiss();
+            // for (const recipient of state.recipients) {
-                    toast.error("Email already exists !", {
+            //     if (recipient.email === action.payload.email) {
-                        position: "bottom-right",
+            //         toast.dismiss();
-                        autoClose: 5000,
+            //         toast.error("Email already exists !", {
-                        theme: "light",
+            //             position: "bottom-right",
-                    });
+            //             autoClose: 5000,
-                    return state;
+            //             theme: "light",
-                }
+            //         });
-            }
+            //         return state;
+            //     }
+            // }
+            // Checking if meail already exist - END
 
             if (action.payload.type === recipientType.INPERSONSIGNER) {
                 state.signingOrder = true;
@@ -524,6 +535,9 @@ const selectedRecipientsSlice = createSlice({
         removeSelectedRecipient: (state, action: PayloadAction<Recipient>) => {
             state.recipients = state.recipients.filter((recipient) => recipient.uuid !== action.payload.uuid);
         },
+        removeAllRecipients: (state) => {
+            state.recipients = [];
+        },
         addColorsToRecipient: (state) => {
             for (const [index, recipient] of state.recipients.entries()) {
                 recipient.color = colors[index];
@@ -630,6 +644,7 @@ export const {
     setSelectedRecipients,
     toggleToTemplates,
     removeSelectedRecipient,
+    removeAllRecipients,
     setSigningOrder,
     addColorsToRecipient,
     updateRecipientIds,

src/utlity/JoyRideTour.tsx

@@ -49,7 +49,6 @@ const JoyrideController = () => {
             ),
             placement: "left",
             disableBeacon: true,
-
           },
           {
             target: "#start-now-upload-con",
@@ -63,7 +62,6 @@ const JoyrideController = () => {
             ),
             placement: "top",
             disableBeacon: true,
-
           },
         ];
       } else if (location.pathname.includes("/process-step-one")) {
@@ -200,6 +198,12 @@ const JoyrideController = () => {
     }
   };
 
+  if(window.location.href.includes("template")) {
+    return (<></>)
+  } else {
+    return (<></>)
+  }
+
   return (
     <Joyride
       steps={steps}