Added Updates transaction code update and ps1 code update29-07

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 {
@@ -77,16 +77,17 @@ const ProcessStepOne = () => {
     })()
       // Fetching Transaction Details - END
 
-// =======
+      // =======
+      // (async () => {
+      //   const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
+      //   console.log(res.data);
+      // })()
+      // >>>>>>> origin/main
+
       // (async () => {
       //   const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
       //   console.log(res.data);
       // })()
-// >>>>>>> origin/main
-    (async () => {
-      const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
-      console.log(res.data);
-    })()
 
     selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
     selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));

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'>
@@ -112,19 +121,27 @@ const TransactionView = () => {
                                         <div key={index}>
                                             <div className='mt-2 flex justify-between 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>
                                                         <p className='text-slate-600 font-semibold'>{recipient.name}</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 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-3 items-center relative'>
                                                         <div className='flex gap-1 items-center relative'>
                                                             <AiFillSignature className='absolute left-[-30px] text-[1rem]' />
                                                             <p className='text-black font-semibold'>{recipient.status}</p>
                                                         </div>
+                                                        {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
@@ -138,10 +155,17 @@ const TransactionView = () => {
                             }
 
 
+                            {transactionDetails?.transaction?.subject !== "" &&
+                                <div>
+                                    <h2 className='text-lg mt-4 font-semibold text-gray-800 cursor-pointer'>Subject</h2>
+                                    <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 ?? "No Message Found...!"}</p>
+                                    <p className='mt-2 text-slate-600'>{`${transactionDetails?.transaction?.message ? transactionDetails?.transaction?.message : "Not Found"} `}</p>
-                            </div>
+                                </div>}
                         </div>
 
                         <div className='w-[210px] text-xs rounded-sm '>
@@ -153,7 +177,7 @@ const TransactionView = () => {
                                     <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 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>
 
                                     </div>

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",