src/App.tsx

@@ -49,8 +49,8 @@ const App = () => {
             {/* <Route path="/transactions/:filterParam" element={<Transactions />} /> */}
             <Route path="/templates" element={<Templates />} />
             {/* </Route> */}
+
             <Route path="/contacts" element={<Contacts />} />
-          {/* </Route> */}
 
             <Route path="/s/:page1" element={<Setting />} />
           </Route>

src/components/accounts/Account.tsx

@@ -213,10 +213,6 @@ const Account = () => {
 
     const navigate = useNavigate();
 
-    const handleTransactionClick = (id: number) => {
-        navigate(`/accounts/${activeAccountId}/transactions/${id}`);
-    };
-
     const handleInvite = async (data: { i_accountName: number; email: string; role: string }) => {
         setInviteLoading(true);
         try {

src/components/accounts/TransactionDataTable.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'
 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';
 
 
 
@@ -16,10 +18,12 @@ const TransactionDataTable = () => {
         JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
     );
 
+    const navigate = useNavigate();
+
     const fetchTransactions = async () => {
         console.log("fetchTransactions")
         try {
-            const response = await api(`/api/accounts/${activeAccountId}/transactions`);
+            const response = await api.get(`/api/accounts/${activeAccountId}/transactions?sortBy=lastModifiedAt desc`);
             setTransactions(response.data || []);
         } catch (error) {
             console.error("Error fetching transactions:", error);
@@ -28,6 +32,10 @@ const TransactionDataTable = () => {
 
     const [transactions, setTransactions] = useState<Transaction[]>([]);
 
+    const handleTransactionClick = (id: number) => {
+        navigate(`/accounts/${activeAccountId}/transactions/${id}`);
+    };
+
     useEffect(() => {
         if (activeAccountId) {
             fetchTransactions();

src/components/process/processStepOne/ProcessStepOne.tsx

@@ -65,7 +65,7 @@ const ProcessStepOne = () => {
   console.log("selectedRecipients", selectedRecipients)
 
   useEffect(() => {
-// <<<<<<< HEAD
+    // <<<<<<< HEAD
     // Fetching Transaction Details - START 
     (async () => {
       try {
@@ -75,18 +75,19 @@ const ProcessStepOne = () => {
         console.log("Error - transactions details")
       }
     })()
-    // Fetching Transaction Details - END
+      // Fetching Transaction Details - END
 
-// =======
+      // =======
-    // (async () => {
+      // (async () => {
-    //   const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
+      //   const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
-    //   console.log(res.data);
+      //   console.log(res.data);
-    // })()
+      // })()
-// >>>>>>> origin/main
+      // >>>>>>> origin/main
-    (async () => {
+
-      const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
+      // (async () => {
-      console.log(res.data);
+      //   const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
-    })()
+      //   console.log(res.data);
+      // })()
 
     selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
     selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
@@ -315,9 +316,9 @@ const ProcessStepOne = () => {
             <p className="text-base font-normal text-gray-700 border-l pl-4">Add Recipient and Message</p>
           </div>
 
-          <div 
+          <div
-          id="add-tags-btn-step-one"
+            id="add-tags-btn-step-one"
-          className='flex items-center gap-3'>
+            className='flex items-center gap-3'>
             <button
               onClick={() => handleNextClick(false)}
               className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition"
@@ -364,7 +365,7 @@ const ProcessStepOne = () => {
                   ref={topRef}
                   className={`relative w-full bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none h-screen overflow-hidden' : ''}`}
                 >
-               
+
                   <RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase} topRef={topRef} />
                 </div>
 

src/components/transactions/TransactionView.tsx

@@ -1,5 +1,5 @@
 import { AiFillSignature } from 'react-icons/ai';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { LuGitGraph } from 'react-icons/lu';
 import AccountNav from '../accounts/AccountNav';
 import { useEffect, useState } from 'react';
@@ -7,6 +7,8 @@ import api from '../../config/api';
 import SigningOrderDiagram from '../../SigningOrderDiagram ';
 import { IoCloseOutline } from 'react-icons/io5';
 import { MdEditDocument } from "react-icons/md";
+import { useSelector } from 'react-redux';
+import { RootState } from '../../store/store';
 
 // Sample recipient data — you can replace this with actual API data later
 const recipients = [
@@ -30,8 +32,8 @@ const recipients = [
 
 const TransactionView = () => {
     const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
-    console.log("account" , accountId , transactionId)
+
-    
+    const navigate = useNavigate();
 
     if (!accountId || !transactionId) {
         window.location.href = "/";
@@ -40,6 +42,8 @@ const TransactionView = () => {
 
     const [transactionDetails, setTransactionDetails] = useState(null);
     const [signingOrderModal, setSigningOrderModal] = useState({ open: false });
+    const user = useSelector((state: RootState) => state.user)
+
     console.log(transactionDetails, "line 37");
 
     const fetchData = async () => {
@@ -56,6 +60,11 @@ const TransactionView = () => {
         fetchData()
     }, [accountId, transactionId])
 
+
+    const handleNavigateToSign = (id: number) => {
+        window.open(`./../../../../sign/${id}`)
+    }
+
     return (
         <>
             {transactionDetails &&
@@ -64,17 +73,17 @@ const TransactionView = () => {
                         <div className="w-full px-6 py-4 rounded-tl-sm text-xs border-r-2 border-gray-200 overflow-y-auto">
                             {/* Header */}
                             <h1 className='text-lg font-semibold text-gray-800'>
-                                Complete with Forms Made Easy: <span className='text-slate-600'>{ transactionDetails?.transaction?.subject ?? "Untitled"}</span>
+                                Complete with Forms Made Easy: <span className='text-slate-600'>{transactionDetails?.transaction?.subject ?? "Untitled"}</span>
                             </h1>
 
                             <div className='mt-2'>
                                 {/* new Date(transactionDetails?.transaction?.lastModifiedAt * 1000) */}
-                                <p className='text-slate-600'>From <span className='text-blue-600'>Shanu.R</span></p>
+                                <p className='text-slate-600'>From <span className='text-blue-600'>{transactionDetails?.transaction.createdBy.firstName + " " + transactionDetails?.transaction.createdBy.lastName}</span></p>
                                 <p className=''><span className='text-slate-600 font-semibold'>Last Change on</span> <span className='text-slate-400'>{new Date(transactionDetails?.transaction?.lastModifiedAt * 1000).toISOString()}</span></p>
                                 <p className='text-slate-600'>Created at <span>{new Date(transactionDetails?.transaction?.createdAt * 1000).toISOString()}</span></p>
                             </div>
 
-                            <p className='text-slate-600 text-[0.98rem] mt-2 font-semibold'>Draft</p>
+                            <p className='text-slate-600 text-[0.98rem] mt-2 font-semibold'>{transactionDetails?.transaction.status}</p>
 
                             {/* Buttons */}
                             <div className='my-2 flex gap-2'>
@@ -97,51 +106,66 @@ const TransactionView = () => {
                             <hr className='my-6 border-slate-200' />
 
                             {/* Recipients Section */}
-                            {transactionDetails.recipients.length > 0 && 
+                            {transactionDetails.recipients.length > 0 &&
-                            <div>
+                                <div>
-                                <div className='flex justify-between items-center text-md'>
+                                    <div className='flex justify-between items-center text-md'>
-                                    <h2 className='text-lg font-semibold text-gray-800 cursor-pointer'>Signers</h2>
+                                        <h2 className='text-lg font-semibold text-gray-800 cursor-pointer'>Signers</h2>
-                                    <p className='font-bold flex items-center gap-1.5 text-slate-800 cursor-pointer' onClick={() => setSigningOrderModal({ ...signingOrderModal, open: true })}>
+                                        <p className='font-bold flex items-center gap-1.5 text-slate-800 cursor-pointer' onClick={() => setSigningOrderModal({ ...signingOrderModal, open: true })}>
-                                        <LuGitGraph className='text-[0.9rem] text-[var(--primary)]' />
+                                            <LuGitGraph className='text-[0.9rem] text-[var(--primary)]' />
-                                        Signing Graph
+                                            Signing Graph
-                                    </p>
+                                        </p>
-                                </div>
+                                    </div>
 
-                                {/* Recipients List */}
+                                    {/* Recipients List */}
-                                {transactionDetails.recipients.map((recipient, index) => (
+                                    {transactionDetails.recipients.map((recipient, index) => (
-                                    <div key={index}>
+                                        <div key={index}>
-                                        <div className='mt-2 flex justify-between items-center'>
+                                            <div className='mt-2 flex justify-between items-center'>
-                                            <div className='flex gap-8 items-center'>
+                                                <div className='flex gap-8 items-center'>
-                                                <p className='text-slate-600'>{recipient.id}</p>
+                                                    {/* <p className='text-slate-600'>{index+1}</p> */}
-                                                <div>
+                                                    <div>
-                                                    <p className='text-slate-600 font-semibold'>{recipient.name}</p>
+                                                        <p className='text-slate-600 font-semibold'>{recipient.name}</p>
-                                                    <p className='text-slate-600'>{recipient.email}</p>
+                                                        <p className='text-slate-600'>{recipient.email}</p>
-                                                    {recipient.hostEmail !== null && <p className='text-xs'><i><b>Host: {recipient.hostEmail}</b></i></p>}
+                                                        {recipient.hostEmail !== null && recipient.hostEmail !== "" && <p className='text-xs'><i><b>Host: {recipient.hostEmail}</b></i></p>}
+                                                    </div>
                                                 </div>
-                                            </div>
 
-                                            <div className='flex flex-col leading-4.5 items-start text-md text-slate-600 pr-18'>
+                                                <div className='flex flex-col leading-4.5 items-start text-md text-slate-600'>
-                                                <div className='flex gap-1 items-center relative'>
+                                                    <div className='flex gap-3 items-center relative'>
-                                                    <AiFillSignature className='absolute left-[-30px] text-[1rem]' />
+                                                        <div className='flex gap-1 items-center relative'>
-                                                    <p className='text-black font-semibold'>{recipient.status}</p>
+                                                            <AiFillSignature className='absolute left-[-30px] text-[1rem]' />
-                                                </div>
+                                                            <p className='text-black font-semibold'>{recipient.status}</p>
-                                                {recipient.status !== "PENDING" && <p>on {recipient.completedAt}</p>}
+                                                        </div>
-                                                {/* <a href={recipient.viewLink} className='text-blue-600 hover:underline'>
+                                                        {recipient.email === user.email &&
+                                                            <p
+                                                            onClick={() => handleNavigateToSign(recipient.id)}
+                                                                className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold'>
+                                                                Sign
+                                                            </p>}
+                                                    </div>
+                                                    {recipient.status !== "PENDING" && <p>on {recipient.completedAt}</p>}
+                                                    {/* <a href={recipient.viewLink} className='text-blue-600 hover:underline'>
                                                     View signed location
                                                 </a> */}
+                                                </div>
                                             </div>
+                                            <hr className='my-2 border-slate-200' />
                                         </div>
-                                        <hr className='my-2 border-slate-200' />
+                                    ))}
-                                    </div>
+                                </div>
-                                ))}
-                            </div>
                             }
 
 
-                            <div>
+                            {transactionDetails?.transaction?.subject !== "" &&
-                                <h2 className='text-lg mt-4 font-semibold text-gray-800 cursor-pointer'>Message</h2>
+                                <div>
-                                <p className='mt-2 text-slate-600'>{ transactionDetails?.transaction?.message ?? "No Message Found...!"}</p>
+                                    <h2 className='text-lg mt-4 font-semibold text-gray-800 cursor-pointer'>Subject</h2>
-                            </div>
+                                    <p className='mt-2 text-slate-600'>{`${transactionDetails?.transaction?.subject ? transactionDetails?.transaction?.subject : "Not Found"} `}</p>
+                                </div>}
+
+                            {transactionDetails?.transaction?.message !== "" &&
+                                <div>
+                                    <h2 className='text-lg mt-4 font-semibold text-gray-800 cursor-pointer'>Message</h2>
+                                    <p className='mt-2 text-slate-600'>{`${transactionDetails?.transaction?.message ? transactionDetails?.transaction?.message : "Not Found"} `}</p>
+                                </div>}
                         </div>
 
                         <div className='w-[210px] text-xs rounded-sm '>
@@ -152,10 +176,10 @@ const TransactionView = () => {
                                     <img style={{ width: "200px", height: "160px" }} src="https://images.unsplash.com/photo-1746469535771-71a672e8719f?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
                                     <div className='bg-slate-100 p-2 absolute w-full bottom-[0px]'>
                                         <p className='text-[0.7rem] text-slate-500 flex justify-between items-center'>
-                                           <span> 1 of 10</span>
+                                            <span> 1 of 10</span>
-                                           <span className='cursor-pointer'><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16}/></Link></span>
+                                            <span className='cursor-pointer'><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span>
-                                           </p> 
+                                        </p>
-                                        
+
                                     </div>
                                 </div>
 
@@ -165,7 +189,7 @@ const TransactionView = () => {
 
                     </div>
 
-                    {signingOrderModal.open  &&
+                    {signingOrderModal.open &&
                         <div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center overflow-hidden">
                             <div className="flex-col relative justify-center items-center max-w-[80%] max-h-[60vh] h-full ">
                                 <div className="pb-2 text-white flex justify-between items-center bg-[var(--primary)] px-2 py-3 rounded-t-lg">

src/utlity/JoyRideTour.tsx

@@ -144,7 +144,7 @@ const JoyrideController = () => {
             target: "body", // This makes the welcome step show in center of screen
             content: (
               <div>
-                <p>👋 Welcome to SME, Let's Start the tour</p>
+                <p>👋 Hi there! Welcome to SME. Let’s start signing.</p>
               </div>
             ),
             placement: "center",