MultiSign

Merge remote-tracking branch 'origin/main'
Merge pull request 'jai' (#13 ) from jai into main
2025-08-01 19:35:02 +05:30 · 2025-07-31 12:32:21 +05:30 · 2025-07-31 06:59:43 +00:00 · 2025-07-31 12:25:44 +05:30 · 2025-07-30 16:27:12 +05:30 · 2025-07-30 16:08:49 +05:30
19 changed files with 517 additions and 302 deletions
--- a/src/components/accounts/Account.tsx
+++ b/src/components/accounts/Account.tsx
@ -19,6 +19,8 @@ import {
    FaCalendarAlt
 } from 'react-icons/fa';
 import TransactionDataTable from "./TransactionDataTable";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store/store";

 interface Transaction {
    id: number;
@ -121,6 +123,8 @@ const Account = () => {

    const [isModalOpen, setIsModalOpen] = useState(false);

+    const userData = useSelector((state: RootState) => state.user);
+
    // const getUserDetails = async () => {
    //     try {
    //         let res = await api.get('/api/user/details')
@ -170,7 +174,7 @@ const Account = () => {
        };

        try {
-            const res = await api.get('/api/dashboard', { params: payload });
+            const res = await api.get(`/api/accounts/${userData.account.id}/dashboard`, { params: payload });
            console.log("Dashboard Data:", res.data);
            const cardDataArray = mapApiDataToCards(res.data);
            setCards(cardDataArray);
@ -245,6 +249,7 @@ const Account = () => {

    return (
        <>
+
            <Cards type="transactions" onOpenModal={handleOpenModal} cards={cards}
                isLoading={isLoading} />

--- a/src/components/accounts/TransactionDataTable.tsx
+++ b/src/components/accounts/TransactionDataTable.tsx
@ -3,23 +3,24 @@ import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
 import api from '../../config/api';
 import { Transaction } from '../transactions/Transactions';
 import { useNavigate } from 'react-router-dom';
+
 import { FaCheck } from 'react-icons/fa';



+
 const formatDate = (timestamp: number) => {
    return new Date(timestamp * 1000).toLocaleString();
 };

 const TransactionDataTable = () => {
+    const navigate = useNavigate()
    const [currentEmailId, setCurrentEmailId] = useState<string | null>('null');
    const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);
    const [activeAccountId, setActiveAccountId] = useState<string | null>(
        JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
    );

-    const navigate = useNavigate();
-
    const fetchTransactions = async () => {
        console.log("fetchTransactions")
        try {
@ -47,6 +48,9 @@ const TransactionDataTable = () => {
        setCurrentEmailId(userDetails?.email)
    }, []);

+
+    
+
    return (
        <>
            {transactions.length > 0 && (
--- a/src/components/contacts/Contacts.tsx
+++ b/src/components/contacts/Contacts.tsx
@ -1,20 +1,32 @@
 import { useEffect, useState, useRef } from 'react';
 import { FaEllipsisV } from 'react-icons/fa';
 import api from '../../config/api';
-import ContactFormModal from './ContactsFormModal';
+import ContactFormModal, { ContactData } from './ContactsFormModal';
 import { Bounce, toast } from 'react-toastify';
 import { IoMdAdd } from 'react-icons/io';
+import LoaderUi from '../../helper/LoaderUi';
+
+type ContactSchema = [{
+    id: number,
+    firstName: string
+    lastName: string
+    email: string
+}]

 const Contacts = () => {
    const activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null');
-    const [contacts, setContacts] = useState([]);
+    const [contacts, setContacts] = useState<ContactSchema>([]);
    const [loading, setLoading] = useState(true);
    const [openMenuId, setOpenMenuId] = useState(null);
    const blurTimeoutRef = useRef(null);
    const [createAndInviteLoader, setCreateAndInviteLoader] = useState(false);
    const [showModal, setShowModal] = useState(false)
+    const [editJsonData, setEditJsonData] = useState({})
+    const [actionStatus, setActionStatus] = useState("")
+    console.log("editJsonData", editJsonData)

    const fetchContacts = async () => {
+        setLoading(true)
        try {
            const res = await api.get(`/api/accounts/${activeAccountId}/contacts`);
            setContacts(res.data.content || []);
@ -33,16 +45,26 @@ const Contacts = () => {

    const handleEdit = (contactId) => {
        console.log('Edit contact:', contactId);
+        let jsonEditData = contacts.find((prev) => prev.id === contactId)
+        setEditJsonData(jsonEditData)
+        setActionStatus("Edit")
+        setShowModal((prev) => !prev)
        setOpenMenuId(null);
    };

    const handleDelete = async (contactId) => {
        console.log('Delete contact:', contactId);
-        setOpenMenuId(null);
-        try {
-           let res = await api.delete(`/api/accounts/{accountId}/contacts/{contactId}`)
-           if (res?.data) {

+        try {
+            let res = await api.delete(`/api/accounts/${activeAccountId}/contacts/${contactId}`)
+            if (res?.data) {
+                toast.error("Contact delete successfully!", {
+                    position: "top-center",
+                    autoClose: 1500,
+                    transition: Bounce,
+                });
+                fetchContacts()
+                setOpenMenuId(null);
            }
        } catch (error) {
            console.log(error)
@ -61,10 +83,15 @@ const Contacts = () => {
        }, 100);
    };

-    const handleContactSubmit = async (data: ContactData) => {
+    const handleContactSubmit = async (data: ContactData, type: "") => {
        try {
+            let res;
            setCreateAndInviteLoader(true);
-            const res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]);
+            if (type === 'Edit') {
+                res = await api.put(`/api/accounts/${activeAccountId}/contacts`, [data])
+            } else {
+                res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]);
+            }
            if (res.status === 200) {
                toast.success('Contact created successfully!', {
                    position: "top-center",
@ -90,6 +117,7 @@ const Contacts = () => {

    return (
        <>
+            <div className='px-1.5'>
                <div className='flex justify-end my-2 cursor-pointer'>
                    <div
                        onClick={() => setShowModal((prev) => !prev)}
@ -114,7 +142,7 @@ const Contacts = () => {
                        <tbody className="divide-y divide-gray-200">
                            {loading ? (
                                <tr>
-                                <td colSpan="4" className="text-center py-4">Loading...</td>
+                                    <td colSpan="4" className="relative h-100"><LoaderUi/></td>
                                </tr>
                            ) : contacts.length === 0 ? (
                                <tr>
@ -142,13 +170,13 @@ const Contacts = () => {
                                                {openMenuId === contact.id && (
                                                    <div className="absolute top-full right-0 mt-1 bg-white border border-gray-200 rounded shadow-lg z-20 min-w-[100px]">
                                                        <button
-                                                        onClick={() => handleEdit(contact.id)}
+                                                            onMouseDown={() => handleEdit(contact.id)}
                                                            className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
                                                        >
                                                            Edit
                                                        </button>
                                                        <button
-                                                        onClick={() => handleDelete(contact.id)}
+                                                            onMouseDown={() => handleDelete(contact.id)}
                                                            className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
                                                        >
                                                            Delete
@ -164,9 +192,10 @@ const Contacts = () => {
                    </table>
                    {showModal &&
                        <ContactFormModal onSubmit={handleContactSubmit}
-                        loading={createAndInviteLoader} setShowModal={setShowModal}/>
+                            loading={createAndInviteLoader} setShowModal={setShowModal} actionStatus={actionStatus} editJsonData={editJsonData} />
                    }
                </div>
+            </div>
        </>
    );
 };
--- a/src/components/contacts/ContactsFormModal.tsx
+++ b/src/components/contacts/ContactsFormModal.tsx
@ -1,5 +1,5 @@
 // ContactForm.tsx
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FaSpinner } from 'react-icons/fa';

 export interface ContactData {
@ -17,9 +17,11 @@ interface Props {
    onSubmit: (data: ContactData) => void;
    loading: boolean;
    setShowModal: () => React.Dispatch<React.SetStateAction<boolean>>
+    actionStatus: string,
+    editJsonData: any
 }

-const ContactFormModal = ({ onSubmit, loading, setShowModal }: Props) => {
+const ContactFormModal = ({ onSubmit, loading, setShowModal, actionStatus, editJsonData }: Props) => {
    const [formData, setFormData] = useState<ContactData>({
        email: '',
        firstName: '',
@ -32,6 +34,21 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal }: Props) => {

    const [errors, setErrors] = useState<{ [key: string]: string }>({});

+    useEffect(() => {
+        if (actionStatus === 'Edit' && editJsonData) {
+            setFormData({
+                email: editJsonData.email,
+                firstName: editJsonData.firstName,
+                lastName: editJsonData.lastName,
+                title: editJsonData.title,
+                company: editJsonData.company,
+                website: editJsonData.website,
+                phones: editJsonData.phones,
+            })
+        }
+    }, [actionStatus, editJsonData])
+
+
    const handleChange = (field: keyof ContactData, value: string) => {
        setFormData((prev) => ({ ...prev, [field]: value }));
        if (errors[field]) {
@ -115,13 +132,22 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal }: Props) => {

    const handleSubmit = async () => {
        const validationErrors = validate();
+        let type = 'Add'
+        let payload = formData
        if (Object.keys(validationErrors).length > 0) {
            setErrors(validationErrors);
            return;
        }
-
        try {
-            await onSubmit(formData);
+            if (actionStatus === 'Edit') {
+                type = 'Edit'
+                payload = {
+                    ...formData,
+                    contactId: editJsonData.id
+                }
+            }
+            await onSubmit(payload, type);
+

            setFormData({
                email: '',
@ -158,7 +184,7 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal }: Props) => {
                                <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">{label}</label>
                                <input
                                    type={field === 'email' ? 'email' : 'text'}
-                                    value={formData[field as keyof ContactData] as string}
+                                    value={(formData[field as keyof ContactData] as string) || ''}
                                    onChange={(e) => handleChange(field as keyof ContactData, e.target.value)}
                                    required={true}
                                    className="px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
@ -172,7 +198,7 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal }: Props) => {
                    <div>
                        <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">Phone Numbers</label>
                        <div className="space-y-2">
-                            {formData.phones.map((phone, index) => (
+                            {formData?.phones?.map((phone, index) => (
                                <div key={index} className="flex flex-col gap-1">
                                    <div className="flex items-center gap-2">
                                        <input
@ -229,8 +255,9 @@ const ContactFormModal = ({ onSubmit, loading, setShowModal }: Props) => {
                                    SAVING...
                                </>
                            ) : (
-                                'SAVE CONTACT'
+                                `${actionStatus?.toUpperCase() || 'SAVE'} CONTACT`
                            )}
+
                        </button>


--- a/src/components/dashboard/Loader.tsx
+++ b/src/components/dashboard/Loader.tsx
@ -1,4 +1,3 @@
-import React from 'react'
 import { LuSignature } from "react-icons/lu";
 import { useSelector } from 'react-redux';
 import { RootState } from '../../store/store';
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@ -14,6 +14,8 @@ import {
    FaFilter,
    FaCalendarAlt
 } from 'react-icons/fa';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../store/store';

 interface CardData {
    title: string;
@ -82,6 +84,8 @@ const Home = () => {
    const [cards, setCards] = useState<CardData[]>([]);
    const [isLoading, setIsLoading] = useState<boolean>(false);

+    const userData = useSelector((state : RootState) => state.user);
+
    console.log("activeAccountId", activeAccountId);
    console.log("cards", cards);

@ -94,7 +98,7 @@ const Home = () => {
        };

        try {
-            const res = await api.get('/api/dashboard', { params: payload });
+            const res = await api.get(`/api/accounts/${userData.account.id}/dashboard`, { params: payload });
            setDashboardData(res.data);
            console.log("Dashboard Data:", res.data);
            const cardDataArray = mapApiDataToCards(res.data);
--- a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
+++ b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
@ -19,7 +19,8 @@ import { Link, useNavigate, useParams } from "react-router-dom";
 import Loader from "../../dashboard/Loader";
 import confetti from 'canvas-confetti'
 import { IoClose } from "react-icons/io5";
-import { IoMdHome } from "react-icons/io";
+import { IoMdClose, IoMdHome } from "react-icons/io";
+import { Bounce, toast } from "react-toastify";

 type Signer = {
    id: number;
@ -48,7 +49,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>
@ -222,6 +223,19 @@ const DocumentCompletionScreen = () => {
    }, [])

    useEffect(() => {
+        // toast.dismiss();
+        // toast.success("Your document has been successfully sent for signature.", {
+        //     position: "top-center",
+        //     autoClose: 1500,
+        //     hideProgressBar: false,
+        //     closeOnClick: false,
+        //     pauseOnHover: true,
+        //     draggable: true,
+        //     progress: undefined,
+        //     theme: "light",
+        //     transition: Bounce,
+        // });
+
        if (showConfetti) {
            const duration = 3000;
            const end = Date.now() + duration;
@ -233,76 +247,63 @@ const DocumentCompletionScreen = () => {
                }

                confetti({
-                    particleCount: 80, // more particles
-                    angle: Math.random() * 360, // fire in random direction
-                    spread: 220, // wider spread
-                    startVelocity: 15, // more power
-                    scalar: 1.2, // bigger pieces (default is 1)
+                    particleCount: 5,    // fewer particles per burst for smoothness
+                    angle: 90,           // falling straight down
+                    spread: 30,          // slight spread
+                    startVelocity: 8,    // gentle falling speed
                    origin: {
-                        x: Math.random(),
-                        y: Math.random() * 0.6,
+                        x: Math.random(), // random horizontal position across the top
+                        y: 0,
                    },
+                    scalar: 1,
                    zIndex: 9999,
                });
-            }, 350); // fire every 150ms
+            }, 50);  // fire every 50ms for continuous effect
+
+            return () => clearInterval(interval);
        }
    }, [showConfetti]);

+
+
    return (
        <>
-            <>
-                {
-                    showConfetti && (
-                        <div className="absolute top-0 left-0 w-full h-full z-[9999] bg-white/80 backdrop-blur-sm flex items-center justify-center">
-                            {/* <Confetti width={width} height={height} /> */}
-
-                            <div className="relative bg-white bg-opacity-90 backdrop-blur-lg border border-green-200 shadow-xl rounded-md px-8 py-6 w-[90%] max-w-sm text-center animate-fade-in-up">
-                                {/* Close Icon */}
-                                <button
-                                    onClick={() => setShowConfetti(false)} // or whatever logic hides the modal
-                                    className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
-                                    aria-label="Close"
-                                >
-                                    <IoClose className="text-2xl" />
-                                </button>
-
-                                {/* Success Icon */}
-                                <FaCheckCircle className="text-green-500 text-5xl mb-4 mx-auto drop-shadow-lg" />
-
-                                {/* Message */}
-                                <h2 className="text-2xl font-semibold text-gray-800 mb-1">Transaction Successful</h2>
-                                <p className="text-gray-600 text-sm">Your transaction has been created and saved successfully.</p>
-                            </div>
-                        </div>
-                    )
-                }
-            </>
            <div className="min-h-screen bg-[var(--mainViewBg)]">
                {/* Top Banner */}
-
-                <div className="w-full px-6 py-2  bg-white border-b rounded-sm border-gray-200">
-                    <div className="max-w-[97vw] mx-auto px-2 py-2.5">
-                        <div className="flex items-center justify-between">
-                            <div className="flex items-center gap-3">
-                                <Link to='/' className="w-5 h-5 text-green-700  rounded-full flex items-center justify-center">
-                                    <IoMdHome className="h-10 w-10" />
+                <div className='fixed top-0 w-full flex items-center justify-between bg-white shadow z-50 px-4 py-3'>
+                    <div className='flex items-center gap-2'>
+                        <Link to={"/"}>
+                            <IoMdHome
+                                className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
+                            />
                        </Link>
-                                {/* <div className="w-5 h-5 bg-white text-green-800 rounded-full flex items-center justify-center">
-                                    <FaCheck className="text-sm" />
-                                </div> */}
-                                <div>
-                                    <h2 className="text-md font-semibold text-gray-900">Awesome! Your document is sent for signature</h2>
-                                </div>
+                        <p className="text-base font-normal text-gray-700 border-l pl-4">🎉 Awesome! The document’s been sent for signature. 🎉</p>
                    </div>
+
+                    <div
+                        id="add-tags-btn-step-one"
+                        className='flex items-center gap-3'>
+
                        <Link to={`/accounts/${accountId}/transactions/${transactionId}`} className="flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]">
                            <FaPen className=" text-white text-md" />
                            <span className="tracking-wide text-white">Edit</span>
                        </Link>
+
+                        {/* <button
+                            onClick={() => handleNextClick(false)}
+                            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>
-                </div>
+
+
+
+
                {(selectedRecipients.length > 0 && selectedDocuments.length > 0) ?
-                    <div className="p-3">
+                    <div className="p-3 mt-[55px]">
                        <div className="max-w-[97vw] mx-auto">
                            {/* Header */}
                            <div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
--- a/src/components/process/processStepOne/ProcessStepOne.tsx
+++ b/src/components/process/processStepOne/ProcessStepOne.tsx
@ -104,7 +104,7 @@ 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,
@ -168,6 +168,7 @@ const ProcessStepOne = () => {
      const recipientsData = selectedRecipients.map((recipient, index) => ({
        id: "id" in recipient ? recipient.id : null,
        routingOrder: "routingOrder" in recipient && recipient.routingOrder ? recipient.routingOrder : 1,
+        provideOwnTags: userData.email === recipient.email ? true : false,
        type: recipient.type,
        firstName: recipient.firstName,
        lastName: recipient.lastName,
@ -225,18 +226,15 @@ const ProcessStepOne = () => {
        }

      } else {
-        dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
+       await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
      }
      dispatch(showLoader("Processing Message..."));

-      console.log(`1/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
-
      let res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, {
        subject: emailDtls.subject, message: emailDtls.message,
        status: "CREATED"
      })

-      console.log("Line 158", res.data)
      if (isSendNow) {
        dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
        setTimeout(() => {
@ -250,7 +248,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 () => {
@ -319,12 +321,22 @@ const ProcessStepOne = () => {
          <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>

--- a/src/components/process/processStepOne/RecipientAddCard.tsx
+++ b/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, TRANSACTION_TEMPLATE_TOGGLE, updateRecipient } from "../../../store/slices/selectedRecipientsSlice";
 import { useDispatch } from "react-redux";
 import { AppDispatch } from "../../../store/store";
 import api from "../../../config/api";
@ -36,7 +36,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)

@ -72,8 +72,8 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
        hostEmail: editRecipient.hostEmail || "",
        roleName: editRecipient.roleName || "",
        type: editRecipient.type || recipientType.SIGNER,
-        allowSenderToEdit: editRecipient.allowSenderToEdit ?? false,
-        allowSenderToDelete: editRecipient.allowSenderToDelete ?? false,
+        allowSenderToEdit: editRecipient.allowSenderToEdit ?? true,
+        allowSenderToDelete: editRecipient.allowSenderToDelete ?? true,
        uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''),
        newOne: editRecipient.newOne ?? false
      });
@ -86,6 +86,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,

    console.log("recipientrecipient", recipient)

+    if(transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
      if (!recipient.lastName || !recipient.email || !recipient.type) return;

      // ✅ Email format validation
@ -95,6 +96,9 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
        return;
      }

+    }
+
+
    if (editCase === 'Edit') {
      dispatch(updateRecipient(recipient));
    } else {
@ -113,8 +117,8 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
      hostEmail: "",
      roleName: "",
      type: recipientType.SIGNER,
-      allowSenderToEdit: false,
-      allowSenderToDelete: false,
+      allowSenderToEdit: true,
+      allowSenderToDelete: true,
      uuid: "",
      newOne: false
    });
@ -275,13 +279,13 @@ 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 */}
            <input
-              required
+              required={recipient.firstName === "" && recipient.lastName === "" && recipient.email === ""} 
              type="text"
              onFocus={() => setOpenContactModal(true)}
              onBlur={handleContactModalBlur}
@ -413,7 +417,7 @@ useEffect(() => {
          onChange={(e) => setRecipients({ ...recipient, firstName: e.target.value })}
        />
        <input
-          required
+          required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
          type="text"
          onFocus={() => handleFocus("lastName")}
          onBlur={handleContactModalBlur}
@ -423,7 +427,7 @@ useEffect(() => {
          onChange={(e) => setRecipients({ ...recipient, lastName: e.target.value })}
        />
        <input
-          required
+          required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
          type="email"
          onFocus={() => handleFocus("email")}
          onBlur={handleContactModalBlur}
@ -437,7 +441,7 @@ useEffect(() => {

      {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 +451,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}
--- a/src/components/process/processStepTwo/DocumentContainer.tsx
+++ b/src/components/process/processStepTwo/DocumentContainer.tsx
@ -20,6 +20,7 @@ import Loader from '../../dashboard/Loader';
 // import { TRANSACTION_TEMPLATE_TOGGLE } from "../../../store/slices/selectedRecipientsSlice";
 import { handleGroupBorderPosition } from '../../../utlity/tagGroupConUtils';
 import { hideLoader, showLoader } from '../../../store/slices/loaderSlice';
+import { IsSendInterface } from './ProcessStepTwo';

 export interface DroppedItemsObj {
    [key: string]: DroppedItem[]
@ -66,12 +67,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(() => {
@ -79,9 +75,12 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
        selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
    }, [])

+    console.log(droppedItems, "line 78")
+
    // FETCHING TAG - START
    useEffect(() => {
        if (selectedRecipients.length === 0) return;
+
        const fetchTags = async () => {
            try {
                const requests = selectedRecipients.map((recipient) =>
@ -181,17 +180,22 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
                    return [recipientId, tags.map(tag => ({ ...tag, update: false }))];
                })
            )
+
+            console.log(droppedItemsUpdateFalse, "Line 182")
+
            setDroppedItems(droppedItemsUpdateFalse);
        } catch (error) {
            console.error("Error submitting recipient tags:", error);
        }
    };

-    // Save Tags - START
-    useEffect(() => {
-        if (isSend === null) return;

-        dispatch(showLoader("Loading ..."))
+    const handleTransactionProcess = async (save: boolean = false) => {
+        console.log(droppedItems, "called Line 189");
+        
+        if (!save && isSend === null) return;
+
+        !save && dispatch(showLoader("Loading ..."))

        let updatedTags = { ...droppedItems }

@ -296,17 +300,37 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {

        tagsData = groupByRecipientId(tagsData);

-        sendTagsToRecipients(tagsData, accountId, transactionId);
+        console.log(tagsData, "Line 302");

-        (async () => {
-            const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
-            // const res = await api.put(`/api/accounts/${accountId}/transactions/${transactionId}`, { status: "SENT" })
-            console.log(res, "Check123")
-            dispatch(hideLoader())
-        })()
+        await sendTagsToRecipients(tagsData, accountId, transactionId);
+
+
+        // SENDING Transaction - START
+        // if (!save) {
+        //     const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
+        //     // const res = await api.put(`/api/accounts/${accountId}/transactions/${transactionId}`, { status: "SENT" })
+        //     console.log(res, "Check123")
+        //     dispatch(hideLoader())
+        // }
+
+        // SENDING Transaction - END
+
+    }
+
+    // Save Tags - START
+    useEffect(() => {
+        handleTransactionProcess()
    }, [isSend])
    // Save Tags - END

+    // useEffect(() => {
+    //     setTimeout(() => {
+    //         setInterval(async () => {
+    //             await handleTransactionProcess(true);
+    //         }, 8000)
+    //     }, 8000)
+    // }, [])
+
    const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
        event.preventDefault(); // Allows the drop event to work
    };
@ -1031,9 +1055,9 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
                                                        const IconComponent = typeToIconMap[type] || <FaQuestionCircle />;
                                                        const selectedRecipient = selectedRecipients.filter((obj, indx) => obj.id === item.recipientId);
                                                        return (
-                                                            <>
+                                                            <React.Fragment key={index}>
                                                                <div
-                                                                    key={index}
+                                                                    // key={index}
                                                                    draggable="false"
                                                                    className="absolute rounded dropped-item"
                                                                    onClick={() => handleTagClick(key, index)}
@ -1095,6 +1119,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {

                                                                </div>

+                                                                <>
                                                                    {
                                                                        "group" in item && item.group && "isGroupExist" in item && !item.isGroupExist &&
                                                                        <>
@ -1107,8 +1132,9 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
                                                                        </>

                                                                    }
-
                                                                </>
+
+                                                            </React.Fragment>
                                                        )
                                                    }

@ -1151,7 +1177,11 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {

            </div >

-            {selectedTag && <RightSideBar selectedTag={droppedItems[selectedTag.key][selectedTag.index]} setDroppedItems={setDroppedItems} selTagKey={selectedTag.key} selTagIndx={selectedTag.index} DirectionalControlsProps={{
+                {
+                    console.log(selectedTag, droppedItems, "Line 1175")
+                }
+
+            {selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && <RightSideBar selectedTag={droppedItems[selectedTag.key][selectedTag.index]} setDroppedItems={setDroppedItems} selTagKey={selectedTag.key} selTagIndx={selectedTag.index} DirectionalControlsProps={{
                onMove: directionalControlsHandler,
                onPositionChange: handleDirectPositionChange,
                disabled: false,
--- a/src/components/process/processStepTwo/NavTwo.tsx
+++ b/src/components/process/processStepTwo/NavTwo.tsx
@ -7,10 +7,11 @@ import { FaCheck, FaSignature } from 'react-icons/fa'
 import { IoIosDocument } from 'react-icons/io'
 import { LuTableOfContents } from 'react-icons/lu'
 import { MdKeyboardArrowDown } from 'react-icons/md'
-import { RiResetLeftLine, RiResetRightLine } from 'react-icons/ri'
+import { 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;
@ -65,27 +66,83 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen

    const [isFitDd, setIsFitDd] = useState<boolean>(false)
    const [selFitIndx, setSelFitIndx] = useState<number>(0);
+    const [selfUserSign, setSelfUserSign] = useState({ sign: false, recipientId: 0 });

    const navigate = useNavigate()

    const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
    const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
+    const userDetails = useSelector((state: RootState) => state.user);

    useEffect(() => {
-        selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
-        selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
+        if (selectedRecipients.length || selectedDocuments.length) return;
+        (async () => {
+            selectedRecipients.length === 0 && await dispatch(fetchRecipients({ accountId, transactionId }));
+            selectedDocuments.length === 0 && await dispatch(fetchDocuments({ accountId, transactionId }));
+        })()
    }, [])

+    useEffect(() => {
+        if (selectedRecipients.length > 0) {
+            let minRoutingOrder: number = Infinity;
+            let userEmailPresent = {
+                present: false,
+                routingOrder: 0,
+                recipientId: 0
+            };
+            // Getting Minimum RoutingOrder
+            for (let i = 0; i < selectedRecipients.length; i++) {
+                const recipient = selectedRecipients[i]
+                if (recipient.routingOrder < minRoutingOrder) {
+                    minRoutingOrder = recipient.routingOrder;
+                }
+
+                if (recipient.email === userDetails.email) {
+                    userEmailPresent.present = true;
+                    userEmailPresent.routingOrder = recipient.routingOrder;
+                    userEmailPresent.recipientId = recipient.id;
+                }
+            }
+
+            if (userEmailPresent.present && userEmailPresent.routingOrder === minRoutingOrder) {
+                setSelfUserSign({ sign: true, recipientId: userEmailPresent.recipientId })
+            }
+        }
+    }, [selectedRecipients])
+
    const [nav2RecToggle, setNav2RecToggle] = useState<boolean>(false);
    const [nav2DocToggle, setNav2DocToggle] = useState<boolean>(false);

-    function handleSend() {
+    function handleSend(isSignSend: boolean = false) {
        // dispatch(showLoader("Loading ..."));
        if (isSend === null) {
            setIsSend(false);
        }
-        setIsSend(!isSend)
-        navigate(`/document-completion-screen/${accountId}/${transactionId}`)
+        setIsSend(!isSend);
+
+        setTimeout(() => {
+            if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
+                if (isSignSend) {
+                    navigate(`./../../../sign/${selfUserSign.recipientId}`);
+                }
+                //  else {
+                //     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,
+                });
+            }
+        }, 0)
    }

    const handleSetIsFields = (setTo: boolean) => {
@ -107,24 +164,24 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
        zoom(Number(indx), 'zoom-con')
    }, [selFitIndx])

-    useEffect(() => {
-        let timeoutId: number;
-        const timeOutIn = 8000;
+    // useEffect(() => {
+    //     let timeoutId: number;
+    //     const timeOutIn = 8000;

-        const updateLabel = () => {
-            if (document.visibilityState === 'visible') {
-                setTransactionSaving(true);
-                setTimeout(() => {
-                    setTransactionSaving(false);
-                }, 4000)
-            }
-            timeoutId = setTimeout(updateLabel, timeOutIn);
-        };
-        timeoutId = setTimeout(updateLabel, timeOutIn);
+    //     const updateLabel = () => {
+    //         if (document.visibilityState === 'visible') {
+    //             setTransactionSaving(true);
+    //             setTimeout(() => {
+    //                 setTransactionSaving(false);
+    //             }, 4000)
+    //         }
+    //         timeoutId = setTimeout(updateLabel, timeOutIn);
+    //     };
+    //     timeoutId = setTimeout(updateLabel, timeOutIn);

-        // Cleanup on unmount
-        return () => clearTimeout(timeoutId);
-    }, []);
+    //     // Cleanup on unmount
+    //     return () => clearTimeout(timeoutId);
+    // }, []);

    useEffect(() => {
        if (!transactionSaving) return;
@ -265,9 +322,20 @@ 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>
+                    {transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && selfUserSign.sign && <div
+                        id='send-and-sign-dash-btn'
+                        onClick={() => handleSend(selfUserSign.sign)}
+                        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'>
+                            Sign & Send
+                        </p>
+                        <FaSignature className='text-white text-md' />
+                    </div>}



--- a/src/components/process/processStepTwo/ProcessStepTwo.tsx
+++ b/src/components/process/processStepTwo/ProcessStepTwo.tsx
@ -9,10 +9,16 @@ import { RootState } from '../../../store/store';
 import Loader from '../../dashboard/Loader';
 import { hideLoader } from '../../../store/slices/loaderSlice';

+export interface IsSendInterface {
+  send: boolean | null;
+  save: boolean;
+}
+
 const ProcessStepTwo = () => {
  
  const [isFields, setIsFields] = useState(true);
  const [selectedRecipient, setSelectedRecipient] = useState(0);
+
  const [isSend, setIsSend] = useState<boolean | null>(null);
  const globalLoader = useSelector((state: RootState) => state.loader)
  const dispatch = useDispatch();
--- a/src/components/process/processStepTwo/rightSideBar/DirectionalControls.tsx
+++ b/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>
  );
 };
--- a/src/components/templates/Templates.tsx
+++ b/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) {
@ -84,7 +84,10 @@ const Templates = () => {
    }
  }

-
+  const handleEditClick = (templateId: string) => {
+      setShowMenu(null);
+      navigate(`/process-step-one/${accountId}/template/${templateId}`);
+  }

  return (
    <div className="p-3 text-sm">
@ -136,7 +139,15 @@ const Templates = () => {
            </tr>
          </thead>

-          {templates.length > 0 ? (
+          {loading ? (
+            <tbody>
+              <tr>
+                <td colSpan="6" className="relative h-100">
+                  <LoaderUi />
+                </td>
+              </tr>
+            </tbody>
+          ) : templates.length > 0 ? (
            <tbody className="divide-y divide-gray-200">
              {templates.map((item, index) => {
                return (
@ -146,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>
@ -172,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={() => {
-                              setShowMenu(null);
-                              navigate(`/process-step-two/${accountId}/template/${item.id}`);
-                            }}
+                            onClick={() => handleEditClick(item.id)}
                          >
                            Edit
                          </button>
@ -200,18 +208,12 @@ const Templates = () => {
          ) : (
            <tbody>
              <tr>
-                <td colSpan="5">
-                  <div className="relative flex justify-center items-center h-100 w-full">
-                    {/* Pulsing background div */}
-                    <div className="absolute inset-0 bg-gradient-to-r from-gray-200 to-white animate-pulse"></div>
-
-                    {/* Loader stays on top, no animation */}
-                    <LoaderUi classStyle="relative h-16 w-16" />
-                  </div>
+                <td colSpan="6" className="text-center py-10 text-gray-500">
+                  No templates found.
                </td>
-
              </tr>
            </tbody>
+
          )}
        </table>
      </div>
--- a/src/components/transactions/TransactionView.tsx
+++ b/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'>
--- a/src/helper/LoaderUi.tsx
+++ b/src/helper/LoaderUi.tsx
@ -1,19 +1,22 @@
+import { LuSignature } from "react-icons/lu";

 interface StyleProps {
-  classStyle : string
+  classStyle?: string;
 }

-const LoaderUi = ({ classStyle }:StyleProps) => {
+const LoaderUi = ({ classStyle = '' }: StyleProps) => {
  return (
-        <div className={classStyle}>
-            <svg viewBox="0 0 240 240" height="240" width="240" className="pl">
-                <circle strokeLinecap="round" strokeDashoffset="-330" strokeDasharray="0 660" strokeWidth="20" stroke="#000" fill="none" r="105" cy="120" cx="120" className="pl__ring pl__ring--a"></circle>
-                <circle strokeLinecap="round" strokeDashoffset="-110" strokeDasharray="0 220" strokeWidth="20" stroke="#000" fill="none" r="35" cy="120" cx="120" className="pl__ring pl__ring--b"></circle>
-                <circle strokeLinecap="round" strokeDasharray="0 440" strokeWidth="20" stroke="#000" fill="none" r="70" cy="120" cx="85" className="pl__ring pl__ring--c"></circle>
-                <circle strokeLinecap="round" strokeDasharray="0 440" strokeWidth="20" stroke="#000" fill="none" r="70" cy="120" cx="155" className="pl__ring pl__ring--d"></circle>
-            </svg>
-        </div>
-    )
-}
+    <div className={`absolute inset-0 flex items-center justify-center z-50 ${classStyle}`}>
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-black/30 opacity-60"></div>

-export default LoaderUi
+      {/* Loader box */}
+      <div className="relative z-10 bg-[var(--loaderBg)] flex flex-col justify-center items-center gap-2 px-16 py-8 rounded-md shadow-lg">
+        <LuSignature className="text-4xl font-bold animate-text" />
+        <p>Loading...!</p>
+      </div>
+    </div>
+  );
+};
+
+export default LoaderUi;
--- a/src/store/slices/documentSlice.ts
+++ b/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');
    }
--- a/src/store/slices/selectedRecipientsSlice.tsx
+++ b/src/store/slices/selectedRecipientsSlice.tsx
@ -463,7 +463,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 +481,20 @@ const selectedRecipientsSlice = createSlice({
    initialState,
    reducers: {
        addRecipient: (state, action: PayloadAction<Recipient>) => {
-            for (const recipient of state.recipients) {
-                if (recipient.email === action.payload.email) {
-                    toast.dismiss();
-                    toast.error("Email already exists !", {
-                        position: "bottom-right",
-                        autoClose: 5000,
-                        theme: "light",
-                    });
-                    return state;
-                }
-            }
+            
+            // Checking if meail already exist - START
+            // for (const recipient of state.recipients) {
+            //     if (recipient.email === action.payload.email) {
+            //         toast.dismiss();
+            //         toast.error("Email already exists !", {
+            //             position: "bottom-right",
+            //             autoClose: 5000,
+            //             theme: "light",
+            //         });
+            //         return state;
+            //     }
+            // }
+            // Checking if meail already exist - END

            if (action.payload.type === recipientType.INPERSONSIGNER) {
                state.signingOrder = true;
--- a/src/utlity/JoyRideTour.tsx
+++ b/src/utlity/JoyRideTour.tsx
@ -200,6 +200,12 @@ const JoyrideController = () => {
    }
  };

+  if(window.location.href.includes("template")) {
+    return (<></>)
+  } else {
+    return (<></>)
+  }
+
  return (
    <Joyride
      steps={steps}
Author	SHA1	Message	Date
=bhagwanSingh	e7a7bfbed1	MultiSign	2025-08-01 19:35:02 +05:30
=bhagwanSingh	09e7f85e29	Merge remote-tracking branch 'origin/main'	2025-07-31 12:32:21 +05:30
jaipandey	78efdc0829	Merge pull request 'jai' (#13 ) from jai into main Reviewed-on: http://git.hicglobalsolutions.in/BhawanSingh/SME-Web/pulls/13	2025-07-31 06:59:43 +00:00
=bhagwanSingh	19abe70a64	a	2025-07-31 12:25:44 +05:30
JaiPandey425	0cf16a05f0	merge code	2025-07-30 16:27:12 +05:30
JaiPandey425	dd414f1de5	merge code	2025-07-30 16:08:49 +05:30
JaiPandey425	21290040cb	loaderUI	2025-07-30 15:32:44 +05:30
JaiPandey425	7cbd74fc14	loaderUI	2025-07-30 14:15:44 +05:30
jaipandey	ae53054426	Merge pull request 'contact-edit and delete' (#11 ) from jai into main Reviewed-on: http://git.hicglobalsolutions.in/BhawanSingh/SME-Web/pulls/11	2025-07-29 13:58:28 +00:00
JaiPandey425	bdad718c92	contact-edit and delete	2025-07-29 19:05:48 +05:30