App Navigation Update

src/components/dashboard/Dashboard.tsx

@@ -137,7 +137,7 @@ function Dashboard() {
                                 {/* 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"
+                                    className="absolute top-2 right-2 text-gray-500 hover:text-gray-100"
                                     aria-label="Close"
                                 >
                                     <IoClose className="text-2xl" />

src/components/process/processStepTwo/CloseCofirmationModal.tsx

@@ -0,0 +1,49 @@
+const CloseConfirmationModal: React.FC<{ open: boolean, onClose: () => void, onConfirm: () => void }> = ({
+    open,
+    onClose,
+    onConfirm,
+}) => {
+
+    if (!open) return <></>;
+
+    return (
+        <div className="fixed inset-0 z-100 flex items-center justify-center">
+
+            {/* Backdrop */}
+            <div
+                className="absolute inset-0 bg-black/40 backdrop-blur-sm"
+                onClick={onClose}
+            />
+
+            {/* Modal */}
+            <div className="relative z-10 w-full max-w-sm rounded-sm bg-white p-6 shadow-2xl">
+
+                <h2 className="text-lg font-semibold text-slate-800">
+                    Leave this page?
+                </h2>
+
+                <p className="mt-2 text-sm text-slate-600">
+                    Your progress may not be saved.
+                </p>
+
+                <div className="mt-6 flex justify-end gap-3">
+                    <button
+                        onClick={onClose}
+                        className="rounded-sm border border-slate-300 px-4 py-2 hover:bg-slate-100 cursor-pointer"
+                    >
+                        Cancel
+                    </button>
+
+                    <button
+                        onClick={onConfirm}
+                        className="rounded-sm bg-[var(--primary)] px-4 py-2 text-white cursor-pointer"
+                    >
+                        Confirm
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CloseConfirmationModal;

src/components/process/processStepTwo/NavTwo.tsx

@@ -3,10 +3,10 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../../store/store'
 
-import { FaCheck, FaPaste, FaRegCopy, FaSave, FaSignature } from 'react-icons/fa'
+import { FaAngleRight, FaCheck, FaChevronRight, FaPaste, FaRegCopy, FaSave, FaSignature } from 'react-icons/fa'
-import { IoIosDocument } from 'react-icons/io'
+import { IoIosDocument, IoMdArrowRoundBack, IoMdHome } from 'react-icons/io'
 import { LuRedo2, LuTableOfContents, LuUndo2 } from 'react-icons/lu'
-import { MdKeyboardArrowDown } from 'react-icons/md'
+import { MdKeyboardArrowDown, MdOutlineKeyboardBackspace } from 'react-icons/md'
 import { RiResetRightLine } from 'react-icons/ri'
 import { fetchRecipients, recipientType, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice'
 import { fetchDocuments } from '../../../store/slices/documentSlice'
@@ -15,9 +15,11 @@ import { Bounce, toast } from 'react-toastify'
 import { FiChevronDown } from 'react-icons/fi'
 import RecipientsCon from '../processStepOne/RecipientsCon'
 import MessageCon from '../processStepOne/MessageCon'
-import { IoCopy } from 'react-icons/io5'
+import { IoArrowBackSharp, IoCopy } from 'react-icons/io5'
 import { FaRegPaste } from 'react-icons/fa6'
 import ConfirmSendModal from './TransactionSendConfirmationModal'
+import { RxDividerVertical } from 'react-icons/rx'
+import CloseConfirmationModal from './CloseCofirmationModal'
 
 interface NavTwoProps {
     transactionSaving?: boolean;
@@ -108,6 +110,8 @@ const NavTwo: React.FC<NavTwoProps> = ({
     // const [transactionSaving, setTransactionSaving] = useState<boolean>(false);
     const [dotCount, setDotCount] = useState(0);
 
+    const [closePage, setClosePage] = useState(false);
+
     const [isFitDd, setIsFitDd] = useState<boolean>(false)
     const [selFitIndx, setSelFitIndx] = useState<number>(0);
     const [selfUserSign, setSelfUserSign] = useState({ sign: false, recipientId: 0 });
@@ -240,6 +244,12 @@ const NavTwo: React.FC<NavTwoProps> = ({
 
     return (
         <>
+            {closePage && <CloseConfirmationModal
+                open={closePage}
+                onClose={() => setClosePage(false)} // Cancel not closing
+                onConfirm={() => navigate("/")}
+            />}
+
             <ConfirmSendModal
                 confirmSendModalOpen={confirmSendModalOpen.open}
                 confirmSendModalOnClose={() => { setConfirmSendModalOpen({ open: false, confirm: false, loading: false }) }}
@@ -261,11 +271,36 @@ const NavTwo: React.FC<NavTwoProps> = ({
                     </div> */}
 
 
-                    {/* <div>
+                    <div className='flex items-center gap-3'>
-                        <Link to={"/"}>
+                        <div className='flex gap-4 text-xl text-slate-600'>
-                            <img width={120} src="/sme-colored.png" alt="Sign Made Easy" />
+                            <button
-                        </Link>
+                                className='hover:text-[var(--primary)] durartion-300 cursor-pointer'
-                    </div> */}
+                                onClick={() => setClosePage(true)}
+                            >
+                                <IoMdHome />
+                                {/* <img width={120} src="/sme-colored.png" alt="Sign Made Easy" /> */}
+                            </button>
+                            <button
+                                className='hover:text-[var(--primary)] durartion-300 cursor-pointer'
+                                onClick={() => navigate(-1)}
+                            >
+                                <IoArrowBackSharp />
+                            </button>
+                        </div>
+
+                        <div className='w-[1px] h-[28px] bg-slate-200'></div>
+
+
+                        <div className='flex items-center gap-2 text-xs'>
+                            <button
+                                onClick={() => navigate(-1)}
+                                className='underline font-thin cursor-pointer'>
+                                Set Up Transaction
+                            </button>
+                            <FaAngleRight className='font-thin' />
+                            <p className='font-normal'>Add Fields</p>
+                        </div>
+                    </div>
 
 
                     <div